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

	/************************************************************************************
	STRUCTURE
	*************************************************************************************/
	.headerwidth {
		width: 700px;
	}
	
	.pagewidth {
		width: 700px;
	}
		
	/* content */
	#content {
		width: 390px;
	}
	
	/* sidebar */
	#sidebar {
		width: 260px;
	}
	
	#controls {
		width: 760px;
		top: -292px;
	}
	
	div.ss-controls {
		position: absolute;
		top: 139px;
		left: 710px;
	}
	div.content {
		height: 249px;
	}
	
	ul.thumbs {
		width: 700px;
	}
		
	/************************************************************************************
	GRID
	*************************************************************************************/
	.col4-1,
	.col4-2,
	.col4-3,
	.col3-1,
	.col3-2,
	.col2-1
	{
		margin-left: 2%;
	}
	.first {
		margin-left: 0;
	}
	.col4-1 {
		max-width: 23%;
	}
	.col4-2, .col2-1 {
		max-width: 48%;
	}
	.col4-3 {
		max-width: 72%;
	}
	.col3-1 {
		max-width: 31%;
	}
	.col3-2 {
		max-width: 62%;
	}
	
}


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

	/************************************************************************************
	STRUCTURE
	*************************************************************************************/
	.headerwidth {
		width: 600px;
	}
	
	.pagewidth {
		width: 600px;
	}
		
	/* content */
	#content {
		width: 340px;
	}
	
	/* sidebar */
	#sidebar {
		width: 220px;
	}
	
	#controls {
		width: 660px;
		top: -300px;
	}
	
	div.ss-controls {
		position: absolute;
		top: 125px;
		left: 612px;
	}
	
	div.content {
		height: 213px;
	}
	
	#site-description {
		font-size: 13px;
	}
	
	div.caption-container {
		height: 48px;
	}
	
	div.caption {
		height: 46px;
		padding-right:100px;
	}
	
	ul.thumbs {
		margin: 70px 0 0 0;
		width: 600px;
	}

		
	/************************************************************************************
	GRID
	*************************************************************************************/
	.col4-1,
	.col4-2,
	.col4-3,
	.col3-1,
	.col3-2,
	.col2-1
	{
		margin-left: 2%;
	}
	.first {
		margin-left: 0;
	}
	.col4-1 {
		max-width: 23%;
	}
	.col4-2, .col2-1 {
		max-width: 48%;
	}
	.col4-3 {
		max-width: 72%;
	}
	.col3-1 {
		max-width: 31%;
	}
	.col3-2 {
		max-width: 62%;
	}
	
}




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

	/************************************************************************************
	STRUCTURE
	*************************************************************************************/
	.headerwidth {
		width: 500px;
	}
	
	.pagewidth {
		width: 500px;
	}
		
	/* content */
	#content {
		width: 260px;
	}
	
	/* sidebar */
	#sidebar {
		width: 210px;
	}
	
	#controls {
		width: 560px;
		top: -280px;
	}
	
	div.ss-controls {
		position: absolute;
		top: 105px;
		left: 513px;
	}
	
	div.content {
		height: 178px;
	}
	
	div.caption-container {
		height: 48px;
	}
	
	div.caption {
		height: 46px;
		padding-right:20px;
	}
	
	#site-description {
		display: none;
	}
	
	ul.thumbs {
		margin: 70px 0 0 0;
		width: 500px;
	}
	
		
	/************************************************************************************
	GRID
	*************************************************************************************/
	.col4-1,
	.col4-2,
	.col4-3,
	.col3-1,
	.col3-2,
	.col2-1
	{
		margin-left: 2%;
	}
	.first {
		margin-left: 0;
	}
	.col4-1 {
		max-width: 23%;
	}
	.col4-2, .col2-1 {
		max-width: 48%;
	}
	.col4-3 {
		max-width: 72%;
	}
	.col3-1 {
		max-width: 31%;
	}
	.col3-2 {
		max-width: 62%;
	}
	
}





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

	/************************************************************************************
	STRUCTURE
	*************************************************************************************/

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}
	
	#content {
		width: 300px;
		float: none;
		clear: both;
		margin: 0;
	}
	
	/* sidebar */
	#sidebar {
		width: 300px;
		float: none;
		clear: both;
		margin: 0 0 30px 0;
	}
	
	#controls {
		display: none;
	}
	

	.headerwidth {
		width: 300px;
	}
	
	.pagewidth {
		width: 300px;
	}
	
	div.content {
		height: 106px;
	}
	
	#site-description {
		display: none;
	}
	
	div.caption-container {
		height: 68px;
	}
	
	div.caption {
		height: 66px;
		padding-right:20px;
	}
	
	ul.thumbs {
		margin: 90px 0 0 0;
		width: 300px;
	}
	
	#site-logo {
		margin: 0;
	}
	
	#site-logo a {
		margin: 0 0 0 -23px;
	}

		
	/************************************************************************************
	GRID
	*************************************************************************************/
	.col4-1,
	.col4-2,
	.col4-3,
	.col3-1,
	.col3-2,
	.col2-1
	{
		margin-left: 2%;
	}
	.first {
		margin-left: 0;
	}
	.col4-1 {
		max-width: 23%;
	}
	.col4-2, .col2-1 {
		max-width: 48%;
	}
	.col4-3 {
		max-width: 72%;
	}
	.col3-1 {
		max-width: 31%;
	}
	.col3-2 {
		max-width: 62%;
	}
	
	/************************************************************************************
	HEADER
	*************************************************************************************/
	/* reset absolute elements to static */
	#site-logo, #site-description, #main-nav  {
		position: static;
		float: none;
		clear: both;
	}
	
	
	/* header */
	#header {
		height: auto;
		padding-top: 0px;
	}
	
	/* site logo */
	#site-logo a {
		font-size: 30px;
	}

	/* site description */
	#site-description {
		margin: 0 0 10px;
		font-size: 13px;
	}
	
	h2 span {
		border-bottom: 0;
	}

}