/*
	stylesheet for PURE Water Company
	by Erland Wiencke - Apt AS

	version 0.8

	last update: 20090508

	document convention and structure:

	colours
	  default body text: #2f444e;

	fonts
		body: Helvetica, Arial, sans-serif

	structure
		=reset
		=typography and colours
		=layout
		=widgets
		=special

	order of declarations
		alphabetical per class/id/item

*/

/*=typography and colours*/
html{
  background-color: white;
  font-size: 62.5%;
}

body{
  color: #2f444e;
  font-family: Arial, Helvetica, sans-serif;
}

body.full-flash{}

div#top-menu, object#top-menu{
}

div#top-menu h1{
  background-image: url(../images/h1-pure-01.png);
  background-position: left top;
  background-repeat: no-repeat;
}

div#campaign{
  background-position: 50% 0;
  background-repeat: no-repeat;
  height: 540px;
  width: 960px;
}

div#content{}

div#content div.case{
  background-position: right top;
  background-repeat: no-repeat;
}

div#content div.case ul{}
div#content div.case ul li{
  list-style-type: disc;
}

div#content span.module{
  background-color: #f5f5f5;
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
}

div#content h2{
  font-size: 5em;
}

div#content h2.small{
  font-size: 3.5em;
}

div#content div.case div.subheading{
  color: #596971;
  font-size: 1.2em;
  text-transform: uppercase;
}

div#content div.case div.ingress, div#content div.column div.ingress{
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.4em;
}

div#content div.case p, div#content div.column p{
  font-size: 1.1em;
  line-height: 1.4em;
}

div#content div.case div.linked{
  font-size: 1.1em;
}

div#content div.case div.linked a{
  color: #2f444e;
  font-size: 1.4em;
  font-weight: bold;
  text-decoration: none;
}

div#content div.case div.linked a img{
  vertical-align: top;
}

div#content div.listing{}

div#content div.column{}
div#content div.column ul{
  font-size: 1.1em;
  margin: 1em 1em 1em 2em;
  line-height: 1.4em;
}
div#content div.column ul li{
  list-style-type: disc;
}
div#content div.column ol{
  font-size: 1.1em;
  margin: 1em 1em 1em 2em;
}
div#content div.column ol li{
  list-style-type: decimal;
}

div#content div.left{}

div#content div.middle{}

div#content div.right{}

div#footer{
  background-image: url(../images/dummy-bg-05.png);
  background-position: left top;
  background-repeat: no-repeat;
}

/*=layout*/
html{}

body{
  margin: 0 auto;
  width: 960px;
}

body.full-flash{}

div#top-menu{
  padding: 36px 69px 0 69px;
}

object#top-menu{
  margin-top: 36px;
}

div#top-menu h1{
  height: 26px;
  margin: 0 auto;
  width: 138px;
}

div#top-menu h1 a{
  display: block;
  height: 100%;
  text-indent: -4000px;
}

/*div#campaign{
			height: 466px;
			width: 960px;
		}*/

div#content{
  margin-bottom: 3em;
  padding: 13px 13px 23px 13px;
  position: relative;
}

div#content div.case{
  float: left;
  min-height: 400px;
  width: 760px;
}

div#content div.case{}
div#content div.case ul{
  font-size: 1.1em;
  margin: 1em 1em 1em 2em;
}
div#content div.case ul li{
  list-style-type: disc;
}
div#content div.case ol{
  font-size: 1.1em;
  margin: 1em 1em 1em 2em;
}
div#content div.case ol li{
  list-style-type: decimal;
}

div#content span.module{
  display: block;
  float: left;
  padding: 5px;
  margin-bottom: 1em;
}

div#content h2{
  clear: both;
  margin-bottom: 20px;
}

div#content h2.narrow{
  clear: both;
  margin-bottom: 20px;
  width: 560px;
}

div#content div.case div.subheading{
  margin-bottom: 2em;
  width: 560px;
}

div#content div.case div.ingress, div#content div.about div.column div.ingress{
  color: #5a5a5a;
  margin-bottom: 1.5em;
  width: 325px;
}

