/* simonb.com: base.css */

/* the following lines attempt to clear the css palette */

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var, xmp, plaintext, listing,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	background-color: transparent;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	color: black;
	font: inherit;
	font-style: normal;
	font-size: 100%;
	font-weight: normal;
	list-style: none;
	margin: 0;
	outline: 0;
	padding: 0;
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	vertical-align: baseline;
	*vertical-align: middle;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/*
 * Addresses display not defined in IE6/7/8/9 & FF3
 */

audio[controls],
canvas,
video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}


/* box sizing */
*, *:before, *:after {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

/* kerning and ligatures */
.kern-liga {
	-moz-font-feature-settings: 'kern',  'liga';
	-ms-font-feature-settings: 'kern',  'liga';
	-o-font-feature-settings: 'kern',  'liga';
	-webkit-font-feature-settings: 'kern' ,  'liga';
	font-feature-settings: 'kern', 'liga';
}

/* small caps */
.small-caps {
    -ms-font-feature-settings: "smcp";
    -moz-font-feature-settings: "smcp";
    -webkit-font-feature-settings: "smcp";
    font-feature-settings: "smcp";
}

/* text figures */
.text-figures { 
    -moz-font-feature-settings: 'onum';
    -ms-font-feature-settings: 'onum';
    -webkit-font-feature-settings: 'onum';
    font-feature-settings: 'onum';
}

/* fluid re-sizing */
img, canvas, iframe, video, svg { 
    max-width: 100%; 
}

/* standard HTML tags */
html {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.3;
    overflow-y: scroll;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
	background: #eaeaea none repeat;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

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

/*
 * Define font-size
 */

small {
	font-size: .75rem;
}

sub,
sup {
	font-size: .75rem;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5rem;
}

sub {
	bottom: -0.25rem;
}

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

th, td {
	vertical-align: middle;
}

h1, h2, h3, h4, h5, h6{
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 1.6rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.4rem;
}

h4 {
	font-size: 1.3rem;
}

h5 {
	font-size: 1.2rem;
}

h6 {
	font-size: 1.1rem;
}

/* links */

a {
	color: #3885f6;
}

a:hover, a:active {
	outline: 0;
	text-decoration: underline;
	cursor: pointer;
}

p {
	margin-bottom: 1rem;
}

blockquote {
	margin-bottom: 1rem;
	margin-left: 1.5rem;
	font-style: italic;
}

blockquote p{
	font-style: italic;
}

pre {
	margin-bottom: 1rem;
	white-space: pre;
	word-wrap: break-word;
}

code, kbd, pre, samp {
	font-family: "inconsolata-1","inconsolata-2", Menlo, "Courier New", Courier, mono;
}

code{
	font-family: "inconsolata-1","inconsolata-2", Menlo, "Courier New", Courier, mono;
	margin-bottom: 1rem;
	margin-bottom: 1rem;
	overflow-x: scroll;
	border: 1px solid silver;
	border-radius: 5px;
	padding: 10px;
	display: block;
	word-wrap: normal;
	white-space: pre;
}

ol {
	margin-left: 2rem;
	margin-bottom: 1rem;
}

ol li {
	list-style-type: decimal;
	list-style-position: outside;
}

ul {
	margin-left: 2rem;
	margin-bottom: 1rem;
}

ul li {
	list-style-type: disc;
	list-style-position: outside;
}

nav ul,
nav ol {
	list-style: none;
}

b, strong {
	font-weight: 600;
}

em {
	font-style: italic;
}

/* forms */

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

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

input {
	background-color: white;
	color: black;
}

textarea {
	background-color: white;
	color: black;
	border: 1px silver solid;
	overflow: auto;
	vertical-align: top;
	padding-left: 3px;
	padding-right: 3px;
}

textarea:focus {
	background-color: #ecf8ff;
	border: 1px solid #4f67ff;
}

select {
	background-color: white;
	border: 1px silver solid;
}

.ie img {
	-ms-interpolation-mode: bicubic;
}

/* attribute selectors do not work on IE6 */

input[type="text"] {
	border: 1px solid silver;
	padding-right: 2px;
	padding-left: 2px;
}

input[type="password"] {
	border: 1px solid silver;
}

input:focus {
	background-color: #ecf8ff;
	border: 1px solid #4f67ff;
}

/* this is a fix for IE6 see above, put input[type=text] in this class */

input.tinput {
	border: 1px silver solid;
}

button {
	padding: 2px 4px;
	border: 1px solid gray;
	border-radius: 3px;
}

button:hover {
	color: green;
	border-color: green;
}

button:active {
	border-color: #591266;
	color: #591266;
}

/*
 * Remove inner padding and border 
 * Fixes appearance displayed oddly in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

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

button[disabled] {
	color: gray;
}

button[disabled]:hover {
	color: gray;
	border: 1px solid gray;
	background-color: white;
}

button[disabled]:active {
	color: gray;
	border: 1px solid gray;
	background-color: white;
}

/* handy classes */

.hidden {
	display: none;
}

.centered {
	text-align: center;
}

.bold {
	font-weight: 600;
}

.right {
	text-align: right;
}

.base {
	clear: both;
}

.red {
	color: #BF0008;
}

.green {
	color: #017A35;
}

.comment {
	background-color: #fcffb4;
}

.headline {
	margin-top: 0;
}


/* wrap tables or pre elements in a div with this class for fluid re-sizing */
.overflow-container { 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
}

/* browser update */

.browser-upgrade {
	width: 100%;
	max-width: 800px;
	background-color: #fcffb4;
	margin-right: auto;
	margin-left: auto;
	padding: 0 10px;
}

.browser-upgrade p {
	margin: 0;
	padding: 5px;
}

.browser-upgrade a {
	color: black;
}

.browser-upgrade p a strong {
	color: black;
}

.browser-upgrade a:hover {
	text-decoration: underline;
	background-color: transparent;
}

.browser-upgrade p a:hover strong {
	text-decoration: underline;
	background-color: transparent;
}

table#browsers {
	
}

table#browsers td {
	width: 30%;
	text-align: center;
}

