/* Site Layout Styles * Updated: 8 Dec 08 @ 9.00am * Author: Matthew Holmes * ---------------------------------------------*/ /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* dark blue = #007d9b */ /* light blue = #00adef */ /* orange = #eb7922 */ /* green = #77a22e */ /* grey = #555 */ /* -- RESET ---------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: inherit; font-family: inherit; list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* -- FIX FLOATS ---------------------------------------*/ .clearfix:after { display: block; clear: both; height: 0; content: "."; visibility: hidden; } * html .clearfix { height: 1%; } *+ html .clearfix { height: 1%; } /* -- LINKS ---------------------------------------*/ a { color: #00adef; text-decoration: none; } a:hover { text-decoration: underline; } /* custom */ #content .sidebar a { color: #fff; text-decoration: underline; } /* -- TYPOGRAPHY ---------------------------------------*/ h3 { margin: 0px; } h4 { margin: 15px 0 5px; } p { margin: 0 0 5px; } /* custom */ h3.stores { margin: 15px 0 5px; } #content .sidebar p { padding: 0 0 0 5px; } /* -- STRUCTURE ---------------------------------------*/ body { color: #555; font: 62.5%/1.6 Helvetica, Arial, sans-serif; } /* -- container */ #container { width: 1024px; margin: 0 auto; } /* -- header */ #header { height: 150px; background: url(../images/bg.gif) 0 0 no-repeat; } /* logo */ #header h1 { float: left; padding: 30px 0 0 35px; } /* slogan */ #header h2 { float: right; padding: 68px 20px 0 0; line-height: 0; } /* search */ #header form { clear: both; float: right; padding: 4px 40px 0 0; } #header form input { float: left; height: 10px; width: 210px; font-size: 1.0em; color: #007d9b; margin-right: 5px; } #header form button { float: left; width: 33px; height: 18px; border: 0; text-indent: -999em; background: url(../images/btn-go.gif) no-repeat; cursor: pointer; } /* -- content */ #content { background: url(../images/bg.gif) 0 -150px no-repeat; } /* sidebar */ #content .sidebar { float: left; width: 191px; padding: 0 0 0 35px; color: #fff; font-size: 1.2em; } #content .sidebar ul { padding: 5px 0; } #content .sidebar li a { text-decoration: none; display: block; padding: 0px 5px 0px 12px; background: url(../images/icon-arrow.gif) 0px 4px no-repeat; font-size: 1.1em; height: 15px; } #content .sidebar li a:hover { text-decoration: underline; } #content .sidebar li li a { padding-left: 25px; background: none; } #content .sidebar .purchases { padding: 10px 0; margin: 0px; } /* mainbar */ #content .mainbar { float: left; width: 758px; padding-left: 22px; } /* banner */ #banner { height: 200px; background: #000; overflow: hidden; } /* navigation */ #nav { float: left; height: 30px; background: #fff; padding: 5px 20px; } #nav li { float: left; padding: 0px 11px; background: url(../images/bg-nav.gif) 0 0 no-repeat } #nav li a { color: #000; font-size: 1.1em; } /* left content */ #content .left { float: left; width: 454px; min-height: 400px; padding: 0 10px; font-size: 1.2em; } #content .left #container_one { width: 465px; height: 200px; } #content .left #container_one img { padding: 10px; } #content .left #products { padding: 10px; line-height: 1.2; } #content .left #products h4 { font-size: 1em; font-weight: bold; margin: 0px; padding-top: 8px; } #content .left #products .noshow_inc_gst { display: none; } #content .left #products ul { margin: 0; padding: 0; overflow: hidden; width: 454px; } #content .left #products ul li { list-style: none; width: 227px; float: left; margin: 0px; padding: 0px;} #content .left #products .prod_link img { float: left; padding: 10px 15px 10px 0px; } #content .left #products span.price, #content .left #products span.code { display: block; } #content .left #products span.code { font-size: 10px; } #content .left #products span.special { display: block; font-weight: bold; color: red; } #content .left #products .prod_link input { display: none; } #content .left #products .prod_link { width: auto; } #content .left #products input { display: none; } /* right content */ #content .right { float: right; width: 220px; padding: 0 20px; } #content .right #container_two { width: 216px; height: 186px; } #content .right p { font-size: 1.2em; } #content .right .input { border: 1px solid #77a22e; } #content .right ol li { margin: 5px 0; height: 20px; } #content .right ol li input { float: left; width: 215px; margin: 3px 0; height: 15px; } button.priceConversionButton { display: none; } #content #member_login { margin: 15px 0px; } #content .user { font-weight: bold; } #content .news { padding: 0 0 15px 12px; font-size: 1.2em; } #content .news li { list-style: disc; color: #555; } #content .news a { color: #555; } /* thickbox for members login */ /* -- members login area */ #TB_window div div { position: relative; width: 430px; height: 288px; background: url(../images/bg-login.jpg) no-repeat; } #TB_window div div form { position: absolute; top: 125px; left: 28px; } #TB_window div div form ol li { list-style: none; margin: 0 0 .75em; padding: 0; } #TB_window div div form ol li label { float: left; display: block; width: 120px; margin: 0 10px 0 0; color: #555; font-size: 1.1em; text-align: right; } #TB_window div div form input { width: 180px; border: 1px solid #ddd; padding: 1px 0; } #TB_window div div form button { width: 140px; margin: 10px 0 0 80px; border: 0; background: none; cursor: pointer; }#TB_window div div form button { width: 162px; margin: 0 0 0 80px; border: 0; background: none; cursor: pointer; } #TB_window div div a { position: absolute; top: 246px; left: 0; width: 200px; height: 32px; margin: 0; padding: 0; display: block; text-indent: -999em; } #TB_window span#error { position: absolute; top: 215px; left: 100px;} /* -- thickbox styles */ #TB_overlay { position: fixed; z-index: 100; top: 0; left: 0; height: 100%; width: 100%; } .TB_overlayMacFFBGHack { background: url(../images/macFFBgHack.png) repeat; } .TB_overlayBG { background: #000; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } #TB_window { position: fixed; z-index: 102; color: #000; display: none; text-align: left; top: 50%; left: 50%; } #TB_window img#TB_Image { display: block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666666; border-left: 1px solid #666666; } #TB_caption { height: 25px; padding: 7px 30px 10px 25px; float:left; } #TB_closeWindow { height:25px; padding:11px 25px 10px 0; float:right; } #TB_closeAjaxWindow { padding: 7px 10px 5px 0; margin-bottom: 1px; text-align: right; float: right; } #TB_ajaxWindowTitle { float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB_title { background-color:#e8e8e8; height:27px; } #TB_ajaxContent { text-align:left; } #TB_ajaxContent.TB_modal{ padding:15px; } #TB_ajaxContent p { padding:5px 0px 5px 0px; } #TB_load { position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } #TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; } #TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px; } /* -- footer */ #footer { background: url(../images/bg.gif) 0 -2333px no-repeat; } #footer p { padding: 35px 0; color: #00adef; font-size: 1.1em; text-align: center; } #loginForm label, #loginForm input { display:block; } #loginForm input.text { margin-bottom:12px; width:95%; padding: .4em; } #loginForm fieldset { padding:0; border:0; margin-top:25px; } .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; }