/* 
 * max-width: 1030px
 * Hide right column profile image / slideshow picker
 * Disable project slideshows
 * Convert slideshow left column to image viewing
 * Our People margins
*/
@media screen and (max-width: 1030px) {
	#content .aside.profile {display: none;}
	#slideshow-images {
		width: 100%;
		max-width: 463px;
		height: auto;
	}
	#slideshow-images img {width: 100%; height: auto;}
	img.alignleft.size-medium,
	img.aligncenter.size-large {width: 100%; height: auto; margin: 1em 0;}
	
	ul.our-people li.headshifter {
		max-width: 225px;
	    width: 32%;
		margin-right: 2%;
		overflow: hidden;
	}
	ul.our-people li.headshifter a {
	    width: 100%;
		background-position: center center !important;
	}
	ul.our-people li.headshifter a span.name {
		width: 91%; /* webkit not adding percentage accurately */
		padding: 5%;
	}
	ul.our-people li.headshifter a span.interests {
		width: 91%; /* webkit not adding percentage accurately */
		padding: 8px 5%;
		font-size: 2em;
		line-height: 1.1em;
		height: 149px;
	}
}

/* 
 * max-width: 900px 
 * Inherit above
 * Convert toolbar options to icon only
 * Resize search field
 * Set height for footer link floats
*/
@media screen and (max-width: 900px) {
	#toolbar ul li span {
		padding: 0 10px;
		width: 30px;
	}
	#toolbar ul li span a {
		padding: 20px 15px 0 0;
		overflow: hidden;
		height: 1px;
	}
	#toolbar ul li#search span {width: auto;}
	#toolbar form#searchform div {width: 183px;}
	#toolbar form#searchform input#s {width: 143px;}
	#footer #sitemap ul {height: 85px; margin: 0 10px 20px 0;}
}

/* 
 * max-width: 775px
 * Inherit above
 * Begin disabling floats
 * Resize header, remove image
 * Reposition logo
 * Switch to horizontal ribbon text and navigation
 * Switch to horizontal secondary navigation
*/
@media screen and (max-width: 775px) {
	#toolbar,
	#header,
	#content,
	#ribbon,
	#content #posts,
	#content #article,
	#content #posts .listContainer1 {
		float: none;
		width: auto;
		min-width: 0;
	}
	#toolbar {
		background: #7E838A;
		border-bottom: 1px solid #63666B;
	}
	#toolbar ul li#themes {display: none;}
	#footer ul#footer-themes {display: none;}
	
	#header {
		height: 100px;
		background: #797E85 !important;
	}
	#header .logo {
		position: relative !important;
		float: none !important;
		margin: 0 auto !important;
	}
	#header .logo a {
		float: left;
		margin: 10px 0;
	}
	#header .logo.studio a {
		background: url("../../coldharbour/images/logo.png") top left no-repeat;
	}
	
	#header .cc, #header .attribution {display: none;}

	#ribbon {
		min-width: 0;
		padding: 10px 5%;
		height: 25px;
	}
	#ribbon #navigation {
		position: relative;
		width: 100%;
		margin: 0;
		text-align: center;
		height: auto;
		border-bottom: 1px solid #EEE;
		padding: 0 0 10px 0;
	}
	#ribbon #navigation li,
	#ribbon #navigation li.selected {
		display: inline;
		margin: 0 7%;
		padding: 0;
		border: none;
		background: none;
	}
	#ribbon p {
		font-size: 1.6em;
		line-height: 1.4em;
		padding: 2px 0;
		width: 100%;
	}
	
	#content {min-width: 0; padding: 18px 5%;}
	#content #secondary-navigation {
		float: left;
		width: 100%;
		min-width: 0;
		margin: 0 0 25px 0;
	}
	ul.menu li {
		float: left;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #EEE;
		padding: 8px 0;
	}
	ul.menu li.current-menu-item a, ul.menu li.current_page_parent a {
		display: block;
		background-position: 0 -27px;
	}
	ul.menu li a {height: 17px;}
	ul.menu li ul.sub-menu li {
		border: none;
		width: auto;
		margin: 5px 23px 0 0;
		height: 17px;
	}
	ul.menu li ul.sub-menu li a, ul.menu li ul.sub-menu li a:hover {
		padding-left: 23px;
		border-left: 1px solid #EEE;
	}
	ul.menu li.current-menu-item ul.sub-menu, ul.menu li.current_page_parent ul.sub-menu {
		float: left;
		margin-bottom: 5px;
	}
	
	#footer #sitemap ul {width: 28%;}
}

