/* WebGarden 2015-04-27 */

* {	margin: 0; padding: 0; } img { border: 0; max-width:100%; } a:focus, input:focus, textarea:focus { outline: none; } .clear { clear: both; } :focus { -moz-outline-style:none; } strong { font-weight: bold; } i { font-style: italic; } td { vertical-align: top; } fieldset { border: 0; }

html { background: url(../images/htmlback.jpg) 0 0 repeat; -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */ }

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #414141;
	margin-bottom: 30px;
}

	ol, ul { padding: 6px 0 6px 25px; list-style-position: outside; }
	
	body.siteBody {
		line-height: normal;
		background: url(../images/bodyBack2015.jpg) no-repeat 50% 0;
		text-align: center;
	}
	
	/*body.muut { background: url(../images/bodybackb_muut.jpg) no-repeat 50% 0 !important; }*/
		
	h1 { font-family: Myriad Pro, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; font-style: normal; color: #2f58a4; padding: 10px 0 6px 0; line-height: 1.3em; }
	
	h2 { font-family: Myriad Pro, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; font-style: normal; color: #2f58a4; padding: 10px 0 6px 0px; line-height: 1.1em; }
	
	.moduletable.h3,
	h3 { font-family: Myriad Pro, Arial, Helvetica, sans-serif; font-size: 15px; padding: 10px 0 6px 0px; font-weight: bold; font-style: normal; }
		
	p { padding: 6px 0; }
	
	a { color: #2f58a4; text-decoration: underline; }
	
	a:hover { color: #2f58a4; text-decoration: none; }
	
	/*   MUUT   */

	.display { padding: 10px 0 15px 0; }
	
	table.category td, table.category th { padding: 0 15px 5px 0; }
	
	p.buttonheading { height: 0 !important; margin: 0 !important; padding: 0 !important; }
	
	dl.article-info { font-size: 11px; color: #666; background-color: #d3d3d3; border-radius: 3px; -moz-border-radius: 3px; padding: 0; }
	
		dl.article-info dd { float: left; padding: 6px 6px 6px 0; }
	
	.pagination { text-align: center; }
	
		.pagination ul { margin: 0 auto; font-size: 12px; color: #333; }
		
			.pagination li { list-style: none; display: inline; padding: 4px; }
	
	.clear { clear: both; }
	
	.centered { text-align: center !important; }

	#foxcontainer_c155 { padding: 0 !important; }
	
	.video-responsive {
		overflow:hidden;
		padding-bottom: 56.25%;
		position:relative;
		height:0;
	}
	
		.video-responsive iframe{
			left:0;
			top:0;
			height:100%;
			width:100%;
			position:absolute;
		}
	
	.player .video-wrapper { background: #fff !important; }
	
	ul.camera_pag_ul { text-align: center !important; }
	
	/**/
	
	.center { text-align: center; }
	
	.green { color: #74c224; }
	
	.white { color: #fff; }
	
	.kuvaRight { float: right; padding: 0 0 20px 30px; }
	
	.kuvaLeft { float: left; padding: 0 30px 20px 0; }
	
	/**/
	
	a.readMore,
	div#foxcontainer_m101 .btn {
		background-color: #008ad2;
		border-top: 0 !important;
		border-right: 0 !important;
		border-left: 0 !important;
		border-bottom: 3px solid #015a88 !important;
		padding: 5px 9px;
		margin: 0 0 2px 0 !important;
		color: #fff !important;
		font-family: 'Roboto', sans-serif !important;
		font-weight: 500 !important;
		line-height: 1.2em;
		border-radius: 3px !important;
		-moz-border-radius: 3px !important;
		-webkit-border-radius: 3px !important;
		text-decoration: none;
		cursor: pointer;
		display: inline-block;
		text-shadow: none !important;
		background-image: none !important;
		font-size: 15px !important;
		box-shadow: none !important;
	}
	
		a.readMore:hover,
		div#foxcontainer_m101 .btn:hover { margin: 1px 0 2px 0 !important; border-bottom: 2px solid #015a88 !important; background-color: #008ad2; color: #fff !important; 
		border-top: 0 !important;
		border-right: 0 !important;
		border-left: 0 !important;}
	
	/**/
	
	.foxcontainer { padding: 0 !important; }
	
	.foxcontainer input,
	.foxcontainer textarea { font-size: 14px !important; }
		
	#mid_101-customhtml0 { width: 100% !important; }
	
	#mid_101-sender0,
	#mid_101-sender1,
	#mid_101-text0 { width: 52% !important; float: left; }
	
	#mid_101-textarea0 { width: 44% !important; float: right; margin-left: 4%; }
	
	.controls.buttons { width: 100%; clear: both !important; }
	
	/* Mobile - big-screen */
	
	.onlyMobile { display: none; }
	
	/**/
	
	ul.ulli,
	#right ul.menu { padding: 6px 0 12px 10px !important; margin: 0 !important; }
	
		#right ul.menu { padding-top: 20px !important;}
		
		#right ul.menu ul { padding-left: 4px !important; padding-bottom: 0 !important;  }
		
	ul.ulli li,
	#right .menu li { background: url(../images/ulli.png) 0 2px no-repeat; padding: 0px 0 4px 16px; list-style: none; }
	
	#right li.current a { font-weight: bold; }
	
		#right li.current ul a { font-weight: normal; }
	
	.breadcrumb { color: #999; font-size: 11px; padding: 6px 0 !important; width: 100%; border-top: 1px dotted #999; margin-top: 10px; }
		
		.breadcrumb li { float: left; list-style: none; }
		
	/**/
	
	.third { width: 30%; padding-right: 3%; float: left; }
	
		
/**  TEMPLATE                  **********************************************/

#logo { position: absolute; top: 0; left: 50%; width: 240px; height: auto; margin-left: -480px; padding: 15px 10px 20px 10px; background: url(../images/logoBack.jpg) 50% 0 no-repeat; background-size: cover; box-shadow: 0 0 4px #133471; box-shadow: 0 0 2px #000; }

.container {
	width: 984px;
	margin: 0 auto;
	text-align: left;
}

		.taustakuva { background: url(../images/taustakuva.png) 100% 90px no-repeat; }

	#top { width: 100%; height: 170px; background: url(../images/fold.png) 100% 80px no-repeat; }
		
		#menu { width: 67%; height: 53px; padding: 27px 3% 0 30%; box-shadow: 0 0 4px #3059a5; background-color: #fff; text-align: right; }

	#menuMobile { width: 100%; margin: 5px 0 15px 0; text-align: center; }

	#slogan { padding: 10px 42% 20px 3%; width: 55%; height: auto; color: #fff !important; text-shadow: 0 1px 1px #28509a; font-size: 16px; line-height: 1.5em; }
	
		#slogan h1 { font-size: 32px; color: #fff !important; padding: 0 !important; }
		
		#slogan p { padding: 0; }
								
	#main { width: 96%; padding: 15px 2%; line-height: 1.5em; box-shadow: 0 0 4px #3059a5; background-color: #fff; }
		
		#left { float: left; padding: 0 3% 0 0; width: 77%; }
									
		#right { float: left; width: 20%; }	
		
			#right ul, #right ol, #left ul, #left ol { padding: 6px 0 6px 30px; }
			
		#main img { height: auto; width: auto; }
					
	#footer { margin-top: 10px; width: 100%; text-align: left; font-size: 13px; color: #858585; padding-top: 20px; line-height: 1.3em !important; }
		
		.webgarden { width: 100px; height: 51px; margin-top: -15px; display: block; float: right; }

/**  @2x kuvat                   **********************************************/

@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
	only screen and (    min--moz-device-pixel-ratio: 1.3 ),
	only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
	only screen and (         min-device-pixel-ratio: 1.3 ),
	only screen and ( min-resolution: 124.8dpi ),
	only screen and ( min-resolution: 1.3dppx ) {
	
	.toggleMenu {
	   background: #00689e url(../images/toggleMenuBack@2x.png) no-repeat 10px center;
	   background-size: 21px 18px; 
	}
	
}

/**  MEDIA-QUERIES               **********************************************/

	
@media screen and (max-width: 994px) {
	
	.container { width: 97%; margin: 0 1.5%; }
	
	#logo { left: 3%; margin-left: 0; }
	
	#menu { width: 44%; padding: 27px 3% 0 53%;}
	
	.taustakuva { background-size: auto 320px; }
		
}


@media only screen and (max-width: 767px) {
	
	.taustakuva { background: none; }
	
	#slogan { padding: 10px 3% 20px 3%; width: 94%; }

	#main { width: 94%; padding: 15px 3%; }
	
	#left,
	#right { width: 100%; padding: 0; float: none; }
	
		#left { padding-bottom: 10px; }
	
		#right { border-top: 1px solid #cccccc; padding-top: 10px; }
		
		.breadcrumb { display: none; }
		
		.third { width: 100%; padding-right: 0%; float: none; }
		
		.third ul { padding: 0 !important; }
		
	.kuvaRight,
	.kuvaLeft { float: none; clear: both; text-align: center; padding: 10px 0; display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; }
	
	.webgarden { float: none; }
	
		.webgarden img { padding-bottom: 10px !important; }

}

@media screen and (max-width: 560px) {
		
	body.siteBody { background-size: auto 700px; }
	
	.container { width: 96%; margin: 0 2%; }
	
	#logo { left: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; }
		
	.onlyBigscreen { display: none !important; }
	
	.onlyMobile { display: block; }
	
	#footer p { padding-top: 15px; }
	
}