/*------------------------------------------------------------------------------------ CSS BY Misha Osinovkiy for LIFEWAVE /*-------------------------------------------------------------------------------------*/ /* undo some default styling of common (X)HTML browsers /*------------------------------------------------------------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img,a img,:link img,:visited img {border:0;} address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;} q:before,q:after {content:'';} /* ------------------------ GLOBAL ELEMENTS ------------------------ */ /* ------------------------ type selectors ------------------------ */ body { background:#9caaae url("../images/background.jpg") top repeat-x; text-align:center; font:12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; } blockquote { margin-left:10px; margin-right:10px; } h1 { font-size:1.2em; color:#000; } h2 { font-size:1.1em; color:#000; } h3 { font-size:1.0em; color:#000; } h1 span,h2 span,h3 span { display:none; } a:link,a:visited { color:#2f86af; text-decoration:underline; outline:none; } a:hover,a:active { color:#2f86af; text-decoration:none; outline:none; } /* ------------------------ classes ------------------------ */ .clear { clear:both;} div.clear { height:.01em; overflow:hidden; } img.img-left { float:left; margin:2px 25px 10px 39px;} img.img-right { float:right; margin:5px 92px 10px 55px; } img.about { float:right; margin:5px 35px 10px 55px; border:#d3d3d3 1px solid; } .title {padding:0px 0 0px 0px !important; color:#c33248 !important; font-size:1.1em !important; font-weight:bold !important; } .title2 {padding:0px 0 0px 0px !important; color:#2e73aa !important; font-size:1.0em !important; font-weight:bold !important; } .imagine { font-weight:bold; font-size:1.1em !important; color:#4f91c5 !important;} .home { font-size:1.0em; line-height:15px;} .distname { color:#c33248; font-size:1.2em !important; margin:0px 39px 10px 0px; font-weight:bold;} /* ------------------------------- CONTENT FRAMEWORK ------------------------------- */ /* ------------------------ main framework ------------------------ */ #wrap {width:932px; margin:0 auto; text-align:left;} #bg-wrap {background:url("../images/bg-wrap.jpg") repeat-y; width:932px;margin:0 auto; text-align:left;} /* ------------------------ masthead framework ------------------------ */ #masthead { float:left; position:relative; background:url("../images/masthead.jpg"); height:128px; width:264px; } /* index page link within #masthead */ #masthead a {position:absolute; left:0px; width:264px; top:0px; height:128px; } #masthead a span { display:none;} #distributor-info { float:left; width:668px;} #distinfo { text-align:right; margin-top:57px; margin-right:24px; color:#0f5790; font-weight:bold;} #btn-about { background:url("../images/btn-aboutme.jpg"); width:101px; height:23px; margin-right:0px; margin-top:4px; float:right; position:relative;} #btn-about a {position:absolute;left:0px;width:101px;top:0px;height:23px;} #btn-about a span {display:none;} /* ------------------------ content framework ------------------------ */ #homepage-content { width:932px; height:202px; float:left; background:url("../images/homepage-content-wrap.jpg"); } #inside-content { width:932px; float:left; background:url("../images/homepage-content-wrap.jpg"); } #homepage-content p, #inside-content p {margin:0px 39px 10px 39px; color:#043053;} #inside-content h2 { color:#c33248; font-size:1.2.em; margin:25px 39px 15px 39px;} .ingredients { color:#7f9297!important; font-size:.9em;} .ingredients a:link, .ingredients a:visited { color:#7f9297; text-decoration:underline; outline:none; } .ingredients a:hover, .ingredientsa:active { color:#7f9297; text-decoration:none; outline:none; } #btn-order {background:url("../images/btn-order.jpg"); width:856px; height:131px; margin-left:39px; margin-top:37px; position:relative; } #btn-order a {position:absolute;left:0px;width:856px;top:0px;height:131px; } #btn-order a span {display:none;} #btn-order-preffered {background:url("../images/btn-order-preffered.jpg"); width:268px; height:54px; margin-left:194px; margin-top:17px; position:relative; float:left; } #btn-order-preffered a {position:absolute;left:0px;width:268px;top:0px;height:54px; } #btn-order-preffered a span {display:none;} #btn-order-retail {background:url("../images/btn-order-retail.jpg"); width:268px; height:54px; margin-left:0px; margin-top:17px; position:relative; float:left;} #btn-order-retail a {position:absolute;left:0px;width:268px;top:0px;height:54px; } #btn-order-retail a span {display:none;} #btn-orderhome { background:url("../images/btn-orderhome.jpg"); width:99px; height:23px; margin-right:0px; margin-top:-10px; float:right; position:relative;} #btn-orderhome a {position:absolute;left:0px;width:101px;top:0px;height:23px;} #btn-orderhome a span {display:none;} #btn-orderbig {background:url("../images/btn-orderbig.jpg"); width:139px; height:32px; margin-right:80px; position:relative; float:right; } #btn-orderbig a {position:absolute;left:0px;width:139px;top:0px;height:32px; } #btn-orderbig a span {display:none;} #inside-content ul { padding-left:333px; } #inside-content ul li { padding-left:0px; /* pushes text to the right to display bg img */ color:#043053; list-style:circle; line-height:20px; } /* ------------------------ header framework ------------------------ */ #header-flash { height:312px; background:url("../images/header-flash.jpg"); } /* sets height for the flash header - REMOVE IF NOT USED */ #header-graphic { width:900px; height:312px; margin-left:16px; } /* sets height for all non-flash headers */ body#energy #header-graphic { background:url("../images/header-energy.jpg"); } body#icewave #header-graphic { background:url("../images/header-icewave.jpg"); } body#silent #header-graphic { background:url("../images/header-silent.jpg"); } body#yage #header-graphic { background:url("../images/header-yage.jpg"); } body#sp6 #header-graphic { background:url("../images/header-sp6.jpg"); } body#about #header-graphic { background:url("../images/header-about.jpg"); } body#error #header-graphic { background:url("../images/header-about.jpg"); } body#shop #header-graphic { background:url("../images/header-about.jpg"); } /* ------------------------ subhead framework ------------------------ */ #subhead { height:66px; } /* sets height for all subheads */ #subhead span {display: none;} body#index #subhead { background:url("../images/subhead-index.jpg") top left no-repeat; } body#energy #subhead { background:url("../images/subhead-energy.jpg"); } body#icewave #subhead { background:url("../images/subhead-icewave.jpg"); } body#silent #subhead { background:url("../images/subhead-silent.jpg"); } body#yage #subhead { background:url("../images/subhead-yage.jpg"); } body#sp6 #subhead { background:url("../images/subhead-sp6.jpg"); } body#about #subhead { background:url("../images/subhead-about.jpg"); } body#error #subhead { background:url("../images/subhead-error.jpg"); } body#shop #subhead { background:url("../images/subhead-shop.jpg"); } /* ------------------------ bottom-wrap framework ------------------------ */ /* ------------ must have below column-left and column-right to clear the float ------------ */ #bottom-wrap { background:url("../images/bottom-wrap.jpg"); width:100%; /* fix for Safar */ height:29px; clear:both; /* important - do not remove */ } #bottom-wrap-index { background:url("../images/bottom-wrap-index.jpg"); width:100%; /* fix for Safar */ height:29px; clear:both; /* important - do not remove */ } /* ------------------------footer framework ------------------------ */ #footer {width:420px; margin:0 auto; text-align:center;} #footer p { color:#1e4149; margin-bottom:10px; padding-top:15px;} #footer a:link, #footer a:visited { color:#1e4149; text-decoration:none; } #footer a:hover, #footer a:active { color:#e2e2e2; text-decoration:none;} #footer ul {margin:17px;} #footer li { /* if your li's float, you can adjust border height w/ line-height */ padding:0 5px 0 7px; /* adjusts the spacing between each li display and border-left */ display: inline; border-left: 1px solid #1e4149; line-height:10px; float: left; text-align:center; } #footer li.first { border: none; } /* ------------------------ horizontal sprite nav ------------------------ */ #nav {background:url("../images/nav.jpg") no-repeat; width:932px; height:52px; margin:0; padding:0; } #nav span { display: none; } #nav li, #nav a { height:52px; display:block; } /* change height here also */ #nav li { float:left; list-style:none; _display:inline; position:relative; } #nav-01 { width: 132px; margin-left: 0px;} #nav-02 { width: 185px;} #nav-03 { width: 159px;} #nav-04 { width: 166px;} #nav-05 { width: 130px;} #nav-06 { width: 160px;} /*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */ #nav-01 a:hover { background:url("../images/nav.jpg") -0px -52px no-repeat; } #nav-02 a:hover { background:url("../images/nav.jpg") -132px -52px no-repeat; } #nav-03 a:hover { background:url("../images/nav.jpg") -317px -52px no-repeat; } #nav-04 a:hover { background:url("../images/nav.jpg") -476px -52px no-repeat; } #nav-05 a:hover { background:url("../images/nav.jpg") -642px -52px no-repeat; } #nav-06 a:hover { background:url("../images/nav.jpg") -772px -52px no-repeat; } /*-------------- OPTIONAL - Keeps the hover state on each page based on body id ------------- */ body#index #nav-01 { background:url("../images/nav.jpg") -0px -52px no-repeat; } body#energy #nav-02 { background:url("../images/nav.jpg") -132px -52px no-repeat; } body#icewave #nav-03 { background:url("../images/nav.jpg") -317px -52px no-repeat; } body#silent #nav-04 { background:url("../images/nav.jpg") -476px -52px no-repeat; } body#yage #nav-05 { background:url("../images/nav.jpg") -642px -52px no-repeat; } body#sp6 #nav-06 { background:url("../images/nav.jpg") -772px -52px no-repeat; }