html, body
{
  padding:0;
  margin:0;
}

body.mobile
{
  background:#003399;
  background-image:url('/background/bla_noter_136x82.png');
}

.mobile .nav label.togglemenu
{
  color:#ffffff;
}

	.mobile .darkgrey
	{
      background-image:url('/background/background_40proc.png') !important;
	}


	ul li ul li span.bla_0099ff
       {
	  color:#0099ff;
	}

	ul li ul li span.ff99ff
       {
	  color:#ff99ff;
	}
	
	ul li ul li.ff00ff
       {
	  color:#ff00ff;
	}


.mobile	ul li label span.big
{
  font-size:1.1em;
  color:#ffffff; /* #ffe5d9 FFE5D9 (#F7E9E1) */
  font:bold;
}



.nav input,
#togglemenu 
{
  position:absolute;
  left:-9999px;
  display:none;
}



.nav {width:100%; max-width:100%; margin:0 auto 0 auto;}  /* var 1400px */ /* huvudmeny och mobilmeny */
/*
@media only screen and (max-width: 700px)
{
.nav {width:80%; max-width:80%; margin:0 auto 0 10px;}
}
*/


.nav #closemenu {display:none; position:fixed; top:0; left:0; height:100%; width:100%; z-index:80;}

.nav #val1:checked ~ ul > li:nth-of-type(1) .closetop, 
.nav #val2:checked ~ ul > li:nth-of-type(2) .closetop, 
.nav #val3:checked ~ ul > li:nth-of-type(3) .closetop, 
.nav #val4:checked ~ ul > li:nth-of-type(4) .closetop,
.nav #val5:checked ~ ul > li:nth-of-type(5) .closetop, 
.nav #val6:checked ~ ul > li:nth-of-type(6) .closetop, 
.nav #val7:checked ~ ul > li:nth-of-type(7) .closetop, 
.nav #val1:checked ~ #closemenu, 
.nav #val2:checked ~ #closemenu, 
.nav #val3:checked ~ #closemenu, 
.nav #val4:checked ~ #closemenu, 
.nav #val5:checked ~ #closemenu, 
.nav #val6:checked ~ #closemenu, 
.nav #val7:checked ~ #closemenu {display:block;}

/* detta far inte vara inuti media-dator, da kan inte undermeny i mobil oppnas */
.nav #val1:checked ~ ul > li:nth-of-type(1) > div,
.nav #val2:checked ~ ul > li:nth-of-type(2) > div, 
.nav #val3:checked ~ ul > li:nth-of-type(3) > div, 
.nav #val4:checked ~ ul > li:nth-of-type(4) > div,
.nav #val5:checked ~ ul > li:nth-of-type(5) > div, 
.nav #val3:checked ~ ul > li:nth-of-type(3) > div, 
.nav #val6:checked ~ ul > li:nth-of-type(6) > div,
.nav #val7:checked ~ ul > li:nth-of-type(7) > div 
{
  max-height:700px; /* 500px */
  z-index:1;
}


/* mobil finns .nav > ul , detta galler huvudmeny */
.nav ul {position:relative; margin:0; padding:0; list-style:none; z-index:100;}


.nav ul li label.openmenu 
{
background:#00ff00 !important; 
transition:0.25s; 
-webkit-transition:0.25s;
}

/* bada detta ar hamburger bara huvudmeny verkar ***********verkningslos, aven text-align:right; funkar kanske bara nar mobilmeny label visas ovanfor huvudmeny */
.nav ul li label.opentop {background:rgba(217,210,204,0)
 transition:0.5s;
 -webkit-transition:0.5s;
color:#ffffff;
}

/* bada *****huvudmeny width:50%; medfor att man inte kan stanga undermenyn, galler BARA huvudmeny */
.nav ul li label.closetop {width:100%; padding:0; height:175px; margin-top:-175px; display:none;}


.nav ul li label a {background:rgba(217,210,204,0);  /* 217 */
 transition:0.5s; 
 -webkit-transition:0.5s; 
color:#ffffff !important;  /* ej valda lankar i DATOR och MOBIL meny */
}

.nav ul li label a:hover {background:rgba(217,210,204,0); 
 transition:0.5s; 
 -webkit-transition:0.5s; 
color:#0000ff !important; /* hover over ffffff lank blir 0000ff */
}

/* .nav ul ul li a lyftes i media-delar bode DATOR och MOBIL */
.nav ul ul li a img {display:block; margin:0 auto; border:0;}

