/*   
Theme Name: Stevenjaeger.com Theme
Theme URI: http://stevenjaeger.com
Description: This is your theme.
Author: Steven Jaeger
Author URI: http://stevenjaeger.com
Version: 1
*/

@charset "UTF-8";
@import url("css/reset.css");

html {margin:0; padding:0;}
body {background: #fafafa;}

/* GENERAL CLASSES */
.wrapper {width:96%; max-width: 1200px; margin: 0 auto;}
.left {float: left; position:relative;}
.right {float: right; position:relative;}
img.right {margin: 0 0 0 10px;}
img.left {margin: 0 10px 0 0;}

/* GENERAL ELEMENTS */
@font-face {
	font-family: 'LatinModernMono10Regular';
	src: url('css/lmmono10-regular-webfont.eot');
	src: url('css/lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('css/lmmono10-regular-webfont.woff') format('woff'),
		url('css/lmmono10-regular-webfont.ttf') format('truetype'),
		url('css/lmmono10-regular-webfont.svg#LatinModernMono10Regular') format('svg');
	font-weight: normal;font-style: normal;
}
@font-face {
	font-family: 'BallparkWeiner';
	src: url('css/ballpark_weiner-webfont.eot');
	src: url('css/ballpark_weiner-webfont.eot?#iefix') format('embedded-opentype'),
		url('css/ballpark_weiner-webfont.woff') format('woff'),
		url('css/ballpark_weiner-webfont.ttf') format('truetype'),
		url('css/ballpark_weiner-webfont.svg#BallparkWeiner') format('svg');
	font-weight: normal;font-style: normal;
}
h1 {
	font: 24px 'LatinModernMono10Regular', Arial, sans-serif; color: #ffffff;
	padding: 0;
}
#content > .wrapper > h1{height:64px;padding: 40px 0 60px; font-size:42px; color:#007672}
h2, article h1 {
	font: 40px 'BallparkWeiner', Arial, sans-serif;letter-spacing: 0;color: #ffffff;
	padding: 5px 0; line-height: 30px;
}
h3 {
	font: 16px 'LatinModernMono10Regular', Arial, sans-serif; color: #ffffff;
	margin: 0; padding: 12px 0 10px 0;
}
h4 {
	font-size: 13px; font-weight:700;
	padding-top: 15px;
}
h5 {
	color: #5d6d00; font-size: 16px;
	margin: 10px 0 0 0;
}
h6 {
	color: #343434; font-size: 14px;
	margin: 10px 0 0 0; padding: 0;
}
p {
	color:#ffffff; line-height: 20px; font-size: 14px; text-align: left;
	padding: 0 0 10px 0;
}
*::selection, *::-moz-selection{
	background: #c35700; color:#ffffff;
}
a {
	color:#c35700; text-decoration: underline;
	outline: 0 none; -moz-outline: 0 none;
}
a focus, a:active {
	outline: 0 none; -moz-outline: 0 none;
}
a:hover {
	text-decoration: none;
	outline: 0 none; -moz-outline: 0 none;
}

/************** MAIN NAVIGATION ****************/
nav {background:#c35700 url(images/nav_bg.png) top repeat-x;overflow: hidden;padding:20px 0 15px; margin-top:15px;}
nav ul {float:right;}
nav li {list-style: none;font: 18px 'LatinModernMono10Regular', Arial, sans-serif;float:left; padding-right:15px;border-right:1px solid #fff; margin-right:15px;}
nav li:last-child{padding-right:0;border-right:0;margin-right:0;}
nav a {color:#ffffff; text-decoration:none;display: block; float:left;}
nav a:hover {text-decoration: underline;}

/**************** content areas ****************/
header {background:#252525;position: relative;}
header h1{font-size:57px;}
header h2{font-size:24px;}
#content {background: url(images/content_bg.png) top repeat-x;overflow: hidden;}
/****** ahh my balls ****/
#myballs{position:relative;z-index:1; display:block; width:100%; height:400px;}
#myballs > div{border:3px solid #ffffff;-webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px;}
#myballs > div:hover { z-index:6;-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 0 40px rgba(0,0,0,0.2);box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;}
.balls-c{background:url(images/balls_c.jpg) center no-repeat;height:285px;width:285px;position:absolute;z-index:5; left:50%; top:30px;margin-left:-142px;}
.balls-lone{background:url(images/balls_l1.jpg) center no-repeat;height:255px;width:255px;position:absolute;z-index:4; left:20%; top:45px}
.balls-ltwo{background:url(images/balls_l2.jpg) center no-repeat;height:217px;width:217px;position:absolute;z-index:3; left:7%; top:60px}
.balls-rone{background:url(images/balls_r1.jpg) center no-repeat;height:255px;width:255px;position:absolute;z-index:4; right:20%; top:45px}
.balls-rtwo{background:url(images/balls_r2.jpg) center no-repeat;height:217px;width:217px;position:absolute;z-index:3; right:7%; top:60px}
/****** ahh my description ***/
body.home #content > .wrapper > ul{margin-bottom:70px}
body.home #content > .wrapper > ul li{text-align:center;font: 40px 'BallparkWeiner', Arial, sans-serif;letter-spacing: 0; color:#ffffff}
body.home #content > .wrapper > ul li:last-child span{background:#252525}
body.home #content > .wrapper > ul li span{background: #c35700; padding: 5px 20px; display:inline-block;margin-bottom:3px;}

article, .webcontent {background: #247267 url(images/text_bg.png);width: 100%; padding: 15px 15px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body.page-template-about-php article{width:35%; float:left;}
article h1{text-shadow: #000 1px 1px 1px; line-height:46px;padding-top:0}
article h2, #resume h3{font: 20px 'LatinModernMono10Regular', Arial, sans-serif; color: #c35700;}
article section{background: rgb(36, 70, 66); /* The Fallback */background: rgba(37, 37, 37, 0.6);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; width:100%; padding:15px; overflow:hidden}
body.home article img{float:right;margin: 0 0 15px 30px;max-width:100%;border:3px solid #fff;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article ul {margin: 0 0 10px 25px; list-style:disc;}
article li {font-size: 14px; line-height: 1.5em;color:#ffffff}
aside {width: 28%; padding: 25px 0 30px 0; float: right;}
/*about page specific*/
#resume{background:none; width:65%}
#resume section{background:#252525;}
#resume > div{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;;padding-left:220px;margin-top:100px;padding-bottom:25px}
#resume > div:nth-of-type(even){padding-left:0;padding-right:220px;}
#resume h2 a{background:#ffffff;width:200px;height:200px;-webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px;text-align:center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding-top:80px;float:left;border:1px solid #eaeaea; margin-bottom:15px;text-decoration:none; display:block}
#resume h2.resprot a{padding-top:60px;}
#resume h2:nth-of-type(even) a{float:right;}
/* web page specific */
body.page-template-web-php article{background:none;position:relative; padding:0}
body.page-template-web-php article > section{background:none; padding:0;height:230px; overflow:visible}
body.page-template-web-php article.inactive > section{height:165px;}
.bigbutton{overflow:hidden; height:220px;width:36%; max-width:346px; border:5px solid #ffffff;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; cursor:pointer;display: inline-block; position:absolute}
.bigbutton.inactive{height:430px}
.webmykid .bigbutton{background:url(images/web_01a.jpg)top left no-repeat;top:0;left:0;}
.webmykid .bigbutton.inactive{left:5%;}
.webseeds .bigbutton{background:url(images/web_02a.jpg)top left no-repeat;top:230px;left:0;}
.webseeds .bigbutton.inactive{top:50px;left:24%;}
.webgg .bigbutton{background:url(images/web_03a.jpg)top left no-repeat;top:460px;left:0;}
.webgg .bigbutton.inactive{top:100px;left:auto;right:24%}
.webjulie .bigbutton{background:url(images/web_04a.jpg)top left no-repeat;top:690px;left:0;}
.webjulie .bigbutton.inactive{top:150px;left: auto; right:5%}
.webnext .bigbutton{background:url(images/web_05a.jpg)top left no-repeat;top:920px;left:0;}
.webnext .bigbutton.inactive{top:580px;left:12%;}
.webwho .bigbutton{background:url(images/web_06a.jpg)top left no-repeat;top:1150px;left:0;}
.webwho .bigbutton.inactive{top:630px;left:36%;}
.webfloor .bigbutton{background:url(images/web_07a.jpg)top left no-repeat;top:1380px;left:0;}
.webfloor .bigbutton.inactive{top:680px;left:auto;right:12%}
.bigbutton p{text-indent:-99999px;}
.webcontent {width:64%;float:right;clear:right}
.webcontent h3{background: rgb(36, 70, 66); /* The Fallback */background: rgba(37, 37, 37, 0.6);font: 20px 'LatinModernMono10Regular', Arial, sans-serif; color: #c35700; padding-left:15px}
.webcontent h2{font: 36px 'BallparkWeiner', Arial, sans-serif;letter-spacing: 0;color: #ffffff;text-shadow: #000 1px 1px 1px;}
.webcontent p{background: rgb(36, 70, 66); /* The Fallback */background: rgba(37, 37, 37, 0.6); padding:5px 15px}
.webcontent ul{background: rgb(36, 70, 66); /* The Fallback */background: rgba(37, 37, 37, 0.6); padding:0 40px 15px; margin:0}
/* 3d page specific */
body.page-template-3d-php article {overflow:hidden}
body.page-template-3d-php article section{margin-bottom:5px; width:49.5%;float:left; clear:left}
body.page-template-3d-php article .thumbnails{margin-left:0}
body.page-template-3d-php article .thumbnails li{float:left; list-style:none}
body.page-template-3d-php article .thumbnails li > a{text-decoration:none; border:3px solid #ffffff; line-height:0; display:inline-block; margin-right:5px}
body.page-template-3d-php article section:nth-child(even){float:right; clear:right}

/******* Comment section ******/
ol.commentlist { list-style: none; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor { }
ol.commentlist li.byuser { }
ol.commentlist li.comment-author-admin { }
ol.commentlist li.comment { border-bottom: 1px dotted #666; padding: 10px; }
ol.commentlist li.comment div.comment-author { }
ol.commentlist li.comment div.vcard { }
ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
ol.commentlist li.comment div.vcard cite.fn a.url { }
ol.commentlist li.comment div.vcard img.avatar { float:right; margin: 0 0 10px 10px; }
ol.commentlist li.comment div.vcard img.avatar-32 { }
ol.commentlist li.comment div.vcard img.photo { }
ol.commentlist li.comment div.vcard span.says { }
ol.commentlist li.comment div.commentmetadata { }
ol.commentlist li.comment div.comment-meta { font-size: 10px; }
ol.commentlist li.comment div.comment-meta a { color: #ccc; }
ol.commentlist li.comment p { }
ol.commentlist li.comment ul { }
ol.commentlist li.comment div.reply { font-size: 11px; }
ol.commentlist li.comment div.reply a { font-weight: bold; }
ol.commentlist li.comment ul.children { list-style: none; margin: 10px 0 0; }
ol.commentlist li.comment ul.children li { }
ol.commentlist li.comment ul.children li.alt { }
ol.commentlist li.comment ul.children li.bypostauthor { }
ol.commentlist li.comment ul.children li.byuser { }
ol.commentlist li.comment ul.children li.comment { }
ol.commentlist li.comment ul.children li.comment-author-admin { }
ol.commentlist li.comment ul.children li.depth-2 { border-left: 5px solid #555; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-3 { border-left: 5px solid #999; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-4 { border-left: 5px solid #bbb; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-5 { }
ol.commentlist li.comment ul.children li.odd { }
ol.commentlist li.even { background: #fff; }
ol.commentlist li.odd { background: #f6f6f6; }
ol.commentlist li.parent { border-left: 5px solid #111; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even { }
ol.commentlist li.thread-odd { }

/********* FORM ELEMENTS *********/
form {
	margin: 0;padding: 10px; float:left; position:relative; width: 90%;
}
form p{
	color: #ff0000; text-align: right;
}
form div{
	background: #bbbbbb; margin-top: 5px; overflow: hidden;
}
label {text-align: right; display: block;width: 16%; padding: 2% 2% 1%; margin: 0;color: #000; font-size: 13px; float: left;}
input[type="submit"] {background: #007672; border: 3px solid #fff;-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;color: #fff; font: 24px 'LatinModernMono10Regular', Arial, sans-serif;	width: 100%; padding: 5px 0; float: right;-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box;/* Firefox, other Gecko */box-sizing: border-box;/* Opera/IE 8+ */cursor: pointer;-moz-transition: all 1s ease-out;-o-transition: all 1s ease-out;-webkit-transition: all 1s ease-out;-ms-transition: all 1s ease-out;}
input[type="submit"]:hover {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-webkit-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
}
input[type="text"]:focus, input[type="text"]:active, textarea:focus, textarea:active {
	background:#ffffff;
	-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; outline: none; border:0;
	color:#000;
}
input[type="text"], textarea {
	background:#fafafa;
	-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; outline: none; border:0;
	color: #6F6F6F;font: 18px 'LatinModernMono10Regular', Arial, sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	width: 100%; padding: 10px; margin: 0 0 10px;float: right;max-height: 120px;
}

/********* FOOTER ELEMENTS *********/
footer {
	background: #c35700 url(images/footer_bg.png) top repeat-x;
	width:100%; padding:50px 0 20px;margin-top:25px;
}
footer .wrapper > p{clear:both; text-align: center; font-size: 11px; margin-top:15px;}
footer section{float:left; width:25%}
footer ul{margin-bottom:20px}
footer .menu-item-10{display:none}
footer li{font-size:14px; line-height:20px;}
footer #contact{float:right; width:75%;}
footer #contact > p{float:left; width:35%}
footer form{float:right; width:60%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
footer p {
	color: #ffffff;
	margin: 4px;
}
footer a {
	color: #ffffff; text-decoration: underline;
}
footer a:hover {
	text-decoration: none;
}
/* RESPONSIVE LAYOUT
************************************************/

@media screen and (max-width: 1024px) {
	.webwho .bigbutton.inactive{top:630px;left:33%;}
}

@media screen and (max-width: 825px) {
}

@media screen and (max-width: 780px) {
	body.page-template-about-php article, #resume{width:100%}
	footer form{width:100%;}
	footer section{width:40%}
	footer #contact {width:55%}
	footer #contact p{width:auto}
}

@media screen and (max-width: 525px) {
	header{text-align:center;}
	/* the nav */
	nav {
		background:none;
		overflow: hidden;padding:20px 0 15px; margin-top:15px;
	}
	nav ul {width:100%}
	nav li {
		float:left; padding:0;border-right:0; margin-right:0; width:49%;text-align:center
	}
	nav li:nth-child(even){float:right}
	nav a {
		color:#ffffff; text-decoration:none; background:#C35700;
		display: block; width:100%; padding: 10px 0;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;margin-bottom:10px
	}
	/* the balls */
	#myballs{height:800px}
	.balls-c{left:50%; top:270px;margin-left:-142px;}
	.balls-lone{left:50%; top:140px;margin-left:-127px}
	.balls-ltwo{left:50%; top:30px;margin-left:-108px}
	.balls-rone{left:50%; top:420px;margin-left:-127px}
	.balls-rtwo{left:50%; top:560px;margin-left:-108px}
	article{width: 100%;}
	body.page-template-web-php article > section{min-height:230px; height:auto; overflow:hidden}
	.bigbutton,.webmykid .bigbutton,.webseeds .bigbutton,.webgg .bigbutton,.webjulie .bigbutton,.webnext .bigbutton,.webwho .bigbutton,.webfloor .bigbutton{ height:220px;position:relative !important;top:auto !important;left:auto !important; right:auto !important; width:100%; margin:0 auto;display:block}
	.webcontent {width:100%;float:none}
	.webcontent h2{font-size:32px}
	aside{width: 100%;}
	.featured section{width: 96.5%;float: left; padding: 2%; margin: 0 auto 10px;}
	#resume h2 a, #resume h2:nth-of-type(even) a{margin:0 auto;float:none}
	#resume div, #resume div:nth-of-type(even){padding:0;margin-top: 10px;margin-bottom:25px;}
	body.page-template-3d-php article section{width:100%;}
	footer .menu-item-10{display:block}
	footer section, footer #contact{width:100%;}
	footer ul{overflow:hidden;margin-top:15px}
	footer li{ width:49%; float:left;}
	footer li:nth-child(even){float:right}
	footer li a{display:block; padding:10px 0; background:#252525;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-align:center; text-decoration:none;margin-bottom:10px}
}