@charset "utf-8";

/*

	Standard layout (screen resolutions above 1200px wide)
	____________________________________________________________________________________________________________________________________________________________________
	
*/

	/* link style */
	a{
		
	}
	
	#header{ margin:20px 0 0 0; }
	
	/* navi */
	#navCollapser{ display: none; color:#333; font-size:1em; }
	#nav{
	float: right;
	padding-top: 15px;
	}
	
	#nav .navItem{
		display: inline;
		float: left;
		padding: 0px 5px;
		border-right: solid 1px #ccc;
		}
		
	#nav .lastChild{
		border-right: none;
		padding-right: 0px
		}

	#navCollapser{
		display: none;
	}
	
	.navTip{
		display: none;
	}
	
	
	
	
	
	
	
	.contentHalfRight{
		width: 0%;
		border-left: solid 1px #444444;
		float: right;
		text-align: right;
	}
	
	.contentHalfRightContent{
		position:relative;
		right: 100px;
		}
		
	.contentHalfLeft{
		width: 90%;
		float: left;
		}
		
	#content{
		width: 1200px;	
	}
	
	/* video */
	.video-box{ margin:0 0 100px 0; }
	.movie{ width:500px; }
	
	

/*

	Screen resolutions below 1200px wide
	Suitable for tablets in landscape mode (i.e. iPad 1 & 2, Blackberry Playbook) and netbooks (i.e. HP Mini, Acer Aspire One)
	____________________________________________________________________________________________________________________________________________________________________
	
*/

@media only screen and (max-width: 1200px){
	/* portfolio */
	.portfolioItem{
		float: left;
		width: 210px;
		padding-right: 20px;
		text-align: left;
		padding-bottom: 30px;
		}
		
	.portfolioItem.last{
		padding-right: 0px;
		}
	
	.portfolioItem img{
		border: solid 1px #333;
		width: 210px;
		margin-bottom: 15px;
		}
		

		


}




/*

	Screen resolutions below 960px wide
	Suitable for tablets in portrait mode (i.e. iPad 1 & 2, Blackberry Playbook, Motorola Xoom) and large res smartphones (i.e. Motorola Atrix in landscape mode)
	____________________________________________________________________________________________________________________________________________________________________
	
*/

@media only screen and (max-width: 960px){
	/* portfolio */
	.portfolioItem{
		float: left;
		width: 167px;
		padding-right: 10px;
		text-align: left;
		padding-bottom: 20px;
	}
		
	.portfolioItem.last{
		padding-right: 0px;
	}
	
	.portfolioItem img{
		border: solid 1px #333;
		width: 167px;
		margin-bottom: 15px;
	}
	



		
}

/*

	Screen resolutions below 728px wide
	Suitable for mobile devices (i.e. iPhone, Motorola Atrix, Blackberry)
	____________________________________________________________________________________________________________________________________________________________________

*/

@media only screen and (max-width: 728px){	

	/* link style */
	a{
		color:#333;
		text-decoration:none;
	}

	/* navi */
	#nav{
		float: none;
		margin-top: 30px;
		position:relative;
		z-index:3;
		}
		
	#nav .navItem{
		float: none;
		padding: 15px 0px;
		text-align: center;
		border-right: none;
	}
		
	#nav .lastChild{
		border-right: none;
		padding-right: 0px;
		border-bottom: none;
	}
		
	#nav.collapsible{

		position: absolute;
		top: 0px;
		left: 0px; 
		width: 100%;
		background: #f2f2f2;
		border-bottom:1px solid #ccc;
	}
		
	#navCollapser{
		position:relative;
		z-index:5;
		cursor: pointer;
		width: 100%;
		padding: 15px 0px;
		text-align: center;
		background: #fff;
		border-bottom: solid 1px #ccc;
	}
	
	/* portfolio */
	.portfolioItem{
		float: none;
		width: 100%;
		padding-right: 0px;
		text-align: center;
		padding-bottom: 25px;
	}
		
	.portfolioItem.last{
		padding-right: 0px;
	}
	
	.portfolioItem img{
		border: solid 1px #333;
		width: 100%;
		max-width: 255px;
		margin-bottom: 15px;
	}
	
	
	.contentHalfRight{
		width: 100%;
		border-left: none;
		float: none; 
		clear: both;
		text-align: left;
		}
		
	.contentHalfRightContent{
		margin-left: 0px;
		}
		
	.contentHalfLeft{
		width: 100%;
		float: none; 
		clear: both;
		margin-top: 20px;
		}
	.movie{
		width:100%;
		height:300px;
	}

		


}

@media only screen and (max-width: 320px){	
	.movie{
		width:100%;
	}
}