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

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #415362;
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 10px;
}

/* ~~ Element-/taggväljare ~~ */
ul, ol, dl { /* På grund av skillnader mellan webbläsare är det bäst att nollställa utfyllnad (padding) och marginal (margin) i listor. För att få det konsekvent kan du ange värdena du vill ha antingen här eller i listobjekten (LI, DT, DD) som de innehåller. Kom ihåg att det du gör här överlappar till navigeringslistan om du inte skriver en mer specifik väljare. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* om du tar bort toppmarginalen kringgår du ett problem där marginaler kan försvinna från sin innehålls-div. Bottenmarginalen som finns kvar håller den undan från efterföljande element. */
	padding-right: 15px;
	padding-left: 15px; /* om du lägger till utfyllnaden på sidorna av elementen i divarna, i stället för i divarna själva, slipper du all rutmodellsmatematik. Du kan även som alternativ metod använda en kapslad div med utfyllnad på sidorna. */
}
a img { /* den här väljaren tar bort den blå kanten som visas i vissa webbläsare runt en bild när den omges av en länk */
	border: none;
}

/* ~~ Formateringen av webbplatsens länkar måste förbli i den här ordningen – inklusive gruppen av väljare som skapar hover-effekten. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* såvida du inte formaterar dina länkar så att de ser extremt unika ut, är det bäst att använda understrykning för snabb visuell igenkänning */
}
a:visited {
	color: #000;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* den här gruppen väljare ger den som använder tangentbord samma hover-upplevelse som den som använder mus. */
	text-decoration: none;
}

/* ~~den här behållaren med fast bredd omger de andra divarna~~ */
.container {
	width: 900px;
	background: #FFF;
	margin: 0 auto; /* det automatiska värdet på sidorna, tillsammans med bredden, centrerar layouten */
}

/* ~~ du anger inte någon bredd för sidhuvudet. Det sträcker sig över layoutens hela bredd. Det innehåller en bildplatshållare som ska ersättas med din egen länkade logotyp ~~ */
.header {
	background: #ADB96E;
}

.sidebar1 {
	float: left;
	width: 180px;
	background: #628aaa;
	padding: 0px 0;
	height:620px;
}
.content {
	height:600px;
	font-size: 12px;
    background: #ddd;
	padding: 10px 0;
	width: 720px;
	float: left;
}

/* ~~ Den här grupperade väljaren anger listorna i innehållsområdet ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* den här utfyllnaden (padding) speglar utfyllnaden åt höger i rubrikerna och styckelinjen ovan. Utfyllnad placerades längst ned för att få mellanrum mellan andra element i listorna och till vänster för att skapa indraget. Detta kan du anpassa efter egna önskemål. */
}

/* ~~ Navigeringslistformaten (kan tas bort om du väljer att använda en fördefinierad flytande popup-meny som Spry) ~~ */
ul.nav {
	list-style: none; /* det här tar bort listmarkeringen */
	border-top: 1px solid #666; /* det här skapar den övre kanten för länkarna – alla andra läggs in med en nedre kant på LI */
	margin-bottom: 15px; /* det här skapar utrymmet mellan navigeringen i innehållet nedan */
}
ul.nav li {
	border-bottom: 1px solid #666; /* det här skapar knappavståndet */
	font-weight: bold;
}
ul.nav a, ul.nav a:visited { /* genom att gruppera de här väljarna ser du till att länkarna behåller sitt knapputseende även sedan de besökts */
	padding: 5px 5px 5px 15px;
	display: block; /* det här anger länkblocksegenskaperna och får det att fylla hela den LI som det ingår i. Detta får hela området att reagera på ett musklick. */
	width: 160px;  /*den här bredden gör att hela knappen går att klicka på i IE6. Om du inte behöver ha stöd för IE6 kan den tas bort. Beräkna lämplig bredd genom att subtrahera utfyllnaden på den här länken från bredden på sidospaltsbehållaren. */
	text-decoration: none;
	background: #628aaa;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* det här ändrar bakgrunds- och textfärgen för både mus- och tangentbordsanvändare */
	background: #628aaa;
	color: #FFF;
}

/* ~~ Sidfoten ~~ */
.footer {
	padding: 10px 0;
	background: #CCC49F;
	position: relative;/* det här aktiverar IE6 hasLayout att rensa ordentligt */
	clear: both; /* den här rensningsegenskapen tvingar behållaren att läsa av var kolumnerna slutar och innesluta dem */
}

/* ~~ olika float/clear-klasser ~~ */
.fltrt {  /* den här klassen kan du använda för att låta ett element flyta åt höger på sidan. Det flytande elementet måste komma före elementet som det ska ligga bredvid på sidan. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* den här klassen kan du använda för att låta ett element flyta åt vänster på sidan. Det flytande elementet måste komma före elementet som det ska ligga bredvid på sidan. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* den här klassen kan du placera på en <br /> eller tom div som sista element efter den sista flytande diven (i behållaren, #container) om sidfoten tas bort ur behållaren */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}