﻿/************************************************************

GLOBAL STYLESHEET
Author: Konsepthuset AS
  
************************************************************/

/*********** INDEX ***********
	1. Formatting
	2. Header (login, logo, nav)
	3. Content
	4. Footer
*****************************/

@import url("reset.css");


/************************************************************
1. Formatting
************************************************************/

body {
	background: #fff url("../images/bg.png") top repeat-x;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: #3333cc;
	text-decoration: underline;
}

	a:hover {
		color: #3333cc;
		text-decoration: none;
	}
	
	a.arrow {
		background: url("../images/link_arrow.gif") no-repeat 0px 5px;
		padding:0 0 0 12px;
	}
	
h1 {
	font-weight: bold;
	font-size: 18px;
	display:block;
	float: left;
	width: 100%;
	margin-bottom:13px;
	line-height: 23px;
}

h2 {
	font-weight: bold;
	font-size: 16px;
	display:block;
	float: left;
	width: 100%;
	margin-bottom:3px;
	line-height: 23px;
}

h3 {
	font-weight: bold;
	font-size: 13px;
	display:block;
	float: left;
	width: 100%;
	line-height: 19px;
	margin-bottom:7px;
}

p {
	font-size: 12px;
	line-height: 19px;
	float: left;
	width: 100%;
	margin-bottom:13px;
}

#container ul {
	float: left;
	font-size: 15px;
	margin:-1px 0 12px 0;
	width: 100%;
}

	#container ul li {
			background: url("../images/link_arrow.gif") no-repeat 0px 8px;
			padding:0 0 0 14px;
			line-height: 23px;
		}
		
			#container ul li a.vishvordan {
				font-size:11px;
				background: url("../images/bullet-7.png") no-repeat 0px 1px;
				padding-left: 18px;
				margin-left:4px;
			}
	
	
/************************************************************
2. Header
************************************************************/

div#header_container {
	width: 100%;
	position: absolute;
	top:0px;
}

div#header {
	background: url("../images/header.gif") no-repeat center;
	width: 954px;
	padding: 0 23px 0 23px;
	height: 120px;
	margin: 0 auto 0 auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;

}
	
	#header div.topline {
		width: 954px;
		float: left;
		height: 29px;
	}
	
	/* subnav */
	#header ul.subnav {
		height: 29px;
		float: left;
	}
	
		#header ul.subnav li {
			float: left;
		}
			
			#header ul.subnav li a {
				color: #f5f5f5;
				font-size: 10px;
				display:block;
				margin:6px 0 0 14px;
			}
	
	/* innlogging */	
	#header .form {
		height: 29px;
		float: left;
		margin-left:98px;
		width: 400px;
	}
	
		#header .form span {
			color: #fff;
			font-weight:bold;
			font-size: 10px;
			float: left;
			margin-top:7px;
		}
	
		#header .form input {
			width: 112px;
			height: 15px;
			float: left;
			background: #fff;
			color: #666666;
			border: none;
			margin-top: 5px;
			font-size: 10px;
			float: left;
			margin-left:7px;
			padding: 3px 0 1px 4px;
			font-family: Verdana, Arial, Helvetica, sans-serif;
		}
		
		#header .form input.button {
			background: #84b919;
			border-bottom: 1px solid #587e36;
			border-right: 1px solid #628913;
			color: #fff;
			width: 63px;
			font-size:11px;
			height: 20px;
			margin-top:5px;
			padding: 1px 0 6px 0;
			overflow:hidden;
		}
		
			#header .form input.button:hover {
				background: #5dce35;
				border-bottom: 1px solid #587e36;
				border-right: 1px solid #628913;
				cursor: pointer;
			}
			
			#header .form input.button:active {
				background: #5dce35;
				border-bottom: 1px solid #587e36;
				border-right: 1px solid #628913;
			}
		
	/* Glemt passord link */
	#header a.glemtpassord {
		color: #f5f5f5;
		font-size: 10px;
		float: right;
		margin: 6px 15px 0 0px;
	}
	
	/* Logo */
	#header a.logo {
		width: 256px;
		height: 43px;
		display: block;
		float:left;
		margin: 10px 0 0 7px;
	}
	
		#header a.logo span {
			display: none;
		}
		
	/* nav */
	#header ul.nav {
		height:25px;
		float:left;
		width: 954px;
		margin:12px 0 0 1px;
		font-family: Arial, Helvetica, sans-serif;
		overflow: hidden;
	}
	
		#header ul.nav li {
			height:25px;
			float:left;
  		display: inline;
		}
		
			#header ul.nav li a {
				font-size: 13px;
				color: #333333;
				text-decoration: none;
				display:block;
				border-left: 1px solid #fff;
				border-right: 1px solid #c7c7c7;
				height: 21px;
				padding: 4px 15px 0 14px;
				overflow: hidden;
				float: left;
			}
			
				#header ul.nav li a:hover {
					background: #f4f4f4;
				}
				
				#header ul.nav li.active a {
					background: #e8e8e8;
					border-left: 1px solid #e8e8e8;
				}
				
					#header ul.nav li.active a:hover {
						background: #e8e8e8;
						border-left: 1px solid #e8e8e8;
					}
		

