@font-face {
    font-family: 'OpenSans';
    src: url('/_font/OpenSans/OpenSans-Regular.eot');
    src: url('/_font/OpenSans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('/_font/OpenSans/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('/_font/OpenSans/OpenSans-Light.eot');
    src: url('/_font/OpenSans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
    url('/_font/OpenSans/OpenSans-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'CreteRound';
    src: url('/_font/CreteRound/CreteRound-Regular.otf') format('truetype');
}

html,body {
    margin:0;
    padding:0;
    height: 100%;
}
html{
    box-sizing: border-box;
    font-family:OpenSans;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/*
    Global Helper Classes
*/
.table{
    display:table;
}
.table-cell{
    display:table-cell;
}
.floated{
    float:left;
}
.clear{
    clear:both;
}


/*
    Global Blog Header
*/
.site-header {
    background: #4186C9;
    padding: 2em 0;
    text-align: center;
    color: #FFF;
}
.site-header__icon {
    font-size: 2.5em;
    background: #FFF;
    padding: 0 0.25em;
    border-radius: 50%;
    color: #4186C9;
}
.site-header__title {
    font-size: 2.5em;
    font-family:CreteRound;
    font-weight: normal;
    padding-left: 0.3em;
}
.site-header__description {
    display: block;
    margin: 0.8em 0 0.5em;
}
.site-nav,
.site-nav__mobile {
    background: #2F333E;
    text-align: center;
    color: #D9D9D9;
}
.site-nav {
    display: block;
}
.site-nav__mobile {
    display: none;
}
.site-nav__mobile span {
    margin: 0.8em 0;
}
.site-nav__btn{
    color: #D9D9D9;
    text-decoration: none;
    padding: 0.2em 0.5em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
}
.site-nav__btn:hover,
.site-nav__btn.active {
    background: #3D4352;
    cursor: pointer;
}
.site-nav__list{
    margin:0;
    padding: 0.8em 0;
}
.site-nav__list li {
    display:inline-block;
    margin: 0 0.3em;
}

/*
    Content Section
*/
.site-wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
.site-content,
.footer__block {
    margin:0 auto;
    width:80%;
    max-width:980px;
}

.post {
    word-wrap: break-word;
    border-top:1px dashed #959595;
    margin: 1.5em 2em;
}
.post:first-child{
    border:0;
}
.post__header--link {
    color:#000000;
    text-decoration: none;
}
.post__header--link:hover{
    text-decoration: underline;
}
.post__title {
    font-weight: normal;
}

.post__content--more,
.blog-entry footer a {
    color:#0A539A;
    text-decoration: underline;
}
.blog-entry footer a,
#comments a.viewmode,
#comments .viewmode-active{
    border:1px solid #BFBFBF;
    padding:1px 3px;
    border-radius: 4px;
    text-decoration: none;
    color:#505050;
    text-transform: uppercase;
}
#trackback_url{
    padding-bottom: 1.5em;
}
.blog-entry footer .fa{
    font-size:22px;
    padding:0 5px 0 0;
}
#comments{
    padding-bottom:1em;
}

.post__content--more:hover {
    background:#0A539A;
    color:#FFFFFF;
    text-decoration:none;
}
.blog-entry footer a:hover,
#pagenav a:hover,
#serendipity_comment input[type="submit"]:hover,
#comments a.viewmode:hover{
    background:#4CA0F4;
    border-color: #3E82C7;
    color:#FFFFFF;
    text-decoration:none;
    cursor:pointer;
}

.post__content--more:after {
    content:' \f30b';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.post__content--more {
    margin-bottom: 1.5em;
    display: inline-block;
}
#trackbacks{
    padding:3em 0 1.5em 0;
}
#trackbacks article footer a{
    margin:0.5em 0 1em 0;
}
.blog-entry footer span.outline{
    margin-right:10px;
}
.blog-entry footer span a{
    position:relative;
    margin:2px 0;
    display:inline-block;
}
.blog-entry footer span.break-wordwrap{
    position:relative;
    display:inline-block;
    white-space:nowrap;
}
.blog-entry footer span{
    color:#4A4A4A;
}
.blog-entry .update{
    font-style: italic;
}
.blog-entry .update span:first-child{
    text-decoration: underline;
}

