/*
Theme Name: shaunkardinal.com
Description: Two column portfolio.
Version: 1.0
Author: Shaun Kardinal
Author URI: http://www.unkardinal.com

	Blue: d1e1ea
	Beige: e8e5d6

*/

/* New Bulletproof @Font-Face Syntax
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax */

@font-face {
	font-family: 'MyriadCond';
	src: url('f/myriadpro-cond-webfont.eot?') format('eot'), 
	     url('f/myriadpro-cond-webfont.woff') format('woff'), 
	     url('f/myriadpro-cond-webfont.ttf')  format('truetype'),
	     url('f/myriadpro-cond-webfont.svg#svgFontName') format('svg');
	}

@font-face {
	font-family: 'MyriadCondBld';
	src: url('f/myriadpro-boldcond-webfont.eot?') format('eot'), 
	     url('f/myriadpro-boldcond-webfont.woff') format('woff'), 
	     url('f/myriadpro-boldcond-webfont.ttf')  format('truetype'),
	     url('f/myriadpro-boldcond-webfont.svg#svgFontName') format('svg');
	}

/*webkit biz*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
html { overflow: auto }
body { position: absolute; top: 0; left: 13px; bottom: 0; right: 8px; padding: 40px 0; overflow-y: auto; overflow-x: hidden }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display: block; height: 10px; }
::-webkit-scrollbar-button:vertical:increment { background-color: #fff }
::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track-piece { background-color: #eee; -webkit-border-radius: 3px }
::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); background: #d1e1ea; -webkit-border-radius: 3px }
::-webkit-scrollbar-thumb:window-inactive { background: #ddd }
::-webkit-scrollbar-thumb:vertical { height: 50px }
::-webkit-scrollbar-thumb:horizontal { width: 50px }
}/*end webkit biz*/


