/** * core.css * CSS File for QuickGems Promo Site. * @package QuickGems * @author Tony Collings * @version 1.0 * @date Oct 2009 */ /* NOTES : Because elements in the header are position: relative; the #content and #footer elements also require this to prevent layering issues in IE * */ /* HTML OVERRIDES ------------------------------------------------------------- */ body { text-align: center; font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; background: #3daaff url('img/qg_rep_grad.jpg') top left repeat-x; margin: 0px; } a {color: #4a1651; text-decoration: none; } a:hover {color: #4a1651; text-decoration: underline; } h1,h2,h3 {} h4 {font-size: 14px; } ul, ol, li { margin: 0px; padding: 0px; } .padding { padding: 1px 10px 0px 15px; } /* MODIFIERS ------------------------------------------------------------- */ .clear {clear: both; line-height: 1px; height: 1px; font-size: 1px; } .blue-text {color: #5ea6df; } .purple-text {color: #762d72; } img.icon {vertical-align: middle; margin-right: 5px; } /* The Halo effect on Quick View (Will not show on IE6 (_background: none) this is deliberate) */ .halo-bg{ position: absolute; width: 33px; height: 40px; } .halo-bg-n{ left: 0; top: -40px; width: 100%; background: url("img/halo/bg_n.png") repeat-x; _background: none; } .halo-bg-ne{ right: -33px; top: -40px; background: url("img/halo/bg_ne.png") no-repeat; _background: none; } .halo-bg-e{ right: -33px; top: 0; height: 100%; background: url("img/halo/bg_e.png") repeat-y; _background: none; } .halo-bg-se{ right: -33px; bottom: -40px; background: url("img/halo/bg_se.png") no-repeat; _background: none; } .halo-bg-s{ left: 0; bottom: -40px; width: 100%; background: url("img/halo/bg_s.png") repeat-x; _background: none; } .halo-bg-sw{ left: -33px; bottom: -40px; background: url("img/halo/bg_sw.png") no-repeat; _background: none; } .halo-bg-w{ left: -33px; top: 0; height: 100%; background: url("img/halo/bg_w.png") repeat-y; _background: none; } .halo-bg-nw{ left: -33px; top: -40px; background: url("img/halo/bg_nw.png") no-repeat; _background: none; } b.rtop, b.rbottom{display:block;background: transparent;} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #d1b4d3;} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} /* LAYOUT ------------------------------------------------------------- */ div#global-wrapper {margin: 0px auto; text-align: left; width: 790px; } div.left-col {float: left; width: 475px; } div.right-col {float: left; width: 315px; /* 790 - 475 */ } /* Header */ div#header{ background: #fff url('img/qg_banner2.jpg') top left no-repeat; width: 790px; height: 148px; /* Dimensions of Graphic */ margin: 0px; clear: both; } a#home-link {display: block; text-decoration: none; width: 300px; height: 110px; clear: both; } a#home-link :hover{ text-decoration: none; } ul#site-nav { display: block; clear: both; height: 24px; list-style-type: none; margin: 14px 0px 0px 169px; padding: 0px; _margin-left: 162px; width: 308px; } ul#site-nav li { display: block; float: left; height: 24px; line-height: 24px; vertical-align: middle; background: #fff url('img/qg_nav_gradient.jpg') top left repeat-x; } ul#site-nav li a {padding: 0px 10px; color: #4a1651; text-decoration: none; border-right: 1px solid #4a1651; } ul#site-nav li a:hover {color: #4a1651; text-decoration: underline; } ul#site-nav li.left-corner {display: block; background: #fff url('img/qg_nav_left.jpg') top right no-repeat; width: 9px; height: 24px; /* Size of Graphic */ padding: 0px; margin: 0px; } ul#site-nav li.right-corner {display: block; background: #fff url('img/qg_nav_right.jpg') top right no-repeat; width: 11px; height: 24px; /* Size of Graphic */ padding: 0px; margin: 0px; } ul#site-nav a.noborder {border: 0px; } ul#video-nav { float: left; display: block; list-style-type: none; margin-left: 25px; height: 22px; margin-top: 126px; /* header.height - 22px; */ width: 200px; } ul#video-nav li {display: block; float: left; height: 22px; line-height: 22px; vertical-align: middle; text-align: center; width: 100px; } ul#video-nav li.tab-on {background: transparent url('img/qg_blue_ovr.jpg') top left no-repeat; } ul#video-nav li.tab-off {background: transparent url('img/qg_blue.jpg') top left no-repeat; } ul#video-nav a{color: #fff; text-decoration: none; } ul#video-nav a:hover {color: #fff; text-decoration: underline; } /* footer */ div#footer { } div.footer-inner {background: #d1b4d3; padding: 8px; color: #fff; padding: 5px 8px; padding-bottom: 0px; height: 18px; } div.footer-copyright {float: left; height: 18px; line-height: 18px; vertical-align: middle; } div.footer-logo {float: right; height: 18px; vertical-align: middle;} div#content {color: #5e5b5b; background-color: #fff; height: 400px; } /* PAGE SPECIFIC ---------------------------- */ /* Homepage */ /* This 'blocks' are for positional purposes... */ body#index div.intro{margin-top: 10px; font-size: 11.2px; } body#index div.intro p {margin: 5px 0px; } body#index div.intro h1 {font-size: 16px; line-height: 16px; display: block; margin: 0px; padding: 0px; } body#index ul.bulleted-callouts{display: block; clear: both; margin-left: 120px; font-size: 11.2px; margin-top: 10px; padding-left: 20px; } body#index div.product-spec{margin-top: 160px; margin-left: 165px; font-size: 10px; } /* END: Positioning */ body#index #content { background: #fff url('img/qg_model.jpg') bottom left no-repeat; } body#index #content div.left-col { padding-left: 200px; width: 275px; /* 485px - padding-left */ } body#index #content div.right-col {text-align: center; _width: 295px; } div#the-video {clear: both; } div#call-out {padding-top: 40px; } #call-out .left {float: left; width: 144px; padding: 10px 0px 0px 10px; } /* Width of Graphic + padding */ #call-out .right {float: left; width: 310px; text-align: center; font-size: 11.2px; } div#price {color: #762d72; margin: 18px 0px; } div#price img {margin-top: 3px; } span#copy {display: block; text-align: left; color: #762d72;} img#buy-now {margin: -3px -3px 0px 0px; } /* Customer Service */ body#customer_service{} body#customer_service #content{ padding: 10px 20px; } /* Email a Friend */ body#email_friend{} body#email_friend #content{ padding: 10px 20px; } div#email-fineprint {font-size: 9px; width: 400px; clear: both; padding-left: 150px; margin: 20px 0px 20px 0px; } /* Buy Now */ body#buy_now{} body#buy_now #content{ padding: 10px 20px; } /* FORMS --------------------------------------------------------------- */ form,label,input,select,textarea {margin: 0px; } form {margin: 0px; } label {display: block; color: #782f81; float: left; width: 150px; font-weight: bold; } input, select, textarea {font-family:Arial, Helvetica, sans-serif; padding: 6px; color: #6f767c; font-size: 12px; float: left; } div.form-field {margin-bottom: 5px; } div.form-buttons {clear: both; padding-left: 150px; /* Width of