/*
	responsive.css
	
	(c) Runtime Oy
*/

.onlymobile {display:none !important;}
.onlysmall {display:none !important;}
.onlytablet {display:none !important;}

/* 1024px

	Ensimmäinen leveys, jossa pitää ruveta hajoittamaan asioita.
	Esim. iPad ja jotkin muut tabletit vaakatasossa.
	
	- .notablet -breakpoint
*/
@media (max-width: 1024px) {
	.notablet { display:none !important; }
	.onlytablet {display:block !important;}
	
	.lomake label.formCheckboxLabelHolder, .lomake label.formRadioLabelHolder {
		margin-bottom:20px;
	}
}

/* 1023px tai alle

	Suuri osa tableteista pystytasossa menee tähän kohtaan.
	
	- Kaikista napeista tulee täysleveitä
*/
@media (max-width: 1023px) {
	/* Fonttikoon muutos */
	body {
		font-size: 0.9em;
		line-height: 1.5em;
	}
	
	/* Napeista täysleveitä */
	.nappi, a.nappi { display:block !important; width:auto !important; }
	
	.onlymobile {display:none !important;}
	.onlysmall {display:none !important;}
}

/* 800px tai alle
	Tässä vaiheessa aloitetaan gridin hajoitus. Useat tabletit pystytasossa.
	
	- Gridit allekkain, paitsi 1-3
	- Left navin hajoitus
	- .nosmall -breakpoint
*/
@media (max-width: 800px) {
	body {
		font-size: 1em;
		-webkit-text-size-adjust: none;
	}
	
	.nosmall { display:none !important; }
	.onlysmall { display: block !important; }
	
	/********** Gridit ***********************/
	.rivi, body, .container {
		width: 100%;
		min-width: 0 !important;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.arkki {
		margin-left:0px;
		margin-right:0px;
	}
	
	.grid_1, .grid_2, .grid_4, .grid_5, .grid_6,
	.grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
	.grid_viisi, .grid_seitseman {
		width: auto !important;
		float: none !important;
		margin-left: 0px;
		margin-right: 0px;
		
		clear:both;
	}
	
	.push_1, .push_2, .push_3, .push_4, .push_5, .push_6, .push_7, .push_8, .push_9, .push_10, .push_11, .push_12 {
		margin-left:0px;	
	}
	
	
	/* Palstoitus */
	.grid_1 {
		width:16.65% !important;
		float:left !important;
		clear:none !important;
	}
	.grid_2, .grid_viisi {
		width:33.3% !important;
		float:left !important;
		clear:none !important;
	}
	.grid_3, .grid_seitseman {
		width: 49.95% !important;
		float:left !important;
		clear:none !important;
	}
	
	.grid_1.pull, .grid_2.pull, .grid_3.pull { float:right !important; }
	
	/* Left & right reset */
	#left.grid_1, #left.grid_2, #left.grid_3, #right.grid_1, #right.grid_2, #right.grid_3 {
		float:none !important;
		width:auto !important;
		margin-left: 0px;
		margin-right: 0px;
		clear: both !important;
	}
	
	
	/* Sisennetyt gridit pois */
	[class*="grid_"] [class*="grid_"] {
		width:auto;
		float:none;
		margin-left:0px;
		margin-right:0px;
	}
	[class*="grid_"] [class*="grid_"] .pad { padding:0px; }
	
	/* Keskitys */
	.grid_1.centered, .grid_2.centered, .grid_3.centered { margin-left:auto; margin-right:auto; float:none; }
	/*****************************************/
	
	/********** Navit ************************/
	#left ul.menu li {
		float:left;
		
		width:48%;
		margin:0 1% 4px 1%;
	}
	/*****************************************/
}