html { font: "MyriadCond" }
body { font: 11px/16px "Lucida Sans", "Lucida Grande", sans-serif !important; background: #fff; color: #999; letter-spacing: 0.03em }
p, ul { margin-bottom: 1em }
a { text-decoration: none;
-webkit-transition: all .2s;  
   -moz-transition: all .2s;  
	 -o-transition: all .2s;
		transition: all .2s; }
ul, ol { list-style: none }
h1 { font: 32px "MyriadCondBld", "Myriad Condensed Bold", "Myriad Condensed", "Arial Narrow Bold", sans-serif; text-transform: uppercase }
h2 { font: 32px "MyriadCond", "Myriad Condensed", "Arial Narrow", sans-serif; text-transform: uppercase }
h3 { font: 16px/18px "MyriadCond", "Myriad Condensed", "Arial Narrow", sans-serif !important; text-transform: uppercase }
p + h3 { margin-top: 1.5em }
table { border-collapse: collapse }
img, embed, object { margin-bottom: 5px }
embed[type="application/x-shockwave-flash"] { margin-top: 1.5em }
input, textarea { background: #fff; border: 2px solid #e8e5d6; font: 11px/16px "Lucida Sans", sans-serif !important; padding: 5px }
input {  }
textarea { width: 100%; max-width: 348px; height: 100px }
#submit { font: 16px/16px "MyriadCond", "Myriad Condensed", "Arial Narrow", sans-serif !important; text-transform: uppercase; border: 0 !important; padding: 0 !important; color: #ccc }
#submit:hover { color: #999; cursor: pointer }
hr { clear: both; display: block; width: auto; height: 2em; border-top: 2px solid #e8e5d6 }
blockquote { border-left: 2px solid #e8e5d6; width: 540px; padding-left: 40px; margin: 2em 0 }

#center { position: relative; width: 1000px; margin: 0 auto }

#sidebar { position: fixed; width: 240px; background: rgba(255,255,255,.95); z-index: 2;
		text-transform: uppercase; font: 16px/20px "MyriadCond", "Myriad Condensed", "Arial Narrow", sans-serif }
#sidebar a { color: #d1e1ea }
#sidebar a:hover { color: #999 !important }
#sidebar h1 { width: 240px; margin-bottom: 40px }
#sidebar h1 a { color: #d1e1ea; border-top: 2px solid #d1e1ea; border-bottom: 2px solid #d1e1ea; display: block; padding-top: 5px }
.widget { display: block; margin-bottom: 1em }
.widgettitle { display: none }
.ctc a { display: block; float: left; margin-right: 8px } /*tag cloud*/
.tag-link-8:before, .ctc:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
#sidebar li.rsslink { position: relative }
#sidebar li.rsslink a:hover:before { content: url(i/rss2.png); position: absolute; left: -16px; top: 3px }
.blogroll a { color: #ccc !important }

#content { position: absolute; left: 280px; width: 720px }
#wrapper { position: relative }
#content h2 { font-weight: normal; margin-bottom: 40px; width: 720px }
#content h2 a, h2.single { color: #e8e5d6; border-top: 2px solid #e8e5d6; border-bottom: 2px solid #e8e5d6; display: block; padding-top: 5px }
#content h2 a:hover { color: #999 } 
#content a { color: #999; border-bottom: 1px solid #e8e5d6 }
#content a:hover { color: #666 }
#content img { width: auto; max-width: 720px; height: auto }
.tagged { position: absolute; text-align: right; top: 7px; color: #d1e1ea }
.post { position: relative }
.post-edit-link { position: absolute; right: 0; top: 22px; font: 16px/16px "MyriadCond", "Myriad Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; border: none !important }
.entry { margin-top: 40px }
.tags, .navigation { margin: 40px 0; color: #ccc }
.tags a, .navigation a { color: #e8e5d6 !important; border: none !important }
.navigation { text-align: center }
.navigation a { margin: 0 10px }
.tags a:hover, .navigation a:hover { color: #999 !important }
.wp-caption { color: #ccc; font-size: 10px; line-height: 12px; margin: 40px 0 40px }
.commentmetadata {  }
.commentlist { margin-bottom: 40px }
.commentlist:hover .commentmetadata, .commentmetadata a { display: inline; color: #dedede }
img.alignleft { float: left; margin: 0 20px 15px 0 }
#content iframe { width: 720px; margin: 20px 0 4px }
.iframe-wrapper iframe { margin: 0 0 40px 0 !important; overflow: hidden }

#footer { margin: 40px 0 1em; color: #ccc; font-size: 9px; text-align: right }

.alterations, .half { margin: 0 -60px 40px 0 }
.alterations .wp-caption { float: left; margin: 40px 20px 0 0 }
.alterations.top .wp-caption { margin: 0 20px 0 0 }
.half .wp-caption { float: left; margin-right: 20px }
p ~ #more-910 + .alterations { margin-top: -40px }
p ~ #more-1026 + .half { margin-top: -40px }
div#post-910 .more-link,
div#post-1026 .more-link,
div#post-1240 .more-link,
.single a[title="view the whole series"] { display: none }

body.p1096 #content h3, body.p1096 #content p, body.p1096 #content blockquote { color: #666 }
body.p1096 #content p { font-size: 12px; line-height: 1.5 }

#instathumbs { margin-top: 20px }
#instathumbs div { float: left; margin: 0 40px 40px 0 }
#instathumbs div:nth-child(4n) { margin-right: 0 }
#instathumbs img { width: 150px }

#instathumbs:after, .alterations:after, .half:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }

@media (max-width: 1024px) {

	#sidebar { width: 22.916666666666664%; /* 220 / 960 */ }
	#sidebar h1 { width: 100% }
	#center { width: 96%; max-width: 960px }
	.widget { padding-right: 20px }
	#content { left: 25%; width: 75% }
	#content img { max-width: 100% !important; height: auto !important }
	.wp-caption { display: block; width: auto; max-width: 100%; margin: 0 auto 20px }
	#content iframe { width: 100%; max-width: 100% }

}

/*mobile*/
@media handheld, only screen and (max-width: 800px) {
	
	body { position: relative; top: auto; right: auto; bottom: auto; left: auto; overflow: auto }
		
	#center, #sidebar, #content { position: relative; width: 96%; margin: 0 2% }
	#sidebar h1, #content h2 { width: 100% }
	#sidebar h1 { font-size: 36px; margin-bottom: 0 }
	#sidebar h1 a { border-bottom: none }
	#sidebar #meta { display: none }
	.widget { margin-right: -12px; padding-right: 0 }
	.ctc a, .widget li { display: inline; margin-right: 12px }
	.widget li, .widget a { font-size: 22px !important; line-height: 1.2 !important }
	.tag-link-3, .tag-link-4, .tag-link-5, .tag-link-6, .tag-link-7, .tag-link-23, .tag-link-26 { font-family: "MyriadCondBld", "Myriad Condensed Bold", "Myriad Condensed", "Arial Narrow Bold", sans-serif }
	
	.tag-link-26:after,
	.widget:after,
	#content:before { content: "."; display: block; height: 0; clear: both; visibility: hidden }
	
	#content { left: 0; margin-top: 40px }
	
	.alterations, .half { margin: 0 0 20px 0 }
	.alterations .wp-caption,
	.half .wp-caption { float: none; margin: 20px 0 0 0 }
	p ~ #more-910 + .alterations,
	p ~ #more-1026 + .half { margin-top: -20px }

}