@charset "UTF-8";
/* CSS Document */


/* **** GENERAL **** */
body{
	color: #fff;
	background-color: orange;
	font: normal 100% Arial, Helvetica, sans-serif;
}

a{
	color: #FC0;
	}

img, embed, object, video { max-width: 100%;
}

input[type=text], input[type=url], input[type=number], input[type=tel], input[type=email], input[type=date], textarea {
	color: #777;
	width: 65%;
}

input {
	border: 1px solid #888;
	padding: 0.5em;
	font-size: 0.8em;
}

.figure_right { 
	float: right; 
	margin-bottom: 0.5em; 
	margin-left: 2.189%; /* 12px / 548px */ 
	width: 36.494%; /* 200px / 548px */
}

.figure_full { 
	margin-bottom: 0.5em; 
	width: 100%; 
}

#logo{
	width: 180px;
	margin: 0.75em 0;
	}

#top-image{
	width: 260px;
	margin-top: 1em;
	}

h1{
	font-size: 1.7em; /* 24px / 16px (med antaggandet att 100% storlek är 16px i webbläsarna, och storleken på rubriken är 24px i mockup */
	font-family: Arial, Helvetica, sans-serif;							  
	color: #fff;
	margin: 0 0 0.666em 0;
	}

h2, h3{
	font-size: 1em; 
	font-family:  Arial, Helvetica, sans-serif;							  
	color: #fff;
	margin: 1.55em 0 0.666em 0;
	}

h2{
	font-size: 1.2em;
	}


p{
	margin: 0 0 0.666em 0;
	font: 0.75em/1.5em Arial, Helvetica, sans-serif; /* size: 12px/16px  */
}

td{
	font-size: 0.75em;
	line-height: 1.5em;
	}

table{
	margin-bottom: 0.5em;
	}

strong{ font-weight: bold;}

ul{
	font-size: 0.78em;
	line-height: 1.4em;
	list-style-type: disc;
	list-style-position: outside;
	padding: 0 1.5em;
	}

.center{
	text-align: center;
	width: 100%;
	}

.content { 
	margin: 0 auto 0.4em; 
	width: 69.2222222%; 
}


.content .main{
	padding: 1.5em;
	float: left; 
	margin: 0 0 0.75em 0;
	-webkit-border-radius: 0.6em;
	-moz-border-radius: 0.6em;
	border-radius: 0.6em;
	background-color: orange;
}




.content .extra ul li a{
	text-decoration: none;
	color: #555;
}


.no-wrap, .no-linebreak{
	white-space:nowrap;
}


.userinfo-chars{
	font-family: courier;
	background: #fff;
	padding: 0.2em 0.4em;
	font-size: 1.2em;
	color: #000;
	margin: 0.3em;
	display: inline-block;
	}

.btn, .btnHref {
	display: inline-block;
	color: #000 !important;
	font-size: 1em;
	text-decoration: none;
	border: 1px solid #888;
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	border-radius: 0.3em;
	padding: 0.5em 1em;
	margin: 0 0.5em 0.5em 0;
	background: #e2e2e2;
	background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e2e2e2));
	background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
	background: -o-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
	background: -ms-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
	background: linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 );
}


.hl{
	width: 100%;
	border-bottom: 1px solid #ddd;
	}


.code {
	display: block;
	border: 1px #660000 solid;
	padding: 10px;
	margin: 5px 0px 5px 0px;
	background-color: #8e1e1e;
	font: 11px "Courier New", Courier, monospace;
}


.error-box{
	padding: 3.8%;
	margin: 0.5em 0.6em 1.3em 0;
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border-radius: 0.4em;
	clear: both;
	border: 1px solid #999;
	background: #B70000 ;
	font-size: 1.3em;
}

.error-box li{
	background: url(../images/other/error-tiny.png) no-repeat 0% 50%;
	list-style: none;
	color: #fff !important;
	padding-left: 3.5em;
}

.error-box ul, .error-box p{
	margin: 0;
	padding: 0;
	}

.error-box li ul li{
	background: none;
	padding: 0;
	}


.error-box div{
	margin-left: 3.2em;
}

.error-box h2{
	margin: 0 0 0.5em 0;
	}



/* Widescreen specific CSS */
@media screen and (min-width: 1024px) { 
	.content {
		width: 600px;
	}
} /*/mediaquery*/ /* Code that respond.js needs (media queries hack that makes older browsers IE8, FF2 etc compatible with min- and max-width)  */


/* Tablet specific CSS */
@media screen and (min-width: 561px) and (max-width: 786px)  { 

	.content{
		width: 80%;
		margin: 0 10%;
		}
		
} /*/mediaquery*/ 



/* Mobile specific CSS */
@media screen and (max-width: 560px) { 

	.content{
		width: 95%;
		margin: 0 2.45%;
		}


	#logo{
		width: 150px;
		margin-bottom: 0.75em;
		}
	
	#top-image{
		width: 180px;
		}


} /*/mediaquery*/