/* CSS for stephenpeasley.com */

@import url('reset.css');

/* global styles ------------------------------------------------------------*/

/* ------------------------------------ */
/* red striped background -------------------------------------------------- */
/* background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQIHWM8Z2TynwEJcEhLMzAh8RlAAj+ePkUIwgRAisAqkQXAgugCIEEA4pQOe0yGqPsAAAAASUVORK5CYII=); */
/* ------------------------------------ */

/* ------------------------------------ */
/* green striped background ------------- */
/* background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIHWOccD7n//33NxiQARNIQFFQA1mMgQnEQ5cAC6JLwAWRJQA2txF6o6LQMAAAAABJRU5ErkJggg==); */
/* ------------------------------------ */

/* ------------------------------------ */
/* blue striped background ------------- */
/* background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQIHWPUmXnuPwMS0BLhYGBC4jOABK69+YEQhAmAFIFVIguABdEFQIIACw0O4sWWTLEAAAAASUVORK5CYII=); */
/* ------------------------------------ */

/* red: #ce3234 */
/* green: #6fbe44 */
/* blue: #2c99ce */

body {
	text-align: center;
	text-rendering: optimizeLegibility;
	background: #EAEAEA url(/_images/bg.jpg) 0 0;
	font: 12px/16px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

a:link, a:visited, a:active {
	color: #888;
	text-decoration: none;
}

a:hover {
	color: #555;
}

h1, h2, h3 {
	font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2",helvetica,arial,sans-serif;
}

h1 { font-weight: 600; font-size: 4em; line-height: 0.9em; margin: 0 0 1em 0; text-transform: uppercase; text-shadow: white 2px 1px 0.5px; }
h2 { font-weight: 400; font-size: 3.25em; line-height: 0.8em; margin: 0; }
h3 { font-weight: 400; font-size: 3.25em; line-height: 0.8em; margin: 0; }
.h3stub { font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2",helvetica,arial,sans-serif; font-weight: 400; font-size: 3.25em; line-height: 0.8em; margin: 0 0.15em 0 -0.06em; width: 2.45em; text-transform: uppercase; float: left; }

p {
	margin: 0 0 0.25em 0;
}

/* nav ----------------------------------------------------------------------*/

#nav {
	position: fixed;
	height: 95px;
	width: 100%;
	top: 0;
	left: 0;
	padding: 0.75em 0 0 0.85em;
	z-index: 100;
}

#nav ul {
	position: absolute;
	right: 1.5em;
	bottom: 0;
}

#nav ul li {
	width: 95px;
	height: 95px;
	margin: 0 0 0 0.65em;
	float: left;
	position: relative;
	background: transparent url(/_images/nav_shadow.png) 0 0;
}

#nav ul li.active { background: none; }

#nav ul li.active a:hover { background-position: 0 !important; cursor: default; }

#nav ul li a { width: 95px; height: 95px; position: absolute; top: 0; left: 0; z-index: 2; }

#nav ul li a span { visibility: hidden; z-index: 2; }

#nav ul li.about a {
	background: transparent url(/_images/nav_about.png) 0 0;
}

#nav ul li.about a:hover {
	background-position: 94px 0;
}

#nav ul li.projects a {
	background: transparent url(/_images/nav_projects.png) 0 0;
}

#nav ul li.projects a:hover {
	background-position: 94px 0;
}

#nav ul li.contact a {
	background: transparent url(/_images/nav_contact.png) 0 0;
}

#nav ul li.contact a:hover {
	background-position: 94px 0;
}

/* body ---------------------------------------------------------------------*/

#wrapper {
	margin: 0 auto;
	text-align: left;
}

.inner-content {
	padding: 1.15em 0.85em;
}

.content-box { 
	width: 100%;
}

/* about --------------------------------------------------------------------*/

#about {
	color: #751d1d; height: 1500px; width: 100%;
}

#about h1 { color: #9b2627; }
#about .hello { color: #ce3234; }
#about h1 em { font-weight: 300; font-style: normal; margin: 0 0 0 -2px; }
#about p { margin: 0 0 1.4em 0.15em; }
#about .h3stub { color: #9b2627; }

#about a:link { color: #751d1d; text-decoration: underline; }
#about a:visited { color: #751d1d; }
#about a:hover { color: #ce3234; }
#about a:active { color: #ce3234; }

#about .intro { width: 30.3%; border-right: 0.3em solid #ddd; padding: 0 1em 0 0; margin: 0 1.6em 0 0; text-align: left; float: left; }
#about #pic { position: relative; top: 2em; }
#about #pic img { border-bottom: 0.1em solid #ddd; }
/*#about #blinder { position: absolute; background-color: black; height: 1.5em; width: 6em; top: 3.65em; left: 9.5em; }*/

