html {
//height: 100%;
}

body{
	margin:0;
	padding:0;
	text-align:center;
	background-position:center; 
	background-size: 100%;
	//background-color: #d5d5d5;
	background-color: #0b2540;
	background-image: url("layout/background.jpg");
	//background-repeat: repeat-x;
	background-position: top;
	background-attachment: fixed;
	font-size:13px;
	color:#050707;
	font-family: leipaFont, Arial, verdana,tahoma , sans-serif;
	font-weight:normal;
	height:100%;
	margin-top:-20px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
}

@font-face {
 font-family: leipaFont;
 src: url("BentonSans-Regular.eot") /* EOT file for IE */
}
@font-face {
 font-family: leipaFont;
 src: url("BentonSans-Regular.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: otsikkoFont;
 src: url("futura_t_medium-webfont.eot") 
}
@font-face {
 font-family: otsikkoFont;
 src: url("futura_t_medium-webfont.ttf") 
}

#page-background {position:absolute; top:0; left:0; overflow:hidden; display:block;}


/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap_header {
	//padding-top: 20px;
	width: 1040px;
	margin: 20px auto;
	margin-top: -20px;
	//background-color: #0C2342;
	background-color: #0C2342;
    box-shadow: 
        -3px 0 25px -3px black, 
        3px 0 25px -3px black;

}

#pagewrap {
	padding: 20px;
	width: 1000px;
	margin: 20px auto;
	margin-top: 0px;
	background-color: #0C2342;
    box-shadow: 
        -3px 0 25px -3px black, 
        3px 0 25px -3px black;
	
}
#header {
	height: 70px;
}
#header-image {
	// height: 146px;
}
#header-left {
	width: 520px;
	float: left;
	//background-color:#0b2540;
	padding-top:10px;
	margin-bottom:-20px;
}
#header-right {
	width: 520px;
	float: right;
	//background-color:#0b2540;
	padding-top:10px;
	margin-bottom:-20px;
}
#content {
	width: 680px;
	float: left;
}
#sidebar {
	width: 300px;
	float: right;
}
#footer {
	clear: both;
	text-align: center;
}
#next-button{
	position:absolute;
	margin-left: 989px;
	margin-top: -215px;
}
#prev-button{
	position:absolute;
	margin-left: -25px;
	margin-top: -215px;
}
#header-kuva-3{
	display:none;
}	

#header-mobile{
	display:none;
	padding:0px;
	padding-top:25px;
	margin-bottom:-20px;
}	
#main_header_mobile{
	display:none;
	margin-top:-40px;
	padding-left:10px;
	padding-right:10px;
}
#main_header{
	margin-bottom:-40px;
}
#event-list-mobile{
	display:none;
}
#event-list{
	min-height:1000px;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 1100px) {
	
	#pagewrap {
		width: 94%;
	}
	#pagewrap_header {
		width: 100%;
	}
	#header-left {
		width: 49%;
		padding-left: 1%;
	
	}
	#header-right {
		width: 49%;
		padding-right: 1%;
	}	
	#content {
		width: 65%;
	}
	#sidebar {
		width: 30%;
	}
	#prev-button{
		margin: 0 auto;
		left:3px;
		margin-top: -215px;
		position:absolute;
		display:block;
	}		
	#next-button{
		margin: 0 auto;
		right:3px;
		margin-top: -215px;	
		position:absolute;
		display:block;
	}	
	#header-kuva-3{
		display:none;
	}	
	#header-mobile{
		display:none;
	}	
	#main_header_mobile{
		display:none;
	}	
	#event-list-mobile{
		display:none;
	}
}


/* for 900px or less */
@media screen and (max-width: 900px) {
	#main_header{
		display:none;
	}	
	#main_header_mobile{
		display:block;
	}	
	#event-list-mobile{
		display:none;
	}
}	
/* for 700px or less */
@media screen and (max-width: 700px) {
	#pagewrap {
		
		box-shadow: none;
	}

	#event-list{
		min-height:0px;
	}

	#header-left {
		display: none;
	}
	#header-right {
		display: none;
	}
	
	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}	
	#maat_box {
		margin-top:20px;
	}	
	#prev-button{
		margin: 0 auto;
		left:3px;
		margin-top: -215px;
		position:absolute;
		display:block;
	}		
	#next-button{
		margin: 0 auto;
		right:3px;
		margin-top: -215px;
		position:absolute;
		display:block;
	}	
	#header-kuva{
		margin-top:20px;
		max-width: 100%; height: auto;
	}	
	#header-kuva-2{
		display:none;
	}
	#header-kuva-3{
		max-width: 100%; height: auto;
		display:block;
		margin-top:25px;
		margin-bottom:15px;
	}	

	#header-mobile{
		display:block;
	}	
	#main_header{
		display:none;
	}	
	#main_header_mobile{
		display:block;
	}	
	#main_box-kansikuva{
		width: 100%;
		float: left;
		text-align: center;
		margin: 0 auto;
		padding-bottom:20px;
	}	
	
	#main_box-kansikuva-kuva{
		max-width:100%;
		height: auto;
	}		

	#main_box-lisatietoa{
		width: 100%;
		float: left;	
		text-align: center;
		// margin-left:-10px;
	}		
	#event-list-mobile{
		display:none;
	}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
	#pagewrap {
		padding: 10px;
		box-shadow: none;
	}
	
	#header-left {
		display: none;
	}
	#header-right {
		display: none;
	}

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		//display: none;
	}
	#maat_box {
		margin-top:20px;
	}	
	#main_box {
		// display: none;
		float: none;
	}

	#main_box-kansikuva{
		width: 100%;
		float: left;
		text-align: center;
		margin: 0 auto;
		padding-bottom:20px;
	}	
	#main_box-kansikuva-kuva{
		max-width:100%;
		height: auto;
	}		

	#main_box-lisatietoa{
		width: 100%;
		float: left;	
		text-align: center;
		// margin-left:-10px;
	}	
	#prev-button{
		margin: 0 auto;
		left:3px;
		margin-top: -235px;
		position:absolute;
		display:block;
	}		
	#next-button{
		margin: 0 auto;
		right:3px;
		margin-top: -235px;
		position:absolute;
		display:block;
	}		

	#header-mobile{
		display:block;
		padding:10px;
	    padding-top:25px;
		
	}		
	#main_header{
		display:none;
	}	
	#main_header_mobile{
		display:block;
		margin-top:-20px;
	}	

	#header-kuva{
		margin-top:20px;
		max-width: 100%; height: auto;
	}
	#header-kuva-2{
		display:none;
	}
	#header-kuva-3{
		max-width: 100%; height: auto;
		display:block;
		margin-top:15px;
		margin-bottom:15px;
	}	
	#event-list{
		display:none;
	}
	#event-list-mobile{
		display:block;
	}
}

