/*
	* Gridless version 2.0.0
	* Credit is left inline and big thanks to Nicolas Gallagher and Jonathan Neal
	* Across this document we use safe CSS hacks: http://mathiasbynens.be/notes/safe-css-hacks
	* Selectors beggining with an underscore (_selector: property) target only IE6
	* Selectors beggining with an asterisk (*selector: property) target only IE6 and IE7
*/

/* HTML5 elements display
---------------------------------------- */
@import url(//fonts.googleapis.com/css?family=Montserrat:400);

/* Corrects block display not defined in IE6/7/8 and FF3 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {
	display: block;
}

/*
	* Corrects inline-block not defined in IE6/7/8 and FF3 
	* Known limitation: 'audio[controls]' won't work in IE6;
*/
audio[controls], canvas, video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

/*
	* Addresses styling not present IE6/7/8/9, FF3, S4
	* Ensures content is hidden from all presentations, including screenreaders
*/
[hidden] {
	display: none;
	visibility: hidden;
}

/* Base structure
---------------------------------------- */

/*
	* The body will work like a 'div#wrapper' (for this to work, the 'body' needs to have a set width)
	* To add a background to the PAGE, set it in the 'html' element
	* To add a background to the WRAPPER, set it in the 'body' element
*/

html {
	height: 100%;
	font-size: 100%;
	overflow-y: scroll; /* Force a scrollbar in non-IE */
	-webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
	-ms-text-size-adjust: 100%;
	background: #fff;
}

body {
	width: 100%;
	margin: 0 auto;
	min-height: 100%;
	max-width: 100%;
}

body:before {
	position: absolute;
	top: 0;
	height: 10px;
	left: 0;
	width: 100%;
	background: #0088cc;
	background: rgba(0,132,234,0.65);
	content: "";
	margin: 0;
	padding: 0;
	z-index: 999999;
}

.content {
	margin: 0 auto;
  max-width: 600px;
}

/* Fonts settings based on the 100E2R standard: http://www.informationarchitects.jp/en/100e2r/ */
body, button, input, select, textarea {
	font: 1em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #444; /* Black on white is too much contrast, #333 is a lot better */
}

p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, h4, h5, h6, img, figure, figcaption, button, hr, header {
	margin: 0 0 1.5em;
}

/* Headings/small
---------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: medium;
	text-shadow: 0px 1px 0px white;
	margin: 0;
	padding: 0;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	color: #333;
}

h1 {
    font-size: 36px;
    line-height: 48px;
}

h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 24px;
}

h3 {
    font-size: 21px;
    line-height: 24px;
}

h4 {
    font-size: 18px;
    line-height: 24px;
}

h5 {
    font-size: 16px;
    line-height: 24px;
}

h6 {
    font-size: 12px;
    line-height: 12px;
}

small {
	font-size: 0.65em; /* 10px */
	margin: 0 0 1.5em;
}

/* Preformatted text and code
---------------------------------------- */

/* Allows line wrapping of 'pre' */
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

pre, code, kbd, samp {
	font: 1em/1.5em Menlo, Consolas, 'DejaVu Sans Mono', Monaco, 'Courier New', Courier, monospace;
}

/* Tables
---------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	text-align: left;
}

tr, th, td {
	padding-right: 1.5em;
}

/* Forms
---------------------------------------- */

form {
	margin: 0;
}