/* 
 * max-width: 665px
 * Inherit above
 * Full width on content
 * Push sidebar below content
 * Hide profile sidebar
 * Locations / Subscribe edits
*/
@media screen and (max-width: 665px) {
	#toolbar ul li#search span {width: auto; padding-right: 0;}
	
	#content #posts .section,
	#content #article .section {
		min-height: 0;
 		min-width: 0;
		width: 100%;
	}
	#content .aside {
		clear: both;
		float: none;
		border-left: none;
		border-top: 1px solid #F3F4F6;
		margin: 5% 0;
		padding: 3% 0;
		width: 100% ;
 		min-width: 0;
 		max-width: none;
	}
	#content .aside.profile {display: none;}

	#content #article .section-grid-block.aside {
		float: left;
		clear: none;
		width: 45.415%;
		max-width: none;
		border-top: none;
		height: auto;
		margin: 2% 0;
	}
	#content #article #map_canvas {margin: 15px 0;}
	ul.our-people li.headshifter a span.interests {
		font-size: 1.7em;
		line-height: 1.3em;
	}
	ul.our-people li.headshifter a span.name strong {display: none;}
	ul.our-people li.headshifter a span.name {padding-bottom: 5px;}
}


/* 
 * max-width: 615px
 * Switch category/tag columns to 50/50
 * Switch footer to 50/50
 * Extend Toolbar, push Search and icons down
 * Our People shape-shifting
 * Hide ribbon text, resize ribbon
 * Change secondary navigation to percentage
*/
@media screen and (max-width: 615px) {
	#toolbar a.dachisgroup {margin: 0 auto; float: none; }
	#toolbar {height: 80px; padding: 7px 0;}
	#toolbar ul {
		clear: both;
		float: none;
		width: 96%;
		margin: 10px auto;
		max-width: 375px;
		border-top: 1px solid #949699;
	}
	#ribbon #navigation li,
	#ribbon #navigation li.selected {
		margin: 0 4%;
	}
	#ribbon p {display: none;}
	#ribbon #navigation {
	    border-bottom: none;
	    height: auto;
	    margin: 0;
	    padding: 0;
	    width: 100%;
	}
	ul.menu li ul.sub-menu li a, ul.menu li ul.sub-menu li a:hover {font-size: 1.4em;}
	ul.menu li ul.sub-menu li {width: 48%; margin-right: 2%;}
	h1 {
		font-size: 2.6em !important;
		margin: 0 !important;
		padding: 5% 2.5% 0 0 !important;
	}
	.post {font-size: 1.4em !important;}
	.post img {width: 100%; height: auto; float: none; margin: 1em 0 !important;}
	#content #article .section p.author-position {clear: both;}
	#content #posts .section {
		border-top: 1px solid #F3F4F6;
		margin: 3% 0;
		padding: 3% 0;
	}
	#content #posts p.site-lede {margin-bottom: 30px;}
	#content .aside {margin: 3% 0; padding: 5% 0;}
	
	#content #posts ul.list-columns.listCol1,
	#content #posts ul.list-columns.listCol2,
	#content #posts ul.wp-tag-cloud.listCol1,
	#content #posts ul.wp-tag-cloud.listCol2 {
	    margin: 0;
		width: 50%;
	}
	#content #posts .listContainer1 {margin-top: 5%;}
	#footer {padding: 5% 2.5%;}
	#footer #sitemap ul {width: 40%;}
	
	ul.our-people {margin-top: 20px;}
}


