/*
* @author: William Khoe
*/

/* The following two styles force scrollbar visibility to fix FF/Opera media queries width inconsistency */
@-moz-document url-prefix()
{
	/*html
	{
		overflow:hidden;
		height:100%;
	}*/
	body
	{
		position:relative;
		overflow-y:scroll;
		height:100%;
		//-webkit-overflow-scrolling:touch;
	}
}
x:-o-prefocus, html
{
	overflow:hidden;
	height:100%;
}
x:-o-prefocus, body
{
	position:relative;
	overflow-y:scroll;
	height:100%;
}
.lte8 body{
	overflow-x: hidden;
}

.lte7 .row { overflow:hidden; }

.row:after
{
	display:block; clear:both; visibility:hidden;
	height:0;
	content:".";
}
.ie .row
{
	zoom:1;
}
/*.row
{
	overflow:auto;
}*/
.col
{
	float:left;
}

.template-1 #main > .row
{
	width:960px;
	margin:0 auto;
}

.template-2 #main > .row
{
	width:960px;
	margin:0 auto;
}
.template-2 #main > .row-2 > .col-1,
.template-2 #main > .row-2 > .col-3,
.template-2 #main > .row-1 > .row-9 > .col-1,
.template-2 #main > .row-1 > .row-9 > .col-3
{
	clear:left;
	width:230px;
	margin:0 30px 0 0;
}
.template-2 #main > .row-2 > .col-2,
.template-2 #main > .row-1 > .row-9 > .col-2
{
	float:right;
	width:700px;
}

.template-3 #main > .row
{
	position:relative;
	width:960px;
	margin:0 auto;
}
.template-3 #main > .row-2 > .col-2,
.template-3 #main > .row-1 > .row-9 > .col-2
{
	float:left;
	width:280px;
}
.template-3 #main > .row-2 > .col-1,
.template-3 #main > .row-2 > .col-3,
.template-3 #main > .row-1 > .row-9 > .col-1,
.template-3 #main > .row-1 > .row-9 > .col-3
{
	float:right;
	width:650px;
}

/* Template 4 */
.template-4 #main > .row
{
	width:960px;
	margin:0 auto;
}
.template-4 #main > .row-1
{
	margin-top:10px; margin-bottom:20px;
}
.template-4 #main > .row-2
{
	margin-bottom:30px;
}
.template-4 #main > .row-2 > .col
{
	float:none;
}
.template-4 #main > .row-3 > .col
{
	float:left;
	width:306px; overflow:visible;
	margin-left:20px;
}
.template-4 #main > .row-3 > .col-1
{
	margin-left:0;
}
.template-4 #main > .row-4
{
	margin-top:30px; border-top:3px solid #E7E7E7; padding-top:30px;
}
.template-4 #main > .row-4 > .col
{
	float:left;
	width:425px; height:264px;
}
.template-4 #main > .row-4 > .col-1
{
	margin:0; border-right:1px solid #EEE; padding:0 34px 0 20px;
}
.template-4 #main > .row-4 > .col-2
{
	margin:0; border-left:1px solid #EEE; padding:0 20px 0 34px;
}

/* Template 5 */
.template-5 #main > .row
{
	width:960px;
	margin:0 auto;
}
.template-5 #main > .row-1
{
	margin-top:10px;
}
.template-5 #main > .row-1 > .col-2
{
	float:right;
}
.template-5 #main > .row-2
{
	margin-bottom:30px;
}
.template-5 #main > .row-2 > .col
{
	float:none;
}
.template-5 #main > .row-3 > .col
{
	float:left;
	overflow:visible;
}
.template-5 #main > .row-3 > .col-1
{
	width:632px;
}
.template-5 #main > .row-3 > .col-1 > .projects
{
	float:none; clear:both; *zoom:1;
}
.template-5 #main > .row-3 > .col-1 > .projects:after
{
	display:block; clear:both; height:0; visibility:hidden; content:".";
}
.template-5 #main > .row-3 > .col-1 > .projects > .column
{
	float:left;
	width:306px;
}
.template-5 #main > .row-3 > .col-1 > .projects > .column-2
{
	margin-left:20px;
}
.template-5 #main > .row-3 > .col-2
{
	width:306px;
	margin-left:20px;
}
.template-5 #main > .row-4
{
	margin-top:30px; border-top:3px solid #E7E7E7; padding-top:30px;
}
.template-5 #main > .row-4 > .col
{
	float:left;
	width:425px; height:264px;
}
.template-5 #main > .row-4 > .col-1
{
	margin:0; border-right:1px solid #EEE; padding:0 34px 0 20px;
}
.template-5 #main > .row-4 > .col-2
{
	margin:0; border-left:1px solid #EEE; padding:0 20px 0 34px;
}