fieldset {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

legend {
	*margin-left: -7px;
}

button, input, select, textarea {
	vertical-align: baseline;
	*vertical-align: middle;
}

button, input {
	line-height: normal;
	*overflow: visible;
}

button:active {
	position: relative;
	top: 2px;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Quotes
---------------------------------------- */

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

blockquote, q, cite {
  color: #999
}

blockquote {
	padding-left: 1.5em;
	border-left: 5px solid #0088cc;
}

blockquote > p {
	padding: 0;
}

/* Lists
---------------------------------------- */

ul, ol {
	list-style-position: inside;
	padding: 0;
}

li ul, li ol {
	margin: 0 1.5em;
}

dl dd {
	margin-left: 1.5em;
}

/* Links
---------------------------------------- */

a, a:visited {
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #aaa;
}

a:hover {
	color: #000;
	border-bottom: 3px solid #0088cc;
}

a:focus {
	outline: thin dotted;
}

/* Better CSS outline suppression: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {
	outline: none;
}

/* Figures
---------------------------------------- */

figure {
	margin: 0;
}

/* Embedded content
---------------------------------------- */

img, object, video {
	margin: 0 auto;
	display: block;
	max-width: 100%; /* Consider this first: unstoppablerobotninja.com/entry/fluid-images/ */
	/* _width: 100%; /* Uncomment this: IE6 doesn't support max-width, so we use width: 100% for it. If the image/video is smaller than the container, change 100% to an absolute value */
}

/*
	* 1. Removes border when inside 'a' element in IE6/7/8/9
	* 2. Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
img {
	border: 0;
	-ms-interpolation-mode: bicubic; /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
}

/* Corrects overflow displayed oddly in IE9 */
svg:not(:root) {
	overflow: hidden;
}

/* Abbreviations
---------------------------------------- */

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

/* Marked/inserted/deleted text
---------------------------------------- */

mark {
	background: #ff0;
}

ins {
	text-decoration: none;
	background: #ff9;
}

del {
	text-decoration: line-through;
}

/* Others
---------------------------------------- */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-bottom: 1px solid #aaa;
}

var, address, p, textarea, input, blockquote, select {
    font-family: 'Helvetica', Arial, Helvetica, sans-serif; font-weight: normal
}

dfn, em, i{
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: normal
}

strong, b, dt {
    font-family: "Montserrat", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold
}

b em, b i, strong em, strong i, dt em, dt i {
    font-family: "Montserrat", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold
}

/* Position 'sub' and 'sup' without affecting line-height: gist.github.com/413930 */
sub, sup {
	font-size: 0.625em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* Helper classes
---------------------------------------- */

/*
	* Micro clearfix hack, more semantically titled with 'group'
	* Source: nicolasgallagher.com/micro-clearfix-hack/
*/
.group:before, .group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

.group {
	*zoom: 1;
}

/* Primary styles
---------------------------------------- */

.avatar {
  background-size: 128px 128px;
  width: 128px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  -ms-border-radius: 128px;
  -o-border-radius: 128px;
  border-radius: 128px;  
  border-bottom: 1px solid rgba(255,255,255,0.8);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.date {
  float: right;
  line-height: 64px;
  font-size: 0.65em;
  color: #bbb;
}

ul.tags {
  margin: 3em auto 0;
  text-align: center;
}

  ul.tags li { 
    list-style: none;
    display: inline-block;
    margin-right: -0.1em;
  }
  
    ul.tags li a {
      color: #ddd;
      border-bottom: 0;
      display: block;
      padding: 0.2em 0.65em;
      font-size: 1em;  
      -webkit-border-radius: 16px;
      -moz-border-radius: 16px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      border-radius: 16px;
    }
    
      ul.tags li a:hover {
        background: #f3f3f1;
        color: #999;
      }

.author {
  width: 70%;
}

.articlepost { 
  display: block;
  width: 100%;
  padding-top: 6em;
  padding-bottom: 5.5em;
}

#top-header, #articles {
  position: relative;
  z-index: 99999;
}

#articles {
 background: white;
}

  #articles h2 a {
    border: 0;
  }
  
  #articles h2 a:hover {
    color: #0088cc
  }

#top-header {
  background: #F5F5F2 url('/themes/basic/assets/img/me.jpg') no-repeat top center fixed;
  background-size: 100% auto;
  width: 100%;
  padding: 1em 0 4em;
  margin: 0;
  zoom: 1;
}

#main-header {
  clear: both;
  display: block;
    text-shadow: 0px 1px 0px #fff;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.1);
}

#main-header h1 {
  letter-spacing: -1px;
  color: #333;
  color: rgba(0,0,0,0.8);
  text-shadow: 0px 1px 0px #fff;
  text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
  font-size: 76px;
  line-height: 76px;
}

#top-header:hover, #top-header:hover h1 {
	color: #0088cc;
}

#main-nav, #main-header {
	text-align: left;
}

#main-nav {
  height: 4em;
}

#main-nav li {
	list-style: none;
	margin: 0 0.65em;
}

