/*
	Matte header #B2BF41
	Matte body(lower) #FBFAF5
	Matte menu #4D402B
*/


@import 'reset.css';

html
{
      background: #fbfaf5 url(images/bg.gif) repeat-x top left;
}

body
{
      width: 830px;
      margin: 0 auto;
      font: normal 12px/17px Geneva,Tahoma,Helvetica,Sans-serif;
      color: #413a29;
}

	#menu
	{
		height: 38px;
		padding-top: 17px;
		padding-left: 9px;
	}
		#menu ul
		{
			list-style: none;
			
		}
		
			#menu ul li
			{
				
				height: 24px;
				margin-right: 15px;
				float: left;
				color: #b0a48d;
				line-height: 26px;
			}
			
			#menu ul li span
			{
				margin-right: 11px;
				height: 24px;
				display: block;
				float: left;
			}
			
			#menu ul li span a
			{
				text-decoration: none;
				color: #b0a48d;
			}
			
			#menu ul li span a:hover
			{
				text-decoration: none;
				color: #d6cab4;
				border-bottom: 1px dotted #d6cab4;
			}
			
			#menu ul li.current, #valkommen #menu ul li.valkommen, #luckylane #menu ul li.luckylane, #vad_vi_gor #menu ul li.vad_vi_gor, #kunder #menu ul li.kunder, #portfolio #menu ul li.portfolio, #kontakt #menu ul li.kontakt, #storbild #menu ul li.storbild
			{
				background: transparent url(images/mainNavRight.png) no-repeat top right;
			}
			
			#menu ul li.current span, #valkommen #menu ul li.valkommen span, #luckylane #menu ul li.luckylane span, #vad_vi_gor #menu ul li.vad_vi_gor span, #kunder #menu ul li.kunder span, #portfolio #menu ul li.portfolio span, #kontakt #menu ul li.kontakt span, #storbild #menu ul li.storbild span
			{
				color: #FFF;
				background: transparent url(images/mainNavLeft.png) no-repeat top Left;
				padding-left: 11px;
				margin-right: 11px;
				margin-left: -11px;
			}
			
			#menu ul li.current span a, #valkommen #menu ul li.valkommen span a, #luckylane #menu ul li.luckylane span a, #vad_vi_gor #menu ul li.vad_vi_gor span a, #kunder #menu ul li.kunder span a, #portfolio #menu ul li.portfolio span a, #kontakt #menu ul li.kontakt span a, #storbild #menu ul li.storbild span a
			{
				text-decoration: none;
				color: #FFF;
			}
			
			#menu ul li.current span a:hover,  #valkommen #menu ul li.valkommen span a:hover, #luckylane #menu ul li.luckylane span a:hover, #vad_vi_gor #menu ul li.vad_vi_gor span a:hover, #kunder #menu ul li.kunder span a:hover, #portfolio #menu ul li.portfolio span a:hover, #kontakt #menu ul li.kontakt span a:hover, #storbild #menu ul li.storbild span a:hover
			{
				border: none;
				cursor: default;
			}
			
			
	
	#header
	{
		height: 158px;
		background: transparent url(images/head.png) no-repeat bottom center;
	}	
		#header .logo
		{
			width: 264px;
			height: 83px;
			margin-top: 39px;
		}
		
		#header .quote
		{
			width: 446px;
			height: 90px;
			margin-top: 39px;
			background: transparent url() no-repeat;	
		}
	
	#content
	{
		padding-top: 25px;
		min-height: 300px;
	}
	
	* html #content
	{
		height: 300px;
	}
		#content .block
		{
			width: 270px;
			margin-bottom: 20px;
		}
			#content .block.first
			{
				margin-right: 10px;
			}
			
			#content .block.last
			{
				margin-left: 10px;
			}
			
			#content .block.small
			{
				width: 170px;
				position: relative;
			}
			
			#content .block.medium
			{
				width: 315px;
				position: relative;
			}
			
			#content .block.medium_big
			{
				width: 500px;
			}
			
			#content .block.big
			{
				width: 650px;
				position: relative;
			}
			
			#content .block.whole
			{
				width: 830px;
				position: relative;
				padding-bottom: 15px;
			}
			
			#content .block.whole img
			{
				margin-top: -5px;
				margin-left: -10px;
				
			}
			
			.fish
			{
				background: transparent url(images/fish.png) right top no-repeat;
			}
			
			.board
			{
				background-color: transparent;
				background-image: url(../images/layout/board.png);
				background-repeat: no-repeat;
				background-position: right top;
				float: left;
				height: 278px;
				width: 192px;
				margin-right: 10px;
			}
			.board_content {
				margin-left: 240px;
			}
			.board_content p {
				width: 400px;
			}
			
			
			#blickfang
			{
				width: 168px;
				height: 103px;
				overflow: hidden;
				margin: 0;
				padding: 0;
			}
			
			#port
			{
				margin-bottom: 45px;
			}
			
			#port ul li
			{
				padding-bottom: 10px;
			}
			
			#blickfang li img
			{
				background: #fbfaf5;
				padding: 3px;
				border: 1px solid #CEC5B5;
			}
			
			#faces
			{
				width: 720px;
				height: 106px;
				background: url(images/info_bg.gif) no-repeat bottom;	
			}
			
			.face
			{
				width: 75px;
				height: 105px;
				float: left;
				cursor: pointer;
			}
			
			.face.kim
			{
				width: 75px;
				height: 106px;
				background: url(../images/faces/kim.gif) no-repeat;
			}
			
			.face.mattias
			{
				width: 95px;
				height: 106px;
				background: url(../images/faces/mattias.gif) no-repeat;
			}
			
			.face.maria
			{
				width: 89px;
				height: 106px;
				background: url(../images/faces/maria.gif) no-repeat 0 2px;
			}
			
			.face.hanna
			{
				width: 101px;
				height: 106px;
				background: url(../images/faces/hanna.gif) no-repeat 0 6px;
			}
			
			.face.martin
			{
				width: 80px;
				height: 106px;
				background: url(../images/faces/martin.gif) no-repeat 0 3px;
			}
			
			.face.pernilla
			{
				width: 94px;
				height: 106px;
				background: url(../images/faces/pernilla.gif) no-repeat 0 3px;
			}
			
			#face_info
			{
				padding: 10px 5px 0;
				height: 100px;
			}
			
			.info
			{
				background: transparent;
			}
			
			.info p
			{
				width: 500px;
				margin-bottom: 5px;
			}
	
	.imageBlock
	{
		width: 292px;
		height: 202px;
		margin: 0 30px 35px 0;
		float: left;
		position: relative;
	}
	
	/*.imageBlock
	{
		width: 292px;
		height: 202px;
		margin: 0 30px 35px 0;
		position: relative;
	}*/
	
	.imageBlock span
	{
		width: 102px;
		height: 42px;
		position: absolute;
		top: -18px;
		left: 50%;
		margin-left: -51px;
		background: transparent url(images/tejp.png) no-repeat;
		z-index: 99;
	}
	
	.imageBlock em
	{
		width: auto;
		height: 18px;
		position: absolute;
		bottom: 20px;
		left: 2px;
		z-index: 90;
		color: #413a29;
		background: rgba(255,255,255,0.8);
		padding: 6px 10px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
	}
	
	.imageBlock .imageShadow
	{
		width: 294px;
		height: 10px;
		margin-bottom: -25px;
		background: #FBFAF5 url(images/imageShadow.png) no-repeat top center;
		float: left;
	}
	
	/*.imageBlock p
	{
		padding: 0 6px;
	}*/
	
	.portfolio_image, .imageBlock a
	{
		float: left;
		padding: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		/*-webkit-box-shadow: 0px 2px 2px #E0DDD0;
		-moz-box-shadow: 0px 2px 2px #E0DDD0;*/
		background: #FFF repeat-x;
		border: 1px solid #DED89C;
	}
	
	.imageBlock a:hover
	{
		border: 1px solid #DED89C;
	}
	
	.portfolio_image img, .imageBlock .image img
	{
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
	}
	
	.portfolio_text
	{
		float: left;
	} 
	
	ul#portfolioMenu li
	{
		padding-bottom: 5px;
	}
	
	ul#portfolioMenu li a
	{
		color: #413a29;
	}
	
	ul#portfolioMenu li.current a
	{
		color: #aaba31;
		font-weight: bold;
	}
	
	
	#tooltip{
		position:absolute;
		background:transparent url(images/tooltipRight.png)  no-repeat top right;
		color:#333;
		display:none;
		width: auto;
		height: 24px;
	      line-height: 27px;
	      color: #FFF;
	}
	
	#tooltip span
	{
		background: transparent url(images/tooltipLeft.png) no-repeat top left;
		padding-left: 11px;
		margin-right: 11px;
		height: 24px;
		display: block;
		font-size: 11px;
	}
	
	#tooltip #arrow
	{
		position:absolute;
		left: 50%;
		width: 10px;
		height: 10px;
		margin-left: -10px;
		top: -9px;
		background: transparent url(images/tooltipArrow.png) no-repeat top;
	}
	
	#imageBlock
	{
		float: left;
		margin-right: 35px;
		width: 460px;
		height: 280px;
		overflow: hidden;
	}
	
	/*	
	.portfolioMenu
	{
		list-style: none;
		margin-left: -8px;
	}
	
		.portfolioMenu li
		{
			width: 140px;
			padding-left: 10px;
			height: 20px;
			color: #392f1f;
			padding-top: 6px;
			font-family: Georgia;
			font-style: italic;
			margin-bottom: 6px;

		}
		
		.portfolioMenu li a
		{
			color: #392f1f;
			text-decoration: none;
		}
		
		.portfolioMenu li a:hover
		{
			text-decoration: underline;
		}
		
		.portfolioMenu li.current
		{
			width: 140px;
			background: transparent url(images/portfolioMenuCurrent.png) no-repeat top right;
			color: #FFF;
			padding-left: 10px;
		}
		
		.portfolioMenu li.current a
		{
			color: #FFF;
		}
		
		.portfolioMenu li.current a:hover
		{
			text-decoration: none;
			cursor: default;
		}
		
		*/

	.hr
	{
		height: 1px;
		margin: 0 0 20px;
		background: transparent url(images/footer.png) no-repeat;
	}

	#footer
	{
		height: 60px;
		width: 100%;
		margin-top: 12px;
		padding-top: 6px;
		text-align: left;
		background: transparent url(images/footer.png) no-repeat;
		/*border-top: 1px solid #b0a48d;*/
	}
		#footer ul
		{
			list-style: none;
		}
			#footer ul li
			{
				display: inline;
				padding-right: 20px;
				font: italic 11px georgia,times,serif;
				color: #b0a48d;
			}
			
			#footer ul li a
			{
				color: #b0a48d;
			}
			
			#footer ul li a:hover
			{
				border: 0;
			}
	
	/* --- Page specific --- */
	#kunder .block ul
	{
		float: left;
		margin-top: 10px;
		margin-right: 50px;
	}
	
	#kunder .block ul li
	{
		display: block;
		padding-bottom: 15px;
	}
	#kunder .block ul li.big
	{
		font-size: 18px;
		font-weight: bold;
		color: #584D33;
	}
	
	/* --- Generic --- */
	.clear
	{
		clear: both;
	}
	
	.right
	{
		float: right;
	}
	
	.left
	{
		float: left;
	}
	
	.margin-bottom-10px
	{
		margin-bottom: 10px;
	}
	
	.margin-top-75px
	{
		margin-top: 75px;
	}

	/* --- Typography --- */
	h1
	{
		color: #aaba31;
		font-size: 25px;
		/*height: 45px; Servern måste klara PHP5!!!*/
		
		/*ta bort när servern e bytt */
		margin-bottom: 20px;
		font-weight: normal;
		/***************/
		
		margin-top: 4px;
	}
	
	h1.bquote
	{
		height: auto;
		margin:0;
		font-size: inherit;
	}
	
	h2
	{
		color: #aaba31;
		font-size: 20px;
		height: 31px;
		margin-bottom: 4px;
	}
	
	h3
	{
		margin-top: 10px;
		color: #aaba31;
		font-size: 15px;
		height: 32px;
	}
	
	h4
	{
		font-family: georgia;
		font-style:italic;
		margin-bottom: 8px;
		color: #5f5742;
	}
	
	h4.portfolio
	{
		font-family: inherit;
		font-style: inherit;
		font-size: 20px;
		margin-bottom: 9px;
		color: #5f5742;
		margin-top: 6px;
	}
	
	h5
	{
		color: #aaba31;
		font-size: 12px;
		font-style: italic;	
	}
	
	blockquote
	{
		margin-top: 14px;
		font-size: 24px;
		font-family: "Georgia", serif;
		color: #aaba31;
		font-style: italic;
		margin-left: -6px;
		margin-bottom: 13px;
	}
	
	p.ingress
	{
		width: 620px;
		margin-left: 2px;
		margin-bottom: 12px;
		margin-top: 2px;
		color: #776D54;
	}
	
	p.ingress.dull
	{
		color: #A0957C;
		font: normal 14px/21px Geneva, sans-serif;
	}
	
	p
	{
		margin-bottom: 9px;	
		margin-top: 5px;
		width: 620px;
	}
	
	p.ingress.italic
	{
		font-style: italic;
	}
	
	p.portfolio
	{
		width: 260px;
	}
	
	ul.list li
	{
		padding: 0 0 5px 0;
	}
	
	ul.list li a
	{
		margin-left: 12px;
	}
	
	li p
	{
		width:auto;
		margin-top: 3px;
	}
	
	#content .block li p
	{
		width: 230px;
	}
	
	
	dl
	{
		margin-bottom: 15px;
	}
	
	dt
	{
		margin-top: 6px;
	}
	
	dd
	{
		margin-bottom: 4px;
	}
	
	
	strong
	{
		font-weight: bold;
	}
	
	.green
	{
		color: #aaba31;
	}
	
	.names ul
	{
		float: left;
		width: 130px;
		margin-left: 25px;
		margin-bottom: 12px;
	}
	
	
	.portfolio_image a:hover
	{
		border:0;
	}
	
	
	.image a:hover
	{
		border: 0;
	}
	
	/* --- Form -- */
	form
	{
		margin: 10px 0 20px;
	}
	
	label, input, textarea
	{
		display: block;
	}
	
	label
	{
		padding-left: 2px;
	}
	
	label:after
	{
		content: ':';
	}
	
	fieldset
	{
		float: left;
	}
	
	input, textarea
	{
		color: #333;
		font-size: 13px;
		padding: 5px;
		background: #FFF url(images/input_bg.gif) repeat-x;
		border: 1px solid #CCC;
		margin-right: 30px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		margin-bottom: 8px;
	}
	
	.send
	{
		display: block;
		float: right;
		margin-top: 5px;
		width: 260px;
		text-align: right;
	}
	
	textarea
	{
		width: 350px;
		height: 75px;
	}
	
	.inline
	{
		float: left;
		padding: 0;
		margin: 0;
		margin-right: 3px;
	}
	
	.selectbox
	{
		cursor: pointer;
		background: #FFF url(images/select_bg.gif) repeat-x top right;
	}
	
	.selectbox-wrapper
	{
		margin-top: -9px;
		background: #FFF;
		border: solid 1px #CCC;
		width: 186px !important;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	
	.selectbox-wrapper li
	{
		cursor: pointer;
		padding: 3px 5px;
	}
	
	.selectbox-wrapper li.selected
	{
		background: #aaba31;
	}

	.send_btn
	{
		margin-left: 15px;
		margin-top: -6px;
		padding: 0;
		background: transparent;
		border: 0;
		display: block;
		float: left;
	}
	
	#errors
	{
		width: 400px;
		padding: 10px;
		border: 3px solid #FF6600;
		color: #CC3300;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	
	#success
	{
		width: 400px;
		padding: 10px;
		border: 3px solid #9FAE2C;
		color: #5F6D13;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}

	/* --- Links --- */
	a, a:link, a:visited
	{
		color: #aaba31;
		text-decoration: none;
	}
	
	a:hover
	{
		border-bottom: 1px dotted #aaba31;
	}
	
	
	/*--- Popup ---*/
	#imgOverlay
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	#overlay
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.5;
		z-index: 99;
		cursor: pointer;
	}
	
	#imgOverlay #holder
	{
		position: relative;
		margin: 0 auto;
		top: 280px;
		width: 460px;
		height: 300px;
		background: #FFF;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-box-shadow: #000 0px 3px 5px;
		-moz-box-shadow: #000 3px 0px 5px;
		padding: 10px;
		z-index: 100;
	}
	
	#holder p
	{
		color: #777;
		margin-left: 10px;
	}
	
	#imgOverlay #images
	{
		width: 460px;
		height: 280px;
		overflow: hidden;
		border-bottom: 1px solid #ddd;
	}
	
	#imgOverlay span
	{
		position: relative;
		bottom: 40px;
		z-index: 200;
	}
	
	#imgOverlay #images ul
	{
		width: 470px;
		height: 280px;
		overflow: hidden;
	}
	
	#imgOverlay #images ul li
	{
		width: 470px;
		height: 280px;
		display: inline;
	}
	
	#buttons
	{
		position: absolute;
		top: -19px;
		right: 0;
		width: 58px;
		height: 27px;
		background: transparent url('images/portNav_bg.png') no-repeat;
	}
	
	#prevBtn
	{
		position: absolute;
		position: absolute;
		top: 0px;
		left: 9px;
		width: 24px;
		height: 19px;
		background: transparent url('images/prevBtn.gif') no-repeat center center;
		cursor: pointer;
	}
	
	#nextBtn
	{
		position: absolute;
		top: 0px;
		right: 0px;
		width: 24px;
		height: 19px;
		background: transparent url('images/nextBtn.gif') no-repeat center center;
		cursor: pointer;
	}
	
	#map
	{
		position: absolute;
		display: none;
		top: 214px;
		left: 50%;
		margin-left: -251px;
		padding: 10px;
		background: #FFF;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-box-shadow: #000 0px 3px 5px;
		-moz-box-shadow: #000 3px 0px 5px;
		z-index: 999;
	}