@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700,300,800);

body, html {
	margin:0;
}

body {
	background:#fff url(images/background.jpg) fixed center top;
	font-family:Arial, Helvetica, sans-serif;
	font-family: 'Merriweather Sans', sans-serif;
}
#page_bg_container {
	position:absolute;
	left:0;
	top:0;
	right:0;
	height:600px;
	background: url(images/besoksbg.png) repeat-x center top;
}

#page-container {
	margin:0 auto;
	width:1440px;
	position:relative;
}


#header {
	background:#ED1C24;
	height:160px;
	margin:20px 0 5px 0;
	text-align:center;
}
#header img {
	margin-top:20px;
}
/****************************************
*
*		BILDSPALTEN
*
*****************************************/
#image-col {
	margin:0 0px 5px 0;
	width:100%;
}
.image_fader {
	display:block;
	overflow:hidden;
	float:left;
	max-width:360px;
	margin:0 0 0 0;
	width:25%;
	background-size:cover;
}
	.image_fader>div {
		width:100%;
		padding-top:50%;
		position:relative;
	}
		.image_fader>div>div {
			width:26px;
			height:26px;
			position:absolute;
			bottom:-26px;
			right:5px;
			z-index:4;
			background-image:url(images/ring.png);
			font:bold 10px/26px 'Merriweather Sans', Arial, Helvetica, sans-serif;
			text-align:center;
		}
		.image_fader>div>div:hover {
			color:#ED1C24;
			cursor:pointer;
		}
.image_fader>div>img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/****************************************
*
*		HÖGERSPALTEN
*
*****************************************/


#right-container {
	float:none;
	position:relative;
	width:300px;
}

	#right-col {
		z-index:100;
		position:absolute;
		top:0px;
		left:0;
		float:left;
		padding:0 0 50px 0;
		width:300px;
		background:transparent;
	}
	#kategorier {
		text-align:center;
	}
		#kategorier img {
			cursor:pointer;
			margin:5px 10px;
		}
			#kategorier img:hover {
				opacity:0.5;
			}

	#besoksmal {
		padding:15px 20px;
	}
		#besoksmal>div {
			cursor:pointer;
			height:26px;
		}
			#besoksmal>div>.circle {
				float:left;
				display:inline-block;
				background-image:url(images/ring.png);
				height:26px;
				width:26px;
				font:bold 10px/26px 'Merriweather Sans', Arial, Helvetica, sans-serif;
				text-align:center;
			}
			#besoksmal>div>.besoks_rad {
				display:inline-block;
				font:11px/26px 'Merriweather Sans', Arial, Helvetica, sans-serif;	
				height:26px;
				padding:0 10px;
			}
				#besoksmal>div:hover>div.besoks_rad {
					text-decoration:underline;
				}

	#show_menu_button {
		background: #ED1C24 url(images/menu.png) no-repeat 10px center;
		display:none;
		color:#fff;
		width:80px;
		height:40px;
		padding-left:50px;
		font:14px/40px 'Merriweather Sans', Arial, Helvetica, sans-serif;
		margin-bottom:5px;
		cursor:pointer;
	}
/****************************************
*
*		KALENDERN
*
*****************************************/


div.calendar-item {
	background:#ED1C24;
	color:#fff;
	height:20px;
	padding:5px 20px 5px 20px;
	margin:5px 0 5px 0;
	white-space:nowrap;
}
	div.calendar-item>span.date {
		float:right;
		font: 8px/20px 'Merriweather Sans', Arial, Helvetica, sans-serif;
		padding:0px;
	}
	div.calendar-item>span.info {
		float:left;
		font: 11px/20px 'Merriweather Sans', Arial, Helvetica, sans-serif;
		margin:0 0 5px 0;
		max-width:140px;
		text-overflow:ellipsis;
		overflow:hidden;
	}


/****************************************
*
*		MITTEN(KART)-RUTAN
*
*****************************************/
#map-col {
	float:left;
	max-width:100%;
	min-width:727px;
	margin-left:300px;
	padding:100px 150px;
}
	#map-container {
		position:relative;
		width:100%;
		max-width:727px;
	}
		#map {
			width:100%;
			padding-top:109%;
			position:relative;
		}
			#map img {
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:auto;
				z-index:0;
			}
			#map div {
				background-image:url(images/ring.png);
				height:26px;
				width:26px;
				font:bold 10px/26px 'Merriweather Sans', Arial, Helvetica, sans-serif;
				text-align:center;
				position:absolute;
			}
				#map div:hover {
					color:#ED1C24;
					cursor:pointer;
				}
