/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*End of Reset*/
/*Old dark gray CACAC8 dedede second dark gray*/
html{background: #e4e4e4; padding: 30px 0 0 0;}
body{width: 966px; margin: 0 auto; color: #000; font-family: Verdana, Arial, Sans-serif; font-size: .8em}
header h1{width: 961px; height: 96px;}
header h1 a{display: block; text-indent: -9999px; width: 961px; height: 96px; background: transparent url('images/logo.png') top left no-repeat;}
/*Controls and Control backgrounds*/
ul#controls{float: left; width: 118px; margin-top: 13px;}
ul#controls li{width: 118px; height: 84px; padding: 0; margin: 0 0 1px 0; overflow: hidden;}
ul#controls li a{text-indent: -9999px; display: block; height: 60px; width: 59px; margin: 13px 0 0 50px;}
li.c1 a{background: transparent url('images/icons.png') 0 -2px;}
li.c2 a{background: transparent url('images/icons.png') 0 -190px;}
li.c3 a{background: transparent url('images/icons.png') 0 -376px;}
li.c4 a{background: transparent url('images/icons.png') 0 -565px;}
li.c5 a{background: transparent url('images/icons.png') 0 -751px;}
li.c6 a{background: transparent url('images/icons.png') 0 -937px;}
li.c7 a{background: transparent url('images/icons.png') 0 -1123px;}
li.c8 a{background: transparent url('images/icons.png') 0 -1312px;}
li.c1 a.inactive{background-position: 0 -128px}
li.c1 a.active, li.c1 a:hover{background-position: 0 -64px}
li.c2 a.inactive{background-position: 0 -313px}
li.c2 a.active, li.c2 a:hover{background-position: 0 -252px}
li.c3 a.inactive{background-position: 0 -503px}
li.c3 a.active, li.c3 a:hover{background-position: 0 -440px}
li.c4 a.inactive{background-position: 0 -688px}
li.c4 a.active, li.c4 a:hover{background-position: 0 -627px}
li.c5 a.inactive{background-position: 0 -874px}
li.c5 a.active, li.c5 a:hover{background-position: 0 -813px}
li.c6 a.inactive{background-position: 0 -1060px}
li.c6 a.active, li.c6 a:hover{background-position: 0 -999px}
li.c7 a.inactive{background-position: 0 -1247px}
li.c7 a.active, li.c7 a:hover{background-position: 0 -1185px}
li.c8 a.inactive{background-position: 0 -1436px}
li.c8 a.active, li.c8 a:hover{background-position: 0 -1374px}
/*Content links for the inital page view*/
ul#content{float: left; width: 846px; margin: 13px 0 0 0; padding-bottom: 84px}
ul#content li{width: 846px; margin: 0 0 1px 0}
ul#controls li, ul#content li{height: 84px;}
a.about, a.design_build, a.residential, a.commercial_industrial, a.lighting_controls, a.generator, a.window_management, a.landscape_lighting{display: block; width: 846px; height: 84px; text-indent: -9999px; text-decoration: none}
a.about{background: url('images/headers/about.jpg') top left no-repeat;}
a.design_build{background: url('images/headers/design-build.jpg') top left no-repeat;}
a.commercial_industrial{background: url('images/headers/commercial.jpg') top left no-repeat;}
a.lighting_controls{background: url('images/headers/lighting-controls.jpg') top left no-repeat;}
a.generator{background: url('images/headers/generator.jpg') top left no-repeat;}
a.window_management{background: url('images/headers/window.jpg') top left no-repeat;}
a.residential{background: url('images/headers/residential.jpg') top left no-repeat;}
a.landscape_lighting{background: url('images/headers/landscape-lighting.jpg') top left no-repeat;}
a.about:hover, a.design_build:hover, a.commercial_industrial:hover, a.generator:hover, a.window_management:hover, a.landscape_lighting:hover, a.about_active, a.design_build_active, a.residential_active, a.commercial_industrial_active, a.window_management_active, a.generator_active, a.landscape_lighting_active, a.control_hover, a.residential:hover, a.residential_active, a.lighting_controls:hover, a.lighting_controls_active, .slide3 a.control_hover, .slide5 a.control_hover{background-position: 0 -101px ;}
/*Slides*/
.hidden_slide{position: absolute; margin: 0 auto; z-index: 1; margin-left: 118px; margin-top: 13px; display: none; width: 846px; padding-bottom: 84px; color: #7C7E7F; font-family: 'Century Gothic', arial, sans-serif; font-size: 1em;}
.hidden_slide li.top, .hidden_slide li.double{width: 762px; height: 84px; margin: 0 0 1px 0; background-color: #fff; padding: 0 42px 0 42px; overflow: hidden}
.hidden_slide li.double{height: 169px; padding: 0; width: 846px; overflow: visible}
.hidden_slide li.mleft{text-align: left}
.hidden_slide li.mright{text-align: right; padding-right: 42px}
.hidden_slide li.heading{padding: 0; height: 84px; width: 846px;}
.hidden_slide li.mcenter{text-align: center}
.hidden_slide li.large{font-size: 1.5em; padding-top: 31px; height: 53px}
.hidden_slide li.address{padding-top: 11px; height: 73px; font-size: .9em; line-height: 1.2em;}
li.address span{width: 63px; display: inline-block; color: #169B62}
li.arrow p{float: left; width: 588px; }
span.arrow{display: block; float: left; width: 8px; height: 8px; background: url('images/arrow.png') center center no-repeat; margin: 0 8px 0 0}
.hidden_slide h2.left{margin-left: 16px; float: left; width: 126px; display: table; height: 84px}
.hidden_slide h2.left span{display: table-cell; vertical-align: middle;}
.hidden_slide li ul.right{float: left; list-style-type: circle; font-size: 1em; color: #169B62; margin-top: 5px;}
.hidden_slide li ul.right li{margin: 5px;}
.hidden_slide li.long{width: 804px; padding: 0 0 0 42px}
.hidden_slide li.lines-1{padding-top: 38px; height: 46px;}
.hidden_slide li.lines-2{padding-top: 31px; height: 53px}
.hidden_slide li.lines-2-bottom{padding-top: 17px; height: 67px}
.hidden_slide li.lines-3{padding-top: 27px; height: 57px;}
.hidden_slide li.lines-4{padding-top: 16px; height: 68px;}
p.bottom, p.bottom-3{clear: both; margin-left: 16px; width: 588px}
p.bottom span{display: inline-block; width: 294px; text-align: center; padding: 17px 0 0 0; font-size: 1.3em; font-weight: bold;}
p.bottom-3 span{display: inline-block; padding: 17px 25px 0 0; font-size: 1.3em; font-weight: bold;}
p.bottom-3 span.last{padding-right: 0; float: right}
p.bottom-3 span.second{padding-left: 42px}
p.bottom-3 span.second-2{padding-left: 15px}
p.bottom a, p.bottom-3 a{color: #7C7E7F; text-decoration: none}
p.bottom a:hover, p.bottom-3 a:hover{color: #000; text-decoration: underline}
.hidden_slide li p{text-align:justify !important; text-justify: inter-word !important}
.address a{color: #7C7E7F; text-decoration: none}
.address a:hover{color: #000; text-decoration: underline}
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 846px;
height:170px;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable items.
it's enough that you set width and height for the root element and
not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
}
/* single scrollable item */
.scrollable img {
float:left;
}
.scrollable a{display: block; margin: 0 1px 0 0px; float: left}
/* prev, next, prevPage and nextPage buttons */
a.browse, div.hoverscroll div.fixed-arrow.left, div.hoverscroll div.fixed-arrow.right {
position: absolute;
display:block;
width:30px;
height:30px;
float:left;
margin:32px 8px;
cursor:pointer;
font-size:0px;
background:url('images/hori_large2.png') no-repeat;
z-index: 10;
text-decoration: none;
border: 0;
line-height: 0;
text-indent: -9999px;
}
/* right */
a.right, div.hoverscroll div.fixed-arrow.right{ background-position: 0 -30px; clear:right; margin-right: 5px; float: right; right: 0px; top: 30px}
a.right:hover , div.hoverscroll div.fixed-arrow.right:hover{ background-position:-30px -30px; }
a.right:active , div.hoverscroll div.fixed-arrow.right:active { background-position:-60px -30px; }
/* left */
a.left, div.hoverscroll div.fixed-arrow.left{ margin-left: 5px; margin-top: 0px}
a.left:hover, div.hoverscroll div.fixed-arrow.left:hover { background-position:-30px 0; }
a.left:active, div.hoverscroll div.fixed-arrow.left:active { background-position:-60px 0; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
/* Main container */
div.hoverscroll {
position:relative;
}
/* List container */
div.hoverscroll div.listcontainer {
overflow:hidden;
}
div.hoverscroll div.fixed-listcontainer {
overflow: hidden;
float: left;
width: 846px !important;
}
/* Actual list containing items */
div.hoverscroll ul.list {
list-style:none;
margin:0;
padding:0;
}
/* Items contained in the list */
div.hoverscroll ul.list li.item {
display:block;
padding:0;
}
div.hoverscroll.horizontal ul.list li.item {
float:left;
}
div.hoverscroll.horizontal.rtl ul.list li.item {
float: right;
}
/* Arrows */
div.hoverscroll div.arrow {
position:absolute;
float:none;
background-color:#ccc;
background-position:center;
background-repeat:no-repeat;
opacity:0.8;
filter:alpha(opacity=80);
}
div.hoverscroll div.arrow.left,
div.hoverscroll div.arrow.right,
div.hoverscroll div.fixed-arrow.left{
top:66px;
width:30px;
height:30px;
}
div.hoverscroll div.arrow.left {
left:32px;
background:url('images/hori_large2.png') no-repeat;
}
div.hoverscroll div.arrow.right{
right: 32px;
background:url('images/hori_large2.png') no-repeat;
background-position: 0 -30px;
}
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}