div#content div.case p,
div#content div.case ul,
div#content div.about div.column ul,
div#content div.about div.column p{
  width: 325px;
  margin-bottom: 1em;
  line-height: 1.4em;

}

div#content div.case div.linked{
  margin: 2em 0 2em 0;
}

div#content div.case div.linked a{
  display: block;
  width: 325px;
}

div#content div.case div.linked a img{
  vertical-align: top;
}

div#content div.listing{
  float: right;
  width: 170px;
}

div#content div.about div.column{
  min-height: 400px;
}

div#content div.about div.left{
  float: left;
  width: 325px;
}

div#content div.about div.middle{
  float: left;
  width: 287px;
  text-align: center;
}

div#content div.about div.right{
  float: left;
  margin-top: 35px;
  width: 322px;
}

div#content div.product {
  padding-top: 20px;
}

div#content div.product h2{
  font-size: 3.2em;
}
div#content div.product div.column{}
div#content div.product div.column h3{
  font-size: 1.8em;
  margin-bottom: 0.5em;
}
div#content div.product div.column p{
  font-size: 1.2em;
  margin-bottom: 1em;
}
div#content div.product div.left{
  float: left;
  width: 400px;
}
div#content div.product div.middle{
  float: left;
  width: 134px;
}
div#content div.product div.right{
  float: left;
  width: 400px;
}

body.full-flash div#content{
  padding: 23px 0 23px 90px;
}

div#footer{
  height: 286px;
  position: relative;
}

/*=widgets*/
/*ul.topmenu{
	margin: 0 auto;
	width: 550px;
}

	ul.topmenu li{
		font-size: 1.2em;
		font-weight: bold;
		float: left;
		margin: 3em 1em;
		padding: 0.25em;
	}

		ul.topmenu li ul{
			font-size: 0.92em;
			font-weight: normal;
			line-height: 1.5em;
			margin-top: 0.5em;
			text-transform: uppercase;
		}

			ul.topmenu li ul li{}

				ul.topmenu a{
					color: #2f444e;
					text-decoration: none;
				}

				ul.topmenu li ul li a:hover{
					border-bottom: 1px solid #2f444e;
				}*/

div#navigation{
  margin-top: 2em;
  margin-bottom: 2em;
}
div#navigation ul, div#navigation ul li{
  list-style: none;
  margin: 0;
  padding: 0;
}
div#navigation ul{
  text-align: center;
}
div#navigation ul li{
  display: inline;
  margin-right: .75em;
}
div#navigation ul li a{
  color:#000;
  font-weight:bold;
  text-decoration:none;
  text-transform:uppercase;
}
div#navigation ul li ul{
  display: none;
}

div.contact{}

div.contact div.column{
  min-height: 400px;
}

div.contact div.left{
  float: left;
  width: 425px;
}

div.contact div.right{
  float: right;
  width: 410px;
}


div.showcase{
  float: left;
  width: 520px;
}

