/**
 * These styles are based on a handful of classes, for a 3-column reactive layout.
 * Each column is equal to 300px, with 20px gutters between them. There is also an additional
 * 20px to the outside edge for page margins before the outside whitespace kicks in, making
 * the maximum possible page width 980px. Widthwise sidebars only have padding on the right,
 * allowing simplification of widget margins by setting all widget left margins to 20px, letting
 * them collapse downward when the site's width adjusts.
 *
 * To allow widgets to be as flexible as possible in their display, we give them the following
 * classes based on their preferences in the Wordpress widgets config to control their width
 * at various screen sizes:
 * 		s3cols_3, s3cols_2, s3cols_1, s3cols_hide
 * 		s2cols_2, s2cols_1, s2cols_hide
 * 		s1cols_1, s1cols_hide
 */

/************************************ THREE COLUMN LAYOUT ********************************/

.s3cols_3 { width: 940px; }
.s3cols_2 { width: 620px; }
.s3cols_1 { width: 300px; }
.s3cols_hide { display: none; }

/************************************* TWO COLUMN LAYOUT *********************************/

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

	.s2cols_2 { display: block; width: 620px; }
	.s2cols_1 { display: block; width: 300px; }
	.s2cols_hide { display: none; }

	/* no more minimum height for the page body */
	#main {
		min-height: 0;
	}

	/* site-width container elements, with 20px horizontal padding to the right (left is added to each widget) */
	.home .widget-area div.sidebar-inner,
	#footer div.sidebar-inner {
		width: 640px;
	}
	/* site-width container elements which don't have widgets in them */
	#header-content, #home-search-container {
		width: 620px;
	}
	/* site-width container elements which don't have widgets or padding in them */
	#access .navbar-inner {
		width: 660px;
	}

	/* widget internals needing to react when container sidebars have no margins */
	aside.quicklinks.s2cols_2 .links,
	aside.twitterpanel.s2cols_2 .tweets,
	aside.facepanel.s2cols_2 .tweets,
	aside.postslistpanel.s2cols_2 .moar {
		width: 640px;
	}
	aside.quicklinks.s2cols_1 .links,
	aside.twitterpanel.s2cols_1 .tweets,
	aside.facepanel.s2cols_1 .tweets,
	aside.postslistpanel.s2cols_1 .moar {
		width: 320px;
	}

	/* header adjustments */
	#home-search-links.s2cols_2 {
		margin-left: 0;
		width: 620px;
	}
	#home-search-links span.align-bottom {
		top: -16px;
		bottom: auto;
	}
	#home-search-links a {
		margin-top: 20px;
	}
	#home-search-links a.last {
		margin-left: 20px;
	}

	#home-search-links span {
		right: -10px;	/* prevent these pushing the page edge out */
	}

	/* turn smaller page sidebar widget headings into top-level ones */
	#blog-sidebar h3.widget-title,
	#general-sidebar h3.widget-title,
	#blog-sidebar h1,
	#general-sidebar h1 {
		font-family: 'Open Sans n3', 'Open Sans';
		font-weight: 300;
		font-size: 28px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgb(200,200,200);
		margin-top: 30px;
		margin-bottom: 0;
		text-transform: uppercase;
		background-position: left 10px;
	}

	/* bring all top-level heading sizes down */
	h1,
	aside h3.widget-title,
	aside h3.widget-title.icon,
	#blog-sidebar h1,
	#general-sidebar h1,
	#blog-sidebar h1.icon,
	#general-sidebar h1.icon,
	.post-comments #reply-title,
	#blog-sidebar h3.widget-title,
	#general-sidebar h3.widget-title,
	#blog-sidebar h3.widget-title.icon,
	#general-sidebar h3.widget-title.icon,
	h1.icon, h3.icon,
	#blog-sidebar aside.widget_categories h3.widget-title,
	#general-sidebar aside.widget_categories h3.widget-title,
	#blog-sidebar aside.widget_tags h3.widget-title,
	#general-sidebar aside.widget_tags h3.widget-title,
	.staffpanel h3.widget-title,
	.testespanel h3.widget-title,
	.blogpanel h3.widget-title,
	.postslistpanel h3.widget-title,
	.newsletterpanel h3.widget-title,
	.quicklinks h3.widget-title,
	.twitterpanel h3.widget-title,
	.facepanel h3.widget-title,
	.staffpanel h3.widget-title.icon,
	.testespanel h3.widget-title.icon,
	.blogpanel h3.widget-title.icon,
	.postslistpanel h3.widget-title.icon,
	.newsletterpanel h3.widget-title.icon,
	.quicklinks h3.widget-title.icon,
	.twitterpanel h3.widget-title.icon,
	.facepanel h3.widget-title.icon,
	.post-comments #reply-title {
		font-size: 24px;
		background-position: left 3px;
	}

	/* search results form adjustments */
	#searchform-properties div.sidebar-inner div.options {
		width: 620px;
		padding-bottom: 15px;
		margin-bottom: 12px;
		border-bottom: 1px dashed rgb(200,200,200);
	}

	#searchform-properties div.options label {
		width: 300px;
		float: left;
	}

	#searchform-properties div.options label.odd {
		margin-left: 20px;
	}

	/* testimonials widget adjustments */
	aside.testespanel a,
	aside.testespanel p {
		margin-left: 0;
	}
	aside.testespanel p {
		margin-right: 20px;
	}
	aside.testespanel a {
		margin-top: 15px;
		float: left;
	}

	/* cforms widget adjustments */
	aside.widgetcform.s2cols_2 fieldset legend,
	aside.widgetcform.s2cols_2 input[type=text],
	aside.widgetcform.s2cols_2 textarea,
	aside.widgetcform.s2cols_2 input[type=password] {
		width: 96%; /* 2 column widget */
		width: 96.5%;
	}
	aside.widgetcform.s2cols_1 fieldset legend,
	aside.widgetcform.s2cols_1 input[type=text],
	aside.widgetcform.s2cols_1 textarea,
	aside.widgetcform.s2cols_1 input[type=password] {
		width: 93%;	/* 1 column widget */
	}

	/* property list row adjustments */
	ol.properties {
		width: 640px;
		padding-right: 0;
	}

	ol.properties li {
		float: left;
		margin-right: 20px;
	}

	ol.properties li.second {
	    border-top: 0 none;
	    margin-top: 0;
	}

	ol.properties li.even {
		clear: left;
	}

	ol.properties li,
	ol.properties .property-body,
	ol.properties .property-details,
	ol.properties div.property-meta {
		width: 300px;
	}

	ol.properties .property-meta p.listingagent {
		display: none;
	}

	ol.properties .property-meta p.price {
		float: left;
		padding: 3px 6px;
		margin: 10px 11px 0 0;
		background: rgb(238,238,238);
		font-family: 'Open Sans i6', 'Open Sans';
		font-weight: 600;
		font-style: italic;
		font-size: 17px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;
		border-radius: 4px;
	}

	ol.properties .property-meta p.price,
	ol.properties .property-meta p.rooms {
		border: 0;
		display: inline;
	}

	ol.properties .property-body h4 {
		margin: 15px 0 10px 0;
	}

	ol.properties .property-body h4 a {
		font-family: 'Open Sans n6', 'Open Sans';
		font-weight: 600;
	}

	/* property detail page adjustments */
	.property-single .map .post-image {
		width: 608px;
	}

	.agent {
		margin-left: 0;
	}

	/* staff list page adjustments */
	#page-body.staff {
		width: 640px;
	}

	#page-body.staff .agent {
		margin-left: 20px;
	}

	ol.staff li.third {
		margin-top: 1em;
		border-top: 1px solid #C8C8C8;
	}

	ol.staff li.triple {
		clear: none;
	}

	ol.staff li.double {
		clear: left;
	}

	/* right sidebar adjustments */
	#blog-sidebar,
	#general-sidebar {
		width: 620px;
		padding-left: 0;
	}

	#blog-sidebar aside.quicklinks ul,
	#general-sidebar aside.quicklinks ul,
	#blog-sidebar aside.quicklinks div.links,
	#general-sidebar aside.quicklinks div.links,
	#blog-sidebar aside.twitterpanel div.tweets,
	#general-sidebar aside.twitterpanel div.tweets,
	#blog-sidebar aside.facepanel div.tweets,
	#general-sidebar aside.facepanel div.tweets,
	#blog-sidebar aside.postslistpanel div.moar,
	#general-sidebar aside.postslistpanel div.moar {
		width: 640px;
	}

	#blog-sidebar aside.quicklinks li,
	#general-sidebar aside.quicklinks li,
	#blog-sidebar aside.postslistpanel ol,
	#general-sidebar aside.postslistpanel ol,
	#blog-sidebar aside.twitterpanel ol,
	#general-sidebar aside.twitterpanel ol,
	#blog-sidebar aside.facepanel ol,
	#general-sidebar aside.facepanel ol {
		margin-right: 20px;
		width: 300px;
	}

	#blog-sidebar aside.twitterpanel div.line,
	#general-sidebar aside.twitterpanel div.line,
	#blog-sidebar aside.facepanel div.line,
	#general-sidebar aside.facepanel div.line {
		width: 620px;
	}

	ol.posts,
	ol.testimonials,
	div.staffpage,
	div.page {
		border-right: 0;
	}
}