/* 
 * max-width: 480px
 * Inherit above
 * Ribbon edits
 * Resize toolbar search and icons
 * Article / post formatting
*/
@media handheld and (max-device-width: 480px), screen and (max-width: 480px)  {
	#toolbar ul li span {padding: 0 5px;}
	#toolbar ul {max-width: 335px; min-width: 0;}
	#ribbon {
	    height: 15px;
	    min-width: 0;
	    padding: 13px 5% 17px;
	}
	#ribbon #navigation li,
	#ribbon #navigation li.selected {margin: 0 3%;}
	#ribbon #navigation li a {font-size: 1.7em; padding: 0 0 0 25px; line-height: 1.2em; background-position: 0 4px !important;}
	#ribbon #navigation li.selected a {background-position: 0 4px !important;}
	
	ul.menu li ul.sub-menu li {width: 95%;}
	
	#content {padding: 0 5%; min-width: 0;}
	
	
	h1 {font-size: 2.4em !important;}
	#content #posts .section h2.entry-title {font-size: 1.3em;}
	#content #posts h2.archive-title {font-size: 1.9em; padding-bottom: 15px;}
	#content #posts p.site-lede {
		font-size: 1.6em;
		margin: 5% 0 0 0;
		padding: 3% 0 0 0;
		width: 100%;
	}
	
	p img {width: 100%; height: auto; float: none; margin: 1em 0 !important;}
	#content #article .section-grid-block {
	    width: auto;
	}
	#content #article .section-grid-block.aside {
		clear: both;
		width: 95.83%;
	}
	#respond h3#reply-title {font-size: 1.8em !important;}
	#respond #commentform textarea {width: 97%;}

	#content #article em.cite {margin: 10px 0 20px;}
	#content #article p.lede {width: auto;}

	.page-title {width: 100%; margin: 5% 0;}
	#content .attachment .entry-meta {
	    font-size: 1.4em;
		line-height: 1.5em;
	}
	#content .attachment h2.entry-title {font-size: 2.4em;}
	#content #article .section-grid-block.first {display: none;}

	#footer ul {display: none;}

	ul.our-people li.headshifter {width: 48%;}
	ul.our-people li.headshifter.nth-child {margin-right: 2%;}
}

