/* Site Layout Styles * Updated: 13 Nov 2008 @ 3:40pm * Author: Matthew Holmes * ---------------------------------------------*/ /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* dark grey = #231f20 */ /* blue = #0095da */ /* yellow = #fae537 */ /* -- 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: #0095da; } a:hover { text-decoration: none; } /* -- TYPOGRAPHY ---------------------------------------*/ h2 { font-size: 2em; margin: 0 0 .5em; } h3 { color: #fae537; font-size: 1.5em; margin: 0 0 .5em; } p { margin: 0 0 1em; } /* -- STRUCTURE ---------------------------------------*/ body { margin: 11px 0; background: #e7e8e9 url(../images/bg-body.gif) repeat-x; color: #333; font: 62.5%/1.6 "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif; } /* -- container */ #container { width: 1000px; margin: 0 auto; } /* -- header */ #header { position: relative; height: 156px; background: url(../images/bg.gif) 0 0 no-repeat; } /* logo */ #header h1 { padding: 37px 0 0 35px; } /* search */ #header form { position: absolute; bottom: 30px; right: 30px; width: 235px; height: 21px; } #header form input { float: left; width: 190px; height: 13px; margin: 0; padding: 4px 5px; border: 0; background: url(../images/bg.gif) 0 -274px no-repeat; color: #231f20; font-size: 1.1em; font-style: italic; } #header form button { float: left; w idth: auto; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-indent: -999em; } #header form button span { position: relative; display: block; width: 32px; height: 21px; margin: -1px 0 0 -3px; padding: 0; background: url(../images/bg.gif) -203px -274px no-repeat; } /* banner */ #header #banner { position: absolute; top: 20px; right: 34px; width: 468px; height: 60px; background: #414142; border: 2px solid #231f20; } /* login */ #header p.login_details { position: absolute; top: 65px; right: 34px; color: #fff; font-size: 1.1em; display: none; } /* -- navigation */ #nav { position: relative; height: 44px; background: url(../images/bg.gif) 0 -156px no-repeat; z-index: 99; } /* nav */ #nav ul.sf-menu { float: left; width: 610px; height: 37px; padding-left: 195px; } #nav ul.sf-menu li { position: relative; float: left; margin: 0; padding: 0; height: 37px; } #nav ul.sf-menu li a { display: block; height: 37px; text-indent: -999em; background-image: url(../images/bg.gif); } #nav ul.sf-menu ul { position: absolute; top: -999em; width: 160px; padding: 4px 0; background: #949494; } #nav ul.sf-menu ul li { float: left; width: 100%; height: auto; } #nav ul.sf-menu li:hover ul, #nav ul.sf-menu li.sfHover ul { top: 37px; left: 0; z-index: 99; } #nav ul.sf-menu li:hover li ul, #header ul.sf-menu li.sfHover li ul { top: -999em; } #nav ul.sf-menu li li:hover ul, #nav ul.sf-menu li li.sfHover ul { top: -999em; } #nav ul.sf-menu li:hover { visibility: inherit; } /* off state */ #nav li a.software { width: 124px; background-position: 0 -200px; } #nav li a.downloads { width: 133px; background-position: -124px -200px; } #nav li a.support { width: 107px; background-position: -257px -200px; } #nav li a.login { width: 89px; background-position: -364px -200px; } #nav li a.buy { width: 157px; background-position: -453px -200px; } /* over state */ #nav li a.software:hover, #nav li a.software-on { width: 124px; background-position: 0 -237px; } #nav li a.downloads:hover, #nav li a.downloads-on { width: 133px; background-position: -124px -237px; } #nav li a.support:hover, #nav li a.support-on { width: 107px; background-position: -257px -237px; } #nav li a.login:hover, #nav li a.login-on { width: 89px; background-position: -364px -237px; } #nav li a.buy:hover, #nav li a.buy-on { width: 157px; background-position: -453px -237px; } #nav ul.sf-menu li li a { padding: 2px 10px; height: auto; background: none; color: #fff; font-size: 1.1em; text-indent: 0; text-decoration: none; } #nav ul.sf-menu li:hover a.software, #nav ul.sf-menu li.sfHover a.software { background-position: 0 -237px; } #nav ul.sf-menu li:hover a.downloads, #nav ul.sf-menu li.sfHover a.downloads { background-position: -124px -237px; } #nav ul.sf-menu li:hover a.support, #nav ul.sf-menu li.sfHover a.support { background-position: -257px -237px; } #nav ul.sf-menu li:hover a.buy, #nav ul.sf-menu li.sfHover a.buy { background-position: -453px -237px; } #nav p { margin: 0; } p#products a { position: absolute; top: 0; left: 0; display: block; width: 191px; height: 37px; margin: 0; text-indent: -999em; } p#products a:hover { background: url(../images/btn-products-over.gif); } p#mycart a { position: absolute; top: 0; right: 0; display: block; width: 191px; height: 37px; margin: 0; text-indent: -999em; } p#mycart a:hover { background: url(../images/btn-mycart-over.gif); } /* -- content */ #content { font-size: 1.1em; } #content .col { float: left; width: 195px; } #content .inner-content { width: 610px; } #content .right { float: right; width: 191px; } /* rounded corners */ .corners { width: 191px; margin: 0 0 .8em; } .tcorners { width: 191px; height: 4px; background: url(../images/bg-tcorners.png) no-repeat; } .icorners { padding: 5px 15px; background: #232021 url(../images/bg-corners.gif) repeat-x; } .menu { padding: 5px 0; } .bcorners { width: 191px; height: 4px; background: url(../images/bg-bcorners.png) no-repeat; } .inner-content .corners { width: 610px; } .inner-content .tcorners { width: 610px; height: 4px; background: url(../images/bg-white-tcorners.png) no-repeat; } .inner-content .icorners { min-height: 450px; padding: 5px 15px 15px; background: #fff; } .inner-content .bcorners { width: 610px; height: 4px; background: url(../images/bg-white-bcorners.png) no-repeat; } #content .col .products ul li { padding: 0 0 10px; text-align: center; } #content .col .cart { padding: 10px 15px; color: #fff; } #content .col .cart p { margin: 0; } button.edit_cart { display: block; width: 77px; height: 31px; margin: 8px 0 0; padding: 0; text-indent: -999em; border: 0; background: url(../images/btn-edit-cart.gif) no-repeat; } button.checkout { display: block; width: 71px; height: 31px; margin: 8px 0 0; padding: 0; text-indent: -999em; border: 0; background: url(../images/btn-checkout.gif) no-repeat; } /* menu */ .menu ul { padding: 0 0 15px; } .menu ul li { width: 191px; border-bottom: 1px solid #0097c1; } .menu ul li a { width: 161px; display: block; padding: 3px 15px; color: #fff; text-decoration: none; } .menu ul li a:hover, .menu ul li.on a { background: #fae537; color: #000; } .menu ul li li { border: 0; } .menu ul ul { padding: 0; } .cart h3 { display: none; } /* -- footer */ #footer { margin: 15px 0; text-align: center; } #footer a { color: #333; } #footer p { font-size: 1.1em; margin: 0; } #footer p#copyright { padding: .5em 0 0; font-size: .9em; } /* -- members login area */ #TB_window div div { position: relative; width: 430px; height: 288px; background: url(../images/bg-login.png) 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: 70px; margin: 0 10px 0 0; color: #fff; font-size: 1.1em; text-align: right; } #TB_window div div form input { width: 200px; border: 1px solid #fff; padding: 1px 0; } #TB_window div div form button { width: 202px; margin: 0 0 0 77px; border: 0; background: none; cursor: pointer; } #TB_window div div a { position: absolute; top: 246px; left: 0; width: 202px; height: 30px; margin: 0; padding: 0; display: block; text-indent: -999em; } /* -- 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: #fff; 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; }