table#browsers a {
	display: block;
	padding: 10px;
	border-radius: 5px;
	text-align: center;
}

table#browsers a:hover {
	background-color: #E5E2EF;
	text-decoration: none;
}

table#browsers a:hover em {
	background-color: #E5E2EF;
	text-decoration: none;
}

table#browsers em {
	font-weight: 600;
	font-style: italic;
	color: #522A65;
}


/****************************
 * site specific stuff below 
 ****************************/

#container {
	width: 100%;
	max-width: 800px;
	background-color: white;
	padding: 0.5rem;
	border-radius: 10px;
	margin: 10px auto;
}

#pre-header {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}

/* the skip to content link, first thing on the page */

h1.pageheader {
	font-size: 0.5rem;
	color: #cbcbcb;
	margin: 0;
	text-align: right;
}

/* crumb trail */

.crumbs {
	font-size: 0.75rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	color: silver;
}

.crumbs ul {
	margin: 0;
	padding: 0;
	display: inline;
}

.crumbs li {
	list-style-type: none;
	display: inline;
	margin: 0;
	padding: 0;
	color: silver;
	text-transform: lowercase;
}

.crumbs li span{
	color: silver;
	text-transform: lowercase;
}

.crumbs a span{
	color: silver;
	text-transform: lowercase;
}

div#container div.crumbs ul li a:hover{
	color: #3885f6;
	text-decoration: none;
}

div#container div.crumbs ul li a:hover span{
	color: #3885f6;
	text-decoration: none;
}

/* recently seen */

.recently {
	font-size: 0.75rem;
	padding-left: 1rem;
}

/* div to hold the actual content */

#content {
	padding-top: 4px;
	padding-bottom: 4px;
	clear: both;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

/* header */

#header {
	border-bottom: 1px solid silver;
	clear: both;
}

#header ul {
	float: left;
	margin: 0;
}

#header ul li {
	display: inline;
	float: left;
}

#header ul li a {
	display: block;
	color: #bcbcbc;
	font-weight: bold;
	padding-right: 10px;
	padding-left: 10px;
}

#header ul li a.first {
	padding-left: 0;
}

#header ul li a:hover {
	color: black;
	text-decoration: none;
}

#header ul li a i{
	display: block;
	color: #bcbcbc;
	font-weight: bold;
}

#header ul li a.first {
	padding-left: 0;
}

#header ul li a i:hover {
	color: black;
	text-decoration: none;
}

#header ul#menu {
	margin-left: 1rem;
}

/* hamburger menu */

#hamburger{
	display: none;
	margin-bottom: 0.5rem;
	margin-left: 1rem;
}

#hamburger a{
	display: block;
}

#hamburger a i{
	display: block;
	color: #bcbcbc;
	font-weight: bold;
	font-size: 1.5rem;
}

#hamburger a:hover{
	text-decoration: none;
}

#hamburger a i:hover{
	text-decoration: none;
	color: black;
}

/* utils */
#utils{
	clear: both;
	border-bottom: 1px solid silver;
}

#footer-utils{
	clear: both;
	border-top: 1px solid silver;
}

/* the tags */

ul.tags {
	margin: 0;
}

ul.tags.index {
	width: 100%;
}


ul.tags li {
	display: inline;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.tags li a {
	font-weight: normal;
	font-style: normal;
	padding: 2px;
}

#columns #left ul.tags li a:hover {
	background-color: #1459d2;
	color: white;
	text-decoration: none;
}

#columns #right ul.tags li a:hover {
	background-color: #727272;
	color: white;
}

ul.tags li.tag01 a {
}

ul.tags li.tag02 a {
	font-size: 1.1rem;
}

ul.tags li.tag03 a {
	font-size: 1.2rem;
}

ul.tags li.tag04 a {
	font-size: 1.3rem;
}

ul.tags li.tag05 a {
	font-size: 1.4rem;
}

ul.tags li.tag06 a {
	font-size: 1.5rem;
}

ul.tags li.tag07 a {
	font-size: 1.6rem;
}

ul.tags li.tag08 a {
	font-size: 1.7rem;
}

ul.tags li.tag09 a {
	font-size: 1.8rem;
}

