/*
*  ajchoren.com
*  Copyright 2014, AJ Choren
*  2/18/2014
*/


/* ------------- */
/* --- reset --- */
/* ------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, big, cite, code, del, dfn, em, img, ins, small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
body {
	line-height: 1; }
/* ol, ul {
	list-style: none; } */
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0; }



/* ------------------- */
/* --- site styles --- */
/* ------------------- */

body {
	background: #fff;
	font: 14px/21px "myriad-pro", Helvetica, sans-serif;
	color: #444;
	-webkit-font-smoothing: antialiased; /* fix webkit rendering */
	-webkit-text-size-adjust: 100%;
	}

/* surrounds all page contents */
.wrapper {
	width: 96%;
	margin: 0 auto;
	padding-left: 2%;
	padding-right: 2%;
	}

img.scale-with-grid {
	max-width: 100%;
	height: auto;
	}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	}



/* ------------------ */
/* --- typography --- */
/* ------------------ */

h1 {
	display: inline;
	font-size: 4.125em;
	margin: 0;
	padding; 0;
	}

h1 img {
	margin: 0;
	padding; 0;
	width: 148px;
	height: 65px;
	}

h2 {
	display: inline;
	font-size: 1em; /* equal to 100%, which is 16px in most browsers */
	font-weight: bold;
	text-transform: uppercase;
	color: #343434;
	vertical-align: 2.1em;
	background: #fff;
	padding: 0 0.4em;
	}

span.blue {
	color: #718ec9;
	}

h3 {
	font-size: 1.2em;
	margin-bottom: 1.375em;
	font-weight: bold;
	text-transform: uppercase;
	color: #343434;
	padding: 0;
	}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h5 { font-size: 17px; line-height: 24px; }
h6 { font-size: 14px; line-height: 21px; }

p { margin: 0 0 20px 0; }
p img { margin: 0; }


em { font-style: italic; }
strong { font-weight: bold; color: #333; }
small { font-size: 80%; }

hr {
	border: solid #ddd;
	border-width: 1px 0 0;
	clear: both;
	margin: 10px 0 30px;
	height: 0;
	}



/* --- links --- */

a:link, a:visited {
	color: #d95200;
	text-decoration: none;
	outline: 0;
	}

a:hover, a:active {
	color: #993300;
	text-decoration: none;
	}

a:hover img, a:active img {
	border: 1px solid #993300;
	}



/* -------------------------- */
/* --- main page sections --- */
/* -------------------------- */

header { 
	width: 100%;
	margin: 56px auto 0 auto;
	height: 10em;
	text-align: center;
	background: url("../images/bg-header.png") repeat-x 0px 31px;
	}

#container {
	width: 100%;
	max-width: 1200px;  /* may need adjustment */
	margin: 0 auto;
	}


/* --- home, gallery of recent work -- */

#intro, #gallery-2cols {
	width: 61%;
	margin-left: 19.5%;
	margin-right: 19.5%;
	text-align: center;
	}

#gallery-2cols {
	margin-top: 4em;
	background: url("../images/bg-dotted.png") repeat-x 0em 1.5em;
	}

#gallery-2cols h3 {
	color: #555;
	margin-bottom: 30px;
	position: relative;
	text-align: center;
	}

/* white behind text */
#gallery-2cols h3 span {
	background:  #FFF;
	padding: 0 15px;
	position: relative;
	top: 10px;
	}

.thumb-2cols-1, .thumb-2cols-2 {
	display: inline;
	width: 48%;
	margin-bottom: 3%;
	}

.thumb-2cols-1 {
	float: left;
	margin-right: 1%;
	}

.thumb-2cols-2 {
	float: right;
	margin-left: 1%;
	}

.thumb-2cols-1 img, .thumb-2cols-2 img {
	border: 1px solid #c4c4c4;
	}

.row {
	clear: both;
	max-width: 1040px;
	margin: 0 auto;
	}

#sitemap {
	width: 30%;
	margin-left: 33%;
	margin-right: 33%;
	text-align: left;
	}

#sitemap ul ul {
	margin: 0px 0 0.5em 2em;
	font-size: 100%;
	}


p.profile {
	text-align: left;
	}

img.profile-pic {
	display: inline;
	float: left;
	margin: 0 0.5em 0.5em 0;
	width: 150px;
	height: 150px;
	border: 1px solid #ccc;
	}

	



