/* Welcome to the style sheet for my website, if you were this curious you'll be rewarded with a little insight into
   how I build a website. */

body {
	font-family: Arial, serif;
	font-size: 90%; /* for the consistant rendering of font sizes if the user increases their font size */
	background: #fff;
	color:#353535;
	line-height:1;
}

a{
	text-decoration:none;
	color:#fff;
}

strong{
  font-weight:bold;
}

h1{
	font-size:107px;
	color:#353535;
	font-weight:bold;
}

h2{
	font-size:42px;
	color:#656565;
	font-weight:bold;
}

h3{
	font-size:42px;
	color:#353535;
	font-weight:bold;
}

#wrapper{
  width:860px;
  margin:0 auto;
  margin-top:40px;
}

#main-content{
  width:860px;
}

#left-col p{
  color:#fff;
  font-size:42px;
}

#left-col{
  padding-left:10px;
  width:410px;
  height:420px;
  background:#353535;
  float:left;
}

#left-col-work{
  min-height:420;
  width:420px;
  float:left;
  color:#fff;
  font-size:16px;
}

#right-col{
  width:440px;
  height:420px;
  float:right;
}

#right-col-about{
  width:440px;
  float:right;
}

#top-nav li a:hover, #bottom-nav li a:hover{
  color:#353535;
}

#bottom-nav li a:hover{
  color:#aaa;
}

.bottom-about li a:hover{
  color:#353535 !important;
}

.sites{
  background:#D4145A !important;
}

.about{
  background:#8CC63F !important;
}

.illustration{
  background:#29ABE2 !important;
}

#about-top{
  margin-left:14px;
}

#about-top img{
  float:left;
}

#twitter{
  width:280px !important;
  background:#353535;
  height:132px;
  margin-left:14px;
  color:#fff;
  float:left;
}

#twitter p{
  font-size:24px;
  padding-left:10px;
  padding-right:10px;
  font-weight:bold;
  line-height:1;
}

#top-nav li, #bottom-nav li{
  width:132px;
  height:132px;
  float:left;
  margin-left:14px;
}

#top-nav li a, #bottom-nav li a{
  padding-top:0px;
  padding-left:10px;
  width:122px;
  height:132px;
  background:#353535;
  display:block;
  font-size:34px;
  font-weight:bold;
}

#top-nav, #center-nav, #bottom-nav{
  float:left;
}

#center-nav{
  height:156px;
  width:420px;
}

#header{
  width:860px;
  height:96px;
}

#header h1{
  width:420px;
  display:inline;
}

.header-nav a{
  color:#262626;
}

.header-nav a.nav-about:hover{
  color:#8CC63F;
}

.header-nav a.nav-illustration:hover{
  color:#29ABE2;
}

.header-nav a.nav-work:hover{
  color:#D4145A;
}

.header-nav{
  padding-left:15px;
}

#checkout-these{
  padding-left:70px;
  padding-top:30px;
}

#footer{
  padding-top:10px;
  width:860px;
  clear:both;
  padding-bottom:80px;
}


#explanation{
  width:420px;
  height:86px;
  float:right;
}


#explanation p {
  font-size:32px;
  color:#fff;
  padding-left:16px;
  padding-top:8px;
}

.gallery-title{
  background:#353535;
  padding-top:2px;
  padding-bottom:8px;
  padding-left:8px;
  color:#fff;
  width:852px;
  display:block;
  font-size:22px;
  clear:both;
}

.left{
  float:left;
}

.inner-name{
  margin-bottom:-30px;
}

.inner-name a{
  color:#262626;
}

.page-illustration #main-content, .page-about #main-content{
  padding-top:21px;
}

.gallery li{
  float:left;
  padding-left:16px;
  margin-bottom:16px;
}

.gallery li a{
  display:block;
  width:130px;
  height:130px;
}

.gallery{
  margin-left:-16px;
  width:876px;
  float:left;
  margin-top:16px;
}


/*about stytles*/
#e-mail {
  padding-left:15px;
  font-weight:bold;
  float:left;
  height:132px;
  margin-top:12px;
  margin-bottom:12px;
  margin-left:14px;
  width:409px;
}

#e-mail p{
  font-size:50px;
  padding:0;
  padding-top:36px;
  color:#353535;
}

#professional-experience{
  float:left;
  margin-bottom:12px;
  margin-left:14px;
  padding-right:15px;
  padding-left:15px;
  padding-bottom:15px;
  width:395px;
  background:#262626;
  font-size:13px;
}

#professional-experience p{
  padding-top:0px;
  padding-bottom:4px;
  color:#bbb;
}

#professional-experience span.label{
  color:#8CC63F;
  font-weight:bold;
}

#professional-experience a{
  color:#8CC63F;
  text-decoration:underline;
} 

#professional-experience a:hover{
  color:#8CC63F;
  text-decoration:none;
}

#professional-experience p.darker{
  padding-top:8px;
  color:#ddd;
  font-weight:bold;
}

#professional-experience h3{
  color:#eee;
}


#professional-experience h3.first{
  padding-top:0;
  margin-top:0px;
}

#about-dark{
  padding-right:4px;
  padding-top:15px;
  padding-bottom:15px;
  color:#333;
}

#about-dark p{
  padding-bottom:10px;
}

.box{
  width:131px;
  height:131px;
  border:1px solid #353535;
}

#work-explanation{
  width:860px;
  margin-top:14px;
  margin-bottom:28px;
}

#work-explanation.illustration{
  margin-top:0px;
}

#work-explanation h3{
  font-size:45px;
  color:#fff;
  padding-left:13px;
  padding-bottom:10px;
}

.project{
  width:860px;
  float:left;
  padding-bottom:24px;
}

.project img{
  float:left;
  padding:4px;
  border:1px solid #ccc;
}

.info{
  padding-left:24px;
  padding-bottom:4px;
  float:right;
  width:400px;
}

.info p{
  padding-bottom:4px;
}

.info a:hover{
  text-decoration:underline;
}

.info a{
  color:#D4145A;
  text-decoration:none;
}

.nav{
  text-align:left !important;
  float:left;
}

.nav a{
  color:#666 !important;
  width:420px;
}

.copyright{
  text-align:right;
  color:#B7B7B7;
  float:right;
}