/* Template 6 */
.template-6 #main > .row
{
	width:960px;
	margin:0 auto;
}
.template-6 #main > .row-1
{
	margin-top:10px;
}
.template-6 #main > .row-1 > .col-2
{
	float:right;
}
.template-6 #main > .row-2
{
	margin-bottom:12px;
}
.template-6 #main > .row-2 > .col
{
	float:none;
}
.template-6 #main > .row-3
{
}
.template-6 #main > .row-3 > .col-1 .project-grid
{
	float:none; clear:both; *zoom:1;
}
.template-6 #main > .row-3 > .col-1 .project-grid:after
{
	display:block; clear:both; height:0; visibility:hidden; content:".";
}
.template-6 #main > .row-3 > .col-1 .project-grid > .column
{
	float:left;
	width:306px;
	margin-left:20px;
}
.template-6 #main > .row-3 > .col-1 .project-grid > .column-1
{
	margin-left:0;
}
.template-6 #main > .row-4
{
	margin-top:30px; border-top:3px solid #E7E7E7; padding-top:30px;
}
.template-6 #main > .row-4 > .col
{
	float:left;
	width:425px; height:264px;
}
.template-6 #main > .row-4 > .col-1
{
	margin:0; border-right:1px solid #EEE; padding:0 34px 0 20px;
}
.template-6 #main > .row-4 > .col-2
{
	margin:0; border-left:1px solid #EEE; padding:0 20px 0 34px;
}

/* Regular Desktop */
@media only screen and (min-width:1024px) {

}

/* Tablet Portrait */
@media only screen and (min-width:768px) and (max-width:1023px) {

	.template-1 #main > .row
	{
		width:708px;
	}
	.template-2 #main > .row
	{
		width:708px;
	}
	.template-2 #main > .row-2 > .col-1,
	.template-2 #main > .row-2 > .col-3
	{
		width:200px;
		margin:0 15px 0 0;
	}
	.template-2 #main > .row-2 > .col-2
	{
		width:493px;
	}

	.template-3 #main > .row
	{
		width:708px;
	}
	.template-3 #main > .row-2 > .col-2
	{
		width:231px;
	}
	.template-3 #main > .row-2 > .col-1,
	.template-3 #main > .row-2 > .col-3
	{
		width:447px;
	}

	/* Template 4 Tablet Portrait */
	.template-4 #main > .row
	{
		width:708px;
	}
	.template-4 #main > .row-3 > .col
	{
		width:226px;
		margin-left:15px;
	}
	.template-4 #main > .row-3 > .col-1
	{
		margin-left:0;
	}
	.template-4 #main > .row-4 > .col
	{
		width:299px;
	}

	/* Template 5 Tablet Portrait */
	.template-5 #main > .row
	{
		width:708px;
	}
	.template-5 #main > .row-3 > .col-1
	{
		width:467px;
	}
	.template-5 #main > .row-3 > .col-1 > .projects
	{
		float:left; clear:none;
	}
	.template-5 #main > .row-3 > .col-1 > .projects > .column
	{
		width:226px;
	}
	.template-5 #main > .row-3 > .col-1 > .projects > .column-1
	{
		margin-left:0;
	}
	.template-5 #main > .row-3 > .col-1 > .projects > .column-2
	{
		margin-left:15px;
	}
	.template-5 #main > .row-3 > .col-2
	{
		width:226px;
		margin-left:15px;
	}
	.template-5 #main > .row-4 > .col
	{
		width:299px;
	}


	/* Template 6 Tablet Portrait */
	.template-6 #main > .row
	{
		width:708px;
	}
	.template-6 #main > .row-3 > .col
	{
		width:708px;
	}
	.template-6 #main > .row-3 > .col .project-grid > .column
	{
		width:226px;
		margin-left:15px;
	}
	.template-6 #main > .row-3 > .col-1 .project-grid > .column-1
	{
		margin-left:0;
	}
	.template-6 #main > .row-4 > .col
	{
		float:left;
		width:299px;
	}
}

