/*
Theme Name: Sayes Jackson Architects
Author: Sayes Jackson Architects
Author URI: http://sayesjackson.nz/
Description: Wordpress theme for SJA
Version: 1.0
Tags: sja
Text Domain: sja
*/


/**
 * Table of Contents
 *
 * 0.0 - Import
 * 1.0 - Normalize
 * 2.0 - Genericons
 * 3.0 - Typography
 * 4.0 - Elements
 * 6.0 - Navigation
 *   6.1 - Links
 *   6.2 - Menus
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 11.0 - Content
 *    11.1 - Header
 *    11.2 - Posts and pages
 */

/**
 * 0.0 - Import
 *
 * Import me some fonts.
 */

@font-face {
	font-family: 'aileron_regular';
	src: url('fonts/Aileron-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'aileron_thin';
	src: url('fonts/Aileron-Thin.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: 700;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 0;
}

hr {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

code,
kbd,
pre,
samp {
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

select {
	text-transform: none;
}

button {
	overflow: visible;
}

button,
input,
select,
textarea {
	max-width: 100%;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
	opacity: .5;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-right: 0.4375em;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #d1d1d1;
	margin: 0 0 1.75em;
	min-width: inherit;
	padding: 0.875em;
}

fieldset > :last-child {
	margin-bottom: 0;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

optgroup {
	font-weight: bold;
}


/**
 * 2.0 - Genericons
 */

.menu-item-has-children a:after,
.social-navigation a:before,
.dropdown-toggle:after,
.bypostauthor > article .fn:after,
.comment-reply-title small a:before,
.pagination .prev:before,
.pagination .next:before,
.pagination .nav-links:before,
.pagination .nav-links:after,
.search-submit:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: "Genericons";
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-align: center;
	text-decoration: inherit;
	text-transform: none;
	vertical-align: top;
}


/**
 * 3.0 - Typography
 */

body,
button,
input,
select,
textarea {
	color: #333;
	font-family: 'aileron_thin', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.05em;
	line-height: 1.75;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #000;
	font-family: 'aileron_regular', Arial, sans-serif;
	font-size: 15px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	max-width: 600px;
	clear: both;
	margin: 4.0em 0 2.0em 0;
}

h2,
h3,
h4,
h5,
h6 {
	font-size: 13px;
}

p {
	max-width: 600px;
	margin: 2.0em 0 2.0em 0;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

/**
 * 4.0 - Elements
 */

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
	vertical-align: middle;
}

/**
 * 6.0 - Navigation
 */

/**
 * 6.1 - Links
 */

a {
	color: #007acc;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: #686868;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/**
 * 6.2 - Menus
 */


/**
 * 8.0 - Alignments
 */

.alignleft {
	float: left;
	/*margin: 0.375em 1.75em 1.75em 0;*/
}

.alignright {
	float: right;
	/*margin: 0.375em 0 1.75em 1.75em;*/
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
	/*margin: 0 auto 1.75em;*/
}

/**
 * 9.0 - Clearings
 */

.clear:before,
.clear:after,
blockquote:before,
blockquote:after,
.entry-content:before,
.entry-content:after,
.entry-summary:before,
.entry-summary:after,
.comment-content:before,
.comment-content:after,
.site-content:before,
.site-content:after,
.site-main > article:before,
.site-main > article:after,
.primary-menu:before,
.primary-menu:after,
.social-links-menu:before,
.social-links-menu:after,
.textwidget:before,
.textwidget:after,
.content-bottom-widgets:before,
.content-bottom-widgets:after {
	content: "";
	display: table;
}

.clear:after,
blockquote:after,
.entry-content:after,
.entry-summary:after,
.comment-content:after,
.site-content:after,
.site-main > article:after,
.primary-menu:after,
.social-links-menu:after,
.textwidget:after,
.content-bottom-widgets:after {
	clear: both;
}

/**
 * 11.0 - Content
 */

#columnA {
width: 300px;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
}

#columnB {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 300px;
overflow: auto;
}


/**
 * 11.1 - Header
 */

#headA {
width: 300px;
}

#headB {
width: 600px;
}

/**
 * 11.2 - Posts and pages
 */

#sjaLogo { width: 60px; height: 60px; margin: 120px; }
#sjaLogo img { width:100%; height:100%; }
#sjaName { width: 600px; height: 60px; margin: 120px 0; }

.display-posts-listing { max-width: 1200px ; display: block; clear: both; margin: 2.0em 0 2.0em 0;}
.listing-item { width: 240px; height: 360px; margin: 0 60px 60px 0; display: inline-block; background-color: #efefef; vertical-align:top;}
.listing-item img { width: 100%; -webkit-filter: grayscale(25%); opacity: 0.75; /*-webkit-filter: blur(1px);*/}
.listing-item img:hover { -webkit-filter: grayscale(0%); opacity: 1.0;}
.listing-item a.title { display:none; }

.fullwidth img,
.wide900 img,
.wide600 img,
.wide300 img,
.wide240 img{
margin: 2.0em 0;
}

.fullwidth {
width: 100%;
}

.wide900 {
max-width: 900px;
}

.wide600 {
max-width: 600px;
}

.wide300 {
max-width: 300px;
}

.wide240 {
max-width: 240px;
margin-left: 60px;
}

.hide {
	display: none;
}

/**
 * 12 - Adjust for iPhone
 */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  
#columnA { width: 100%; position: relative; border-bottom: 1px solid #efefef; margin-bottom: 4.0em;}
#columnB { width: 100%; position: relative; left: 0; }
#headA { width: 100%; }
#headB { width: 100%; }
#headB { display: none; }
#sjaLogo { width: 20%; height: 20%; margin: 40%;}
/*#sjaName { width: 80%; height: 20%; margin: 20% 10%; }*/
h1, h2, h3, h4, p { padding-left: 10%; padding-right: 10%; }
.listing-item { width: 50%; height: 50%; margin: 0 0 0 0;}
.listing-item img { -webkit-filter: grayscale(0%); opacity: 1.0;}
.fullwidth, .wide900, .wide600 { padding-left: 0; padding-right: 0; }
}

@media only screen  and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
/*.listing-item { width: 100%; height: 100%; margin: 0 0 0 0;}*/
/*#headB { display: none; }*/
}

@media only screen  and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
#sjaLogo { width: 10%; height: 10%; margin: 20% 10%;}
.listing-item { width: 25%; height: 25%; margin: 0 0 0 0;}
/*#headA { display: none; }*/
}