/*Main Styles - Below you can change the font or link colors.*/

body{
	/*background-color:#fff;*/ /*If you just want a background color, change it here*/
	background-image: url("../images/background/bg.jpg"); /*if you want to change the background to a different image, change it here*/
}

body,html{
  height:100%;
}

* {
	margin:0px;
	padding:0px;
}

h1, h2, h3, h4, h5{
	font-family: 'Candal', sans-serif;
}

p{
	font-family: Arial, Helvetica, sans-serif;
	color: #09F;
	text-align: left;
	font-size: 14px;
}



a img{
	border: none;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover, a:active, a:focus { 
	text-decoration: none;
}

#wrapper{
	width: 1000px;
}

.clr {
	clear:both;
}


/*Header - The code below will style the top of the page (logo and navigation). You can change the background image, your logo and the colors of the navigation menu here.*/

#header{
	height: 105px;
	width: 3160px;
	z-index: 1000;
	display: block; 
	top: 0px;
}

.fixed{
	background-color: #34499f;
	position: fixed;
	left: 0;

}

.inner{
	width: 100%;
	margin: 20 auto;
	height: 100px;
}

.logo{
	left: 120px;
	position: absolute;
	top: 36px;
	display: block;
}

#welcome{  /*Here you can change your name and animation name*/
	float: left;
	width:350px;
	margin:auto;
	margin-top:75px;
	padding-left: 314px;
}
#welcome h2 {
	color: #ff9c00;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 0px;
	padding-left: 10px;
	padding-bottom: 2px;
	font-family: "Arial Black", Gadget, sans-serif;
	
}
#welcome h3 {
	color:#3c96a9;
	font-size:12px;
	font-weight: normal;
	text-transform:uppercase;
	text-align:left;
	padding-left:10px;
	font-weight:normal;
	
}

/*Navigation*/


.nav{
	width: 800px;
	float: left;
	margin-left: 36px;
	font-family: 'Candal', sans-serif;
	list-style-type: none;
	font-size: 1.05em;
	padding: 39px 0px 0px 0px;	
}

.nav li{
	display: inline;
	padding: 10px 10px 10px 14px;
}

.nav li a{
	text-decoration: none;
	padding-left: 4px;
	color: #fbf4e7;
}

.nav li a.active, .nav li a:hover{
	color: #ff9c00;
}

/*Demo Reel*/

#demoreel{
	width: 1580px;
	height: 900px;
	padding-top: 120px;
	/*background-image: url("../images/background/bg.jpg"); /*if you want to change the background to a different image, change it here*/
}

#video{
	padding: 30px 0px 30px 400px;
}


/*About*/

#about{
	width: 1580px;
	height: 900px;
	padding-top: 120px;
}

#about_left{
	float: left;
	width: 500px;
	padding-left: 313px;
}

#about_left h2{
	color:#34499f;
	text-transform:uppercase;
	font-size:40px;
	padding: 40px 0px 10px 0px;
}

#hobbies{
	padding-top: 60px;
}

#hobbies h5{
	color: #fff; /*#363844;*/
	font-size: 18px;
	padding-bottom: 20px;
}

.table2{
	padding-right: 20px;
}

#myButtonLink1 {
	display: block;
	width: 115px;
	height: 114px;
	background: url("../images/clarinet.png") bottom;
	text-indent: -99999px;
}
#myButtonLink1:hover {
	background-position: 0 0;
}

#myButtonLink2 {
	display: block;
	width: 115px;
	height: 114px;
	background: url("../images/read.png") bottom;
	text-indent: -99999px;
}
#myButtonLink2:hover {
	background-position: 0 0;
}

#myButtonLink3 {
	display: block;
	width: 115px;
	height: 114px;
	background: url("../images/Drama.png") bottom;
	text-indent: -99999px;
}
#myButtonLink3:hover {
	background-position: 0 0;
}

#myButtonLink4 {
	display: block;
	width: 115px;
	height: 114px;
	background: url("../images/drawV003.png") bottom;
	text-indent: -99999px;
}
#myButtonLink4:hover {
	background-position: 0 0;
}

#picture{
	float: right;
	padding: 50px 360px 0px 0px;
}

/*Work*/

#work{
	width: 1580px;
	height: 900px;
	padding-top: 120px;
	padding-left: 313px;
	/*background-image: url("../images/background/bg.jpg"); /*if you want to change the background to a different image, change it here*/
}

#work h2{
	color:#3c96a9;
	text-transform:uppercase;
	font-size:40px;
	padding: 40px 0px 10px 0px;
}

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

.thumbs{
	border: 4px white solid;
}

.spacing{
	padding-right: 23px;
	padding-bottom: 23px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

/*Resume*/

#resume{
	width: 1580px;
	height: 900px;
	padding-top: 120px;
	padding-left: 313px;

}

#resume h2{
	color:#e17e26;
	text-transform:uppercase;
	font-size:40px;
	padding: 40px 0px 10px 0px;
	font-family: Candal, sans-serif;
}

#left{
	float: left;
	width: 500px;
}

#left h4{
	color: #e17e26;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 3px;
	font-family: Candal, sans-serif;
}

#left h5{
	color: #363844;
	font-size: 14px;
	padding-top: 8px;
}

#resume_download{
	padding-top: 15px;
}

#resume_download a{
	color: #363844;
}

#resume_download a:hover{
	color: #f27768;
}

#resume_pdf{
	padding-right: 15px;
}

#right{
	float: left;
	with: 500px;
	padding-left: 95px;
}

#skills{
	width: 400px;
}

#skills h4{
	color: #e17e26;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 15px;
}

.skills_image{
	padding-bottom: 5px;
}


/*Contact*/

#contact{
	width: 1580px;
	height: 800px;
	padding-top: 120px;
	padding-left: 313px;
	/*background-image: url("../images/background/bg.jpg"); /*if you want to change the background to a different image, change it here*/
}

#form{
	float: left;
}

#form h2{
	color:#3549A0;
	text-transform:uppercase;
	font-size:40px;
	padding: 40px 0px 10px 0px;
}

#contact-area {
	width: 400px;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	padding-left: 15px;
	width: 271px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}

#contact-area input.submit-button {
	width: 80px;
	float: right;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 90px;
	padding-top: 5px;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
}

#contact_box{
	float: left;
	padding: 140px 0px 0px 100px;
}

#contact_info{
	float: left;
	width: 400px;
	padding-bottom: 40px;
}

#contact_info h3{
	font-size: 24px;
	color: #f27768;
	padding-bottom: 10px;
}

#contact_info h4{
	font-size: 24px;	
	color: #f27768;
	padding-top: 0px;
	padding-bottom: 5px;
}

#contact_info p{
	padding-bottom: 2px;
}


#social{
}


/*Thanks*/

#thanks{
	width: 1580px;
	height: 900px;
	padding-top: 300px;
	padding-left: 313px;
	background: #34499f;
}

#thanks p{
	color:#fff;
	text-transform:uppercase;
	size: 14px;
	padding: 40px 0px 10px 0px;
}
/*Footer*/

#footer{
	width: 1580px;
	background-color: #363844;
	height: 50px;
	padding-top: 30px;
	padding-left: 313px;
}

#footer p{
	color: #3549A0;
}

#footer span{
	color: #f27768;
}