#tidbits { width: 63.8%; margin: 0 1.5em 0 0; padding: 0 1em 0 0; }

#tidbits h3 { color: #9b2627; text-transform: uppercase; }
#tidbits p { text-align: left; }

#chops { float: right; width: 34.3%; position: relative; margin: 0 0 0 0; border-left: 0.3em solid #ddd; }

#chops h3 { color: #9b2627; text-transform: uppercase; padding: 0 0 4.55em 0.475em; }
#chops p { padding: 0 0 0 1.75em; }

#chops ul { position: absolute; top: 2.8em; left: 1.75em; width: 92%; padding: 0; z-index: 2; }
#chops ul.bg { z-index: 1; }

#chops ul li { width: 100%; background:#ce3234 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQIHWM8Z2TynwEJcEhLMzAh8RlAAj+ePkUIwgRAisAqkQXAgugCIEEA4pQOe0yGqPsAAAAASUVORK5CYII=); margin-bottom: 0.15em; list-style-type: none; }

#chops ul.bg li { width: 100%; background:#c4c4c5 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQIHWPcunXbfwYkwM/Pz8CExGcACXz8+BEhCBMAKQKrRBYAC6ILgAQBOjgPVjs00AAAAAAASUVORK5CYII=); margin-bottom: 0.15em; }

#chops ul li span { color: #fff; font-size: 0.75em; margin-left: 0.5em; }

#ioffer .h3stub { width: 4.3em; }
#ineed .h3stub { width: 4em; }

#seam1 { height: 1em; margin: 0.85em; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQIHWPI3+fyHwgYkDGYgy4BV4EsARcEaYdJMII4yKBgv+t/AHshPwJu+c3XAAAAAElFTkSuQmCC); }

/* projects -----------------------------------------------------------------*/

#projects {
	color: #3f6c26; height: 1500px; width: 100%;
}

#projects h1 { color: #548f33; }
#projects h4 {
	font-size: 1.1em;
	color: #3f6c26;
	margin: 0 0 0.3em;
}
#projects p { margin: 0 0 0.6em 0.15em; }

#projects a:link { color: #3f6c26; text-decoration: underline; }
#projects a:visited { color: #3f6c26; }
#projects a:hover { color: #6fbe44; }
#projects a:active { color: #3f6c26; }

#projects .row { margin: 0 0 1.75em; height: 145px; clear: both; }
#projects .project { margin-bottom: 2em !important; }
#projects .project img { margin-right: 0.75em; }
#projects .project .overlay { float: left; position: relative; }
#projects .project .overlay .content {
	position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 144px;
    background-color: #333;
    color: #fff;
    text-align: center;
    opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: all 0.5s ease;
}
#projects .project .overlay:hover .content { opacity: 0.75; filter:alpha(opacity=75); -webkit-transition: all 0.5s ease; }
#projects .project ul { white-space: normal; }
#projects .project ul li { font-size: 0.9em; margin: 0 0 0.75em 0; line-height: 1.35em; white-space: inherit; }
#projects .project ul li.duties { font-weight: bold; }
#projects .project.one { width: 30.3%; white-space: nowrap; padding: 0 1em 0 0; margin: 0 1.6em 0 0; text-align: left; float: left; }
#projects .project.two { width: 63.8%; white-space: nowrap; margin: 0 1.5em 0 0; padding: 0 1em 0 0; }
#projects .project.three { float: right; width: 34.3%; white-space: nowrap; position: relative; padding: 0 0 0 1.75em; margin: 0 0 0 0; }

.project .circle {
	position: relative;
	display: block;
	width: 70px;
	height: 70px;
	background: #548f33;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIHWOccD7n//33NxiQARNIQFFQA1mMgQnEQ5cAC6JLwAWRJQA2txF6o6LQMAAAAABJRU5ErkJggg==);
	color: white;
	margin: -115px auto 40px;
	opacity: 0;
	filter:alpha(opacity=0);
	-moz-border-radius: 35px;
	-webkit-border-radius: 35px;
	-webkit-transition: all 0.5s ease;
}

.project .overlay:hover .circle { opacity: 1; filter:alpha(opacity=100); -webkit-transition: all 0.5s ease; }

.project .circle span {
	position: absolute;
	top: 27px;
	text-align: center;
	width: 100%;
	font-size: 1.2em;
}

#projects .project .circle a:link, #projects .project .circle a:visited, #projects .project .circle a:active { color: #fff; text-decoration: none; }
#projects .project .circle a:hover { text-decoration: underline; }

