/*
	stylesheet for www.ecohz.no
	by Erland Wiencke - Apt AS
	
	version 0.1
	
	last update: 20090609
	
	document convention and structure:
	
	colours
		page background: #fff + image
		default text: #737373
	
	fonts
		body: Arial, Helvetica, sans-serif

	structure
		=reset (see reset.css)
		=typography and colours
		=layout
		=widgets
		=special
	
	order of declarations
		alphabetical per class/id/item
*/

/*=typography and colours*/
html{
	background-color: #ededed;
	background-image: url(../images/bg-html.gif);
	background-position: left top;
	background-repeat: repeat-x;
	}
html.frontpage{
	background-image: url(../images/bg-html-frontpage.gif);
	}
html.blue{
	background-image: url(../images/bg-html-blue.gif);
	}
html.green{
	background-position: left -80px;
	}
	body{
		color: #555;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 62.5%;
		}
		div#header{
			position: relative;
			}
			div#header h1{
				/*background-image: url(../images/h1-anim-logo-02.gif);*/
				background-image: url(../images/static-logo.gif);
				background-position: left top;
				background-repeat: no-repeat;
				height: 27px;
				left: 0;
				position: absolute;
				top: 19px;
				width: 268px;
				}
				div#header h1 a{
					display: block;
					height: 100%;
					text-indent: -4000px;
					}
		div#flash-container {
		    height:584px; /* WB */
			padding-bottom:0;
			}
		div#flash-content{}
		div#content{			
			background-image: url(../images/bg-content.jpg);
			background-position: center bottom;
			background-repeat: no-repeat;
			}
		div#footer{		
			background-image: url(../images/bg-footer.jpg);
			background-position: center top;
			background-repeat: no-repeat;
			font-size: 0.9em;
			text-transform:uppercase;
			}
a{
	color: #556a6d;
	}
a:hover{
	color: #008aa0;
	}
/*=layout*/
html{}
	body{
		margin: 0 auto;
		position: relative;
		width: 950px;
		}
		div#header{
			height: 141px;
			}
		div#header.short{
			height: 113px;
			}
		html.frontpage body div#content{
			/* WB
			width:100%;
			background-image:none;
			background-color:transparent;
			overflow:hidden;
            */
			display:none;
			}
				
		html.frontpage body div#header {
			/* height: 66px; WB */	    
			height: 67px;
			}
			
		div#flash-content{
			height: 450px;
			}
		div#content{
			padding: 3em 0 0 0;
			}
		div#content.plant{
			padding: 0;
			}
			div#content.plant>img.large{
				margin-bottom: 2em;
				}
		div#footer{
			padding: 2.5em 0 3em 0;
			height:1.5em;
			text-align: center;
			}
		
/*=widgets*/
div.article{}
	div.article h2{
		color: #4f838a;
		font-size: 5.6em;
		font-weight: normal;
		margin-bottom: 0.25em;
		text-transform: uppercase;
		}
	div.article h3{
		border-bottom: 1px solid #d3d3d3;
		color: #4f838a;
		font-size: 3em;
		font-weight: normal;
		margin-bottom: 0.25em;
		padding: 0.3275em 0 0.125em 0;
		text-transform: uppercase;
		}
	div.article h4{
		color: #4f838a;
		font-size: 2.5em;
		font-weight: normal;
		text-transform: uppercase;
		}
	div.article p{
		font-size: 1.15em;
		line-height: 1.45em;
		margin-bottom: 1.45em;
		}
	div.body ul{
		font-size: 1.15em;
		line-height: 1.45em;
		margin-bottom: 1.45em;
		}
	div.body ul li{
		background-image: url(/images/li-bg-blue.png);
		background-position: left 0.5em;
		background-repeat: no-repeat;
		padding-left: 1em;
		}
    div.body ul li ul{
        margin-bottom:0;
    }
	div.body h5{
		color: #4f838a;
		font-size: 1.4em;
		font-weight: normal;
		text-transform: uppercase;
		}
