/*-----------------------------------------------------------------------------
[client] Screen Stylesheet

version:   1.0
date:      01/03/07
author:    [your name]
email:     [you at domain dot com]

website:   [your domain]

version history: [location of file]
-----------------------------------------------------------------------------*/


/* Import other stylesheets
-----------------------------------------------------------------------------*/

/* @import url("otherstylesheet.css"); */


/* Remove margin, padding and border from everything
-----------------------------------------------------------------------------*/

* 
	{
	margin: 0;
	padding: 0;
	border: 0;
}

/* Styles for layout
-----------------------------------------------------------------------------*/

.clear
	{
	clear:both;
}



.right
	{
	float: right;
}



.left
	{
	float: left;
}

/* Set up the document
-----------------------------------------------------------------------------*/

body
	{
	color: #222;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	line-height: 1.4;
	background-color: #d8d8d8;
	background-image: url(../img/graphics/bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}



#wrapper
	{
	width: 800px; /* Set page width here - you can also use percentage */
	text-align:left;
	margin:auto;
	background-color:#fff;
	position:relative;
	margin-top: 50px;
	padding: 10px 0;
}



#content {
	margin: 0 10px;
}

a {color: #C60; text-decoration:none;}
a:hover {color: #C60;  text-decoration:underline;}




/* Typography
-----------------------------------------------------------------------------*/

h1, h2, h3, h4, h5 {
	font-family:"Century Gothic", Avenir, AvantGarde, Futura, sans-serif;
	line-height: 1.2;
	margin-bottom: 0.5em;
}
h1 small, h2 small, h3 small, h4 small {font-weight: normal;}

h1
	{
	font-size: 3.2em; /* Equivalent to 22pt */
	color: #25364b;	
}

h1 small {font-size: 1em;}
	
h2
	{
	font-size: 2em; /* Equivalent to 20pt */
	margin: 2em 0 0.5em 0;
}
	
h3
	{
	font-size: 1.8em; /* Equivalent to 18pt */
	color: #444;
	margin-bottom: 0.5em;
	margin-top: 1.5em;
}
	
h4
	{
	font-size: 1.6em; /* Equivalent to 18pt */
}
	
h5
	{
	font-size: 1.2em; /* Equivalent to 12pt */
	margin: 1em 0 0 0;
	text-transform:uppercase;
	color: #25364b;	
}
	
ul, ol, dl
	{
	list-style: none;
	font-size: 1.2em; /* Equivalent to 12pt */
}

p {
	font-size:1.2em;
	color: #333;
	margin-bottom: 1.2em;
}

#text ul {
	margin-bottom: 1.2em;
	list-style:outside;
	color: #333;
	padding-left: 20px;
}

#text ul li {
	margin-bottom: 0.3em;
}





li, dd, dt
	{
	font-size: inherit; /* Equivalent to 12pt */	
}

/* Header
-----------------------------------------------------------------------------*/

.logo {
	width: 100px;
	position:absolute;
	clear:none;
	top: -40px;
	padding-left: 20px;
}
.birf {
	width: 600px;
	position:absolute;
	clear:none;
	top: -30px;
	right: 0;
	color: #CCCCCC;
	text-align: right;
	font-size:1.2em;
}

.birf a { color: #ccc;}
.birf a:hover {color:#fff;}
.birf img {
	border: 1px solid #ccc;
	margin: 1px 4px 0 14px;
}

.large_img {
	height: 215px;
	background:url(../img/headers/volt2.jpg) no-repeat;
}
.large_img blockquote {
	font-family:"Century Gothic", Avenir, AvantGarde, Futura, sans-serif;
	display: block;
	float: LEFT;
	width: 280px;
	color: #fff;
	font-size: 16px;
	margin: 80px 0 0 25px;
	line-height: 1.1;
}

/* Footer
-----------------------------------------------------------------------------*/

.footer {
	background: url(../img/graphics/blue_toning.png) repeat-x;
	padding: 10px 20px;
	text-align: center;
}
.footer p {
	color: #fff;
	margin-bottom:0;
	font-size: 11px;
}

.footer a, .footer a:hover { color: #fff;}


/* Navigation
-----------------------------------------------------------------------------*/
#nav {
	border-top: 1px solid #455362;
	width: 780px;
	background: url(../img/graphics/blue_toning.png) repeat-x;
	
}

#nav li {
	float:left;
	width: auto;
}
#nav li a {
	font-family:"Century Gothic", Avenir, AvantGarde, Futura, sans-serif;
	display: block;
	width: auto;
	background: url(../img/graphics/blue_toning.png) repeat-x;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	text-transform:uppercase;
	color: #DFE2E5;
	padding: 4px 10px;
}
 

