body { font-family:Arial, Helvetica, sans-serif; }

/* ================================================================ */

#page { margin-top:20px; }
.left_pull { position:relative; top:0; left:-10px; }
.right_push { position:relative; top:0; right:-10px; }

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/vertical-concertina-6.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
/* #slide height = (number of top level links - 1) * height of links + inner div height */
ul { padding:0; margin:0; list-style:none; text-align:right; }

#slide { /* height:315px; */ position:relative; overflow:hidden; }

ul.push_down_slide { margin-top:40px; }

#slide li.sub, #slide li.top { width:100%; display:block; float:right; height:35px; line-height:35px; overflow:hidden; cursor:pointer; }
 
#slide li.sub, #slide li.top { font-size:0.9em; font-weight:bold; color:#807175; text-transform:uppercase; }
#slide li.sub:hover, #slide li.top:hover { color:#807175; }

#slide li.top a { text-decoration:none; color:#807175; display:block; }
#slide li.top a:hover { color:#807175; }

#slide li.clicked {  color:#807175; background:url(arrows/down.gif) no-repeat 5px 8px; }
 
/* #slide li.sub div height = (maximum sub lines * sub line height) + top level link height(variable fY in jQuery) */
#slide li.sub div.residential { height:105px; width:100%; line-height:35px; }
#slide li.sub div.commercial { height:105px; width:100%; line-height:35px; }
 
#slide li div ul { padding:0; margin:0; list-style:none; }
#slide li div ul li { float:right; height:25px; width:100%; }
#slide li div ul li a { text-decoration:none; text-transform:none; color:#807175; display:block; font-size:1em; font-weight:normal; height:19px; line-height:19px; width:100%; }
#slide li div ul li a:hover { color:#807175; background:url(arrows/out-over.gif) no-repeat 5px 6px; }

/* ================================================================ */

#content { padding:0 10px; width:530px; }

/* ================================================================ */

#HSS { 
   width: 530px; /* important to be same as image width */ 
   height: 530px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#HSSContent {
   width: 530px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.HSSImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.HSSImage span {
   position: absolute; /* important */
   left: 0;
   font-size:0.7em;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
.left {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 280px;
}
.right {
	right: 0;
	bottom: 0;
	width: 90px !important;
	height: 290px;
}
.clear {
   clear: both;
}

/* ================================================================ */

#title_box { width:90%; margin:0 auto; height:50px; }
#title_box img { float:left; display:block; }
#myController { float:right; padding:15px 5px; }
#myController span{ font-size:0.75em; color:#000; background:#E4C5A1; padding:3px 5px; margin-left:10px; cursor:pointer; }
#jFlowSlide {}
#mySlides { height:450px; }
#myController span.jFlowSelected { background:#8FADCC; } 
.jFlowPrev, .jFlowNext{ cursor:pointer; }
#caption_box { color:#231f20; width:100%; font-size:0.75em; padding:10px 0 0; }

#myController1 { float:right; padding:15px 5px; }
#myController1 span{ font-size:0.75em; color:#000; background:#E4C5A1; padding:3px 5px; margin-left:10px; cursor:pointer; }
#jFlowSlide1 {}
#mySlides1 { height:550px; }
#myController1 span.jFlowSelected1 { background:#8FADCC; } 
.jFlowPrev1, .jFlowNext1{ cursor:pointer; }
#caption_box1 { color:#231f20; width:100%; font-size:0.75em; padding:10px 0 0; }

/* ================================================================ */

.client_quotes_bot { margin-top:15px; }
.client_quotes_bot p { margin:0; font-size:0.75em; font-style:italic; }
.client_quotes_bot p.quote { /*color:#8FADCC;*/ margin-bottom:5px; color:#7e99b4; }
.client_quotes_bot p.client { /*color:#E4C5A1;*/ font-weight:bold; color:#d7b18b; }

/* ================================================================ */

.about-us p { font-size:0.8em; }

#details-gallery { width:530px; }
#details-gallery img { padding-right:9px; padding-bottom:10px; }
#details-gallery img.rightcorner { padding-right:0; }

/* ================================================================ */

h1.logo { height:233px; width:160px; overflow:hidden; }
h2.title { height:38px; width:300px; overflow:hidden; margin:0; padding:0; float:left; }
h2.error404 { font-size:1.1em; padding:5px; background-color:#CCC; }
h3.brand-message { width:187px; height:34px; overflow:hidden; margin:35px 0 30px; }

span.contact-title, span.contact-details { font-size:0.9em; }
span.contact-title { color:#807175; font-weight:bold;  }
span.contact-details { color:#807175; }

.client_quotes { margin-top:35px; text-align:right; }
.client_quotes p { margin:0; font-size:0.75em; font-style:italic; }
.client_quotes p.quote { color:#7e99b4; margin-bottom:5px; }
.client_quotes p.client { color:#d7b18b; font-weight:bold; }

/* ================================================================ */

#footer { padding:20px 10px; width:530px; margin:0 auto; clear:both; font-size:0.75em; color:#807175; }
#footer a { color:#807175; text-decoration:none; }
.leftalign { float:left; }
.rightalign { float:right; }