.notice,
.geshi{
    word-wrap: break-word;
    padding:1% 0;
    border-radius:3px;
}
.notice div{
    vertical-align:middle;
    padding-left:7px;
    padding-right:7px;
}
.notice div:first-child{
    text-align:center;
    font-size:20px;
    width:60px;
    padding-right:0;
}
.notice-noarticle{
    margin:40px 1.5em;
}
.notice-info,
.notice-important,
.notice-success,
.notice-warning{
    margin:5px 0;
    width:80%;
}

.notice-noarticle,
.notice-info{
    border:1px solid #A3C0DC;
    background:#E1EAF4;
    color:#2D547E;
}
.notice-important{
    border:1px solid #FF9595;
    background:#FFD3D3;
    color:#D30000;
}
.notice-success{
    border:1px solid #95FF9C;
    background:#CFFFD1;
    color:#00A809;
}
.notice-warning{
    border:1px solid #FFFF7E;
    background:#FFFFBE;
    color:#EE6905;
}

.sticky{
    font-weight:bold;
    padding-right:10px;
}

.geshi{
    font-size:13px!important;
    font-family: monospace;
    border:1px solid #BFBFBF;
    background:#F6F6F6;
    overflow: auto;
    white-space:nowrap;
    padding: 0 1em 0 0;
}

/*
    Global Blog Footer
*/
.footer {
    position: absolute;
    bottom: -7.6em;
    width: 100%;
    background: #2F333E;
    color: #FFFFFF;
    padding: 1em 0;
}
.footer__block {
    line-height:30px;
}
.footer__btn--link {
    color:#FFA31E;
    text-decoration:underline;
}
.footer__btn--link:hover{
    background:#FFA31E;
    color:#000000;
    text-decoration:none;
}
.footer__btn {
    margin:0 10px 0 0;
}

/* page navigation */
#pagenav{
    margin-top:1em;
    margin-bottom:1em;
}
#pagenav .left{
    position:relative;
    float:left;
}
#pagenav .right{
    position:relative;
    float:right;
}
#pagenav a,
#serendipity_comment input[type="submit"]{
    position:relative;
    display:inline-block;
    text-align:center;
    border:1px solid #BFBFBF;
    text-decoration: none;
    color:#505050;
    padding:10px 15px;
    font-size:15px;
    text-transform: uppercase;
    font-weight:bold;
    background:#FFF;
}
#pagenav .fa-arrow-left{
    padding-right:5px;
}
#pagenav .fa-arrow-right{
    padding-left:5px;
}


@media all and (max-device-width: 900px),
all and (max-width: 900px){
    .container-centered{
        margin:0;
        width:100%;
    }
    #banner-first-line,
    #banner-last-line,
    #footer{
        padding-left: 1em;
        padding-right: 1em;
    }
    .blog-entry,
    #entry-comment,
    #pagenav{
       margin-left: 1em;
       margin-right: 1em;
    }
    .notice-info,
    .notice-important,
    .notice-success,
    .notice-warning,
    .input-group,
    #serendipity_comment textarea{
        width:100%;
    }
    .notice-noarticle{
        margin:40px 1em;
    }
}

@media all and (max-device-width: 710px), all and (max-width: 710px){
    header.main nav.default {
        display: none;
    }
    .site-nav__mobile {
        display: block;
    }
    .site-header__banner{
        padding-left: 1em;
        padding-right: 1em;
    }
    #banner .quickmenu-icon.non-mobile{
        display:none;
    }
    #footer .quickmenu-icon{
        display:block;
    }
    #banner-last-line .table-cell{
        display:inline-block;
        width:100%;
    }
    #banner .right{
        text-align: right;
        margin-bottom:20px;
    }
    #serendipityQuickSearchTermField{
        width:100%;
    }
    #banner-last-line nav ul{
        text-align: center;
    }
    #banner nav{
        width:100%;
    }
    #footer div{
        height:auto;
        min-height:30px;
    }
    #serendipity_comment input[type="submit"] {
        padding:10px 10px;
    }
    #content{
        padding-bottom:230px;
    }

    .serendipity_image_left{
        float: none;
        margin: 0 auto 1em auto;
    }

    header.main nav {
        background: #3E4352;
    }
    header.main nav ul {
        padding: 0;
    }
    header.main nav ul li {
        display: block;
        margin: 0;
    }
    header.main a {
        color: #D9D9D9;
        text-decoration: none;
        padding: 0.6em 0;
        width: 100%;
        border: 0;
        border-radius: 0;
        display: inline-block;
    }
    header.main a:hover {
        background: #383C4A;
    }
}