.selected_besoksmal {
	background-image:url(images/redring.png) !important;	
	color:#fff !important;
}
/****************************************
*
*		INFO-RUTAN
*
*****************************************/
#info-box {
	height:auto;
	padding:140px 20px 20px 20px;
	position:absolute;
	left:340px;
	text-align:left;
	top:50px;
	width:345px;
	z-index:10;
	display:none;
}

	#info-box>.info-box-image {
		background:#292929 none no-repeat center top;
		height:135px;
		left:0;
		position:absolute;
		top:0;
		width:100%;
	}

/****************************************
*
*		ABOUT-RUTAN
*
*****************************************/
#about_as {
	position:absolute;
	top:5%;
	left:10%;
	height:80%;
	width:80%;
	background-color:#fff;
	background-color:rgba( 255, 255, 255, 0.8 );
	z-index:20;
	padding:30px;
	cursor:pointer;	
}

/****************************************
*
*		GOOGLE-RUTAN
*
*****************************************/
#google_map {
	position:absolute;
	top:5%;
	left:10%;
	height:80%;
	width:80%;
	background-color:#fff;
	background-color:rgba( 255, 255, 255, 0.6 );
	z-index:20;
	padding:30px;
	cursor:pointer;	
}



/****************************************
*
*		RÖD RAD
*
*****************************************/
.red_row {
	background:#ED1C24;
	color:#fff;
	height:40px;
	font:14px/40px 'Merriweather Sans', Arial, Helvetica, sans-serif;
	margin:0 0 5px 0;
	text-align:center;
}
.red_row_button {
	cursor:pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
}
.red_row_button:hover {
	background:#FF4538;
}


h1 {
	color:#FF4538;
	font:40px/40px 'Merriweather Sans', Arial, Helvetica, sans-serif;
}

h2 {
	font:20px/20px 'Merriweather Sans', Arial, Helvetica, sans-serif;
}
p {
	font:11px/18px 'Merriweather Sans', Arial, Helvetica, sans-serif;
}




@media screen and (max-width: 1520px) { 
	#page-container {
		margin:0 auto;
		width:95%;
	}
	#right-container {
		float:none;
		width:100%;
		height:10px;
	}
}

@media screen and (max-width: 1400px) { 
	#map-col {
		margin-left:200px;
	}
}
@media screen and (max-width: 1300px) { 

	#right-container {
		position:absolute;
		z-index:300;
		height:50px;
		width:140px;
		overflow:hidden;
	}
	#right-col {
		position:static;
		background:#fff;
		background:rgba(255,255,255,0.8);
		padding:5px;
	}
	#map-col {
		margin:0;
		padding:0;
		width:100%;
	}
	#map-container {
		margin:0 auto;
	}
	#show_menu_button {
		display:block;
	}
}

/* 	Mobil 	*/
@media screen and (max-width: 760px) {
	body {
		-webkit-text-size-adjust: none;
	}
	#show_menu_button {
		display:none;
	}
	#right-container {
		position:static;
		width:auto;
		height:auto;
		overflow:visible;
	} 		
	#right-col {
		position:static;
		background:transparent;
		padding:0;
	}
	#page-container {
		margin:0 auto;
		max-width:420px;
	}
	#header {
		height:auto;
		margin:0 0 10px 0;
	}
	#header>img {
		max-height:80%;
		width:auto;
		max-width:80%;
		margin:10px 0;
	}
	#image-col {
		overflow:hidden;
		height:auto;
		float:none;
		margin:0 0 10px 0;
		white-space: nowrap;
	}
	.image_fader {
		float:left;
		display:inline-block;
		width:50%;
	}
	#kategorier {
		padding-left:50px;
		padding-right:50px;
	}
	#info-box {
		border-top:20px solid #ED1C24;
		position:static;
		width:auto;
		max-width:none;
		padding-top:150px;
	}
	#map-col {
		min-width:0;
	}
	#info-box>.info-box-image {
		top:30px;
	}
	#about_as {
		top:0;
		left:0;
		position:static;
		width:auto;
		height:auto;
		background-color:transparent;
		padding:10px 10px 20px 10px;
	}
	#google_map {
		display:none;
	}

		#info-box>div {
			top:30px;	
		}

	#map {
		display:none;
	}
	#right-col {
		float:none;
		width:100%;
	}
	#stig {
		display:none;
	}
}

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}


/*******************************************************************************
ANNONS
*******************************************************************************/
#annons {
	display: block;
	text-align: center;
	padding: 10px;
	background:#ED1C24;
	color: #fff;
	text-decoration: none;
	margin: 10px 0 -10px 0;
	-webkit-animation: pulse 1s; 
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction:alternate; 

	animation: pulse 1s;
	animation-iteration-count: infinite;
	animation-direction:alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes pulse
{
	from {background: #ED1C24;}
	to {background: #F00;}
}

/* Standard syntax */
@keyframes pulse
{
	from {background: #ED1C24;}
	to {background: #F00;}
}

/* 	Mobil 	*/
@media screen and (max-width: 760px) {
	#annons {
		margin: 10px 0 10px 0;
	}
}