/**
* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
* v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
* html5doctor.com/html-5-reset-stylesheet/
*/

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

body {text-rendering:optimizeLegibility; background:#EAE3CC; font-family: "Droid Serif", Georgia,"Times New Roman",serif; margin:0; padding:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

a {text-decoration:none;}
a:link, a:visited {color:#CEBE63;}
a:hover, a:active {color:#996600;}

h1 a:link, h1 a:visited {color:#000;}
h1 a:hover, h1 a:active {color:#333;}

ul {list-style-type:none;}

h3 {
font-size:40px;
margin:160px 0 0;
}

#main { width:100%; overflow:hidden; padding:54px 0 0; }
#main .intro{ width:1220px; }

.intro { height:480px;}
.top { background: transparent url(images/hands.png) no-repeat 0 -0; }
aside {
top: 0;
left: 0;
height: 46px;
position: fixed;
margin:0;
width: 100%;
font-family:sans-serif;
color:#fff;
padding:10px 20px 0;
text-align:left;
display:block;
background: rgb(17, 72, 121);
background: rgba(17, 72, 121, 0.7);
}

ul.mad-skills {    
float: right;
margin: 0;
padding: 0 60px;
}

ul.mad-skills li{float:left; margin: 0 10px 0 0;}
ul.mad-skills li a {display:block; padding:10px 20px; border-radius:20px; }
aside a:link, aside a:visited {color:#666; text-decoration:none; background:#EAE3CC;}
aside a:hover, aside a:active {color:#666; text-decoration:none; background:#ccc;}

footer {
background:#000;
display:block;
clear:both;
width:100%;
height:80px;
}

h1 {
width:900px;
padding:10px 0 0 10px;
margin: 0 0 -140px;
font: 100px/58px 'BallparkWeiner', Arial, sans-serif;letter-spacing: 0;
font-weight:normal;
-moz-text-shadow: 1px 1px 0px #fff;
-webkit-text-shadow: 1px 1px 0px #fff;
text-shadow: 1px 1px 0px #fff;
}
h1 a{
color:#000;
text-decoration:none;
font-size: 60px;
display:block;
clear:both;
}
h1 em{
font-style:normal;
font-size: 80px;
display: block;
position:relative;
top:330px;
left:620px;
}
ul.bullet-points {display:none;}
.page-top li.hovered ul.bullet-points, .page-top li.selected ul.bullet-points{
display:block;
width:300px;
padding:16px;
color:#000;
font: 90px/98px 'BallparkWeiner', Arial, sans-serif;letter-spacing: 0;
-moz-text-shadow: 1px 1px 0px #fff;
-webkit-text-shadow: 1px 1px 0px #fff;
text-shadow: 1px 1px 0px #fff;
text-align:left;
display: block;
left: 350px;
position: absolute;
top: 210px;
z-index: 200;
}
.stuff-I-do {
padding:320px 0 20px;
color:#fff;
background:#000;
}
.stuff-I-do h3, .stuff-I-do h4, .stuff-I-do p {
width:260px;
-moz-text-shadow: 1px 1px 0px #000;
-webkit-text-shadow: 1px 1px 0px #000;
text-shadow: 1px 1px 0px #000;
}
.stuff-I-do p {
margin: 14px 0;
}

#what-i-do {
color:#FFFFCC;
background:#CF2B2B;
padding:20px 10px 20px 80px;
border-bottom:8px dashed #000;
}
#what-i-do h3 {
margin: 60px 0 0;
}
#markup {
color:#FFFFCC;
background:#669933 url(images/hand-green.png) no-repeat 0 0;
padding:20px 10px 80px 80px;
}
#code {
color:#FFFFCC;
background:#A2755D url(images/hand-taupe.png) no-repeat right 80%;
padding:20px 10px 20px 80px;
}
#style {
color:#FFFFCC;
background:#6389a2 url(images/hand-css3.png) no-repeat 60% 60px;
padding:20px 10px 120px 80px;
}
#usability {
color:#FFFFCC;
background:#CC7C4B;
padding:20px 10px 20px 80px;
}
#portfolio {
padding:20px 10px 20px 70px;
margin: 0 0 300px;
}
#contact {
padding: 100px 10px 200px 70px;
}
li.hovered ul.markup li {
font-size:35px;
line-height:30px
}

li.hovered ul.markup li:first-child {
font-size:45px;
line-height:30px
}

li.hovered ul.markup li em {
font-size:70px;
line-height:64px
}
#portfolio {overflow:hidden;}
#portfolio ul li { width:200px; float:left; text-align: center; border:1px solid #ccc; margin: 0 4px 0;}
#portfolio ul li img{width:100%;}
#portfolio ul li p { width: auto;}

