/*
 Theme Name:     Twenty Twelve Child
 Theme URI:      http://www.techytalk.info
 Description:    Twenty Twelve Child
 Author:         Marko Martinović
 Author URI:     http://www.techytalk.info
 Template:       twentytwelve
 Version:        1.0.0
*/

@import url("../twentytwelve/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Removing horizontal scrollbar. */
}

#wpadminbar {
    position: fixed;
}

/* Moving down off-canvas icons when user is logged in wordpress for 46px - height value for #wpadminbar. */
.logged-in label.toggle_nav,
.logged-in label.toggle_sb {
    top: 46px; /* Logged user bar height is 46px. */
    top: 3.285714286rem;
}

.logged-in label.toggle_close_nav,
.logged-in label.toggle_close_sb {
    top: 53px; /* 46px which is height value for #wpadninbar + 7px which is regular top for close icons. */
    top: 3.785714286rem;
}

/* Moving down off-canvas menu and sidebar when user is logged in wordpress. */
.logged-in .main-navigation,
.logged-in .widget-area {
    padding-top: 98px;
    padding-top: 7rem;
}

/* Reducing .site-header padding top value for half on small screens. */
.site-header {
    padding-top: 12px;
    padding-top: 0.857142857rem;
}

.main-navigation,
.widget-area {
    top: 0;
    padding-top: 52px; /* Positioning off-canvas menu and sidebar below off-canvas icons. */
    padding-top: 3.714285714rem;
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0;
    display: block;
    width: 200px;
    height: 100%;
    z-index: 9998; /* Bigger z-index num. assures that this element will be on top when owerlapping with other elements. */
    box-sizing: border-box;
    background-color: #efefef;
}

.main-navigation {
    text-align: left;
    left: -200px; /* Pushing the menu off the canvas. Left position value must be the same as width with negative sign. */
    -webkit-transition: left 0.5s ease-out;
    -moz-transition: left 0.5s ease-out;
    -o-transition: left 0.5s ease-out;
    transition: left 0.5s ease-out;
}

.widget-area {
    padding-bottom: 10px;
    padding-bottom: 0.714285714rem;
    text-align: center;
    right: -200px; /* Pushing the sidebar off the canvas. Right position value must be the same as width of the menu with negative sign. */
    -webkit-transition: right 0.5s ease-out;
    -moz-transition: right 0.5s ease-out;
    -o-transition: right 0.5s ease-out;
    transition: right 0.5s ease-out;
}

label.toggle_nav,
label.toggle_sb,
label.toggle_close_nav,
label.toggle_close_sb {
    top: 0;
    position: fixed;
    color: #2a759b;
    background-color: #efefef;
    font-size: 42px;
    font-size: 3rem; /* 3 x 14 = 42px. */
    z-index: 9998;
    line-height: 28px;
    line-height: 2rem;
}

label.toggle_close_nav,
label.toggle_close_sb {
    position: absolute;
    top: 7px;
    top: 0.5rem;
    font-size: 28px;
    font-size: 2rem; /* 2 x 14 = 28px.*/
}

label.toggle_nav i,
label.toggle_sb i {
    line-height: 52px;
    line-height: 3.714285714rem;
}

label.toggle_nav,
label.toggle_close_sb {
    left: 0;
}

label.toggle_sb,
label.toggle_close_nav {
    right: 0;
}

label.toggle_close_nav {
    right: 7px;
    right: 0.5rem;
}

label.toggle_close_sb {
    left: 7px;
    left: 0.5rem;
}

/* Hiding checkboxes for off-canvas icons and span icons for second level menu. */
input#toggle_nav,
input#toggle_sb,
input[id$="children"] {
    display: none;
}
    
/* Showing the menu when checkbox is checked */
input#toggle_nav:checked + .main-navigation {
    left: 0;
   -webkit-transition: left 0.5s ease-in;
   -moz-transition: left 0.5s ease-in;
   -o-transition: left 0.5s ease-in;
    transition: left 0.5s ease-in;
}

nav.main-navigation ul {
    list-style-type: none;
}

/* Transforming caret icon back to down on hiding/closing second level ul with links. */
label[class$="children"] i {
    -webkit-transition: transform 0.5s ease-out;
    -moz-transition: transform 0.5s ease-out;
    -o-transition: transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}

/* Hiding/closing second level ul with links. */
ul[class$="children"] {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.5s ease-out;
    -moz-transition: max-height 0.5s ease-out;
    -o-transition: max-height 0.5s ease-out;
    transition: max-height 0.5s ease-out;
}

/* Showing ul with second level links when checkbox is checked. */
input[id$="children"]:checked + label[class$="children"] + ul[class$="children"] {
    max-height: 500px;
    -webkit-transition: max-height 0.5s ease-in;
    -moz-transition: max-height 0.5s ease-in;
    -o-transition: max-height 0.5s ease-in;
    transition: max-height 0.5s ease-in;
}

