@charset "UTF-8";

@media all{
	html,
	body{
		width: 100%;
		height: 100%;
		margin: 0px;
	}
		
	/*	-------------------------------------------------
	TYPSNITT
	
	*/
		body{
			font-family: 'Open Sans', Helvetica, sans-serif;
			font-size: 105%;
			color: #333333;
			text-align: justify;
/*			background-image: url(../../images/bg/rubiks_bygg_blue_2.gif);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
*/		}
		
		.gray_1{
			color: #cccccc;
		}
		
		h1{
			word-wrap: break-word;
		}
		
	/*	-------------------------------------------------
	LÄNKAR
	
	*/
		a{
			font-size: inherit;
		}
		a:link, a:visited, a:active{
			text-decoration: underline;
			color: inherit;
		}
		a:hover{
			text-decoration: none;
			color: #9d9e9e;
		}
		
	/*	-------------------------------------------------
	MODULER
	
	*/
		div#header,
		div#topBanner,
		div#content,
		div#footer{
			width: 100%;
		}
		
		div#header{
/*			background-color: #a4d8ea;
*/		}
		
		div#topBanner{
/*			background-image: linear-gradient(#ebecec, #9d9e9e);
*/			background-image: linear-gradient(#5b9bef, #111c81);
			color: #f9f9f9;
		}
		
		div#content{
			min-height: 300px;
			padding-bottom: 10em;
		}
		
		div#footer{
			position: fixed;
			bottom: 0px;
			background-image: url(../../images/bg/border_bottom_linear.png);
			background-position: top;
			background-repeat: repeat-x;
			font-weight: bold;
			background-color: #111c81;
		/*	background-color: #3457b4;		*/
			color: #f1f1f1;
		}
		
			div.innerContainer{
				width: 100%;
				margin: 0px auto;
				padding: 0em 1.0em;
				box-sizing: border-box;
			}
	
	/*	-------------------------------------------------
	MODUL: HEADER
	
	*/
		div#header img#mainLogo{
			margin: 1.0em 0em;
			width: 100%;
			max-width: 500px;
		}
	
	/*	-------------------------------------------------
	MODUL: TOPBANNER (MENY)
	
	*/
		div#topBanner div.innerContainer div#menuContainer{
			margin: 0px auto;
			width: auto;
		}
			div#topBanner div.innerContainer div#menuContainer div.menuOpener{
				background-image: url(../../images/buttons-and-icons/menu_white.png);
				background-position: center left;
				background-repeat: no-repeat;
				width: 100%;
				min-width: 30px;
				height: 50px;
				font-size: 120%;
				padding: 0.5em 0em 0em 2.5em;
				box-sizing: border-box;
				display: none;
			}
			
			div#topBanner div.innerContainer div#menuContainer div.menu{
				width: auto;
				display: inline-block;
				padding: 1.0em 1.5em;
				font-weight: bold;
			}
			div#topBanner div.innerContainer div#menuContainer div.menu:hover{
