/*
Theme Name: Phusion Blog Restyle
Theme URI: https://old.blog.phusion.nl/
Description: Blog theme for Phusion.
Version: 1.0
Author: Pepijn Looije (Phusion)
Author URI: https://phusion.nl/

---- Special styles that you can use in your blog content ----


## Images with borders

Displays a border around an image.

	<img ... class="exhibit">
	<img ... class="img-thumbnail">

## Floating images

Floats an image left or right. Proper margins are added for proper text flow.

	<img ... class="float-left">
	<img ... class="float-right">

## Full-width images

Makes images cover the full width of the blog content area. If the image is
smaller than the blog content area, then it is enlarged.

    <img ... class="img-full-width">

## Responsive images

Makes images fit in the blog content area. If the image is smaller than the
blog content area, then its size remains unchanged.

    <img ... class="img-responsive">

## Figures with captions

Displays a figure with a descriptive caption. This figure aligns at the center
and has a limited width.

	<figure>
	   <img ...>
	   <figcaption>The init process spawns further processes.</figcaption>
	</figure>

If you want to allow it to take on the full container width, add the 'fullwidth'
class:

    <figure class="figure-fullwidth">
        ...
    </figure>

## Callouts

Displays a big quote-like centered text.

	<p class="callout">"Passenger is constantly improving."</p>

*/

.content a {
	color: #3c3fcc;
}

.content ul, .content ol {
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 1.5em;
}

body div#content ul {
	list-style: disc outside;
}

body#blog {
	font-size: 14px;
	font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
	line-height: 1.6em;
	color: #5a5d6a;
}

#white_papers_title {
	display: none;
}

div#top {
	background: #fff url('images/top.png') no-repeat;
	height: 81px;
}

div#top h1 {
	position: relative;
	float: left;
	top: 32px;
	left: 22px;
	font-size: 200%;
	font-weight: bold;
	font-family: Impact, Sans-Serif;
}

div#top h1 a {
	display: block;
	width: 453px;
	height: 32px;
}

div#middle {
	border: 1px solid #ebebf1;
	border-width: 0 1px 0 1px;
	background: #fff;
	padding: 22px;
	float: left;
	width: 924px;
}

h2.title a, p.meta { 
	color: #3c3f4d;
}

h3 {
	margin: 15px 0;
}

div#middle div#posts h2, div#middle div#posts h3 { color: #222; border: 0; font-weight: bold; height: auto; }
div#middle div#posts h4 { border: 0; }
div#middle div#posts h2.title { font-size: 28px; margin-bottom: 0; padding-bottom: 4px; font-weight: bold; }
div#middle div#posts h2 { font-size: 25px; }
div#middle div#posts h3 { font-size: 20px; color: #555; }
div#middle div#posts span { color: #777c8f; }
div#middle div#posts div.content,
div#middle div#posts #comments {
	padding: 20px 0 15px;
	line-height: 1.6em;
	font-size: 16px;
	font-family: "Helvetica Neueu", sans-serif;
	color: #444;
}
div#middle div#posts div.content p { margin-bottom: 12px; font-size: inherit; }
div#middle div#posts div.content ol {
	margin-left: 2em;
	list-style: decimal outside !important;
	color: inherit;
}

div#middle div#posts div.content .callout {
	font-size: 30px;
	font-family: serif;
	font-style: italic;
	text-align: center;
	line-height: 1.2em;
	margin: 1em;
	color: #222;
}

div#middle div#posts .float-right {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}

div#middle div#posts .clear-float {
	clear: both;
}

div#middle div#posts img.exhibit,
div#middle div#posts .img-thumbnail {
	border: solid 1px #bbbbbb;
	padding: 2px;
}

div#middle div#posts .img-full-width {
	width: 100%;
	heigth: auto;
}

div#middle div#posts .img-responsive {
	max-width: 100%;
	height: auto;
}

div#middle div#posts figure {
	display: block;
	margin: 1em auto 1em auto;
	width: 400px;
	text-align: center;
}

/* Wordpress inserts empty 'p' tags inside figure tags.
 * We work around their extra margins by hiding them.
 */
div#middle div#posts figure p {
	display: none;
}

div#middle div#posts figure img {
	max-width: 400px;
	height: auto;
}

div#middle div#posts figcaption {
	display: block;
	font-style: italic;
	font-size: 14px;
}

div#middle div#posts .figure-fullwidth {
	width: 100%;
}

div#middle div#posts em {
	font-style: italic;
	font-size: inherit;
}

div#middle div#posts code {
	font-family: Monospace;
	font-size: 12px;
	padding: 2px;
	background: #e7e7e7;
	border: solid 1px #d0d0d0;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

div#middle div#posts pre code {
	border: none;
	background: none;
}

div#posts {
	float: left;
	width: 652px;
	margin-right: 22px;
}

ul#sidebar {
	float: left;
	width: 250px;
	font-size: 14px;
}

