/* Stylesheet for EasySteel Homes website */
body, html { margin: 0; padding: 0; }

body {
	background-color: rgb(241,242,242);
	font-family: "lucida grande", verdana, tahoma, arial, helvetica, sans-serif;
	font-size: 11px;
	color: rgb(51,51,51);
}

hr {
	display: none;
}

#container {
	width: 780px;
	margin: 0px auto;
	background: rgb(255,255,255) url(../images/bg-body.gif) no-repeat top left;
}

#HomeYouTubeVideo
{
    margin-left:15px;
    float:right;
}


/* Header */
#header {
	width:220px;
	padding:0;
	height:145px;
	float:left;
	background:transparent;
	}

#header h1 a {
	display: block;
	overflow: hidden;
	width: 160px;
	height: 105px;
	background: url(../images/logo-easysteel.gif) no-repeat top left;
	text-indent: -999px;
	margin:25px 0 0 30px;
	}

/* Navigation */
#navigation {
	float: left;
	clear: left;
	top: 145px;
	width: 220px;
	margin-bottom: 20px;
}

#navigation ul {
	margin: 0 0 0 39px;
	padding: 0;
	list-style-type: none;
	border-top: 1px dotted rgb(189,189,189);
}

#navigation li {
	display: inline;
}

#navigation li a {
	display: block;
	width: 161px;
	line-height: 20px;
	border-bottom: 1px dotted rgb(204,204,204);
	text-decoration: none;
	padding-left: 20px;
	color: rgb(51,102,153);
	font-size: 11px;
}

#navigation li a:hover {
	color: rgb(255,255,255);
	background-color: rgb(0,88,131);
	border-bottom: 1px solid rgb(0,73,115);
}

/* Address part */

#address {
	display: none;
	float: left;
	margin: 24px;
	width: 150px;
	border-left: 1px solid rgb(204,204,204);
}

#address p {
	color: rgb(189,189,189);
	padding-left: 14px;
	font-size: 7pt;
	font-weight: bold;
}

/* Footer */
	#footer {
		background:transparent url(../images/bg-footer.gif) repeat-x bottom left;
		clear:both;
		padding-bottom:20px;
		padding-left:250px;
		}

	#footer p {
		color:rgb(153,153,153);
		font-size:9px;
		line-height:1.5;
		}

	#footer p a {
		color: rgb(153,153,153);
		text-decoration: none;
		}

	#footer p a strong {
		text-decoration: underline;
		}

/* Content */

#outercontent {
	background: transparent url(../images/bg-content.gif) no-repeat top right;
	padding:83px 55px 0 15px;
	float: right;
	width:490px;
	}

#content {
	height:400px;
	margin-bottom:45px;
	}

#outercontent > #content {
	height:auto;
	min-height:450px;
	}

body#esh-home #content {
	height: 200px;
	}

body#esh-home #outercontent > #content {
	height: auto;
	min-height: 200px;
	}

#content h2 {
	color: rgb(0,89,131);
	font-size: 22px;
	text-transform: uppercase;
	font-family: "arial narrow", sans-serif;
	margin:0 0 0 15px;
	padding-bottom: 10px;
	}

#content h3 {
	background: rgb(255,248,235) url(../images/bg-introduction.gif) repeat-x top left;
	margin:0 0 10px 0;
	padding:10px 15px 10px 15px;
	font-size:11px;
	line-height:1.5;
	
	color: rgb(51,51,51);
	font-weight:bold;
	}


#content h5 {
	background: rgb(255,248,235) url(../images/bg-introduction.gif) repeat-x top left;
	margin: 0 0 0 15px;
	padding:0 0 0 0;
	font-size:11px;
	line-height:1.5;
	
	color: rgb(51,51,51);
	font-weight:bold;
	}

#content h3 img {
	border: 2px solid rgb(255,229,176);
	margin-right: 10px;
}

#content h4 {
	font-size:11px;
	color: rgb(0,89,131);
	margin:0 0 0 15px;
	line-height:1.5;
	}
	
	
#content ul {
	list-style:square;
	line-height:1.5;
	margin-left:30px;
	padding:0;
	}


#content li {
	color:rgb(51,51,51);
	

	}


