/* -------------------------------------------- Formfollows Static Styles Author: Nick Eagland Contact: nick.eagland@concisecode.net Version: 08/02/2006 ----------------------------------------------- */ /* body & layout */ body { font:11px arial, helvetica, sans serif; background-color:#ffffff; margin:0px; padding:0px; text-align:left; } * html code { font-size:12px; } /* centre page in browser */ #container { margin-left:auto; margin-right:auto; width:760px; height:972px; padding:0px; } #brdrTop { background-color:#fafafa; width:760px; height:13px; border-bottom:1px #ebebeb solid; } #main { width:760px; height:559px; } #brdrBot { background-color:#fafafa; width:760px; height:400px; border-top:1px #ebebeb solid; } #topBar { width:760px; height:82px; } #body { width:760px; height:395px; } #footer { width:753px; height:16px; padding-top:66px; display:block; margin-left:7px; color:#cccccc; font:10px tahoma, helvetica; vertical-align:middle; } /* ---------------------------------------------- colors ------------------------------------------------- */ .std{ color:#AAE0FA; } /* ---------------------------------------------- main content ------------------------------------------------- */ #body #col1{ float:left; width:538px; height:393px; margin-right:1px; } #body #col2{ float:left; width:219px; height:395px; } #body #colTerms { float:left; width:760px; height:393px; padding:10px 0px; background: #f6f6f6; overflow:auto;} /* ---------------------------------------------- std elements ------------------------------------------------- */ p { font-size:11px; margin:0px; padding:0px; line-height:100%; } a { color:#AAE0FA; font-weight:bold; text-decoration:none; } a:link, a:active { text-decoration:none; } a:visited { color:#87B3C7 } a:hover, li a:hover, .info li a:hover{text-decoration:none; color:#00B7E3 } li, ul { margin:0px; padding:0px; } h1 { font-size:16px; margin:0px; display:inline; } h2 { font-size:14px; color:#0077B3; margin:0px; padding:0px; } h3 { font-size:12px; color:#555555; margin:0px; } form { margin:0px; padding:0px; } strong{ font-weight:bold; } /* ---------------------------------------------- TEXT REPLACEMENT ------------------------------------------------- */ #logoMain span {visibility:hidden; } #mItemPr span, #mItemSt span, #mItemPress span, #mItemOr span, #mItemCo span, .spacerRow span{visibility:hidden; } #titleSusp span, #titleExa span, #titleFF span, #titleStockists span, #titlePress span{display:none; font-size:0px;} #mission span, #col1 span {visibility:hidden; } #logoFF span, #quiltFF span{visibility:hidden; } #iconFF span, #iconGH span{visibility:hidden; } /* ---------------------------------------------- headers and menus ------------------------------------------------- */ .logoMain, #logoMain{ background:url("/img/tbarStd/form_follows_logo.gif") no-repeat top left; cursor:pointer; margin:0; padding:0; width:210px; height:30px; float:left; } #menu { width:550px; float:right; } #menu ul{ border:0; margin:0; padding:0; list-style-type:none; float:right; } #menu ul li { float:left; width:110px; text-align:center; padding:0; margin:0; } #menu ul li a{ width:110px; height:30px; padding:0; font-size:14px; text-decoration:none; display:block; text-align:center; font-weight:normal; line-height:14px; voice-family:"\"}\""; voice-family:inherit; } #logoMain:hover{background-position:-210px 0; text-decoration:none; } #mItemPr, .mItemPr{background:url("/img/tbarStd/products.gif") no-repeat 0 0} #mItemSt, .mItemSt{background:url("/img/tbarStd/stockists.gif") no-repeat 0 0} #mItemPress, .mItemPress{background:url("/img/tbarStd/press.gif") no-repeat 0 0} #mItemOr, .mItemOr{background:url("/img/tbarStd/order_form.gif") no-repeat 0 0} #mItemCo, .mItemCo{background:url("/img/tbarStd/contact_form.gif") no-repeat 0 0} #mItemPr:hover, #mItemSt:hover, #mItemPress:hover, #mItemOr:hover, #mItemCo:hover {background-position:-110px 0; } .trigger { position:relative; cursor:pointer; z-index:2; } .ddMenu { visibility:hidden; overflow:hidden; position:absolute; z-index:1; margin:0; padding:0px; width:170px; height:140px; border-right:1px solid #E5E5E5; border-left:1px solid #E5E5E5; border-bottom:1px solid #E5E5E5; background:#ffffff; } .ddMenu li{ border:0; margin:0; padding:0; float:left; height:18px; } .ddMenu li a{ width:130px; height:16px; padding:0; font-size:12px; padding-left:17px; text-decoration:none; display:block; font-weight:bold; } /* ---------------------------------------------- cross page elements ------------------------------------------------- */ .about { width:219px; height:295px; overflow:hidden; border:0px; background-color:#fafafa; } .notes{ width:219px; height:393px; overflow:hidden; border:0px; background-color:#fafafa; padding-bottom:1px; } .info{ width:190px; padding-top:5px; padding-left:12px; padding-bottom:24px; color:#555555; } .info h3{ font-variant:small-caps; font-size:14px; } .bullet {background:transparent url("/img/std/bullet.gif") no-repeat; width:8px; height:8px; } .info p{margin-bottom:5px; } .info ul{list-style-type:none; } .borderBot{height:1px; line-height:1px; font-size:1px; margin:0px; padding-bottom:3px; background:url("/img/dots_grey.gif") repeat-x; } .spacerRow{height:1px; line-height:1px; font-size:1px; } .link a {display:block; height:0; overflow:hidden; } .link span{visibility:hidden; } #thumbs { padding-top:1px } #thumbs ul {list-style-type:none; } #thumbs li {padding:0px; margin:0px; } #thumbs ul li a:hover{text-decoration:none; } .dynFlash { border:1px solid #ebebeb } .dynFlashDk { border:1px solid #000 } /* ---------------------------------------------- footer ------------------------------------------------- */ #footer ul {border:0; margin:0; padding:0; list-style-type:none; float:left; } #footer ul li {display:inline; float:left; text-align:center; padding:0; margin-right:3px; } #footer ul li a{text-decoration:none; } #terms ul { list-style-type:none; float:right; width:100px; } #terms ul li {display:inline; } #terms ul li a{text-decoration:none; display:block; width:100px; height:12px; } #footer a:hover{ text-decoration:underline; } #iconFF, .iconFF{background:url("/img/icon_formfollows.gif") no-repeat 0 0; font-size:1px; float:left; width:13px; height:12px;} #iconGH, .iconGH{background:url("/img/icon_glasshopper_multimedia.gif") no-repeat 0 0; font-size:1px; float:left; width:13px; height:12px;} #iconHYL, .iconHYL{background:url("/img/icon-hyl-design.gif") no-repeat 0 0; font-size:1px; float:left; width:41px; height:12px;} #iconFF:hover{background-position:-13px 0; } #iconGH:hover{background-position:-13px 0; } #iconHYL:hover{background-position:-41px 0;} #iconCR {width:11px; height:10px; vertical-align:middle; } #copyright { float:left; color:#bbb; padding-bottom:1px; margin-left:5px; margin-right:5px; } #footer a{ color:#ccc; font-weight:normal; } /* ###################################################################################################################################### # PAGE SPECIFIC ###################################################################################################################################### */ /* ---------------------------------------------- page specific HOME ------------------------------------------------- */ #homeImg { width:538px; height:393px; margin:0; background:url("/img/ff_index4.gif") top left no-repeat; } #mission { width:219px; height:98px; margin:0; background:url("/img/mission-formfollows-06.gif") top left no-repeat; } /* ---------------------------------------------- page specific SUSPENDED ------------------------------------------------- */ #tnSusp1, .tnSusp1{width:109px; height:49px; float:left; background:url("/img/susp/tn/suspended-bed-img1.jpg") no-repeat -109px 0} #tnSusp2, .tnSusp2{width:109px; height:49px; float:left; background:url("/img/susp/tn/suspended-bed-img2.jpg") no-repeat -109px 0} #tnSusp3, .tnSusp3{width:109px; height:49px; float:left; background:url("/img/susp/tn/suspended-bed-img3.jpg") no-repeat -109px 0} #tnSusp4, .tnSusp4{width:109px; height:49px; float:left; background:url("/img/susp/tn/suspended-bed-img4.jpg") no-repeat -109px 0} #tnSusp1:hover{background-position:0 0; } #tnSusp2:hover{background-position:0 0; } #tnSusp3:hover{background-position:0 0; } #tnSusp4:hover{background-position:0 0; } #tnSusp5:hover{background-position:0 0; } #tnSusp6:hover{background-position:0 0; } /* ---------------------------------------------- page specific EXHIBIT A ------------------------------------------------- */ #tnExa1, .tnExa1{width:54px; height:98px; float:left; background:url("/img/exa/tn/exhibit-a-lamp-img1.jpg") no-repeat -54px 0} #tnExa2, .tnExa2{width:54px; height:98px; float:left; background:url("/img/exa/tn/exhibit-a-lamp-img2.jpg") no-repeat -54px 0} #tnExa3, .tnExa3{width:54px; height:98px; float:left; background:url("/img/exa/tn/exhibit-a-lamp-img3.jpg") no-repeat -54px 0} #tnExa4, .tnExa4{width:54px; height:98px; float:left; background:url("/img/exa/tn/exhibit-a-lamp-img4.jpg") no-repeat -54px 0} #tnExa1:hover{background-position:0 0; } #tnExa2:hover{background-position:0 0; } #tnExa3:hover{background-position:0 0; } #tnExa4:hover{background-position:0 0; } /* ---------------------------------------------- page specific EXHIBIT B ------------------------------------------------- */ #tnExb1, .tnExb1{width:54px; height:98px; float:left; background:url("/img/exb/tn/exhibit-b-lamp-img1.jpg") no-repeat -55px 0} #tnExb2, .tnExb2{width:54px; height:98px; float:left; background:url("/img/exb/tn/exhibit-b-lamp-img2.jpg") no-repeat -54px 0} #tnExb3, .tnExb3{width:54px; height:98px; float:left; background:url("/img/exb/tn/exhibit-b-lamp-img3.jpg") no-repeat -54px 0} #tnExb4, .tnExb4{width:54px; height:98px; float:left; background:url("/img/exb/tn/exhibit-b-lamp-img4.jpg") no-repeat -54px 0} #tnExb1:hover{background-position:0px 0; } #tnExb2:hover{background-position:0px 0; } #tnExb3:hover{background-position:0px 0; } #tnExb4:hover{background-position:0px 0; } /* ---------------------------------------------- page specific BOP D ------------------------------------------------- */ #tnBopd1, .tnBopd1{width:54px; height:98px; float:left; background:url("/img/bopd/tn/bopd-lamp-img1.jpg") no-repeat -54px 0} #tnBopd2, .tnBopd2{width:54px; height:98px; float:left; background:url("/img/bopd/tn/bopd-lamp-img2.jpg") no-repeat -54px 0} #tnBopd3, .tnBopd3{width:54px; height:98px; float:left; background:url("/img/bopd/tn/bopd-lamp-img3.jpg") no-repeat -54px 0} #tnBopd4, .tnBopd4{width:54px; height:98px; float:left; background:url("/img/bopd/tn/bopd-lamp-img4.jpg") no-repeat -54px 0} #tnBopd1:hover{background-position:0px 0; } #tnBopd2:hover{background-position:0px 0; } #tnBopd3:hover{background-position:0px 0; } #tnBopd4:hover{background-position:0px 0; } /* ---------------------------------------------- page specific MOON ------------------------------------------------- */ #tnMoon1, .tnMoon1{width:54px; height:98px; float:left; background:url("/img/moon/tn/moon-img1.jpg") no-repeat -54px 0} #tnMoon2, .tnMoon2{width:54px; height:98px; float:left; background:url("/img/moon/tn/moon-img2.jpg") no-repeat -54px 0} #tnMoon3, .tnMoon3{width:54px; height:98px; float:left; background:url("/img/moon/tn/moon-img3.jpg") no-repeat -54px 0} #tnMoon4, .tnMoon4{width:54px; height:98px; float:left; background:url("/img/moon/tn/moon-img4.jpg") no-repeat -54px 0} #tnMoon1:hover{background-position:0 0; } #tnMoon2:hover{background-position:0 0; } #tnMoon3:hover{background-position:0 0; } #tnMoon4:hover{background-position:0 0; } /* ---------------------------------------------- page specific TRIPLE ------------------------------------------------- */ #tnTriple1, .tnTriple1{width:54px; height:98px; float:left; background:url("/img/triple/tn/triple-img1.jpg") no-repeat -54px 0} #tnTriple2, .tnTriple2{width:54px; height:98px; float:left; background:url("/img/triple/tn/triple-img2.jpg") no-repeat -54px 0} #tnTriple3, .tnTriple3{width:54px; height:98px; float:left; background:url("/img/triple/tn/triple-img3.jpg") no-repeat -54px 0} #tnTriple4, .tnTriple4{width:54px; height:98px; float:left; background:url("/img/triple/tn/triple-img4.jpg") no-repeat -54px 0} #tnTriple1:hover{background-position:0 0; } #tnTriple2:hover{background-position:0 0; } #tnTriple3:hover{background-position:0 0; } #tnTriple4:hover{background-position:0 0; } /* ---------------------------------------------- page specific TAPER ------------------------------------------------- */ #tnTaper1, .tnTaper1{width:54px; height:98px; float:left; background:url("/img/taper/tn/taper-img1.jpg") no-repeat -54px 0} #tnTaper2, .tnTaper2{width:54px; height:98px; float:left; background:url("/img/taper/tn/taper-img2.jpg") no-repeat -54px 0} #tnTaper3, .tnTaper3{width:54px; height:98px; float:left; background:url("/img/taper/tn/taper-img3.jpg") no-repeat -54px 0} #tnTaper4, .tnTaper4{width:54px; height:98px; float:left; background:url("/img/taper/tn/taper-img4.jpg") no-repeat -54px 0} #tnTaper1:hover{background-position:0 0; } #tnTaper2:hover{background-position:0 0; } #tnTaper3:hover{background-position:0 0; } #tnTaper4:hover{background-position:0 0; } /* ---------------------------------------------- page specific STOCKISTS ------------------------------------------------- */ #stockists { width:538px; height:393px; background:#f6f6f6; color:#555555; float:right; } #stockists h2#titleStockists{width:209px; height:23px; background:url("/img/std/titleStockists.gif") no-repeat top left; } #stockists h3{padding-left:11px; color:#AAE0FA; font-size:12px; } #stockists ul{ list-style-type:none} #stockistsTbl{ width:538px; padding:0px; margin:0px; border-collapse:collapse; } #stockistsTbl td { padding-top:5px; padding-bottom:5px; border-bottom:1px solid #e5e5e5;} .address{ vertical-align:top; padding-left:12px; width:300px; } .products { vertical-align:top; padding-right:8px; width:230px; text-align:right;} .products.divider { color:#555555; font-weight:bold; } .row1{ background:#fafafa; } .row2{ background:#F8F8F8; } /* ---------------------------------------------- page specific TERMS ------------------------------------------------- */ h2#titleTerms{color:#AAE0FA; width:209px; height:23px; padding-top:5px; background:url("/img/std/titleTerms.gif") no-repeat top left; } h2#titleTerms span {display:none;} #colTerms h3 {color:#AAE0FA; font-weight:bold; padding-left:10px; } #colTerms p { margin:10px;} #colTerms li { padding-left:20px; background:url("/img/std/bullet-blu.gif") no-repeat 10px 5px; } /* ---------------------------------------------- page specific PRESS RESOURCES ------------------------------------------------- */ #press{ width:538px; height:395px; background:#f6f6f6; color:#555555; float:right; } h2#titlePress{width:209px; height:23px; padding-top:5px; background:url("/img/std/titlePress.gif") no-repeat top left; } #press .col1, #press #col1 { width:255px; height:340px; float:left; padding-left:10px; } #press .col2, #press #col2 { width:255px; float:right; padding-left:10px; }