/* *********** Generell stil för alla sidor *********** */

body {font-family: Arial; font-size: 16px; margin-top: 0px; padding: 0px;} 
body {background-image: url(bgbild.jpg); background-repeat: no-repeat; background-attachment: fixed;}

h1 {font-size: 50px; }
h2 {font-size: 40px; }
h3 {font-size: 30px; color: #007300;}
h4 {font-size: 30px; color: #800000;}
h5 {font-size: 30px; color: #007300;}

#stor {font-size: 20px;}
.kant{border: 1px;}
.justera-h {horisontal-aligne: right;}

/* ***************** TEXTFÄRGER och TEXTSTORLEK ************ */
.rod {color: red;}
.morkrod {color: #800000;}
.lila{color: #FF00FF;}
.bla {color: #0000FF;}
.gron {color: green;}
.mindre {font-size: 80%;}
.minst {font-size: 65%;}
.storre{font-size: 120%;}

/* ******** TABELL anpassningar till HTML5 ********************** */

tr {vertical-align: top;}
.tomspalt {width: 40px;}
.bredd-30 {width: 30px;}
.bredd-40 {width: 40px;}
.bredd {width: 400px;}
.bredd-150 {width: 150px}
.bredd-190 {width: 190px}

.bredd-260 {width: 260px}
.bredd-300 {width: 300px}
.bredd-340 {width: 340px}
.bredd-450 {width: 450px}
.bredd-570 {width: 570px}
.bredd-600 {width: 600px}

#pennan {width: 20px; float: right; }
#pennan a img {border: 0;}
#knapp {width: 50px; float: right; }

/* ****************************** */
#storruta {margin-left: 200px; margin-top: 0px; width: 1100px; background: #ffffff; padding: 20px; z-index: 2;}

#skarv {margin-left: 200px; margin-top: 0px; width: 540px; height: 500%; background: #ffffff; padding: 20px; z-index: 2;}

#kantruta {margin-left: 20px; margin-top: 0px; width: 540px; background: #ffffff; /* float: left;*/ padding: 10px; z-index: 2;}
#helruta {margin-left: 200px; margin-top: 0px; width: 900px; background: #ffffff; /* float: left;*/ padding: 10px; z-index: 2;}
#jatteruta {margin-left: 170px; margin-top: 0px; width: 1100px; background: #ECF0FB;/*#CCD5FF;  float: left;*/ padding-left: 50px; z-index: 2;}


/*slut på textrutan, bildbox (blommor) nästa */
.scrollbox {padding: 10px; height: 290px; width: 300px; border: 1px solid #999999; 
overflow: auto;/* background-color: #F1F1EB;*/}



/* VERTIKAL RULLMENY, EXPANDERAR 1 NIVÅ*/

/* box för rullmenyn */
	.menybox {padding: 10px; height: 90%; width: 150px;border: 
  1px solid #C8D6B2; overflow: auto; background: /*#C8D6B2;*/ #007300; position:fixed;}     /*ÄNDRAT FÄRGEN HÄR*/

/* loggmeny, vill bara ha ett annat utseende och text som inte markeras som länk bara */

.menytext{font-size: 90%; color: #800000;}
.undermeny{font-size: 90%;}
.vittext {color: #FFFFFF;}

.loggcontainer{left; width: 148px; font-size: 110%;
border-top: 1px solid #C8D6B2; border-left: 1px solid #C8D6B2; 
border-right: 1px solid #C8D6B2;}

.loggmeny{margin: 0; padding: 0; list-style-type: none;}
.loggmeny a{display: block; margin: 0; text-decoration: none; 
padding-bottom: 0.5em; padding-left: 5px ; color: #800000;
background: #E6E3DA; border-bottom: 1px solid /*#C8D6B2;*/ #007300;}		/*ÄNDRAT FÄRGEN HÄR*/

.loggmeny a:hover{background: #cce1cb;}

/* Resten */

#vmeny ul {list-style-type: none; 
font-size: 14px;
margin: 0px;
padding: 0px;} 

#vmeny > ul > li {
border-top: 1px solid /*#C8D6B2;*/ #007300;			/*ÄNDRAT FÄRGEN HÄR*/
border-bottom: 2px solid /*#C8D6B2;*/ #007300;
} 	/*ÄNDRAT FÄRGEN HÄR*/

#vmeny li {
background-color: #EFFBE9;
position: relative; }

#vmeny > ul > li > ul {background: #E6E3DA;}

#vmeny li:hover {
background-color: #cce1cb;}

#vmeny a { text-decoration: none;
display: block;
padding-left: 8px;
padding-right: 8px; 
padding-top: 2px;
padding-bottom: 2px;}

#vmeny a:link { color: black;}
#vmeny a:visited { color: black;}
#vmeny a:hover { color: blue;}
#vmeny a:active { color: black;}
#vmeny ul li a#current {backgrond: #000000;}

#vmeny > ul ul {
width: 130px;
display: none;}

#vmeny li:hover > a + ul {
display: block;}



/* ************ HORISONTELL MENY MED DROP DOWN I TVÅ NIVÅER ************************** */

#topruta {margin-left: 200px; margin-top: 0px; width: 1070px; background: #ECF0FB; overflow: auto; padding: 0px; position: fixed;}

#topruta2 {margin-left: 104px; margin-top: 0px; width: 110px; background: #ffffff; overflow: auto; padding: 0px; position: fixed; }

#hmeny ul {list-style-type: none; 
font-size: 14px;
margin: 0px;
padding: 0px;} 

#hmeny > ul > li {
float: left;
margin: 0px;
border: 3px solid #007300;       
border-right: 2px solid #007300;}

#hmeny > ul > li li {
border: 2px solid #007300;}

#hmeny li {
background-color: #EFFBE9;
position: relative; }

#hmeny li:hover {
background-color: #cce1cb;}

#hmeny a { text-decoration: none;
display: block;
padding-left: 8px;
padding-right: 8px; 
padding-top: 2px;
padding-bottom: 2px;}

#hmeny a:link { color: black;}
#hmeny a:visited { color: black;}
#hmeny a:hover { color: blue;}
#hmeny a:active { color: blue;}

#hmeny > ul ul {
position: relative; 
left: 0px; 
top: 0px;
width: 150px;
display: none;}

#hmeny > ul >li > ul {
top: 19px;}

#hmeny > ul >li > ul ul {
left: 148px; 
top: -1px;}