/* Mobile Portrait & Landscape */
@media only screen and (max-width:767px) {

	.template-1 #main > .row,
	.template-2 #main > .row,
	.template-3 #main > .row,
	.template-4 #main > .row,
	.template-5 #main > .row,
	.template-6 #main > .row
	{
		width:auto;
		padding:0 20px;
	}
	
	.template-2 #main > .row-2 > .col-1,
	.template-2 #main > .row-2 > .col-2,
	.template-2 #main > .row-2 > .col-3
	{
		float:none;
		width:auto;
		margin:0;
	}
	.template-2 #main > .row-2 > .col-1
	{
		margin:0 0 20px 0; padding:0 0 20px 0;
		border-bottom:3px solid #EEE;
	}

	.template-3 #main > .row-2 > .col-1,
	.template-3 #main > .row-2 > .col-2,
	.template-3 #main > .row-2 > .col-3
	{
		float:none;
		width:auto;
	}

	/* Template 4 Mobile */
	.template-4 #main > .row
	{
		width:auto;
	}
	.template-4 #main > .row > .col
	{
		float:none;
		width:auto;
		margin-left:0; margin-right:0;
	}
	.template-4 #main > .row-4
	{
		margin-bottom:36px; border:0 none; padding-top:0;
	}
	.template-4 #main > .row-4 > .col
	{
		height:auto;
	}
	.template-4 #main > .row-4 > .col-1
	{
		margin:0 0 10px 0; border:0 none; border-top:3px solid #EEE; padding:20px 0 0 0;
	}
	.template-4 #main > .row-4 > .col-2
	{
		margin:0; border:0 none; padding:0;
	}

	/* Template 5 Mobile */
	.template-5 #main > .row
	{
		width:auto;
	}
	.template-5 #main > .row > .col
	{
		float:none;
		width:auto;
		margin-left:0; margin-right:0;
	}
	.template-5 #main > .row-1
	{
		margin-top:0;
	}
	.template-5 #main > .row-2
	{
		margin-bottom:25px;
	}
	.template-5 #main > .row-3 > .col-1 > .projects > .column
	{
		float:none;
		width:auto;
		margin-left:0; margin-right:0;
	}
	.template-5 #main > .row-4
	{
		margin-bottom:36px; border:0 none; padding-top:0;
	}
	.template-5 #main > .row-4 > .col
	{
		height:auto;
	}
	.template-5 #main > .row-4 > .col-1
	{
		margin:0 0 10px 0; border:0 none; border-top:3px solid #EEE; padding:20px 0 0 0;
	}
	.template-5 #main > .row-4 > .col-2
	{
		margin:0; border:0 none; padding:0;
	}

	/* Template 6 Mobile */
	.template-6 #main > .row
	{
		width:auto;
	}
	.template-6 #main > .row > .col
	{
		float:none;
		width:auto;
		margin-left:0; margin-right:0;
	}
	.template-6 #main > .row-1
	{
		margin-top:0;
	}
	.template-6 #main > .row-2
	{
		margin-bottom:25px;
	}
	.template-6 #main > .row-3 > .col-1 .project-grid > .column
	{
		float:none;
		width:auto;
		margin-left:0; margin-right:0;
	}
	.template-6 #main > .row-4
	{
		margin-top:30px; margin-bottom:36px; border:0 none; padding-top:0;
	}
	.template-6 #main > .row-4 > .col
	{
		height:auto;
	}
	.template-6 #main > .row-4 > .col-1
	{
		margin:0 0 10px 0; border:0 none; border-top:3px solid #EEE; padding:20px 0 0 0;
	}
	.template-6 #main > .row-4 > .col-2
	{
		margin:0; border:0 none; padding:0;
	}
}

/* Mobile Landscape */

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

}

/* Mobile Portrait */

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

}