ul#sidebar li {
	margin-bottom: 20px;
}

div#posts div.post {
	border-bottom: 1px solid #e6e6ed;
	padding: 7px 0 25px;
	margin-bottom: 20px;
}
ul#sidebar li { list-style: none; }
ul#sidebar > li:first-child, div#posts > div.post:first-child { padding-top: 0; }

ul#sidebar li p {
	padding: 6px 0;
}

ul#sidebar .linkcat h2 {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 18px;
}

ul#sidebar .linkcat li {
	border: 0;
	margin: 0;
	padding: 8px 0 0 0;
	font-size: 90%;
	line-height: 130%;
}

ul#sidebar .linkcat a {
	color: #3c3fcc;
}

body div#content div.twtr-hd h3 { height: 13px; }

#learn-more { 
	display: block;
	margin-left: 165px;
	text-indent: -9999em;
	background: url('images/learn_more.png');
	width: 85px;
	height: 19px;
}

#learn-more:hover { background-position: 0 -19px; }
#learn-more:active { background-position: 0 -38px; }

.sidebar-twitter-button {
	text-align: right;
}

div#bottom {
	background: #fff url('images/bottom.png') no-repeat;
	height: 5px;
	clear: both;
}

body div#content ol#comments {
	list-style: none;
	font-size: 15px;
}

ol#comments div.comment-author {
	background: #F4F4F6;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

ol#comments div.comment-meta {
	border-bottom: 1px dotted #F4F4F6;
	padding: 5px 10px;
	font-size: 12px;
}

ol#comments div.comment-meta a {
	color: #777C8F;
}

ol#comments li {
	margin-bottom: 15px;
}

ol#comments p {
	padding: 5px 5px 10px 10px;
}

ol#comments img.avatar { 
	vertical-align: middle; 
	margin-right: 10px;
}

ol#comments cite { font-style: normal; }

form#searchform {
	float: right;
}

form#searchform div > * {
	display: none;
}

form#searchform div {
	width: 253px;
	height: 29px;
	margin: 25px 20px 0 0;
	background: url('images/search.png');
}

form#searchform input#s {
	background: none;
	display: block;
	padding: 7px 0 0 30px;
	color: #5A5D6A;
	border: 0;
	font-size: 13px;
	width: 210px;
}

div#respond label {
	display: block;
	font-size: 14px;
	font-weight: bold;
}

div#respond input, div#respond textarea {
	color: #5A5D6A;
	border: 1px solid #C0C0C0;
	padding: 3px;
	margin: 4px 0;
	font-size: 12px;
	width: 50%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: url('images/form_bg.png') repeat-x;
}

:focus {
	outline: 0;
}

div#respond textarea {
	width: 75%;
}

div#respond input#submit {
	width: inherit;
}

div#respond input:focus, div#respond textarea:focus {
	border-color: #8D8D8D;
}

div#respond input#submit {
	background: url('images/submit_comment.png');
	width: 111px;
	height: 21px;
	text-indent: -9999em;
	border: 0;
}

div#respond input#submit:hover { background-position: 0 -21px; }
div#respond input#submit:active { background-position: 0 -42px; }


table.data {
	border: solid 1px #c0c0c0;
	background: white;
	border-spacing: 1px;
	padding: 2px;
	margin: 1em;
}

table.data td,
table.data th {
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
}

table.data td {
	background: #eaeaea;
}

table.data th,
table.data td.header {
	font-weight: bold;
	background: #d0d0e0;
}


a.github {
	display: block;
	border: solid 2px #d6d6d6;
	background: #eaeaea url('https://old.blog.phusion.nl/wp-content/uploads/2013/07/github-27d4e972e8e327134061bb88b4bd139e.png') no-repeat 49px 12px;
	width: 150px;
	padding: 12px;
	padding-top: 99px;
	margin: 1em;
	text-align: center;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	font-weight: bold;
}

a.github:hover {
	border-color: #e0e0e0;
	background-color: #f5f5f5;
	text-decoration: none;
	color: #6C6FFC;
}

a.github:active {
	background-color: #d0d0d0;
}

body div#content dl {
	margin: 0 1.625em;
}

body div#content dl dt {
	font-size: 100%;
	color: #222;
	margin: 0;
	padding: 0;
}

body div#content dl dd {
	margin-left: 1.5em;
}

body div#content dl dt + dd {
	margin-top: 0;
	padding-top: 0;
}

body div#content pre {
	font-size: 12px;
	line-height: 1.3em;
}

body #footer .holder #copyright {
	line-height: 1em;
}

#content blockquote, #content q {
	border-left: #d0d0d0 3px solid;
	background: #f0f0f0;
	margin: 10px;
	padding: 10px;
}

.addthis_toolbox:first-child {
	margin-top: -1em;
	margin-bottom: 1em;
}

.addthis_toolbox:last-child {
	margin-top: 2em;
}