/* TEMPLESTOCK CSS */ /* GENERIC */ body { background-image:url(butterflyback.gif); } p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#999999; line-height:15px; } h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:20px; color:#DC7226; line-height:16px; } h2 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#DC7226; } h3 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#DC7226; } a { text-decoration:none; color:#FF6600; } a:hover { text-decoration:none; color:#FFFFFF; background-color:#dc7226; } a:visited { text-decoration:none; color:#990000; } 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:805px; height:800px; } /* HEADER */ #header { position:absolute; top:0px; width:805px; height:120px; left:0px; background-color:#DC7226; } /* BANNER */ #banner { position:absolute; top:0px; width:805px; height:100px; left:0px; background-image:url(templeheader.jpg); } #templestocklogo { position:absolute; height:100px; width:400px; left:0px; } #search { position:absolute; top:10px; left:625px; width:170px; height:25px; } /* NAVIGATION */ #nav { position:absolute; top:100px; width:805px; height:22px; left:0px; background-color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:lighter; color:#FFFFFF; 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(brochuresrollover.gif) no-repeat 0 0; } #tools:hover { background-position:0 -22px; } #tools span { display:none; } #projects { display:block; width:115px; height:22px; background:url(projectsrollover.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; } /* PAGE CONTENT CONTAINER */ #content { position:absolute; top:122px; width:805px; height:610px; left:0px; background-color:#FFFFFF; } /* MAIN SECTION ON HOME PAGE */ #xmasinfo { position:relative; width:780px; height:100px; border-top-style:solid; border-top-width:thin; border-color:#666666; margin-left:10px; margin-right:10px; background-image:url(xmasback.jpg); background-repeat:no-repeat;} #mainmondrian { position:relative; width:780px; height:300px; border-top-style:solid; border-top-width:thin; border-color:#666666; margin-left:10px; margin-right:10px; background-image:url(mondrianback.jpg); background-repeat:no-repeat;} /* MAIN SECTION PICTURE BOX */ #mainpic { position:absolute; width:500px; height:300px; left:0px; top:0px; } /* 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; } /* RELATED PRODUCTS CONTAINER */ #related { background:#FFFFFF; position:absolute; left:815px; top:25px; width:80px; border-top-style:solid; border-top-width:1px; border-color:#FFCC00; border-bottom-width:1px; border-bottom-style:solid; text-align:center; } /* 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:785px; top:20px; left:10px; height:80px; padding:0px; } /* SECTION OPTIONS CONTAINER */ #sectionoptions { position:absolute; top:110px; left:10px; height:490px; width:785px; } /* OPTIONS */ .option { float:left; width:175px; height:229px; margin-right:10px; margin-bottom:10px; padding-left:10px; padding-bottom:0px; border-bottom-style:solid; border-bottom-color:#FF6600; border-bottom-width:1px; border-left-style:solid; border-left-color:#FF6600; border-left-width:1px; } .optionlong { float:left; width:370px; height:229px; margin-right:10px; margin-bottom:10px; padding-left:10px; padding-bottom:0px; border-bottom-style:solid; border-bottom-color:#FF6600; border-bottom-width:1px; border-left-style:solid; border-left-color:#FF6600; border-left-width:1px; } .optiontall { float:left; width:175px; height:460px; margin-right:10px; margin-bottom:10px; padding-left:10px; padding-bottom:0px; border-bottom-style:solid; border-bottom-color:#FF6600; border-bottom-width:1px; border-left-style:solid; border-left-color:#FF6600; border-left-width:1px; } .optiontalllong { float:left; width:370px; height:460px; margin-right:10px; margin-bottom:10px; padding-left:10px; padding-bottom:0px; border-bottom-style:solid; border-bottom-color:#FF6600; border-bottom-width:1px; border-left-style:solid; border-left-color:#FF6600; border-left-width:1px; } .item { float:left; width:165px; height:200px; margin-left:10px; margin-bottom:10px; padding:5px; border-style:solid; border-color:#FF6600; border-width:1px; text-align:center; } /* 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; } #featuredproductheader { position:absolute; height:50px; width:360px; left:410px; top:10px; letter-spacing:1px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#DC7226; line-height:20px; } #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; } #productrange { position:absolute; top:340px; width:770px; height:250px; left:17px; } .product { float:left; width:154px; position:relative; top:25px; height:200px; } #dims { position:absolute; height:230px; width:230px; padding:10px; left:10px; top:0px; } #tech { position:absolute; height:230px; width:330px; padding:10px; left:260px; top:0px; } #colour { position:absolute; height:230px; width:130px; padding:10px; left:610px; top:0px; } #quote { background:url(quote.gif); position:absolute; height:190px; width:130px; padding:20px; left:590px; top:0px; text-align:center; font-style:italic; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#DC7226; line-height:18px; } #spectable {} /* 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; } #building { position:absolute; height:230px; width:460px; padding:10px; left:10px; top:0px; } #map_canvas {position:absolute; top:0px; width:390px; height:290px;} /* PAGE FOOTER */ #footer { position:absolute; top:730px; width:805px; height:150px; left:0px; background: url(templefooter.jpg); background-repeat:no-repeat; } #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:#FFCC00; 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:800px; 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:#990000; }