@charset "utf-8";

/* CSS Document */
* {
	margin:0;
	padding:0;
}

html {font-size:125%;}
body {font-size:50%;}


/* ========================================================================= 
     Generella formateringar
   ========================================================================= */

/* Sidan generellt */
body {
	background: #CCCCCC; /* grå bakgrund på sidan */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

/* Alla rubriker skall ha font-family av typ serif, och skilja sig från p-taggar vad gäller färg och storlek */
h1,h2,h3,h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	xcolor: #993302; /* Faluröd färg på text */
	margin: 10px 0px; /* vill ha lite luft ovanför/under rubriktexten */
}

/* Fontstorlek rubrik nivå 1 */
h1 {
	font-size: 1.5em;
}

/* ========================================================================= 
     Formateringar av boxarna på sidan
   ========================================================================= */

/* "Pappret" */
#layout {
	width:800px; /* 800 px bred sida */
	margin:auto; /* detta gör att webbsidan centreras */
	margin-top:30px; /* 30px luft i ovankanten */
	background: #FFFFFF; /* Vit bakgrund */
}

/* Header bild + texten i huvudet */
#header {
	width: 800px;
	height: 150px;
	background-image: url("../img/header_gul.jpg");
	border: 1px solid black;
	border-bottom: 0px solid black;
}

/* Egenskaper för texten i huvudet */
#header p {
	/* Vit text, versaler, fetstil */
	font-family: Georgia, "Times New Roman", Times, serif;
	xcolor: #FFFFFF;
	font-size:1.1em; text-transform:uppercase; font-weight:bold; letter-spacing:0.1em; word-spacing:0.2em; padding-left:20px;
	padding-top: 110px;
padding-top: 90px;
}
/* "Rättvik" ska vara i mindre fontstorlek */
#header span.mindre {
	font-size:0.6em; padding-left:10px;
}

/* Egenskaper för menyn */
#meny {
	float:left;
	width: 800px;
	border: 1px solid #000;
	font-size: 0.9em;
	word-spacing:0.5em;
}


/* Egenskaper för innehållsdelen av sidan */
#innehall {
	width: 760px;
	border-right: 1px solid black;
	border-left: 1px solid black;
	min-height: 400px;
	padding: 10px 20px;
}

/* Egenskaper för sidfoten */
#sidfot {
	width: 800px;
	text-align:	center;
	border: 1px solid black;
	font-size: 0.7em;
	padding-top: 5px; /* 5 px luft till boxens överkant */
	padding-bottom: 5px; /* 5 px luft till boxens nederkant */
}

/* class som återställer boxflÖdet */
.clearfloat {
	clear: both;
}


/* ========================================================================= 
     Formateringar av texten i innehållsdelen
   ========================================================================= */

div#vanster {
	width:300px;
	float:left;
}
div#hoger {
	width:460px;
	float:right;
}


/* Texten på förstasidan skiljer sig lite från standard */
p.welcometext {
	padding-top: 20px;		/* Luft ovankant */
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;		/* Centrerad */
	font-size:1.5em;		/* Storlek */
	text-transform:uppercase;	/* Versaler */
	font-weight:bold;		/* Fetstil */
	letter-spacing:0.1em;
	word-spacing:0.2em;		
	padding-left:20px;		/* Luft till vänster */
	xcolor: #993302;			/* Falurod */
}

.centrera {
	padding: 10px;
	text-align:center;
}

/* Listan på sortimentsidan ska ha eget utseende */
.sortimentlista {
	xcolor: #993302;
	line-height:1.5em;
	margin-top:5px;
}
ul.sortimentlista a {
        xcolor: #993302;
	text-decoration:none;
}
ul.sortimentlista a:visited {
	text-decoration:none;
}
p.luftovan {
	margin-top:20px;
}


/* Bilden till vänster i innehållet skall centreras och ha luft omkring sig */
#vanster img.centrera {
	padding: 10px;
	padding-top: 50px;
	text-align:center;
}

/* ========================================================================= 
     Formatering av menyn på sidorna
   ========================================================================= */

/* Grunden är hämtad för webdesignskolan.se men är modifierade för att ha
   undermenyer */
/* Menyn ska vara vit med faluröd text, när man hovrar ska den inverteras (faluröd med vit text */

div#meny {
        float:left;
        width: 800px;
        border: 1px solid #000;
        font-size: 0.8em;
        word-spacing:0.5em;
}

* html div#meny ul {
float: left;
border-left:1px solid #000;
margin-left:15px;
}
* html div#meny ul li ul {
border-top:1px solid #fff;
border-left:0px;
}

div#meny ul {
	margin:0 0 0 30px;
	border: 1px solid #fff;
	list-style-type: none;
}
div#meny li {
	float:left;
	position:relative;
	border-right:1px solid #000;
}
div#meny li:first-child { /* Första elementet ska även ha en ram till vänster */
	border-left:1px solid #000;
}
div#meny li:hover {
	background-color: #000000;
	color: #FFFFFF;
}
div#meny ul img { /* Om det finns en undermeny, positionera nedåt-pilen */
	padding-left:5px;
	border:0;
	vertical-align:middle;
}
/* Nivå 2 i menyn */
div#meny ul li ul {
	margin:0;
	position:absolute;
	width:11em;
}
div#meny ul li:hover ul {
	display:block;
	background-color: #fff;
}
div#meny ul li ul {
	display:none;
}
div#meny ul li ul li {
	width:130%;
	border-left:1px solid #000;
	border-bottom:1px solid #DDDDDD;
	border-right:1px solid #000;
}
div#meny ul li ul li:first-child {
	border-top:1px solid #000;
}
div#meny ul li ul li:last-child {
	border-bottom:1px solid #000;
}

/* Formatering av länkarna i menyn */
div#meny a {
	display:block;
	padding:0 16px; 
	text-decoration: none;
	color: #000000;
	background: #ffffff;
	font-size: 1.2em;
}
div#meny a:hover {
	background-color: #000000;
	color: #FFFFFF;
}