/************************************************************
3. Content
************************************************************/

div#container {
	width: 954px;
	margin: 120px auto 0 auto;
	padding: 23px 23px 0 23px;
}

/* Site path */
div.sitepath_container {
	width: 100%;
	position: absolute;
	top:126px;
}

	.sitepath_container	div.sitepath {
		font-size: 11px;
		color: #666666;
		width: 954px;
		margin: 0 auto 0 auto;
		padding: 0 23px 0 23px;
	}
	
		.sitepath_container .sitepath a {
			color: #666666;
		}

/* Content left - submeny */
div#content_left {
	width: 188px;
	float: left;
	margin:20px 22px 0 0;
}

	div#content_left h4 {
		float: left;
		width: 100%;
		font-size: 13px;
		border-bottom: 1px solid #cccccc;
	}

	#content_left ul {
		float: left;
		margin: 0 0 0 0;
	}
	
		#content_left ul li {
			border-bottom: 1px solid #cccccc;
			width: 100%;
			background: none;
			padding:0;
		}
		
		#content_left ul li a {
			color: #333333;
			width: 183px;
			display: block;
			text-decoration: none;
			font-size: 12px;
			padding: 0 0 0 10px;
		}
		
		#content_left ul li strong {
			margin-left:-5px!important;
		}
		
		#content_left ul li a:hover {
			background: #f8f8f8;
		}
		
			#content_left ul li.active a {
				background: #f0f0f0;
			}

div#content_right {
	width: 744px;
	float: right;
	margin-top:18px;
}

	/* Main content */
	#content_right div#content {
		width: 533px;
		float: left;
		margin-right:23px;
	}
		
		#content_right #content ul li {
			font-size:12px;
			margin-left:23px;
		}
		
		#content_right div#content h2 {
			width: auto;
			font-size:15px;
			float:none;
		}
		
		#content_right div#content p {
			float:none;
			line-height: 18px;
			width: auto;
		}
	
	/* Right column */
	#content_right div#column_right {
		width: 188px;
		float: left;
	}
	
		#content_right #column_right h3 { 
			margin-bottom: 5px;
		}
		
		#content_right #column_right p {
			font-size: 11px;
			margin-bottom: 15px;
		}
		
		#content_right #column_right ul li {
			font-size:11px;
			line-height: 16px;
			margin-bottom:7px;
			background-position: 0 5px;
			padding-left:12px;
		}
		
		#content_right #column_right .form {
			width: 188px;
			height: 283px;
			float: left;
			margin:0;
			background: #7c4796 url("../images/right_column_form.png") no-repeat;
		}
		
			#content_right #column_right .form h3  {
				width: 188px;
				height: 37px;
				float: left;
				display:block;
				background: url("../images/right_column_form_heading.png") no-repeat center;
				margin:20px 0 9px 0;
			}
			
				#content_right #column_right .form h3 span  {
					display: none;
				}
			
			#content_right #column_right .form label  {
				font-size: 11px;
				font-weight: normal;
				color: #fff;
				float: left;
				margin: 2px 0 0 16px;
			}
				
			#content_right #column_right .form input  {
				width:150px;
				height:16px;
				float: left;
				margin:0;
				padding: 3px 3px 2px 3px;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
				font-weight:normal;
				color: #333333;
				background: #fff;
				border:none;
				margin-left: 16px;
			}
			
			#content_right #column_right .form input.button  {
				width: 156px;
				height: 33px;
				background: url("../images/right_column_form_button.png") no-repeat;
				margin:16px 0 0 16px;
				cursor: pointer;
			}
			
			#content_right #column_right .form input.button:hover  {
				background-position: 0 -33px;
			}

/* Testskjema */
.test {
	width: 419px;
	height: 337px;
	float: left;
	margin:0 0 23px 0;
	background: #7c4796 url("../images/form_test_bg.png") no-repeat;
}

	.test h1  {
		width: 289px;
		height: 48px;
		float: left;
		display:block;
		background: #7c4796 url("../images/form_test_h1.png") no-repeat;
		margin:27px 0 0 27px;
	}
	
		.test h1 span  {
			display:none;
		}
		
	.test p  {
		float: left;
		margin:14px 0 17px 27px;
		font-size: 16px;
		font-weight:bold;
		color: #fff;
		line-height:21px;
	}
	
	.test div.input_container {
		float: left;
		width: 275px;
		height:27px;
		margin-left: 28px;
	}
	
		.test .input_container input  {
			width:181px;
			height:16px;
			float: right;
			margin:0 0 6px 0;
			padding: 3px 3px 2px 3px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			font-weight:normal;
			color: #333333;
			background: #fff;
			border:none;
		}
		
		.test .input_container input.button  {
			width: 187px;
			height: 33px;
			background: url("../images/form_test_button.png") no-repeat;
			margin:6px 0 0 0;
			cursor: pointer;
		}
		
			.test .input_container input.button:hover  {
				background-position: 0 -33px;
			}
			
		.test .input_container label  {
			font-size: 12px;
			font-weight: bold;
			color: #fff;
			float: left;
			margin-top:3px;
		}
		
/* Produktmatrise */
table.produktmatrise {
	width: 535px;
	float: left;
	background: url("../images/produktmatrise_bg.png") no-repeat;
	color: #333333;
	font-size:12px;
	vertical-align: top;
	margin-bottom:36px;
}

	table.produktmatrise .left {
		text-align: left;
		padding: 0 0 0 24px;
	}
	
	table.produktmatrise .right {
		text-align: right;
		padding: 0 24px 0 0;
	}
	
	
	table.produktmatrise .purple {
		font-size: 105%;
		font-weight: bold;
		color: #92117e;
	}
	
		table.produktmatrise .purple span {
			font-size: 90%;
			font-weight: normal;
			color: #999;
		}

	table.produktmatrise .grey {
		font-size: 150%;
		font-weight: bold;
	}
	
	table.produktmatrise .lightgrey {
		font-size: 150%;
		font-weight: bold;
		color: #999;
		text-decoration: line-through;
	}
	
	
	table.produktmatrise thead tr th {
		text-align:center;
		vertical-align: middle;
		height: 57px;	
	}

	table.produktmatrise tbody tr td {
		text-align:center;
		vertical-align: middle;
		height:30px;
	}
	
	
	table.produktmatrise tfoot tr td {
		text-align:center;
		vertical-align: middle;
		height:57px;
	}

/* USP */
div.usp {
	float: left;
	width: 392px;
	margin-right:23px;
	padding-top:5px;
	padding-left: 27px;
}

/* BrÃ¸nnÃ¸ysund */
div.bronnoysund {
	float: left;
	width: 254px;
	padding-top:33px;
	margin-right:23px;
}

