/*	Title:			Master styles for screen media (computers, cellphones, tablets)
	Author:			Kristian Hjelle for Triangle Theory	
	Contact:		hello@triangletheory.no
	Updated:		08/05/2011  													*/
	
/* ----------------------------- */
/* RESET STYLES (BASED ON YUI 2) */
/* ----------------------------- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var { font: 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; }
a:focus, a:active { outline: none; }

/* ----------------------------- */
/* MASTER STYLES */
/* ----------------------------- */

body { 
	font-family: sans-serif;
	color: #555;
	text-rendering: optimizeLegibility;
	text-align: center;
	zoom: 1; }
	
html, body {
	height: 100%;
	margin: 0 0 1px;
	padding: 0; }

.container { text-align: left; }


/* ----------------------------- */
/* CLASSES */
/* ----------------------------- */

.float-left { float: left;  }
.float-right { float: right;  }
.float-none { float: none;  }

.clear-both { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }

/* ----------------------------- */
/* TYPOGRAPHY */
/* ----------------------------- */
	
	/* -------- */
	/* Headings */
	/* -------- */
	
	h1, h2, h3, h4, h5 { font-family: "gesta-1", "gesta-2", sans-serif; color: #fff; font-weight: bold; }
	
	h1 { font-size: 20px; }
	h2 { font-size: 16px; }
	h3 { font-size: 18px; }
	h4 { font-size: 17px; }
	h5 { font-size: 14px; }
	
	/* ---------- */
	/* Paragraphs */
	/* ---------- */
	
	p { font-size: 14px; color: #777; line-height: 19px; }
		
	/* ----- */
	/* Links */
	/* ----- */
	
	a { text-decoration: none; color: @blue; }
	a:hover { color: #333; color: lighten(@blue, 15%); }
	a:active { position: relative; top: 1px; }
	
/* ----------------------------- */
/* LAYOUT & DESIGN */
/* ----------------------------- */
	
	/* ------- */
	/* Classes */
	/* ------- */

		/* Colors */
		@blue: #0d516f;
		@beige: #e1dabc;
		@brown: #605e4e;
		@green: #9eb12f;
		@gray: #e8ecf0;
		@grayblue: #f6f9fa;
		@white: #fff;
	
		/* Grid and layout */
		.container {
			width: 980px; 
			text-align: left;
			margin: 0 auto; }
						
		.mini-container { width: 276px; padding: 25px; }
		.grid-one { width: 328px; }
		.grid-two { width: 652px; }
		
		#header, #content-top, #content-bottom, #footer, #kontakt { width: 100%; display: block; }
		
		/* UI elements */
		.shine { padding: 17px; padding-left: 25px; padding-bottom: 16px; .innershadow(0, 0, 15px, rgba(0, 0, 0, 0.1)); }
		.shine-blue { background: darken(@blue, 5%) url('../images/gloss.png'); text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); }
		.shine-beige {  background: darken(@beige, 5%) url('../images/gloss-strong.png'); text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); color: @brown }
		
		/* CSS3 */
		.rounded (@radius: 3px) { 
			border-radius: @radius; 
			-webkit-border-radius: @radius; 
			-moz-border-radius: @radius; }
			
		.rounded-topleft (@radius: 3px) { border-top-left-radius: @radius; -webkit-border-top-left-radius: @radius; -moz-border-radius-topleft: @radius; }
		.rounded-topright (@radius: 3px) { border-top-right-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topright: @radius; }
		
		.dropshadow (@y: 0px, @x: 0px, @size: 10px, @color: rgba(0, 0, 0, 0.5)) { 
			 box-shadow: @y @x @size @color;
			 -webkit-box-shadow: @y @x @size @color;
			 -moz-box-shadow: @y @x @size @color; }
		
		.innershadow (@y: 0px, @x: 0px, @size: 10px, @color: rgba(0, 0, 0, 0.5)) { 
			 box-shadow: inset @y @x @size @color;
			 -webkit-box-shadow: inset @y @x @size @color;
			 -moz-box-shadow: inset @y @x @size @color; }
			 
		.gradient (@top-color: rgba(0, 0, 0, 0), @bottom-color: rgba(255, 255, 255, 0.3)) {
			background: -moz-linear-gradient(@top-color, @bottom-color);
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@top-color), to(@bottom-color));
			background: -webkit-linear-gradient(@top-color, @bottom-color);
			background: -o-linear-gradient(@top-color, @bottom-color); 
			background: @top-color; }
		
	/* ------ */
	/* Header */
	/* ------ */
	
	#header {
		background: @blue url('../images/top.png') center;
		border-bottom: 1px darken(@blue, 10%) solid;
		border-top: 1px solid lighten(@blue, 5%);
		.innershadow(0, 0, 30px, rgba(0, 0, 0, 0.1)); }
		
	#header .container { position: relative; display: block; }
	
	#header a.kontakt { position: absolute; color: lighten(@green, 15%); background: darken(@blue, 12%); font-weight: bold; font-size: 14px; top: 0; right: 0; border: 1px solid lighten(@blue, 5%); font-size: 12px; margin-bottom: 10px; padding: 5px; font-family: "gesta-1", "gesta-2", sans-serif; text-transform: uppercase; padding-left: 7px; padding-right: 7px; margin-top: -1px; border-top: 0; }
	#header a.kontakt:hover { .gradient(darken(@blue, 22%), darken(@blue, 12%)); color: lighten(@green, 30%); }
	
	#header #logo { width: 280px; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); margin-bottom: 15px; margin-top: 30px; cursor: pointer; }
	#header #logo h1 { text-transform: uppercase; padding-top: 10px; }
	#header #logo p { color: darken(@white, 25%); font-family: "gesta-1", "gesta-2", sans-serif; text-transform: lowercase; font-size: 14px;  }
		
	#navigation { text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.35); position: absolute; bottom: 0; right: 0; }
	
	#navigation li { 
		float: left; 
		padding: 10px 25px 15px 25px; 
		/* border-right: 1px darken(@blue, 3%) solid; */
		border-left: 1px lighten(@blue, 5%) solid;
		cursor: pointer; }
		
	#navigation li:last-child { border-right: 1px lighten(@blue, 5%) solid; }
	
	/* #navigation li:last-child { border-right: 0; }
	#navigation li:first-child { border-left: 0; } */
	
	#navigation li:hover { background: url('../images/grad-white.png') repeat-x bottom; }
	
	/* Active element */
	.page-template-page-avdelinger-php #navigation li.avdelinger, .parent-pageid-7 #navigation li.tjenester, .page-id-7 #navigation li.tjenester, .page-id-32 #navigation li.omoss, .parent-pageid-80 #navigation li.kontakt  { background: url('../images/grad-black.png') repeat-x bottom; }
	page-template-page-avdelinger-php #navigation li.avdelinger:hover, .parent-pageid-7 #navigation li.tjenester:hover, .page-id-7 #navigation li.tjenester:hover, .page-id-32 #navigation li.omoss:hover, .parent-pageid-80 #navigation li.kontakt:hover { background: url('../images/grad-blacker.png') repeat-x bottom; }
	
	
	#navigation li h4 a { color: darken(@white, 20%); display: block; }
	#navigation li h4 a { color: @white; }
	#navigation li p { color: @green; text-transform: lowercase; font-size: 12px; font-weight: bold; }
		
	/* ------- */
	/* Content */
	/* ------- */
	
	/* Top */
	#content-top { background: @grayblue; .innershadow(0, 0, 20px, rgba(0, 0, 0, 0.15)); border-bottom: 1px solid #fff; }
	#content-media { padding-top: 30px; padding-bottom: 55px; height: 320px; width: 980px; }
	#content-media.forsiden { }
	#content-media.forsiden img { margin-top: 31px; position: absolute; top: 30px; height: 320px; width: 980px; }
	
	/* Bottom */
	#content-bottom { background: @white url('../images/noise.png'); }
	#content-bottom .container { border-bottom: 1px solid @gray; background: url('../images/content-left-nav.png') repeat-y; position: relative;  }
	#content-bottom .container a { font-weight: bold; }	
		
		/* Left */
		#content-left { .grid-one; .float-left; margin-top: -55px; }
		#content-left h3 { .shine; .shine-blue; .rounded-topleft(3px); height: 21px; }
		
		#content-left ul { text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); font-weight: bold; font-size: 14px; }
		#content-left li { background: @blue; border-bottom: 1px solid darken(@blue, 5%); border-top: 1px solid lighten(@blue, 5%); text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7); }
		#content-left li em { font-weight: normal; }
		#content-left li:hover { background: lighten(@blue, 5%); .innershadow(0, 0, 15px, rgba(0, 0, 0, 0.1); border-top: 1px solid lighten(@blue, 10%); }
		#content-left li:active { background: lighten(@blue, 5%); .innershadow(0, 3px, 10px, rgba(0, 0, 0, 0.2); }
		#content-left li a { padding: 25px; padding-top: 15px; padding-bottom: 15px; display: block; color: darken(@white, 20%); }
		#content-left li a:hover { color: @white; }
		#content-left li:first-child { border-top: 0; }
		
		#content-left li.current_page_item { background:  url('../images/arrow.png') center right no-repeat darken(@blue, 3%); font-weight: bold; border-color: darken(@blue, 5%); border-top-color: darken(@blue, 3%); }
		#content-left li.current_page_item a { color: @white; }
	
		/* Right */
		#content-right { .grid-two; .float-right; min-height: 300px; margin-top: -55px; }
		#content-right div.article { padding: 25px; margin-bottom: 60px; position: relative; }
		#content-right div.article p:last-child { margin-bottom: 0; }
		#content-right p, #content-right ul, #content-right ol, #content-right blockquote { margin-bottom: 15px; }
		
		#content-right h3 { .shine; .shine-beige; .rounded-topright(3px); height: 21px; }
		#content-right p { font-size: 13px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
		#content-right strong { font-weight: bold; }
					
		#content-right ul, #content-right ol { padding-left: 35px; font-size: 13px; font-weight: bold; color: @blue; }
		#content-right li { list-style-type: disc; }
		
		#content-right .grid { font-size: 12px; list-style-type: none; padding: 0; margin: 0; margin-top: 30px; padding-top: 10px; border-top: 5px solid @grayblue; font-weight: normal; color: #777;  }
		#content-right .grid li { width: 186px; list-style-type: none; margin-right: 20px; float: left; }
		#content-right .grid li:nth-child(3) { width: 186px; margin-right: 0; }
		#content-right .grid h5 { color: darken(@gray, 30%); text-transform: uppercase; margin-bottom: 10px; border-bottom: 1px solid @gray; }
		
	/* Main page grid */
	
	.page-template-page-forsiden-php #content-bottom .container { background: @white url('../images/forside-bg.jpg') repeat-y left; }
	
	#content-grid-1, #content-grid-2 { .grid-one; width: 327px; .float-left; margin-top: -55px; }
	#content-grid-1 {  width: 327px; }
	#content-grid-3 { .grid-one; .float-right; width: 326px; margin-top: -55px; }
	
	#content-grid-1 h3, #content-grid-2 h3 { .shine; .shine-beige; height: 21px; }
	#content-grid-3 h3 { .shine; .shine-blue; height: 21px; }
	
	#content-grid-1 h3 { .rounded-topleft(3px); }
	#content-grid-3 h3 { .rounded-topright(3px); }
	
	#content-grid-1 h4, #content-grid-2 h4, #content-grid-3 h4 { color: @blue; margin-bottom: 15px; }
	#content-grid-1 p, #content-grid-2 p, #content-grid-3 p { font-size: 13px; margin-bottom: 15px; }
	#content-grid-1 p:last-child, #content-grid-2 p:last-child, #content-grid-3 p:last-child { margin-bottom: 0; }
	.page-template-page-forsiden-php #content-bottom ul, .page-template-page-forsiden-php #content-bottom ol { padding-left: 25px; font-size: 13px; font-weight: bold; color: @blue; }
	.page-template-page-forsiden-php #content-bottom li { list-style-type: disc; }
	
	div.article ol li a { margin-top: 8px; margin-bottom: 8px; display: block;  }
	
	/* About us */
	#content-left #info { padding: 25px; }
	#content-left #info h4 { color: @blue; margin-bottom: 15px }
	#content-left #info h5 { color: @blue; text-transform: uppercase; margin-bottom: 10px; border-bottom: 1px solid @gray; }
	#content-left #info p { margin-bottom: 15px; font-size: 13px; }

	
	/* Departments */
	.page-template-page-kontaktavdelinger-php #content-right h4 { color: @blue; }
	.page-template-page-kontaktavdelinger-php #content-right .grid { margin-top: 0px; padding-bottom: 20px; border: 0; }
	.page-template-page-kontaktavdelinger-php #content-right .grid li { padding-bottom: 50px; }
	
	/* Employees */
	.page-template-page-kontaktansatte-php #content-right h4 { color: @blue; }
	.page-template-page-kontaktansatte-php #content-right .grid { margin-top: 0px; padding-bottom: 20px; border: 0; }
	.page-template-page-kontaktansatte-php #content-right .grid li { padding-bottom: 20px; }
	.page-template-page-kontaktansatte-php #content-right .grid li:nth-child(3n) { margin-right: 0px; }
	.page-template-page-kontaktansatte-php #content-right .grid li:last-child { padding-bottom: 50px; }
	
	/* Er dette av interesse for deg? Ta kontakt! */
	
	#content-right div.interesse { position: absolute; bottom: 0; left: 329px; width: 620px; background: #f5f5f5; padding: 15px; height: 20px; margin-top: 30px; }
	#content-right div.interesse p.float-left { font-size: 20px; font-family: Georgia, Times, serif; padding-top: 2px; }
	#content-right div.interesse p.float-right a { .gradient(@green, darken(@green, 15%); border: 1px solid darken(@green, 30%); .dropshadow(0, 1px, 3px, rgba(0, 0, 0, 0.3)); color: @white; font-size: 13px; font-weight: bold; font-family: "gesta-1", "gesta-2", sans-serif; text-transform: uppercase; text-shadow: 0px 1px 0px darken(@green, 20%); cursor: pointer; display: block; padding-top: 4px; padding-left: 6px; padding-right: 6px; padding-bottom: 3px; margin-top: -3px; .rounded(3px); }
	#content-right div.interesse p.float-right a:hover { .gradient(lighten(@green, 5%), darken(@green, 10%); }
	
	/* ------- */
	/* Kontakt */
	/* ------- */
	
	#kontakt {
		padding-top: 30px; 
		padding-bottom: 30px; 
		background: darken(@blue, 10%);
		color: @white;
		.innershadow(0, 0, 30px, rgba(0, 0, 0, 0.25));
		display: none;
		height: 360px; }
		
	#kontakt .container {  }
	
	#kontakt .article h3 { margin-bottom: 15px; }
	#kontakt .article p { color: darken(@white, 20%);  }
	#kontakt .article { padding-right: 25px; }
	
	#kontakt  a.close { padding: 5px; font-family: "gesta-1", "gesta-2", sans-serif; text-transform: uppercase; padding-left: 7px; padding-right: 7px; text-decoration: none; display: block; background-color: darken(@blue, 25%); font-size: 12px; font-weight: bold; text-transform: uppercase; color: lighten(@blue, 15%); border: 1px solid @blue; }

	.wpcf7 input, .wpcf7 textarea { .rounded(3px); border: 1px solid rgba(0, 0, 0, 0.15); padding: 10px; .innershadow(0px, 1px, 3px, rgba(0, 0, 0, 0.1)); width: 200px; font-weight: normal; color: #777; }
	.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; } 
	.wpcf7 textarea { width: 320px; }
	
	.wpcf7 .button input { background: @green; width: 220px; border: 1px solid darken(@green, 10%); .dropshadow(0, 1px, 3px, rgba(0, 0, 0, 0.3)); color: @white; font-size: 14px; font-weight: bold; font-family: "gesta-1", "gesta-2", sans-serif; text-transform: uppercase; text-shadow: 0px 1px 0px darken(@green, 20%); cursor: pointer; }
	.wpcf7 .button input:hover { background: lighten(@green, 3%); }
	
	#kontakt .wpcf7 p { font-weight: bold; margin-bottom: 15px; color: @white; }
	#kontakt .wpcf7 .button input { background: @green; width: 280px; border: 1px solid darken(@green, 40%); .dropshadow(0, 1px, 3px, rgba(0, 0, 0, 0.3)); color: @white; font-size: 14px; font-weight: bold; font-family: "gesta-1", "gesta-2", sans-serif; text-transform: uppercase; text-shadow: 0px 1px 0px darken(@green, 20%); cursor: pointer; }
	#kontakt .wpcf7 .button input:hover { background: lighten(@green, 3%); }
	#kontakt .wpcf7 input, #kontakt .wpcf7 textarea { .rounded(3px); border: 0; padding: 10px; .innershadow(0px, 1px, 3px, rgba(0, 0, 0, 0.3)); width: 260px; font-weight: normal; color: #777; }
	#kontakt .wpcf7 textarea { width: 320px; height: 180px; }

	
	.wpcf7-not-valid-tip-no-ajax { visibility: hidden; display: none; }
	.wpcf7-validation-errors { background: lighten(@beige, 10%); padding: 10px; font-size: 12px; font-weight: bold; .rounded(3px); border: 1px solid @beige; color: darken(@beige, 40%); }
		
	#content-right .wpcf7 p { font-weight: bold; }	
	#content-right .wpcf7 div.float-right { margin-bottom: 20px; }
	#content-right .wpcf7 textarea { height: 180px; }
	
	#content-right .wpcf7 p.info, #kontakt .wpcf7 p.info { font-weight: normal; font-size: 11px; text-transform: uppercase; margin-bottom: 35px; }

		/* Kontaktskjema forside */
			
		#content-grid-3 .mini-container { background: lighten(@blue, 5%) url('../images/bluebox-bg.jpg'); }
		#content-grid-3 .mini-container p.cf7-prelabel { color: #fff; font-size: 14px; font-weight: bold; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);  }
		
		#content-grid-3 .mini-container .wpcf7 input, #content-grid-3 .mini-container .wpcf7 textarea { background: darken(@blue, 10%); .rounded(3px); border: 1px solid rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 10px; .innershadow(0px, 2px, 10px, rgba(0, 0, 0, 0.5)); width: 200px; font-weight: normal; color: #ccc; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); }
		
		#content-grid-3 .mini-container p.navn input { width: 255px; }
		#content-grid-3 .mini-container p.email input, #content-grid-3 .mini-container p.phone input { width: 108px; }
		#content-grid-3 .mini-container p.email input { float: left; margin-right: 15px; }
		#content-grid-3 .mini-container p.phone input { float: right; }
		
		#content-grid-3 .wpcf7 .button input { .gradient(@green, darken(@green, 15%); width: 276px; border: 1px solid darken(@green, 30%); .dropshadow(0, 1px, 3px, rgba(0, 0, 0, 0.3)); color: @white; font-size: 14px; font-weight: bold; font-family: "gesta-1", "gesta-2", sans-serif; text-transform: uppercase; text-shadow: 0px 1px 0px darken(@green, 20%); cursor: pointer;  margin-top: 20px; }
		#content-grid-3 .wpcf7 .button input:hover { .gradient(lighten(@green, 5%), darken(@green, 10%); }
		
		/* Landingsside */
		
		#content-media.landingsside { padding-top: 30px; padding-bottom: 55px; height: 0px; width: 980px; }
		
		p.success { color: darken(@green, 10%); font-size: 18px; font-weight: bold; }
		p.redirect { padding: 25px; background: #fff; }

	
	/* ------ */
	/* Footer */
	/* ------ */
	
	#footer { padding-top: 20px; padding-bottom: 80px; display: block; }
	
	#footer #mini-navigation { font-size: 12px; }
	#footer #mini-navigation li { .float-left; margin-right: 20px; }
	
	#footer p { font-size: 12px; color: #999; }