/* 600px ja alle
	Isommat mobiilipuhelimet
	- Mobiilinavi kehiin
	- Subnavi piiloon
	- .onlymobile näkyviin
	- .nomobile -breakpoint
	- Ainoastaan grid 1 ja 2 menevät vielä vierekkäin
	- Gridin padding pienenee
	- Laatikot menee kiinni
*/
@media (max-width:600px) {
	/********** Navit ************************/
	/* Arkin reset */
	#nav .arkki { background:none; padding:0px; margin-bottom:0px; }
	
	/* nav-body reset */
	#nav .nav-body { padding:0px; }
	
	/* Efektit reset */
	#nav .nav-fx1 { background:none; border:none; padding:0px; margin:0px; }
	#nav .nav-fx2 { background:none; border:none; padding:0px; margin:0px; }
	
	/* Varjot pois */
	#nav .arkki, #nav .nav-fx1, #nav .nav-fx2 {
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	
	#nav ul li.level1 { 
		float:none !important;
		clear:both !important;
		width:100% !important;
		margin:0 !important;
	}
	
	#subnav { display:none; }
	/*****************************************/
	
	body {font-size:0.9em;line-height:1.5em;}
	.quote {
		font-size:0.9em;
	}
	
	.nomobile { display:none !important; }
	.onlymobile {display:block !important;}
	
	
	/********** Gridit ***********************/
	.grid_1 { width:33.3% !important; clear:none !important; }
	.grid_2, .grid_viisi { width:49.95% !important; clear:none !important; }
	.grid_3, .grid_seitseman { width:auto !important; float:none !important; margin-left:0px; margin-right:0px; clear:both; }
	
	.grid_1.pull, .grid_2.pull { float:right !important; }
	
	.pad { padding:7px !important; }
	/******************************************/	

	
	
	/********** Laatikot *********************/
	.laatikot {margin-bottom:10px;}
	.laatikko {margin-bottom:0px;}
	.laatikko.alwaysOpen {margin-bottom:5px;}
	.laatikot .laatikko .showhide {display:none;}
	.laatikot .laatikko.imOpen .showhide,
	.laatikot .laatikko.alwaysOpen .showhide {display:block;}
	
	.laatikot .laatikko .otsikko h2 { padding-right:30px; }
	.laatikot .laatikko.alwaysOpen .otsikko h2 { padding-right:12px; }
	
	.laatikot .laatikko .otsikko {margin-bottom:-15px !important;}
	.laatikot .laatikko.imOpen .otsikko,
	.laatikot .laatikko.alwaysOpen .otsikko {margin-bottom:15px !important;}
	
	.laatikot .laatikko .otsikko .open-icon {
		display:block;
		position:absolute;
		width:14px;
		height:14px;
		
		top:50%;
		margin-top:-7px;
		right:10px;
	}
	.laatikot .laatikko.alwaysOpen .otsikko .open-icon { display:none !important; }
	
	.laatikot .laatikko .otsikko {z-index:20;}
	.laatikot .laatikko .isolinkki {z-index:15;}
	/*****************************************/
	
}

/* 480px tai alle
	Useat mobiilipuhelimet pystysuunnassa
	
	- Taulukot hajoitetaan
	- Left navin napit allekkain
*/
@media (max-width: 480px) {
	/* Fontit */
	body {font-size:0.8em;line-height:1.5em;}
	.quote {font-size:0.9em;line-height:1.5em;}
	

	/********** Navit ************************/
	/* Left navi */
	#left ul.menu li {
		float:none;
		clear:both;
		width:auto;
		margin-left: 0px;
		margin-right: 0px;
	}
	
	/* Pienennetään valikon paddingia */
	.valikko-koti a, .valikko-avaa a { padding:8px 0 !important; }
	/*****************************************/

	/********** Taulukot *********************/
	/* Taulukon hajoitus */
	table.hajoita, table.hajoita tbody, table.hajoita tr, table.hajoita td { 
		display:block; float:none; clear:both; width:auto !important;
	}
	
	/* 2 solua vierekkäin */
	table.puolita, table.puolita tbody, table.puolita tr {
		display:block; float:none; clear:both; width:auto !important; width:100%;
	}
	table.puolita td { width:44%; padding:3%; display:block; float:left; clear:none; border:none; }
	/*****************************************/
	
	
	/********** Lomake ***********************/
	.lomake .lomake-rivi .label, .lomake .lomake-rivi .kentta {
		float:none;
		width:100%;
		
		margin-left:0px;
		margin-right:0px;
	}
	
	.lomake .lomake-rivi .label .rauli {
		padding:0px;
	}
	
	.lomake .formTextinput, .lomake input[type=text], .lomake .formEmailinput, .lomake .formTelinput {
		height:36px;
		line-height:36px;
	}
	/*****************************************/
	
	/********** Efektit **********************/
	.fx { display:none; }
	/*****************************************/
	.quote {
		float:none;
		width:auto;
		margin-left:0px;
		margin-bottom:10px;
		display:block;
	}
}

/* 380px tai alle 
	Pienemmät mobiilipuhelimet ja monet mobiilipuhelimet pystytasossa.
	Tässä vaiheessa kaikki gridit on allekkain.
*/
@media (max-width: 380px) {
	/* Gridit */
	.grid_1, .grid_2, .grid_viisi, .grid_custom { 
		width:auto !important; float:none !important; margin-left:0px; margin-right:0px; clear:both !important; 
	}
}

/* 320px tai alle 
	Todella pieni ruutu.
*/
@media (max-width: 320px) {
	/* Navin nappien padding pienemmäksi */
	#nav ul li.level1 > a, #nav .submenu li a { padding:3px !important; }
	#nav ul li.level1.viimeinen > a { padding:3px 4px !important; }
	
	/* Pienennetään alavalikon fonttikokoa */
	#nav .submenu li a, #nav ul li.level1 > a, #nav ul li.level1.viimeinen > a { font-size:0.85em !important; }
}