#nav li a:hover {
	background-image: none;
	color: #FFF;
	background-color:#455362;
}

table.pris {font-size: 1.2em; 
}

table.pris td {padding: 2px; border-top: 1px solid #ccc; }

table.bestall td {padding: 2px;font-size: 1.2em; }

input#skicka, input.skicka {font-size: 1em; padding: 3px 15px; }

table.bestall input, table.bestall textarea, table.bestall select {font: inherit; padding: 2px; border: 1px solid #ccc; width: 300px;}
.pris input {font: inherit; padding: 2px; border: 1px solid #ccc;}

.odd td { background-color:#eee;}


/* undernavigering
-----------------------------------------------------------------------------*/
 ul#subnav  {
	border-top: 1px solid #ccc;
	list-style:none;
	margin:45px 0;
	padding: 0;
}
 ul#subnav ul {
	margin-bottom: 0;
	padding: 0;
}

ul#subnav li {list-style:none; margin:0;}

ul#subnav li.login a {
	padding-left: 25px;
	background: #ecc url(../img/16-security-lock.png) no-repeat 3px 4px;
}

ul#subnav li.logout a {
	padding-left: 25px;
	background: #ecc url(../img/16-security-lock-open.png) no-repeat 3px 4px;
}


ul#subnav li a {
	font-family:"Century Gothic", Avenir, AvantGarde, Futura, sans-serif;
	display: block;
	text-decoration: none;
	font-size: 12px;
	text-transform:uppercase;
	color: #333;
	padding: 2px 5px;
	border-bottom: 1px solid #ccc;
	background-color: #eee; 
}
 ul#subnav li li a {text-transform:none;}

ul#subnav li.active a {color:#25364b; font-weight: bold;}

ul#subnav li.active li a {color:#4b4b4b; font-weight: normal;}

ul#subnav li a:hover, ul#subnav li.active li a:hover {	color: #FFF;
	background-color:#455362;}


p.partners {font-family:"Century Gothic", Avenir, AvantGarde, Futura, sans-serif;
	font-size: 12px;
	text-transform:uppercase;
	color: #888;
	padding: 1px 5px;
	border-top: 1px solid #eee; margin-bottom: 5px;}
	
img.partners {margin: 0 0 10px 5px;}

.large {font-family:"Century Gothic", Avenir, AvantGarde, Futura, sans-serif;
color: #666; font-size:1.5em;}


/* Footer
-----------------------------------------------------------------------------*/



/* Homepage
-----------------------------------------------------------------------------*/



/* Medarbetare
-----------------------------------------------------------------------------*/


/* Columns
-----------------------------------------------------------------------------*/

#text {
	margin: 40px 0 40px 20px;
}

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8 {float:left;margin-right: 25px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 80px;}
.span-2  { width: 185px;}

.span-2_border  {
	width: 175px;
	margin-right: 15px;
	padding-left:9px;
	border-left: 1px solid #ccc;
	float:left;
}



.span-3  {
	width: 255px;
}
.span-4  { width: 395px;}
.span-5  { width: 500px;}
.span-6  { width: 605px;}
.span-7  { width: 710px;}
.span-8, div.span-8 { width: 815px; margin: 0; }



/* Forms
-----------------------------------------------------------------------------*/



input.text
	{
	padding: 3px;
	border: 1px solid #999999;	
}


/* Tables 
-----------------------------------------------------------------------------*/



table
 	
	{ 
  	border-spacing: 0;
	border-collapse: collapse;
}

td 
	
	{
  	text-align: left;
	font-weight: normal;
}


/* Clearfix
-----------------------------------------------------------------------------*/

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */