/* * styles.css * * The styles.css file contains CSS styles that are used for all browsers. */ html { overflow: scroll; } /* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.2.2 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;} body.home #TurnMast {display:none;} /* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.2.2 */ body {background:url("../pics/common/bg.gif") top center repeat-x; color:#333333; font:12px arial,helvetica,clean,sans-serif;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;} .hide {display:none;} /* Gutter between body background and content */ #Header, #MainBody, #Footer, #About, #GeneralAbout { margin: 0; clear:both;} #MainBody {height:100%; background-color:#FFF; position: relative; z-index: 2; padding:20px; } #Wrapper { width: 1003px;} /* Width of "page" */ #MainChannel {float: left; width: 642px; } /* Width of left channel and center channel combined */ #SidebarPrimary { width: 306px; margin-right:15px;} /* Width of left channel */ #Content { width: 321px;} /* Width of center channel */ #SidebarSecondary { width: 306px; margin-left:15px;} /* Width of right channel */ #Footer {} /* Make footer text line up with left side of center channel */ /* = End Widths = */ body.noSidebarSecondary #MainChannel { width: 963px;} body.noSidebarSecondary #Content { width: 642px;} body.noSidebarPrimary #MainChannel {float: left; width: 742px;} body.noSidebarPrimary #Content { width: 742px;} body.noSidebarPrimary #SidebarSecondary { width: 206px; margin-left:15px;} body.noSidebarPrimaryOrSidebarSecondary #MainChannel { width: 963px; } body.noSidebarPrimaryOrSidebarSecondary #Content { width: 963px; } #Wrapper { margin: 0 auto; /* Make content centered */ } /* Link at top of document to jump over navigation and go straight to content - For usability */ #ContentJump { display: none; } #Header { position: relative; z-index: 10; } #TurnMast {clear:both; background:#fff; position:relative; z-index:0; padding:20px; width:963px; padding-bottom:0;} #Mast { clear:both; background:#fff; position:relative; z-index:0; width:963px; height:277px; padding:20px;} #Mast .features {float:left; background:url("../pics/home/features-links-bg.gif"); width:234px; height:282px; padding-top:15px;} #Mast .features li { border-top:1px solid #5dc3f3; border-bottom:1px solid #37a9e1; padding:5px 0 5px 0; margin:0 20px 0 20px;} #Mast .features li.first {border-top:none;} #Mast .features li.last {border-bottom:none;} #Mast .features li a {background:url("../pics/home/arrow.gif") 0 4px no-repeat; color:#FFF; font-size:1.2em; padding:5px 0 5px 30px; display:block; text-decoration:none;} #Mast .features li a:hover {background:url("../pics/home/arrow-over.gif") 0 4px no-repeat; color:#3797d3;} #MainMast {float:right; width:712px; height:297px; position:relative; z-index:1;} #MastHome {display:block;} #MastProducts {display:none;} #MastManufacturing {display:none;} #MastSales {display:none;} #MastHousePackages {display:none;} #MastFinancing {display:none;} #MastInstallation {display:none;} #MastService {display:none;} #altToolBar {height:200px; margin-top:17px; background:url("../pics/common/alt-toolbar-bg.gif");} #altToolBar .logo {float:left; padding:24px 0 0 35px; position:relative;} #altToolBar .tagline {position:absolute; top:0px; left:250px;} #altToolBar .toolbar ul {float:right; padding:27px 10px 0 0;} #altToolBar .toolbar li {background:url("../pics/common/toolbar-links.gif") top left no-repeat; margin:0 20px 30px 0;} #altToolBar .toolbar li a {color:#FFF; text-decoration:none; display:block; padding:3px 10PX 3px 25px; font-family:arial; font-weight:bold;} #altToolBar .toolbar li a:hover {color:#b00e1e;} #ToolBar {height:200px; margin-top:17px; background:url("../pics/common/toolbar-bg.gif");} #ToolBar .logo {float:left; padding:24px 0 0 35px; position:relative;} #ToolBar .tagline {position:absolute; top:0px; left:250px;} #ToolBar .toolbar ul {float:right; padding:27px 10px 0 0;} #ToolBar .toolbar li {background:url("../pics/common/toolbar-links.gif") top left no-repeat; margin:0 20px 30px 0;} #ToolBar .toolbar li a {color:#FFF; text-decoration:none; display:block; padding:3px 10PX 3px 25px; font-family:arial; font-weight:bold;} #ToolBar .toolbar li a:hover {color:#000;} /* Top Navigation */ ul#NavigationPrimary {white-space:nowrap; z-index: 100; background:url("../pics/mainnav/bg-off.gif"); height:43px; position:relative; font-size:1.1em; padding-left:20px; } ul#NavigationPrimary li { /* Topnav item */ float: left; /* Keep nav in a line */ position: relative; /* To position dropdowns based on topnav items */ z-index: 30; /* Need a known z-index so we can lap dropdowns over topnav items and flyouts over the dropdowns */ background:url("../pics/mainnav/divider.gif") no-repeat; } ul#NavigationPrimary li.first {background:none;} ul#NavigationPrimary li.feedback {margin-left: 240px; background:0;} ul#NavigationPrimary li.feedback a { padding-left:25px; background:0 url("../pics/common/feedback.png") no-repeat;} ul#NavigationPrimary li.feedback a:hover {padding-left:25px; background:0 url("../pics/common/feedback-over.png") no-repeat;} ul#NavigationPrimary li a { /* Topnav link */ font-size:.9em; display: block; padding: 14px 10px 14px 10px; height:15px; text-decoration: none; color:#FFF; text-transform:uppercase; margin-left:1px; } ul#NavigationPrimary li a.over { /* Topnav links on hover (over) */ background:url("../pics/mainnav/bg-on.gif"); } ul#NavigationPrimary li.active a {background:url("../pics/mainnav/bg-on.gif");} /* Second level */ ul#NavigationPrimary li ul { /* Dropdown menu */ display: none; left: 0; position: absolute; top: 100%; width: 110px; z-index: 300; } ul#NavigationPrimary li ul li {background:none;} ul#NavigationPrimary li.over ul { display: block; /* Show the dropdown on hover */ position:absolute; z-index:300; } ul#NavigationPrimary li li a { font-size:.9em; padding: 6px 12px 6px 6px; text-indent: 0; background: #034678 !important; /* Prevent background image from appearing in dropdowns */ width: 120px !important; /* Fix dimension set for background image width */ height: auto; text-transform:capitalize; border:1px solid #bdcad4; border-top:0; } ul#NavigationPrimary li li.new a {background:#034678 url("../pics/common/newitem.png") no-repeat 100px 5px !important;} ul#NavigationPrimary li li a.over { background: #0a5ca0 !important; /* Prevent background image from appearing in dropdowns */ } ul#NavigationPrimary li li.new a.over {background:#0a5ca0 url("../pics/common/newitem.png") no-repeat 100px 5px !important;} ul#NavigationPrimary li a.over { background-position: 100% 0 } /* Third Level */ ul#NavigationPrimary li ul li ul.third { /* Dropdown menu */ display: none; left: 139px; position: absolute; top: 0; width: 110px; z-index: 300; } ul#NavigationPrimary li.over ul li.over ul.third{ display: block; /* Show the dropdown on hover */ position:absolute; z-index:300; } /* Wrap left and center channel so that we can put center channel first in markup for optimal content ordering */ /* Home */ .homepopup {border:1px solid #CCC; width:600px; position:absolute; top:210px; left:25%; z-index:1000; background:#fff;} .homepopup p {padding:0 20px;} .homepopup ol {list-style:decimal; margin-left:40px;} .homepopup ul {margin-bottom:10px;} .homepopup ul li {padding:0 20px 5px 0; list-style:disc; margin-left:20px;} #HomePopupOne {display:none;} #HomePopupTwo {display:none;} #HomePopupThree {display:none;} .energyStar h1 {background:url("../pics/home/feature-blue.gif"); padding:12px 0 12px 50px; font-size:1.4em; color:#FFF; font-weight:bold; margin-bottom:3px;} .government h1 {background:url("../pics/home/feature-green.gif") no-repeat; padding:12px 0 12px 50px; font-size:1.4em; color:#FFF; font-weight:bold; margin-bottom:3px;} .newsevents h1 {background:url("../pics/home/feature-red.gif"); padding:12px 0 12px 50px; font-size:1.4em; color:#FFF; font-weight:bold; margin-bottom:3px;} .box {border:1px solid #ececee;} .box .content-box { background:#f9fafe; border:2px solid #fFF; padding:15px; height:150px; position:relative;} .box .content-box img {float:right;} #ContentChannel .box .content-box .readmore {margin:0;} .box .content-box .readmore {position:absolute; top:150px; right:10px; border-bottom:0;} #MainBody .box .content-box .readmore a {color:#FFF; text-decoration:none; padding:5px 0 5px 10px;} .box .content-box .readmore a.energystar {background:url("../pics/home/readmore-blue.gif"); width:67px; height:16px; display:block;} .box .content-box .readmore a.grant {background:url("../pics/home/readmore-green.gif"); width:67px; height:16px; display:block;} .box .content-box .readmore a.news {background:url("../pics/home/readmore-red.gif"); width:67px; height:16px; display:block;} .box .content-box .readmore a:hover {background:url("../pics/home/readmore-orange.gif");} /* Left channel */ #SidebarPrimary { float: left; } /* Center channel */ #Content { float: right; } .readmore {border-bottom:1px dotted #CCC; padding-bottom:10px;} h1 {font-weight:bold; font-size:1.4em; margin-bottom:10px; color:#697b87;} h2 {font-weight:bold; font-size:1.2em; margin-bottom:5px;} h3 {font-weight:bold; color:#353430; text-transform:uppercase; margin-bottom:5px;} p {margin-bottom:10px;} #Content a {color:#0099d8;} #Content a:hover {color:#b00e1e;} #Content ul {margin-bottom:10px;} #Content li {list-style:disc; margin-left:30px;} #Content .left {float:left; width:360px; padding-right:10px;} #Content .right {float:right; width:360px; padding-left:10px;} #Content dl.events {margin-bottom:20px;} #Content dl.events dt {width:50px; float:left; text-align:right; margin-right:10px; font-weight:bold;} #Content dl.events dd {} #Content dl.contact {margin-bottom:10px;} #Content dl.contact dt {width:105px; float:left; font-weight:bold;} #Content dl.contact dd {padding-bottom:5px;} #Content .showroom {float:left; padding-right:30px; padding-left:10px;} #Content .showroom dl {margin-bottom:20px;} #Content .showroom dl dt {width:110px; font-weight:bold;} #Content .showroom dl dd {text-indent:10px;} #Content .section-links li {margin:0 0 0 15px; padding:0 0 10px 20px; background:url("../pics/home/arrow.gif")no-repeat; list-style:none;} #Content .section-links a {text-decoration:none;} table.sample-tabs p {padding-top:10px; position:relative; z-index:10;} .sample-tabs td { width:100px; text-align:center; padding:10px; } .sample-tabs td.title {text-align:left; font-weight:bold; padding-bottom:0; border-top:1px solid #CCC;} .sample-tabs img {border:1px solid #CCC; padding:5px 10px;} .larger {position:absolute; top:0; left:75px; display:none; z-index:300; border:3px solid #ccc; text-align:center; background:#fff;} .larger img {padding:20px;} .important {color:#b00e1e;} .note {color:#b00e1e; font-weight:bold;} #WinterHours {display:none;} #SummerHours {} .hours dl {float:left; background:url("../pics/common/bottom-textbox.png") bottom left no-repeat; margin-right:20px; margin-bottom:20px; padding-bottom:10px;} .hours dd { padding:0 20px 10px 15px;} .hours dd.img {padding:0;} .hours p {clear:both;} .jobs {background:#ebeae5; border:1px solid #80807d; padding:20px; margin-bottom:15px;} .jobs dl {margin-bottom:10px;} .jobs dt {font-weight:bold; width:90px; text-align:right;} .jobs dd {text-indent:100px; position:relative; top:-14px;} .jobs .hidden {display:none;} /* Before and after */ table.beforeafter {} table.beforeafter td {border:1px solid #CCC; padding:2px; padding-bottom:0; vertical-align:top;} table.beforeafter td.text {padding:10px;} table.beforeafter td.noborder {border:0;} /* Right Channel */ #SidebarSecondary { float: right; } /* First Level */ #SecondaryNavigation h1 {margin:0;} #SecondaryNavigation h1 a {color:#FFF; font-weight:bold; text-transform:uppercase; background:#3b4b5b; padding:8px 10px; border:0;} #SecondaryNavigation h1 a:hover {background:#3b4b5b;} #SecondaryNavigation ul {background:#a7b2bb url("../pics/rightnav/container.gif") bottom left no-repeat; margin-bottom:20px; } #SecondaryNavigation li {margin:0; padding:0;} #SecondaryNavigation li.new a {background:#b00e1e;} #SecondaryNavigation a {display:block; padding:8px 10px; text-decoration:none; border-bottom:1px solid #fff; color:#3b4b5b;} #SecondaryNavigation a:hover {color:#fff; background:#697b87;} #SecondaryNavigation li.active a {color:#fff; background:#697b87; border-bottom:0;} #SecondaryNavigation li.active { border-bottom:1px solid #CCC;} /* #SecondaryNavigation li.Doors a {border-bottom:0;} #SecondaryNavigation li.Doors a:hover {background:#697b87 url("../pics/rightnav/container-over.gif") bottom left no-repeat;} #SecondaryNavigation li.active.Doors {border:0;} #SecondaryNavigation li.active.Doors a {color:#fff; background:#697b87 0; border-bottom:0; padding-bottom:2px;} #SecondaryNavigation li.active.Doors li a {padding:2px 25px; color:#ccc; position:relative; top:0;} #SecondaryNavigation li.active.Doors li.Patio a {background:#697b87 url("../pics/rightnav/container-over.gif") bottom left no-repeat; padding-bottom:8px;} #SecondaryNavigation li.active.Doors a:hover {background:#697b87 0;} */ #SecondaryNavigation li.Garaga.active a {padding-bottom:7px;} #SecondaryNavigation li.Garaga a:hover {background:#697b87 url("../pics/rightnav/container-over.gif") bottom left no-repeat;} #SecondaryNavigation li.Garaga.active {border:0;} #SecondaryNavigation li.Garaga.active a {background:#697b87 url("../pics/rightnav/container-over.gif") bottom left no-repeat; padding-bottom:8px;} #SecondaryNavigation li.Garaga.active a:hover {background:#697b87 url("../pics/rightnav/container-over.gif") bottom left no-repeat;} #SecondaryNavigation li.singlelast.active a {padding-bottom:7px;} #SecondaryNavigation li.singlelast a:hover {background:#697b87 url("../pics/rightnav/container-over.gif") bottom left no-repeat;} #SecondaryNavigation li.singlelast.active {border:0;} #SecondaryNavigation li.singlelast.active a {background:#697b87 url("../pics/rightnav/container-over.gif") bottom left no-repeat; padding-bottom:8px;} #SecondaryNavigation li.singlelast.active a:hover {background:#697b87 url("../pics/rightnav/container-over.gif") bottom left no-repeat;} /* Second Level */ #SecondaryNavigation li ul {background:#697b87 0; margin:0;} #SecondaryNavigation li.active ul.nopad li a {position:relative; top:0px;} #SecondaryNavigation li.active ul li.active {border:0;} #SecondaryNavigation li.active ul li a {padding:2px 25px; color:#ccc; position:relative; top:-5px;} #SecondaryNavigation li.active ul li.last a {padding-bottom:8px;} #SecondaryNavigation li.active ul li a:hover {color:#2e2f2f; background:#697b87 0;} #SecondaryNavigation li.active ul li.active a {color:#2e2f2f;} /* News ticker */ .newsTicker {margin-top:20px;} .newsTicker h3 {font-weight:bold; background:url("../pics/rightnav/news-ticker-title.gif"); padding:5px 10px; margin-bottom:0;} ul#Headlines { background:url("../pics/rightnav/bottom-quote-box.gif") bottom left; } ul#Headlines em {font-style:italic; font-weight:bold; font-size:.9em;} ul#Headlines li {padding:10px;} ul#Headlines a { color: #7b7676; display: block; text-decoration: none; } ul#Headlines a:hover { color: #5d5454; background:0;} /* end news ticker */ /* New items */ #SecondaryNavigation .newitems ul {background:url("../pics/rightnav/whats-new-bottom.png") bottom left; padding:10px 0 10px 20px;} #SecondaryNavigation .newitems li { padding:0 0 5px 0;} #SecondaryNavigation .newitems h3 {color:#FFF; text-transform:uppercase; font-weight:bold; text-align:center; background:url("../pics/rightnav/whats-new.png"); padding:2px 0 9px 0; margin:0;} #SecondaryNavigation .newitems a {border:0; font-weight:bold; padding:0 0 5px 20px; background:url("../pics/rightnav/newitem-arrow.png") 0 2px no-repeat;} #SecondaryNavigation .newitems a:hover {color:#b00e1e;} /* end new items */ #ContactMap {height:380px; position:relative;} #SudburyMap {position:absolute; top:0; left:0; z-index:100;} #OrilliaMap {position:absolute; top:0; left:0; z-index:90;} #TimminsMap {position:absolute; top:0; left:0; z-index:80;} #SudburyStreet {position:absolute; top:0; left:0; z-index:100;} #OrilliaStreet {position:absolute; top:0; left:0; z-index:90;} #TimminsStreet {position:absolute; top:0; left:0; z-index:80;} #Sudbury a {padding:0; background:0; border:0; color:#b00e1e;} #Sudbury a:hover {background:0; color:#4c4c4c;} #Orillia a {padding:0; background:0; border:0; color:#b00e1e;} #Orillia a:hover {background:0; color:#4c4c4c;} #Timmins a {padding:0; background:0; border:0; color:#b00e1e;} #Timmins a:hover {background:0; color:#4c4c4c;} .rightTextbox {background:url("../pics/rightnav/bottom-right-textbox.png") bottom right no-repeat; padding:5px 0 10px 40px; margin:0 5px 20px 0; position:relative; top:-4px;} .rightTextbox p {padding:0 0 8px 10px; margin:0;} #Footer {color:#FFF; font-size:.9em; border-top:5px solid #bdd7e2; width:1003px;} #Footer a {color:#fff;} #Footer a:hover {color:#095394;} #Footer p.copy { text-align:center; border-top:1px solid #FFF; padding:10px; margin:0;} /* Sitemap classes */ #SiteMap ul.left {float:left; margin-right:100px; width:250px;} #SiteMap h1 {font-size:1em; margin:0;} #SiteMap h1 a { color:#697b87; text-decoration:none;} #SiteMap a {text-decoration:none; color:#727272;} #SiteMap a:hover {text-decoration:underline;} #SiteMap h2 {font-size:1em; margin:0; padding:0;} #SiteMap h2 a {text-decoration:none; color:#454c4d;} #SiteMap li {list-style:none; padding:0 0 5px 10px; margin:0;} #SiteMap li ul li {padding:0 0 5px 10px;} #SiteMap li ul li ul li {padding:0 0 0 10px;} /* Utility Classes */ .selfClear:after { /* Make elements self-clearing - see http://positioniseverything.net/easyclearing.html */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } #TabContainer {width:300px;} /* Tabs - important styles to ensure accessibility in print */ @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */ .ui-tabs-hide { display: none; } } @media print { .anchors { display: none; } } /* Tabs - not important for accessibility, just for the look of it... */ #container-1 .anchors {margin: 0; padding: 0; list-style: none; z-index:300; position:relative; top:1px; height:26px;} #container-1 .anchors li {float:left; border-bottom:0; margin:0 7px 0 0; background:url("../pics/tabs/off.gif"); list-style:none;} #container-1 .anchors li:hover {background:url("../pics/tabs/over.gif");} #container-1 .anchors a {color:#dee2e7; text-decoration:none; background:url("../pics/tabs/right-off.gif") top right no-repeat; padding:5px 10px 5px 10px; display:block; text-align:center; font-weight: bold;} #container-1 .anchors a:hover {color:#3b4b5b; background:url("../pics/tabs/right-over.gif") top right no-repeat;} #container-1 .anchors .ui-tabs-selected {background:url("../pics/tabs/active.gif");} #container-1 .anchors .ui-tabs-selected:hover {background:url("../pics/tabs/active.gif");} #container-1 .anchors .ui-tabs-selected a {color:#3b4b5b; font-weight:bold; background:url("../pics/tabs/right-active.gif") top right no-repeat; padding-bottom:6px; display:block;} #container-1 .anchors .ui-tabs-selected a:hover {color:#3b4b5b; background:url("../pics/tabs/right-active.gif") top right no-repeat;} .ui-tabs-hide { display: none; } #container-1 .container {padding:0 20px 20px 20px; position:relative; z-index:100; background:url("../pics/tabs/bottom-corners.gif") bottom left; clear:both;} #container-1 .container li {padding-bottom:10px;} #container-1 .topcontainer {background:url("../pics/tabs/top-corners.gif") top left; clear:both; height:30px;} #container-1 { margin-top:20px; position:relative;} a.hidden {color:#FFF;}