ul.tags li.tag10 a {
	font-size: 1.9rem;
}

/* pagination */

.pagination {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.pagination span.paginated_range {
	color: #727272;
}

.pagination a {
	color: #727272;
	margin-right: 10px;
}

.pagination a:hover {
	text-decoration: none;
	color: white;
	background-color: #727272;
}

.pagination span.paginated_current_page {
	font-weight: bold;
	margin-right: 10px;
}

span.page-of-page{
	display: none;
}

/* tagged object */

h2.tagged{
	margin-top: 1rem;
}

div.tagged-object{
	border-top: 1px solid silver;
}

div.tagged-object h3 a{
	color: black;
	font-weight: bold;
}

div.tagged-object h3 a:hover{
	text-decoration: none;
}

div.tagged-object p.readmore{
	text-align: right;
}

/* footer */

#footer {
	border-top: 1px solid silver;
	margin-top: -1px;
}

#footer p {
	font-size: 0.7rem;
	padding-top: 5px;
	padding-bottom: 0;
	color: #727272;
	margin-bottom: 0;
}

/* simonb.com: blog.css */

/* left */

/* previous and next articles */

.prevnext{
	float: left;
	width: 100%;
	max-width: 800px;
	margin-bottom: 4px;
}

.prevnext a{
	color: gray;
	font-weight: 400;
}

.prevnext a:hover{
	text-decoration: none;
	color: #3885f6;
}

.prevnext a#next{
	width: 50%;
	float: right;
	text-align: right;
}

.prevnext a#prev{
	width: 50%;
	float: left;
}

/* date */

.blog h2.date{
	text-align: right;
	color: #cbcbcb;
	margin-bottom: 0;
	font-size: 1rem;
	clear: both;
	margin-top: 0;
}

.blog h2.date a{
	color: #bbb;
	font-style: italic;
	font-weight: 400;
}

.blog h2.date a:hover{
	color: black;
}

/* article */

h2.article_headline{
}

.blog .barticle{
	clear: both;
	border-bottom: 1px solid silver;
	margin-bottom: 10px;
	overflow: hidden;
	line-height: 1.5;
}

/* article bookmark */

.blog .barticle h3.bookmark{
	margin-top: 0;
}

.blog .barticle h3.bookmark a{
	color: black;
}

.blog .barticle h3.bookmark a:hover{
	text-decoration: none;
}

/* article page */

.blog h2.article_date{
	color: #8e8e8e;
	font-style: italic;
	margin: 0;
	padding: 0;
	font-size: 100%;
	text-align: right;
	clear: both;
}

.blog .article_body{
	margin-top: 10px;
}

.blog .article_body ul{
	margin-left: 20px;
}

.blog .article_body ul li{
	list-style-position: outside;
	list-style-type: disc;
}

.blog .article_body ol{
	margin-left: 20px;
}

.blog .article_body ol li{
	list-style-position: outside;
	list-style-type: decimal;
}

.blog .article_body hr{
	border-top: 1px solid silver;
}

.blog p.readmore{
	text-align: right;
}

/* tags */

.blog div.tags{
	border-top: 1px dashed silver;
	padding-top: 5px;
	padding-bottom: 5px;
	clear: both;
	margin-top: 5px;
}

.blog div.tags h4{
	display: inline;
	font-size: 100%;
	color: #727272;
}

.blog div.tags a{
	color: #727272;
}

.blog div.tags a:hover{
	text-decoration: none;
	color: black;
}

.blog code{
	width: 470px;
}



/* simonb.com: 404 */

#content{
}

p#sorry{
	color: #B5B2D9;
	font-weight: 600;
	font-size: 64px;
	margin: 0;
	line-height: 64px;
}

p#page404{
	font-weight: normal;
	font-style: normal;
	font-size: 64px;
	margin: 0;
	line-height: 64px;
}

span#nf{
	font-weight: 600;
	font-size: 48px;
	text-align: right;
	margin: 0;
}

p#logo{
	margin: 0;
}

a.link{
}

ul{
	margin-left: 30px;
	margin-top: 12px;
	margin-bottom: 12px;
}

ul li{
	list-style-type: disc;
	list-style-position: outside;
}



/* narrow */

@media (max-width: 500px){
	#container{
		border-radius: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
	#content{
		width: 100%;
	}
	
	#hamburger{
		display: block;
	}
	
	ul#menu{
		display: none;
		float: none;
	}
	
	ul#menu.show{
		display: block;
	}
	
	ul#menu li{
		display: block;
		float: none;
	}
	
	ul#menu li a{
		padding-left: 0;
	}
	
	h2.date{
		display: none;
	}
	
	span.paginated{
		display: block;
	}
	
	span.paginated_range{
		display: none;
	}
	
	span.paginated-ends{
		display: block;
		float: left;
	}
	
	span.paginated-ends a{
		font-size: 1.5rem;
		display: block;
		width: 2rem;
		height: 2rem;
		float: left;
		vertical-align: top;
		line-height: 2rem;
	}
	
	span.page-of-page{
		display: block;
		float: left;
		margin-left: 1rem;
		margin-right: 1rem;
		height: 2rem;
		line-height: 2rem;
	}
}