/*
Theme Name: APIA Community Counselor 2014
Description: Au Pair in America Community Counselor theme. This is a child theme to Word Press Twenty Twelve theme.
Author: Jose Magana
Template: twentytwelve
Version: 0.4
*/

/* Parent theme styles */
@import url("../twentytwelve/style.css");

/* Foundation Font Icons */
@import url("icons/icons.css");

/* Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");

/* Child Theme Styles */
body {
    background: #f0fafc;
    font-size: 14px;
}
img {
    border: none;
}
#page {
    margin-top: 0;
    padding: 0;
    max-width: 77.1429em;   
}

/*### HEADER ###*/
header.site-header {
    padding: 1em 0;
    line-height: 0.5;
}
header #branding {
    padding: 0 3.2em;
}
header.site-header section {
    background: #f9f9f9;
}
header.site-header section::after,
#branding::after {
    display: block;
    content: " ";
    clear: both;
}
h1.site-title {
    float: left;
}
.site-header h1, .site-header h1 a {
    font-family: "open sans condensed", helvetica, arial, sans-serif;
    color: #589797;
}
header.site-header h1 {
    margin: 0;
    font-size: 2.75em;
    line-height: normal;
}
.site-header h1 a {
    display: inline-block;
    line-height: inherit;
    vertical-align: middle;
}
.site-header h1 img {
    display: block;
    margin: 0 1em 0 0;
    width: 4.25em;
    box-shadow: none;
}
ul#socialLinks {
    float: right;
    line-height: normal;
}
ul#socialLinks, 
.apia-description ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul#socialLinks li {
    display: inline-block;
    margin: 0 0 0 1.75em;
    line-height: normal;
}
ul#socialLinks li:first-child {
    margin-left: 0;
}
#socialLinks a {
    text-decoration: none;
}
#socialLinks span {
    font-size: 2.75em;
    color: #589797;
}
.site-description {
    padding: 1em 3.2em;
    clear: both;
    background: #fff;
    font-style: italic;
    line-height: 1.5;
    color: #9a9a9a;
}
.banner-image-holder, 
.apia-description {
    float: left;
}
.banner-image-holder {
    width: 70%;
}
img.header-image {
    margin: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
}
.apia-description {
    padding: 1% 2%;
    width: 26%;
}
.apia-description h4 {
    margin: 0.75em 0;
    color: #589797;
}
.apia-description p,
.apia-description ul li {
    font-size: 0.875em;
    line-height: 1.4;
}
.apia-description p {
    margin: 0 0 1em;
}
.apia-description ul li {
    margin: 0 0 0.5em;
}
.apia-description ul li a {
    text-decoration: none;
    color: #589797;
}

/*### NAVIGATION ###*/
.main-navigation {
    margin-top: 0;
    font-family: "open sans condensed", helvetica, Arial, sans-serif;
    font-size: 0;
    line-height: 0;
}
#branding + .main-navigation {
    margin-top: 14px;
}
.main-navigation ul.nav-menu, 
.main-navigation div.nav-menu > ul {
    background: #aedcdc;
    border-bottom: none;
    border-top: none;
}
.main-navigation .nav-menu li {
    margin: 0;
    padding: 0;
}
.main-navigation .nav-menu li a {
    display: block;
    padding: 0.5em 0.875em;
    font-size: 18px;
    line-height: normal;
    color: #333;
    border-left: 1px solid #7fc9c9;
}
.main-navigation .nav-menu li.current_page_item > a {
    font-weight: 100;
    color: inherit;
}
.main-navigation .nav-menu li:first-child a {
    border-left: none;
}
.main-navigation .nav-menu li:first-child a span {
    font-weight: bold;
    font-family: foundation-icons;
    color: #589797;
}
.main-navigation .nav-menu li:first-child a:hover {
    color: #589797;
}
.main-navigation .nav-menu li a:hover,
.main-navigation .current_page_item > a:hover {
    background-color: #def1f1;
}
.main-navigation .nav-menu li a:hover, 
.main-navigation .nav-menu li a:focus {
    color: #333;
}
nav.navigation .nav-previous a,
nav.navigation .nav-next a {
    display: block;
    padding: 0.5rem;
    width: 50%;
    max-width: 120px;
    background-color: #43a3ac;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

/*### MAIN CONTENT ###*/
#content {
    padding: 0 3.214em 1.42867em;
}
.entry-header .entry-title {
    color: #589797;
}
.entry-header .entry-title a {
    color: inherit;
}
.entry-header > time {
    display: block;
    margin: 0.75em 0 0;
    font-size: 0.875em;
    color: #888;
}
.post-footer-info .comments-link {
    display: inline;
}
.post-footer-info .footer-tag-list::before,
.post-footer-info .comments-link::before {
    content: " | ";
}
.site-content article {
    border-bottom: 1px solid #ccc;
}
.site-content article .entry-content::after {
    display: block;
    content: " ";
    clear: both;
}
.site-content article .featured-image-thumbnail {
    float: left;
    margin: 0 5% 0 0;
    width: 25%;
}
.site-content article .featured-image-thumbnail + p {
    float: left;
    width: 70%;
}
h2.archive {
    margin-bottom: 1em;
    font-size: 1.25em;
}
.archive-group {
    float: left;
    width: 50%;
}
ul.archive {
    margin-bottom: 2em;
}
ul.archive li {
    margin-bottom: 0.75em;
    line-height: 1.5;
}
.page-header {
    margin-bottom: 1.714em;
    padding-bottom: 0;
    border-bottom: none;
}
.page-header .page-title {
    font-size: 1.57143em;
    font-weight: 400;
    color: #589797;
}
.featured-post {
    margin-bottom: 0.875em;
}

