/* TEMPLESTOCK CSS */ /* GENERIC */ body { margin:0px; background-image: url(lgrey091.gif); } p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#333333; line-height:15px; } h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#333333; line-height:16px; } h2 { font-family: Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#f58025; letter-spacing:1px; } h3 { font-family: Geneva, Arial, Helvetica, sans-serif; font-size:12px; color: #000033; letter-spacing:1px; } a { text-decoration:none; color:#F58025; } a:hover { text-decoration:none; color:#FFFFFF; background-color:#dc7226; } a:visited { text-decoration:none; color:#CC0000; } ul { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#999999; line-height:16px; } /* MAIN CONTAINER */ #container { position:relative; top:15px; margin:auto; width:900px; height:800px; } /* HEADER */ #header { position:absolute; top:0px; width:900px; height:323px; left:0px; border:solid; border-width:1px; background:#FFFFFF } /* BANNER */ #logoplace { position:absolute; top:20px; width:150px; height:50px; left:20px; } #logo { display:block; width:150px; height:50px; background:url(rotadexweblogo.gif) no-repeat 0 0; } #logo:hover { background-position:0 -50px; } #logo span { display:none; } #telnumber { position:absolute; top:72px; width:150px; height:50px; left:20px; background:none; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; color:#000000; } #telnumberondark { position:absolute; top:72px; width:150px; height:50px; left:20px; background:none; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; color:#FFFFFF; } #banner { position:absolute; top:23px; width:900px; height:300px; left:0px; background-repeat:no-repeat; } #search { position:absolute; top:10px; left:625px; width:170px; height:25px; } /* NAVIGATION */ #nav { position:absolute; top:0px; width:805px; height:22px; left:0px; background-color:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:lighter; color:#FFCC00; letter-spacing:1px; text-align:left; } /* DROP DOWN MENU */ .menu {width:805px; height:22px; position:relative; z-index:100;border-right:0px solid #000; font-family:arial, sans-serif;} /* hack to correct IE5.5 faulty box model */ * html .menu {width:805px; w\idth:805px;} /* remove all the bullets, borders and padding from the default list styling */ .menu ul {padding:0;margin:0;list-style-type:none;} .menu ul ul {width:115px;} /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu li {float:left;width:115px;position:relative;} /* style the links for the top level */ .menu a, .menu a:visited {display:block;text-decoration:none; color:#000000; width:115px; height:22px; border:0px solid #000; border-width:0px 0 0px 0px; background:#DC7226; padding-left:0px; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width:94px; w\idth:94px;} /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#999999 url(grey-arrow.gif) no-repeat right;} /* style the second level hover */ .menu ul ul a.drop:hover{background:#DC7226 url(orange-arrow.gif) no-repeat right;} .menu ul ul :hover > a.drop {background:#DC7226 url(orange-arrow.gif) no-repeat right;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:#fea877;} /* style the third level hover */ .menu ul ul ul a:hover {background:#DC7226;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul {visibility:hidden;position:absolute;height:0;top:22px;left:0; width:94px;border-top:0px solid #000;} /* another hack for IE5.5 */ * html .menu ul ul {top:22px;t\op:22px;} /* position the third level flyout menu */ .menu ul ul ul{left:114px; top:0px; width:94px; border-top:0px;} /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left {left:-114px;} /* style the table so that it takes no ppart in the layout - required for IE to work */ .menu table {position:absolute; top:0; left:0; border-collapse:collapse;;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited {background:#999999; height:auto; line-height:1em; padding:5px 10px; width:94px; border-bottom-width:2px; border-bottom-color:#FFFFFF;} /* yet another hack for IE5.5 */ * html .menu ul ul a, * html .menu ul ul a:visited {width:94px;w\idth:94px;} /* style the top level hover */ .menu a:hover, .menu ul ul a:hover{color:#FFFFFF; background:#DC7226; border-bottom-width:2px; border-bottom-color:#FFFFFF;} .menu :hover > a, .menu ul ul :hover > a {background:#DC7226; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ visibility:visible;} /* BUTTON ROLLOVERS */ #home { display:block; width:115px; height:22px; background:url(homerollover.gif) no-repeat 0 0; } #home:hover { background-position:0 -22px; } #home span { display:none; } #products { display:block; width:115px; height:22px; background:url(productsrollover.gif) no-repeat 0 0; } #products:hover { background-position:0 -22px; } #products span { display:none; } #services { display:block; width:115px; height:22px; background:url(servicesrollover.gif) no-repeat 0 0; } #services:hover { background-position:0 -22px; } #services span { display:none; } #tools { display:block; width:115px; height:22px; background:url(cataloguerollover.gif) no-repeat 0 0; } #tools:hover { background-position:0 -22px; } #tools span { display:none; } #projects { display:block; width:115px; height:22px; background:url(clientsrollover.gif) no-repeat 0 0; } #projects:hover { background-position:0 -22px;} #projects span { display:none; } #aboutus { display: block; width:115px; height:22px; background:url(aboutusrollover.gif) no-repeat 0 0; } #aboutus:hover { background-position:0 -22px; } #aboutus span { display:none; } #contactus { display:block; width:115px; height:22px; background:url(contactusrollover.gif) no-repeat 0 0; } #contactus:hover{ background-position:0 -22px; } #contactus span { display:none; } /* MENUSTRIP ROLLOVERS */ #menustrip { float:left; width:900px; height:175px; background-color:#FFFFFF; border-bottom:solid; border-width:1px; } #desktopmenu { display:block; width:150px; height:175px; background:url(desktopmenu.jpg) no-repeat 0 0; float:left; } #desktopmenu:hover { background-position:0 -175px; } #desktopmenu span { display:none; } #filesmenu { display:block; width:150px; height:175px; background:url(filesmenu.jpg) no-repeat 0 0; float:left; } #filesmenu:hover { background-position:0 -175px; } #filesmenu span { display:none; } #medicalmenu { display:block; width:150px; height:175px; background:url(medicalmenu.jpg) no-repeat 0 0; float:left; } #medicalmenu:hover { background-position:0 -175px; } #medicalmenu span { display:none; } #docmenu { display:block; width:150px; height:175px; background:url(docmenu.jpg) no-repeat 0 0; float:left; } #docmenu:hover { background-position:0 -175px; } #docmenu span { display:none; } #spacesavingmenu { display:block; width:150px; height:175px; background:url(spacesavingmenu.jpg) no-repeat 0 0; float:left; } #spacesavingmenu:hover { background-position:0 -175px; } #spacesavingmenu span { display:none; } #designmenu { display:block; width:150px; height:175px; background:url(designmenu.jpg) no-repeat 0 0; float:left; } #designmenu:hover { background-position:0 -175px; } #designmenu span { display:none; } /* PAGE CONTENT CONTAINER */ #content { position:absolute; top:323px; width:900px; height:relative; left:0px; background-color:#FFFFFF; border:solid; border-width:1px; } #text { float:left; width:800px; padding-left:50px; padding-right:50px; } /* MAIN SECTION ON HOME PAGE */ #main { float:left; width:900px; } #mainitem { float:left; width:250px; height:265px; background-image:url(newsback.jpg); padding-left:30px; padding-right:20px; padding-top:25px; padding-bottom:10px; } #mainitem2 { float:left; width:555px; height:135px; padding-left:15px; padding-top:15px; padding-right:20px; } #mainitem2 p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FF8F00; line-height:18px; } #mainitem3 { float:left; width:575px; height:135px; padding-left:15px; padding-top:15px; padding-right:10px; background-image:url(news3back.jpg); } /* MAIN SECTION HEADLINE */ #mainheadline { position:absolute; height:50px; top:50px; letter-spacing:1px; left:520px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#DC7226; line-height:16px; display: none; } /* MAIN SECTION BODY TEXT */ #maincopy { position:absolute; width:250px; text-align:justify; top:100px; left:520px; } /* WHAT'S NEW SECTION ON HOME PAGE */ #new { position:absolute; top:340px; width:275px; height:250px; left:17px; background-color:#66CC99; background-image:url(newpic.jpg); border-style:solid; border-width:1px; border-color:#666666; } /* WHAT'S NEW SECTION BODY TEXT */ #newcopy { position:absolute; width:275px; text-align:center; top:220px; left:0px; } #newcopy p { color:#FFFFFF; } /* WHAT'S NEW SECTION ON HOME PAGE */ #expo { position:absolute; background-image:url(expoprima.jpg); border-style:solid; border-width:1px; border-color:#666666; top:340px; width:480px; height:250px; left:307px; background-color:#333333; } /* WHAT'S NEW SECTION BODY TEXT */ #expocopy { position:absolute; width:200px; text-align:justify; top:140px; left:237px; } #expocopy p { color:#000000; } /* SIDE MENU CONTAINER */ #submenu { position:absolute; left:-200px; top:25px; width:180px; } /* SIDE MENU LIST */ #submenu li { text-align:right; list-style-type:none; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:lighter; color:#999999; letter-spacing:1px; padding-bottom:10px; } /* PDF DOWNLOAD CONTAINER */ #pdf { background:#FFFFFF; position:absolute; left:815px; top:490px; width:80px; text-align:center; border-style:solid; border-width:1px; border-color:#FFCC00; } /* SECTION OVERVIEW INTRO SECTION */ #sectionintro { position:absolute; width:900px; top:0px; left:0px; height:300px; padding:0px; } #sectionheader { position:absolute; height:30px; width:360px; left:20px; top:120px; letter-spacing:4px; font-size:18px; color:#FFFFFF; font-weight: normal; font-family:Geneva, Arial, Helvetica, sans-serif } #sectionheaderonwhite { position:absolute; height:30px; width:360px; left:20px; top:120px; letter-spacing:4px; font-size:18px; color:#000000; font-weight: normal; font-family:Geneva, Arial, Helvetica, sans-serif } #headertext { position:absolute; top:150px; width:250px; height:50px; left:20px; background:none; } #headertext p { font-family: Geneva, Arial, Helvetica, sans-serif; font-size:9px; color:#FFFFFF; line-height:15px; } #headertextonwhite { position:absolute; top:150px; width:250px; height:50px; left:20px; background:none; } #headertextonwhite p { font-family: Geneva, Arial, Helvetica, sans-serif; font-size:9px; color:#000000; line-height:15px; } #headertable {position:absolute; left:650px; top:50px;} #headertable p span {color:#FFFFFF;} /* PRODUCT STRIP CONTAINER */ .productstrip { position: relative; height:300px; width:900px; } .product { float:left; width:159px; height:300px; padding:10px; border-right-style:solid; border-right-color:#FF6600; border-right-width:1px; } .productnoline { float:left; width:159px; padding:10px; margin-left:20px; } .productnoline span { display:none; } .product span { display:none; } .productlong { float:left; width:380px; height:350px; padding:0px; border-right:solid; border-right-color:#FF6600; border-right-width:1px; border-bottom:solid; border-bottom-color:#FF6600; border-bottom-width:1px;} .item { float:left; width:156px; height:200px; margin-left:10px; margin-top:10px; padding:5px; border-style:solid; border-color:#FF9900; border-width:1px; text-align:center; } .item span { display:none; } .table { float:left; width:170px; padding-top:10px; } #stats {text-align:center; background-color:#CCCCCC; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; border-style:solid; border-width:1px; border-color:#333333; } #statshead {text-align:center; background-color:#FF9900; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; border-style:solid; border-width:1px; border-color:#FF6600; } #statsdim {text-align:center; background-color:none; color:#333333; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; } .tech { float:left; width:159px; height:250px; padding:10px; } .tech p { color:#FF6600 } /* SECTION OPTIONS CONTAINER */ .optionstrip { height:210px; width:900px; } /* OPTIONS */ .optionheader { padding-left:10px; padding-top:10px; float:left; width:890px; height:20px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:16px; color:#f58025; letter-spacing:1px; } .option { float:left; width:159px; height:160px; padding:10px; border-right-style:solid; border-right-color:#FF6600; border-right-width:1px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#999999; letter-spacing:1px; } .option span { display:none; } /* RELATED STRIP CONTAINER */ .relatedstrip { clear:left; float:left; width:900px; margin-top:0px; border-top:solid; border-top-style:solid; border-width:1px; border-color:#92CDEB;} .relatedheader { margin-top:10px; background-image:url(relatedheader.jpg); text-indent:125px; padding-top:5px; float:left; width:900px; height:20px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; letter-spacing:1px; } .related { float:left; width:99px; height:100px; padding:5px; border-right-style:solid; border-right-color:#92CDEB; border-right-width:1px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#999999; letter-spacing:1px; } .related a:hover { text-decoration:none; color:#FFFFFF; background-color:#92cdeb; } .related span { display:none; } /* PRODUCT PAGE MAIN SECTION CONTAINER */ #featuredproduct { position:absolute; top:22px; width:770px; height:300px; left:17px; border-top-style:solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px; border-color:#999999; } #featuredproductpic { position:absolute; top:0px; left:0px; height:300px; width:400px; } #featuredproductsubheader { position:absolute; height:20px; width:360px; left:410px; top:60px; } #featuredproductheader span { display:none; } #featuredproducttext { position:absolute; width:360px; left:410px; top:80px; } /* PICTURE ROLLOVERS */ #pic { background-color:#FFFFFF; left:410px; position:relative; top:195px; width:360px; } #pic a .large { border:0px; display:block; height:1px; left:-1px; position:absolute; top:-1px; width:1px; } #pic a img { border:0; } #pic a.p1, #pic a.p1:visited { background:#FFFFFF; border:1px solid #999999; display:block; height:90px; float:left; left:0; text-decoration:none; top:0; } #pic a.p1:hover { background-color:#8C97A3; color:#000000; text-decoration:none; } #pic a.p1:hover .large { border:none; display:block; height:300px; left:-410px; position:absolute; top:-195px; width:400px; } #productdetails { position:relative; width:900px; height:300px; } .details { float:left; height:280px; width:280px; padding:10px; } #colour {float:left; height:280px; width:280px; padding:10px;} /* TABLE DATA */ .tableheader { background-color:#DC7226; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; text-align:center; padding-top:5px; padding-bottom:5px; } .tablesubheader { background-color:#FF9933; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; padding-left:5px; padding-top:5px; padding-bottom:5px; } .tabledata { background-color:#999999; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; padding-left:5px; padding-top:5px; padding-bottom:5px; } #greyback {background-color:#999999; } #building { position:absolute; height:230px; width:460px; padding:10px; left:10px; top:0px; } #map_canvas {position:absolute; top:0px; width:895px; height:295px; border-style:solid; border-color:#FF6600; border-width:0px;} /* PAGE FOOTER */ #footer { clear:left; float:left; position: relative; width:900px; height:150px; left:0px; background: url(rotadexfooter.jpg); background-repeat:no-repeat; background-color:#FFFFFF; } #address { position:absolute; top:10px; width:140px; height:90px; left:0px; text-align:right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#FFFFFF; line-height:16px; } #tel { position:absolute; top:10px; width:180px; height:90px; left:150px; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#FFFFFF; line-height:16px; } #tel a { color:#F58025; background:none; } #tel a:hover { color:#FFFFFF; background-color:#666666; } #tel a:visited { text-decoration:none; color:#CC0000; } #logos { position:absolute; top:0px; width:400px; height:100px; left:380px; } #bottom { position:absolute; top:105px; width:900px; height:20px; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; letter-spacing:1px; color:#000000; text-align:center; } #bottom a { text-decoration:none; color:#000000; } #bottom a:hover { text-decoration:none; color:#FFFFFF; background-color:#DC7226; } #bottom a:visited { text-decoration:none; color:#CC0000; }