/*----------------------------------------------------------------------------- Screen Style Sheet Author: Dinkum Web Solutions Email: info@dinkumweb.com.au Project: Australian Jockey Boots http://www.jockeyboots.com.au Version: 1.0 -----------------------------------------------------------------------------*/ /* ---IMPORTANT -------------------------------------------------------------- This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. ---------------------------------------------------------------------------*/ /* =CSS reset ------------------------------- -----------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin: 0; } li, dd { margin-left: 0; } fieldset { padding: .5em; } select option { padding: 0 5px; } ul, li { list-style: none; } .hide { display: none; } .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; width: 0; height: 0; font-size: 0; overflow: hidden; } a img, img { border: none; } /* =General (usage throughout the entire site) ------------------------------- -----------------------------------------------------------------------------*/ body { background: #ed1c24 url(../images/image-bgBody.gif); } /* =Typography (Global) ------------------------------------------------------ -----------------------------------------------------------------------------*/ body { font: 62.5%/1.6 Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } p { font: 1.35em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 10px 30px 10px 30px; } p.saleGreen { font: bold 1.45em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #008000; margin: 10px 30px 10px 30px; text-align: center; } p.saleRed { font: 1.35em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #c00000; margin: 10px 30px 10px 30px; text-align: center; } .middle_contentBuyBootsText p { font: bold 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 25px 0 0 0; } p.textImage { font: 1.2em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 0; padding: 0; text-align: center; } p.textQuote { font: italic 1.7em/1.7 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 0; background: url(../images/image-bgQuoteEnd.gif) bottom right no-repeat; } p.textQuoteName { font: 1.7em/4.0 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 0 40px 0 0; text-align: right; } #footer_menu p { font: bold 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 0; padding: 20px 10px 0 10px; text-align: center; } #copyright_left p { font: 1.1em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 0; padding: 0 0 0 20px; } h1 { font: bold 1.6em/1.6 Verdana, Arial, Helvetica, sans-serif; color: #0821aa; margin: 0; padding: 15px 0 10px 0; text-align: left; } h2 { height: 31px; font: bold 1.5em/31px Verdana, Arial, Helvetica, sans-serif; color: #fff; margin: 0 0 0 46px; padding: 0; text-align: left; } h2 span { float: left; } h2 span.titleText { background: #a00000; } h2 span.titleFront { width: 17px; height: 31px; background: url(../images/image-titleFront.gif) no-repeat; } h2 span.titleEnd { width: 31px; height: 31px; background: url(../images/image-titleEnd.gif) no-repeat; } h3 { font: bold 1.5em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 30px 30px 20px 30px; padding: 0; } #middle_side h3 { font: bold 1.5em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 30px auto 20px auto; padding: 0; text-align: center; } h4 { font: bold 1.5em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 0; padding: 0; } h5 { font: bold 1.3em/1.3 Verdana, Arial, Helvetica, sans-serif; color: #ffffff; margin: 0; padding: 0; } div.middle_contentBuyBootsRight ul { margin-left: 20px; } div.middle_contentBuyBootsRight ul li { list-style: disc; } .listAccessibility li { font: 1.1em/1.3 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 5px 50px 0 50px; padding: 0; list-style: disc; } #listNumber li { font: 1.2em/1.3 Verdana, Arial, Helvetica, sans-serif; color: #454444; margin: 15px 50px 0 50px; padding: 0; list-style: decimal; } /* =Layout (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_container { position: relative; width: 773px; margin: 0 auto; padding: 0; text-align: left; background: #fff; } #wrapper_header { position: relative; width: 773px; height: 120px; margin: 0; padding: 0; text-align: left; background: #fff url(../images/image-bgHeader.gif); } #header_logo { position: relative; width: 297px; height: 120px; margin: 0; padding: 0; text-align: left; background: url(../images/image-bgLogo.gif) top left no-repeat; float: left; } #wrapper_image { position: relative; width: 773px; height: 203px; margin: 0; padding: 0; text-align: left; background: #a00000; } #wrapper_middle { position: relative; width: 773px; margin: 0; padding: 0; text-align: left; background: #fcdbdc; } #middle_contentLarge { position: relative; width: 773px; margin: 0; padding: 0; text-align: left; background: #fff; } #middle_content { position: relative; width: 568px; margin: 0; padding: 0; text-align: left; background: #fff; float: left; } .middle_contentBuyBootsLeft { position: relative; height: 300px; margin: 0 0 0 30px; padding: 0; text-align: left; background: #fcdbdc; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; padding: 10px; float: left; display: inline;} .middle_contentBuyBootsRight { position: relative; width: 310px; height: 300px; margin: 0 30px 0 0; padding: 0; text-align: left; background: #fcdbdc; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-bottom-right-radius: 15px; padding: 10px; float: left; } #facebook { float: right; margin: 0 10px 10px 10px; } #googleMap { width: 300px; height: 300px; margin: 20px 0 40px 30px; } iframe { border: 1px solid #a00000; } .middle_contentBuyBootsLeft img { position: relative; margin: 0; } img.newBoots { position: relative; margin: 0; border: 1px solid #a00000; } img.newBoots2 { position: relative; margin: 0 0 0 20px; border: 1px solid #a00000; } .middle_contentImageLeft { position: relative; margin: 0 30px 0 30px; padding: 0; text-align: left; float: left; } .middle_contentImageRight { position: relative; margin: 0 30px 0 40px; padding: 0; text-align: left; float: right; } .middle_contentImageRight img { position: relative; margin: 0; padding: 2px; text-align: left; border: 1px solid #a00000; } #middle_side { position: relative; width: 205px; margin: 0; padding: 0; text-align: left; float: left; } #middle_side img { position: relative; margin: 0 0 0 20px; } #middle_side img.border { position: relative; margin: 0 0 0 20px; padding: 2px; border: 1px solid #a00000; } .middle_quoteImage { position: relative; width: 170px; height: 100px; margin: 0 0 0 20px; padding: 0; text-align: left; float: left; } .middle_quoteImage img { padding: 2px; border: 1px solid #a00000; } .middle_quote { width: 276px; margin: 10px 0 0 0; float: left;} .middle_quoteFront { position: relative; width: 36px; height: 75px; margin: 0 10px 0 30px; padding: 0; text-align: left; background: url(../images/image-bgQuoteFront.gif) top left no-repeat; float: left; } #wrapper_footer { position: relative; width: 773px; height: 69px; margin: 0; padding: 0; text-align: left; } #footer_menu { position: relative; width: 773px; height: 61px; margin: 0; padding: 0; text-align: left; border-top: 1px solid #a00000; } /* =Hidden (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #header_logo span { display: none; } /* =Main Navigation (Global) ------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_menu { position: relative; width: 464px; height: 33px; margin: 85px 0 0 0; padding: 0; list-style: none; font-size: 80%; text-align: left; float: left; } #wrapper_menu ul#menu { position: relative; width: 464px; margin: 0; padding: 0; list-style: none; } #wrapper_menu ul#menu li { position: relative; height: 33px; top: 0; padding: 0; float: left; } ul#wrapper_menu li, ul#menu a { /*\*/overflow: hidden;/**/ height: 33px; display: block; } #wrapper_menu ul#menu li a { text-indent: -9999px; text-decoration: none; } #menuJockey a { left: 0; top: 0; width: 128px; background: url(../images/menu/menu-jockey.gif) top left no-repeat; } #menuBarker a { left: 128px; top: 0; width: 130px; background: url(../images/menu/menu-barker.gif) top left no-repeat; } #menuTestimonials a { left: 258px; top: 0; width: 105px; background: url(../images/menu/menu-testimonials.gif) top left no-repeat; } #menuContact a { left: 363px; top: 0; width: 101px; background: url(../images/menu/menu-contact.gif) top left no-repeat; } #menuJockey a:hover { background: url(../images/menu/menu-jockey.gif) 0 -33px no-repeat; } #menuBarker a:hover { background: url(../images/menu/menu-barker.gif) 0 -33px no-repeat; } #menuTestimonials a:hover { background: url(../images/menu/menu-testimonials.gif) 0 -33px no-repeat; } #menuContact a:hover { background: url(../images/menu/menu-contact.gif) 0 -33px no-repeat; } /* =Sub Navigation ----------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Breadcrumbs -------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Anchors & =Links --------------------------------------------------------- -----------------------------------------------------------------------------*/ #middle_content a:link, #middle_contentLarge a:link, #side_links a:link { color: #a00000; text-decoration: underline; } #middle_content a:visited, #middle_contentLarge a:visited, #side_links a:visited { color: #858585; text-decoration: underline; } #middle_content a:visited:after, #middle_contentLarge a:visited:after, #side_links a:visited:after { content: "\00A0\221A"; font-size: 100%; } #middle_content a:active, #middle_contentLarge a:active, #side_links a:active { color: #a00000; text-decoration: underline; } #middle_content a:hover, #middle_contentLarge a:hover, #side_links a:hover { color: #fff; text-decoration: none; background: #a00000; } #middle_content a.linkExternal:link, #middle_contentLarge a.linkExternal:link { color: #a00000; text-decoration: underline; background: url(../images/image-linkExternal.gif) no-repeat right center; padding-right: 12px; } #middle_content a.linkExternal:visited, #middle_contentLarge a.linkExternal:visited { color: #858585; text-decoration: underline; background: url(../images/image-linkExternal.gif) no-repeat right center; padding-right: 12px; } #middle_content a.linkExternal:visited:after, #middle_contentLarge a.linkExternal:visited:after { content: "\00A0\221A"; font-size: 100%; } #middle_content a.linkExternal:active, #middle_contentLarge a.linkExternal:active { color: #a00000; text-decoration: underline; } #middle_content a.linkExternal:hover, #middle_contentLarge a.linkExternal:hover { color: #fff; text-decoration: none; background: #a00000 url(../images/image-linkExternalOn.gif) no-repeat right center; padding-right: 12px; } #footer_menu a:link, #copyright_left a:link { color: #a00000; text-decoration: underline; } #footer_menu a:visited, #copyright_left a:visited { color: #a00000; text-decoration: underline; } #footer_menu a:hover, #copyright_left a:hover { color: #fff; text-decoration: underline; background: #a00000; } #footer_menu a:active, #copyright_left a:active { color: #a00000; text-decoration: underline; } a.noLink:link { text-decoration: none; } a.noLink:active { text-decoration: none; } a.noLink:visited { text-decoration: none; } a.noLink:hover { text-decoration: none; background: none; } /* =Search ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Forms -------------------------------------------------------------------- -----------------------------------------------------------------------------*/ form.buyForm label { width: 70px; margin: 0 10px 8px 0; font: bold 120%/1.4 Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #454444; float: left; } form.buyForm input[type=image] { margin: 0 0 0 240px; } label { width: 60px; margin: 0 10px 0 30px; font: bold 1.35em/1.4 Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #454444; float: left; } form#contactForm { font: 1.3em/1.6em Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 20px 0 0 0; } form#contactForm div { width:295px; border: 1px solid #990000; background: #d70000; color:#fff; padding: 4px; padding-left: 6px; } .imageForm { margin: 0 20px 0 0; } #contactForm label { width:95%; margin: 0 20px 0 20px; font-weight: bold; text-align: left; } #contactForm textarea { width: 80%; margin: 5px 20px 0 40px; padding: 10px 5px 2px 5px; font: bold 110%/1.1em Verdana, Arial, Helvetica, sans-serif; } #contactForm input { width: 80%; height: 1.3em; margin: 5px 20px 0 40px; padding: 5px 5px 2px 5px; font: bold 110%/1.1em Verdana, Arial, Helvetica, sans-serif; } #contactForm input.small { width: 15%; height: 1.3em; margin: 5px 20px 0 40px; padding: 5px 5px 2px 5px; font: bold 110%/1.1em Verdana, Arial, Helvetica, sans-serif; } #contactForm input.button { width: 213px; height: 50px; margin: 20px 20px 20px 35px; font: bold 110%/1.1em Verdana, Arial, Helvetica, sans-serif; } /* =Tables ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Copyright ---------------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_copyright { position: relative; width: 773px; height: 100px; margin: 0; padding: 0; } #copyright_left { position: relative; width: 587px; height: 16px; margin: 0; padding: 20px 0 0 0; float: left; } #copyright_right { position: relative; width: 166px; height: 16px; margin: 0; padding: 20px 0 0 0; float: left; } .validXHTML { width: 48px; height: 20px; background: url(../images/img-validation.png) 0 0 no-repeat; float: left; display: block; } .validXHTML:hover { background-position: 0 -20px; } .validXHTML span { display: none; } .validCSS2 { width: 41px; height: 20px; background: url(../images/img-validation.png) -48px 0 no-repeat; float: left; display: block; } .validCSS2:hover { background-position: -48px -20px; } .validCSS2 span { display: none; } .siteDWS { width: 77px; height: 20px; background: url(../images/img-validation.png) -89px 0 no-repeat; float: left; display: block; } .siteDWS:hover { background-position: -89px -20px; } .siteDWS span { display: none; } /* end of css */