/*### SIDEBAR ##*/
#secondary aside ul {
    list-style: none;
}
#secondary aside ul li {
    margin-left: 1.5rem;
}
.widget-title {
    padding-left: 1rem;
    background: #aedcdc;
    font-family: "open sans condensed", helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    color: #333;
}

/*### LINKS ###*/
a, a:visited,
.apia-description ul li a:visited,
.widget-area .widget a,
.widget-area .widget a:visited,
.entry-content a.read-more, entry-content a.read-more:visited,
.comments-link a, .entry-meta a,
.comments-link a:visited, .entry-meta a:visited,
footer[role="contentinfo"] a, footer[role="contentinfo"] a:visited {
    color: #589797;
}
a:hover, .apia-description ul li a:hover,
.widget-area .widget a:hover,
.entry-content a:hover,
.comments-link a:hover, .entry-meta a:hover,
footer[role="contentinfo"] a:hover {
    color: #2a6496;
    text-decoration: underline;
}

/*### BUTTONS ###*/
input[type="submit"], input[type="button"], article.post-password-required, input[type="submit"], .bypostauthor cite span {
    background: #74c4c5;
    border: 1px solid #69b2b3;
    color: #fff;
}
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active, 
input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active,
article.post-password-required input[type="submit"]:hover, article.post-password-required input[type="submit"]:focus, article.post-password-required input[type="submit"]:active,
.bypostauthor cite span:hover,
nav.navigation .nav-previous a:hover,
nav.navigation .nav-next a:hover {
    background: #3276b1;
    border-color: #285e8e;
    color: #fff;
}
input[type="submit"]:active,input[type="button"]:active,
article.post-password-required input[type="submit"]:active {
    box-shadow: none;
}
input[type="reset"] {
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
}
input[type="reset"]:hover, input[type="reset"]:focus, input[type="reset"]:active {
    background: #ebebeb;
    border-color: #adadad;
    color: #333;
}
input[type="reset"]:active {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
}

@media (max-width: 1024px) {
    body {
        background: #fff;
    }
    body .site {
        box-shadow: none;
        margin-bottom: 0;
    }
    .main-navigation .nav-menu li:first-child a {
        padding-right: 1.375rem;
        padding-left: 1.375rem;
    }
    #content {
        padding: 0 2rem 1rem;
    }
    footer#colophon {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

/*###  ADJUST FOR iPad SIZE DEVICES ###*/
@media (min-device-width: 768px) and (max-device-width: 1024px) {
    .main-navigation .nav-menu li a {
        font-size: 1.1rem;
        padding: 0.875rem;
    }
}

