theme-geeklab/static/_css/style.css

@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
*/
.serendipity_edit_nugget{
    display:none;
}

.container-centered{
    margin:0 auto;
    width:80%;
    max-width:980px;
}
.table{
    display:table;
}
.table-cell{
    display:table-cell;
}
.floated{
    float:left;
}
.clear{
    clear:both;
}

span#mailinvite::before,
span#mailinvite:before{
    content: "mail\40";
}
span#mailinvite::after,
span#mailinvite:after{
    content: ".de";
}
#badmail,
.serendipity_comment_s9ymarkup,
.serendipity_comment_emoticate,
.serendipity_comment_spamblock,
.serendipity_comment_gravatar,
.serendipity_comment_markdown,
.comment_phone_input
{
    display:none;
}
.comment_avatar{
    border-radius: 50%;
    width: 64px;
    height: 64px;
}
#trackbacks a {
    white-space: nowrap;
    margin: 0.5em 0 0;
    display: inline-block;
}


/*
    Global Blog Header
*/
header.main .banner {
    background: #4186C9;
    padding: 2em 0;
    text-align: center;
    color: #FFF;
}
header.main .icon {
    font-size: 2.5em;
    background: #FFF;
    padding: 0 0.25em;
    border-radius: 50%;
    color: #4186C9;
}
header.main .title {
    font-size: 2.5em;
    font-family:CreteRound;
    font-weight: normal;
    padding-left: 0.3em;
}
header.main .underline {
    display: block;
    margin: 0.8em 0 0.5em;
}
header.main nav,
header.main div.mobile {
    background: #2F333E;
    text-align: center;
    color: #D9D9D9;
}
header.main nav.default,
header.main nav.default.visible {
    display: block;
}
header.main div.mobile {
    display: none;
}
header.main a,
div.mobile span{
    color: #D9D9D9;
    text-decoration: none;
    padding: 0.2em 0.5em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
}
header.main a:hover,
header.main a.active,
div.mobile span:hover {
    background: #3D4352;
    cursor: pointer;
}
header.main nav ul{
    margin:0;
    padding: 0.8em 0;
}
header.main nav ul li {
    display:inline-block;
    margin: 0 0.3em;
}

div.mobile span {
    margin: 0.8em 0;
}
#mobile-menu{
    display:none;
}


/*
    Content Section
*/
#wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
#content{
    padding-bottom:110px;
}
#content .blog-entry:first-child{
    border:0;
}
h2 {
    font-weight: normal;
}
.blog-entry,
#entry-comment{
    word-wrap: break-word;
    border-top:1px dashed #959595;
    padding:1.5em 0;
}
.serendipity_staticpage {
    border: none;
}
.blog-entry,
#entry-comment,
#pagenav{
   margin-left: 2em;
   margin-right: 2em;
}

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

.blog-entry header a{
    color:#000000;
    text-decoration: none;
}
.blog-entry header a:hover{
    text-decoration: underline;
}

.blog-entry .entry-body a,
.blog-entry .entry-body-extended a,
.blog-entry .entry-extended a,
.blog-entry footer a,
.serendipity_staticpage a,
#entry-comment 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;
}
.blog-entry .entry-body a:hover,
.blog-entry .entry-body-extended a:hover,
.blog-entry .entry-extended a:hover,
.blog-entry footer a:hover,
.serendipity_staticpage a:hover,
#entry-comment a: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;
}
#comments .viewmode-active{
    background:#EAEAEA;
}
a.read_more:after{
    content:' \f178';
    font-family:'FontAwesome';
}
a.read_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;
}

.serendipity_image_left{
    display:block;
    float: left;
    margin: 0 2em 1em 0
}
.serendipity_image_center {
    display: block;
    margin: 0 auto 1em auto;
}

.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: 0px;
    width: 100%;
    background:#2F333E;
    color:#FFFFFF;
    padding:10px 0;
}
#footer div{
    line-height:30px;
}
#footer a{
    color:#FFA31E;
    text-decoration:underline;
}
#footer a:hover{
    background:#FFA31E;
    color:#000000;
    text-decoration:none;
}
#footer .quickmenu-icon{
    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;
}


/*
    search field
*/
#serendipityQuickSearchTermField{
    height: 2em;
    width: 15em;
    border: 1px solid #595959;
    border-radius: 6px;
    font-size: 1.2em;
    font-family:OpenSansLight, Arial;
    padding:0 2em 0 2em;
    margin: 1.5em 0 0 0;
}
.serendipity_searchQuery{
    background:#FAFF86;
}
i.fa-search {
    position: absolute;
    color: #A6A6A6;
    font-size: 1.2em;
    top: 2em;
    padding: 0 0.5em;
}
header.main .wrapper {
    position: relative;
}

/*
    contact form
*/
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width:55%;
}
.input-group-addon:first-child {
    border-right: 0px none;
}
.input-group .form-control:first-child, .input-group-addon:first-child{
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background: #EEE;
    border: 1px solid #CCC;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.margin-bottom-sm {
    margin-bottom: 5px !important;
    display:table;
}
.input-group .form-control:last-child,
.input-group-addon:last-child {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0px;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #FFF;
    border: 1px solid #CCC;
}
#serendipity_comment textarea{
    position:relative;
    font-family:OpenSans;
    border: 1px solid #CCC;
    padding:5px;
    width:80%;
    max-width: 100%;
    min-height:180px;
    margin:2% 0;
}

form#serendipity_comment{
    margin:25px 0 0 0;
}
.serendipity_comment{
    position:relative;
    margin:0 0 10px 0;
}
.serendipity_comment.commentlevel-0 { margin-top:35px; }
.commentlevel-1 { padding-left: 1em; }
.commentlevel-2 { padding-left: 2em; }
.commentlevel-3 { padding-left: 3em; }
.commentlevel-4 { padding-left: 4em; }
.commentlevel-5 { padding-left: 5em; }
.commentlevel-6 { padding-left: 6em; }
.commentlevel-7 { padding-left: 7em; }
.commentlevel-8 { padding-left: 8em; }
.commentlevel-9 { padding-left: 9em; }
.serendipity_comment h4{
    padding:0;
    margin:0;
}
.serendipity_comment .table-cell{
    vertical-align:top;

}
.serendipity_comment div.avatar{
    position:absolute;
}
#entry-comment .serendipity_comment div.content{
    margin-left:75px;
}
.manage_comments{
    margin-bottom:25px;
}
#serendipity_comment .form_button{
    margin:20px 0 0 0;
}
#serendipity_comment .form_button input{
    margin:0 10px 0 0;
}
#contacts{
    padding:20px 0 0 0;
}
#contacts div{
    padding:2px 0;
}
#serendipity_replyTo{
    width: 39%;
    height: 30px;
    font-size: 14px;
}

.content_msg {
    display: none;
}

@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;
    }
    header.main div.mobile {
        display: block;
    }
    header.main .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;
    }
}