/*
--------- PAGE RESET ----------
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html, body {
height: 100%;
}

body {background: #252525 url('../images/header.jpg') repeat-x top center; color: #fff; font: 14px 'Ubuntu', Arial, serif; font-weight: normal;}

.imgswap {display: block; overflow: hidden; text-decoration: none; text-indent: -9999px;}
.imgswap a {display: block; height: 100%; width: 100%;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
}
td {
	vertical-align: top;
}

/*--------- FONT STYLES ----------*/
h1, h2, h3, h4 {font-family: 'Yanone Kaffeesatz', Arial, serif; padding-bottom: 5px; margin-bottom: 10px;}
	h1 {color: #FFF; font-size: 20pt;}
	h2 {color: #FFF; font-size: 16pt;}
	h3 {font-size: 14pt;}
	h4 {font-size: 12pt;}
	h5 {font-size: 11pt;}

.design {background: url('../images/design-icon.png') no-repeat top right; padding-right: 30px;}
.design-ia {background: url('../images/design-ia.png') no-repeat top right; padding-right: 60px;}
.design-fe {background: url('../images/design-fe.png') no-repeat top right; padding-right: 60px;}
.fe {background: url('../images/fe.png') no-repeat top right; padding-right: 30px;}

a {color: #333;text-decoration: none;}
a:hover {color: #e03500;}
a:visited {color: #333;}
/*a:active {background-color: #eac407; padding: 5px 10px;}*/

.white-text {color: #fff;}
.red-text {color: #C50000;}
.drk-red-text {color: #7b0000;}
.light-gray-text {color: #999;}
.dark-gray-text {color: #333;}
.med-gray-text {color: #777;}
.yellow-text {color: #febd50;}

.uppercase {text-transform: uppercase;}
.em {font-style: italic;}
.small-font {font-size: 10pt;}
.medium-font {font-size: 20px;}
.large-font {font-size: 50px;}
.xl-font {font-size: 60px;}
.buffer {padding-left: 10px;}
.ubuntu {font-family: 'Ubuntu', 'Calibri', Arial, serif;}
.yan {font-family: 'Yanone Kaffeesatz', 'Calibri', Arial, serif;}

.bold {font-weight: bold;}
.italic {font-style: italic;}

.align-right {text-align: right;}
.align-left {text-align: left;}
.align-center {text-align: center;}

.spacer {padding-bottom: 20px;}
.top-spacer {padding-top: 10px;}

.gold {color: #fbb74e;}
.white {color: #fff;}
.blue {color: #1a9bc8;}

/*---- Resuable Styles ----*/
.rounded {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

.ease {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
	
/*---- Buttons ----*/
.button {
	display: inline-block;
	outline: none; 
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	margin-top: 15px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

/* Green Button */
.green-button {
	color: #fff !important;
	border: solid 1px #94bc29;
	background: #8aae28;
	background: -webkit-gradient(linear, left top, left bottom, from(#8abd00), to(#709900));
	background: -moz-linear-gradient(top,  #8abd00,  #709900);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8abd00', endColorstr='#709900');
}

a:visited.green-button {color: #fff;} 

.green-button:hover {
	background: #a0ca2d;
	background: -webkit-gradient(linear, left top, left bottom, from(#709900), to(#8abd00));
	background: -moz-linear-gradient(top, #709900, #8abd00);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#709900', endColorstr='#8abd00');
}
.green-button:active {
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#709900), to(#8abd00));
	background: -moz-linear-gradient(top,  #709900,  #8abd00);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#709900', endColorstr='#8abd00');
}



/*---- Structure ----*/
#container {width: 940px; margin: 0 auto;}

/*---- Header ----*/
header {margin: 0 auto; overflow: hidden;}
	a.name {background: url('../images/name.gif') no-repeat top center; width: 309px; height: 43px; float: right; margin-top: 10px;}

div.social-media {float: left; margin-top: 10px;}
.social-media a {
    width: 45px; height:45px;
    overflow: hidden;
    float: left;
	padding-right: 5px;
}
.social-media img {
    border: none;
    margin: 0;
}
.social-media a:hover img {
    margin-top: -45px;
}

footer {background-color: #000; padding: 20px 0; clear: both;}

/*---- Introduction ----*/
#intro {margin: 20px 0;}
.welcome {background: url('../images/welcome.gif') no-repeat 0 0; height: 269px;}

/*---- Reference: Legend ----*/
#reference {background-color: #3b3b3b; padding: 10px; margin: 0 0 40px 0;}
	.legend {background: url('../images/legend.gif') no-repeat top center; height: 40px;}
	
/*---- Main: Portfolio ----*/
#main {margin: 0 auto;}
	#main ol.row {margin: 20px 0;}
	#main ol.row li {width: 300px; padding-right: 20px; float: left; margin-bottom: 40px;}
	#main ol.row img.over {position: absolute; z-index: 3; border: none;}
	#main ol.row img.under {position: absolute; z-index: 1;}
	
	#main ol.row li.last {padding-right: 0;}
	#main ol.row li h2 {text-align:right;}
	#main ol.row li img {margin-bottom: 10px; position: relative; z-index: 1;}
	#main ol.row li a img {border: 10px solid #fff;
			-moz-box-shadow: 2px 2px 4px #000000;
			-webkit-box-shadow: 2px 2px 4px #000000;
			box-shadow: 2px 2px 4px #000000;
			/* For IE 8 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
			/* For IE 5.5 - 7 */
			filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
	}


#more a, #more a:active {color: #FC0;}

#contact-me {width: 500px;}
.divider {border-top: 1px dashed #CCC;}
#more input.green-button {width: 100px;float: right;}
#more input, #more textarea {padding: 10px 5px; border: 3px solid #ececec; width: 100%; font-size: 14px; margin-bottom: 15px;}
#more input, #more textarea {
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
#more label {font-size: 18px; margin: 20px 0 10px 0;}

/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */

.reveal-modal, .reveal-modal h1 {color: #333;}
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: 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;
		background: #fff url(modal-gloss.png) no-repeat -200px -80px;
		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;
		} 
	/*
		
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/