@charset "utf-8";
/* Allt som har med färgschema och  bakgrundsbilder att göra ligger i en separat css-fil color.css. På så sätt kunde jag enkelt göra olika förslag och visa beställaren. Det är viktigt att få till ett färgschema som går ihop med de presenterade bilderna, särskilt med den genomgående vinjettbilden. 
*/
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* det lär vara en god vana att sätta margin och padding för body till 0 för att anpassa till olika browser defaults */
	padding: 0;
	text-align: center; /* centrerar i IE 5* browsers. Texten vänsterjusteras sedan i #container */
}
h1 {
	font-size: 1.7em;
}
#container {
	width: 980px; /* auto margin (ihop med width) centrerar sidan */
	text-align: left; /* tar över text-align: center i body-elementet. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 
#sidhuvud{
	height: 190px;
	width: 980px;
	text-align: center;
	vertical-align: middle;
} 
#sidhuvud h1 {
	font-size: 2.5em;
	padding: 0;
	margin: 0;
	position: relative; /* för att passa in rubriken i bakgrundsbilden bilden */
	top: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
}
/* ----------------------------- Navigeringsknappar --------------------------------- */
#navbar {
	width: 980px;

} 
#navbar ul {
	list-style: none; /* inga bullets */
	font-size: 1em;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#navbar li {
	line-height: 30px; /* samma som bakgrundsbildens höjd */
	display: inline-block; /* lägger knapparna bredvid varandra, men åstadkommer en lucka mellan dem */
	margin-right: -7px; /* för att stänga luckan mellan knapparna */
}
#navbar li.sist {      /* får egenskaperna i color.css */
}
#navbar li a:visited {
	margin: 0px;
	padding: 0px;
}
#navbar li a:hover {   /* får egenskaperna i color.css */
}
#navbar li a:link, #navbar li a:visited {
	text-decoration: none; /* ingen understrykning */
 	display: inline-block; /* hela knappen visas vid hover */
}
#navbar li a.current, #navbar li a.current:hover, #navbar li a:active {
	cursor: default;       /* ingen pekare av hand-typ */
 	display: inline-block; /* hela knappen visas vid hover */
}
/* ----------------------------- Huvudtexten --------------------------------- */
#huvudtext {
	padding: 10px 30px 0px 30px;
	font-size: .9em;
} 
#huvudtext h1 {
	text-align: left;
	margin-top: 40px;     /* för att komma lagom långt under vinjettbilden */
} 
/* ----------------------------- Vänstertext --------------------------------- */
#vstrtext {
	padding-left: 30px;
	padding-right: 20px;
	font-size: .9em;
	width: 310px;        /* ger plats åt bild på höger sida, behöver ibland modifieras i den aktuella filen */
	float: left;
	line-height: 1.5em;
} 
/* ----------------------------- Högertext --------------------------------- */
#hgrtext {
	padding-left: 30px;
	padding-right: 30px;
	font-size: .9em;
	width: 300px;        /* ger plats åt bild på vänster sida, behöver ibland modifieras i den aktuella filen */
	float: right;
	line-height: 1.5em;
} 
/* ----------------------------- Sidfoten --------------------------------- */
#fot {
	padding: 0 10px 0 30px;
} 
#fot p {
	margin: 0;           /* för säkerhets skull */
	padding: 10px 0;
	font-size: 0.8em;
}
/* ----------------------------- Bilder, bildtexter --------------------------------- */
div.imgvstr {
	float: left;
	width: 360px;        /* behöver ibland modifieras i den aktuella filen */
}
div.imgvstr p {          /* bildtext */
  text-align: left;
  font-size: .85em;
  text-indent: 0;
}
div.imghgr {
	float: right;
	width:590px;         /* behöver ibland modifieras i den aktuella filen */
	margin-right: 30px;
}
div.imghgr p {          /* bildtext */
  text-align: right;
  font-size: .85em;
  text-indent: 0; 
}
/* ----------------------------- Övrigt --------------------------------- */
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#container .imghgr #nytt {
	margin-bottom: 10px;
	width: 480px;
	border: medium solid #03C;
	text-align: left;
	float: right;
	padding-right: 10px;
	padding-left: 10px;
}
#container .imghgr #nytt p {
	text-align: left;
}