/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */


@import "palette.less";



/* Default General  ----------------------------------------------------*/ 

.wrapper{
	
}

/* Defaul tNav   ----------------------------------------------------*/ 

#comboNav{ display: none; }
#nav{ display: block; }

	
	

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	/* TABLET GENERAL  ----------------------------------------------------*/ 
	
	
	.wrapper{ width: 712px; }
	

	/* TABLET NAV  ----------------------------------------------------*/ 
	
	#nav{ display: block; }
	#comboNav{ display: none; }
	#nav{
		
		li{
			margin-left: 0px;
			margin-right: 0px;
			font-size: 16px;
		}
	}
	
	/* TABLET SLIDER ----------------------------------------------------*/ 
	
	.theme-halftone {
		.nivoSlider {
			margin-left: -10px;
			width: 100%;
			margin-left: 0px;
		}
		.slider-right,
		.slider-left{
			display: none;
		}
	}
	
	#main{
		.headline{ font-size: 36px; }
	}

	/* TABLET FEATURED----------------------------------------------------*/ 


	.feature,
	.work-list{
		li{
			width: 210px;
			.thumb{
				.date{
					left: 105px - 35;
				}
			}
		}
	}

	/* TABLET BLOG ----------------------------------------------------*/ 
	
	#posts-list{
		position: relative;
		width: 672px;
		margin-left: 20px;
		margin-bottom: 40px;
		float: left;
		article{
			position: relative;
			margin-bottom: 60px;
			.entry-right-data{
				width: 573px;
			}

		}
	}

	/* TABLET SIDEBAR ----------------------------------------------------*/ 

	#sidebar{
		clear: both;
		float: none;
		margin: 0 auto 40px auto;
	}
	
	/* TABLET PROJECT ------------------------------------------------------------*/

	#project-title{
		font-size: 48px;
	}
	
	#project-gallery{
		width: 362px;
	}
	
	#project-info{
		width: 290px;
	}
	
	/* TABLET RELATED PROJECTS ------------------------------------------------------------*/

	.related-projects{
		margin-bottom: 80px;
		
		.related-heading{
			margin-bottom: 10px;
			margin-left: 20px;
		}
		
		.related-list{
			li{
				float: left;
				width: 210px;
			}
		}
	}

	
	/* TABLET WIDGETS  ----------------------------------------------------*/ 

	.widget-cols{
		>li{
			width: 153px;
			margin-left: 20px;
		}
	}

	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {

	.wrapper{ width: 252px;  }
	
	#main{
		font-size: 14px;
	}
	
	h1{ font-size: 24px; }
	h2{ font-size: 24px; }
	h3{ font-size: 24px; }
	h4{ font-size: 18px; }
	h5{ font-size: 14px; }
	h6{ font-size: 14px; }
	
	/* MOBILE NAV  ----------------------------------------------------*/ 
	
	#nav{ display: none; }
	
	#combo-holder{
	}
	
	#comboNav{ 
		display: block;
		width: 252px - 40;
		margin-left: 20px;
	}
	
	/* MOBILE Logo ----------------------------------------------------*/ 
	
	#logo{
		width: 200px;
		margin: 0 auto;
		img{
			width: 100%;
		}
	}
	
	
	/* SLIDER ----------------------------------------------------*/ 
	
	.theme-halftone {
		margin-bottom: 20px;
		.nivoSlider {
			margin-left: -10px;
			width: 100%;
			margin-left: 0px;
		}
		.slider-right,
		.slider-left{
			display: none;
		}
		.nivo-controlNav{ display: none }
		
		.nivo-directionNav{
			 display: block !important; /* ALWAYS show the arrows */
			a {
				width:16px;
				height:16px;
				background: @accentColor url(../img/arrows-mobile.png) no-repeat;
			}
			.nivo-prevNav {
				left:0px;
			}
			.nivo-nextNav {
				right:0px;
				background-position:0px -16px;
			}
		}
	}
	
	#main{
		.headline{ 
			font-size: 24px; 
		}
	}
	
	/* MOBILE FEATURE----------------------------------------------------*/ 

		
	.feature,
	.work-list{
		width: 212px;
		margin-left: 20px;
		li{
			width: 212px;
			margin-left: 0px;
			.thumb{
				.date{
					left: 106px - 35;
				}
			}
		}
	}
	
	/* MOBILE COLUMNS ----------------------------------------------------*/ 
	
	.entry-content{
		.one-half,
		.one-third,
		.one-fourth{
			width: auto;
			margin-right: 0px;
		}
	}
	
	
	
	#main .page-navigation{
		text-indent: -9000px;
		div{
			width: 25px;
		}
	}

	/* MOBILE BLOG ----------------------------------------------------*/ 
	
	#posts-list{
		position: relative;
		width: 252px - 40;
		margin-left: 20px;
		margin-bottom: 40px;
		float: left;
		article{
			position: relative;
			margin-bottom: 60px;
			.entry-left-data{
				width: 200px;
				height: 20px;
				float: left;
				position: relative;
			}
			.entry-right-data{
				width: 252px - 40;
				margin-left: 0px;
				.post-heading{
					font-size: 24px;
				}
			}
			.entry-date{
				position: absolute;
				top: -50px;
				left: 106px - 30;
				font-size: 18px;
				width: 60px;
				height: 60px;
			}
			
			.comments{
				position: absolute;
				top: -60px;
				left: 200px;
				display: none;
			}
		}
	}

	/* MOBILE SIDEBAR ----------------------------------------------------*/ 

	#sidebar{
		clear: both;
		float: none;
		margin: 0 auto 40px auto;
		width: 252px;
		.block{
			background: #f1f1f1;
			margin-bottom: 20px;
			border: 1px solid #ccc;
			
			.sidebar-content{
				background: none;
				width: 252px - 20;
				padding-left: 10px;
				padding-right: 10px;
				margin-bottom: 0px;
				padding-bottom: 10px;
			}
			.sidebar-top{
				background: none;
				width: 100%;
				height: 38px;
			}
			.sidebar-bottom{
				background: none;
				width: 100%;
				height: 38px;
			}
			
		}
	}



	/* MOBILE PROJECT ------------------------------------------------------------*/

	#project-title{
		font-size: 24px;
	}
	
	#project-gallery{
		width: 212px;
	}
	
	#project-info{
		width: 212px;
	}

	/* MOBILE RELATED PROJECTS ------------------------------------------------------------*/

	.related-projects{
		margin-bottom: 80px;
		
		.related-heading{
			margin-bottom: 10px;
			margin-left: 20px;
		}
		
		.related-list{
			li{
				float: left;
				width: 210px;
			}
		}
	}
	
	/* MOBILE WIDGETS  ----------------------------------------------------*/ 

	.widget-cols{
		>li{
			width: 212px;
			float: left;
			margin-left: 20px;
			margin-right: 0px;
			border-bottom: 1px solid @fgColor;
			padding-bottom: 30px;
			margin-bottom: 30px;
			&:last-child{
				border-bottom: none;
			}
		}
	}
	
	/* MOBILE Social ----------------------------------------------------*/ 
	
	footer{
		#social-bar{
			margin: 20px 0px 30px 0px;
			background: none;
			height: 46px;
			li{
				margin-bottom: 5px;
			}
			.left-corner,
			.right-corner{
				display: none;
			}
		}
		
		
	}
}