/* om detta ar inom media-dator sa kan man inte stanga mobilundermeny */
.nav ul > li > div {display:block; position:absolute; left:0; max-height:0; width:100%; overflow:hidden; background:rgba(0,0,0,0.7) !important; z-index:0;
transition:0.25s; 
-webkit-transition:0.25s;
}


/*****************slut bade DATOR MOBIL */



/***************start bara mobil ***********************************************************/

  .nav label 
   {
    display:block;
	cursor:pointer;
  }
  
  .nav ul li label 
   {
    height:auto;
	border-radius:0;
  }
  
  .nav ul li label 
    {
	 display:block;
	 font:normal 1.5em/1.5em verdana, sans-serif;
     color:#ffffff !important;
	 padding:.5em 1em .5em 1em;
	 cursor:pointer;
	 position:relative;
	 height:1.5em;
  }

  .nav label.togglemenu 
    {
	float:left;
	display:block;
	cursor:pointer;
	position:relative;
	z-index:100;
	font:normal 1.5em/1.5em verdana, arial, sans-serif;
	margin:.5em 1em .5em 1em;
  } /* #ccdaff #F7E9E1 toggle MENY och hamburger, samma farg */


  /* dator finns .nav ul */
  .nav > ul {max-height:0; overflow:hidden; width:100%; background:#555555; padding:0; clear:both; /* bakgrund mobilmeny */
 transition:0.5s;
 -webkit-transition:0.5s;
}


/* hamburger mobilmeny ***************left-right ger reaktion, 10px syns i mobilmeny, colorandring marks inte */
.nav ul li label.opentop {color:#ffffff; border-top:1px solid #ffffff; text-align:left;}

.nav ul li label.closetop 
{
  height:3em;
  margin-top:-3em;
}

.nav > ul > li {width:100%; max-width:100%; text-align:center;}
.nav ul > li > div {position:static; padding:0;}
.nav ul > li > div ul {width:100%; max-width:100%; display:block; padding:0 0 0 1.4em; margin:0; background: #333333;} /* vanstermarginal mobil undermeny */
.nav #togglemenu:checked ~ ul {max-height:1024px;} /* 700px */

.nav #val1:checked ~ ul > li:nth-of-type(1) > label.opentop, 
.nav #val2:checked ~ ul > li:nth-of-type(2) > label.opentop, 
.nav #val3:checked ~ ul > li:nth-of-type(3) > label.opentop, 
.nav #val4:checked ~ ul > li:nth-of-type(4) > label.opentop, 
.nav #val5:checked ~ ul > li:nth-of-type(5) > label.opentop, 
.nav #val6:checked ~ ul > li:nth-of-type(6) > label.opentop, 
.nav #val7:checked ~ ul > li:nth-of-type(7) > label.opentop 
{
  background: #333333;
}

.nav ul > li:nth-of-type(1) > div, 
.nav ul > li:nth-of-type(2) > div, 
.nav ul > li:nth-of-type(3) > div, 
.nav ul > li:nth-of-type(4) > div, 
.nav ul > li:nth-of-type(5) > div, 
.nav ul > li:nth-of-type(6) > div, 
.nav ul > li:nth-of-type(7) > div {
transition:0.4s;
-webkit-transition:0.4s;
}

.nav #val1:checked ~ ul > li:nth-of-type(1) > div, 
.nav #val2:checked ~ ul > li:nth-of-type(2) > div, 
.nav #val3:checked ~ ul > li:nth-of-type(3) > div, 
.nav #val4:checked ~ ul > li:nth-of-type(4) > div, 
.nav #val5:checked ~ ul > li:nth-of-type(5) > div, 
.nav #val6:checked ~ ul > li:nth-of-type(6) > div, 
.nav #val7:checked ~ ul > li:nth-of-type(7) > div 
{
  box-shadow:none;
  transition:1.5s;
 -webkit-transition:1.5s;
}

.nav ul ul li {border:0; padding:0; text-align:left;}
.nav ul ul li:last-child {border:0;}
.nav ul ul li a {display:block; font:normal 1.4em/1.4em verdana, arial, sans-serif; padding:.4em 1em .4em 1em; color:#ffffff !important; text-decoration:none;} /* lankarnas farg undermeny BARA mobil undermeny */
.nav ul ul li a {background:#555555 !important; border-top:1px solid #cccccc;} /* color:#fff farg undermeny BARA mobil */
.nav ul ul li a:hover {background:#333333 !important; color:#0000ff !important;} /* BARA mobilundermeny */


/*********************stop bara mobil***********/