/* Colours */
body { color: #ccc; background: #474747; font:normal 62.5% candara, 'segoe ui', calibri, tahoma, 'Apple SD Gothic Neo', 'Euphemia UCAS', 'thonburi', 'futura', helvetica, arial, sans-serif; } /**/
em, em a, strong, p.date, div#project-navigation p { color: #999; }

a { color:#c4c4c4; border-bottom:1px dotted #aaa;
  -webkit-transition: all 0.2s ease-out;  
     -moz-transition: all 0.2s ease-out;  
      -ms-transition: all 0.2s ease-out;  
       -o-transition: all 0.2s ease-out;  
          transition: all 0.2s ease-out; 
}
a:hover { color:#fff; border-bottom:1px dotted #fff }

/* Typography */
#me a {  border: 0 none; color: #222222; font-size: 96px; letter-spacing: -7px; margin: 40px 0 0; text-align: center; text-shadow: 0 2px 3px #666666; font-family: candara, optima, 'segoe ui', futura, calibri, tahoma, 'Euphemia UCAS', sans serif;

  -webkit-transition: all 0.2s ease-out;  
     -moz-transition: all 0.2s ease-out;  
      -ms-transition: all 0.2s ease-out;  
       -o-transition: all 0.2s ease-out;  
          transition: all 0.2s ease-out; 
 } 
#me a:hover { border:0; color:#111 }
#me strong { letter-spacing: 0; text-shadow: 0 2px 3px #000000; font-size:16px; }
li, p, em { font-size: 14px; font-style: normal; letter-spacing:0.1px }
h1 { }
h1 strong { font-weight: normal; text-transform: none; display: block; letter-spacing: 0px; }
h2 { margin:0; font-size: 28px; color: #C4C4C4; text-shadow: 0px 2px 3px #000; font-weight:normal; line-height:1.3em; }
h2 a {     
    border-bottom: 4px double #333333;
    color: #C4C4C4;
    display: block;
    letter-spacing: -0.7px;
    margin-bottom: 10px;
    padding: 4px 90px 15px 0;
    text-decoration: none;
    font-weight:bold;
  -webkit-transition: all 0.2s ease-out;  
     -moz-transition: all 0.2s ease-out;  
      -ms-transition: all 0.2s ease-out;  
       -o-transition: all 0.2s ease-out;  
          transition: all 0.2s ease-out; 
 }
h2 a:hover { color:#fff; border-bottom:4px double #444; }
h3 { font-size: 18px; margin: 40px 0 10px 0; letter-spacing:-0.1px; }
p.date { font-size: 14px; letter-spacing: 0.03em; }
a { text-decoration: none; }
p#project-count, p#gallery-count { text-align: right; }
p#gallery-count span { letter-spacing: 0.08em; }

/* Layout */
body { padding:0 120px; text-align: center; }

#content { border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;
	background: none repeat scroll 0 0 #222222; border: 4px double #444444; margin: 40px auto; max-width: 1200px; padding: 30px; text-align:left; } 
.about #content { padding-bottom:0 }
p { line-height:2em; color:#ccc; margin-bottom:15px }

hr { display: block; clear: both; margin: 0px 0px 45px; padding: 0px; height: 0px; overflow: hidden; visibility: hidden; }
.col hr { margin: 0px 0px 15px; }

ul li { margin: 0px 0px 3px; }
ul#navigation, ul.posts { list-style: none; padding: 0px; margin: 0px; }
ul#navigation { position:fixed; right:50px; top:181px; text-align:left; }
ul#navigation li, ul.posts li { clear: both; }
ul#navigation ol { display: none; margin: 0px; padding: 4px 0px 4px 25px; }
#navigation a { font-size: 16px; font-weight: normal; letter-spacing: -0.2px;} 



ul.posts li { }
ul.posts .date { float:right; margin: 6px 20px 0 0; padding: 2px 10px; }
p#footer { margin: 0px 0px 0px 260px; display: inline; line-height: 1.4; }

p.date { 
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #474747;
  border-color: #000000 #333333 #333333 #000000;
  border-style: double;
  border-width: 1px;
  float: right;
  margin: -62px 0px 4px 0;
  padding: 7px 10px;
  text-align: center;
  text-transform: uppercase;
  font-size: 110%;
  line-height: 160%;
  letter-spacing: -0.5px;
  font-weight: 600;
  text-shadow: 0 1px 2px #666666;
  color: #222;  
} 

div.post p { clear: both; }
div.post h2 { padding: 0px 0px 15px; }
#content li {  }
.description em {font-style: italic;}

div#media { clear: both; padding: 30px 0px 0px 70px; }
div.media { margin: 0px 0px 10px; }
div.post div#images { padding: 0px 0px 0px 0px; }
div#media img { margin: 0px 0px 10px; }
p#project-count, p#gallery-count { margin: 2px 20px 0px 0px; }
p#gallery-count, div#gallery-navigation { display: none; }
p#gallery-count span { margin: -1px 0px 0px; display: block; }
div#project-navigation { margin: 0px 0px 0px 20px; }
div#project-navigation p, div#gallery-navigation p { margin: 0px 0px 1px; }

div#image-wrapper { overflow: hidden; width: 560px; }
div#image-wrapper div#image-holder { width: 100000000px; }
div#image-wrapper div#image-holder div.image { float: left; width: 560px; }

img.project-thumb { padding: 0px 10px 5px 0px; float: left; display: none; }

a.atom-rss { margin: 0px 0px 0px 6px; padding: 1px 2px 0px; font-size:12px }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Content */
/*
.mugshot { float:right; margin-top:-20px; margin-right:-30px; opacity:0.55; width:62%; border-radius:15px; -moz-border-radius:15px;
  -webkit-transition: all 0.2s ease-out;  
     -moz-transition: all 0.2s ease-out;  
      -ms-transition: all 0.2s ease-out;  
       -o-transition: all 0.2s ease-out;  
          transition: all 0.2s ease-out;  
 }
.mugshot:hover {
    opacity:0.8;
 }
 */
kbd {
	border-radius:2px 3px 2px 4px; -moz-border-radius:2px 3px 2px 4px -webkit-border-radius:2px 3px 2px 4px;
	background: none repeat scroll 0 0 #151515; border-color: #545454 #000000 #010101 #323232; border-style: solid; border-width: 1px 3px 3px 1px; color: #FFFFFF; font-weight: bold; padding: 2px 4px; white-space: nowrap; font-family:inherit } 

li { margin:0 0 1px 0; line-height:2em; }

.col { float: left; margin: 0px 0px 0px 20px; padding: 0px; }
.col .col { margin: 0px; }

.one { width: 60px; }
.two { width: 140px; }
.three { width: 220px; }
.four { width: 300px; }
.five { width: 380px; }
.six { width: 460px; }
.seven { width: 540px; }
.eight { width: 620px; }
.nine { width: 700px; }
.ten { width: 780px; }
.eleven { width: 860px; }
.twelve { width: 940px; }


code { background: #090909; color: #fff; font-family: consolas, courier, monospace; border-radius: 4px; font-size: 12px; padding: 0px 5px 1px 5px; white-space: nowrap; }
table code { white-space: normal; }
pre { position: relative; background: #0E0E0E; color: white; font-family: consolas, courier, monospace; line-height: 15px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; font-size: 12px; padding: 10px; margin: 0 0 20px 0; overflow: auto; }
pre code { padding: 0; /* white-space: pre; */ color: #fff; background: #090909; }
pre:after { content: attr(rel); position: absolute; font-size: 18px; top: 22px; line-height: 0; right: 12px; color: #999; }

/*
.str { color: #ff8400; }
.kwd { color: #e8ed97; }   /* some css values */
.com { color: #999; }       /* css selector, css comments */
.typ { color: #9a848c; } /* e.g. math.whatever */
.lit { color: #c9783e; }    /* some css values */
.pun { color: #eee; }      /* separators, e.g. =, : */
.pln { color: #dfc484; }   /* css property */
.tag { color: #dfc484; }    /* html tag */
.atn { color: #dfc484; }      /* html attribute */
.atv { color: #8e9c5c; }     /* string (quotes) */
.dec { color: #ccc; }       /* sometimes doctype */
*/

pre .str { color: #79BD56; } /* string */
pre .kwd { color: #E39B79;  } /* keyword */
pre .com { color: #888; } /* comment - skyblue */
pre .typ { color: #98fb98; } /* type    - lightgreen */
pre .lit { color: #DE8E50; } /* literal */
pre .pun { color: #FEA; }    /* punctuation */
pre .pln { color: #fff; }    /* plaintext */
pre .tag { color: #A1C8FD;  } /* html/xml tag    - lightyellow*/
pre .atn { color: #bdb76b; } /* attribute name  - khaki*/
pre .atv { color: #ffa0a0; } /* attribute value - pink */
pre .dec { color: #98fb98; } /* decimal         - lightgreen */

#disqus_thread { margin-top:40px; border-top:4px double #444; }
#dsq-content { margin-top:20px }
.dsq-moderator { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
background: #141414; border-color: #000000 #333333 #333333 #000000; border-style: double; border-width: 2px; }
#disqus_thread .dsq-comment { padding:10px }
#disqus_thread .dsq-comment-header { background:none; padding:0; margin-bottom:10px; border:0; }
#disqus_thread .dsq-comment-message { margin-bottom:10px; }
#disqus_thread #dsq-global-toolbar, #disqus_thread .dsq-options, #disqus_thread #dsq-comments-title, #disqus_thread .dsq-item-trackback, #disqus_thread .dsq-header-avatar, #disqus_thread .dsq-comment-actions, #disqus_thread #dsq-pagination, #disqus_thread #dsq-account-dropdown, #disqus_thread #dsq-sort-by { display: none; }
#disqus_thread  #dsq-content .dsq-avatar { left:10px; }
#disqus_thread .dsq-comment-meta li { float:right !important; }
a.dsq-brlink { display:block; text-align:right; }
#disqus_thread .dsq-textarea-background { width:98%; margin-left:1% }

#footer { text-align:center; font-size: 13px; color: #C4C4C4; text-shadow: 0px 2px 3px #000; margin:20px } 

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
 
/* video fixed width wrappers */
.video-wrapper {
	width: 600px;
	max-width: 100%;
}
.video-wrapper2 {
	width: 500px;
	max-width: 100%;
}


/* Buttons */

.btn {
  cursor: pointer;
  display: inline-block;
  background-color: #e6e6e6;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  padding: 5px 14px 6px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #333;
  font-size: 14px;
  font-weight:bold;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-transition: 0.1s linear all;
  -moz-transition: 0.1s linear all;
  transition: 0.1s linear all;
}
.btn:hover { background-position: 0 -15px; color: #333; text-decoration: none; } 

.btn.primary {
  color: #fff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn[disabled] {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn.large {
  font-size: 16px;
  line-height: normal;
  padding: 9px 14px 9px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.btn.small {
  padding: 7px 9px 7px;
  font-size: 11px;
}
:root .alert-message, :root .btn {
  border-radius: 0 \0;
}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.btn.danger,
.alert-message.danger,
.btn.danger:hover,
.alert-message.danger:hover,
.btn.error,
.alert-message.error,
.btn.error:hover,
.alert-message.error:hover,
.btn.success,
.alert-message.success,
.btn.success:hover,
.alert-message.success:hover,
.btn.info,
.alert-message.info,
.btn.info:hover,
.alert-message.info:hover {
  color: #ffffff;
}
.btn.danger,
.alert-message.danger,
.btn.error,
.alert-message.error {
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.success, .alert-message.success {
  background-color: #57a957;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #57a957 #57a957 #3d773d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.info, .alert-message.info {
  background-color: #339bb9;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #339bb9 #339bb9 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}


/* Javascript-enabled styles */
body.js-enabled p#gallery-count, body.js-enabled div#gallery-navigation { display: block; }
body.js-enabled p#project-count { display: none; }
body.js-enabled div#media div.image { display: none; }
body.js-enabled div#media div.image:first-child { display: block; }ock; }ge:first-child { display: block; }ock; }