@charset "utf-8";
/* CSS Document */

body{background: url(img/bgfade.jpg) repeat-x #000000; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
#outer-container{ background:url(img/contbg.png) no-repeat right top;
width:1000px;
margin:30px auto;}
#header{
height:79px;}
h1{
color:#FFFFFF;}
a {
color:#FFFF00;
text-decoration:none;}
a:hover{
color:#FFFFFF;}
#sidebar{
position:absolute;
right:0;
width:220px;
float:right;
}


#product-links{
width:300px;
position:relative;
top:10px;
left:-50px;}

#secondary-links ul li{
float:left; list-style:none;
position:relative;
left:-40px;}

#secondary-links ul li a{
display:block;
float:left;
height:40px;


background-image:url(img/meny/productmenu-sprite.png);
text-indent:-9999px;}

#secondary-links ul li a.glasogon{
background-position: 0 0;
width:90px;}
#secondary-links ul li a.klockor{
background-position: -100px -15px;
width:100px;}

#secondary-links ul li a.glasogon-active{
background-position: 0 -15px;
width:90px;}
#secondary-links ul li a.klockor-active{
background-position: -100px 0;
width:100px;}

#product-links ul li{
float:left;
list-style:none;
padding:10px;}

#product-links ul li a{
color:#FFFFFF;
text-decoration:none;
font-size:10px;}

#product-links ul li a:hover{
color: #FFFF00;
text-decoration:none;
font-size:10px;}
#product-links ul li a.klockor-active{
color:#FFFF00}
#product-links ul li a.glasogon-active{
color:#FFFF00}

#top-nav{
width:757px;
z-index:10;}

#top-nav ul li{
float:left;list-style:none;
position:relative;
left:-40px;}

#top-nav ul li a{
display:block;
float:left;
height:18px;
width: 657px;
background-image:url(img/meny/menu.jpg); text-indent:-9999px;}

#top-nav ul li a.start{
background-position: 0 0;
width:70px;
height:18px;}

#top-nav ul li a.produkter{
background-position: -80px 0;
width:100px;
height:18px;}
#top-nav ul li a.foretaget{
background-position: -200px 0;
width:100px;
height:18px;}

#top-nav ul li a.kontakt{
background-position: -320px 0;
width:100px;
height:18px;}

#top-nav ul li a.sammarbeten{
background-position: -420px 0;
width:130px;
height:18px;}
#top-nav ul li a.webshop{
background-position: -555px 0;
width:90px;
height:18px;}

#top-nav ul li a.start:hover{
background-position: 0 -18px;
width:70px;
height:18px;}

#top-nav ul li a.produkter:hover{
background-position: -80px -18px;
width:100px;height:18px;}
#top-nav ul li a.foretaget:hover{
background-position: -200px -18px;
width:100px;height:18px;}

#top-nav ul li a.kontakt:hover{
background-position: -320px -18px;
width:100px;height:18px;}

#top-nav ul li a.sammarbeten:hover{
background-position: -420px -18px;
width:130px;height:18px;}
#top-nav ul li a.webshop:hover{
background-position: -555px -18px;
width:90px;height:18px;}

#top-nav ul li a.webshop:hover #top-nav ul li a.webshop:focus {
background-position: -540px -18px;
width:90px;height:18px;}


#top-nav ul li a.start:hover #top-nav ul li a.start:focus{
background-position: 0 -18px;
width:70px;height:18px;}

#top-nav ul li a.produkter:hover #top-nav ul li a.produkter:focus{
background-position: -80px -18px;
width:100px;height:18px;}
#top-nav ul li a.foretaget:hover #top-nav ul li a.foretaget:focus{
background-position: -200px -18px;
width:100px;height:18px;}

#top-nav ul li a.kontakt:hover #top-nav ul li a.kontakt:focus{
background-position: -320px -18px;
width:100px;height:18px;}

#top-nav ul li a.sammarbeten:hover #top-nav ul li a.sammarbeten:focus{
background-position: -555px -18px;
width:130px;height:18px;}
.startactive{
background-position: 0 -18px;
width:70px;height:18px;}

a{
outline:none;}

.accordion2{
font-family:Arial, Helvetica, sans-serif;
background: url(img/sidebar-fade.png);
display:block;
color:#FFFFFF;
font-size:12px;
height:700px;
position:absolute;
top:-45px;
right:0;
width:240px;}
.accordion2 h3{
background:url(img/news.png);
height:40px;
cursor: pointer;}

.accordion2 p{
padding-left:5px;}

.accordion2 a{}
.accordion2 h3.active {}

.hidden{
display:none;
visibility:hidden;}

#footer{
text-align:center;
margin:0 auto;
width:500px;
_height: 400px;
color: #ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;}

#footer ul {
list-style:none;
text-align:left;
float:left;
color:#333333;}

#footer a{
color:#333333;}
#footer a:hover{
color:#666666}

#content {
width:800px;
min-height:600px;}

#side-menu{
width:200px;
height:400px;
background: transparent;
float:left;
}

		.boxgrid{ 
				width: 200px; 
				height: 400px; 
				float:left; 
				background: transparent;  
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					bottom: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif;
					
				}
			
			.boxcaption{ 
				float: left; 
				position: absolute; 

				height: 44px; 
				width: 100%; 
 			}
 				.captionfull .boxcaption {
 					bottom: 0;
 					left: 0;
 				}
 				.caption .boxcaption {
 					bottom: 0;
 					left: 0;}
				
#profiles{
position:relative;
left:40px;}

#profileinfo{
height:240px;}

#qmark{
background: transparent url(img/qmark.png) no-repeat;
z-index:1000000;
height:350px;}

#longtext{
width:600px;}

#second-image{
height:350px;
width:180px;
float:right;}

ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 0px;
	width:860px;
}
ul.thumb li {
	margin: 0; 
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 100px;
	height: 100px;
	margin-bottom:20px;
}
ul.thumb li img {
	width: 100px; height: 100px; /* Set the small thumbnail size */
	border: 0px solid #ddd;
	padding: 0px;
	background: transparent;
	position: absolute;
	left: 0; top: 0;
}
ul.thumb li img.hover {
	background:url(img/thumb_bg.png) no-repeat center center;
	border: none; 
}

ul.thumb li.textbox{
font-size:10px;
width:160px;
margin-right:5px;
padding:5px;
height:90px;
background:url(img/bg-transparent.png);}

.green{
background:url(img/green.jpg) no-repeat;
width:10px;
height:100px;
float:left;}


.turkos{
background:url(img/turkos.jpg) no-repeat;
width:10px;
height:100px;
float:left;}

.pink{
background:url(img/pink.jpg) no-repeat;
width:10px;
height:100px;
float:left;}

.black{
background: #000000;
width:10px;
height:100px;
float:left;}

.purple{
background:#5a1e7d;
width:10px;
height:100px;
float:left;}

	div#controls{
	text-align:center;
	width:90px;
		min-height:13px;
		_height:13px;
		text-indent:-9999px;
		margin: auto;
		position:relative;
		top:-80px; 
		}
	div#controls li{
 
	
		float:left;
		list-style:none;
		min-height:20px;
		width:13px;
		_height:20px;

		}
	div#controls li a{	background:url(img/dot.png) no-repeat;
		float:left;
		_height:10px;
		min-height:10px;
		color:#555;
		width:10px;
		text-decoration:none;
		}
	div#controls li.current a{
	background:url(img/dothover.png) no-repeat;
		color:#fff;
		_height:10px;
		min-height:10px;
		width:10px;
		}
	div#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none; 		_height:10px;
		min-height:10px;
		width:10px;}