#content p, #content dl {
	color:rgb(51,51,51);
	line-height:1.5;
	margin:0 15px 10px 15px;
	}

#content h3 img {
	float: left;
}

	#content a:link,
	#content a:visited {
		color: rgb(51,153,255);
		text-decoration: none;
		}

	#content a:hover, 
	#content a:active {
		text-decoration: underline;
		}

#content dl {
	}

#content dt {
	font-size:12px;
	font-weight: bold;
	}
	


#content dd {
	margin-bottom:10px;
	margin-left:0;
	}


/* Crumbs */

#crumbs p {
	font-size: 8pt;
	font-weight: normal;
	color: rgb(153,153,153);
	margin-left:15px;
}

#crumbs p a {
	color: rgb(167,167,167);
	text-decoration: none;
}

#crumbs p a:hover {
	text-decoration: underline;
}

/* Forms */

#enquiry-form,
#plan-form {
	padding:15px;
	border:1px solid rgb(235,235,235);
	/*height:180px;*/
	}

#enquiry-form .chk
{
	margin-top:6px;
}
	
#enquiry-form p,
#plan-form p {
	margin:0 0 10px 0;
	}

#enquiry-form label{
	float: left;
	clear: left;
	width: 110px;
	margin: 3px 0px;
	padding: 0px 0px;
	line-height: 18px;
	font-weight:bold;
}
	
	
#plan-form label {
	float: left;
	clear: left;
	width: 100px;
	margin: 3px 0px;
	padding: 0px 0px;
	line-height: 18px;
	font-weight:bold;
}

#enquiry-form input,
#enquiry-form select,
#plan-form input {
	float: left;
	margin: 2px 0px;
	border: 1px solid rgb(153,153,153);
	background: rgb(246,246,246) url(../images/bg-input.gif) repeat-x top left;
	color: rgb(51,51,51);
}

#enquiry-form span,
#plan-form span {
	line-height: 18px;
	font-size: 13pt;
	margin: 2px 2px;
	color: rgb(0,73,115);
}

#enquiry-form br,
#plan-form br 
{ clear: both; }


#enquiry-form  input.submit
 {
	margin-top: 6px;
	width: 80px;
	margin-left: 110px;
	background-color: rgb(224,224,224);
	border-color: rgb(153,153,153);
}

#plan-form input.submit {
	margin-top: 6px;
	width: 80px;
	margin-left: 100px;
	background-color: rgb(224,224,224);
	border-color: rgb(153,153,153);
}


#plan-types {
	margin-left:15px;
	}

#plan-types h4 {
	margin:0;
	}

#plan-types h4 a {
	color:rgb(0,89,131);
	font-weight:normal;
	text-decoration:none;
	background:transparent;
	width:133px;
	border:1px solid rgb(235,235,235);
	padding:3px 5px 3px 10px;
	margin:0 5px 5px 0;
	float:left;
	font-size:11px;
	}

#plan-types h4 a:visited {
	color:rgb(102,102,102);
	}
	
#plan-types h4 a:hover {
	background:rgb(0,89,131);
	border:1px solid rgb(0,89,131);
	color: rgb(255,255,255);
	text-decoration:none;
	}

#content .listitem-plan h4 {
	font-size:13px;

	}
	
#view-plans-outer{
	width:230px;
	float:left;
	height:130px;
	background-color:#FFFCF5;
	margin: 5px;
}
#view-plans-outer div{
	color:#FF9016;
	font-size:14px;
	font-weight:bold;
	padding:5px;
	background-color:#FFF2D7;
	margin-bottom:10px;
}
#view-plans-outer img{
	margin-bottom:10px;
	}
#plan-title{
	color:#FF9016;
	font-size:14px;
	font-weight:bold;
	width:235px;
	float:left;
	margin: 5px;
}
#plan-navigation{
	border: solid 1px #C9E5F1;
	width:220px;
	float:left;
	padding:5px;
}
#plan-navigation  img{
border:0;
margin:0;
}
.plan-heading{
	color:#FF9016;
	font-size:14px;
	font-weight:bold;
	width:200px;
	float:left;
	margin: 5px;
}


/* Messages / Errors / Warnings */
input.error { border: 2px solid rgb(210,30,30); }