/* Barometer */
div.barometer {
	float: left;
	width:235px;
	padding-top:5px;
}


/************************************************************
4. Footer
************************************************************/

div#footer {
	width: 954px;
	float: left;
	margin-top:41px;
}

	#footer p {
		color: #999999;
	}
	
	#footer ul {
		float: none;
		margin-top: -2px;
		text-align: center;
		float: left;
	}
	
		#footer ul li {
			text-align: center;
			float: none;
			font-size: 12px;
			background: none;
			padding:0;
			margin:0 8px 0 8px;
			display: inline;
		}
		
			#footer ul li a {
				color: #999999;
				font-weight: bold;
				text-decoration: none;
			}
			
	#footer p.footer {
		width: 954px;
		overflow: hidden;
		font-size:10px;
		float: left;
		margin-top:28px;
		margin-bottom:0px;
		padding-bottom:17px;
		padding-top:4px;
		border-top: 1px solid #999999;
	}
	
	#footer p a,
	#footer p.footer a {
		color: #999999;
	}
	
/* ProductMatrix */
table.productMatrix {
    margin:0;
		margin-top:20px; 
    padding:0; 
    border:0; 
    width:100%; 
    border-bottom:1px solid #999; 
    background-color:#fff; 
    font-size:12px;
		float:left;
}


table.productMatrix .purple {
	font-size: 105%;
	font-weight: bold;
	color: #92117e;
}
	
	table.productMatrix .purple span {
		font-size: 90%;
		font-weight: normal;
		color: #999;
	}

table.productMatrix .grey {
	font-size: 150%;
	font-weight: bold;
}

table.productMatrix .lightgrey {
	font-size: 150%;
	font-weight: bold;
	color: #999;
	text-decoration: line-through;
}


table.productMatrix td {
    border-top:1px solid #999; 
    font-size:12px;
		height:33px;
		vertical-align: middle;
}

table.productMatrix td a {
	color: #333333;
	text-decoration: none;
}

table.productMatrix td a.expand {
	margin-left:8px;
}

table.productMatrix td b a {
	color: #3333cc;
	text-decoration: underline;
}

table.productMatrix td a:hover {
	text-decoration: underline;
}

table.productMatrix th {
    height:2.0em; font-weight:bold; 
    text-align:center; 
    font-size:12px;
		height:39px;
		vertical-align: middle;
}

table.productMatrix th.columnA {
    text-align:left;
}

table.productMatrix th, table.productMatrix td {
	padding-left: 7px;
}
	
table.productMatrix .show td {
    border-top:none; 
    padding:5px 10px 10px 20px; 
    color:#666;
}

table.productMatrix .hide td {
    border-top:none; 
    visibility:hidden; 
		overflow: hidden;
    height:1px !important; 
    padding:0; 
    margin:0; 
    line-height:0px;
		float:left;
}

