/* Global style */
*{margin:0; padding:0; border: none;}
body{ background: #000; font-family: Georgia, serif; font-size: 13px; font-style: italic; color: #212121; overflow-x: hidden; height: 100%;}
p{line-height: 145%;}
h1{font-size: 14px; padding-bottom: 8px; font-weight: normal; color: #000; font-family: Arial, Helvetica, sans-serif; }
h2{font-size: 16px; padding-bottom: 3px; font-weight: normal; color: #000; }
h3{font-size: 38px; letter-spacing: -3px; color: #000;}
h4{font-size: 28px;  color: #000;}
h5{font-size: 22px; padding-bottom: 8px; }
h6{font-size: 20px; letter-spacing: -1px;}
h1{font-size: 120px; padding-bottom: 0px; margin-bottom: -10px; margin-top: 5px; margin-left: -5px; font-weight: bold; letter-spacing: -11px; color: #000;}
h1:hover{ color: #f1f314;}

/* Top */
p.up a{background: url(images/up-icon.gif); width: 32px; height: 32px; display:block; float: left; position: absolute; right: 30px; display: none;}

#about_wrapper p.up-black a{background: url(images/up-black-icon.gif); width: 32px; height: 32px; display:block; float: left; position: absolute; right: 30px; border: none;  display: none;}

#bg-image{ float: left; background: #fff url(images/smoke2.jpg) right bottom no-repeat; width: 100%;}
/* info */

#header_wrap{ width: 100%; float: left; overflow: hidden; position: relative; z-index: 10000;  }
#header{padding: 25px 0px 15px 60px; width: 100%; float: left; }
#header p{margin-left: 5px}
#header p a{color: #000; border-bottom: 1px dotted #000; text-decoration: none;}
#header p a:hover{color: #000; background: #f1f314; }

p.big{
	clear: both;
	width: 800px;
	font-size: 21px;
	padding-left: 5px;
}

p.top-contact{font-size: 12px; margin: 0; padding: 0; float: left; position:absolute; right: 60px; top: 67px; }
p.top-contact img{margin-right:5px;}
#header p.top-contact a{border: none; margin-right: 8px; text-decoration: none; width: 43px; height: 43px; display:block; float: left;}

#header p.top-contact a.work{background: url(images/work-icon.gif);}
#header p.top-contact a.work:hover{background-position: 0px -43px;}
#header p.top-contact a.services{background: url(images/services-icon.gif);}
#header p.top-contact a.services:hover{background-position: 0px -43px;}
#header p.top-contact a.about{background: url(images/contact-icon.gif);}
#header p.top-contact a.about:hover{background-position: 0px -43px;}


#nav{list-style: none; position: relative; top: -16px; left: 100px}
#nav li{float: left; margin-right: 6px;}
#nav li a{color: #000; text-decoration: none;}
#nav li a:hover{color: #000; text-decoration: underline;}


#header p.top-contact a:hover{}
/* main statement */
#header img{ margin-left: 5px; margin-bottom: 10px;}
#header h6{  width: 80px; margin-left: 5px;}
p.info{ width: 600px; padding-bottom: 0px; padding-left: 5px; margin-top: 5px; line-height: 130%; }
#hire-me{ position: absolute; top: 15px; right: 15px; width: 130px; height: 130px; display: none; }
#hire-me a{width: 130px; height: 130px; display: block; background: url(images/hire-me.png) no-repeat; }
#hire-me a:hover{background-position: 0px -130px ;}
/* header box */
.header_box{float: left; width: 260px;}
.header_box p{ margin-bottom: 0px;}	

/* acordion */
#vertical_container{z-index: 1000; position: relative; clear: both; padding: 0px 0px 80px 0px; width: 3000px; overflow: hidden;}
#vertical_container h4{padding-left: 60px; margin-bottom: 30px;  }

#options {  padding-left: 60px; color:#9ac1c9; display: none; }
#options a {text-decoration:none;  color:#999;}
#options span{padding: 0px 5px;}
#options a:hover {color:#000}

#accordion{ padding-top: 30px; padding-bottom: 5px; }

#acc {list-style:none;}
#acc li{ margin: 0px; padding: 0px;  }
#acc h3 { padding:0px 0 4px 60px; font-size:86px; margin:-38px 0 0 0; cursor:pointer; letter-spacing: -6px; }
#acc h3 span{ padding-right: 100px; padding-left: 60px; margin-left: -60px; color: #000;}
#acc h3:hover { background: #f1f314;}
#acc .acc-section {overflow:hidden; }
#acc .acc-content { padding:12px; border-top:none; margin-top: -12px; }
#acc .acc-selected span{ padding-top: 0px; padding-bottom: 7px;  background: #f1f314 url(images/close.gif) right center no-repeat; }
#acc .acc-selected p.project-bg{ position: absolute; width: 100%; left: 0; margin-top: -20px; height: 409px; background: url(images/project-bg.gif); }
#acc .acc-selected:hover { background: transparent; }
#acc .acc-selected span:hover { background: #f1f314 url(images/close.gif) right center no-repeat; }

.project_info{ float: left; width: 500px; padding-right: 100px; font-size: 12px; line-height: 130%; font-style: italic; padding-bottom: 20px; }
.role{ float: left; width: 180px; font-size: 13px; font-style: italic}


/* project viewer */
.container { height:380px;  cursor:pointer; padding-left: 70px;} 
.slides { position:absolute; top:0; left:0px; }
.slides div { position:absolute; top:0; margin-right: 0px;}
.slides div img{ margin-right: 8px; }

/* project description */
p.launch { position: relative; top: -45px; left: 47px; float: left;}
p.launch a { background: url(images/launch.gif) no-repeat; width: 120px; height: 27px; display: block; cursor: pointer; }
p.launch a:hover { background: url(images/launch.gif) no-repeat; background-position: 0px -27px;  }

/* Optional */
#loopedSlider,#loopedSlider2,#loopedSlider3,#loopedSlider4,#loopedSlider5,#loopedSlider6,#loopedSlider7,#loopedSlider8,#loopedSlider9,#loopedSlider10,#loopedSlider11,#loopedSlider12{ margin:0 0 40px 575px; width:500px; position:relative; clear:both; }
ul.pagination { list-style:none; float: left; margin-left: -440px; margin-top: 6px; display: none;}
ul.pagination li  { float:left; }
ul.pagination li a { padding:2px 4px; color: #666; text-decoration: none;}
ul.pagination li.active a { background:#666; color:white;}

/* Next / Prev */
.next_prev{ margin-left: -407px; margin-top: -5px; height: 27px; float: left;}
.next_prev img{ cursor: pointer; }

a.previous{width: 68px; height: 27px; background: url(images/prev.gif) no-repeat; display: block; margin-right: 1px; float: left; cursor: pointer;}
a.previous:hover{background: url(images/prev.gif) no-repeat; background-position: 0px -27px;}
a.next{width: 68px; height: 27px; background: url(images/next.gif) no-repeat; display: block;  float: left; cursor: pointer;}		
a.next:hover{background: url(images/next.gif) no-repeat; background-position: 0px -27px;}		

/* info */
.info-box{ float: left; background: #f1f314; width: 520px; height: 375px; }
.info-box .what-i-did{width: 140px; padding: 20px;}
.info-box .what-i-did ul{list-style:disc;}
.info-box .what-i-did p{padding-bottom:0px; font-weight: bold;}
.info-box .project-writeup{width: 300px; float: left; margin-left: 170px; padding: 20px;}
.info-box p{ padding-bottom: 20px;}
.info-box p a{ text-decoration: none; color: #000; border-bottom: 1px dotted #000;}
.info-box p a:hover{ background: #000; color: #fff;}
.info-box ul{margin-left: 15px; line-height: 145%;}


/* Services ////////////////////////////////////////////////////////////////////////////////// */
#services_wrapper{  width: 100%;  margin-top: -50px; background: #fff; float: left; border-top: 1px solid #cccccc; }
#services{padding: 40px 0px 40px 0px; margin-left: 60px; font-size: 13px; width: 860px; float: left; }
#services h4{background-position: 0 3px; margin-right: 50px;}
#services h3{margin-top: -6px;}
#services p{margin-left: }

ul#boxes{ width: 980px; list-style: none; margin-top: 15px; }
ul#boxes li{float: left; width: 240px; margin-right: 60px; }
ul#boxes li.last{margin-right: 0px;}
ul#boxes li ul li{margin-left: 17px; line-height: 155%; list-style:disc}
/* Skills */
.skillsblack{ height:26px; background-color:#323232; float:left;}
.skillsblack p{ font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#fff; display:inline; margin: 0px 10px 0px 10px; line-height:22px;}

.skillsyellow { width:340px; background-color:#fff000; height:26px; margin:0px; padding:0px; }
.skillsyellow1 { width:360px; background-color:#fff000; height:26px;margin:0px; padding:0px; }
.skillsyellow2 { width:370px; background-color:#fff000; height:26px; margin:0px; padding:0px; }
.skillsyellow3 { width:280px; background-color:#fff000; height:26px; margin:0px; padding:0px; }
.skillsyellow4 { width:340px; background-color:#fff000; height:26px; margin:0px; padding:0px; }
.skillsyellow5 { width:260px; background-color:#fff000; height:26px; margin:0px; padding:0px; }
.skillsyellow6 { width:100px; background-color:#fff000; height:26px; margin:0px; padding:0px; }

.skillsyellownum { float:right; padding:0px 16px 0px 0px; font-size:13px; line-height:26px;}
.line{ width:100px; height:2px;}


/* //////////////////////////////////////////////////////////////////////////////////////////// about */
#about_wrapper{ padding: 40px 0px 40px 60px; font-size: 12px; width: 3000px; float: left; position: relative; z-index: 100000; background: #000;}
#about_wrapper a{color: #fff; border-bottom: 1px dotted #fff; text-decoration: none;  }
#about_wrapper a:hover{color: #000; background: #f1f314; }

#about{ width: 500px; color: #ddd; float: left; padding-bottom: 50px;}
#about p{ margin-bottom: 15px; line-height: 153%; font-size: 13px; }
#about h4{ margin-bottom: 25px; margin-top: -16px; color: #fff; }
#about img{ float: left; margin-right:20px; margin-bottom: 20px; margin-top: 5px;}
#about .big-text, p.big-text{ font-size: 32px; font-style: italic; margin-bottom: 10px; line-height: 130%; }
#about p.divider{ height: 10px; width: 100%; }
#about ul{ line-height: 153%; font-size: 13px; margin-left: 15px; }
/* specs */
#specs{ width: 260px; margin-left: 100px; float: left; margin-bottom: 30px; color: #ddd; }
#specs h3{ margin-bottom: 3px; font-size: 25px; color: #fff;}
#specs ul{ list-style: none; padding:0 0 25px 0;}
#specs ul li{ line-height: 153%; }
#specs ul li span.title{ color: #aaa; }

/* specs form */
#contact form { padding-top: 0px; }
#contact .note{ font-size: 11px; font-style:italic;}
#contact form fieldset{ border: none; } 
#contact form fieldset label{ width: 260px; padding: 5px 0px; float: left; }
#contact form fieldset input{ width: 248px; margin-bottom: 5px; font-family:Georgia, "Times New Roman", Times, serif; font-size: 13px; border: none; padding: 6px; background: #444; color: #fff; }
#contact form fieldset input:focus{ background: #666; }
#contact form fieldset textarea{ width: 248px; height: 190px; margin-bottom: 10px; font-family:Georgia, "Times New Roman", Times, serif; font-size: 13px; border: none; padding: 6px; background: #444; color: #fff; }
#contact form fieldset textarea:focus{ background: #666; }
#contact p.warning{ width: auto; margin-bottom: 20px; padding: 10px; background: #F00; color: #fff; font-size:16px; }
#contact p.success{ width: auto; margin-bottom: 20px; padding: 10px; background: #f1f314; color: #000; font-size:16px; }
#contact form fieldset input#submit{ width: auto; margin-bottom: 0px; cursor: pointer; background: #444;}


/* Move it!!!! */
#everything{
	width: 9000px;
	overflow: hidden;
	height: 100%;
	
}

#black{width: 3000px; height: 1500px; text-align: left; padding-top: 60px; float: left;}
#black h3{color: #fff; font-size: 120px; letter-spacing: -11px; width: 980px; margin-top: -40px; padding-left: 60px;}
#black .logo{ position: absolute; bottom: 30px; margin-left: 60px;}
#black .logo h6{color: #fff;}

#why{position: absolute; right: 60px; }
#why a{color: #fff; background: url(images/why.gif); width: 210px; height: 139px; display:block;}
#why a:hover{background-position: 0 -139px;}

#move-on{margin-left: 190px; margin-top: 20px; width: 2000px; text-indent: -9999px;}
#move-on a{color: #fff; background: url(images/move-on.gif); width: 275px; height: 120px; display:block;}
#move-on a:hover{background-position: 0 -120px;}



#yellow{width: 3000px; height: 1500px; text-align: left; padding-top: 60px;background: #f1f314; float: left;}
#yellow h3{color: #000; font-size: 120px; letter-spacing: -11px; width: 980px; margin-top: -40px; padding-left: 60px; }
#yellow h5{padding-left: 60px; margin-top: 20px;}
#yellow h5 a{color: #fff; background: #000; text-decoration: none; display: block; float: left; padding: 3px; font-size: 26px;}
#yellow h5 a:hover{color: #f1f314;}
#yellow .logo{ position: absolute; bottom: 30px; margin-left: 60px;}
#yellow .logo h6{color: #000;}


#portfolio{width: 3000px; float: left;}