/*
Theme Name: samuli.hakoniemi.net
Theme URI: http://samuli.hakoniemi.net
Author: Samuli Hakoniemi
Author URI: http://samuli.hakoniemi.net
Description: N/A
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: custom
*/

* {
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
}

html, body {
    -webkit-text-size-adjust:100%;
}

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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}

em {
    background-color: #F5F5F5;
    border: 1px solid #F0F0F0;
    padding: 2px 5px;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}


/* CONTENT */

/* @begin General */
body {
    background:url(images/bg.jpg) left top repeat #F8F8F8;
    font:normal 0.9em/1.6em "Muli", helvetica,arial,sans-serif;
    color:#202020;
}

h1, h2, h3, h4 {
    font-weight:normal;
    font-family: 'Dancing Script', georgia, serif;
}

h1 {
    font-size:2em;
    line-height:1.4em;
    margin:10px 0px;
}

h2 {
    font-size:1.7em;
    line-height:1.4em;
    margin:20px 0px 10px 0px;
}

h3 {
    font-size: 1.5em;
    line-height:1.75em;
    margin:20px 0px 10px 160px;
}

a {
    color:#336699;
}

h1 a, h2 a {
    color:#202020;
}

li {
    font-size: 16px;
}

u {
  background-color:#F8F8F8;
  border:1px solid #E0E0E0;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  padding:0px 2px;
  text-decoration:none;
}

ul {
    list-style: disc;
    padding-left: 188px;
    margin-bottom: 10px;
}

.nav-previous {
    float:left;
}

.nav-next {
    float:right;
}

#nav-below {
    overflow:hidden;
    margin-bottom:20px;
}

/* @end General */

/* @begin Post */
.ingress {
    margin: 20px 0px 20px 168px;
}

#content .ingress p {
    margin-left: 0px;
    width: auto;
}

.single .ingress {
    background-color:#F8F8F8;
    padding:8px 20px;
    border:1px solid #D0D0D0;
    width: 640px;
}

.home .ingress {
    margin-bottom:0px;
}

.home .read-more {
    text-align:right;
    margin:0px 0px 20px 0px;
    padding-bottom:20px;
    border-bottom:1px inset #D0D0D0;
}

#comments {
    margin-top:40px;
    border-top:1px solid #A0A0A0;
}

#commentform label {
    float:left;
    width:6em;
    margin-right:20px;
}

#comments .avatar {
    float:left;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px;
    -webkit-box-shadow:1px 1px 3px rgba(32,32,32,0.5);
    -moz-box-shadow:1px 1px 3px rgba(32,32,32,0.5);
    box-shadow:1px 1px 3px rgba(32,32,32,0.5);
}

#comments .author {
    float:left;
    border-bottom:1px solid #A0A0A0;
    padding-left:20px;
    margin: 30px 0px 0px 0px;
    display:block;
    clear:right;
    width: auto;
}

#comments .comment-content {
    clear:both;
    width:480px;
}

#comments .children {
    padding-left:40px;
    list-style-type:none;
}

#comments .children .comment-content {
    width:445px;
}

.comment-author-admin {
    margin-left: 160px;
}

footer.entry-meta {
    margin:20px 0px 20px 160px;
    font-size: 16px;
    line-height: 1.4em;
}

/* @end Post */

@font-face {
  font-family: 'Socialico';
  font-style: normal;
  font-weight: 400;
  src: local('Socialico'), url('fonts/Socialico.otf') format('opentype');
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0px;
    padding: 0px;
    -webkit-text-side-adjust: 100%;
    background: url(images/bg.jpg) #F0E8E8;
}

h1 {
    font-family: 'Dancing Script', cursive;
    margin: 0px;
    padding: 0px;
}

h1, h2, h3 {
    font-weight: normal;
}

p {
    color: #202020;
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 1.4em;
    margin: 0px 0px 0.5em 0px;
}

#header-main {
    display: block;
    width: 100%;
    background-color: #f75a01;
    height: 200px;
    padding: 32px;
}

#its-me {
    width: 125px;
    height: 125px;
    margin-top: 4px;
    border: 4px solid #FFFFFF;
    border-radius: 80px;
    float: left;
    
}

#header-main h1 a {
    color: #FFFFFF;
    float: left;
    font-size: 64px;
    line-height: 48px;
    margin:16px 0px 0px 32px;
    text-decoration: none;
}
#header-main h1 small {
    display: block;
    font-size: 32px;
}

.socialico {
    text-align: center;
    font:normal 64px "Socialico";
    width: 1em;
    height: 1em;
    line-height: 1.1em;
    color: #FFFFFF;
    text-decoration:none;
    float: right;
    border: 2px solid #FFFFFF;
    margin: 32px 0px 0px 16px;
    transition:background-color 160ms;
}

#icon-twitter {
    background-color: #00aef0;
}

#icon-twitter:hover {
    background-color: #30C8FF;
}

#icon-rss {
    background-color: #f4601c;
}

#icon-rss:hover {
    background-color: #ff8030;
}


#edge{
    width: 100%;
    height: 24px;
    clear: both;
    background: url(images/edge.png) left top repeat-x;
    margin-top: -2px;
}

#content {
    padding: 32px;
}


#content article {
    margin-bottom: 32px;
}
#content h1 {
    font-size: 40px;
    margin: 16px 0px 8px 0px;
}

#content h1 em {
    border-width: 0px;
    border-bottom: 1px solid #202020;
    background-color: transparent;
    font-style: normal;
}

#content h1 small {
    display: block;
    font-size:16px;
    line-height: 24px;
    color: #606060;
}

#content h1 a {
    text-decoration: none;
    color: #202020;
}

#content h1 a:hover {
    background-color: #E0E0E0;
}

#content p {
    margin-left:168px;
    width: 640px;
}
 

/* @begin Media Queries */

/* iPhone and other */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
    body {
        width:640px;
    }
    
    html, body {
        font-size:125%;
    }

    h1 {
        font-size:1.25em;
        line-height:1em;
    }
}

@media only screen 
and (min-width : 1280px) {
    html, body {
        font-size:110%;
    }

    h1 {
        font-size:1.25em;
    }

    .dp-highlighter {
        font-size:14px !important;
    }

    .dp-highlighter ol {
        line-height:18px !important;
    }
}

/* @end Media Queries */

/* @begin Overrides */
#content .dp-highlighter {
    width: auto;
    margin: 16px 0px 16px 168px;
}