/*
Theme Name: Jared Pendergraft.com
Theme URI: http://www.jaredpendergraft.com
Description: The 2012 theme for Jared Pendergraft.com.
Author: Jared Pendergraft
Version: 9
*/

/* Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,nav,section,menu,time,mark,audio,video,canvas {margin: 0; padding: 0; border: 0;}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,audio,canvas,video {display: block;}

input[type="checkbox"], input[type="radio"] {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

input, textarea, button, select {margin: 0; font-size: 100%; line-height: normal;}

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

table {border-collapse: collapse; border-spacing: 0;}

/* Global Elements */
html {height: 100%; background:url(images/noise.png) #EEE;}

body {min-height: 100%; color:#333; font-size: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; vertical-align:baseline; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust:100%;}
::-webkit-selection, ::-moz-selection, ::selection {background:rgb(225,82,61); color:#FFF;}
.cf {zoom:1;}
  .cf:before, .cf:after {content: ""; display:table;}
  .cf:after {clear:both;}

/* Simple fluid media */
figure {position: relative;}
	figure img, figure object, figure iframe, figure embed, figure video {max-width: 100%; display: block;}
figcaption {color:#666; font-size: 1.125em; line-height: 1.3125em; padding-top:0.375em; margin-bottom:0.25em;}
img {border: 0; -ms-interpolation-mode: bicubic;}

/* Type */
p, li, #nav li p {font-size: 0.875em; line-height: 1.375em; padding-top:0.125em; margin-bottom:1.15625em; color:#333; font-weight:normal;} /* 14 / 22 / 2 / 18px */
p {font-family: Georgia, serif;}
h4 {font-size: 0.5em; line-height: 1.375em; padding-top:0.5em; text-transform:uppercase; font-weight:normal;}
h3 {font-size: 1em; line-height: 1.125em; margin-bottom:0.375em;} /* 16 / 18 / 6px */
h2 {font-size: 1.125em; line-height: 1.3125em; padding-top:0.375em; margin-bottom:0.25em;} /* 18 / 21 / 4 / 16px */
h1 {font-size: 1.5em; line-height: 1em; padding-top:0.1875em; margin-bottom:0.375em;} /* 24 / 16 / 3 / 6px */
em {font-family: Georgia, serif; font-style:italic;}
strong {font-weight: bold;}
small {text-transform:lowercase; font-variant:small-caps; font-size:1.125em;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
	sup {top: -0.125em;}
	sub {bottom: -0.125em;}

/* Links */
a, #nav li #active {text-decoration:none; font-weight:bold; color:rgb(225,82,61);}
	a:hover, #nav li a:hover, #nav li #active:hover, #copyright a:hover {border:0; color:rgb(225,82,61); border-bottom:1px dotted rgb(225,82,61);}
	

/* Lists */
ul {list-style:none;}
  .square, .things ul {list-style-type:square; list-style-position:outside; padding-left:0.875em;}
ol {list-style-type:decimal-leading-zero; list-style-position:inside;}
li {padding-top:0; margin-bottom:0.375em;}

/* Avery */
html.avery {background:url(images/noise-avery.png) rgba(254,148,171,.125);}
.avery body {font-family: Futura, "Trebuchet MS", Arial, sans-serif; text-transform:uppercase; color:rgb(254,148,171);}
.avery a {color:rgb(254,148,171);}
.avery a:hover {color:rgb(207,66,56); border:none;}
.avery h1 {border-top:3px solid rgb(254,148,171); border-bottom:1px solid rgb(254,148,171); text-align:center; padding-top:14px; padding-bottom:12px; margin-bottom:1em;}
.avery h2 {margin-bottom:0.75em;}
.avery p {color:rgb(254,148,171); text-transform:none; margin-top:0.75em; padding-bottom:1.125em; border-bottom:1px solid rgb(254,148,171);}
.avery #logo {width:100%;}
#description-avery {width:100%; padding-top:2em;}
#description-avery h2 {text-align:center;}

.avery .flickr-thumb {border:none;}
.photo-holder {margin-bottom:1.5em;}
.video-holder {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
height: 0;
overflow: hidden;
}
.video-holder iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Grid */
.grid {display:block; float:left; padding: 0 0.75em; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}

/* Special Classes */
.none, img#wpstats {display:none; visibility:hidden;}


/* @media screen and (min-width: 16px) - iPhone */
@media screen and (min-width: 1em) {

#wrapper {margin:0 2.7777778%; padding:0; padding-bottom:0.75em;} /* 5.555555555555555% = 1/18*/

#header {padding:0.75em 2.7777778%;}
#logo, select {float:left; width:50%;}
#logo img {margin:0 auto;}
#nav li p, #copyright span, #copyright, #profile-img {display:none; visibility:hidden;}
#nav ol {color:rgb(143,197,162); font-weight:bold;}
#nav li, #nav li a {color:#333;}
#nav li {margin-bottom:0;}

#content {
background-color: #FFF;
padding:1.5em 2.7777778%;
-webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, .125);
-moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, .125);
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, .125);
overflow:hidden;
}
#content-avery {padding:0.375em 2.7777778%;}

.work-thumb {margin-bottom:1.125em; width: 100%;}
	.work-thumb h3 {border-top:0.0625em solid rgba(0,0,0,0.25); padding-top:0.375em;}
	.work-thumb h3 a {color:#333;}
	.work-thumb h3 a:hover {color:rgb(225,82,61);}
	.work-thumb figure:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	filter: alpha(opacity=75);
	opacity:0.75;
	}
#motto h2 {font-weight:normal;}
#links {margin-top:0.75em;}
#links li {margin-bottom:0.125em;}
	#links span {display:inline; visibility:visible;}
#resume {margin-top:0.625em;}
#work-meta, #work-imgs {width:100%;}
#work-meta h2 {border-top:0.0625em solid rgba(0,0,0,0.25); margin-bottom:0.875em;}
#work-imgs img {width:100%; border-top:0.0625em solid rgba(0,0,0,0.25); padding-top:0.6875em; margin-bottom:0.75em;}
	#work-imgs img:last-of-type {margin-bottom:none;}
#work-nav, #website {border-top:0.0625em solid rgba(0,0,0,0.25); padding-top:0.625em; padding-bottom:0.75em; margin-top:1.375em; margin-bottom:1em;}
#website {padding-bottom:0; margin-bottom:0;}
#work-nav li {width:50%; float:left;}
html.all {background-attachment:fixed;}
#wrapper-all {margin:0 auto; width:100%; display:block;}
#content-all {margin:0 auto; padding:1.5em;}
.all-work .holder:hover {width:100%; background-color:#FFF;}
.all-work figure {text-align:center;}
.all-work figure img {width:100%; float:left; margin-bottom:1.5em;}

#videos .grid {width:100%;}

.things {border-top:0.0625em solid rgba(0,0,0,0.25); padding-top:0.625em; margin-bottom:1.5em;}
.things li {margin-bottom:0;}
.things-img {margin-bottom:1.5em;}

}

/*
Six-Column Grid
-------------------------------------------------------------------------------------------------------------------------------
Margin					|	#1				2				3		4			5				6		|	Margin
16.666666666666664%		|	%16.6666667		33.3333333		50		66.6666667	83.3333333		100		|	16.666666666666664%
*/

/* @media screen and (min-width: 496px) - iPad - Portrait */
@media screen and (min-width: 31em) {

.one {width: 16.6666667%;}
.two {width: 33.3333333%;}
.three {width: 50%;}
.four {width: 66.6666667%;}
.five {width: 83.3333333%;}
.six {width: 100%;}

#logo {width: 16.6666667%;}
#nav, #copyright, #profile-img {display:block; visibility:visible; float:left;}
#nav, #copyright {padding-top:1.25em;}
#copyright {display:block; visibility:visible;}
#copyright a {color:#666;}
.work-thumb {width: 50%;}
#motto {width:100%; margin-bottom:0.75em;}
#profile-img, #links {width:50%; margin-bottom:0;}
#profile-img img {max-height:168px; margin:0 auto;}
#links {margin-top:0;}
#links span {display:inline; visibility:visible;}
#resume {margin-top:1em;}

.all-work figure img {width:50%;}

}

/* @media screen and (min-width: 1008px) - iPad - Landscape */
@media screen and (min-width: 63em) {

#copyright span {display:inline; visibility:visible;}
#links span {display:none; visibility:hidden;}
.work-thumb, #work-meta {width: 33.3333333%;}
#work-imgs {width: 66.6666667%;}
#motto {width:50%; margin:0;}
#profile-img {width:33.3333333%;}
#links {width:16.6666667%;}
#resume {margin-top:1.75em;}

.all-work figure img {width:33.3333333%;}

#photos .grid {width: 16.6666667%;}
#videos .grid {width: 50%;}


}

/* @media screen and (min-width: 1264px) - Laptop */
@media screen and (min-width:79em) {


}

/* @media screen and (min-width: 1296px) - Desktop */
@media screen and (min-width: 81em) {

#wrapper {margin:0 8.3333335%; padding:0 1.5em; padding-top:0.75em; padding-bottom:1.5em;}
#header {padding:0.75em 8.3333335%;}
#content {padding:2.25em 8.3333335%;}
#content-avery {padding:1.5em 8.3333335%;}
#nav, #copyright {padding-top:0.75em;}
#nav li p {display:block; visibility:visible; margin-top:0.375em;}
#links span {display:inline; visibility:visible;}


}

/* @media screen and (min-width: 1664px) - Huge Ass Display */
@media screen and (min-width:104em) {
#wrapper {margin:0 13.888888889%;}
#header {padding:0.75em 13.888888889%; padding-bottom:1.125em;}
#content {padding:2.25em 13.888888889%;}
#content-avery {padding:1.5em 13.888888889%;}
.work-thumb {margin-bottom:1.375em;}
#profile-img, #links, #proficiencies {width:16.6666667%;}
#work-nav li {width:50%;}

.all-work figure img {width:16.6666667%;}

}

/* Fixes for IE6-8 */
#ie html {background:#EEE;}
#ie #wrapper {padding:1.5em;}
#ie #content {background:#FFF; padding:1.5em;}
#ie #header {clear:both; padding:1.5em;}
#ie #logo {width:50%;}
#ie #nav li p {display:none; visibility:hidden;}
#ie #nav {width:50%;}
#ie #nav li {width:100%;}
#ie #copyright {display:none; visibility:hidden;}
#ie .work-thumb {margin-bottom:1.125em; width:50%;}
#ie #work-meta, #ie #work-imgs {width:50%;}
#ie #motto {width:100%;}
#ie #profile-img, #ie #links, #ie #resume .grid {width:50%;}