/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	@widemobile-w: 436px;
	
	.wrapper{ width: @widemobile-w;  }
	
	
	/* WIDE MOBILE Logo ----------------------------------------------------*/ 
	
	#logo{
		
		img{
			width: 100%;
		}
	}
	
	/* WIDE MOBILE NAV  ----------------------------------------------------*/ 
	
	#nav{ display: none; }
	#comboNav{ 
		display: block;
		width: 436px - 40;
		margin-left: 20px;
	}
	
	
	/* WIDE MOBILE FEATURE ----------------------------------------------------*/ 

	.feature,
	.work-list{
		width: 436px - 40;
		margin-left: 20px;
		li{
			width: 436px - 40;
			margin-left: 0px;
			.thumb{
				.date{
					left: 198px - 35;
				}
			}
		}
	}
	
	/* WIDE MOBILE BLOG ------------------------------------------------------------*/

	
	#posts-list{
		position: relative;
		width: 436px - 40;
		margin-left: 20px;
		margin-bottom: 40px;
		float: left;
		article{
			position: relative;
			margin-bottom: 60px;
			.entry-left-data{
				width: 400px;
				height: 20px;
				float: left;
				position: relative;
			}
			.entry-right-data{
				width: 436px - 40;
				margin-left: 0px;
			}
			.entry-date{
				position: absolute;
				top: -50px;
				left: 200px - 35;	
			}
			
			.comments{
				position: absolute;
				top: -60px;
				left: 200px;
				display: none;
			}
		}
	}
	
	
	/* WIDE MOBILE SIDEBAR ----------------------------------------------------*/ 

	#sidebar{
		position: relative;
		width: 320px;
		margin: 0px auto 40px auto;
		float: none;
		
		
		.block{
			background: none;
			border: none;
			.sidebar-content{
				background: url(../img/sidebar.png) repeat-y ;
				width: 300px;
				padding-left: 10px;
				padding-right: 10px;
				margin-bottom: 0px;
				padding-bottom: 10px;
			}
			.sidebar-top{
				background: url(../img/sidebar-top.png) no-repeat ;
				width: 100%;
				height: 38px;
			}
			.sidebar-bottom{
				background: url(../img/sidebar-bottom.png) no-repeat;
				width: 100%;
				height: 38px;
			}
			
		}
		
		.heading{
			border-bottom: 1px solid #888;	
			margin-bottom: 20px;
			text-align: center;
		}
		
		li{
			display: block;	
		}
		
		a{
			color: @accentColor;
		}
	}


	/* WIDE MOBILE PROJECT ------------------------------------------------------------*/

	#project-title{
		font-size: 24px;
	}
	
	#project-gallery{
		width: 436px - 40;
	}
	
	#project-info{
		width: 436px - 40;
	}

	/* WIDE MOBILE RELATED PROJECTS ------------------------------------------------------------*/

	.related-projects{
		.related-list{
			li{
				width: 436px - 40;
				margin-bottom: 30px;
			}
		}
	}
	
	/* WIDE MOBILE WIDGETS  ----------------------------------------------------*/ 

	.widget-cols{
		>li{
			width: 436px - 40;
		}
	}
}