/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.2r1
*/
html{color:#666;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,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,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{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;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

/* ----------------------------  my style ------------------------ */


body { background:#d1cbc2; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#666; }
h1 { color:#333; font-size:16px; font-weight: bold; }
#sitewrap {
	width: 1024px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
strong { font-weight:bold; }
.clear { clear:both; }
#top { background:url(../images/top.jpg) no-repeat; height:91px; padding:43px 0 0; }

/* ----------- base menu style ----------------- */

#menu { padding:1px 0; }
#menu ul#mymenu { margin:0; padding:0; background:url(../images/menu-sprite.jpg) no-repeat; overflow:hidden; width:400px; height:37px; padding:0 0 0 560px; }
#menu ul#mymenu li { list-style:none; float:left; }
#menu ul#mymenu li a { height:37px; display:block; }
#menu ul#mymenu li a span { display:none; }
#menu ul#mymenu li#home a { width:72px;  }
#menu ul#mymenu li#services a { width:92px;}
#menu ul#mymenu li#gallery a { width:88px;}
#menu ul#mymenu li#contact a { width:108px;}

/* ----------------- menu hover sprites ---------------------- */

#menu ul#mymenu li#home a:hover { background:url(../images/menu-sprite.jpg) no-repeat -560px -37px; }
#menu ul#mymenu li#home a.on { background:url(../images/menu-sprite.jpg) no-repeat -560px -37px; }
#menu ul#mymenu li#services a:hover { background:url(../images/menu-sprite.jpg) no-repeat -632px -37px; }
#menu ul#mymenu li#services a.on { background:url(../images/menu-sprite.jpg) no-repeat -632px -37px; }
#menu ul#mymenu li#gallery a:hover { background:url(../images/menu-sprite.jpg) no-repeat -724px -37px; }
#menu ul#mymenu li#gallery a.on { background:url(../images/menu-sprite.jpg) no-repeat -724px -37px; }
#menu ul#mymenu li#contact a:hover { background:url(../images/menu-sprite.jpg) no-repeat -812px -37px; }
#menu ul#mymenu li#contact a.on { background:url(../images/menu-sprite.jpg) no-repeat -812px -37px; }


/* -------------------------------- main body bg --------------------  */
#contentwrap { width:960px; height:603px; }
#content-left { width:136px; height:548px; background:url(../images/left-bg.jpg) no-repeat; float:left; padding:55px 0 0; }
#content-main {
	width:824px;
	height:603px;
	background:url(../images/main-bg.jpg) no-repeat;
	float:left;
	position: relative;
}
#content-main-overlay { background:#000; height:603px; opacity:0.9; filter:alpha(opacity=90); z-index:-1}

body#gallery #content-main 	{
	width:960px;
	height:603px;
	background:url(../images/main-bg2.jpg) no-repeat;
	float:left;
	position: relative;
}
body#services #content-main 	{
	width:960px;
	height:603px;
	background:url(../images/serv1.jpg) no-repeat;
	float:left;
	position: relative;
}
body#contact #content-main {
	width:960px;
	height:603px;
	background:url(../images/contact1.jpg) no-repeat;
	float:left;
	position: relative;
}
.contact { bottom: 40px; color: #EEEEEE; position: absolute; right: 30px; text-align: right; }
#content {
	color: #555555;
	font-size: 11px;
	padding: 15px 0 0 20px;
	width: 750px;
	overflow:hidden;
}
#content p { margin:0 0 5px;}
#footer { padding:18px 0 0 10px; height:70px; }
.frames { margin:0 0 0 50px; }
#content-below { position:absolute; top:455px; left:372px;  }
#house-rebuilt { position:absolute; right: 59px; top: 191px;  }

/*#gallery-wrap { width:760px; margin:0 auto; padding:50px 0 0; }*/
#gallery-wrap { width:570px; margin:0 auto; padding:50px 0 0; }
#gallery-wrap h1 { color:#eee; }

/* ------------------- gallery page --------------------------------- */

body#gallery #content { width:100%; padding:50px 0 0; }

/* --------------------- tool tips --------------------- */


/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	background:#000;
	font-size:12px;
	height:18px;
	width:100px;
	padding:10px 17px 15px 15px;
	color:#fff;
	text-align:left;
	z-index:1000;
	overflow:hidden;
	opacity:0.8;
	filter:alpha(opacity=80);
	border:2px #eee solid;
}
.tooltip strong { text-align:center; font-size:14px; }

/* style the trigger elements */
#demo img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}

/* --------------------- galllery style ----------------------- */


/* ---------- gallery styles start here ----------------------- */
.gallery {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gallery li {
	padding: 10px 5px;
	margin: 0;
	float: left;
	position: relative;
	width: 180px;
	height: 135px;
	overflow:hidden;
}
.gallery li span.hide { display:none; }
.gallery li:hover img {
	border-color: #000;
}
.gallery img {
	background: #fff;
	border: solid 1px #888;
	padding: 5px;
}
.gallery em {
	background: #fff url(images/grey-gradient.gif) repeat-y;
	color: #000;
	font-style: normal;
	padding: 2px 10px;
	display: block;
	position: absolute;
	top: 110px;
	left: 9px;
	border: 1px solid #999;
	border-left-color: #888;
}
.gallery a {
	text-decoration: none;
}
.gallery a:hover em {
	background: #ffdb01 url(images/orange-gradient.gif) repeat-y;
	border-color: #c25b08;
}

/* --------- slideshow ----------------- */

#slideshow-tv { 
	height: 125px;
    left: 280px;
    position: absolute;
    top: 205px;
    width: 219px;
}
#slideshow {
    position: relative;
    width: 219px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}
li.btm { width:275px; height:238px; }
#content .services { padding:50px 10px 0 10px; color:#fff; width:570px }
#content .services  h2, #content-main .contact  h2 { font-size:14px; font-weight:bold; }