div.section{}
	div.section h2{
		color: #4f838a;
		font-size: 5.6em;
		font-weight: normal;
		margin-bottom: 0.25em;
		text-transform: uppercase;
		}
	div.section h3.logo{
		background-position: left top;
		background-repeat: no-repeat;
		height: 30px;
		margin-bottom: 1em;
		text-indent: -4000px;
		width: 202px;
		}
	div.section h3.cp{
		background-image: url(../images/logo-clean-power.png);
		}
	div.section h3.cf{
		background-image: url(../images/logo-carbon-footprint.png);
		}
	div.section h4{
		color: #4f838a;
		font-size: 2.5em;
		font-weight: normal;
		text-transform: uppercase;
		}
	div.section p{
		font-size: 1.15em;
		line-height: 1.45em;
		margin-bottom: 1.45em;
		}
		div.section p a.readmore{
			border-top: 1px solid #d3d3d3;
			display: block;
			padding-top: 0.5em;
			text-decoration: none;
			text-transform: uppercase;
			width: 50%;
			}
div.two-columns{
	overflow: hidden;
	}
	div.two-columns div.column{
		float: left;
		margin-bottom: 2em;
		width: 460px;
		}
	div.two-columns div.column:first-child{
		margin-right: 30px;
		}
	
	div.two-columns div.column h3.map-desc {
		padding:1em 0 0 1em;
		font-size:1.6em;
		color:#4f838a;
		}
	
div.newslist{
	margin: 0 0 2.4em 0;
	}
	div.newslist h4{
		color: #4f838a;
		font-size: 2.5em;
		font-weight: normal;
		text-transform: uppercase;
		}
	div.newslist ul{
		margin-bottom: 1em;
		}
		div.newslist ul li{
			border-bottom: 1px solid #d3d3d3;
			}
			div.newslist ul li a{
				background-image: url(../images/newslist-a-raquo.gif);
				background-position: 99% center;
				background-repeat: no-repeat;
				color: #556a6d;
				display: block;
				font-size: 1.15em;
				padding: 0.9em 0 0.9em 0.25em;
				text-decoration: none;
				}
			div.newslist ul li a:hover, div.newslist ul li a.active{
				background-image: url(../images/newslist-a-raquo-active.gif);
				color: #008aa0;			
				}
	div.newslist>a{
		color: #556a6d;
		font-size: 1.15em;
		padding-left: 0.25em;
		text-decoration: none;
		text-transform: uppercase;
		}
	div.newslist>a:hover{
		color: #008aa0;	
		}
	
div.contact-blurb{
	float: left;
	padding: 4.5em 0 1em 0;
	}
	div.contact-blurb div.label{
		color: #4f838a;
		font-size: 1.4em;
		text-transform: uppercase;
		}
	div.contact-blurb div.phone{
		border-bottom: 1px solid #d3d3d3;
		color: #4f838a;
		font-size: 1.6em;
		font-weight: bold;
		padding-bottom: 0.125em;
		text-transform: uppercase;
		}
	div.contact-blurb div.email{
		color: #4f838a;
		font-size: 1.4em;
		padding-top: 0.25em;
		text-transform: lowercase;
		}

div.vcard{}
	div.vcard span.org, div.vcard span.type{
		display: none;
		}

div.partner-login{
	background-image: url(../images/icon-arrow-down.png);
	background-position: 99% bottom;
	background-repeat: no-repeat;
	border-top: 3px solid #d3d3d3;
	padding: 1em 3px 0 3px;
	position: absolute;
	right: 0;
	text-align: left;
	top: 32px;
	width: 140px;
	}
	div.partner-login a{
		color: #556a6d;
		display: block;
		height: 100%;
		text-decoration: none;
		text-transform: uppercase;
		}
	div.partner-login a:hover{
		color: #008aa0;		
		}
	
div.menus{
	height: 60px;
	left: 0;
	position: absolute;
	text-align: left;
	top: 81px;
	width:950px; 
	}

