@import url(reset-min.css);
@import url(fonts-min.css);


/***** GENERAL TAGES & CLASSES *****/
body {
	margin: 0 0 30px;
	text-align: center;
}
.hide {
	display: none;
}


/***** CONTAINER *****/
#container {
	margin: 0 auto;
	text-align: left;
	width: 900px;
}


/***** BOX *****/
#box {

    background:  url(images/home/bg-page.gif) no-repeat scroll center bottom;

	border: solid 1px #8F8F8F;
	display: block;
	margin-bottom: 9px;
    margin-top: 20px;
	min-height: 635px;
	overflow: auto;
	position: relative;
}


/***** HEADER *****/
#header {
	height: 88px;
	position: relative;
	width: 100%;
}
#header p#logo a {
	background: url(images/home/logo.gif) no-repeat;
	height: 57px;
	left: 33px;
	overflow: hidden;
	position: absolute;
	text-decoration: none;
	top: 23px;
	width: 187px;
}
#header p#logo a img {
	visibility: hidden;
}
#header ul li a {
	display: block;
	height: 78px;
	position: absolute;
	text-decoration: none;
	top: 442px;
	width: 127px;
}
#header ul li#homes a {
	left: 360px;
}
#header ul li#trade a {
	left: 522px;
}
#header ul li#selfbuild a {
	left: 684px;
}
#header ul li a span {
	visibility: hidden;
}


/***** MAIN *****/
#main {
	min-height: 362px;
	height: 1%;
	overflow: hidden;
	position: relative;
}
* html #main{
  clear:    both;
}

#content {
	background: url(images/blue/bg-divider.gif) repeat-y;
	color: #fff;
	float: right;
	overflow: hidden;
	padding-left: 31px;
	padding-right: 40px;
	width: 604px;
}

#content h1, #content h2, #content h3, #content p {
	margin-bottom: 1em;
}
#content h1, .content-news h1, .content-casestudy h1 {
	color: #000;
	font-size: 182%;
	margin-bottom: 0.5em;
}
#content h2{
    font-size:  130%;
	margin-top: 1em;
}
#content h3{
	font-size:  120%;
	margin-top: 1em;
}
#content ul{
    margin: 1em;
}
#content ul li{
	margin:   0.5em 0;
	list-style: square;
}
#content a{
	color: #fff;
}
#content b, .content-news b, .content-casestudy b{
  font-weight:  bold;
}

.content-news, .content-casestudy {
	background: url(images/blue/bg-divider.gif) repeat-y;
	color: #fff;
	float: right;
	overflow: hidden;
	padding-left: 31px;
	padding-right: 40px;
	width: 604px;
}

.content-news h2, .content-casestudy h2{
  font-size:    130%;
  margin-top:   1em;
}

.content-casestudy img{
  margin: 0 10px 10px 0;
  float:    left;
}


.news-text{
  margin:   0 180px 2em 0;
}
.news-text ul, .text ul{
  margin:   1em;
}

.news-text ul li, .text ul li{
 	margin:   0.5em 0;
	list-style: square;
}

.news-text a, .text a{
  color:    #fff;
}




#content.ads {

}
#content.ads .column1 {
	float: right;
	width: 396px;
}
#content.ads .column2 {
	float: left;
	width: 182px;
}


#content.images {

}
#content.images .column1 {
	float: right;
	width: 496px;
}
#content.images .column2 {
	float: left;
	width: 82px;
}


#content.gallery {

}
#content.gallery .column1 {
	float: right;
	width: 204px;
}
#content.gallery .column2 {
	float: left;
	width: 363px;
}
#content.gallery .column2 p {
	margin-bottom: 2em;
}
#content.gallery .column2 ul li {
	margin-bottom: 0.5em;
}
#content.gallery .column2 ul li a {
	color: #FFF;
	text-decoration: none;
}
#content.gallery .column2 ul li a:hover {
	text-decoration: underline;
}


#content.contact {

}
#content.contact .column1 {
	float: right;
	width: 180px;
}
#content.contact .column2 {
	float: left;
	width: 400px;
}
#content.contact .column2 p {
	margin-bottom: 2em;
}
#content.contact .column2 ul li {
	margin-bottom: 0.5em;
}
#content.contact .column2 ul li a {
	color: #FFF;
	text-decoration: none;
}
#content.contact .column2 ul li a:hover {
	text-decoration: underline;
}


