@import url("http://www.jimmy-morris.com/headunderwater/css/normalize.min.css");

/****************************
FONTS:
font-family: 'Cabin Condensed', sans-serif;
font-family: 'Open Sans', sans-serif;

****************************/

*{ margin:0; padding:0; }
body { font: 62.5% Arial, Helvetica, sans-serif; background: #999 url(http://www.jimmy-morris.com/headunderwater/images/wood.jpg) top left repeat; }
.alt { position: absolute; left: -9999px; }
a { text-decoration: none; color: #A53539; }
a img { border: none; }
a:active, a:focus { outline: none; -moz-outline-style: none; }
hr { border: 5px solid #fff; }

::-webkit-input-placeholder { color: #f9f9f9; }
:-moz-placeholder { color:    #f9f9f9; }
:-ms-input-placeholder { color: #f9f9f9; }

#masthead { height: 500px; width: 100%; background: #221a33; position: relative; }
	#masthead-images { width: 100%; height: 500px; overflow: hidden; position: relative; }
	#masthead-images img { position: absolute; display: block; left: 50%; top: 0; margin-left: -800px; max-width: auto !important; width: 1600px }
	#logo { display: block; height: 132px; width: 700px; position: absolute; top: 50%; left: 50%; margin: -66px 0 0 -350px; background: url(http://www.jimmy-morris.com/headunderwater/images/logo.png) top center no-repeat; }

#wrapper { display: table; width: 960px; margin: 0 auto 90px; }

#content, #sidebar, #nav { display:inline-block; float: left; position: relative; margin-left: 10px; margin-right: 10px; position:relative; }

#nav { width: 940px; display: inline; background: #fff; margin-bottom: 20px; }
	#nav form { width: 225px; margin: 5px 10px; padding: 5px; background: #c8c7c7 url(http://www.jimmy-morris.com/headunderwater/images/mag-glass.gif) 2px 0 no-repeat; float: left; }
	#nav form input { width: 200px; margin: 0 0 0 26px; font-size: 12px; background: #c8c7c7; border: none; }
	#nav ul { list-style: none; float: right; margin: 5px 10px; padding: 0; }
		#nav ul li { float: left; padding: 0 0 0 5px; background: url(http://www.jimmy-morris.com/headunderwater/images/sprite.png) 0 -434px no-repeat; }
			#nav ul li.first { background: none; }
		#nav ul li a { margin: 0 10px 0 15px; font: 22px/24px 'Cabin Condensed', sans-serif bold; color: black; text-align: center; text-decoration: none; }
		#nav ul li a:hover { color: #A53539; }

#content { width: 720px; }
#sidebar { width: 200px; float: right }

.post { position: relative; float: left; display: block; width: 716px; border: 2px solid #999; margin: 0 auto 30px; background: #fefefe; color: #333; }
	.post-content { display: inline-block; clear: both; margin: 1%; width: 98%; padding: 0;}
	.post-content h1, .post-content h1 big, .post-content .viddy + p, .post-content .viddy + p, .post-content iframe + p, .post-content span + p, .photo .post-content p:first-of-type > strong { font: bold 32px/36px 'Cabin Condensed', sans-serif; margin: 15px 0 0; display: inline-block; }
	.photo .post-content p:first-of-type > strong { margin: 0; }
	.post-content h2, .post-content h3, .post-content h4 { font-family: 'Open Sans', sans-serif; color: #333; }
		.post-content h2 { font-size: 22px; line-height: 28px; margin: 0 0 10px; }
		.post-content h3 { font-size: 18px; line-height: 24px; margin: 0 0 10px; }
		.post-content h4 { font-size: 16px; line-height: 20px; margin: 0 0 10px; }
	.post-content p, .post-content ul, .post-content ol, .post-content blockquote { font: 16px/24px 'Open Sans', sans-serif; }
	.post-content a:hover { text-decoration: underline; }
	.post-content blockquote { border-left: 3px solid #999; padding: 0 15px; margin-left: 20px; }
	.post-content pre { font-size: 14px; background: #F9F9F9; border: 3px double #2b9ad9; }
	.post-content img, .post-content iframe { width: 100%; float: left; clear: both; }
	.search-results { padding: 8px; }
	
	/* Post specific */
	.quote .post-content blockquote { border: none; padding: 0 0 10px; margin: 0 0 8px; font-style: italic; font: 20px/26px 'Open Sans', sans-serif; border-bottom: 1px solid #f9f9f9; }
	#content .photo img { width: 98%; margin: 1%; display: block; float: left; }
	.post-content .viddy {  }
	.post-content .image-set { width: 100%; float: left; clear: both; display: table; margin: 0 0 1em; }
		.post-content .image-set .photosetRow { float: left; clear: both; width: 100%; }
		.post-content .image-set a { white-space: nowrap; display: block; vertical-align: top; float: left; clear: none; position: relative; overflow: hidden; }
		.post-content .image-set img { display: inline-block; clear: none; white-space: nowrap; height: auto; }

		.post-content .cols1 a { width: 100%; margin: 0 0 4px; }
		
		.post-content .cols2 a { width: 49.2%; margin: 4px 0 4px 1.6%; }
			.post-content .cols2 a > img { width: 100%; }
			.post-content .cols2 a:first-child { margin: 4px 0; }
		
		.post-content .cols3 a { width: 32.2%; margin: 4px 0 4px 1.1%; }
			.post-content .cols3 a > img { width: 100%; }
			.post-content .cols3 a:first-child { margin: 4px 1.1% 4px 0; }

	/* Notes */
	.notes { font: 11px/14px 'Open Sans', sans-serif; padding: 0px; margin: 25px 0px; list-style-type: none; border-bottom: solid 1px #ccc; background: #FFF; float: left; clear: both; width: 100%; }
	.notes .note { border-top: solid 1px #ccc; padding: 10px; }
	.notes .note img.avatar { vertical-align: -4px; margin-right: 10px; width: 16px; height: 16px; }
	.notes .note span.action { }
	.notes .note span.action a { text-decoration: none; padding: 2px; }
	.notes .note .answer_content { font-weight: normal; }
	.notes .note blockquote { border-color: #eee; padding: 4px 10px; margin: 10px 0px 0px 25px; }
	.notes .note blockquote a { text-decoration: none; font-weight: bold; }
	
.post .post-footer { float: left; display: inline-block; position: relative; width: 100%; }
	.post .post-footer .post-nav { float: left; width: 100%; border-top: 1px solid #999; position: relative; margin: 0; padding: 0; list-style: none; }
	.post-footer .post-meta { border: 1px solid #999; }
		.post-footer .post-meta a { padding: 8px 10px 8px 35px; display: block; font: 12px/22px 'Open Sans',sans-serif; font-style: italic; color: #333; text-decoration: none;  background: url(http://www.jimmy-morris.com/headunderwater/images/sprite.png) no-repeat; }
	
	.post-footer .post-date { float: right; border-width: 0 0 0 1px; }
	.post-footer .post-share, .post-footer .post-notes, .post-footer .post-tags { float: left; border-width: 0 1px 0 0; z-index: 30; }
		.post-footer .post-date a { background-position: 10px -186px; }
		.post-footer .post-tags a {  background-position: 10px -236px; }
		.post-footer .post-notes a {  background-position: 10px -287px; }
		.post-footer .post-share a {  background-position: 10px -335px; }
	
	.share-stuff, .tags {
		list-style: none; 
		width: 100%;
		padding: 10px 0;
		margin: 0;
		display: none;
		background: #fff;
		border-top: 1px solid #999;
		overflow: hidden;
	}
		.share-stuff li, .tags li { float: left; margin: 0 5px 0 10px; }
		.share-stuff .permalink, .tags a  { 
			display: block;
			color: #333;
			border: 1px solid #c0c0c0;
			padding: 5px;
			background: #e2e2e2;
			-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
			text-shadow: 0px 2px 1px #fff;
			font-style: italic; 
			text-decoration: none;
		}
		
	.question {
		background: #e7eaec;
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		font: bold 22px Arial, Helvetica, sans-serif;
		line-height: 28px;
		color: #454e54;
		padding: 15px 20px; 
	}
	span.asker, a.asker { font: normal 16px/24px 'Open Sans',sans-serif; color: #595d62; text-decoration: none; margin: 0 0 0 10px; position: relative; top: 0px; }
	span.asker a.asker { top: -5px; }
	a.asker:hover { text-decoration: underline; }
		
		
		.post-footer .facebook-share, .post-footer .twitter-share { margin: 2px 5px 2px 10px; display: inline; width: 82px; overflow: hidden; }

	.post-footer .post-meta .active { z-index: 100; position: relative; }
		.post-footer .post-share .active { border-bottom: 1px solid #fff !important; margin: 0 0 -1px; }
		.post-footer .post-tags .active { border-top: 1px solid #fff !important; margin: -1px 0 0; }

	#navigation {
		display: table;
		clear: both;
		width: 95%;
		color: #FFF;
		font-size: 1.25em;
		font-weight: bold;
		padding-bottom: 15px;
		text-align: left;
		margin: 10px auto; 
		padding-bottom: 35px;
	}
	
	#navigation .next-previous {
		margin:10px 65px 30px 0;
		padding:5px;
	}
	#navigation .next-previous .previous {
		color:#666666;
		font-size:1.5em;
		text-decoration:none;
		padding:10px;
		background:#FFF;
		margin:0px 10px 10px;
	}
	#navigation .next-previous .newer {
		color:#666666;
		font-size:1.5em;
		text-decoration:none;
		padding:10px;
		background:#FFF;
		margin:0px 10px 10px;
	}
	
	#navigation a, #navigation .current_page { display: inline-block; float: left; background-color: #fff; color: #000; padding: 10px 15px; text-decoration: none; margin: 0 15px 0 0; }
	#navigation a:hover { background: rgb(0, 130, 212); color: #ffffff; }
	#navigation.jump_pagination a { margin: 0 0 0 4px; }
	#navigation .current_page { color: #ffffff; background-color: rgb(0, 130, 212); border: 2px solid #FFFFFF; padding: 8px 13px; cursor: default; }
		
	.get-social { background: #999; list-style: none; float: left; margin: 0 auto 10px; padding: 0; border: 1px solid #9bf2ea; border-width: 0 0 1px 1px; width: 198px; }
		.get-social li { background: url(http://www.jimmy-morris.com/headunderwater/images/sprite.png) no-repeat; opacity: .75; float: left; width: 65px; border: 1px solid #9bf2ea; border-width: 1px 1px 0 0; border-collapse: collapse; text-align: center; }
			.get-social li.email { background-position: 10px 20px; }
			.get-social li.twitter { background-position: -57px 20px; }
			.get-social li.fcbk { background-position: -124px 20px; }
			.get-social li.sncld { background-position: 10px -47px; }
			.get-social li.flickr { background-position:  -58px -47px; }
			.get-social li.insta { background-position: -124px -47px; }
			.get-social li.exfm { background-position: 9px -113px; }
			.get-social li.hypem { background-position: -57px -113px; }
			.get-social li.shfflr { background-position: -125px -113px; }
	
			.get-social li a { 
				opacity: 0; background: transparent; display: block; padding: 25px 0; color: #fff; font: 18px/18px 'Cabin Condensed', sans-serif; font-weight: bold; text-decoration: none; 
				-webkit-transition: background,opacity .25s ease-in-out;
				-moz-transition: background,opacity .25s ease-in-out;
				-o-transition: background,opacity .25s ease-in-out;
				-ms-transition: background, .25s ease-in-out;
				transition: background,opacity .25s ease-in-out;
			}
				.get-social li a:hover { 
					background: #999;
					opacity: 1;
					-webkit-transition: background,opacity .25s ease-in-out;
					-moz-transition: background,opacity .25s ease-in-out;
					-o-transition: background,opacity .25s ease-in-out;
					-ms-transition: background, .25s ease-in-out;
					transition: background,opacity .25s ease-in-out;
					 
				}
	
	.expandables { list-style: none; float: left; margin: 0px auto; padding: 0; width: 198px; }
		.expandables > li { float: left; margin: 10px 0; background: #999; clear: both; width: 100%; border: 1px solid #9bf2ea; border-collapse: collapse; text-align: center; }
		.expandables li a { 
			opacity: .75; display: block; text-align: center; color: #fff; text-transform: uppercase; font: 40px/40px 'Cabin Condensed', sans-serif; padding: 15px 0; 
			-webkit-transition: text-shadow .15s linear;
			-moz-transition: text-shadow .15s linear;
			-o-transition: text-shadow .15s linear;
			-ms-transition: text-shadow .15s linear;
			transition: text-shadow .15s linear;
			
		}
			.expandables li a:hover, .expandables li a.active { 
				text-shadow: 1px 0px 1px #777, 0px 1px 1px #555, 
							 2px 1px 1px #777, 1px 2px 1px #555,
							 3px 2px 1px #777, 2px 3px 1px #555;
							 
				-webkit-transition: text-shadow .15s ease-in-out;
				-moz-transition: text-shadow .15s ease-in-out;
				-o-transition: text-shadow .15s ease-in-out;
				-ms-transition: text-shadow .15s ease-in-out;
				transition: text-shadow .15s ease-in-out;
			}
			
			
		.expandables li ul { border: none; margin: 0; padding: 0; list-style: none; display: none; }
			.expandables li ul li a { 
					font-size: 14px; line-height: 14px; text-align: left; padding: 4px 8px; margin: 0; border-top: 1px dotted #9bf2ea; 
					
					background: transparent;
					-webkit-transition: background-color .5s ease-in-out;
					-moz-transition: background-color .5s ease-in-out;
					-o-transition: background-color .5s ease-in-out;
					-ms-transition: background-color .5s ease-in-out;
					transition: background-color .5s ease-in-out;	
				}
	
				.expandables li ul li a:hover { 
					text-shadow: none; background-color: #4c6da8;
	
					-webkit-transition: background-color .15s ease-in-out;
					-moz-transition: background-color .15s ease-in-out;
					-o-transition: background-color .15s ease-in-out;
					-ms-transition: background-color .15s ease-in-out;
					transition: background-color .15s ease-in-out;
				}											
			
				
			.expandables .mixtapes ul li { float: left; }
			.expandables .mixtapes ul li a img { width: 100%; text-align: center; padding: 4px 0; }
					.expandables .mixtapes ul li:nth-child(n+3) a img { width: 83px; }
			
	
	.calisthenics { display: none; position: relative; float: left; clear: both; height: 0; overflow: hidden; width: 100%; background: #000 url(http://25.media.tumblr.com/tumblr_lo6lxsc0pP1qe0eclo1_r13_500.gif) top center no-repeat; -webkit-box-shadow: inset 0px 10px 30px -10px rgba(0, 0, 0, 1); box-shadow: inset 0px 10px 30px -10px rgba(0, 0, 0, 1); }
	
	.greatness-overlay { background: rgba(38,38,38, .7); display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:1001; }	
	.greatness { width: 560px; height: 315px; padding: 10px; margin: 0 auto 0 -280px; position: fixed; top: 10%; left: 50%; }
		.greatness-overlay .close { color: #9F0 !important; font-size: 11px; }
	
	#ah-shoot { position: fixed; top: 0; left: 0; width: 100%; display: block; background: #fff47b; text-align: center; }
		#ah-shoot p { padding: 10px 0; margin: 0 auto; color: #000; font: 12px/16px Arial, Helvetica, sans-serif bold; width: 560px; }	
	
@media all and (max-width: 1024px) and (min-width: 768px) {
	#masthead { height: 320px; }
		#masthead-images { height: 320px; }
		#masthead-images img { height: 320px; width: 1024px; margin-left: -512px; }
		#logo { display: block; height: 100px; width: 524px; top: 50%; left: 50%; margin: -50px 0 0 -262px; background-position: 0 -146px; }
	
	#wrapper { width: 100%; }	
	#nav { width: 100%; margin: 0 0 20px; padding: 5px 0; }
		#nav form { background-position: 2px 6px; margin: 0 10px; }
		#nav form input { padding: 5px 0; }
		#nav ul { margin: 5px 10px; }
		
	#content { width: 70%; margin-right: 0; }
	#sidebar { margin: 0 1% 0 0; }
	.post { width: 100% }
	
	.post-content, #content .photo img { width: 98%; margin: 1%; }
}

@media all and (max-width: 767px) {
	#masthead { height: 240px; }
		#masthead-images { height: 240px; }
		#masthead-images img { height: 240px; width: 768px; margin-left: -384px; }
		#logo { display: block; height: 66px; width: 349px; top: 50%; left: 50%; margin: -33px 0 0 -175px; background-position: 0 -266px; }
		
	#nav { width: 100%; margin: 0 0 20px; padding: 5px 0; }
		#nav form { background-position: 2px 6px; margin: 0 10px; }
		#nav form input { padding: 5px 0; }
		#nav ul { margin: 5px 10px; }
		
	#wrapper { width: 100%; }
	#content { width: 100%; margin: 0; }
	.post, .notes { width: 460px; margin: 0 auto 20px; float: none; }
	.post .post-footer { float: none; }
	#sidebar { float: none; clear: both; width: 460px; margin: 0 auto; display: table; }
		.expandables { float: right; }
		.expandables > li { margin: 0 0 20px; }
	
	#navigation { width: 460px; margin: 40px auto 0; }
	
	.post-content .image-set { width: 450px; float: left; clear: both; display: table; margin: 0 0 1em; }
		.post-content .image-set .photosetRow { float: left; clear: both; width: 460px; }
		.post-content .image-set a { white-space: nowrap; display: block; vertical-align: top; float: left; clear: none; position: relative; overflow: hidden; }
		.post-content .image-set img { display: inline-block; clear: none; white-space: nowrap; height: auto; }

		.post-content .cols1 a { width: 450px; margin: 0 0 4px; }
		
		.post-content .cols2 a { width: 220px; margin: 4px 0 4px 2.3%; }
			.post-content .cols2 a > img { width: 220px; }
			.post-content .cols2 a:first-child { margin: 4px 0; }
		
		.post-content .cols3 a { width: 145px; margin: 4px 0 4px 1.1%; }
			.post-content .cols3 a > img { width: 145px; }
			.post-content .cols3 a:first-child { margin: 4px 1.1% 4px 0; }

}