html.frontpage div.menus{
	top: 38px;
	height:27px;
	}
	
	html.frontpage div.menus div.main-menu 		  
	{
	         
		}
		
		html.frontpage div.menus div.main-menu ul li {
			margin:0;
			padding:0 0.7em 0 0.8em;
			border-left:1px solid #a6a6a6;
			}
			
			html.frontpage div.menus div.main-menu ul li a {
				line-height:1.4em;
				}
			
		html.frontpage div.menus div.main-menu ul li:first-child {
			border-left:none;
			padding-left:0;
			}

	div.menus *{
		color: #556a6d;		
		text-decoration: none;
		text-transform: uppercase;
		}
	
	div.menus a {
		font-size:11px;
		}
	
	div.menus div.section-menu{
		height: 32px;
		}
		div.menus div.section-menu ul{}
			div.menus div.section-menu li{
				border-left: 1px solid #556a6d;
				float: left;
				margin: 1.7em 0.5em 0 0;
				padding-left: 0.5em;
				}
				div.menus div.section-menu ul li a:hover{
					color: #008aa0;	
					}
			div.menus div.section-menu li:first-child{
				border: none;
				font-size: 3em;
				margin: 0 0.25em 0 0;
				padding: 0;
				}
	div.menus div.main-menu{
		padding-top: 1.5em;
		}
		div.menus div.main-menu ul{}
			div.menus div.main-menu ul li{
				float: left;
				margin-right: 24px;
				}
				div.menus div.main-menu ul li a:hover{
					color: #008aa0;	
					}

div.quicklinks{
	background-color: #008aa0;
	right: 0;
	position: absolute;
	top: 113px;
	}
html.frontpage div.quicklinks{
	top: 0;
	height:66px;
	overflow:hidden;
	}
	
	html.frontpage div.quicklinks a{
		padding-top:43px;
		height:23px;
		background-position:7px 39px;
		}
		
	html.frontpage div.contact-blurb {
		padding-top:0;
		}


	div.quicklinks a{
		background-image: url(../images/icon-powerplant.png);
		background-position: 1em center;
		background-repeat: no-repeat;
		color: #9dd8e4;
		display: block;
		float: left;
		padding: 1em 1em 1em 4em;
		text-decoration: none;
		text-transform: uppercase;
		}
	div.quicklinks a:last-child{
		background-image: url(../images/icon-powerswitch.png);
		background-color: #c4dd99;
		color: #484848;
		}
	div.quicklinks a.last-child{
		background-image: url(../images/icon-powerswitch.png);
		background-color: #c4dd99;
		color: #484848;
		}
	
html.green body {
	width:100%;
	}
	
	html.green body div#header,
	html.green body div#content,
	html.green div.menus {
		margin: 0 auto;
		width: 950px;
		}
	
	html.green body div#content {
		}
		
	html.green div.menus {
		left:50%;
		margin-left:-475px;
		}
		
	html.green div.quicklinks {
		right:50%;
		margin-right:-475px;
		}

ul.clientlist{}
	ul.clientlist>li{
		float: left;
		height: 140px;
		margin-right: 35px;
		margin-bottom: 20px;
		overflow: hidden;
		width: 440px;
		}
		ul.clientlist>li>h3{
			border-bottom:1px solid #D3D3D3;
			font-size: 3em;
			font-weight: normal;
			margin-bottom: 0.125em;
			text-transform: uppercase;
			}
			
		div.section ul.clientlist li h4 {
			font-size:1.1em;
			color:#555;
			}

form.default{}
	form.default strong.error{
		color:red;
		}
	

	form.default div.form-row{
		margin-bottom: 1em;
		}
		form.default div.form-row label{
			display: block;
			margin-bottom:0.2em;
			text-transform: uppercase;
			}
		form.default div.form-row input.textfield{
			border: none;
			width: 200px;
			}
		form.default div.form-row textarea{
			border: none;
			width: 260px;
			}
		form.default div.form-row input.submit{
			background-color: white;
			border: none;
			color: #737373;
			cursor: pointer;
			font-size: 1.15em;
			padding: 0.25em 1em 0.25em 1em;
			text-transform: uppercase;
			}
		form.default div.form-row ul.error_list{
			background-color: red;
			padding: 10px;
			width: 240px;
			}
			form.default div.form-row ul.error_list li{
				color: white;
				display: block;
				font-size: 1.15em;
				text-transform: uppercase;
				text-align: center;
				}
		form.default div.form-row div.info{
			background-color: #c4dd99;
			padding: 10px;
			width: 240px;
			color: #484848;
			display: block;
			font-size: 1.15em;
			text-transform: uppercase;
			text-align: center;
			}
			
		form.default div.form-row ul.radio_list{
			margin-top:0.4em;
			width:100%;
			overflow:hidden;
			}
			
			form.default div.form-row ul.radio_list li{
				display:inline;
				padding-right:1em;
				line-height:3em;
				}
				
				form.default div.form-row ul.radio_list li label,
				form.default div.form-row ul.radio_list li input{
					display:inline;
					}
		
