/*  
	Theme Name: PerBylund.com
	Theme URI: http://perbylund.com
	Description: Personal site theme for PerBylund.com
	Version: 2.0
	Author: Jesper Bylund
	Author URI: http://jesperbylund.com
*/

/* ==========================================.
   TOC 
   
   01. Reset
   02. Base
   03. Links
   04. Typography
   05. Lists
   06. Embeds and figures
   07. Forms
   08. Tables
   09. Helper classes
   10. Media queries
   11. Print
   
   */


/* ==========================================.
   01. RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block; }

audio[controls], canvas, video { 
	display: inline-block; 
	*display: inline; 
	*zoom: 1; } /* From HTML5 Boilerplate */
	
body { line-height: 1.25; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none; }
	
table {
	border-collapse: collapse;
	border-spacing: 0; }


/* ==========================================.
   02. BASE */

::-moz-selection { 
	background: #5281f0; 
	color: #fff; 
	text-shadow: none; }

::selection { 
	background: #5281f0; 
	color: #fff; 
	text-shadow: none; }

#outer-wrap {
	margin: 0 auto; }

#header-container, #main-container, #sidebar-container, #footer-container, #footer-copy { 
	float: left; 
	width: 100%; }

#site-nav ul.menu{ text-align: center; }

#site-nav li { 
    display: inline-block;
    margin-right: 10px;
    padding: 4px 8px;
    transition: background 0.25s, border-top 0.25s;
}
#site-nav li.current-menu-item, #site-nav li.current-menu-item a{
	background: #5281f0;
	color: #fff;
	border-radius: 0 0 4px 4px;
}

#main-container, #sidebar-container { 
	margin-top: 50px; }
	
#content-container{ font-size: 18px; }	
	
article{ margin: 0 0 60px 0; }

#sidebar-widgets li.widget-container {
	margin-bottom: 20px; }

#footer-widgets li.widget-container {
	float: left;
	width: 25%;
	margin-bottom: 20px; }

#footer-copy {
	margin-top: 20px;
	padding-bottom: 40px;
	text-align: center; }

#nav-single, .navigation,
.entry-meta, .page-link {
	float: left;
	width: 100%;
	clear: both;
	margin-top:30px; }
	
.nav-next{ float:right; }
	
#site-nav{ background: #fff; border-top: 2px solid #000; z-index: 99; }

#site-title{ position: relative; z-index: 10; margin: 40px auto 0 auto; padding-bottom: 20px; overflow: hidden; }
#site-title a{ 
	color: #000; 
	text-decoration: none; 
	position: absolute; 
	top: 44%; 
	z-index:11; 
	font-weight: 400;
	transition: top 0.5s;
	-moz-transition: top 0.5s; /* Firefox 4 */
	-webkit-transition: top 0.5s; /* Safari and Chrome */
	-o-transition: top 0.5s; /* Opera */
}
#site-title a:hover{ text-decoration: none; top: 0%; }	

/* ==========================================.
   03. LINKS */


/* ==========================================.
   04. TYPOGRAPHY */
   