button, a, button:hover, a:hover, pre, pre:hover, #main-header, #main-header:hover, #top-header:hover h1, ul.tags li a {
	-moz-transition: all linear 0.1s;
	-webkit-transition: all linear 0.1s;
	-o-transition: all linear 0.1s;
	transition: all linear 0.1s;
}

article {
  clear: both;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e5e5e5;
}

article.archive {
  border: 0;
  padding: 0;
}

  article.archive .archive-date {
    color: #999;
    width: 20%;
    display: block;
    float: left;
    text-align: left;
    margin-right: 1em;
  }
  
  article.archive .archive-link {
    display: block;
    float: left;
    font-family: "Montserrat";
    padding-bottom: 0em;
    color: #333;
    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

    article.archive .archive-link a {
      border: 0;
    }

    article.archive .archive-link a:hover {
    	color: #000;
    	border-bottom: 3px solid #0088cc;
    }
  
  article.archive .archive-date-divider {
    float: right;
    font-size: 0.65em;
    color: #bbb;
    margin-top: -2.3em;
  }  

.archive-spacer {
  padding-top: 2.3em;
}

article.archive-devider {
  padding-top: 3em;
  margin-top: 4em;
  border-top: 1px solid #e5e5e5;
  border-bottom: 0px;
}

article.divider_0 {
  margin-top: 0em;
  border: 0;  
}

.archive-foot {
  display: block;
  height: 5em;
}

.tag {
  margin: 3em;
}

pre {
	border-radius: 0.5em;
	background: #333;
	color: white;
}

pre:hover {
	background: #0088cc;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow: inset 0 0 10px #000000;
}

pre {
	padding: 1.5em;
}

figure {
	float: left;
	margin-right: 3%;
	font-size: 0.625em;
	text-align: center;
}

footer {
  padding: 3em 0;
  overflow: hidden;
	color: #717171;
  text-shadow: 0 -1px 0 #222;
  border-top: 1px solid #111;
  background: #333;
}

a.scriptogram-link {
  color: #999
}

/* Pagination */

.pagination { 
  height:36px;
  margin:18px 0
}

.pagination ul {
  float:left;margin:0;
  border:0px solid #ddd;
  border:0px solid rgba(0,0,0,0.15);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.pagination li {
  display:inline
}

.pagination a {
  float:left;
  padding:0 14px;
  line-height:34px;
  border-right:1px solid;
  border-right-color:#ddd;
  border-right-color:rgba(0,0,0,0.15);
  *border-right-color:#ddd;
  text-decoration:none
}

.pagination a:hover {
  background-color:#f1f1f1
}

.pagination .active a {
  color: black;
  background-color: #74B9CF;
}

.pagination .disabled a,.pagination .disabled a:hover {
  background-color:transparent;
  color:#bfbfbf
}

.pagination .next a {
  border:0
} 

#social {
  opacity: 0.5;
  display: block;
  width: 166px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  -webkit-transition: opacity 0.15s cubic-bezier(0.54, 0.24, 0.35, 0.68);
  -moz-transition: opacity 0.15s cubic-bezier(0.54, 0.24, 0.35, 0.68);
  -o-transition: opacity 0.15s cubic-bezier(0.54, 0.24, 0.35, 0.68);
}

#social:hover {
  opacity: 1.0;
  -webkit-transition: opacity 0.15s cubic-bezier(0.54, 0.24, 0.35, 0.68);
  -moz-transition: opacity 0.15s cubic-bezier(0.54, 0.24, 0.35, 0.68);
  -o-transition: opacity 0.15s cubic-bezier(0.54, 0.24, 0.35, 0.68);
}

#social > * {
  float: left;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

  #social > *:hover {
    cursor: pointer;
  }

#social div.fb-like {
  width: 48px;
  margin-left: 15px;
  margin-right: 15px;
  height: 24px;
}


#social div.fb-like span {
  width: 48px !important;
}

#social div#___plusone_0 {
  width: 32px;
}

#social .fb-like, #social .fb_edge_widget_with_comment, #social .fb_iframe_widget {
  height: 24px !important;
  margin-top: -2px !important;
  padding: 0 !important;
}

/* No border under the admin link */
a[href*="/admin"]{
  border-bottom: 0;
}
	


/* Media queries
---------------------------------------- */

