/*-  CSS RESET
----------------------------------------------------------------------*/

/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  list-style:none;
}                  
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}


/*-  BASE STYLES
----------------------------------------------------------------------*/

html {
    background: #f0f0f0;
}

body {
	color: #4C4C4C;
 	font: normal 16px/26px 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	max-width: 698px;
	margin: 25px auto;
	padding: 0 20px;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #4793bb;
	text-decoration: underline;
}

a:hover, a:focus, a:active  {
	text-decoration: none;
	color: #147eb7;
}

.left { 
	float: left;
	padding-right: 1em;
}

.right { 
	float: right; 
	padding-left: 1em; 
}

/*-  HEADINGS
----------------------------------------------------------------------*/


h1, h2, h3, h4 {
    padding: 22px 40px;
    line-height: 1.4em; 
}

h1, h2 {
	border-bottom: 1px solid #E5E5E5;
}

h1 {
    font-size: 24px;
}

h3 {
    font-size: 21px;
    padding: 0 40px; /* work around collapsing margins */
}

#archive h2 {
	background: #F9F9F9;
	border-top: 1px solid #EFEFEF;
	padding-top: 22px;
	margin-bottom: 22px;
}
/* fix rounded corners on archive page */
#archive h2:nth-of-type(1){
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*- HEADING LINKS
----------------------------------------------------------------------*/
h1 a {
	color: #4C4C4C;
	text-decoration: none;
}

h1 a:hover, h1 a:focus, h1 a:active {
	color: #4793bb;
}


/*-  BLOCK ELEMENTS
----------------------------------------------------------------------*/
header { 
	padding: 40px 40px 0 40px;
	clear: both; 
	overflow: auto;
	color: #4c4c4c;
}


header img {
	float: left;
	margin-right: 40px;
	border: 4px solid #FFF;
}

header p {
	padding: 0;
	margin: 0;
	margin-top: 5px;
}

article { 
	margin-top: 40px;
}

article ul li { 
	list-style-type:  square; 
	list-style-position: inside;
	margin-bottom: 22px;
}

article ol li { 
	list-style-type: decimal; 
	list-style-position: inside;
	margin-bottom: 22px;
}


#archive {
	margin-top: 30px;
}

article, #archive, form, #txpCommentInputForm, .comments li {
	background: #FFF;
	border: none;
	clear: both;
	padding-bottom: 18px;
	border-radius: 5px;
	border-bottom-width: 2px;
}

p, ul, ol, pre { 
	padding:0 40px;
	margin: 22px 0;
}

blockquote { 
    border-left: 4px solid #ccc;
    margin-left: 40px;
}

pre {
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    background: #f7f7f7;
}

#article-nav {
    margin-top: 20px;
    padding:8px 40px;
    text-align: center;
}

#article-nav p {
    display: inline;
    padding: 0 20px;;
}

#article-nav a {
    padding: 8px 20px;
    background: #4793bb;
	background: #4c4c4c;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

#article-nav a:hover, #article-nav a:focus, #article-nav  a:active {
    background: #666;
}

#article-nav a:before,  #article-nav a:after {
    padding: 4px;
    font-size: 130%;
}


#article-nav #older a:before {
    content: "\00ab";
}

#article-nav #newer a:after {
    content: "\00bb";
}

nav ul li {
	display: inline;
	padding: 0 15px;
}


/*-  NON STRUCTURAL ELEMENTS
----------------------------------------------------------------------*/

.other { 
	border: none; 
	padding-left: 40px; 
}

.post-image {
	border-bottom: 1px solid #EEEEEE;
	height: auto;
	display: block;
	max-width: 100%;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	margin: 0;
	padding: 0;
}

.meta { 
	border-top: 1px solid #E5E5E5; 
	padding-top: 40px; 
	margin-top: 22px; 
	opacity: 0.6;    
	-webkit-transition:opacity 0.3s ease-in;
    -moz-transition:opacity 0.3s ease-in;
    -o-transition:opacity 0.3s ease-in;
    transition:opacity 0.3s ease-in;
}

.meta:hover { 
	opacity: 1; 
}

.permlink { 
	float: right; 
	display: block; 
	background: url(/assets/permalink.png) center right no-repeat; 
	padding-right: 30px;
}

fieldset { 
    border: none;
}

fieldset h3 {
    padding-bottom: 5px;
    font-size: 16px;
}

fieldset label {
    width: 180px;
    display: block;
    float: left;
    font-size: 14px;
}

fieldset input[type='text'] { 
    border: #E5E5E5 solid 1px;
    background: #FEFEFE;
    padding: 6px;
    width:400px;
}

fieldset input:focus { 
    background: #FFF;
}
fieldset textarea { display: block;border: #E5E5E5 solid 1px; background: #FEFEFE; padding: 6px;  width:400px; height: 140px;}
fieldset textarea:focus { background: #FFF; }

.comments li { width: 100%; margin-bottom: 40px; opacity: 0.95;}
.comments li:hover { opacity: 1;}

@media screen and (max-width: 700px) {
	
	article img    { max-width: 100%; height: auto; }
	body           { margin: 20px auto; font-size: 14px; line-height: 1.4em;}
	pre 	       {  overflow: auto;}
	header { padding: 20px; font-size: 9px; }
	header p { margin-top: 0; }
	
}

@media screen and (max-width: 480px) {
	header img { float: none; margin:0 auto 10px auto; display: block;  }
	header { font-size: 14px; }
	header p { margin-top: 20px; }
	fieldset input[type='text'], fieldset textarea { width: 80%; display: block; clear: both; }

}

.project {
    background: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 2em;
}


@media screen and (min-width: 700px) {
    
    .project {
        float: left; width: 48%;
        margin-right: 2%;
    }
    
    .project:nth-of-type(even) {
       margin-right: 0;
       margin-left: 2%; 
    }
    
}