div.error, div.warning, div.message {
	width: 360px;
	margin: 6px auto;
	padding: 2px 20px;
}

.error p, .warning p, .message p { margin: 10px 0px; padding: 2px 10px !important; }

div.error { border: 1px solid rgb(210,30,30); background-color: rgb(250,235,235); }
div.error  p { text-align: center; color: rgb(210,30,30) !important; }

div.warning { border: 1px solid rgb(210,190,61); background-color: rgb(250,246,235); }

div.message { border: 1px solid rgb(163,190,210); background-color: rgb(235,246,250); }



/* Home page stuff */

#feature-text {
	color: rgb(4,93,137);
	background-color: rgb(221,239,249);	
	padding-bottom:5px;
	width:236px;
	float:left;
}

#feature-text ul{
	list-style-image: url(../images/ul.gif);
	color: rgb(100,104,115);
	padding: 0;
	margin: 0;
	margin-left:33px;
	margin-right:10px;
}
#feature-text h2{
	margin:10px 0 0 15px;
	padding:0;
	text-transform:uppercase;
	font-family: "arial narrow", arial, helvetica, sans-serif;
	font-size:22px;
	color: #00537D;
}
#feature-text h4{
	text-transform:uppercase;
	padding: 0;
	margin-left:15px;
	margin-top:13px;
	margin-bottom:5px;
	font-family: "arial narrow", arial, helvetica, sans-serif;
	color: rgb(20,164,227);
}

#feature {
	display: block;
	width: 480px;
	/*height: 289px;*/
    /*background: transparent url(../images/bg-feature.gif) no-repeat top left;*/
	margin-bottom: 10px;
	padding: 5px 5px 5px 5px;
	}
	
#feature img {
	width: 480px;
	height: 175px;
	padding:5px;
	}

#feature h2 {
	margin:10px 0 0 15px;
	padding:0;
	text-transform:uppercase;
	font-family: "arial narrow", arial, helvetica, sans-serif;
	font-size:22px;
	}

#feature p {
	margin: 0;
	padding: 4px 15px;
	color: rgb(81,81,81);
	font-weight:11px;
	line-height:1.5;
	}

#feature p a {
	color: rgb(81,81,81);
	font-weight: bold;
	text-decoration: none;
}

#feature p a:hover {
	text-decoration: underline;
}

body#esh-home #content h3
	{
	margin:0 0 10px 0;
	padding: 0;
	margin-left:15px;
	width: 230px;
	height: 60px;
	overflow: hidden;
	text-indent: -999px;
	background: transparent url(../images/h2-buildingwitheasysteelhomes.gif) no-repeat bottom left;
	}

#plan-select {
	position: relative;
	float: left;
	width: 245px;
	height: 170px;
	background: transparent url(../images/plans-header.gif) no-repeat top left;
    background-color: rgb(255,242,215);
	overflow: hidden;
}

#plan-select ul {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 10px;
	margin-top: 30px;
}

#plan-select li {
	display: inline;
}

#plan-select li a {
	background-color: white;
	display: block;
	width: 107px;
	height: 53px;
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
	overflow: hidden;
	text-indent: -999px;
}

#plan-select li a#plan-onebedroom { background: transparent url(../images/1bedroom-btn.gif) no-repeat top left;}
#plan-select li a#plan-twobedroom { background: transparent url(../images/2bedrooms-btn.gif) no-repeat top left;}
#plan-select li a#plan-threebedroom { background: transparent url(../images/3bedrooms-btn.gif) no-repeat top left;}
#plan-select li a#plan-fourbedroom { background: transparent url(../images/4bedrooms-btn.gif) no-repeat top left;}

#plan-select li a#plan-onebedroom:hover{ background: transparent url(../images/1bedroom-selbtn.gif);}
#plan-select li a#plan-twobedroom:hover{ background: transparent url(../images/2bedrooms-selbtn.gif);}
#plan-select li a#plan-threebedroom:hover{ background: transparent url(../images/3bedrooms-selbtn.gif);}
#plan-select li a#plan-fourbedroom:hover { background: transparent url(../images/4bedrooms-selbtn.gif);}