#seam2 { height: 1em; margin: 0.85em; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQIHWPQmXnuPxAwIGMwB10CrgJZAi4I0g6TYARxkIHurPP/AZpSP6ydJw0IAAAAAElFTkSuQmCC); }

/* contact ------------------------------------------------------------------*/

#contact {
	color: #195675; height: 1500px; width: 100%;
}

#contact .h3stub { color: #21729b; width: 1.75em; }

#contact a:link { color: #195675; text-decoration: underline; }
#contact a:visited { color: #195675; }
#contact a:hover { color: #2c99ce; }
#contact a:active { color: #195675; }

#contact .modes { width: 30.3%; border-right: 0.3em solid #ddd; padding: 0 1em 0 0; margin: 0 1.6em 0 0; text-align: left; float: left; }

#contact .modes ul { margin: 0.5em 0 0 -1em; }

#contact .modes ul li a {
	float: left;
	margin: 0 0 0.75em 1em;
	width: 25px;
	height: 0;
	padding-top: 25px;
	overflow: hidden;
}
#contact .modes ul li#iconemail a:link { background: transparent url(/_images/icons_contact.gif) 0 -25px no-repeat; }
#contact .modes ul li#iconemail a:hover { background-position: 0 0; }
#contact .modes ul li#linkedin a:link { background: transparent url(/_images/icons_contact.gif) -25px -25px no-repeat; }
#contact .modes ul li#linkedin a:hover { background-position: -25px 0; }
#contact .modes ul li#skype a:link { background: transparent url(/_images/icons_contact.gif) -50px -25px no-repeat; }
#contact .modes ul li#skype a:hover { background-position: -50px 0; }
#contact .modes ul li#twitter a:link { background: transparent url(/_images/icons_contact.gif) -75px -25px no-repeat; }
#contact .modes ul li#twitter a:hover { background-position: -75px 0; }

#contact h1 { color: #21729b; }
#contact h1 em { color: #2c99ce; font-weight: 300; font-style: normal; margin: 0 0 0 -3px; }
#contact p { color: #21729b; margin: 0 0 0.6em 0.15em; }

#twitterfeed { margin: 3em 0 0 0; min-width: 300px; }
#twitterfeed .h3stub { width: 4.35em; }
#twitterfeed .timestamp { font-style: italic; }

#contactform { color: #21729b; margin: 0 0 0 20em; }
#contactform fieldset { background: transparent url(/_images/contact_airmail.gif) 0 0 repeat-x; padding: 1.25em 0 0 0; }
#contactform input { clear: right; }

#contactform label {
	width: 100%;
	display: block;
	margin: 0.5em 0;
	float: left;
}

#contactform label span {
	display: block;
	color: #21729B;
	font-size: 1em;
	float: left;
	width: 5.15em;
	text-align: left;
	padding: 0.5em 0 0 0;
}

#contactform .input_text {
	padding: 0.5em;
	width: 21em;
	background: white;
	border-bottom: 1px double #DDD;
	border-top: 1px double #BBB;
	border-left: 1px double #CCC;
	border-right: 1px double #DDD;
}

#contactform .message_text{
	padding: 0.5em;
	width: 21em;
	background: white;
	border-bottom: 1px double #DDD;
	border-top: 1px double #BBB;
	border-left: 1px double #CCC;
	border-right: 1px double #DDD;
	overflow: hidden;
	height: 15em;
}

#contactform #contactme_buttons {
	width: 25.25em;
	text-align: right;
}

#contactform .button {
	background-color: #21729b;
	color: #fff;
	border-bottom: 1px double #195675;
	border-top: 1px double #2c99ce;
	border-left: 1px double #2c99ce;
	border-right: 1px double #195675;
	width: 6em;
	height: 2em;
}

#contactform .button:hover {
	cursor: pointer;
	background-color: #2c99ce;
	border-bottom: 1px double #2c99ce;
	border-top: 1px double #195675;
	border-left: 1px double #195675;
	border-right: 1px double #2c99ce;
}

#feedback { margin: 0.75em 0 0 0; width: 25.45em; }
#feedback p { padding: 0.25em 0.5em; }
#feedback p.processing { background-color: #ddd; color: #666; }
#feedback p.success { background-color: #6fbe44; color: #fff; }
#feedback p.error { background-color: #ce3234; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQIHWM8Z2TynwEJcEhLMzAh8RlAAj+ePkUIwgRAisAqkQXAgugCIEEA4pQOe0yGqPsAAAAASUVORK5CYII=); color: #fff; }

/* footer -------------------------------------------------------------------*/

