/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	Inspiration from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Defaults
-------------------------------------------------------------------------------*/

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, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

ul {list-style: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

:focus{
	outline: none;
}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix,.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {
	font: 13px Helmet, Freesans, sans-serif;
	background-image: url(../images/bkg-main.jpg);
}

/* we like off-black for text */
body, select, input, textarea {color: #333;}

a {color: #fff; text-decoration: none; font-size: 16px;}

p{
	margin: 10px 0;
}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}


/*  Common styles  */

h1{
	font-size: 30px;
}

h2{
	font-size: 18px;
}

h3{
	font-size: 16px;
}

article{
	border: solid 1px #ddd; 
	background-color: #e1e1e1;
	padding: 10px 10px 20px 20px;
	display: none;
}

.bordered{
	border: solid 5px #fff;
}

article h1{
	font-size: 22px;
	margin: 10px 0;
}

article h2{
	font-size: 16px;
}

article h1, article h2{
	color: #d96d22;
}

.margin-left{
	margin-left: 5px;
}

.margin-top{
	margin-top: 10px;
}

.light-text{
	color: #fff;
}

.float-left{
	float: left;
}

.float-right{
	float: right;
}

.wrapper{
	width: 790px;
	margin: 50px auto;
}

.main{
	width: 490px;
	padding-right: 20px;
}

.sidebar{
	padding-right: 15px;
}

footer{
	color: #000000;
}



/* Header styles */

header{
	background-color: #d96d22;
	overflow: auto;
	margin-bottom: 10px;
	padding: 0;
	background-image: linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -o-linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -moz-linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -webkit-linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -ms-linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(162,80,24)),
		color-stop(0, rgb(244,123,38)),
		color-stop(0.75, rgb(217,109,34))
);

}

h1, h2, h3, .menu {
	font-family: 'Ubuntu Condensed', sans-serif;
	font-weight: normal;
}

.menu li{
	display: block;
	float: left;
	line-height: 46px;
}

.menu a{
	display: block;
	padding: 10px;
}

.active, a:hover{
	color: #fff;
	background-color: #a9561c;
}

#logo{
	padding: 10px 0 0 20px;
	line-height: 180%;
}


/*  Home Page styles  */

.slider{
	width: 740px;
	height: 280px;
	margin-top: 10px;
	overflow: scroll;
}

.slider ul {
	width: 10000px;
}

.slider li {
	float: left;
}

#slider-nav { 
	display: none; 
	position: absolute;
	top: 275px;
	width: 730px;
	padding: 0 10px; 
}

#slider-nav button {
	cursor: pointer;
	width: 40px;
	height: 40px;
	background-color: transparent;
	border: none; 
}

.prev{
	background-image: url('../images/prev.png');
}

.next{
	background-image: url('../images/next.png');
}

/*  Resume Page styles  */

.resume-item{
	padding-top: 10px;
}

.icon{
	margin: 10px 10px 10px 0;
}

.resume-head{
	margin-top: 20px;
}


/*  Portfolio Page styles  */

#portfolio{
	padding: 10px 0 20px 20px;
}

.port li{
	display: block;
	padding: 5px;
	float: left;
	background-color: #fff;
	margin: 0 26px 26px 0;
}

.port h3{
	text-align: center;
}


/*  Contact Page styles  */

.contact{
	width: 400px;
}

input, textarea{
	width: 300px;
	margin-top: 10px;
	padding: 10px;
	border: solid 1px #999;
}

.highlight{
	border: solid 2px #88a1ac;
}

.error{
	color: red;
	font-style: italic;
}

.success{
	color: green;
	font-style: italic;
}

#submit{
	clear: both;
	width: 80px;
	border: solid 1px #88a1ac;
	color: #fff;
	background-color: #D96D22;
	background-image: linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -o-linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -moz-linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -webkit-linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -ms-linear-gradient(bottom, rgb(162,80,24) 0%, rgb(244,123,38) 0%, rgb(217,109,34) 75%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(162,80,24)),
		color-stop(0, rgb(244,123,38)),
		color-stop(0.75, rgb(217,109,34))
);
}

/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}