/* Transforming caret icon from down to up on showing second level ul with links. */
input[id$="children"]:checked + label[class$="children"] i {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: transform 0.5s ease-in;
    -moz-transition: transform 0.5s ease-in;
    -o-transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
}

.main-navigation span {
	color: #5e5e5e;
}
.main-navigation span:hover {
	color: #21759b;
}

.main-navigation li {
	margin-top: 0;
}

.main-navigation li a,
.main-navigation li span {
        display: inline-block;
        font-size: 100%;
        text-decoration: none;
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571429rem 0.714286rem;
        text-transform: uppercase;
        white-space: normal;
}

.main-navigation li a:hover,
.main-navigation li span:hover {
        color: #000;
}

.main-navigation li ul li a,
.main-navigation li ul li span {
        display: block;
        font-size: 90%;
        line-height: 2.181818182;
        padding: 8px 10px 8px 15px;
        padding: 0.571429rem 0.714286rem 0.571429rem 1.071429rem;
}

.main-navigation li ul li a:hover,
.main-navigation li ul li a:focus,
.main-navigation li ul li span:hover {
        background-color: #e3e3e3;
        color: #444;
}

/* This code exists for link items in parent theme. Custom wp walker unlinks parent pages, we take this into account as well. */
nav.nav-menu .current-menu-item > span,
nav.nav-menu .current-menu-ancestor > span,
nav.nav-menu .current_page_item > span,
nav.nav-menu .current_page_ancestor > span,
/* Must cater to custom wp walker markup */
nav.nav-menu .current_page_ancestor > label > span {
        color: #636363;
        font-weight: bold;
}

/* Bold current items are set only for min-width 600 in parent theme. We want if for all breakpoints. */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
    color: #636363;
    font-weight: bold;
}

#respond form input[type="text"],
#respond form textarea {
    font-size: 14px;
    font-size: 1rem;
}

/* Showing the off-canvas sidebar when checkbox is checked. */
input#toggle_sb:checked + .widget-area {
    right: 0;
   -webkit-transition: right 0.5s ease-in;
   -moz-transition: right 0.5s ease-in;
   -o-transition: right 0.5s ease-in;
    transition: right 0.5s ease-in;
}

.widget {
    margin-bottom: 28px;
    margin-bottom: 2rem;
    padding: 0 10px;
    padding: 0 0.714286rem;
}

.widget h3 {
    margin-bottom: 14px;
    margin-bottom: 1rem;
}

.widget p,
li,
.textwidget {
    margin-bottom: 0.5rem;
}

.widget input#searchsubmit {
    position: static;
    display: block;
    float: right;
    box-sizing: border-box;
    z-index: auto;
}

div#searchinput-box {
    position: static;
    display: block;
    overflow: hidden;
    padding-right: 0.5em;
    box-sizing: content-box;
    z-index: auto;
}

div#searchinput-box input#s {
    position: static;
    display: inline;
    width: 100%;
    box-sizing: border-box;
}

body .site {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}


section#masthead-top {
    text-align: center;
}

section#masthead-top section {
    margin-top: 24px;
    margin-top: 1.71429rem;
}

@media screen and (min-width: 480px) {
    .main-navigation,
    .widget-area {
        width: 265px;
    }

    .main-navigation {
        left: -265px;
    }
    
    .widget-area {
        right: -265px;
    }
}

@media screen and (min-width: 600px) {
    /* Undo moving down off-canvas menu and sidebar when user is logged in wordpress. */
    .logged-in .main-navigation,
    .logged-in .widget-area {
        padding-top: 0;
    }

    section#masthead-top {
        text-align: initial;
    }

    section#masthead-top hgroup {
        float: left;
    }

    section#masthead-top section {
        margin: 0;
        float: right;
    }
    
    .site-header {
        padding-top: 24px;
        padding-top: 1.71429rem;
    }
    
    .main-navigation {
        width: 100%;
        height: auto;
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        background-color: #ffffff;
        position: static;
        overflow: visible;
        margin-top: 24px;
        margin-top: 1.714285714rem;
        padding: 0;
    }

    .main-navigation li a,
    .main-navigation li span {
        line-height: 3.692307692;
        margin: 0;
        padding: 0;
    }

    label[class$="children"] i {
        display: none;
    }

    /* Hiding second level ul with links. */
    nav.nav-menu > ul > li > ul[class$="children"] {
        display: none;
    }

    /* Showing second level ul with links on li hover. */
    nav.nav-menu > ul > li:hover > ul[class$="children"] {
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 0;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    
    label.toggle_nav,
    label.toggle_sb,
    label.toggle_close_nav,
    label.toggle_close_sb {
        display: none;
    }
    
    .widget-area {
        width: 26.0417%;
        height: auto;
        position: static;
        float: right;
        text-align: left;
        margin: 24px 0 0;
        margin: 1.71429rem 0 0;
        padding: 0;
        overflow: visible;
        z-index: auto;
        background-color: #ffffff;
    }

    .widget {
        margin: 0 0 28px 0;
        margin: 0 0 2rem 0;
        padding: 0;
        box-sizing: content-box;
        z-index: auto;
    }
   
    .devgenii-badge {
        width: 99%;
        margin: 1rem auto 1.5rem auto;
    }
}