#footer {
	height: 70px; width: 100%;
	background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFCAYAAACJmvbYAAAAR0lEQVQIHWP88uXbfwYoePr0MYOAgAADNzcvWIQJXUJMTIzh69fPYGFGkE6YDpAEDLx69YqB4ebNm/9fvnz5HxtgwCUBUgwAEg9Naocy57IAAAAASUVORK5CYII=) repeat-x;
}

#footer .logo { float: left; margin-top: 0.65em; }
#footer h2 { float: left; color: #e6e7e8; font-size: 3.5em; text-transform: uppercase; margin: 0.195em 0 0 0.25em; }
#footer p { color: #d9d9d9; font-size: 11px; line-height: 14px; text-align: right; margin-top: 0.25em; }
#footer a:link, #footer a:visited, #footer a:active { color: #d9d9d9; text-decoration: none; }
#footer a:hover { color: #ccc; text-decoration: underline; }

/* clearfix -----------------------------------------------------------------*/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* type ---------------------------------------------------------------------*/

.parentheses { position: relative; font-size: 88%; }
h1 .parentheses { top: -0.15em; font-size: 84%; margin: 0 0 0 0.05em; }
h2 .parentheses { top: -0.15em; }
p .parentheses { top: -0.15em; }

#about ::selection { background:#ce3234; color:#fff; }
#about ::-moz-selection { background:#ce3234; color:#fff; }
#about ::-webkit-selection { background:#ce3234; color:#fff; }
#about .char1 { margin: 0 -3px 0 -1px; }
#about .char2 { margin: 0 -1px 0 -1px; }
#about .char3 { margin: 0 0 0 -1px; }
#about .char4 { margin: 0 0 0 -2.5px; }
#about .intro .char1 { margin: 0 -3px 0 -2px; }
#ioffer .h3stub .char1 { margin: 0 -1px 0 0; }
#ineed .h3stub .char1 { margin: 0 -1px 0 0; }

#projects ::selection { background:#6fbe44; color:#fff; }
#projects ::-moz-selection { background:#6fbe44; color:#fff; }
#projects ::-webkit-selection { background:#6fbe44; color:#fff; }
#projects .char1 { margin: 0 0 0 -1.5px; }
#projects .char2 { margin: 0 -1px 0 -1px; }
#projects .char3 { margin: 0 -1px 0 -1px; }
#projects .char4 { margin: 0 -1px 0 0; }
#projects .char5 { margin: 0 -2px 0 0; }
#projects .char6 { margin: 0 -3px 0 -2px; }

#contact ::selection { background:#2c99ce; color:#fff; }
#contact ::-moz-selection { background:#2c99ce; color:#fff; }
#contact ::-webkit-selection { background:#2c99ce; color:#fff; }
#contact .char1 { margin: 0 0 0 -2px; }
#contact .char2 { margin: 0 0 0 -1px; }
#contact .char3 { margin: 0 0 0 -1px; }
#contact .char4 { margin: 0 0 0 -1px; }
#contact .char5 { margin: 0 -6px 0 0; }
#contact .char6 { margin: 0 0 0 -1px; }
#modes .char1 { margin: 0 0 0 -1px; }
#twitterfeed .h3stub .char1 { margin: 0 0px 0 2px; }
#twitterfeed .h3stub .char2 { margin: 0 -1px 0 0; }

#IEshamer .char1 { margin: 0 -1px 0 -1px; }
#IEshamer .char2 { margin: 0 0 0 -2px; }

#footer .char1 { margin: 0 1px 0 -1px; }

/* IE7 shamer ---------------------------------------------------------------*/

.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background-color: #000;
	background-color: rgba(0,0,0,.8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
}

.reveal-modal {
	visibility: hidden;
	top: 100px; 
	left: 50%;
	margin-left: -300px;
	width: 520px;
	background-color: #fff;
	position: absolute;
	z-index: 101;
	padding: 30px 40px 34px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
	
.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
	font-size: 22px;
	line-height: .5;
	position: absolute;
	top: 8px;
	right: 11px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	font-weight: bold;
	cursor: pointer;
}

#IEshamer h1 {
	margin: 0 0 0.5em 0;
	color: #9b2627;
}

#IEshamer h1 span.alot { color: #ce3234; }

#IEshamer p {
	margin: 0 auto 1em;
	width: 40em;
	color: #751d1d;
}

#IEshamer a:link { color: #751d1d; text-decoration: underline; }
#IEshamer a:visited { color: #751d1d; }
#IEshamer a:hover { color: #ce3234; }
#IEshamer a:active { color: #ce3234; }