.form_outer{
  width:    393px;
  display:  block;
  float:    left;
  background:   transparent url(images/contact-form.gif) no-repeat top left;
}

.form_inner{
  width:    393px;
  background: transparent url(images/contact-base.gif) no-repeat bottom left;
padding-top:    20px;
  float:    left;
}


.form_inner form{
  margin:   20px;
}


.form_inner form input.form-text,  .form_inner form textarea{
  width:    100%;
}



#content.linked .column2 dl {
	clear: left;
	display: block;
	overflow: hidden;
	margin-bottom: 1em;
}
#content.linked .column2 dl dt {
	float: left;
	width: 82px;
}
#content.linked .column2 dl dd {
	float: right;
	padding-left: 0;
	width: 496px;
}


/***** FOOTER *****/
#footer {
	bottom: 0;
	height: 190px;
	left: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}
#testimonial {
	bottom: 35px;
	position: absolute;
	right: 35px;
}
#testimonial blockquote {
	background: url(images/txt-blockquote.gif) no-repeat;
	height: 36px;
	overflow: hidden;
	width: 291px;
}
#testimonial blockquote p {
	visibility: hidden;
}
#sections {
	left: 35px;
	height: 109px;
	position: absolute;
	top: 49px;
	width: 300px;
}
#sections ul li a {
	background: url(images/txt-sections.gif) no-repeat;
	height: 17px;
	margin-bottom: 13px;
	display: block;
	text-decoration: none;
	width: 300px;
}
#sections ul li#home a {
	background-position: 0 0;
}
#sections ul li#homes a {
	background-position: 0 -40px;
}
#sections ul li#trade a {
	background-position: 0 -80px;
}
#sections ul li#selfbuild a {
	background-position: 0 -120px;
}
#sections ul li a span {
	visibility: hidden;
}
#sections ul li#home a {
	height: 36px;
	margin-bottom: 30px;
	width: 36px;
}
#objective {
	background: url(images/txt-objective.gif) no-repeat;
	height: 55px;
	left: 35px;
	position: absolute;
	width: 289px;
}
#objective p {
	visibility: hidden;
}
#welcome h2 {
	background: url(images/txt-welcome.gif) no-repeat;
	height: 16px;
	position: absolute;
	right: 39px;
	top: 15px;
	width: 86px;
}
#welcome p {
	background: url(images/txt-datetime.gif) no-repeat;
	height: 13px;
	position: absolute;
	right: 39px;
	top: 39px;
	width: 159px;
}
#welcome h2 span, #welcome p span {
	visibility: hidden;
}


/**** ADDITIONAL *****/
#additional {
	height: 1%;
	overflow: hidden;
    color:  #A5A5A5;
}
#additional ul {
	background: url(images/txt-submenu.gif) no-repeat top left;
	float: left;
	height: 16px;
	margin-left: 25px;
	width: 375px;
	position: relative;
}
#additional ul li {
	height: 16px;
	overflow: hidden;
	position: absolute;
}
#additional ul li#downloads {
	width: 59px;
}
#additional ul li#aboutus {
	left: 63px;
	width: 48px;
}
#additional ul li#news {
	left: 117px;
	width: 32px;
}
#additional ul li#contact {
	left: 154px;
	width: 55px;
}
#additional ul li#terms {
	left: 216px;
	width: 106px;
}
#additional ul li#sitemap {
	left: 330px;
	width: 45px;
}
#additional ul li a {
	display: block;
	text-decoration: none;
}
#additional ul li a span {
	visibility: hidden;
}
#additional p {
	float: right;
	margin-right: 22px;
	width: 460px;
    font-size:  0.8em;
}
#additional a{
  color:    #A5A5A5;
}



a.download {
	background: url(images/ico-download.gif) no-repeat;
	line-height: 16px;
	padding-left: 20px;
}

#leftbar{
	float:  left;
	width:    200px;
}
#navigation {
	margin-bottom: 20px;
}
#navigation {
	padding-left: 10px;
}
#navigation ul, #navigation ul li {
	margin: 0;
	padding: 0;
}

#navigation ul.menu li a {
	text-decoration: none;
    color:  #fff;
    font-size:  1.1em;
    padding-left: 26px;
    margin: 3px 0;
}

#navigation ul.menu ul ul li a {
	text-decoration: none;
    color:  #99DFF1;
  padding-left:  36px;
}

#navigation ul.menu ul ul ul li a {
	text-decoration: none;
    color:  #99DFF1;
  padding-left:  46px;
}
#navigation ul li a.active{
  background:   transparent url(images/blue/bg-menu-arrow.gif) no-repeat top left;
    color:  #000;
}