a.social {
    display: inline-block;
    width: 64px;
    height: 64px;
    background: url('img/social.png') no-repeat top left;
}

a#social-twitter {
    background-position: 0 -64px;
}

a#social-linkedin {
    background-position: 0 -128px;
}

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
    a.social {
        background: url('img/social@2x.png') no-repeat top left;
        background-size: cover;
    }
}

/* Ads rules by Marko */
div.google-adsense-sidebar ins,
div.google-adsense-horizontal ins {
    background-color: transparent;
    display: block;
    margin: 0 auto;
}

div.google-adsense-horizontal {
    margin-bottom: 24px;
    margin-bottom: 1.71429rem;
}

div.share {
    margin-top: 14px;
    margin-top: 1rem;
}

div.share .share_button{
    margin-bottom: 21px;
    margin-bottom: 1.5rem;
    float: left;
    width: 112px;
    width: 8rem;
}

/* Floats clearing code */
div.share:after{content: ".";  display: block; height: 0; clear: both; visibility: hidden;}
div.share{display: inline-block;}
* html div.share{height: 1%;}
div.share {display: block;}

@media screen and (min-width: 600px) {
    section#masthead-top:after{content: ".";  display: block; height: 0; clear: both; visibility: hidden;}
    section#masthead-top{display: inline-block;}
    * html section#masthead-top{height: 1%;}
    section#masthead-top {display: block;}
}

.wp-pagenavi .extend {
    display: none;
}

.wp-pagenavi .pages {
    display: none;
}

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited, .wp-pagenavi span.current {
    display: block;
    float: left;
    padding: 6px 10px;
    padding: 0.428571429rem 0.714285714rem;
    margin:  0.3rem;
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 1.428571429;
    font-weight: normal;
    color: #7c7c7c;
    background-color: #e6e6e6;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
    border: 1px solid #d2d2d2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
    cursor: pointer;
}

.wp-pagenavi a:hover {
    color: #5e5e5e;
    background-color: #ebebeb;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}

.wp-pagenavi span.current {
    color: #757575;
    background-color: #e1e1e1;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: linear-gradient(top, #ebebeb, #e1e1e1);
    box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
    border-color: transparent;
}

li.page-item-626 {
    display: none;
}

div.devgenii-badge {
    box-sizing: border-box;
    color: #ffffff;
    background-color: #3cadd4;
    padding: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; /*Rounded corners for DevGenii badge*/
}

div.devgenii-content {
    padding: 0.8rem;
    text-align: center;
}

div.devgenii-content img {
    height: 30px;
    width: 30px;
    vertical-align: middle; /*Image vertical align inside a(link)*/
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

div.devgenii-badge div.devgenii-content p,
div.devgenii-badge div.devgenii-content a,
div.devgenii-badge div.devgenii-content a:visited,
div.devgenii-badge div.devgenii-content a:active {
    text-shadow: 1px 1px #0e6685;
    color: #ffffff;
    font-size: 14px;
    font-size: 1em;
}

div.devgenii-badge div.devgenii-content p a {
    font-weight: bold;
}

div.devgenii-badge div.devgenii-content a:hover {
    color: #CBF1FF;
}

/* > direct descendant selector */
div.devgenii-badge div.devgenii-content > a,
div.devgenii-badge div.devgenii-content > a:visited,
div.devgenii-badge div.devgenii-content > a:active,
div.devgenii-badge div.devgenii-content > a:hover {
    text-decoration: none;
    line-height: 30px; /* Goes together width image vertical-align */
    font-size: 21px;
    font-size: 1.5rem; /* 21px */
    margin: 0;
    padding: 0;
}

div.devgenii-badge div.devgenii-content a,
div.devgenii-badge div.devgenii-content p {
    hyphens: none; /*CSS rule for disallowing word breaking*/
}

div.devgenii-badge div.devgenii-content p {
    margin: 0 7px 0;
    margin: 0.5rem 0;
}

/* Match post line height for post top and bottom badges */
#content article > div.devgenii-badge div.devgenii-content p {
    line-height: 1.714285714;
}

/* Removes extra space between off-canvas icon and off-canvas sidebar. */
.widget-area aside#twentytwelve-child-devgenii-badge div.devgenii-badge {
    margin-top: 0!important;
}

.post-call-to-action {
    display: block;
    margin: 0 auto 24px auto;
    margin: 0 auto 1.71429rem auto;
    width: 250px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}