/*## For banner image. Kicks in where the javascript is set to stop.
#### Prevents excessive distortion of the image ##*/
@media (max-width: 800px) {
    header #branding {
        padding: 0 2rem;
    }
    header.site-header h1 {
        font-size: 2.25rem;
    }
    header.site-header h1 img {
        width: 10rem;
        margin: 0 0.5rem 0 0;
    }
    header.site-header section {
        background: none;
    }
    .site-description {
        padding: 0.75rem 2rem;
    }
    .banner-image-holder, 
    .apia-description {
        float: none;
        width: auto;
    }
    .apia-description ul li {
        display: inline-block;
        margin: 0 1rem 1rem 0;
    }
    .apia-description ul li a:hover,
    .apia-description ul li a:active {
        text-decoration: underline;
    }
    .main-navigation ul.nav-menu li a, 
    .main-navigation div.nav-menu > ul li a {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {       
    header.site-header h1 img {
        width: 9rem;
    }
    #socialLinks span {
        font-size: 2.25rem;
    }
    .main-navigation ul.nav-menu, 
    .main-navigation div.nav-menu > ul {
        background: #fff;
    }     
    .main-navigation ul.nav-menu li a, 
    .main-navigation div.nav-menu > ul li a, 
    .menu-toggle, .menu-toggle:hover, .menu-toggle:focus,
    .menu-toggle:active, .menu-toggle.toggled-on {
        background: #009393;
        color: #fff;
    }
    .menu-toggle {
        display: inline-block;
        width: 100%;
        border: none;
        border-radius: 0;
        font-size: 1.375rem;
        font-weight: 500;
    }
    .menu-toggle::before {
        display: inline-block;
        margin-right: 0.5rem;
        content: "\f169";
        font-family: foundation-icons;
    }
    .menu-toggle:hover, .menu-toggle:focus,
    .menu-toggle:active, .menu-toggle.toggled-on {
        box-shadow: none;
    }
    .menu-toggle:hover, .menu-toggle:active{
        opacity: 0.7;
    }
    .main-navigation div.nav-menu > ul,
    .main-navigation ul.nav-menu {
        display: none !important;
        margin: auto;
        width: 90%;
        text-align: center;
    }
    .main-navigation div.nav-menu > ul.toggled-on,
    .main-navigation ul.nav-menu.toggled-on {
        display: block !important;
    }
    .main-navigation .nav-menu li {
        display: block;
        line-height: normal;
    }
    .main-navigation ul.nav-menu li a, 
    .main-navigation div.nav-menu > ul li a {
        padding: 0.5rem;
        border-top: 1px solid #fff;
        border-left: none;
        font-size: 1.375rem;
        line-height: inherit;
        text-decoration: none;
    }
    .main-navigation .nav-menu li:first-child a span {
        font-size: inherit;
        color: #fff;
    }
    .main-navigation .nav-menu li:first-child a:hover span {
        color: #555;
    }
    .main-navigation .nav-menu li:first-child a span::after {
        display: inline-block;
        margin-left: 0.5rem;
        content: "Home";
        font-family: "open sans condensed", helvetica, Arial, sans-serif;
    }
    .archive-group {
        float: none;
        width: auto;
    }
    .widget-title {
        color: #333;
    }
}

@media (max-width: 480px) {
    header.site-header h1 {
        float: none;
        font-size: 2rem
    }
    ul#socialLinks li {
        margin: 0;
        width: 45%;
        text-align: center;
    }
    .site-header h1 a {
        display: block;
        text-align: center;
    }
    .site-header h1 a img {
        display: block;
        margin: auto;
    }
    #content {
        padding: 0 1.5rem 1rem;
    }
    #searchform {
        margin-left: 0.75rem;
    }
    nav.navigation .nav-previous a, nav.navigation .nav-next a {
        width: auto;
    }
    .site-content article .featured-image-thumbnail,
    .site-content article .featured-image-thumbnail + p {
        float: none;
        width: auto;
    }
    .site-content article .featured-image-thumbnail {
        margin: 0 0 1.75rem 0;
    }
    #secondary aside p {
        padding: 0 0.875rem;
    }
}

@media (max-width: 360px) {
    header #branding {
        padding: 0 1.57rem;
    }
    header #branding > img { 
        display: block;
        margin: auto;
    }
    ul#socialLinks {
        float: none;
        margin: auto;
        max-width: 60%;
    }
    ul#socialLinks span {
        font-size: 2rem;
    }
    .apia-description ul li {
        display: block;
        margin: 0;
    }
    .apia-description ul li a {
        display: block;
        padding: 0.5rem;
    }
    .apia-description ul li a:hover,
    .apia-description ul li a:active {
        text-decoration: none;
        background: #e9e9e9;
    }
}