div.employeelist{
	width:950px;
	overflow:hidden;
	}
	div.employeelist ul {
		width:985px;
		}

	div.employeelist li{
		float: left;
		margin-right: 35px;
		margin-bottom: 4em;
		overflow: hidden;
		width: 293px;
		height:16em;
		}
		div.employeelist li img{
			background-color: #d3d3d3;
			float: left;
			height: 68px;
			margin-right: 5px;
			width: 55px;
			}
		div.employeelist li div{
			float: left;
			width: 230px;
			}
		div.employeelist li h3{
			border-bottom:1px solid #D3D3D3;
			height:2.2em;
			font-size: 3em;
			font-weight: normal;
			margin-bottom: 0.125em;
			text-transform: uppercase;
			}
		div.employeelist li table{
			width: 100%;
			}
		
		div.employeelist li table tr td {
			line-height:1.2em;
			}
		
		div.employeelist li table tr{}
			div.employeelist>li>table tr td{
				padding: 0.125em;
				}
			div.employeelist li table tr td.label{
				font-weight: bold;
				width: 25%;
				}
			div.employeelist li table tr td.value{}
			
div.documentlinks{
	border-top:1px solid #d3d3d3;
	padding: 0.5em;
	}
	div.documentlinks>h5{
		font-size: 1.15em;
		font-weight: normal;
		text-transform: uppercase;
		}
	div.documentlinks>ul{}
		div.documentlinks>ul>li{
			float: left;
			/*height: 30px;*/
			height:16px;
			/*margin: 1em;*/
			margin:1em 0.5em;
			/*width: 23px;*/
			width:16px;
			}
			div.documentlinks>ul>li>a{
				display: block;
				height: 100%;
				text-indent: -4000px;
				width: 100%;
				}
			
img.article-illustration{
	margin-bottom: 3em;
	}

a.backlink{
	background-image: url(../images/back-laquo-large.gif);
	background-position: left 50%;
	background-repeat: no-repeat;
	display: block;
	font-size: 1.15em;
	height: 17px;
	line-height: 17px;
	padding-left: 1em;
	position: absolute;
	text-decoration: none;
	text-transform: uppercase;
	top: 40px;
	right: 0;
	width: 50px;
	}
	
	
/* === WB New styles === */

/*-- How it works -- */
html.frontpage div.quicklinks a.how {
    background:#fff url(../images/how-it-works.gif) no-repeat top left;
    height:66px;
    padding:0;
    text-indent:-100000px;
    width:105px;
}

div.quicklinks a.how {
    background:#fff url(../images/how-it-works-small.gif) no-repeat top left;
    height:27px;
    padding:0;
    text-indent:-100000px;
    width:59px;
}

/* -- Lang selector -- */
div.menus div.main-menu ul { 
    float:left;
    margin-right:25px;
}

div.menus div.main-menu > a  {
    float:left; 
    line-height:1.4em;
    padding:0 0 0 22px;
}

div.menus div.main-menu > a[href='http://www.ecohz.com'] {
    background:url(../images/eng-flag.gif) no-repeat left center;
}

div.menus div.main-menu > a[href='http://www.ecohz.no'] {
    background:url(../images/no-flag.gif) no-repeat left center;
}

/* -- Quick news -- */
div.quickNews {
    color:#a8a8a8;
    font-size:11px;
}

div.quickNews h3 {
    background:url(../images/quick-news.gif) no-repeat top left;
    color:#ba1251;
    font-size:16px;
    margin:0 0 5px 0;
    padding:10px 0 0 40px;
}

div.quickNews p {
    color:#a8a8a8;
    font-size:11px; 
}

/* -- Related Links -- */
.relatedlinks { margin:0 0 35px 0; }


/* -- Video -- */
#video { margin:0 0 35px 0; }
#video a.player { background:#000; display:block; height:310px; position:relative; width:460px; }
#video a.player img.playBtn { left:50%; margin-left:-41px; /*83/2 = 41.5 */ margin-top:-41px; /*83/2 = 41.5 */ position:absolute; top:50%; z-index:2; }
#video a.player img.videoPreview { z-index:1; }

/* -- Map -- */
img.map { margin:0 0 35px 0; }

/*-- File icon downloads -- */
div.documentlinks > ul > li { float:none; height:auto; width:auto; }
div.documentlinks > ul > li > a { background-image:url(../images/file-icons/page_white.png); background-repeat:no-repeat; line-height:19px; padding:0 0 0 20px; text-indent:0; }