/*				background-color: #ebecec;
*/				background-color: #5b9bef;
/*				color: #666666;
*/				color: #f1f1f1;
			}
			
			div#topBanner div.innerContainer div#menuContainer div.menuOpener a:link,
			div#topBanner div.innerContainer div#menuContainer div.menuOpener a:visited,
			div#topBanner div.innerContainer div#menuContainer div.menuOpener a:active,
			div#topBanner div.innerContainer div#menuContainer div.menu a:link,
			div#topBanner div.innerContainer div#menuContainer div.menu a:visited,
			div#topBanner div.innerContainer div#menuContainer div.menu a:active{
				color: inherit;
				text-decoration: none;
			}
			div#topBanner div.innerContainer div#menuContainer div.menuOpener a:hover,
			div#topBanner div.innerContainer div#menuContainer div.menu a:hover{
				color: inherit;
			}

	/*	-------------------------------------------------
	MODUL: CONTENT
	
	*/
		div#content div.innerContainer{
			padding-top: 1.0em;
			padding-bottom: 2.0em;
		}
			div#content div.innerContainer div#adminContainer{
				width: 100%;
				padding: 1.0em;
				border: dashed 0.2em #333333;
				box-sizing: border-box;
				margin: 1.0em auto;
			}
				div#content div.innerContainer div#adminContainer textarea,
				div#content div.innerContainer div#adminContainer input[type=text]{
					width: 100%;
				}
				div#content div.innerContainer div#adminContainer textarea{
					height: auto;
					min-height: 200px;
				}
		
	
	/*	-------------------------------------------------
	MODUL: FOOTER
	
	*/
		div#footer div.innerContainer div.item{
			width: 33%;
			padding: 2.5em 0em;
		}
			div#footer div.innerContainer div.item div.name{
				width: 40%;
				text-align: right;
				padding-right: 1.0em;
				box-sizing: border-box;
			}
			div#footer div.innerContainer div.item div.contact{
				width: 60%;
			}
	
	/*	-------------------------------------------------
	ID
	
	*/
		div#konto{
			padding: 1.0em 1.0em 0px 0px;
		}
	
	/*	-------------------------------------------------
	DIV SOM TABELL
	
	*/	
	
	
	
	/*	-------------------------------------------------
	FORMULÄR
	
	*/
		input, textarea, select{
			font-family: 'Open Sans', Helvetica, sans-serif;
			font-size: 95%;
		}
		input, select{
			width: 20em;
			max-width: 90%;
			padding: 0.3em 0.5em;
		}
		input[type=text],
		input[type=password]{
			border-radius: 0.5em;
			border: solid 0.1em #eaeaea;
		}
		
		select.small,
		input[type=text].small,
		input[type=number].small{
			width: 9.0em;
		}
		
		select.smaller,
		input[type=text].smaller,
		input[type=number].smaller{
			width: 5.0em;
		}
		
		input[type=submit],
		input[type=button],
		input[type=checkbox],
		input[type=radio]{
			width: auto;
		}
		
		input[type=submit],
		input[type=button]{
/*			padding: 15em;
*/		}
		
		textarea{
			width: 90%;
			height: 15em;
		}
		
		div.radio label{
			width: 130px;
			display: inline-block;
		}
		
	/*	-------------------------------------------------
	MEDIA
	
	*/
		div.responsiveImageHolder,
		div.responsiveImageHolderHeaderImage{
			padding: 0 6px;
			float: left;
			width: 24.99999%;
			box-sizing: border-box;
		}
		div.responsiveImageHolder{
			width: 24.99999%;
		}
		div.responsiveImageHolderHeaderImage{
			width: 49.99999%;
			padding: 6px 1.0em 1.0em 0px;
		}
			div.responsiveImageHolder figure,
			div.responsiveImageHolderHeaderImage figure{
				background-color: #f5f5f5;
				border: solid 0.1em #cccccc;
			}
			div.responsiveImageHolder figure:hover,
			div.responsiveImageHolderHeaderImage figure:hover{
				border: solid 0.1em #333333;
			}
				div.responsiveImageHolder figure img,
				div.responsiveImageHolderHeaderImage figure img{
					width: 100%;
					height: auto;
				}
				div.responsiveImageHolder figure figcaption,
				div.responsiveImageHolderHeaderImage figure figcaption{
					text-align: center;
				}
		
		div#imageViewerContainer{
			position: fixed;
			top: 50%;
			left: 50%;
			width: 50px;
			height: 20px;
			border: double 3px #333333;
			border-radius: 1.5em;
			background-color: #ffffff;
			/*box-shadow: 0px 0px 15px #888888;*/
			padding: 15px;
			margin: -15px auto auto -46px;
			z-index: 200;
		}
			div#imageViewerContainer figure{
				text-align: center;
				margin: 0.3em 0.5em;
			}
				div#imageViewerContainer figure figcaption{
					height: 14px;
					overflow: hidden;
				}
		
		figure{
			margin: 0px;
			margin-bottom: 0.5em;
		}
			figure figcaption{
				font-size: 70%;
				padding-bottom: 0.5em;
			}
		
	/*	-------------------------------------------------
	POPUP
	
	*/
		div#basicPopup{
			position: fixed;
			top: 50%;
			left: 50%;
			width: 500px;
			height: 500px;
			border: dashed 0.1em #333333;
			border-radius: 1.5em;
			background-color: #ffffff;
			box-shadow: 0px 0px 15px #888888;
			margin: -280px auto auto -250px;
			z-index: 200;
		}
		div#basicPopupFullscreen{
			position: fixed;
			top: 5%;
			left: 5%;
			width: 90%;
			height: 90%;
			border: dashed 0.1em #333333;
			border-radius: 1.5em;
			background-color: #ffffff;
			box-shadow: 0px 0px 15px #888888;
			z-index: 200;
		}
			div#basicPopupFullscreen,
			div#basicPopup{
				overflow: scroll;
			}
				div#basicPopup div#basicPopupInnerContainer{
					padding: 2.0em 3.0em;
				}
				div#basicPopupFullscreen  div#basicPopupInnerContainer,
				div#basicPopupFullscreen  div#basicPopupInnerContainer div#fullscreenMapContainer{
					width: 100%;
					height: 100%;
				}
					div#basicPopup div#basicPopupInnerContainer p,
					div#basicPopupFullscreen  div#basicPopupInnerContainer p{
						padding-left: 1.0em; 
					}
					
		div#popup_cover, div#popup_cover_invisible{
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: 190;
		}
			div#popup_cover{
				background-color: #000000;
				opacity: 0.8;
				filter: Alpha(opacity=80);	/*	<= IE8 */
			}
			div#popup_cover_invisible{
			}
			
		.closeWindowButton{
			position: absolute;
			top: 10px;
			right: 10px;

			z-index: 300;
		}
		
	/*	-------------------------------------------------
	INFO-BOXAR
	
	*/
		.boxInfo,
		.boxError,
		.boxSuccess,
		.boxWarning{
			position: relative;
			padding: 0.8em 0.8em 0.8em 45px;
			margin-bottom: 1em;
			clear: both;
			word-wrap: break-word;
		}
		.boxInfo{
			color: #205791;
			background-color: #d5edf8;
			border: solid 2px #92cae4;
		}
		.boxError{
			color: #912020;
			background-color: #f8d5d5;
			border: solid 2px #e49292;
		}
		.boxSuccess{
			color: #2d9120;
			background-color: #daf8d5;
			border: solid 2px #9ee492;
		}
		.boxWarning{
			color: #c3b516;
			background-color: #fffcd7;
			border: solid 2px #fcf05e;
		}
			.boxInfo .symbol,
			.boxError .symbol,
			.boxSuccess .symbol,
			.boxWarning .symbol{
				position: absolute;
				top: 8px;
				left: 5px;
			}
	/*	-------------------------------------------------
	SPRITE INFO OCH KNAPPAR
	
	*/
		.sprite{
			background-image: url(../../images/buttons-and-icons/sprite-info-buttons.png?v=2);
		}
		div.sprite-symbol{
			display: inline-block;
		}
		
		.symbol-check-1{
			width: 18px;
			height: 17px;
			background-position: 0 0;
		}
		.symbol-check-1-false{
			width: 18px;
			height: 17px;
			background-position: -18px 0;
		}
		.symbol-check-1-alert{
			width: 18px;
			height: 17px;
			background-position: -36px 0;
		}
		.symbol-check-1-help{
			width: 18px;
			height: 17px;
			background-position: -54px 0;
		}
		.symbol-check-1-blank{
			width: 18px;
			height: 17px;
		}
		
		.symbol-info{
			width: 33px;
			height: 33px;
			background-position: -33px -21px;
		}
		.symbol-error{
			width: 33px;
			height: 33px;
			background-position: 0 -21px;
		}
		.symbol-success{
			width: 33px;
			height: 33px;
			background-position: -66px -21px;
		}
		.symbol-warning{
			width: 33px;
			height: 33px;
			background-position: -180px -81px;
		}
		
		.button-menu-handheld{
			width: 27px;
			height: 14px;
			background-position: -94px 0;
		}
		.button-close{
			width: 21px;
			height: 21px;
			background-position: -73px 0;
		}
		.button-next{
			width: 90px;
			height: 90px;
			background-position: -210px -53px;
		}
		.button-prev{
			width: 90px;
			height: 90px;
			background-position: -210px -143px;
		}
		
		.rss-feed{
			width: 28px;
			height: 28px;
			background-position: -180px -53px;
		}
	
	/*	-------------------------------------------------
	KLASSER
	
	*/
		
		div.box,
		span.box{
			border: solid 0.1em #333333;
			padding: 0px 1.3em 0.5em 1.3em;
		}
		
		div.box{
		}
		
		span.box{
		}
		
		div.checkboxContainer{
			height: auto;
			max-height: 400px;
			overflow: scroll;
		}
		
		div.divider{
			height: 40px;
		}
		
		div.limitExpansion{
			/*
			
			OBS! Om det här värdet ändras, då måste
			även värdet för $imageUploadSize[4] ändras
			i __bank.php
			
			*/
			max-width: 1250px;
		}
		
		div.list{
			padding: 0.5em 0em 0.4em 0.2em;
			border-bottom: solid 0.1em #eaeaea;
		}
			div.list:hover{
				background-color: #f0f0f0;
			}
		ul.list{
			list-style-type: none;
		}
				
		.fleft{
			float: left;
		}
		.fright{
			float: right;
		}
		.cboth{
			clear: both;
		}
	
		.cafter:after{
			display: block;
			visibility: hidden;
			content: " ";
			clear: both;
		}
		
		.head{
			margin-top: 1.0em;
			font-weight: bold;
		}	
			li.head{
				list-style-type: none;
				margin-left: -2.0em;
			}
		
		.display_none{
			display: none;
		}
		
		.note{
			font-size: 80%;
		}
		
		.pl1{
			padding-left: 1.0em;
		}
		
		.point{
			cursor: pointer;
		}
		
		.spinWaitContainer{
			min-height: 20px;
			min-width: 20px;
			display: inline-block;
		}
		
		div.partnerContainer,
		div.partnerContainerEnd{
			border-top: solid 0.1em #cccccc;
		}
		
		div.partnerContainer{
			display: table;
			width: 100%;
			height: auto;
			min-height: 100px;
			padding: 1.0em 0em;
		}
			div.partnerContainer div.partners{
				display: table-cell;
				vertical-align: middle;
				height: 100%;
			}
				div.partnerContainer div.partners div.partner{
				}
					div.partnerContainer div.partners div.partner span{
						display: inline-block;
					}
						div.partnerContainer div.partners div.partner span.imageHolder{
							width: 150px;
						}
							div.partnerContainer div.partners div.partner span.imageHolder img{
								vertical-align: middle;
							}
						div.partnerContainer div.partners div.partner span.textHolder{
							padding-left: 1.5em;
							box-sizing: border-box;
							max-width: 50%;
						}
}

