@charset "UTF-8";
/* Detta dokument validerar som CSS3 */

/* ---- För äldre webbläsare som saknar stöd för HTML5 ---- */

html, body, div, header, nav, main, section, aside, footer {
	margin:0;
	padding:0;
}
header, nav, main, section, aside, footer {
	display:block;
}

/* ---- För att texten inte skalas i iPhone ---- */
html {
	-webkit-text-size-adjust:100%;
} 

/* ---- HÄR BÖRJAR CSS FÖR LAYOUT ---- */

body {
	background-color:#F0F1F0; 
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}

#wrapper {
	background-color:#FFF;
	border:1px solid #000;
	box-shadow:2px 8px 15px 5px #CCC;
	max-width:900px;
	margin:0 auto;
	margin-top:20px;
}

figcaption {
	
	font-size:1em;
	font-family:Verdana, Geneva, sans-serif; 
	font-weight:bold;
	text-align:center;
}

figure{
	text-align:center;
}

header{
	border-bottom: solid 2px #65983F;
	padding:5px;
	margin-bottom:5px;
}


.head{
	text-align:center;
    padding:8px;
	border-bottom:solid 2px #65983F;
	font-size:1.5em;
	font-family:Verdana, Geneva, sans-serif; 
	margin-bottom:10px;
}


ul{
	font-size:1.2em;}

p{
	font-size:1.2em;}

/* ----NAVIGERING ----*/

#menuIcon {
	display:none;
}
/* ---- GLOBAL NAVIGERING ---- */
#globalNav {
	background-color:#65983F;
	list-style:none;
	margin:0;
	padding:0.8em;
}
#globalNav li {
	display:inline;
}
#globalNav a {
	text-decoration:none;
	margin-right:0.5em;
	padding:0.8em;
}
#globalNav a:link, #globalNav a:visited {
	color:#FFF;
}
#globalNav a:hover, #globalNav a:active {
	background-color:#FFF;
	color:#000;
}
#globalNav #thisSection {
	background-color:#8FC665;
	color:#FFF;
}
/* ---- LOKAL NAVIGERING ----*/

#localNav {
	float:left;
	list-style:none;
	width:16.66666666666667%; /* 150/900 16.66666666666667% */
	margin:0;
	padding:0;
	margin-top:4em;
} 
#localNav li {
	display:block;
	padding:1em;
}
#localNav a {
	text-decoration:none;
	font-size:1.2em;
	
}
#localNav a:link, #localNav a:visited {
	color:#000;
}
#localNav a:hover, #localNav a:active {
	color:#FFF;
	background-color:#8FC665;
	
}
#localNav #thisPage:before {
	content:"> ";
}

main {
	margin-left:16.66666666666667%; /* 150/900  16.66666666666667% */
} 

#content {
	float:left;
	width:73.33333333333333%;/*66.66666666666667%; /* 500/(900-150) = 500/750 (66.66666666666667%) */
} 
#content section {
	background-color:#FFF;
	margin-top:20px;
	margin-bottom:40px;
	margin-right:10px;
	padding:8px;
}
#content .color{
	background-color:#98CB72;
	margin-left:40px;
	min-height:400px;
}
#sideNotes {
	float:right;
	width:26.66666666666667%; /* 200/750 (250/750) */
} 

#sideNotes aside {
	background-color:#7FBE4F;
	color:#FFF;
	margin-top:20px;
	margin:16px;
	padding:5px;
	box-shadow:3px 3px 2px #666;
}
.tips{
	font-size:2em;
}
#sideNotes .noColor{
	background-color:#FFF;
}
footer {
	background-color:#65983F;
	text-align:center;
	padding:10px;
	clear:both;
}



img{max-width:100%;}
#content section .hidden{display:none;}


/*---------- MEDIA QUERIES ----------*/
@media screen and (max-width:880px) {
	#wrapper {margin-top:0;}
}
	
	
	
@media screen and (max-width:780px) {

	
	#localNav {
		float:none; 
		width:auto; 
		padding:0.8em; 
		margin-top:0.5em;
		}
	#localNav li {
		display:inline; 
		padding:0;
		}
	#localNav a {
		font-size:1.2em;  
		margin-right:0.4em; 
		padding:0.3em;
		}
	#localNav a:link, #localNav a:visited {
		color:#000;
		}
	#localNav a:hover, #localNav a:active {
		color:#FFF; 
		font-weight:normal;
		}
	#localNav #thisPage {
		color:#FFF;
		background-color:#8FC665;
		}
	#localNav #thisPage:before {
		content:"";
		}
	
	main {
		margin-left:0;
	}
	#content section {
		margin-left:10px;
		}
}
@media screen and (max-width:680px) {
	.head{
		font-size:1.2em;}
			#content {
				float:none; 
			width:auto;
			}
			
			#sideNotes {
				display:none;
			}
			#content section .hidden{
				display:block;
				}
			}
			
		
@media screen and (max-width:540px) {
	#globalNav {padding:0;}
	#globalNav li {display:block;}
	#globalNav a {margin:0; padding:0.3em; font-size:1.2em; border-bottom:1px solid #65983F; display:block;}
	#globalNav a:link, #globalnav a:visited {background-color:#65983F; color:#FFF;}
	#globalNav a:hover, #globalNav a:active {background-color:#8FC665; color:#000;}
	
	#localNav {margin:0; padding:0;}
	#localNav li {display:block;}
	#localNav a {margin:0 1em; padding:0.3em; font-size:1.1em; border-bottom:1px solid #65983F; display:block;}
	#localNav #thisPage:before {content:"> ";}
	
	#menuIcon {display:block; text-align:left; margin:0; padding:0.3em;}
	#navMenu {display:none;}
	#navMenu:target {display:block;}
	.head{ font-size:1em;}
	main h1 {margin-top:0;}
}