@media only screen and (max-width: 479px) {
	body {
		width: 100%;
	}
	.content {
	  width: 80%;
	}

	#main-nav ul {
	   width: 100%;
  }

  #main-nav li {
  	display: inline-block;
  	list-style: none;
  	margin: 1em 0.65em;
  	font-size: 0.8em;
  }

  article.archive .archive-date {
    color: #999;
    width: 80%;
    display: block;
    float: none;
    text-align: left;
  }
  
  article.archive .archive-link {
    display: block;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #main-nav, #main-header {
	 text-align: center;
  }

  #main-header {
    margin: 0 0 2em;
  }
	
	#main-header h1 {
    font-size: 42px;
    line-height: 48px;
    letter-spacing: 0;
  }

  #top-header {
    background-size: 150% auto;
    padding-bottom: 2em;
  }

  ul.tags {
    margin: 0 auto;
    text-align: center;
  }
  
  ul.tags li { 
    float: none;
    margin-right: -0.1em;
  }  
  
  footer {
    padding: 4em 0 8em; 
  }
  
  .date {
    display: block;
    text-align: center;
    float: none;
    position: relative;
    margin: 0 auto;
    margin-top: -1.6em;
  } 

  .avatar { 
    float: none;
    display: block;
    margin: 1em auto 1.2em;
    background-size: 64px 64px !important;
    width: 64px;
    height: 64px;
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    -o-border-radius: 64px;
    border-radius: 64px;  
    border: 1px solid #eee
  }

  .articlepost { 
    padding: 0;
    clear: both;
    width: 100%;
    margin-right: 0;
    margin-bottom: 3em;
    border: 0;
  }

  h2 {
    font-size: 26px;
    line-height: 36px;
    margin-top: 24px;
    margin-bottom: 0px;
    text-align: center;
  }

  .author { 
    margin: 1em auto
  }

  article {
    margin: 0;
    padding: 1em 0;
  }


}

@media only screen and (min-width: 480px) and (max-width: 1023px){

	body {
		width: 100%;		
	}
	.content {
	  width: 80%;
	}

  #top-header {
    background-size: 100% auto;
    width: 100%;
    padding: 1em 0 4em;
    margin: 0;
    zoom: 1; 
  }
  .avatar { 
    float: none;
    display: block;
    margin: 1em auto 1.2em;
    background-size: 96px 96px !important;
    width: 96px;
    height: 96px;
    -webkit-border-radius: 96px;
    -moz-border-radius: 96px;
    -ms-border-radius: 96px;
    -o-border-radius: 96px;
    border-radius: 96px;  
    border: 1px solid #eee
  }  

  .author { 
    margin: 1em auto
  }

  #main-header {
    margin: 0 0 6em;
  }
  
  #main-nav, #main-header {
	 text-align: center;
  }

	#main-nav ul {
    margin-top: 1em;
  }
  
  #main-nav li {
		display: inline;
	}
  
}
@media only screen and (min-width: 1024px) { 
	body {
		width: 100%;
	}
	
	.avatar {
	  margin: 0;
	  float: right
	}
	
  #main-header {
    margin: 8em 0 0;
  }

  .author {
    margin: 1em 0 0
  }

	.content {
	 width: 100%;
	}

  #main-nav, #main-header {
	 text-align: left;
	 padding-bottom: 1em
  }

	#main-nav {
		float: right;
		margin: 1em 2%;
	}

	#main-nav ul {
    margin-top: 0em;
  }

	#main-nav li {
		float: left;
	}

	button {
		width: 100%;
	}
	
}

@media only screen and (min-width: 480px) { 
	#top-header{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
	}
}

/* Print styles
---------------------------------------- */

/* Print styles inlined to avoid extra HTTP connection */

@media print {
	* {
		background: transparent !important;
		color: black !important; /* Black prints faster: sanbeiji.com/archives/953 */
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	a, a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/* Do not show javascript and internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after {
		content: ""; 
	}

	/* Printing Tables: css-discuss.incutio.com/wiki/Printing_Tables */
	thead {
		display: table-header-group;
	}

	tr, img {
		page-break-inside: avoid;
	}

	@page {
		margin: 0.5cm;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}

	h2, h3 {
		page-break-after: avoid;
	}
}