@charset "UTF-8";
/* CSS Document */

body, h1, h2, h3, h4, h5, h6, ul, ol, li, p, a, img {
	margin:0;
	padding:0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color:#e8eae7;
	padding-bottom:30px;
	}
.invisible { display: none; }

#container {
	width:100%;
	background:url(images/bg-top-1px.png) 0 0 repeat-x;
	background-color:#f5f8f5;
	}
	
#container #bodywrap {
	width: 917px;
	margin: 0 auto 0 auto;
	background:url(images/bg-top-1px.png) 0 0 repeat-x;
	background-color:#f5f8f5;
	}
	
#toplogo {
	width:917px;
	height: 107px;
	background:url(images/logo-clean.png) 0 0 no-repeat;
	}
	
	#toplogo h1 a {
		float:left;
		display:block;
		width:175px;
		height: 100px;
		text-indent:-1000px;
	}
	
	#toplogo.index { background:url(images/logo-index.png) 0 0 no-repeat; }
	
/* ----------------------------------------------------------
    MENU
---------------------------------------------------------- */
	
	#toplogo ul {
		float:right;
		margin:50px 65px 0 0;
	}
	
	#toplogo ul li {
		display: inline;
	}
	
	#toplogo ul li a {
		display: block;
		float:left;
		height:24px;
		margin-left: 20px;
		background-image:url(images/menu.png);
	}
	
	
	#toplogo ul #hem a { width: 44px; background-position: 0 0; }
	#toplogo ul #stora_kort a { width: 76px; background-position: -44px 0; }
	#toplogo ul #sma_kort a { width: 70px; background-position: -120px 0; }
	#toplogo ul #kop_kort a { width: 68px; background-position: -190px 0; }
	#toplogo ul #water4all a { width: 74px; background-position: -258px 0; }
	#toplogo ul #kontakt a { width: 64px; background-position: -332px 0; }
	
	#toplogo ul #hem a:hover { background-position: 0 -24px; }
	#toplogo ul #stora_kort a:hover { background-position: -44px -24px; }
	#toplogo ul #sma_kort a:hover { background-position: -120px -24px; }
	#toplogo ul #kop_kort a:hover { background-position: -190px -24px; }
	#toplogo ul #water4all a:hover { background-position: -258px -24px; }
	#toplogo ul #kontakt a:hover { background-position: -332px -24px; }
	
	#toplogo ul #hem.active a, #toplogo ul #hem.active a:hover { background-position: 0 -48px; }
	#toplogo ul #stora_kort.active a, #toplogo ul #stora_kort.active a:hover  { background-position: -44px -48px; }
	#toplogo ul #sma_kort.active a, #toplogo ul #sma_kort.active a:hover  { background-position: -120px -48px; }
	#toplogo ul #kop_kort.active a, #toplogo ul #kop_kort.active a:hover  { background-position: -190px -48px; }
	#toplogo ul #water4all.active a, #toplogo ul #water4all.active a:hover  { background-position: -258px -48px; }
	#toplogo ul #kontakt.active a, #toplogo ul #kontakt.active a:hover  { background-position: -332px -48px; }

		
/* ----------------------------------------------------------
---------------------------------------------------------- */
#indexmain {
	width: 917px;
	height: 474px;
	background:url(images/index-main.png) 0 0 no-repeat;
	}
	#indexmain  p {
		padding: 105px 0 0 25px;
		color: #2b4400;
		width:270px;
		font-size: 12px;
		line-height:18px;
		}
		
#thumbcontainer {
	width: 854px;
	height: 100px;
	margin: 0 0 10px 0;
	background:url(images/card-thumb-bg.png) 0 0 no-repeat;
	}
	#thumbcontainer img {
		border: 1px solid #bdbfb5;
		float:left;
		margin: 15px 0 0 14px;
	}
	
#helptext {
	color:#666;
	font-size: 11px;
	line-height:22px;
	margin: 0 0 10px 15px;
	}
	
/*----------------------------*/	

#cardviewer {
	position:relative; /* important */
	overflow: hidden; /* important */
	width: 852px; /* important */
	height: 470px; /* important */
	margin: 0;
	background-color:#fff;
	border: 1px solid #dcdfdc;
}

#cardviewer_content {
	overflow: hidden;
	position: absolute;
	top: 0;
	margin:0;
	width:20000px;
}
#cardviewer_content .carditem {
	width:832px;
	height:450px;
	display: block;
	float: left;
	padding: 10px;
	background-color:#fff;
	}
#cardviewer_content .carditem img {
	float:left;
	border: 1px solid #d6d7d4;
	}
#cardviewer_content .carditem .cardtext {
	float:left;
	width:520px;
	background-color:#fff;
	}
#cardviewer_content .carditem .cardtext span.h3_label {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#b5b2a8;
	font-size: 16px;
	line-height:14px;
	margin: 0 0 0 20px;
	display:block;
	font-style:normal;
}
#cardviewer_content .carditem .cardtext h3 {
	font-size: 22px;
	color:#4e4b43;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	margin: 5px 0 10px 20px;
	}
#cardviewer_content .carditem .cardtext h4 {
	color:#4e4b43;
	font-size: 12px;
	line-height:22px;
	margin: 22px 0 22px 20px;
	}
#cardviewer_content .carditem .cardtext h4 span { font-weight:normal; }
#cardviewer_content .carditem .cardtext p {
	color:#4e4b43;
	font-size: 12px;
	line-height:22px;
	margin: 0 0 0 20px;
	}
#cardviewer_content .carditem .cardtext ul {
	padding: 10px;
	border: 1px solid #ccaa66; 
	margin: 44px 0 0 20px;
	background-color:#fff6e5;
}
#cardviewer_content .carditem .cardtext ul li {
	font-style:italic;
	list-style-type:disc;
	color:#4e4b43;
	font-size: 12px;
	line-height:22px;
	margin-left: 20px;
	}
	
#cardviewer_content .carditem.small img { border:none; }
#cardviewer_content .carditem.small .cardtext {	width:355px; }
	
/*----------------------------*/


#puffcontainer {
	margin: 20px 0 0 0;
	height: 174px;
	}
	.puff {
		width: 242px;
		height: 106px;
		background:url(images/puff-bg-brown.png) 0 0 no-repeat;
		float: left;
		margin-right: 17px;
		padding: 18px 16px 10px 16px;
		}
		
	.blue { 
		background:url(images/puff-bg-blue.png) 0 0 no-repeat;
		display:block; 
		}
	.puff h3 {
		font-size: 18px;
		color:#4e4b43;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-weight:normal;
		margin-bottom: 10px;
		}
	.puff p {
		color:#4e4b43;
		font-size: 11px;
		line-height:16px;
		}
	.puff h3.white, .puff p.white { color:#fff; }
	.pufflink { text-decoration:none; cursor:pointer; }
	
	.puff a {
		color:#4e4b43;
		text-decoration:none;
		}
	 .puff a:hover {	border-bottom: 1px dotted #4e4b43; }
		
#footer {
	width:100%;
	background:url(images/footer-bg-top.png) 0 0 repeat-x;
	}
	
	#footer p {
		padding-top:30px;
		color:#999;
		text-align:center;
		}


/*  ----------------------|  SWEET BLESSED CLEARFIX  |----------------------  */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }

.clearfix {
    display: inline-block; }

html[xmlns] .clearfix {
    display: block; }

* html .clearfix {
    height: 1%; }