/*----------------------------------------------------------------------------------------------------------------------------------------------------------- CSS for First Alert - Main Stylesheet Author: Alison Lee (alisonlee@silktide.com) / Silktide Ltd Created: 03/03/2008 -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Global Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* commented backslash hack \*/ html, body { height: 100%; } /* end hack */ body { font: 70% verdana, arial, helvetica, sans-serif; text-align: center; padding: 0; margin: 0;} h1 { font: bold 1.6em arial, verdana, helvetica, sans-serif; color: #ea1f23; padding-bottom: 5px; border-bottom: 1px solid #e8e8e8; margin: 15px 0; } h2 { font: bold 1.4em arial, verdana, helvetica, sans-serif; color: #ea1f23; margin: 15px 0 5px; } h3 { font: bold 1.2em arial, verdana, helvetica, sans-serif; color: #ea1f23; margin: 10px 0; } p, li { font-size: 1.0em; line-height: 1.8em; } fieldset { padding: 10px; margin-bottom: 20px; } legend { font-size: 1.2em; letter-spacing: 1px; text-transform: uppercase; color: #ea1f23; padding: 0 10px; } span.faq-q { font-family: Times New Roman; color: #666; font-size: 1.4em; } span.faq-question { font-weight: bold; color: #ea1f23; } span.faq-question:hover { text-decoration: underline; } a, a:visited { color: #ea1f23; text-decoration: none; } a:hover, a:active { color: #000; } hr { height: 1px; background-color: #e8e8e8; color: #e8e8e8; border: 0; margin: 15px 0; } img { border: 0; } form, table { background: transparent; font-size: 1.0em; } .tablestyle { border-collapse: collapse; } .tablestyle td, .tablestyle th { vertical-align: top; padding: 5px 5px 5px 0; } .tableborder td, .tableborder th { vertical-align: top; padding: 5px; border: 1px solid #e8e8e8; } .filetable td { vertical-align: middle; padding: 5px 10px 5px 0; } .clear { height: 0; clear: both; font-size: 0.1em; line-height: 0.1em; padding: 0; margin: 0; } .right { float: right; } .left { float: left; } .imgright { float: right; margin: 0 0 20px 20px; } .imgleft { float: left; margin: 0 20px 20px 0; } .widthwrapper { width: 100%; } .padding { padding: 20px; } .displayblock { display: block; } #accessibility { display: none; } /* Layout Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #container { width: 968px; min-height: 100%; height: auto; background: #fff url("templatefiles/body-bg.jpg") repeat-y top center; text-align: left; margin: 0 auto -50px; } /* margin-bottom to match #clearfooter */ * html #container { height: 100%; } #header { height: 112px; position: relative; background: #e51a16 url("templatefiles/header-bg.jpg") no-repeat top left; border-bottom: 1px solid #fff; margin: 0 4px; } /*#nav { height: 35px; background: #fb0b0a url("templatefiles/nav-bg.jpg") repeat-x top left; border-bottom: 1px solid #fff; margin: 0 4px; }*/ #contentwrapper { margin: 0 4px; } #content { padding: 0 15px; margin-right: 300px; } #sidecol { width: 290px; float: right; margin: 0 5px 0 0; } #homelink { float:left; margin:8px 0 0 25px; } #clearfooter { clear: both; height: 50px;} /* height to match height + padding + margin etc in #footer */ #footer { width: 960px; height: 30px; clear: both; background-color: #db291d; text-align: left; margin: 20px auto 0; } /* Header Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header #logo { position: absolute; top: 10px; left: 15px; } #header #strapline { position: absolute; top: 80px; left: 20px; font: bold 1.5em arial, verdana, helvetica, sans-serif; letter-spacing: 2px; font-style: italic; text-transform: uppercase; color: #fff; margin: 0; } #header #flags { width: 62px; position: absolute; top: 8px; right: 10px; text-align:right; } #header #flags a span { display: none; } /*#header #flags a:hover span,*/ #header #flags #showlinks { width: 200px; display: block; position: absolute; right: 65px; text-align: right; color: #fff; z-index: 100; } #header #flags #showlinks { display: none; position: absolute; top: 0; line-height: 1.6em; } #header #flags #showlinks a, #header #flags #showlinks a:visited { color: #fff; } #header #flags #showlinks a:hover, #header #flags #showlinks a:active { color: #000; } #header #search { position: absolute; top: 70px; right: 10px; } #search input { width: 120px; border: 1px solid #fff; } #search input.button { width: 26px; height: 20px; background: #fff url("templatefiles/button-bg.jpg") repeat-x top left; border: 0; margin-left: 5px; } /* Navigation Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #nav ul { padding: 8px 0 0; margin: 0 0 0 20px; } #nav ul li { display: inline; font-size: 1.1em; line-height: 20px; list-style-type: none; vertical-align: middle; color: #000; padding: 3px 8px; border-left: 2px solid #fff; } #nav ul li img { vertical-align: bottom; } #nav ul li#firstli { vertical-align: bottom; border-left: 0; } #nav ul li a, #nav ul li a:visited { color: #fff; } #nav ul li a:hover, #nav ul li a:active { color: #000; } ul.subnav { padding: 0 0 0 20px; margin: 10px 0; } ul.subnav li { list-style-type: square; } /* Footer Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #footer p { font-size: 0.85em; line-height: 30px; color: #fff; margin: 0 15px; } #footer p a, #footer p a:visited { color: #fff; } #footer p a:hover, #footer p a:active { color: #000; } /* Content Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #flashbanner { margin: 0; } .productmenu { width:295px; float:left; margin-right:10px; padding-left:5px; min-height:240px; } .productmenu h3 { background: #F4F4F4 url(templatefiles/product_description_header.jpg) repeat-x; margin:0; padding:10px 5px; } .productmenu ul { padding-left:30px; } .productmenu .producticons { overflow:auto; } .productmenu .producticons .icon { float:left; margin-right:8px; } .producticons { } .producticons img { display:inline; } .product-subcontent { float:right; font-size:1.8em; width:275px; } .product-subcontent .buynow { display:block; text-align:center; } .product-subcontent .buynow img { vertical-align:middle; } .product-subcontent .buynow a { padding:10px 5px; } /* Sidecol Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .sidebox { height: 1%; overflow: auto; background: #eeeeee url("templatefiles/sidebox-bg.jpg") repeat-x top left; padding: 5px 10px 0; margin: 5px 0 10px; } .sideboximg { display: block; float: right; margin: 0 -10px 0 0; } .sidebox h2 { margin: 15px 0 20px; } .newsblock { width: 100%; min-height: 45px; padding: 0 0 5px; border-bottom: 1px solid #d4d2d2; margin-bottom: 5px; } .newsblock img { float: left; vertical-align: middle; border: 1px solid #d4d2d2; margin: 0 10px 0 0; } .newsblock p { vertical-align: middle; margin: 0; } .linkblock { width: 100%; min-height: 26px; padding: 0; border-bottom: 1px solid #d4d2d2; margin-bottom: 5px; } .linkblock p { vertical-align: middle; margin: 0; } /* landingpage Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #landingpage #logo { position:absolute; top:50px; left:90px; } #landingpage #content { margin:0 10px; } #landingpage h2 { color:#fff; font-size:2em; font-style:italic; margin:25px 0; } #landingpage h2 a { color:#fff; } #landingpage h2 a:hover { text-decoration:underline; } #landingpage p, #landingpage li { color:#fff; font-size:1.4em; margin-bottom:10px; } #landingpage a { color:#fff; } #landingpage a:hover { color:#fff; text-decoration:underline; } #landingpage .contentbox { width:400px; position:absolute; top:290px; } #landingpage #box1 { left:60px; } #landingpage #box2 { right:0px; }