/*
Theme Name: www.obleciNoso.si
Description: Template made specialy for the XLPisanje by <a href="http://www.studiotibor.com" target="_blank">Studio Tibor</a>
Author: Studio Tibor
Version: 1.0
Copyrights: 2013 All Rights Reserved
*/

/*====================================================
	MEDIA QUERIES
====================================================*/
@media only screen and (max-width:990px) {
	.teloWrap,
	.footerWrap
	{
		width: 92% !important;
		margin: 0;
		padding: 0 4%;
	}
	
	/*====================================================
		.home .teloWrap
	====================================================*/
	.home .teloWrap .characters .but { top: 230px;	}
	
	/*====================================================
		.teloWrap
	====================================================*/
	/*
	.teloWrap aside { width: 26%; margin-left: 2%; }
	
	.teloWrap article { width: 66%;	 margin-right: 2%; }
	*/
	
	/*====================================================
		#footerClassic
	====================================================*/
	footer { width: 100%; }
}


@media only screen and (max-width:800px) {
	/*====================================================
		.home .teloWrap
	====================================================*/
	.home .teloWrap .characters { margin-top: 30px; }
	.home .teloWrap .characters .but { top: -20px; }
	
	
	/*====================================================
		#footerClassic
	====================================================*/
	footer ul.menu { display: block; padding-bottom: 4px; }
	
}


@media only screen and (max-width:750px) {
	/*---------------------------------------
		.teloWrap article
	---------------------------------------*/
	.teloWrap article .images img { 
		width: 100%;
		height: auto;
	}
	
}

@media only screen and (max-width:680px) {	
	/*====================================================
		.teloWrap
	====================================================*/
	/*.teloWrap { padding-top: 30px; }*/
	
	.teloWrap aside {
		float: none;
		width: 210px;
		margin: 30px auto 30px auto;	
	}
	
	.teloWrap article {
		float: none;
		width: 100%;
	}
	
	/*---------------------------------------
		.teloWrap article
	---------------------------------------*/
	.teloWrap article .images img { 
		width: auto;
		height: auto;
	}
	
}


@media only screen and (max-width:600px) {	
	/*====================================================
		.home .teloWrap
	====================================================*/
	.home .teloWrap .girl .character img,
	.home .teloWrap .boy .character img
	{
		/*width:  185px;*/
		width:  250px;
		height: auto; 
	}
	
	
	/*====================================================
		#footerClassic
	====================================================*/
	/*
	footer ul.menu { width: 50%; float: left; }
	footer ul.menu li { display: block; font-size: 170%; line-height: 1.2; }
	*/
	
	/*footer { padding: 0; }*/
	footer ul.menu { width: 100%;}
	footer ul.menu li { display: block; font-size: 120%; line-height: 1.6; border: 0; }
	footer ul.menu.col1 li { text-align: center;	/*right;*/ }
	footer ul.menu.col2 li { text-align: center;	/*left;*/ }
	
}


@media only screen and (max-width:550px) {
	/*---------------------------------------
		.teloWrap article
	---------------------------------------*/	
	.teloWrap article .images .left,
	.teloWrap article .images .right
	{ 
		float: none; 
		width: 195px; 
		margin: 0 auto; 
	}
}


@media only screen and (max-width:350px) {	
	/*====================================================
		.home .teloWrap
	====================================================*/
	.home .teloWrap .titleBoard img {
		width: 80%;
		height: auto;
	}
	
	.home .teloWrap .characters { margin-top: 40px; }
	.home .teloWrap .characters .but { top: -30px; }
	
	.home .teloWrap .girl .character img,
	.home .teloWrap .boy .character img
	{
		width:  185px;
		height: auto; 
	}
	
	/*====================================================
		PRETTY PHOTO MODIFS
	====================================================*/
	div.light_rounded .pp_close { margin-top: 0; }
	a.pp_expand, a.pp_contract { right: 10px; top: -10px; }
}


@media only screen and (max-width:300px) {		
	/*---------------------------------------
		.teloWrap article
	---------------------------------------*/
	.teloWrap article .images .left,
	.teloWrap article .images .right
	{ 
		width: 100%; 
	}
	
	.teloWrap article .images img { 
		width: 100%;
		height: auto;
	}
	
}