a#top {
margin:0;
padding:0;
width:40px;
height:40px;
text-indent:-3000px;
display:block; 
background: transparent url(images/up.png) no-repeat; 
}
a#top:link, a#top:visited {
background-position: 0 0;
}
a#top:hover, a#top:active {
background-position: 0 -40px;
}
.page-top a#top {
background-image: none; 
cursor: default;
}

/*****************************************************************/
/************************* MEDIA QUERIES *************************/
/*****************************************************************/

@media screen and (max-device-width: 320px) {}
/***ipad***/
@media (max-device-width: 768px) and (orientation: portrait) {	
	#main { width:768px; padding: 6px 0;}
}
@media (max-device-width: 1024px) and (orientation: landscape) {}
/***iphone***/
@media screen and (max-device-width:480px),
(max-device-width:480px) and (orientation:landscape),
(min-device-width:481px) and (orientation:portrait),  
(max-device-width: 768px) and (orientation: portrait) {
	.intro {
	height:500px;
	}
	li.hovered ul.markup li, li.hovered ul.markup li:first-child, li.hovered ul.markup li em, li.really-big ul li, li.really-big ul li em {
	font: 14px/18px Arial, sans-serif;letter-spacing: 0;
}
	aside { width: 100%; min-width: 260px; background-color:#517691; float:left; position: relative; height: auto; margin:0; padding:0;}
	h1{margin: 0;}
	h1 a{font: 50px/48px 'BallparkWeiner', Arial, sans-serif;letter-spacing: 0;}
	h1 em {
    position: relative;
    left: 0;
    top: 0;
	}
a#top {
    display: none;
}

ul.mad-skills { margin:0; padding:16px 10px;}
ul.mad-skills li{ 
	border-bottom:1px solid #ccc; 
	border-top:1px solid #7A95A8; 
	padding:10px 6px; 
	overflow: hidden;
	float: left;
    margin: 0;
    width: 98%;
    -moz-text-shadow: 1px 1px 0px #fff;
	-webkit-text-shadow: 1px 1px 0px #fff;
	text-shadow: 1px 1px 0px #fff;
}
ul.mad-skills li a{ 
    font-size: 22px;
    font-weight: lighter;
}
ul.mad-skills li.first { border-top:0 none; }
ul.mad-skills li.not-last { border-bottom:0 none; }
ul.mad-skills li.home { border-bottom:0 none; border-top:0 none; }

ul.bullet-points li {
	float:left; 
	border-bottom:0px none; 
	border-top:0px none; 
	padding:0; 
	margin:0 4px 0 0;
	-moz-text-shadow: 1px 1px 0px #7A95A8;
	-webkit-text-shadow: 1px 1px 0px #7A95A8;
	text-shadow: 1px 1px 0px #7A95A8;
	width: auto;
}

#code, #markup, #what-i-do {
	background-size: auto 400px;
}
#code {
	background-size: auto 300px;
	background-position: right bottom;
}
#markup {
	background-size: auto 300px;
	background-position: -80px 20px;
}
#style{
	background-size: auto 400px;
	background-position: right bottom;

}
#what-i-do{
	background-position: 30px bottom;
}

ul.bullet-points, li.selected ul.bullet-points, li.hovered ul.bullet-points, li.default ul.bullet-points, .page-top li.hovered ul.bullet-points, .page-top li.selected ul.bullet-points {
	display:block;
	width:70%;
	padding:2px 0;
	font: 14px/18px Arial, sans-serif;letter-spacing: 0;
	display: block;
	left: 0;
	position: relative;
	top: 0;
	float: left;
	font-weight:normal;
	color:#ccc;
	text-shadow:none;
}

#portfolio ul li {
    border: 1px solid #CCCCCC;
    float: left;
    margin: 0 4px;
    text-align: center;
    width: 40%;
	}		
}

@media (min-device-width:1024px) and (max-width:509px),
(max-device-width:480px) and (orientation:portrait), 
@media screen and (max-device-width: 320px) {
       	#main { 
       	width:100%; 
       	padding:0;
       	}
       	ul.mad-skills li{
       	width:40px;
       	}
       	ul.bullet-points, li.selected ul.bullet-points, li.hovered ul.bullet-points, li.default ul.bullet-points, .page-top li.hovered ul.bullet-points, .page-top li.selected ul.bullet-points {
		display:block;
		width:80%;
		padding:2px 0;
		font: 14px/18px Arial, sans-serif;letter-spacing: 0;
		display: block;
		left: 0;
		position: relative;
		top: 0;
		float: left;
		font-weight:normal;
		color:#ccc;
		text-shadow:none;
		}
}

/****** iPhone ******/
@media screen and (max-device-width: 480px) {
	#main { width:100%; padding:0}
	.intro {
	height:500px;
	background-image: none; 
	}
	.top {
	background-image: none; 
	}
	#markup, #code, #style {
    padding: 16px 10px;
}


h3 {
    font-size: 30px;
    margin: 20px 0 0;
}

}
	
/****** iPad ******/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		footer {clear: both;position: static;}
	}