div.showcase div.label{
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

div.showcase h3{
  font-size: 2em;
  margin-bottom: 0.25em;
  text-transform: uppercase;
}

div.showcase p{
  font-size: 1.1em;
  line-height: 1.7em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

div.listing{
  margin: 1.5em 0 2em 0;
}

div.listing h3{
  font-size: 1.3em;
  font-weight: bold;
  text-transform: uppercase;
}

div.listing ul{}

div.listing ul li{
  margin-bottom: 1em;
}

div.listing ul li a{
  color: #2f444e;
  text-decoration: none;
  text-transform: uppercase;
}

div.listing ul li.active a{
  font-size: 1.5em;
}

div.callback, #callbackform{
  background-color: #f5f5f5;
  bottom: 0;
  right: 0;
  padding: 15px;
  position: absolute;
  width: 185px;
}

div.callback h4{
  font-size: 2em;
}

div.callback p{
  color: #1b90d6;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.4em;
}

div.callback form{}

div.callback form input{
  display: block;
}

div.downloads{
  font-size: 1.2em;
  height: 200px;
  position: absolute;
  right: 0;
  top: 3em;
  width: 170px;
}

div.downloads h4{
  background-image: url(../images/h4-download-01.png);
  background-position: left top;
  background-repeat: no-repeat;
  height: 33px;
  text-indent: -4000px;
  width: 170px;
}

div.downloads ul{
  margin: 17px 0 0 7px;
}

div.downloads ul li{
  border-bottom: 1px solid #e2e3e7;
  padding: 0 0.5em 0.5em 0;
  margin-bottom: 0.5em;
}

div.downloads ul li a{
  color: #69747a;
  display: block;
  text-decoration: none;
}

div.downloads ul li a:hover{
  text-decoration: underline;
}

/*ul.sitemap{
	margin: 0 auto;
	width: 550px;
}

	ul.sitemap li{
		font-size: 1.2em;
		font-weight: bold;
		float: left;
		margin: 3em 1em;
		padding: 0.25em;
	}

		ul.sitemap li ul{
			font-size: 0.92em;
			font-weight: normal;
			line-height: 1.5em;
			margin-top: 0.5em;
			text-transform: uppercase;
		}

			ul.sitemap li ul li{}

				ul.sitemap a{
					color: #2f444e;
					text-decoration: none;
				}

				ul.sitemap li ul li a:hover{
					border-bottom: 1px solid #2f444e;
				}*/

div#footer div.vcard{
  bottom: 1em;
  font-size: 1.1em;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

div#footer div.vcard span.type{
  display: none;
}

span.bludot{
  color: #1b90d6;
}