@media screen and (max-width: 1000px){
	
	/*	-------------------------------------------------
	MEDIA
	
	*/
		div.responsiveImageHolder{
			width: 49.99999%;
		}
		div.responsiveImageHolderHeaderImage{
			width: 99.99999%;
			padding: 0 6px;
		}
}

@media screen and (max-width: 750px){
	/*	-------------------------------------------------
	MODUL: FOOTER
	
	*/
		div#footer div.innerContainer div.item div.name,
		div#footer div.innerContainer div.item div.contact{
			width: 100%;
			padding-right: 0px;
			text-align: left;
		}
}

@media screen and (max-width: 700px){
	
	/*	-------------------------------------------------
	MODUL: TOPBANNER (MENY)
	
	*/
		div#topBanner div.innerContainer div#menuContainer div#menuClosed{
			display: block;
		}
		div#topBanner div.innerContainer div#menuContainer div.menu{
			width: 100%;
			padding-top: 1.0em;
			padding-bottom: 1.0em;
			display: none;
			box-sizing: border-box;
		}
		div#topBanner div.innerContainer div#menuContainer div.menu:hover{
			background-color: inherit;
		}
		
	/*	-------------------------------------------------
	MODULER
	
	*/
		div#content{
			padding-bottom: 0em;
		}
		
		div#footer{
			position: relative;
		}
	
	/*	-------------------------------------------------
	KLASSER
	
	*/
		div.partnerContainer div.partners div.partner span.imageHolder,
		div.partnerContainer div.partners div.partner span.textHolder{
			width: 100%;
			max-width: none;
		}
		div.partnerContainer div.partners div.partner span.imageHolder{
			text-align: center;
		}
		div.partnerContainer div.partners div.partner span.textHolder{
			padding-top: 1.0em;
			padding-left: 0em;
			text-align: center;
		}
}

@media screen and (max-width: 500px){
			
	/*	-------------------------------------------------
	MODUL: FOOTER
	
	*/
		div#footer div.innerContainer{
			padding-top: 0.5em;
			padding-bottom: 0.7em;
		}
		div#footer div.innerContainer div.item{
			width: 100%;
			padding: 0.5em 0em;
		}
			div#footer div.innerContainer div.item div.name{
				width: 40%;
			}
			div#footer div.innerContainer div.item div.contact{
				width: 60%;
			}
	/*	-------------------------------------------------
	MEDIA
	
	*/
		div.responsiveImageHolder{
			width: 99.99999%;
		}
}

@media screen and (max-height: 700px){
	/*	-------------------------------------------------
	MODULER
	
	*/
		div#content{
			padding-bottom: 0em;
		}
		
		div#footer{
			position: relative;
		}
	
}