/* 
 * max-width: 360px (mobile)
 * Inherit above
 * Based on 320px screens, with a buffer to phones below 460px
*/
@media handheld and (max-device-width: 360px) and (orientation: portrait), screen and (max-width: 360px) {
	#site {width: 100%; min-width: 0;}
	
	/* footer: mobile navigtion */
	#mobile-navigation {display: block; padding: 0 5%;}
	#mobile-navigation a {
		color: #DDD;
		font-size: 1.4em;
	}
	#mobile-navigation a.menu {
		color: #FFF;
		font-weight: bold;
		padding: 0 25px 0 30px;
		border-right: 1px solid #666;
		margin-right: 25px;
		background: url("../../coldharbour/images/mobile-arrow.png") center left no-repeat;
	}
	#copyright {display: none;}
	
	/* headers */
	h1,
	#content #article h1,
	#content #article h1.entry-title,
	#content #article h2.entry-title {font-size: 2.6em !important;}	
	h1 {padding: 0 2.5% 0 0 !important;}

	/* toolbar: hide themes, size adjustments */
	#toolbar {padding: 7px 0;}
	#toolbar ul {width: 96%; max-width: none; padding: 0 2%;}
	#toolbar ul li span {padding: 0 4px;}
	#toolbar form#searchform input#s {width: 123px;}
	#toolbar form#searchform div {width: 163px;}
	
	/* mobile logo */
	#header {height: 55px;}
	
	#header .logo a, #header .logo.studio a {
		padding: 50px 0 0 0;
		height: 1px;
		width: 250px;
		margin: 1px 0 0 25px;
		font-size: 2em;
		background: url("../../coldharbour/images/logo-mobile.png") top left no-repeat;
	}
	
	/* vertical ribbon */
	#ribbon {
	    height: 107px;
	    min-width: 0;
	    padding: 5px 5% 18px;
	}
	#ribbon #navigation li,
	#ribbon #navigation li.selected {
		display: block;
		text-align: left;
		width: 100%;
		margin: 0;
		padding: 8px 0;
		border-bottom: 1px solid #EEEEEE;
	}
	#ribbon #navigation li.selected a {background-position: 0 4px !important;}
	#ribbon #navigation li a {
	    background-position: 0 4px !important;
	    font-size: 1.8em;
	    line-height: 1.4em;
	    padding: 0 0 0 28px;
	}

	/* vertical navigation */
	ul.menu li a {font-size: 1.7em; height: 18px; padding-left: 28px;}
	ul.menu li ul.sub-menu li {padding: 2px 0;}
	ul.menu li ul.sub-menu li a, ul.menu li ul.sub-menu li a:hover {
		font-size: 1.5em;
		padding-left: 28px;
	}
	
	/* posts */
	#content #posts .entry-meta {margin: 5px 0 0;}
	#content #posts .section .entry-utility {display: none;}

	/* page / post */
	.post {font-size: 1.6em !important;}	

	#content #posts .post, #content #posts .page,
	#content #posts .hs_presentation, #content #posts .hs_event,
	#content #article .page {margin-bottom: 15px;}

	#content #article .section .page,
	#content #article .section .post,
	#content #article .section .hs_presentation,
	#content #article .section .hs_event,
	ul#on-the-web,
	#content #article .section-grid-block p {
		font-size: 1.6em;
		line-height: 1.4em;
	}
	
	#content #article blockquote p {font-size: 1em;}
	#content #article .section p.author-position {font-size: 1.19em;}
	#content #article .section-grid-block.image img {height: auto;}
	#content #article .section-grid-block.aside h4 {font-size: 1.6em; line-height: 1.3em;}
	#content .aside.metadata span {font-size: 1.5em; line-height: 1.3em;}
	#content .aside.metadata h4 {font-size: 1.6em; line-height: 1.4em;}
	
	.widget h3 {font-size: 1.6em !important; line-height: 1.4em;}
	.widget ul li,
	.widget ul.post-categories li,
	.widget ul.post-tags li {font-size: 1.5em; line-height: 1.3em;}
	
	#content #posts ul.list-columns, #content #posts ul.wp-tag-cloud {width: 100%; font-size: 1.3em !important; margin-top: 10px;}
	#content #posts ul.list-columns li, #content #posts ul.wp-tag-cloud li {padding: 5px 0;}
	#content #posts ul.wp-tag-cloud li a {font-size: 15px !important;}
	#slideshow-images img {height: auto;}
	#content #article #map_canvas {height: 200px !important;}
	#content #article .section-grid-block.aside {
		width: 290px;
		border-left: none;
		border-top: 1px solid #DDD;
		padding: 15px 0 0 0;
	}
	
	/* comments */
	#comments ol.commentlist, #respond #commentform p {font-size: 1.5em;}
	#respond #commentform .form-allowed-tags {display: none;}
	#respond #commentform textarea {height: 100px;}
	#respond #commentform p {padding-bottom: 10px !important;}
	
	span.rss, span.tel, span.email, span.website,
	span.twitter, span.talk, span.aim,
	span.yahoo, span.skype {padding-right: 27px; background-position: right 2px;}

	.edit-link, .comment-edit-link {display: none;}
}

/* 
 * max-width: 280px (mobile)
 * Inherit above
*/
@media handheld and (max-device-width: 280px) and (orientation: portrait), screen and (max-width: 280px) {
	#site {width: 265px;}

	#mobile-navigation a {
		font-size: 1.3em;
	}
	#mobile-navigation a.menu {
		padding: 0 15px 0 30px;
		margin-right: 15px;
	}
	#header .logo a {
		margin: 1px 0 0 5px;
	}
	#toolbar form#searchform input#s {width: 73px;}
	#toolbar form#searchform div {width: 113px;}
}

img.size-thumbnail {width: auto !important; height: auto; margin: 0 !important;}
img.wp-smiley {width: auto !important; height: auto !important; margin: 0 !important;}