a.readmore{
  color: #1b90d6;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

a.readmore:hover{
  border-bottom: 1px solid #1b90d6;
}

div.employees{
  margin-bottom:15em;
}

div.employees h3 {
  margin-top:1em;
  margin-bottom:0.5em;
  font-size:1.6em;
}

div.employees div.vcard{
  /*border-bottom: 1px solid #d9d9d9;*/
  border-bottom:none;
  margin-bottom: 0.5em;
  padding-bottom: 0em;
}

div.employees div.vcard div.fn{
  font-size: 1.5em;
  font-weight: normal;
  margin-bottom: 0.25em;
}

div.employees div.vcard div.fn .firstname {
  font-weight: bold;
}

div.employees div.expanded div.fn{
  float: left;
}

div.employees div.vcard div.title{
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

div.employees div.expanded div.title{
  float: left;
  margin: 5px 0 0 5px;
}

div.employees div.vcard div.tel{
  clear: both;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

div.employees div.vcard div.tel span.type{
  display: none;
}

div.employees div.vcard div.email{
  clear: both;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

div.company{
  clear: both;
  padding-top: 14px;
  margin-bottom: 3em;
}

div.company div.tel{
  margin-bottom: 0.3em;
}

div.company div.phone{
  font-size: 5em;
  font-weight: bold;
}

div.company div.fax{
  font-size: 3.5em;
  font-weight: bold;
}

div.company div.tel div.type{
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

div.company div.fn{
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.2em;
}

div.company div.adr{
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.2em;
}

div.company div.adr div.street-address{}

div.company div.adr span.postal-code{}

div.company div.adr span.city{}

div.company div.adr div.country-name{}

form.contact{
  height: 240px;
  position: relative;
}

form.contact div.leftfields{
  float: left;
  width: 155px;
}

form.contact div.rightfields{
  float: right;
  width: 240px;
}

form.contact div.fullwidth{
  clear: both;
  float: none;
  margin: 1em 0 1em 0;
  text-transform: uppercase;
  width: 100%;
}

form.contact div.flash{
  margin-top: 30px;
  padding: 0.5em;
  text-align: center;
}

form.contact div.info{
  background-color: #a5ff76;
  border: 1px solid #e8eaec;
}
form.contact div.error{
  background-color: pink;
  border: 1px solid #ff1313;
}

form.contact label{
  display: block;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

form.contact input.text{
  background-color: #e8eaec;
  border: 1px solid #e8eaec;
  display: block;
  margin-bottom: 0.5em;
  padding: 2px;
  width: 149px;
}

form.contact input.required{
  border: 1px solid #1b90d6;
}

form.contact input.error{
  background-color: pink;
  border: 1px solid #ff1313;
}

form.contact textarea.text{
  background-color: #e8eaec;
  border: none;
  display: block;
  height: 149px;
  padding: 2px;
  width: 236px;
}

form.contact input.submit{
  bottom: 0;
  position: absolute;
  right: 0;
}

div.water{
  background-position: left bottom;
  background-repeat: no-repeat;
  padding-bottom: 34em;
  position: relative;
	width: 100%;
	overflow: hidden;
}
div.water h2{
  font-weight: normal;
  padding-right: 444px;
}
div.water p.ingress{
  color: #5a5a5a;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.4em;
  padding-right: 444px;
  margin-bottom: 2em;
}
div.water div.column{
  float: left;
  padding-right: 50px;
  width: 324px;
}

.water .column.right {
  width: 185px;
  padding-right:0;
}

div.water div.column p{
  margin-bottom: 1em;
}

div.water div.article-navigation{
  width: 207px;
  position: absolute;
  right: 0;
  top: 0;
}
div.water div.article-navigation a{
  background-image: none;
  background-position: left 7px;
  background-repeat: no-repeat;
  color: #2f444e;
  display: block;
  font-size: 1.4em;
  line-height: 16px;
  padding: 4px 0 0 24px;
  text-decoration: none;
  text-transform: uppercase;
}

div.water div.article-navigation .arrow{
  display: none;
}

div.water div.article-navigation.has_js .arrow{
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 16px;
  background-image: url(../images/raquo-blue-01.gif);
}

div.water div.article-navigation a.active{
  background-image: url(../images/raquo-blue-01.gif);
}

div.water div.article-navigation.has_js a.active{
  background-image: none;
}

div.water div.article-navigation a span{
  border-top: 1px solid #cdd2d5;
  display: block;
  margin-left: -4px;
  padding-top: 2px;
}

div.water div.article-navigation a span span{
  border: 0;
  display: inline;
  margin-left: 0;
  padding-top: 0;
}

div.water div.article-navigation a:first-child span{
  border-top: none;
}

div.flash{
  padding: 0.125em;
  text-align: center;
}

div.info{
  background-color: #a5ff76;
  border: 1px solid #e8eaec;
}
div.error{
  background-color: pink;
  border: 1px solid #ff1313;
}

a.download{
  background-image: url(../images/icon-pdf-01.gif);
  background-position: left top;
  background-repeat: no-repeat;
  color: #2f444e;
  display: block;
  font-size: 1.4em;
  font-weight: bold;
  height: 33px;
  line-height: 32px;
  margin-bottom: 1em;
  padding-left: 45px;
  text-decoration: none;
}
a.download:hover{
  text-decoration: underline;
}

div#product-flash{
  background-color: white;
  background-position: left top;
  background-repeat: no-repeat;
  height: 550px;
  width: 934px;
}

div.image-carousel{
  position: relative;
}
div.image-carousel div.image{
  z-index: 1;
}
div.image-carousel span.frame{
  background-image: url(../images/white-frame-325x214.png);
  background-position: left top;
  background-repeat: no-repeat;
  display: block;
  height: 214px;
  left: 0;
  position: absolute;
  top: 0;
  width: 325px;
  z-index: 90;
}


/* News dialog */

#flashwrapper {
  z-index: 1;
}

.news.dialog {
  z-index: 2;
  display: none;
}	
.news.dialog .content {
  position: fixed;
  top: 100px;
  left: 50%;
  width: 400px;
  margin-left: -250px;
  background: #fff;
  padding: 30px;
  padding-right: 70px;
}
.news.dialog .content h2 {
  font-size: 2em;
  line-height: 1.3em;
  margin-bottom: 1em;
}

.news.dialog .content p {
  font-size: 1.3em;
  line-height: 1.4em;
  margin-bottom: 1em;
}

.news.dialog .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ddd;
  opacity: .8;
  filter: alpha(opacity=80);
}

.fb-like{
	left: 50%;
	margin: 0 0 40px -40px; 
}


/*=special*/
.clearfix:after {
  clear:both;
  content:".";
  display:block;
  height:0pt;
  visibility:hidden;
}

/* Skjul for IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* Slutt skjul for IE-mac */