/************************************* ONE COLUMN LAYOUT *********************************/

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

	.s1cols_1 { display: block; width: 300px; }
	.s1cols_hide { display: none; }

	/* site container elements & widget internals to reduce down to the 1-column size */
	.home .widget-area div.sidebar-inner,
	#footer div.sidebar-inner,
	#header-content, #home-search-container,
	div.staffdetails,
	div.page,
	div.stafflistings,
	aside.quicklinks.s1cols_1 .links,
	aside.twitterpanel.s1cols_1 .tweets,
	aside.facepanel.s1cols_1 .tweets,
	aside.postslistpanel.s1cols_1 .moar,
	aside h1,
	aside.header,
	aside.testespanel ol,
	#home-search-links.s1cols_1,
	#searchform-properties div.sidebar-inner div.options,
	#blog-sidebar,
	#general-sidebar,
	#blog-sidebar aside.quicklinks ul,
	#general-sidebar aside.quicklinks ul,
	#blog-sidebar aside.quicklinks div.links,
	#general-sidebar aside.quicklinks div.links,
	#blog-sidebar aside.twitterpanel div.tweets,
	#general-sidebar aside.twitterpanel div.tweets,
	#blog-sidebar aside.facepanel div.tweets,
	#general-sidebar aside.facepanel div.tweets,
	#blog-sidebar aside.postslistpanel div.moar,
	#general-sidebar aside.postslistpanel div.moar,
	#blog-sidebar aside.twitterpanel div.line,
	#general-sidebar aside.twitterpanel div.line,
	#blog-sidebar aside.facepanel div.line,
	#general-sidebar aside.facepanel div.line,
	#page-body,
	#page-body.staff {
		width: 300px;
		padding-right: 0;
		padding-left: 0;
	}

	/* site-width container elements which don't have widgets or padding in them */
	#access .navbar-inner {
		width: 320px;
	}

	/* drop back top-level margins & widget gutters on all page elements */
	#footer aside,
	aside h1,
	.home .widget-area aside,
	aside.twitterpanel ol,
	aside.facepanel ol,
	aside.postslistpanel ol,
	aside.quicklinks ul,
	.twitterpanel .tweets,
	.facepanel .tweets,
	.postslistpanel .moar,
	.quicklinks .links,
	#home-search-links a,
	#home-search-links a.last,
	#blog-sidebar aside.quicklinks ul,
	#general-sidebar aside.quicklinks ul,
	#blog-sidebar aside.quicklinks li,
	#general-sidebar aside.quicklinks li,
	#blog-sidebar aside.postslistpanel ol,
	#general-sidebar aside.postslistpanel ol,
	#blog-sidebar aside.twitterpanel ol,
	#general-sidebar aside.twitterpanel ol,
	#blog-sidebar aside.facepanel ol,
	#general-sidebar aside.facepanel ol {
		margin-left: 0;
		margin-right: 0;
	}

	/* bring all top-level heading sizes down */
	h1,
	aside h3.widget-title,
	aside h3.widget-title.icon,
	#blog-sidebar h1,
	#general-sidebar h1,
	#blog-sidebar h1.icon,
	#general-sidebar h1.icon,
	.post-comments #reply-title,
	#blog-sidebar h3.widget-title,
	#general-sidebar h3.widget-title,
	#blog-sidebar h3.widget-title.icon,
	#general-sidebar h3.widget-title.icon,
	#blog-sidebar aside.widget_categories h3.widget-title,
	#general-sidebar aside.widget_categories h3.widget-title,
	#blog-sidebar aside.widget_tags h3.widget-title,
	#general-sidebar aside.widget_tags h3.widget-title,
	h1.icon, h3.icon,
	.staffpanel h3.widget-title,
	.testespanel h3.widget-title,
	.blogpanel h3.widget-title,
	.postslistpanel h3.widget-title,
	.newsletterpanel h3.widget-title,
	.quicklinks h3.widget-title,
	.twitterpanel h3.widget-title,
	.facepanel h3.widget-title,
	.staffpanel h3.widget-title.icon,
	.testespanel h3.widget-title.icon,
	.blogpanel h3.widget-title.icon,
	.postslistpanel h3.widget-title.icon,
	.newsletterpanel h3.widget-title.icon,
	.quicklinks h3.widget-title.icon,
	.twitterpanel h3.widget-title.icon,
	.facepanel h3.widget-title.icon,
	.post-comments #reply-title {
		font-size: 20px;
		background-position: left top;
	}

	/* header adjustments */
	#home-search-links a,
	#home-search-links a.last {
		margin-top: 10px;
	}

	/* search results form adjustments */
	#searchform-properties div.sidebar-inner div.suburbs {
		padding-bottom: 15px;
		margin-bottom: 12px;
		border-bottom: 1px dashed rgb(200,200,200);
	}

	#searchform-properties div.options label.odd {
		margin-left: 0;
	}

	#searchform-properties .searchstate a p {
		visibility: hidden;
	}

	#searchform-properties .searchstate a .changebtn {
		width: 318px;
		margin: 0 -10px 0 -10px;
		left: 0;
	}

	#searchform-properties .searchstate a .changebtn div {
    	background-position: 288px 7px;
    }

    #searchform-properties .expanded a .changebtn div {
	    background-position: 288px -10px;
	}

    #searchform-properties .searchstate a .changebtn span {
    	padding-left: 79px;
    }

	#searchform-properties .searchstate a .changebtn span.largesize {
		display: none;
	}

	#searchform-properties .searchstate a .changebtn span.smallsize {
		display: block;
	}

	#searchform-properties .order .orders {
		padding-bottom: 17px;
	}

	/* testimonials widget adjustments */
	aside.testespanel .testimonial {
		padding: 20px;
		background-image: none;
	}

	aside.testespanel li span {
		margin-left: 39px;
	}

	aside.testespanel .bubble-arrow {
		background-position: -40px top;
	}

	aside.quicklinks li {
		margin-left: 0;
	}

	/* staff widget adjustments */
	aside.staffpanel li {
		margin-left: 0;
	}

	/* collapse whitespace we would previously force to a single line */
	.post-meta .date,
	.post-meta .cats,
	.post-meta .tags,
	.post-meta .author,
	.post-meta .comments {
		white-space: normal;
	}

	/* modify search form layout to suit small width */
	#header-search {
		margin-left: -10px;
		margin-right: -10px;
		padding: 15px;
		width: 290px;
		height: auto;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		-o-border-radius: 0;
		border-radius: 0;
	}

	#searchform-options {
		white-space: normal;
	}

	#searchform-options select,
	#searchform-options select.last {
		width: 130px;
		margin: 0 10px 10px 0;
		padding: 3px 0;
	}

	#searchform-options select.column-end {
		margin: 0 0 10px 10px;
	}

	#searchform-box input[type="text"] {
		width: 190px;
	}

	/* hide the main menu for phone display and replace with dropdowns */
	#access .menu-main-menu-container { display: none; }
	#access .mini-menu { display: block; }

	#access .contactpane { display: none; }

	/* property list row adjustments */
	ol.properties {
		width: 300px;
	}

	ol.properties li,
	ol.properties li.second,
	div.stafflistings li.second {
		margin-top: 3em;
		border-top: 1px solid rgb(200,200,200);
	}

	ol.properties li.first {
		margin-top: 0;
	}

	/* property detail page adjustments */
	ol.inspections-list li {
		margin-right: 0;
	}

	ol.inspections-list li.second {
		margin-top: 15px;
		border-top: 1px dashed rgb(200,200,200);
	}

	.property-single .images .post-image.large {
		display: none;
	}

	.posts .post-image.large {
		max-width: 300px;
		height: 225px;
	}

	.property-single .map .post-image {
		width: 288px;
	}

	/* staff list page adjustments */
	#page-body.staff aside.header h1,
	#page-body.staff .navigation {
		margin-left: 0;
	}

	#page-body.staff .agent {
		margin-left: 0;
	}

	ol.staff li.second {
		margin-top: 1em;
		border-top: 1px solid #C8C8C8;
	}

	ol.staff li.double {
		clear: none;
	}

	/* staff detail page adjustments */
	div.staffdetails .agent {
		margin-left: 0;
	}

	/* blog detail page adjustments */
	ol.commentlist ul.children {
		padding-left: 5px;
	}

	/* form adjustments */
	.cform fieldset legend,
	.cform input[type=text],
	.cform input[type=password],
	.cform textarea,
	aside.widgetcform.s1cols_1 fieldset legend,
	aside.widgetcform.s1cols_1 input[type=text],
	aside.widgetcform.s1cols_1 textarea,
	aside.widgetcform.s1cols_1 input[type=password] {
		width: 93%;
	}

	.cform input.cf_error {
		width: 86%;
	}

	div.cf_info {
		width: 76%;
		width: 76.5%;
		font-size: 14px;
	}

	.property-single .maincell {
		width: 300px;
	}
	.property-single .picon.price {
		width: 267px;
	}
}