body{ background: #fff; color: #333; font-family: georgia; }

a, a:visited, a:active{ color: #3555d5; text-decoration: none; }
a:hover{ color: #2462F1; text-decoration: underline; }

#site-nav a, #site-nav a:visited{
	font-family: 'Helvetica', arial, sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #333;
	text-decoration: none;
}

#site-nav a:hover{ border-bottom: 2px solid #5281f0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 0 40px; }

dfn { font-style: italic; }

hr { 
	display: block; 
	height: 1px; 
	border: 0; 
	border-top: 1px solid #ccc; 
	margin: 20px 0; 
	padding: 0; }

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

mark { 
	background: #ff0; 
	color: #000; 
	font-style: italic; 
	font-weight: bold; }

/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { 
	font-family: monospace, monospace;
	_font-family: 'courier new', monospace; 
	font-size: 100%; }

pre { 
	white-space: pre; 
	white-space: pre-wrap; 
	word-wrap: break-word; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub, sup { 
	font-size: 75%; 
	line-height: 0; 
	position: relative; 
	vertical-align: baseline; }
	
sup { top: -0.5em; }

sub { bottom: -0.25em; }

article h1, article h2, article h3, article h4, article h5, article h6 { }

article h1 a, article h2 a, article h3 a, article h4 a, article h5 a, article h6 a, article h1 a:visited, article h2 a:visited, article h3 a:visited, article h4 a:visited, article h5 a:visited, article h6 a:visited{ text-decoration: none; color: #555; }

article h2 a:hover, article h3 a:hover, article h4 a:hover, article h5 a:hover, article h6 a:hover{ text-decoration: underline; color: #000; }

h1.post-title, h1.page-title, h1.entry-title {
	margin-bottom: 44px;
	font-size: 225%; }

article h1, article h2 {
	margin-bottom: 12px;
	font-size: 175%; }

article h3 {
	margin-top: 36px;
	margin-bottom: 12px;
	font-size: 150%; }
	
article h4 {
	margin-top: 24px;
	margin-bottom: 6px;
	font-size: 125%;
	font-weight: bold; }

article h5 {
	margin-bottom: 6px; 
	font-size: 112.5%; 
	font-weight: bold; }

article h6 {
	margin-bottom: 6px;
	font-size: 100%;
	font-weight: bold; }

article p {
	margin-bottom: 24px; 
	line-height: 150%; 
}

article p, article table{
	font-family: 'Helvetica', arial, sans-serif;
	font-weight: 300;
}

.widget-title {
	margin-bottom: 6px; 
	font-size: 125%; }


/* ==========================================.
   05. LISTS */

article ul, article ol {
	margin: 0 40px 16px 40px; }

article ul li, article ol li {
	margin: 6px 0; }

article ul li { list-style: square; }

article ol li { list-style: decimal; }


/* ==========================================.
   06. EMBEDS AND FIGURES */

.entry-content img {
	max-width: 100%; 
	height: auto; }

.wp-caption {
    background: #fff;
    max-width: 100%;
    padding: 0;
    text-align: center; }

.wp-caption.alignnone {
    margin: 0 20px 20px 0; }

.wp-caption.alignleft {
    margin: 0 20px 20px 0;
}

.wp-caption.alignright {
    margin: 0 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}


/* ==========================================.
   07. FORMS */

/* ==========================================.
   08. TABLES */

/* ==========================================.
   09. HELPER CLASSES */

.alignnone {
    margin: 5px 0 20px 0; }

.aligncenter, div.aligncenter {
    display: block;
    margin: 5px auto 20px auto; }

.alignright {
    float: right;
    margin: 5px 0 20px 20px; }

.alignleft {
    float: left;
    margin: 5px 20px 20px 0; }

.aligncenter {
    display: block;
    margin: 5px auto 20px auto; }


/* ==========================================.
   10. MEDIA QUERIES */

/* TMP */
/* For all */
/*#site-nav li { 
    float: left;
    margin-right: 10px;
    margin-bottom: 5px; }

#main-container, #sidebar-container { margin-top: 15px; }

#sidebar-container { float: right; }*/

/* Under 590 px */
/* @media only screen and (max-width: 480px) { */
@media only screen and (max-width: 590px) {
	
	.wrapper { padding: 0 20px; }
	
	#site-title { margin: 10px 0 0 0; font-size: 40px; height: 50px; }
	#site-title a{ left: 10%; }	
	
	#site-nav li{ width: 100%; display: block; text-align: center; margin-bottom: 10px; }

	#footer-container { padding-bottom: 10px; }
	
	#footer-widgets li.widget-container { width: 100%; }
	
	img.alignleft, img.alignright {
		max-width: 35%;
		height: auto; }

}

/* From 480 px to 959 px */
@media only screen and (min-width: 591px) and (max-width: 959px) {
	
	.wrapper { padding: 0 30px; }
	
	#site-title { margin: 30px 0 0 0; font-size: 50px; height: 50px; }
	#site-title a{ left: 29%; }
	
	#main-container { margin: 30px; }
	
	#content-container, #sidebar-container {
		margin: 0 auto;
		width: 75%;
		float: none; }

	#footer-container { padding-bottom: 30px; }
	
	#footer-widgets li.widget-container { width: 50%; }
	
	img.alignleft, img.alignright {
		max-width: 50%;
		height: auto; }

}

/* 960 px and up */
@media only screen and (min-width: 960px) {

	.wrapper { padding: 0 30px; }
	
	#outer-wrap {
		width: 960px; }
	
	#site-title { margin: 30px 0 0 0; text-align: center; font-size: 60px; height: 60px; }	
	#site-title a{ left: 33%; }
	
	#content-container { width: 60%; float: left; }
	body.page #content-container, body.single #content-container { width: 60%; float: left; margin-left:20%; }
	#sidebar-container { width: 25%; float: right; padding-left: 5%; border-left: 1px solid #eee; }
	#footer-container { padding: 30px 0; }

}


/* ==========================================.
   11. PRINT */