/* --------------- */

	#res-kuva{
		// margin-top:20px;
		margin-bottom:10px;
		max-width: 100%; height: auto;
	}

	#content {
		//background: #000000;
		text-align: left;
	}

	#header, #content, #sidebar, #footer {
		// border: solid 1px #ccc;
		border: solid 0px #000;
		background-color: #0C2342;
	}

	#pagewrap{
		//border: solid 1px #000;
		background-color: #0C2342;
	}	
	
	#pagewrap_header{
		// border: solid 1px #ccc;
		border: solid 0px #000;
		background-color: #0C2342;
	}
	
	#maat_box {
		font-family: Arial, verdana, tahoma , sans-serif;
		font-size:14px;
		color:#ffffff;
		font-weight:normal;
		letter-spacing: 0.3px;
		border: solid 3px #009bbb;
		background: #012442;
		padding:10px;
		text-align: left;
	}
	
	#membership_box {
		font-family: Arial, verdana, tahoma , sans-serif;
		font-size:14px;
		color:#ffffff;
		font-weight:normal;
		letter-spacing: 0.3px;
		border: solid 3px #009bbb;
		background: #012442;
		padding:10px;
		text-align: left;
	}
	
	#facebook_box {
		font-family: Arial, verdana, tahoma , sans-serif;
		font-size:14px;
		color:#ffffff;
		font-weight:normal;
		letter-spacing: 0.3px;
		border: solid 3px #009bbb;
		background: #012442;
		padding:10px;
		text-align: left;
	}
	
	#info-box {
		font-family: Arial, verdana, tahoma , sans-serif;
		font-size:14px;
		color:#ffffff;
		font-weight:normal;
		letter-spacing: 0.3px;
		border: solid 3px #009bbb;
		background: #012442;
		padding:10px;
		text-align: left;
	}
	
/* --------------- */

A:link {text-decoration: none; color: #ffffff}
A:visited {text-decoration: none; color: #ffffff}
A:active {text-decoration: none; color: #ffffff}
A:hover {text-decoration: underline; color: #ffffff;}


hr {
	height:1px;
	background-color:none;
	border:1px dotted #000000;
} 

h1{
	font-size:25px;
	color:#ffffff;
	font-family: otsikkoFont, Arial, verdana,tahoma , sans-serif;
	font-weight:normal;
}
h4{
	font-size:18px;
	color:#39c1f4;
	font-family: otsikkoFont, Arial, verdana,tahoma , sans-serif;
	font-weight:normal;
}
h2{
	font-size:18px;
	color:#ffffff;
	font-family: otsikkoFont, Arial, verdana,tahoma , sans-serif;
	font-weight:normal;
}
h3{
	font-size:20px;
	color:#ffffff;
	font-family: otsikkoFont, Arial, verdana,tahoma , sans-serif;
	font-weight:normal;
}
li
{
  margin-left: 0;
  margin-right: 0;
  width:175px;
  padding: 0;
}

.header-text{
	font-family: leipaFont, Arial, verdana,tahoma , sans-serif;
	font-size:14px;
	color:#ffffff;
	font-weight:normal;
}

.event-text{
	font-family: leipaFont, Arial, verdana,tahoma , sans-serif;
	font-size:18px;
	//color:#ffffff;
	font-weight:normal;
}

.box-text{
	font-family: leipaFont, Arial, verdana,tahoma , sans-serif;
	font-size:14px;
	color:#ffffff;
	font-weight:normal;
}

.carousel-text{
	font-family: leipaFont, Arial, verdana,tahoma , sans-serif;
	font-size:14px;
	color:#ffffff;
	font-weight:normal;
}


A:link, A:visited , A:active .carousel-link{
	color:#008eb0;
	font-size:14px;
	text-decoration: none;
}
A:hover .carousel-link{
	color:#008eb0;
	font-size:14px;
	text-decoration: underline;
}

.carouselClass{
margin-top: 16px;
margin-left: -48px;
margin-bottom: 16px;
text-align: center;
}
.prev-button{
position:absolute;
margin-left: -90px;
margin-top: 55px;
}
.next-button{
position:absolute;
margin-left: 830px;
margin-top: 55px;
}