/* nine reasons page */
#nine-light{
background-color:#FFFFFF; 
padding:10px;
}
#nine-light img{
margin-right:15px;
float:left;
}
#nine-dark{
background-color:#FFF4DE; 
border-left:solid 1px #EEDAB5;
padding:10px;
}
#nine-dark img{
margin-right:15px;
float:left;
}

/* plan select page */
#plan-select-large-outer{
	position: relative;
	float: left;
	padding:0;
	margin:0;
	height: 300px;
	width: 488px;
    background-color: rgb(255,242,215);
	overflow:hidden;
}

#plan-select-large-content{
	position: relative;
	padding-top:40px;
	padding-left:15px;
	padding-right:15px;
	float: left;
	width: 150px;
	height: 225px;
	background: transparent url(../images/easysteelplans-header.jpg) no-repeat top left;
    background-color: rgb(255,242,215);
	overflow: hidden;
}

#plan-select-large {
	position: relative;
	padding-top:40px;
	margin:0;
	float: left;
	width: 296px;
	height:210px;
	background: transparent url(../images/selectaplan-header.jpg) no-repeat top left;
    background-color: rgb(255,233,189);
	overflow: hidden;
}

#plan-select-large ul {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 10px;
	margin-top: 30px;
}

#plan-select-large li {
	display: inline;
}

#plan-select-large li a {
	background-color: white;
	display: block;
	width: 133px;
	height: 70px;
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
	overflow: hidden;
	text-indent: -999px;
}

#plan-select-large li a#plan-onebedroom { background: transparent url(../images/1bedroom-btnlg.gif) no-repeat top left;}
#plan-select-large li a#plan-twobedroom { background: transparent url(../images/2bedrooms-btnlg.gif) no-repeat top left;}
#plan-select-large li a#plan-threebedroom { background: transparent url(../images/3bedrooms-btnlg.gif) no-repeat top left;}
#plan-select-large li a#plan-fourbedroom { background: transparent url(../images/4bedrooms-btnlg.gif) no-repeat top left;}

#plan-select-large li a#plan-onebedroom:hover{ background: transparent url(../images/1bedroom-selbtnlg.gif);}
#plan-select-large li a#plan-twobedroom:hover{ background: transparent url(../images/2bedrooms-selbtnlg.gif);}
#plan-select-large li a#plan-threebedroom:hover{ background: transparent url(../images/3bedrooms-selbtnlg.gif);}
#plan-select-large li a#plan-fourbedroom:hover { background: transparent url(../images/4bedrooms-selbtnlg.gif);}

p#more-plans, p#price-list {
	margin: 5px 0px;
	padding: 0 10px;
	font-size: 11px;
}

#plan-select p#more-plans {
	position: absolute;
	bottom: 0px;
	left: 0px;
}

#plan-select p#price-list {
	position: absolute;
	bottom: 0px;
	right: 6px;
}

p#more-plans a, p#price-list a {
	color: rgb(51,51,51);
	font-weight: bold;
	text-decoration: underline;
}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}


/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash #content h2,
.sIFR-hasFlash #feature h3 {
	visibility: hidden;
}

/* Sidebar */
#sidebar { 
	float: left;
	clear: left;
	width: 170px;
	padding-left: 50px;
	margin-bottom: 40px;
	font-family: Arial, Helvetica, sans-serif;
}

#sidebar h3 {
	margin: 0 0 5px 0;
	font-size:11px;
	color: rgb(0,89,131);
	line-height:1.5;
}

#sidebar p {
	padding: inherit 10px;
}

#sidebar ul, #sidebar ol {
	margin: 0;
	padding: 0 0 0 13px;
	list-style-type: decimal;
}

#sidebar li { margin-bottom: 5px; font-size: 11px; text-align: justify; }

.picsOnRight
{
	float:right;

}

.picsOnRight img
{
	border: 2px solid rgb(255,229,176);
}

#phone {
	position: relative;
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-weight: bold;
	left: 565px;
	top: -125px;
	height: 30px;
	width: 192px;
	background: transparent url(../images/phone.gif) no-repeat;;
	overflow: hidden;
	text-indent: -999px;
}

#imglnk-outdoordirect {
	width: 245px;
	height: 60px;
	baCkground: url(../images/transhomes.jpg) no-repeat;
	overflow: hidden;
	display: block;
	text-indent: -999px;
	margin-bottom: 10px;
}