/* 
* website    www.virtuemailer.com
* version    2.0
* updated    21/01/2010
*
*/

/* MAIN LAYOUT */

body { margin: 0px auto; background: url(../img/bg.gif) repeat-x #d3d5d4; }
#wrapper-header { margin: 0px auto; width: 986px; height: 451px; }
#wrapper { margin: 0px auto; width: 986px; background: url(../img/bg-wrapper.gif) repeat-y; }
#logo { float: left; width:224px; height: 102px; }
#buttons { position: relative; top: 292px; }
#nav { float: right; text-align: right; width: 742px; height: 102px; }
#content { margin: 0px; float:left; min-height: 375px; padding: 20px 30px; width: 660px; }
#feature { margin: 0px; padding: 0px 30px; width: 660px; background: url(../img/bg-wrapper-home.gif) repeat-y; }
#right {margin: 0px; float:right; width:226px; min-height: 375px; padding: 0px 20px; background: url(../img/bg-right.gif) no-repeat; }
div.clearing { clear: both; }
#frame-top { margin: 0px auto; width: 986px; height: 30px; }
#frame-btm { margin: 0px auto; width: 986px; height: 18px; }
#footer { margin: 0px auto; padding: 15px 276px 20px 0px; width: 660px; }

#testimonial { width: 190px; margin-top: 15px; padding: 18px 18px; height: 147px; background: url(../img/testimonial-box.gif) no-repeat; }
#testimonial p { margin: 0px 0px 5px 0px; padding: 0px; font: 11px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; line-height: 16px; }

/* Nav Styling */
#nav p { margin: 20px 10px 4px 10px; font: 11px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #999; padding: 0px; }
#nav p a { color: #999; text-decoration: underline; }
#nav p a:hover { color: #c00; text-decoration: none; }
#nav p a:active { color: #000; text-decoration: none; }
#nav ul { font: 14px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #7a8280; list-style: none; display: inline; margin:0px; padding:0px; }
#nav ul li { display: inline; margin:0px; padding: 0px 8px; }
#nav .sep { position: relative; top: 12px; }
#nav .active { color: #C00; }
#nav a { color: #000; text-decoration: none; }
#nav a:hover { color: #c00; text-decoration: none; }
#nav a:active { color: #7a8280; text-decoration: none; }
#nav .end a { color: #7a8280; text-decoration: none; }
#nav .end a:hover { color: #C00; text-decoration: none; }

.banner-1 { background: url(../img/banners/banner-01.jpg) no-repeat; }

/* Featured Buttons */
#buttons img { border:none; }

/* Home page features */
#feature h2 { font: 21px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #09f; font-weight: normal; margin: 0px; margin-left: 100px; padding: 0px 0px 0px 0px; }
#feature p { margin: 0px; font: 12px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; padding: 4px 0px 8px 100px; line-height: 19px; }
#feature a { color: #c00; text-decoration: none; font-weight: bold; }
#feature a:hover { color: #7e7b66; text-decoration: underline; }
#feature a:active { color: #7e7b66; text-decoration: none; }

/* Content Styling */
#content h1 { clear: both; font: 21px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #09f; font-weight: normal; margin: 0px; padding: 0px 0px 8px 0px; }
h6 .highlight { font-weight: bold; color: #0066cc; } 
#content h2 { clear: right; margin: 12px 0 0px 0; font: 18px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #039; font-weight: bold; }
#content h3 { clear: both; margin-bottom: 8px; font: 12px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #0066cc; font-weight: bold;  padding: 3px 5px 4px 5px; border-top: 1px dotted #999999; border-bottom: 1px dotted #999999; }
#content h4 { background: #f0f0f0; height: 14px; float: left; width: 130px; font: 12px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; font-weight: bold; padding: 4px 6px; margin: 1px 0px 0px 0px; }
#content h5 { background: #f0f0f0; height: 14px; float: left; width: 310px; font: 11px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; font-weight: normal; padding: 4px 6px; margin: 0px; }
#content h6 { margin: 12px 0 5px 0; font: 14px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #0066cc; font-weight: normal; }
#content p { margin: 8px 0 0px 0; font: 12px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; padding: 0px; line-height: 19px; }
#content ul { margin-top: 4px; font: 12px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; line-height: 16px; }
#content li { list-style: square; }

/* Right Content */ 
#right h2 { margin: 27px 0px 6px 0px; font: 14px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #d3d5d4; font-weight: bold; }
#right ul { font: bold 12px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff; margin: 0px 0px; padding: 0px 0px; }
#right ul li { list-style: none; background: url(../img/bg-right-ul-li.gif) no-repeat; margin: 0px; }
#right .active { background: url(../img/bg-right-ul-li-active.gif) no-repeat; padding: 10px 10px 9px 25px; }
#right ul li:hover { background: url(../img/bg-right-ul-li-active.gif) no-repeat; }
#right a { color: #fff; text-decoration: none; padding: 10px 10px 9px 25px; width: 190px; display: block; }
#right a:hover { color: #b2e5ff; text-decoration: none; }
#right a:active { color: #6cf; text-decoration: none; }

/* LOGIN FORM */
#right label {font: bold 12px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff; margin: 5px 0px 0px 0px; }
#right input { border: none; margin: 2px 0px 6px 0px; padding: 4px 3px; width: 219px; height: 15px; background-image: url(../img/right-text-box.gif); }
#right .button { border: none; margin: 2px 0px; padding: 0px; width: 71px; height: 23px; background: none;  }

/* Footer styling */
#footer p { margin: 0px auto; font: 10px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #777; padding: 0px 0px; }
#footer a { color: #777; text-decoration: none; }
#footer a:hover { color: #C00; text-decoration: underline; }
#footer a:active { color: #000; text-decoration: none; }


#gallery p { margin: 0; font: 11px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #888; margin: 4px 0px; text-align: center; }
#gallery img { border: 1px dotted silver; }

#portfolio { margin: 0px auto; }
#portfolio .portfolio { width: 135px; height: 96px; padding: 2px; border: 2px solid #ccc; margin: 10px 10px 0px 0px; }
#portfolio img:hover { border: 2px solid #0066cc; }

/* Links */
#content a { color: #C00; text-decoration: underline; }
#content a:hover { color: #0066cc; text-decoration: none; }
#content a:active { color: #555; text-decoration: none; }
#feature-content a { color: #FFF; text-decoration: underline; }
#gallery a { color: #666; text-decoration: none; }
#gallery a:hover { color: #0066cc; text-decoration: none; }
#gallery a:active { color: #333; text-decoration: none; }

/* Misc. */
#content .textarea { background: #f1f1f1; border: #0066cc 1px solid; padding: 4px 2px; margin: 1px 1px; width: 420px; height: 90px;font: 10px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333; position: relative; top: 0px; }
#content .textbox { background: #f1f1f1; border: #0066cc 1px solid; padding: 4px 2px; margin: 1px 1px; width: 255px; height: 12px;font: 10px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333; position: relative; top: 0px; }
#content .textbox-sml { background: #f1f1f1; border: #0066cc 1px solid; padding: 4px 2px; margin: 0px 1px; width: 55px; height: 12px;font: 10px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333; text-align: right; position: relative; top: 0px; }
#content .btnSubmit { margin: 5px 0px 0px 0px; }
#content .btnReset { background-image: url(../images/btn-reset.gif); border: none; width: 64px; height: 24px; }
#content .btnSubscribe { background-image: url(../images/btn-subscribe.gif); border: none; width: 76px; height: 24px; }
#content .img { margin: 0 5px 0 0; padding: 1px; border: 2px solid #cccccc; float: left; }
hr { border: 0px; border-top: 1px dotted #09f; clear: both; }
.spacer { padding: 0px 1px; font-weight: normal; text-transform: uppercase; }
.icon { float: left; margin: 7px 10px 30px 0px; clear: left; }
.image-right { float: right; margin: 0px 0px 20px 10px; }
.labelText { font: 10px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333; position: relative; top: -2px; }
.thumbs { width: 95px; height: 80px; margin: 0px 15px 10px 0px;}
.web650-gallery { margin-right: 11px; }
.design-gallery { border: 1px dotted #666; padding: 1px; margin: 5px; }
.border0 { border: none; }
.btnMore { border: none; margin: 13px 4px; }
.icon {top: -4px; position:relative; }
.icon-home { position:absolute; float: left; }
.hr-home { clear: both; }
.vspace { margin: 8px 5px; }
.highlight { background: #d9f2ff; border: 5px solid #d9f2ff; }