/* --- gallery - portfolio page --- */

#gallery-3cols {
	width: 80%;
	margin: 0 auto;
	}

.thumb-3cols-1, .thumb-3cols-2, .thumb-3cols-3 {
	display: inline;
	width: 31.3%;
	margin-bottom: 2%;
	}

.thumb-3cols-1, .thumb-3cols-2 {
	float: left;
	margin-right: 1%;
	margin-left: 1%;
	}

.thumb-3cols-3 {
	float: right;
	margin-left: 1%;
	margin-right: 1.1%;
	}

.thumb-3cols-1 img, .thumb-3cols-2 img, .thumb-3cols-3 img {
	border: 1px solid #c4c4c4;
	}



/* --- project page --- */

#project-container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	}

#sidebar {
	float: left;
	width: 24.4%;
	margin-left: 1.05%;
	margin-right: 3.1%;
	}

#sidebar h3 {
	font-family: "myriad-pro", Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.5em;
	text-transform: none;
	}

#sidebar strong {
	display: block;
	}

#main {
	float: right;
	width: 70.4%;
	margin-right: 1.05%;
	margin-bottom: 4.75em;
	}

#main img {
	margin-bottom: 3em;
	max-width: 100%;
	height: auto;
	border: 1px solid #c4c4c4;
	}

#main img.noborder {
	border: none;
	}

#main img.with-caption {
	border: none;
	margin-bottom: 0.5em;
	max-width: 100%;
	height: auto;
	}

p.caption {
	margin-bottom: 3em;
	font-family: "myriad-pro", Helvetica, sans-serif;
	line-height: 1.3;
	font-weight: 400;
	font-style: italic;
	}

footer {
	width: 100%;
	clear: both;
	text-align: center;
	padding: 5px 0;
	margin-bottom: 1em;
	margin-top:3em;
	color: #999;
	font-size: 0.8em;
	}



/* -------------------- */
/* --- sub-sections --- */
/* -------------------- */

nav {
	text-align: center;
	margin: -1.65em auto 0 auto;
	}

nav ul {
	font-family: Georgia, Times New Roman, Times, serif;
	margin: 0 auto;
	height: 1.1em;
	text-align: center;
	}

nav ul li {
	display: inline;
	list-style-type: none;
	list-style-position: outside;
	font-size: 1.1em;
	font-style: italic;
	margin-right: -0.5em; /* prevent bg showing through */
	}

nav ul li.first {
	background: #fff;
	padding: 0 0.75em 0.25em 0.8em;
	}

nav ul li.dotted {
	background: #fff url("../images/img-nav-dot.png") top left no-repeat;
	padding: 0 0.8em 0.25em 1.5em;
	}

/* connect links */
.connect ul li {
	display: inline;
	list-style-type: none;
	list-style-position: outside;
	margin-right: 1em;
	}

.connect ul li img {
	width: 1.5em;
	height: 1.5em;
	border-style: none;
	}

.connect ul li a:link,
.connect ul li a:visited,
.connect ul li a:hover,
.connect ul li a:active {
	border-style: none;
	}

#main img.arrow-top {
	border: none;
	width: 1.5em;
	height: 1.5em;
	display: inline;
	margin-bottom: 0;
	margin-right: 0.5em;
	}

#sidebar img.arrow-back {
	border: none;
	width: 1.5em;
	height: 1.5em;
	display: inline;
	margin-right: 0.5em;
	}


/* --------------------- */
/* --- media queries --- */
/* --------------------- */


/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}



/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	#gallery-3col { width: 90%;}
	
	}



/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	#sidebar { width: 100%; float: left; margin-right: 0; margin-left: 0; text-align: center;}
	#main { width: 100%; float: left; margin-right: 0; margin-left: 0;}

	}



/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	#gallery-3cols { width: 98%; }
	
	}



/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

	#intro,
	#gallery-2cols { width: 94%; margin-left: 3%; margin-right: 3%; }

	#gallery-3cols { width: 94%; }

	.thumb-2cols-1,
	.thumb-2cols-2,
	.thumb-3cols-1,
	.thumb-3cols-2,
	.thumb-3cols-3 { display: block; width: 94%; margin: 0 3% 3% 3%; }

	h2 { display: none; }
	nav { margin: 0 auto 2em auto; }
	header { margin: 20px auto 0 auto; }

	.connect ul li img { width: 2.5em; height: 2.5em; }
	
	}