/***********************************************************************************************************************

****** Baseblog Kirby Theme ******

*** Demo URL: http://baseblog.sashtown.de
*** Author: Sascha Lack
*** Author URI: http://sashtown.de
*** First release: May 2012
*** Current release 1.1: March 2013
*** Made for Kirby CMS [http://getkirby.com]

************************************************************************************************************************/



/* Reset
-------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    border: 0;
    background-repeat: no-repeat;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* HTML5 Hack for Oldtimers */
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section, summary {
    display: block;
}
ol, ul {
    list-style: none;
}



/* Structure
-------------------------------------------------------------- */

html {
    -webkit-font-smoothing: antialiased;
    height: 101%;
}
body {
    color: #252525;
    font-family: 'Noto Sans', sans-serif;
    padding: 0 0 50px 0;
    background-color: #000542;
}
.site {
    margin: 25px auto 0;
    padding: 0 15px;
    max-width: 750px;
    background-color: white;
}
.branding {
    padding: 30px 0;
    font-family: 'Nixie One', sans-serif;
}
.colophon {
    padding: 10px 0;
    font-size: 80%;
    border-top: 1px solid #999;
}
.colophon p {
    display: inline;
}



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

a:link,
a:visited {
    color: #dd4a38;
    text-decoration: none;
}
a:hover,
a:active {
    color: #333;
}
a:focus {
    background: #ddd;
}



/* Header
-------------------------------------------------------------- */

.branding h1 {
    font-size: 40px;
    color: #00f;
}

.branding h1 a {
    color: #00f;
}

.branding h2 {
    font-size: 20px;
    color: #999;
}



/* Navigation
-------------------------------------------------------------- */

.menu {
    margin: 0 0 60px 0;
    background: #444;
}
.menu li {
    float: left;
    display: inline-block;
}
.menu a {
    display: block;
    font-size: 16px;
    line-height: 22px;
    padding: 10px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}
.menu a:hover {
    background: #dd4a38;
}

.submenu {
    background: #888;
	margin: -55px 0 60px;
}
.submenu li {
    float: left;
    display: inline-block;
}
.submenu a {
    display: block;
    font-size: 12px;
    line-height: 12px;
    padding: 10px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}
.submenu a:hover {
    background: #dd4a38;
}


/* Search
-------------------------------------------------------------- */

.search {
    float: right;
    width: 35%;
}
.search input {
    padding: 10px 0 10px 10px;
    height: 42px;
    width: 100%;
    outline: 0;
    color: #aaa;
    font-size: 16px;
    background: #444;
    border-radius: 0;
    border-left: 1px solid #666;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Noto Sans', sans-serif;
}
.search input:hover {
    opacity: 0.7;
}
.search input:focus {
    cursor: text;
    background: #dd4a38;
    color: #fff;
}
@media only screen and (max-width : 500px) {  
    .search {
        width: 100%;
        border-left: none;
        border-top: 1px solid #666;
    }
}



/* Articles
-------------------------------------------------------------- */

.blog .post {
    margin: 0 0 80px 0;
}
.post-meta {
    color: #888;
    font-size: 85%;
    margin: 5px 0 20px 0;
    padding: 0 0 5px 0;
    border-bottom: 1px solid #bbb;
}
.category {
    display: inline;
}
.category li {
    display: inline;
    margin: 0 2px 0 0;
}
.category li:after {
    content: ',';
}
.category li:last-child:after {
    content: none;
}
.content a {
    border-bottom: 1px solid #ccc;
}
.blog .post-sub {
    margin: 30px 0 0 0;
}
.blog .post-sub a {
    display: inline-block;
    margin: 0 10px 0 0;
    background: #444;
    padding: 10px;
    color: #fff;
}
.blog .post-sub a:hover {
    background: #dd4a38;
}
.read_more {
    float: right;
    margin: 5px 0 0 0;
    font-size: 85%;
    text-transform: uppercase;
}



/* Pages
-------------------------------------------------------------- */

.page {
    padding: 0 0 30px 0;
}
.page h1 {
    padding: 0 0 5px 0;
    border-bottom: 1px solid #999;
    font-family: 'Nixie One', sans-serif;
}



