/*--------------------------------------- Developed 2007 by Triple S Web Services ---------------------------------------*/ * { padding: 0; margin: 0; border: 0; } /* ELEMENT CSS */ body { font: 11px/140% Arial, Helvetica, sans-serif; color: #666; background-color: #644b4b; text-align: justify; } p { padding: 0 0 1em; } h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 1em; } h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; } h4 { font-size: 12px; } a { font-weight: bold; text-decoration: none; outline: none; } a:link, a:active, a:visited { color: #5a2322; } a:hover { color: #aaa; } acronym { border-bottom: dashed 1px #ccc; } /* LAYOUT CSS */ #container { position: relative; width: 900px; margin: 0 auto; background-color: #fff; } #advertTag { } #advertTag a { position: absolute; top: 230px; left: -120px; width: 120px; height: 240px; background: url('../graphics/tag_createspace.jpg') no-repeat 0 0; } #advertTag a:hover { background-position: -120px 0; } #header { position: relative; height: 140px; background-color: #644b4b; } #header h1 { position: absolute; bottom: 0; left: 0; margin: 0; text-indent: -9999px; background: url('../graphics/logo_main.gif') no-repeat 0 0; width: 526px; height: 81px; } #header h1 a { height: 100%; width: 100%; display: block; } #header ul { position: absolute; bottom: 0; left: 600px; height: 36px; list-style-type: none; } #header ul li { display: block; float: left; } #header ul li a { width: 90px; height: 36px; display: block; float: left; text-indent: -9999px; margin-right: 3px; background: url('../graphics/nav_buttons.gif') no-repeat 0 0; } #header ul li a#products { background-position: 0 0; } #header ul li a#technical { background-position: -90px 0; } #header ul li a#contactus { background-position: -180px 0; } #header ul li a#products:hover { background-position: 0 -72px; } #header ul li a#technical:hover { background-position: -90px -72px; } #header ul li a#contactus:hover { background-position: -180px -72px; } #header ul li a#products.current, #header ul li a#products.current:hover { background-position: 0 -36px; } #header ul li a#technical.current, #header ul li a#technical.current:hover { background-position: -90px -36px; } #header ul li a#contactus.current, #header ul li a#contactus.current:hover { background-position: -180px -36px; } #contentHeader { background: url('../graphics/content_header.gif') no-repeat 0 0; width: 900px; height: 28px; padding-top: 12px; } #contentHeaderLeft { width: 430px; padding-left: 20px; float: left; text-align: left; } #contentHeaderLeft h4 { text-indent: -9999px; background: url('../graphics/page_index_labels.gif') no-repeat 0 0; width: 145px; height: 18px; } #contentHeaderLeft h4.range { background-position: 0 0; } #contentHeaderLeft h4.tech { background-position: 0 -18px; } #contentHeaderRight { width: 430px; padding-right: 20px; float: left; } #contentHeaderRight h4 { text-indent: -9999px; background: url('../graphics/label_phone.gif') no-repeat 0 0; width: 126px; height: 18px; float: right; } ul#webLinks { list-style-type: none; visibility: hidden; } ul#webLinks li { display: inline; } #mainBlock { width: 870px; height: 335px; margin-left: 30px; } #mainBlockLeft { position: relative; width: 270px; height: 335px; float: left; background: url('../graphics/main_block_left.gif') no-repeat 0 0; } #mainBlockLeft h4 { position: absolute; bottom: 0px; left: 45px; text-indent: -9999px; width: 179px; height: 16px; background: url('../graphics/block_title_labels.gif') no-repeat 0 0; } #mainBlockLeft h4.gallery { background-position: 0 0; } #mainBlockLeft h4.specs { background-position: 0 -16px; } #mainBlockLeft ul { list-style-type: none; padding: 30px; } #mainBlockLeft ul li { border-bottom: 1px dotted #ccc; padding: 5px 0; } #mainBlockLeft ul li a { text-indent: -9999px; width: 209px; height: 20px; display: block; } #mainBlockLeft ul li a#one, #mainBlockLeft ul li a#one.invert:hover { background: url('../graphics/product_buttons.gif') no-repeat 0 0; } #mainBlockLeft ul li a#one:hover, #mainBlockLeft ul li a#one.invert { background: url('../graphics/product_buttons.gif') no-repeat -209px 0; } #mainBlockLeft ul li a#two, #mainBlockLeft ul li a#two.invert:hover { background: url('../graphics/product_buttons.gif') no-repeat 0 -20px; } #mainBlockLeft ul li a#two:hover, #mainBlockLeft ul li a#two.invert { background: url('../graphics/product_buttons.gif') no-repeat -209px -20px; } #mainBlockLeft ul li a#three, #mainBlockLeft ul li a#three.invert:hover { background: url('../graphics/product_buttons.gif') no-repeat 0 -40px; } #mainBlockLeft ul li a#three:hover, #mainBlockLeft ul li a#three.invert { background: url('../graphics/product_buttons.gif') no-repeat -209px -40px; } #mainBlockLeft ul li a#four, #mainBlockLeft ul li a#four.invert:hover { background: url('../graphics/product_buttons.gif') no-repeat 0 -60px; } #mainBlockLeft ul li a#four:hover, #mainBlockLeft ul li a#four.invert { background: url('../graphics/product_buttons.gif') no-repeat -209px -60px; } #mainBlockLeft ul li a#five, #mainBlockLeft ul li a#five.invert:hover { background: url('../graphics/product_buttons.gif') no-repeat 0 -80px; } #mainBlockLeft ul li a#five:hover, #mainBlockLeft ul li a#five.invert { background: url('../graphics/product_buttons.gif') no-repeat -209px -80px; } #mainBlockLeft ul li a#six, #mainBlockLeft ul li a#six.invert:hover { background: url('../graphics/product_buttons.gif') no-repeat 0 -100px; } #mainBlockLeft ul li a#six:hover, #mainBlockLeft ul li a#six.invert { background: url('../graphics/product_buttons.gif') no-repeat -209px -100px; } #mainBlockLeft ul li a#seven, #mainBlockLeft ul li a#seven.invert:hover { background: url('../graphics/product_buttons.gif') no-repeat 0 -120px; } #mainBlockLeft ul li a#seven:hover, #mainBlockLeft ul li a#seven.invert { background: url('../graphics/product_buttons.gif') no-repeat -209px -120px; } #mainBlockLeft ul li a#oneTech { background: url('../graphics/product_tech_buttons.gif') no-repeat 0 0; } #mainBlockLeft ul li a#oneTech:hover, #mainBlockLeft ul li a#oneTech.current { background: url('../graphics/product_tech_buttons.gif') no-repeat -209px 0; } #mainBlockLeft ul li a#twoTech { background: url('../graphics/product_tech_buttons.gif') no-repeat 0 -20px; } #mainBlockLeft ul li a#twoTech:hover, #mainBlockLeft ul li a#twoTech.current { background: url('../graphics/product_tech_buttons.gif') no-repeat -209px -20px; } #mainBlockLeft ul li a#threeTech { background: url('../graphics/product_tech_buttons.gif') no-repeat 0 -40px; } #mainBlockLeft ul li a#threeTech:hover, #mainBlockLeft ul li a#threeTech.current { background: url('../graphics/product_tech_buttons.gif') no-repeat -209px -40px; } #mainBlockRight { width: 600px; float: left; } #content { position: relative; z-index: 5; } #container.slidingFoldingPage #content { background: url('../graphics/sliding_folding_background.jpg') no-repeat 100% 0; } #contentLeft { position: relative; width: 660px; padding: 20px; float: left; z-index: 19; } #contentLeft h1 { text-indent: -9999px; background: url('../graphics/main_title_labels.gif') no-repeat 0 0; width: 400px; height: 30px; } #contentLeft h1.welcome { background-position: 0 0; } #contentLeft h1.conservatorySpec { background-position: 0 -30px; } #contentLeft h1.windowSpec { background-position: 0 -60px; } #contentLeft h1.doorSpec { background-position: 0 -90px; } #contentLeft h1.slidingFolding { background-position: 0 -120px; } #contentLeft h1.feedback { background-position: 0 -150px; } #contentLeft h2 { text-indent: -9999px; background: url('../graphics/product_labels.gif') no-repeat 0 0; width: 135px; height: 20px; } #contentLeft h2#labelBespoke { background-position: 0 0; } #contentLeft h2#labelGable { background-position: 0 -20px; } #contentLeft h2#labelVictorian { background-position: 0 -40px; } #contentLeft h2#labelOrangery { background-position: 0 -60px; } #contentLeft h2#labelWindows { background-position: 0 -80px; } #contentLeft h2#labelDoors { background-position: 0 -100px; } #contentLeft h3 { text-indent: -9999px; background: url('../graphics/main_subtitle_labels.gif') no-repeat 0 0; width: 480px; height: 30px; margin-left: 15px; } #contentLeft h3.subtitleMitre { background-position: 0 0; } #contentLeft h3.subtitleLocking { background-position: 0 -30px; } #contentLeft h3.subtitleTraditional { background-position: 0 -60px; } #contentLeft h3.subtitleTilt { background-position: 0 -90px; } #contentLeft h3.subtitlePossibilities { background-position: 0 -120px; margin-left: 0; } #contentLeft h3.subtitleMultiFold { background-position: 0 -150px; margin-left: 0; } #contentLeft h3.subtitleCreateSpace { background-position: 0 -180px; margin-left: 0; } #contentLeft ul#contentTypes { list-style-type: none; } #contentLeft ul#contentTypes li { width: 170px; float: left; padding: 20px 0 0 30px; } #contentLeft ul.standardList { list-style-type: none; margin: 0 50px; } #contentLeft ul.standardList li { background: url('../graphics/bullet_point.gif') no-repeat 0 0; padding-left: 40px; padding-top: 5px; margin-bottom: 20px; font-size: 12px; /*min-height hack -> */ min-height: 24px; height: auto !important; height: 24px; } #contentLeft img.frame { padding: 10px; background: url('../graphics/image_frame.gif') no-repeat 0 0; margin-bottom: 10px; } #contentLeft a.backToMainButton { display: block; text-indent: -9999px; width: 129px; height: 24px; background: url('../graphics/form_buttons.gif') no-repeat -129px 0; margin-top: 20px; } #contentLeft a.backToMainButton:hover { background-position: -129px -24px; } #contentRight { position: relative; top: 20px; left: 0; float: left; width: 180px; height: 550px; background: url('../graphics/banner_folding.jpg') no-repeat 0 0; border: 1px solid #ccc; } #container.slidingFoldingPage #contentRight { display: none; } #contentRight a { text-indent: -9999px; width: 100%; height: 100%; display: block; } #contentFooter { background: url('../graphics/content_footer.gif') no-repeat 0 100%; height: 35px; padding-left: 20px; } #container.slidingFoldingPage #contentFooter { background: url('../graphics/content_footer_transdark.gif') no-repeat 0 100%; } #contentFooter h4 { text-indent: -9999px; background: url('../graphics/page_index_labels.gif') no-repeat 0 0; width: 145px; height: 18px; } #contentFooter h4.range { background-position: 0 0; } #contentFooter h4.tech { background-position: 0 -18px; } #footer { background: #ebe8e0 url('../graphics/footer_base.gif') no-repeat 0 100%; width: 900px } #footer p { font: 12px/140% Arial, Helvetica, sans-serif; color: #333; } #footerLeft { width: 239px; padding: 15px 30px; float: right; } #footerLeft h2 { text-indent: -9999px; background: url('../graphics/footer_labels.gif') no-repeat 0 0; width: 220px; height: 30px; } #footerMiddle { position: relative; width: 239px; padding: 15px 30px; float: right; border-right: 1px dotted #ccc; border-left: 1px dotted #ccc; height: 230px; } #footerMiddle h2 { text-indent: -9999px; background: url('../graphics/footer_labels.gif') no-repeat 0 -30px; width: 220px; height: 30px; } #footerMiddle a { position: absolute; bottom: 10px; left: 100px; text-transform: uppercase; } #footerRight { width: 240px; padding: 15px 30px; float: right; } #footerRight h2 { text-indent: -9999px; background: url('../graphics/footer_labels.gif') no-repeat 0 -60px; width: 220px; height: 30px; } #copyright { background-color: #644b4b; text-align: center; color: #fff; padding-top: 10px; } #copyright a { color: #fff; } #copyright a:hover { color: #ccc; } input, textarea { font: 10px Verdana, Helvetica, Sans-Serif; padding: 3px; background-color: #fff; color: #666; border: 1px solid #ccc; width: 160px; overflow: hidden; } input.formButton { border: 0; width: 129px; height: 24px; background: url('../graphics/form_buttons.gif') no-repeat 0 0; } input.formButton:hover { background-position: 0 -24px; } .lightGrey { color: #666; } .colorAlert { color: #b00000; } #flashSlidingFolding { width: 100%; text-align: center; padding-bottom: 22px; }