#navigation ul li a:hover {
    color:  #000;
}

#navigation ul.menu ul ul li a:hover {
    color:  #fff;
}

#navigation ul.menu ul ul li a.active{
    color:  #fff;
}




/***** BLUE *****/
body #box {
	background-color: #64819f;
	background-image: url(images/blue/bg-page.gif);
}
body #header p#logo a {
	background-image: url(images/blue/logo.gif);
}
body #content {
	background-image: url(images/blue/bg-divider.gif);
}


/***** ORANGE *****/
body.orange #box {
	background-color: #F68F1E;
	background-image: url(images/orange/bg-page.gif);
}
body.orange #header p#logo a {
	background-image: url(images/orange/logo.gif);
}
body.orange #content, body.orange .content-news, body.orange .content-casestudy   {
	background-image: url(images/orange/bg-divider.gif);
}
body.orange #testimonial blockquote {
	background-image: url(images/orange/txt-blockquote.gif);
}
body.orange #navigation li#option1 a {
	height: 32px;
}
body.orange .form_outer{
	width: 393px;
	display: block;
	float: left;
	background:   transparent url(images/orange/contact-form-bg.gif) no-repeat top left;
}
body.orange form#contact_form{
	width: 393px;
	background: transparent url(images/orange/contact-form-footer.gif) no-repeat bottom left;
	padding-top: 20px;
	float: left;
}

body.orange #navigation ul.menu ul ul li a,
body.orange #navigation ul.menu ul ul ul li a{
	text-decoration: none;
    color:  #FBD2A5;
}

body.orange #navigation ul li a.active{
  background:   transparent url(images/orange/bg-menu-arrow.gif) no-repeat top left;
}

body.orange #navigation ul li a:hover{
    color:  #000;
}

body.orange #navigation ul.menu ul ul li a:hover,
body.orange #navigation ul.menu ul ul li a.active {
    color:  #fff;
}



/***** YELLOW *****/
body.yellow #box {
	background-color: #EAE827;
	background-image: url(images/yellow/bg-page.gif);
}
body.yellow #header p#logo a {
	background-image: url(images/yellow/logo.gif);
}
body.yellow #content, body.yellow .content-news, body.yellow .content-casestudy   {
	background-image: url(images/yellow/bg-divider.gif);
}
body.yellow #testimonial blockquote {
	background-image: url(images/yellow/txt-blockquote.gif);
}
body.yellow #navigation li#option8 a {
	height: 32px;
}
body.yellow #content h1, body.yellow .content-news h1{
  color: #000;
}
body.yellow #content p, body.yellow #content li, body.yellow #content a{
  color:    #000;
}
body.yellow .form_outer{
  width:    393px;
  display:  block;
  float:    left;
  background:   transparent url(images/yellow/contact-form-bg.gif) no-repeat top left;
}
body.yellow form#contact_form{
  width:    393px;
  background: transparent url(images/yellow/contact-form-footer.gif) no-repeat bottom left;
padding-top:    20px;
  float:    left;
}
body.yellow label{
  color:    #000;
}

body.yellow #navigation ul.menu li a {
	text-decoration: none;
    color:  #000;
}

body.yellow #navigation ul.menu ul ul li a,
body.yellow #navigation ul.menu ul ul ul li a {
	text-decoration: none;
    color:  #5E5D10;
}

body.yellow #navigation ul li a.active{
  background:   transparent url(images/yellow/bg-menu-arrow.gif) no-repeat top left;
}

body.yellow #navigation ul li a:hover{
    color:  #fff;
}

body.yellow #navigation ul.menu ul ul li a:hover{
  color:    #fff;
}

body.yellow #navigation ul.menu ul ul li a.active {
    color:  #000;
}




#navigation ul li{
  padding:  2px 0;
}



/***** TOOLBAR  *****/
#toolbar {
	background-color: #333;
	color: #DDD;
}
#toolbar-gutter {
	padding: 10px;
}
#toolbar a {
	color: #DDD;
}
#toolbar a:hover {
	color: #FFF;
}

img.left-image{
  float:    left;
  margin-right: 15px;
}
img.right-image{
  float:    right;
  margin-left: 15px;
}

p.introduction{
  font-size:    1.2em;
  line-height:  1.6em;
}

.black{
  color:    #000;
}

.white{
  color:    #fff;
}