/* //////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////   tomhatfield.co.uk   /////////////////////////// */
/* ////////////////////////////   WEBSITE.CSS   /////////////////////////////// */
/* ////////////////////   © James Brannon Media Design   ////////////////////// */

html, body { 
	height:100%;width:100%;
	background:#f7f7f7;
	margin:0;padding:0;border:0;
	font-family:sans-serif;font-size:11px;font-weight:100;color:#a7a7a7;text-shadow:#fff 0 0 6px
	}
img { border:0 }
a { color:#444344;text-decoration:none }
a:hover { color:#14bee8 }
a.hdr-link { font-size:12px;font-weight:700;display:block;margin-bottom:4px }
span.date{ font-size:10px;font-weight:100;color:#14bee8;line-height:14px }
img.h1 { padding-bottom:20px }
img.h2 { padding:40px 0 20px 0 }
h1 { padding:0;margin:0 0 5px 0;line-height:16px;color:#444344;font-size:16px }
h2 {  }


/*-- //  START: Layout divs.  // --*/
#content { padding:40px;overflow:hidden }
#logo { width:276px;height:44px;clear:both }
#header { overflow:hidden;width:276px;margin:0px;clear:both }
#header a { display:block;float:left;margin-top:10px }
#header a.portfolio { background:url('../png/btn-portfolio.png') 0 0;width:66px;height:17px;margin-left:1px }
#header a.portfolio:hover { background-position:-66px 0 }
#header a.portfolio-active { background:url('../png/btn-portfolio.png') -66px 0;width:66px;height:17px;margin-left:1px }
#header a.about { background:url('../png/btn-about.png') 0 0;width:48px;height:17px;margin-left:10px }
#header a.about:hover { background-position:-48px 0 }
#header a.about-active { background:url('../png/btn-about.png') -48px 0;width:48px;height:17px;margin-left:10px }
#side-panel { width:200px;float:left;padding:0 40px 40px 40px;overflow:hidden;position:absolute;top:40px;right:0;background:#f7f7f7 }
#main { width:70%;float:left;clear:left;margin-top:40px }
#about { width:400px;float:left;margin-top:40px }
#about img{ float:left;margin-right:40px }
#about.links{ width:200px;float:left;margin-top:40px;margin-left:40px }
#menu { width:100px;float:left;padding-right:20px }
#menu .nav { width:100px;overflow:hidden;margin-bottom:2px }
#menu .nav span { font-size:20px;font-weight:700;line-height:12px;display:block;float:left;padding:0 3px 5px 0;margin-right:3px }
#menu .nav a { font-size:20px;font-weight:700;line-height:12px;display:block;float:left;padding:0 3px 5px 0;margin-right:3px }
#menu span { color:#14bee8 }
#story { position:absolute;top:40px;left:375px;width:450px;height:71px }
#portfolio { width:1020px;float:left;clear:left;margin-top:40px }
#portfolio img { float:left }
#portfolio .thumbnails { position:relative;left:116px;float:left;clear:both;width:100%;overflow:hidden;padding:2px;background:#f7f7f7 }
#portfolio .thumbnails a { float:left;border:2px solid #f7f7f7 }
#portfolio .thumbnails a.active { float:left;border:2px solid #f7f7f7;opacity:0.6;filter:alpha(opacity=60) }
#portfolio .thumbnails a:hover { border-color:#14bee8 }
#portfolio .thumbnails a.active:hover { border-color:#f7f7f7 }
#footer { overflow:hidden;position:relative;word-spacing:20px;padding:60px 0 0 40px }
#footer span{ word-spacing:0 }
/*-- //  END: Layout divs.  // --*/

/*-- //  START: Classes.  // --*/
.grey-dark { color:#444344 }
.grey-light { color:#a7a7a7 }
.blue { color:#14bee8 }
.remove { display:none }
.clear { clear:both }
/*-- //  END: Classes.  // --*/



/* /////////////////////////////////   END   ///////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////// */