div.documentlinks > ul > li > a.pdf { background-image:url(../images/file-icons/page_white_acrobat.png); }
div.documentlinks > ul > li > a.doc, div.documentlinks > ul > li > a.docx { background-image:url(../images/file-icons/page_white_word.png); }
div.documentlinks > ul > li > a.ppt, div.documentlinks > ul > li > a.pptx { background-image:url(../images/file-icons/page_white_powerpoint.png); }
div.documentlinks > ul > li > a.xls { background-image:url(../images/file-icons/page_white_excel.png); }

/* --  Form -- */
.form { background-color:#b5dae0; border:6px solid #fafafa; width:100%; }
.form .formInner { padding:10px 45px 25px 45px; }
.form h6 { background:url(../images/login-icon.png) no-repeat top left; color:#5d7174; display:inline-block; font-family:Arial; font-size:11px; font-weight:bold; height:45px; line-height:45px; margin:0 0 0 -45px; padding:0 0 0 45px;}
.form label.formLabel { color:#5d7174; display:block; font-weight:bold; margin:0 0 3px 0; }
.form .txtL { background-color:#fff; border:none; color:#556c7c; font-size:12px; margin:0 0 15px 0; padding:10px; width:330px; }
.form .linklist { margin:10px 0; }
.form .buttonArea { width:350px; }
.form .button { float:right; }

.button 
{ 
    background: #078da3;
    background: -moz-linear-gradient(top, #53b0bf, #078da3);
    background: -o-linear-gradient(top, #53b0bf, #078da3);
    background: -webkit-gradient(linear, left top, left bottom, from(#53b0bf),to(#078da3));
    background: linear-gradient(top, #53b0bf, #078da3);
    
    border:1px solid #2297aa;  
    -moz-border-radius:4px;  
    -o-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    
    -moz-box-shadow:rgba(0,0,0,0.25) 0 1px 1px;
    -o-box-shadow:rgba(0,0,0,0.25) 0 1px 1px;
    -webkit-box-shadow:rgba(0,0,0,0.25) 0 1px 1px;
    box-shadow:rgba(0,0,0,0.25) 0 1px 1px;
    
    color:#fff;
    font-family:Arial, Sans-Serif;
    font-size:12px;
    font-weight:bold;
    line-height:140%;
    margin:0;
    padding:3px 15px;
    text-decoration:none;
    text-transform:uppercase;
}

.button:hover,
.button:focus,
.button:active  {
    border-color:#078da3;
    -moz-box-shadow:#fff 0 0 5px;
    -o-box-shadow:#fff 0 0 5px;
    -webkit-box-shadow:#fff 0 0 5px;
    box-shadow:#fff 0 0 5px;
}

.print { background: url('/Images/Print.gif') no-repeat left; padding-left: 20px; display: block; float:left; height: 20px; line-height: 20px; text-decoration: none; }


 #logonStatus { float:right; font-size:11px; color:#999; }
 
 /*  Media Archive  */
 
.breadcrumbs { list-style: none; margin: 0 5px 20px 5px; }
.breadcrumbs li { float: left; font-size: 11px; }
.breadcrumbs a { text-decoration: none; text-transform: uppercase; }
    
.clear { clear: both; }

.explorer { list-style-type: none;  width: 100%; }

.explorer li {
 display: block;
 width: 100px;
 height: 145px;
 position: relative;
 overflow: hidden;
 padding: 10px 5px 0 5px;
 background: #fff;
 border: 1px solid #ccc;
 margin: 5px;
 float: left;
}

.explorer li img {
 border: none;
 width: 100px;
 max-width: 100px; 
 max-height: 100px;
 height: 100px;
 display: block;
 overflow: hidden;
}

.explorer li span {
 word-wrap: break-word;
 position: absolute;
 top: 115px;
 left: 5px;
 display: block;
 width: 90px;
 height: 20px;
 font-size: 11px;
 text-align: center;
}

.explorer li a { display: block; }

#fileDetails { margin: 10px 0 20px 0; font-size: 12px; }

#fileDetails td
{
    padding: 3px 10px 3px 0; 
}

#preview 
{
    background: #fff;
    padding: 20px;
    border: 1px solid #ccc;
}