/* Grid System CSS ============================================================= */

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }
mark, rp, rt, ruby, summary, time { display: inline }

body {background:#111 url(../images/bg.jpg) repeat center top fixed;}

/* Page Elements ============================================================= */

#container{width:940px;margin:0 auto;}
header{height:280px;width:940px;margin:0 auto;background:transparent url('../images/head.png') no-repeat center top}

/* Menu ============================================================= */

nav ul {height:40px;float:right;position:relative;top:107px;margin-left:20px}
nav ul li {display:inline;}
nav ul li a {color:#FFF;font-size:1em;margin-left:10px;text-transform:uppercase}
nav ul li a:hover {color:#999;text-decoration:none}

/* Intro ============================================================= */

#intro{width:940px;margin:0 auto;height:320px;background:transparent;}
#intro_left{float:left;width:300px;height:320px;}
#intro_right{height:320px;float:right;width:620px;margin-left:20px;background:transparent}

img.quote{float:left;margin:0 10px 0 0}

/* Portfolio ============================================================= */

#folio_top{width:940px;margin:0 auto}
#folio_top h2 {color:#999;font-weight:100;letter-spacing:0px;margin:0}

.folio_row{width:940px;margin:0 auto}
.folio_divide{height:0px;width:940px;clear:both;margin:0 auto}
img.folio {border:1px solid #333;}

/* Contact Section ============================================================= */

#contact_row{display:block;width:940px;margin:0 auto;overflow:auto;clear:both}
#contact_row p  {margin-bottom:20px}

ul.skills{margin-bottom:0}
ul.skills li {background:url(../images/tick.png) no-repeat;padding:3px 0 0 50px;height:22px;}
input, textarea {padding:7px;border:1px solid #222;background:#171717;color:#FFF;width:250px;-moz-border-radius: 5px; -webkit-border-radius: 5px;}
.middle input, .middle textarea{padding:7px}
input:hover, textarea:hover {border:1px solid #999}
textarea{margin-bottom:20px}
textarea:focus {border:1px solid #999}
.submit{width:70px; color:#999}

/* About section ============================================================= */

#about p {margin-bottom:20px}
.left_list{width:140px;float:left}
.right_list{width:140px;float:right;margin-left:20px}

/* Footer ============================================================= */

footer{height:78px;border-top:1px solid #222;border-bottom:1px solid #222;width:940px;margin:0 auto;display:block}
footer p {line-height:80px;text-align:center}

/* Blog ============================================================= */

.post{margin-bottom:40px}
p.meta{color:#999;font-style:italic}

/* Last FM ============================================================= */

#lastfmrecords{ width:220px;padding: 0px;height:320px }
#lastfmrecords ol,
#lastfmrecords li{ margin: 0; padding: 0; list-style: none; }
#lastfmrecords li{ float: left; margin: 0px 5px 5px 0px; }
#lastfmrecords a { display: block; float: left; width: 105px; height: 105px; line-height: 105px; overflow: hidden; position: relative; z-index: 1; }
#lastfmrecords a img{ float: left; position: absolute; width: 105px; height: 105px;  }
#lastfmrecords a:hover{z-index:1000; border:none;width: 105px; height: 105px;  }

/* Layout classes ============================================================= */

.divide{clear:both;height:60px;}
.half_divide{clear:both;height:30px;}
.clr{clear:both}
p.no_margin {margin-bottom:0}
ul.no_margin {margin-bottom:0}
ul.social li {height:30px}
ul.social li a{position:relative;top:8px;left:40px}
ul.social li.facebook{background:url(../images/logo-facebook.gif) no-repeat}
ul.social li.twitter{background:url(../images/logo-twitter.gif) no-repeat}
ul.social li.linkedin{background:url(../images/logo-linkedin.gif) no-repeat}
/* Main columns classes ============================================================= */

/*Three Columns*/

.three_col_a{width:300px;float:left}
.three_col_a p{margin-bottom:0}
.three_col_a p{margin-bottom:0}
.three_col_b{width:300px;float:left;margin-left:20px}
.three_col_b p{margin-bottom:0}
.three_col_c{width:300px;float:left;margin-left:20px}
.three_col_c p{margin-bottom:0}

/*Five Columns*/

.five_col_a{width:172px;float:left}
.five_col_b{width:172px;float:left;margin-left:20px}
.five_col_c{width:172px;float:left;margin-left:20px}
.five_col_d{width:172px;float:left;margin-left:20px}
.five_col_e{width:172px;float:left;margin-left:20px}

/*Two Columns*/

.two_col_a{width:460px;float:left}
.two_col_b{width:460px;float:left;margin-left:20px}

/* Inner pages ============================================================= */
#page_wrap{width:940px;margin:0 auto;height:auto}
.page_one{width:460px;float:left}
.page_two{width:220px;margin-left:20px;float:left}
.page_three{width:220px;margin-left:20px;float:right;text-align:right}