/*Shared body styles
_______________________________________________________________________________*/
body {
    background-color: #001d10;
    border-top: solid 2px #6abe93;
    height: 100%
}

#gradientWrapper{
    background:-webkit-gradient(linear, left top, left bottom, from(#1a4c34), to(#001d10));
    background:-moz-linear-gradient(top,#1a4c34 0%, #001d10 100%);
    background:-webkit-linear-gradient(top,#1a4c34 0%, #001d10 100%);
    background:-o-linear-gradient(top,#1a4c34 0%, #001d10 100%);
    background:-ms-linear-gradient(top,#1a4c34 0%, #001d10 100%);
    background: linear-gradient(top,#1a4c34 0%, #001d10 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a4c34', endColorstr='#001d10',GradientType=0 );
}

.mainBody{
    background-color: #1e6c47;
    background:-webkit-gradient(linear, left top, left bottom, from(#1e6c47), to(#1a4c34));
    background:-moz-linear-gradient(top,#1e6c47 0%, #1a4c34 100%);
    background:-webkit-linear-gradient(top,#1e6c47 0%, #1a4c34 100%);
    background:-o-linear-gradient(top,#1e6c47 0%, #1a4c34 100%);
    background:-ms-linear-gradient(top,#1e6c47 0%, #1a4c34 100%);
    background: linear-gradient(top,#1e6c47 0%, #1a4c34 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e6c47', endColorstr='#1a4c34',GradientType=0 );
    padding: 20px 20px 20px 20px;
}

/** container that holds all main content of the web page. */
#pageContent {
    min-height: 520px;
}

/** this container will fade in slowly to display all body content. */
#pageContent div#fadeContent {
    opacity: 0.01;
    filter:alpha(opacity=01);  /* For IE8 and earlier */ 
}

.hidden {
    display: none;
}

.floatRight, .imgRight{
    float: right
}

.floatLeft, .imgLeft{
    float: left
}

.imgLeft{
    margin-right: 10px;
    margin-bottom: 10px;
}

.imgRight{
    margin-left: 10px;
    margin-bottom: 10px;
}

.imgCenter{
    margin-left: auto;
    margin-right: auto;
}

.spacer{
    margin-bottom: 20px;
}

/*Button styles
_______________________________________________________________________________*/
button{
    background-color: #4da277;
    background:-webkit-gradient(linear, left top, left bottom, from(#4da277), to(#458d69));
    background:-moz-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-webkit-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-o-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-ms-linear-gradient(top,#4da277 0%, #458d69 100%);
    background: linear-gradient(top,#4da277 0%, #458d69 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4da277', endColorstr='#458d69',GradientType=0 );
    border: solid 1px #4da277;
    width: 170px;
    padding: 5px;
    margin: 0px 10px 0px 10px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
}

button:hover{
    cursor: pointer;
    border: solid 1px #458d69;
    background-color: #458d69;
    background:-webkit-gradient(linear, left top, left bottom, from(#458d69), to(#4da277));
    background:-moz-linear-gradient(top,#458d69 0%, #4da277 100%);
    background:-webkit-linear-gradient(top,#458d69 0%, #4da277 100%);
    background:-o-linear-gradient(top,#458d69 0%, #4da277 100%);
    background:-ms-linear-gradient(top,#458d69 0%, #4da277 100%);
    background: linear-gradient(top,#458d69 0%, #4da277 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#458d69', endColorstr='#4da277',GradientType=0 );
}

/*Header styles
_______________________________________________________________________________*/
#headerContainer{
    width: 100%;
    padding: 10px 0px 10px 0px;
    background-color: #437754;
    background:-webkit-gradient(linear, left top, left bottom, from(#437754), to(#285e3a));
    background:-moz-linear-gradient(top,#437754 0%, #285e3a 100%);
    background:-webkit-linear-gradient(top,#437754 0%, #285e3a 100%);
    background:-o-linear-gradient(top,#437754 0%, #285e3a 100%);
    background:-ms-linear-gradient(top,#437754 0%, #285e3a 100%);
    background: linear-gradient(top,#437754 0%, #285e3a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#437754', endColorstr='#285e3a',GradientType=0 );
}

#headerContainer #logo{
    margin-bottom: 5px;
}

#headerContainer #tagline{
    text-align: right;
    margin-right: 85px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-size: 10px;
}

/*Form styles
_______________________________________________________________________________*/
input, textarea, select{
    width: 334px;
    max-width: 334px;
    border: none;
    margin-bottom: 15px;
    padding: 3px;
    overflow: hidden;
    background-color: #1e6c47;
    color: #fff;
    font-family: 'Arial', sans-serif;
}

input:focus, textarea:focus, select:focus{
    background-color: white;
    color: #000;
}

label{
    display: inline-block;
    margin-top: 3px;
}

#commercial-service, #residential-service{
    width: 20px;
    margin: 0px 0px 15px 0px;
    padding: 0px;
}

/*Footer styles
_______________________________________________________________________________*/
#footer{
    width: 100%;
    background-color: #4da277;
    background:-webkit-gradient(linear, left top, left bottom, from(#4da277), to(#458d69));
    background:-moz-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-webkit-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-o-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-ms-linear-gradient(top,#4da277 0%, #458d69 100%);
    background: linear-gradient(top,#4da277 0%, #458d69 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4da277', endColorstr='#458d69',GradientType=0 );
    padding: 20px 0px 20px 0px;
}

#footer #footerLogo{
    margin-bottom: 10px;
}

#footer a{
    font-family: 'Arial', sans-serif;
}

/*Image collage styles
_______________________________________________________________________________*/
.imgContainer{
    padding: 20px;
    background: rgb(82,181,134);
    background: rgba(82,181,134, 0.5);
    margin: 0px auto 20px auto;
}

.imgStyle{
    border: solid 1px #c3f1da;
}

#homeImg{
    background-image: url(../images/home/residential-commercial.jpg);
    background-repeat: no-repeat;
    width: 800px;
    height: 264px;
}

#contactImg{
    background-image: url(../images/contact/residential-commercial.jpg);
    background-repeat: no-repeat;
    width: 800px;
    height: 264px;
}

/*Navigation styles
_______________________________________________________________________________*/
#navContainer{
    width: 100%;
    background-color: #4da277;
    background:-webkit-gradient(linear, left top, left bottom, from(#4da277), to(#458d69));
    background:-moz-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-webkit-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-o-linear-gradient(top,#4da277 0%, #458d69 100%);
    background:-ms-linear-gradient(top,#4da277 0%, #458d69 100%);
    background: linear-gradient(top,#4da277 0%, #458d69 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4da277', endColorstr='#458d69',GradientType=0 );
    box-shadow:0px 3px 7px 0px rgba(0, 41, 50, 0.50);
    -moz-box-shadow:0px 3px 7px 0px rgba(0, 41, 50, 0.50);
    -webkit-box-shadow:0px 3px 7px 0px rgba(0, 41, 50, 0.50);
    margin: 0px;
}

 #navContainer #navContents{
    position: relative;
    display: inline-table;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    z-index: 10;
}

#navContainer #navContents:after{
    content: "";
    clear: both;
    display: block;
}

#navContainer #navContents .navItems{
    display: inline-block;
    float: left;
    margin: 3px 0px 0px 0px;
    padding: 3px 0px 3px 0px;
}

 #navContainer #navContents .navItems:hover{
    background-color: #6bbe94;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

 #navContainer #navContents .navItems .navLinks{
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-size: 12px;
    text-decoration: none;
}

 #navContainer #navContents .navItems .navLinks:hover{
    border: none;
}

/*Nested/dropdown navigation styles within main navigation*/
 #navContainer #navContents .navDropDownContainer{
    display: none;
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
}

 #navContainer #navContents .navItems:hover > .navDropDownContainer{
    display: block;
}

 #navContainer #navContents .navDropDownContainer{
    background-color: #6bbe94;
    padding: 0px;
    position: absolute;
    top: 100%;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#navContainer #navContents .navDropDownContainer .dropDownItem{
    float: none;
    border-top: solid 1px #95dcb8;
    position: relative;
    margin: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    text-decoration: none;
    list-style-type: none;
}

 #navContainer #navContents .navDropDownContainer .dropDownItem:hover{
    background-color: #95dcb8;
    color: #285e3a;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#navContainer #navContents .navDropDownContainer .dropDownItem .dropDownLink{
    text-decoration: none;
    color: #fff;
    display: inline-block;
    padding: 3px 10px 3px 10px;
}

 #navContainer #navContents .navDropDownContainer .dropDownItem .dropDownLink:hover{
    border: none;
    color: #285e3a;
}

/*Speaker styles
_______________________________________________________________________________*/
/** main container for the animated speaker and lights */
#speakerContainer {
    left: 20px;
    max-height: 20px;
    max-width: 20px;
    position: relative;
    top: -20px;
    z-index: 5;
}

/** container for the animated lights */
#speakerContainer #lightsContainer {
    height: 280px;
    position: absolute;
    top: 0px;
}

#speakerContainer #lightsContainer div#lights {
    display: none;
    height: 280px;
    position: absolute;
}

#speakerContainer #lightsContainer img#speaker{
    display: block;
    left: 44px;
    position: absolute;
    top: 39px;
}