/* Results of search and categories <h1>
-------------------------------------------------------------- */
.results {
    float: left;
    margin: 0 0 50px 0;
    padding: 5px 10px;
    width: 100%;
    color: #555;
    font-size: 25px;
    background: #eee;
}
.no_results {
    margin: 50px 0;
}



/* Post formats
-------------------------------------------------------------- */

.format_link h1 {
    font-size: 25px;
}
.format_link h1 a:after {
    content: " →";
}



/* Typo
-------------------------------------------------------------- */

strong {
    font-style: bold;
}
em {
    font-style: italic;
}
article header {
    /*font-family: 'Quattrocento', serif;*/
    font-family: 'Noto Sans', sans-serif;
}
article p {
    line-height: 20px;
	font-size: 14px;
    margin: 10px 0;
}
article li {
    line-height: 19px;
	font-size: 14px;
    margin: 10px 0;
}
article h1 {
    color: #dd4a38;
    font-size: 24px;
    line-height: 35px;
}
article h2 {
    font-size: 20px;
    line-height: 30px;
    margin: 30px 0 0 0;
}
article h3 {
    font-size: 16px;
    line-height: 20px;
    margin: 20px 0 0 0;
}
article .content ol {
    margin: 0px 0 20px 20px;
    line-height: 25px;
	list-style-type: decimal;
}
article .content ul {
    list-style-type: disc;
    margin: 0px 0 20px 20px;
    line-height: 25px;
}
article blockquote {
    margin: 10px 20px 20px 20px;
    padding: 0 15px;
    font-style: italic;
    border-left: 10px solid #e5e5e5;
}




/* Pagination
-------------------------------------------------------------- */
.pagination {
    margin: 50px 0 30px 0;    
}
.pagination a {
    display: inline-block;
    padding: 10px;
    color: #fff;
    background: #444;
}
.pagination a:hover {
    background: #dd4a38;
}
.pagination .next {
    float: right;
}



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

img {
    max-width: 100%;
    height: auto;
}
img.floatleft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
img.floatright {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}
img.left {
	align:left;
}
img.center {
	margin-right: auto;
	margin-left: auto;
	display: block;
}
iframe {
    max-width: 100%;
}



/* YouTube & Vimeo
-------------------------------------------------------------- */

.video-container {
  margin: 10px 0;
  position: relative;
  padding-bottom: 55%;
  padding-top: 15px;
  height: auto;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* Clearfix 
---------------------------------------------------------------*/
.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}



/* Visually hidden 
------------------------------------------------------------------------*/
.vh {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}



/* IE
-------------------------------------------------------------- */
html.ie {
    /* Your awesome styles for the dev's nightmare. */
}

/* Contact form
-------------------------------------------------------------- */
#contactform-name.contactform-input {
	border-style: dotted;
	border-width: 1px;
	width: 100%;
	display: block;
	height: 25px;
}

#contactform-email.contactform-input {
	border-style: dotted;
	border-width: 1px;
	width: 100%;
	display: block;
	height: 25px;
}

#contactform-text.contactform-input {
	border-style: dotted;
	border-width: 1px;
	width: 100%;
	display: block;
	height: 100px;
}

#contactform-spam.contactform-input {
	border-style: dotted;
	border-width: 1px;
	height: 20px;
}

.contactform-required {
	color: red;
}

.contactform-button {
    margin: 30px 0 0 0;
    display: inline-block;
    margin: 0 10px 0 0;
    background: #444;
    padding: 10px;
    color: #fff;
    font-size: 85%;
}

.contactform-button:hover {
    background-color: #dd4a38;
}

.contactform-field {
	margin-top: 10px;
}
.contactform-help {
	margin-bottom: 20px;
	margin-top: 10px;
}


/* Code formatting */
code {
	font-family: 'Source Code Pro', monospace;
}

pre.highlight {
	font-family: 'Source Code Pro', monospace;
	font-size: 85%;
	white-space: nowrap;
	overflow-x: auto ;
	background-color: #fefdd5;
	padding-top: 5px;
	padding-bottom: 5px;
}