/* CSS Document */

/* nollställer margin och padding för alla element så att de visas lika i olika webbläsare */
* { 
margin: 0;
padding: 0;
}

/* Formatering av stycke med text på sidan inom paragraph */
p {
	margin: 15px 20px 0px 30px;
	width: 520px;
	line-height: 20px; /* Höjden mellan raderna, ökat för att det ska bli lättare att läsa*/
	word-spacing: .1em;  /* Ökar mellanrummet mellan orden, för att öka läsbarheten.*/
	color: #000;
}

/*Rubrik 1 */
h1 {
	font-size: 14px;
	margin: 20px 20px 0px 30px;
}

/*Rubrik 2 */
h2 {
	font-size: 13px;
	margin: 15px 20px 0px 30px;
}

/* HTML kroppen på hela sidan */
body {
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	color: #333333;
	background: #66cc33;
	height: 100%;
	width: 100%;
}

/* Boxen som är är runt alltihop */	
#container {
	margin-right: auto; /* Centrerar sidan */
	margin-left: auto; /* Centrerar sidan */
	width: 807px;
	background-image: url(../image/container.jpg); /*Lagt in denna bakgrund för att det skall synas riktigt i IE 6.0 */
	background-color: #66cc33; /*bakgrundsfärg grön för att det ska bli grönt under taben som sticker ut från bilden i sidhuvudet. */
	margin-top: 0px;
	}
	
/* Sidhuvud med logotyp */
#header {
	width: 807px; /*Breddare än content, head (meny), sidfot för att det ska stämma med bilden med logotyp, enda läsningen som jag kom på */
	height: 200px;
}

/* För DHTML menyn som ligger under huvudet. */
#head {
	width: 750px;
	height: 23px;
	background-color: #FFFFFF;
	border-top: 1px solid #66cc33;
	border-bottom: 1px solid #66cc33;
}

/* Innehåll mitt på sidan med text och bilder */
#content {
	float: left;
	background-image: url(../image/white.gif); /*Lagt en bild för att det hela tiden ska vara vit bakgrund, för att inte grön färg från container syns */
	background-repeat: repeat;
	width: 600px;
	height: 400px;
	overflow: auto; /* Lagt en scrollbar för att sidan ska se ut som jag vill, fungerar inte att ändra höjd, då blir det fel med bakgrunden vid sidan */
}  

/* Innehåll i content små bilder med text */
div.thumbnail {
	float: left;
	width: 125px;
	margin: 5px 0px 0px 15px;
	line-height: 1.6em;
	}

div span {
		padding-left: 1em; 	/* Jag har använt mig av span på ett inte korrekt sätt, 		*/
		}   				/* eftersom jag inte brukar använda detta. 						*/
							/* <p> fungerade inte i IE6 därför valde jag denna lösning.     */
		
div.thumbnail img{
	margin: 10px 0px 0px 10px;
	border: 1px solid #66cc33;
	}

/* Samma marginaler för alla tabeller på alla sidor */
table{
	margin: 15px 20px 10px 30px;
	}

/*Bilder på gallari-sidan inom galleri inom content */
#bilder_2 {
	width: 530px;
	float: left;
	margin: 15px 20px 0px 25px;
	padding: 5px;
	}
	
#bilder_2 img{
	border: 1px solid #66cc33;
}		

/* Innehåll till höger om content, bilder */ 
#bilder {
	width: 135px;
	height: 386px;
	padding: 7px;
	float: left;
	text-align: center;
	background-image: url(../image/white.gif);
	background-repeat: repeat;
	border-left: 1px solid #66cc33;
	}

/* Vill att dessa bilder i boxen bilder ska få lite mellanrum */
#bilder img {
	margin: 2px;
	border: 1px solid #66cc33;
}		
	
/* Sidfot */	 
#footer {
	clear: both;
	width: 750px;
	height: 30px;
	background-image: url(../image/foot_1.jpg);
	border-top: 1px solid #66cc33;
}

/* Formaterar texten i sidfoten separat för att det ska passa bättre in där */
#footer p {
	font-size: 10px;
	margin: 5px;
	width: 700px;
	text-align: center;
	}

/* Utseende på länkar */
a:link {
	color: #66cc33; text-decoration: none;
}	
a:visited {
	color: #66cc33; text-decoration: none;
}	
a:hover {
	color: #66cc33; text-decoration: underline;
}
#container #content .extra {
	color: #F00;
}