/* 
* website    www.virtuemailer.com
* version    3.1
* updated    24/02/2011
*
*/

/* MAIN LAYOUT */

body { margin: 0px auto; background: #fff; }
#wrap-site { margin: 0px auto; margin-top: 15px; margin-bottom: 15px; width: 986px; }
#nav { float: left; width: 737px; height: 36px; padding-top: 49px; position: relative; z-index: 20; }
  .envelope { background:url(../images/bg-nav.jpg) no-repeat left; }
#logo { float: right; width:230px; height: 85px; padding-left: 19px; }
#banner { clear:both; margin: 0px auto; width: 947px; height: 237px; padding: 0px 20px 0px 19px; overflow: hidden; position: relative; z-index: 1; }
  .banner-green {background:url(../images/bg-banner.jpg) no-repeat; }
  .banner-blue {background:url(../images/bg-banner-blue.jpg) no-repeat; }
 #banner-slideshow { width: 346px; height: 237px; }
 #banner-wrap { width: 581px; height: 237px; }
   .left {float: left; padding-right:0px;}
   .right {float: right; padding-left:0px;}
   #banner-body { float: left; width: 342px; height: 196px; padding-right: 10px; overflow: hidden; }
   #banner-quote { float: right; width: 209px; padding: 12px 0px 0px 20px; overflow: hidden; }
#breadcrumbs { clear: both; margin: 0px auto; width: 946px; padding: 0px 20px; height: 40px; overflow: hidden; }
#frame-top { clear: both; margin: 0px auto; width: 986px; height: 20px; }
#wrap-content { margin: 0px auto; width: 946px; min-height: 380px; padding: 0px 20px 0px 20px; background: url(../images/frame-middle.gif) no-repeat; }
 #col1 { float:left; width:229px; padding-right: 10px; }
 #col2 { float:left; width:229px; padding-right: 10px; }
 #col3 { float:left; width:229px; padding-right: 10px; }
 #col4 { float:left; width:229px; }
 #col12, #col23 { float:left; width:458px; padding-right: 10px; }
 #col13 { float:left; width:707px; padding-right: 10px; }
 #col14 { float:left; width:946px; }
 #col24 { float:left; width:707px; }
 #col34 { float:left; width:448px; }
 #spacer { clear: both; margin: 0px auto; width: 946px; height:40px; }
#frame-bottom { clear: both; margin: 0px auto; width: 986px; height: 16px; }
#social-media { clear: both; margin:0px auto; width:946px; padding: 5px 20px; }
div.clearing { clear: both; }

/* Nav Styling */
#nav ul { font: 0.9em "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; list-style: none; display: inline; margin:0px 0px 0px 0px; padding:0px 20px 3px 20px; border-bottom: 1px solid #b2b2b2; }
#nav ul li { display: inline; margin:0px; padding: 4px 8px; }
#nav a { color: #000; text-decoration: none; }
#nav a:hover { color: #e50000; text-decoration: none; }
#nav a:active { color: #777; text-decoration: none; }
#nav a.on { color: #e50000; text-decoration: none; }

/* Banner Styling */
#banner h1 { width: 581px; height: 41px; display: block; font: 1.35em "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #e30000; font-weight: normal; margin: 25px 0px 0px 0px; }
#banner h2 { width: 581px; height: 41px; display: block; font: 1.35em "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #036; font-weight: normal; margin: 25px 0px 0px 0px; }
#banner h3 { font: 18px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff; margin: 22px 0px 0px 0px; font-weight:normal; /* text-shadow: #004166 1px 1px 2px; */ }
#banner h4 { font: 15px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff; line-height: 22px; margin: 8px 0px 0px 0px; font-weight:normal; /* text-shadow: #004166 1px 1px 2px; */ }
#banner p { font: 13px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff; line-height: 20px; margin: 12px 0px 0px 0px; /* text-shadow: #004166 1px 1px 2px; */ }
#banner ul { margin: 20px 0px 0px 0px; padding: 0px 0px 0px 20px; font: 13px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff; line-height: 20px; /* text-shadow: #004166 1px 1px 2px; */ }
#banner ul li { list-style-image:url(../images/bullet-banner.gif); }
#banner-quote p { font: 12px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff; line-height: 16px; margin: 0px 0px 4px 0px; /* text-shadow: #1f6600 1px 1px 2px; */ }
#banner p.quote { font-size: 15px; line-height: 22px; padding: 10px 0px 5px 0px; }

/* Breadcrumbs Styling */
#breadcrumbs ul { margin: 0px 0px; padding: 12px 0px 0px 0px; font: 11px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #999; float: left; width: 589px; display: block; }
#breadcrumbs ul li { list-style:none; margin: 0px 0px; padding: 0px 3px 0px 0px; display: inline; }
#breadcrumbs a { color: #999; text-decoration: underline; }
#breadcrumbs a:hover { color: #555; text-decoration: none; }
#breadcrumbs a:active { color: #000; text-decoration: none; }
#breadcrumbs img { float: left; border:0; }

/* Content Styling */
#wrap-content h1 { font: 1.35em "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #036; font-weight: normal; margin: 0px; padding: 20px 0px 8px 0px; }
#wrap-content h1 img { margin: 0px 7px 0px 0px; position:relative; top: 6px; }
#wrap-content h2 { margin: 0px 0px 8px 0px; font: 14px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #036; font-weight: bold; }
#wrap-content h2 img { margin: 0px 7px; vertical-align:middle; }
#wrap-content h3 { margin: 2px 0px 0px 0px; font: 12px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #01b1e9; text-transform:uppercase; padding: 0px; line-height: 18px; }
#wrap-content h4 { clear: right; margin: 12px 0px 4px 0px; font: 17px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #01b1e9; font-weight:normal; padding: 0px; }
#wrap-content h5 { margin: 2px 0px 0px 0px; font: 12px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #83a82d; padding: 0px; line-height: 18px; }
#wrap-content h6 { margin: 12px 0 5px 0; font: 14px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #0066cc; font-weight: normal; }
h6 .highlight { font-weight: bold; color: #0066cc; } 
#wrap-content p {  margin: 2px 0px 8px 0px; font: 12px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; padding: 0px; line-height: 18px; }
#wrap-content ul { margin: 4px 0px 8px 0px; padding: 0px 0px 0px 15px; font: 12px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; line-height: 16px; }
#wrap-content ul li { list-style: square; }
#wrap-content ol { margin-top: 4px; font: 12px  "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; line-height: 16px; }
#wrap-content h6 a { color: #01b1e9; }
#wrap-content a { color: #C00; text-decoration: underline; }
#wrap-content a:hover { color: #0066cc; text-decoration: none; }
#wrap-content a:active { color: #555; text-decoration: none; }
#wrap-content p.prompt {color:#999;font-size:11px; padding-left:12px;}
#wrap-content p.hint { font: 11px Georgia, "Times New Roman", Times, serif; font-style:italic; padding:7px; background:#cfe5ae; margin-top:12px;line-height: 16px;}
#wrap-content p.note { font: 11px Georgia, "Times New Roman", Times, serif; font-style:italic; padding:7px; background:#b2dff4; margin-top:12px;line-height: 16px;}
#wrap-content p.note a { color:#000; } 

/* Menu */ 
#wrap-content ul.menu { margin: 40px 20px 20px 0px; padding: 0px 0px; border-top: 1px dotted #999;}
#wrap-content ul li.menu { list-style: none; padding: 0px 0px; margin: 0px 0px; border-bottom: 1px dotted #999; display: block; }
#wrap-content ul li.menu:hover { background: #eee; }
#wrap-content ul li.menu a { color: #000; text-decoration: none; display: block; padding: 7px 7px;  }
#wrap-content ul li.menu a.on { color: #999; }
#wrap-content ul li.menu a.on img { opacity:0.6; }
#wrap-content p.menu { margin-right: 20px; margin-bottom: 20px; }
#wrap-content .space { margin-top: 30px; }
#wrap-content ul.menu img { border:0; float: left; margin: 0px 5px 0px 0px; display: block; position:relative; top:-1px; width: 18px; height: 18px; } 

/* Social Media */
#social-media h4 { font: bold 0.70em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color:#4d4b4a; padding: 0px; margin: 1px 0px 12px 0px; line-height:21px; width: 210px; float: left; }
#social-media h5 { font: 0.65em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; font-weight:normal; color:#4d4b4a; padding: 15px 20px 0px 0px; margin: 1px 0px 12px 0px; line-height:13px; width: 85px; float: right; }
#social-media p { clear: both; font: 11px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #aaa; border-top: 1px dotted #ccc; padding: 10px 0px; margin-top: 20px; }
#social-media img { display: inline-block; vertical-align:middle; border:0; }
#social-media form.subForm { display: block; float: left; width: 257px; }
#social-media form.subForm label { font: bold 0.70em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color:#4d4b4a; padding: 0px; margin: 0px 0px 0px 0px; width: 37px; display:inline-block; }
#social-media .textfield { background: #e5e5e3; border: 1px solid #b3b3b1; height:12px; padding: 2px 3px 2px 3px; margin: 0px 0px 0px 0px; width: 130px; }
#social-media .btnGo { margin-left: 3px; }
#social-media .btnMedia { position:relative;vertical-align:middle;top:0px;margin-right:8px; }
#social-media a { color: #4d4b4a; text-decoration: underline; }
#social-media a:hover { color: #e50000; text-decoration: none; }
#social-media a:active { color: #000; text-decoration: none; }
#social-media p a { color: #aaa; text-decoration: underline; }
#social-media p a:hover { color: #e50000; text-decoration: none; }
#social-media p a:active { color: #000; text-decoration: none; }
#social-media img { float: left; }

/* Misc. */
#wrap-content .image-right { float:right; clear: right; }
#wrap-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; }
#wrap-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; }
#wrap-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; }
#wrap-content .btnSubmit { margin: 5px 0px 0px 0px; }
#wrap-content .btnReset { background-image: url(../images/btn-reset.gif); border: none; width: 64px; height: 24px; }
#wrap-content .btnSubscribe { background-image: url(../images/btn-subscribe.gif); border: none; width: 76px; height: 24px; }
#wrap-content .images { 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; padding: 0px 10px 30px 0px; clear: left; width:32px; height: 32px; }
.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;}
.design-gallery { border: 1px dotted #666; padding: 1px; margin: 5px; }
.bigtick { list-style-image:url(../images/tick.gif) }
.bigcross { list-style-image:url(../images/cross.gif) }
#gallery p { margin: 0; font: 11px "Lucida Grande", "Tahoma", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #888; margin: 4px 0px; text-align: center; }
#gallery images { border: 1px dotted silver; }
#map_canvas { text-align: center; font: 0.80em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color:#e50000; }
.border0 { border: none; }

#portfolio { margin: 0px auto; }
.portfolio { width: 155px; height: 163px; padding: 2px; border: 2px solid #ccc; margin: 10px 10px 0px 0px; }
#portfolio images:hover { border: 2px solid #0066cc; }

#gallery a { color: #666; text-decoration: none; }
#gallery a:hover { color: #0066cc; text-decoration: none; }
#gallery a:active { color: #333; text-decoration: none; }

/* Enquiry Form */
#wrap-content label { font: bold 13px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color:#000; height: 20px; display: block; padding: 5px 0px 0px 0px; margin: 0px 0px; }
#wrap-content .textbox-login { background: url(../images/textbox.gif) no-repeat; border: none; padding: 3px 5px; width: 172px; height: 17px; font: 11px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color:#5e6866; }
#wrap-content form { width: 190px; overflow: hidden; }
#wrap-content form p { font: 0.70em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color:#000; padding: 0px 0px; margin: 0px 0px 0px 0px; }
#wrap-content form label { font: 0.70em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; font-weight: normal; color:#000; line-height: 14px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
#wrap-content form .textbox { border: 1px solid #4d4b4a; padding: 3px 3px; height: 15px; width: 182px; margin: 0px 0px 5px 0px; font: 0.70em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color: #666; }
#wrap-content form .textarea { border: 1px solid #4d4b4a; padding: 3px 3px; height: 80px; width: 182px; margin: 0px 0px 5px 0px; font: 0.70em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color: #666; }
#wrap-content form select { margin: 0px 0px 5px 0px; }
#wrap-content form .btnSubmit { border:0; background:#de000a; color:#fff; padding: 0 0 0 0; margin: 4px 0px; }