#hmeny li:hover > a + ul {
display: block;}

#lmeny ul {list-style-type: none; 
font-size: 11px;
margin: 0px;
padding: 0px;}

#lmeny > ul > li {
float: left;
margin: 0px;
border: 5px solid #007300;} 

#lmeny li {
background-color: #EFFBE9;
position: relative; }

#lmeny li:hover {
background-color: #cce1cb;}

/* rulla över med musen ruta, se stadgar*/
	
.ruta
{
background-color: #EFFBE9; width: 300px; padding: 12px;
position: absolute; left: 0px; margin-top: 20px; font-size: 12px;
border: 1px solid #000000; display: none; /*z-index: 0;*/
}

.rullaover 
{position: relative; background-color: #cce1cb; z-index: 1;}
.rullaover:hover .ruta {display: block;}



/* ************ mallar *************** */ 
/* <style type="text/css">  </style> */
/* ol { list-style-type: lower-alpha} (kopieras in i style för små bokstäver*/
.gemener {list-style-type: lower-alpha;}
.versaler{list-style-type: higher-alpha;}



/* ************ ruta ovanför *************** */ 

.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

/* ************ bilder på rad *************** */ 

.tvabilderirad {
    float:left;
	width: 48%; 
	margin-right: 1%; 
	margin-bottom: 0.5em;
}

.trebilderirad {
	float: left; 
	width: 30%; 
	margin-right: 1%; 
	margin-bottom: 0.5em;
}

.fyrabilderirad {
	float: left; 
	width: 23%; 
	margin-right: 1%; 
	margin-bottom: 0.5em;
}

.fembilderirad {
	float: left; 
	width: 19%; 
	margin-right: 0.5%; 
	margin-bottom: 0.5em;
}