.columnA {background-color:#fafafa;}
.columnB {background-color:#fafafa;}
.columnC {background-color:#f5f5f5;}
.columnD {background-color:#f0f0f0;}
.columnE {background-color:#eaeaea;}	


/* Dictionary */
.alphabet {float:left; width:520px; margin:10px 0 20px 0;}
.alphabet a {font-weight:bold; font-size: 1.2em; text-decoration:underline; margin-right:5px;}
.alphabet a:hover {text-decoration:underline;}
.alphabet a.active {text-decoration:none;}


/* Formels */
.formel {MARGIN: 0px 0px 8px}
.formel TD{FONT-SIZE: 14px;TEXT-ALIGN: center}
.formel TH{FONT-WEIGHT: normal;FONT-SIZE: 14px;BORDER-BOTTOM: #000000 1px solid;TEXT-ALIGN: center}


/* Rounded box */
.roundbox549 {background:transparent url('/public/img/roundbox_btm.gif') bottom left no-repeat; float:left;}
.roundbox549 .boxContent { padding:10px 20px 20px 20px;}
.roundbox549 table label { font-size:11px; margin-right:8px; }
.roundbox549 p {line-height:1.5em; margin:0 0 10px 0;}

.formContainer {font-size:1.2em; width:509px; position:relative;}
.formContainer label {display:block; width:130px; float:left; font-weight:bold; margin:2px 10px 20px 0; text-align:right; font-size:12px;}
.formContainer label.checkbox {display:normal; width:auto; float:left; text-align:left; font-weight:bold; margin:2px 15px 1.7em 5px;}
.formContainer input {padding:0.1em 0.4em 0.25em 0.4em; margin-right:10px; float:left; width:200px; border:1px solid #587e36}
.formContainer select {padding:0.1em 0.4em 0.25em 0.4em; margin-right:10px; float:left; width:212px; border:1px solid #587e36}
.formContainer textarea {padding:0.1em 0.4em 0.25em 0.4em; margin:0px 10px 10px 0px; float:left; width:300px; height:150px; border:1px solid #587e36}
.formContainer input.checkbox{width:1.5em; height:1.5em; margin:3px 0 0 0; border:0 !important;}
.formContainer input.button  {width:auto; color:#fff; padding:0.1em 0.4em 0.1em 0.4em; font-size:12px; border-top:1px solid #84b919; border-left:1px solid #84b919; border-right:1px solid #628913; border-bottom:1px solid #587e36; background-color: #84b919;}
.formContainer br {clear:both;}

#formContainer p { font-size:14px; }
#formContainer {
	padding-bottom:30px;
}



/* Misc */
img {border:0;}
form {margin:0;}
hr {clear:both; border-top:1px solid #fff; border-bottom:1px solid #999; padding:9px 0 0 0; margin-bottom:12px; border-left: none; border-right: none;}
br.clear {clear:both;}
.floatleft {float:left;}
.floatright {float:right;}
.show {visibility:visible;}
.hide {display: none;}

/* Images */
.imageLeft {margin:5px 15px 5px 0; float:left; clear:both;}
/* .imageWide {margin:5px 0 5px 0; float:left; width:549px; clear:both;} */
/* .imageRight {margin:5px 0 5px 15px; float:right; clear:both;} */
/* .imageRight p, .imageLeft p, .imageWide p {margin:2px 0 0 0; font-size: 1.0em;} */


/* Links */
a.internal { clear:both; color:#3333cc; text-decoration:underline; font-weight:bold; background:transparent url('../images/link_arrow.gif') left no-repeat; display:block; padding-left:12px;}
a.internal:hover { text-decoration: none; }

/* Dictionary */
.alphabet {float:left; width:520px; margin:10px 0 20px 0;}
.alphabet a {font-weight:bold; font-size: 12px; text-decoration:underline; margin-right:5px;}
.alphabet a:hover {text-decoration:underline;}
.alphabet a.active {text-decoration:none;}

/* tabellListe */
table.tabellListe th,
table.tabellListe td {
	font-weight: normal;
	font-size:11px;
	text-align: left;
}


/* Videosider */

.currentvideo {
	width: 640px;
	height: 360px;
	padding: 0;
	margin: 18px 24px 0 0; 
	border: 1px solid #ccc;
	float: left;
}

.currentvideo p {
	margin: 18px 0 0 0; 
	font-size: 1.1em;
}

.othervideos {
	width: 286px;
	padding: 0;
	margin: 0; 
	float: right;
}

.othervideos div {
	width: 278px;
	padding: 4px 4px 0 4px;
	margin: 0 0 10px 0;
	border: 1px solid #ccc;
	display: block;
	clear: both;
	float: none;
	overflow: hidden;
}

.othervideos div h3 {
	margin: 0 0 4px 0;
}

.othervideos div img {
	margin: 0 6px 0 0;
	float: left;
}

.othervideos div p.abstract {
	margin: 4px 0;
	font-size: 69%;
	line-height: 12px;
	float: right;
}

.othervideos div p.abstract span {
	padding-left: 6px;
	color: #777;
}

