/*
Theme Name: Patterns
Theme URI: http://www.stpaulmedia.com/
Author: Jonathan Hatch
Author URI: http://www.stpaulmedia.com
Description: Starter Theme for all Saint Paul Media projects. (_S and Bootstrap 3.3.6)
Version: 1.0

*/

/*/////////////////////////////////////////
Colors
Dark Gray: #1a1a1a;
Light Gray: #e4e4e4;
Blue: #019fc4;
Red: #ef3e36;
Orange: #ffb60f;
Green: #c1bb00;
/////////////////////////////////////////*/

/*/////////////////////////////////////////
Project Specific Resets 
/////////////////////////////////////////*/
#page .container {max-width:1200px;}
@media (min-width: 768px) {#page .container{padding-left:25px;padding-right:25px;}}

/*/ Font-Family /*/
html, body {font-family: 'Karla', sans-serif;color: #19303E;}
a {color: #6E9039}
a.button, span.button a {background:#0275d8;color:#FFFFFF;display:inline-block;font-weight:400;line-height:1.2;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select: none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:8px 16px;font-size:1rem;border-radius:.25rem;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
a:hover {text-decoration:none;}
a.skip-link {display:none;}
img {max-width:100%;height:auto;}

/*/ Typography /*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom:20px;font-weight:500;line-height:1.1;}
p, ol, ul {font-size:1rem;margin-bottom:20px;color:#1a181a;line-height:1.4375rem;}
p {margin-bottom:15px;padding-bottom:0;line-height:1.43;}
ol, ul, blockquote {line-height:1.4375rem;margin-bottom:20px;}
ol, ul {padding-left:20px;}
h1, .h1 {font-size: 2.25rem;line-height:1;margin-bottom: 20px;text-transform: uppercase;}
h2, .h2 {
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight:bold;
    text-transform: uppercase;
    color: #3C6E8F;
    border-bottom: 2px solid #C7D3E1;
    margin-bottom: 12px;
    padding-bottom: 4px;
    padding-top:10px;
}
h3, .h3 {font-size:1.3125rem;font-weight:bold;color: #19303E;margin-bottom:6px;line-height:1.1;}
h4, .h4 {font-size:1.125rem;font-weight:700;color: #19303E;margin-bottom:5px;line-height:1.27;}
#umn h4 {color:#ffcc33;}
form {position:relative;height:24px;}
input {border-radius:5px;border:none;}
figure {margin-bottom:20px;background-color: #D8E0E9;}
figcaption {font-size:.875rem;padding: 20px;color: #19303E;line-height:1.21;}

@media (min-width: 768px) {
    .start + h2 {padding-top:0;}
    h2, .h2 {font-size: 1.75rem;padding-top:20px;}
    h3, .h3 {font-size:1.4375rem;margin-bottom:12px;padding-top:10px;}
}
p ~ ul {margin-top:-10px;}
h3 ~ ul {margin-top:0;}

/*////////////////////
//////////////////////
Header
//////////////////////
////////////////////*/
#mobile-menu {width:56px;height:40px;color:#3C6E8F;font-size:48px;background:transparent;border:0;float:right;margin-top:15px;}
#mobile-menu:hover {cursor: pointer;}
#masthead {padding:20px 0 20px 0;}
#masthead a {display:block; float:left;}
.primary-nav-container {position: relative;}
.primary-nav-container #primary-nav {position: absolute;bottom:15px;right:15px;}
#primary-nav ul {list-style:none;text-align:right;text-transform: uppercase;margin:0;padding:0;}
#primary-nav ul a {font-size:1rem;font-weight:700;color:#276598;line-height:1.1875rem;}
form#search-form {margin-top:-2px;}
.search-global {color:#616161;padding:3px 5px;height:24px;font-size:12px;width:100%;font-style:italic;position: relative;}
.search-icon {
    display:block;
    border-radius:0;
    width:25px;
    height:24px;
    background:transparent;
    padding:0;
    position:absolute;
    right:0;
    top:2px;
    content:' ';
}
.search-button {
    display:block;
    color:#666666;
    font-size:18px;
    width:25px;
    height:24px;
    position:absolute;
    right:0;
    top:5px;
    content:' ';
    text-align:left;
    z-index:9;
}
.search-icon:hover, 
.search-button:hover {cursor: pointer;color:#E1E1E1}

@media (min-width: 768px) {
    
}
@media (min-width: 992px) {
    
}

/*////////////////////
//////////////////////
Content
//////////////////////
////////////////////*/
html {height:100%;}
body.search {height:100%;}
.page-header {
    background-color:#3C6E8F;
    color:#FFFFFF;
    margin: 0 0 20px 0;
}
.page-header .container {
    padding-top:40px;
}
.page-title h1 {font-size:1.5rem;border-bottom:0;text-transform:uppercase;font-weight:bold;margin-bottom:20px;}
p.sub-heading {color:#FFFFFF;font-size:1rem;line-height:1.1;font-weight:400;font-style:italic;margin-bottom:6px;padding-bottom:0;}
.page-content {padding-bottom:40px;}
.page-content a {font-weight:bold;text-decoration:none;}
.page-content li {margin-bottom:7px;}
@media (min-width: 768px) {
    .page-title h1 {font-size:2.25rem;margin-bottom:0;}
    p.sub-heading {font-size:1.125rem;}
    .page-header .container {
        background-image: url(/wp-content/themes/spm-x/img/swoosh_blue.svg);
        background-size: auto 130px;   
        background-position: calc(100% - 20px) 20px;
        background-repeat: no-repeat;
        padding-top:80px;
        padding-bottom: 30px;
    }
}
@media (min-width: 992px) {
    .page-header {margin-bottom:40px;}
    .page-header .container {
        background-image: url(/wp-content/themes/spm-x/img/swoosh_blue.svg);
    }
}


/*////////////////////
//////////////////////
Sidebar
//////////////////////
////////////////////*/
.page-nav h4 {
    font-size:1rem;
    text-transform:uppercase;
    background:#914261;
    color:#FFFFFF;
    padding:10px 20px;
    margin-bottom:0;
    font-size:1.25rem;
    font-weight:bold;
    border-top-left-radius: 5px;
    border-top-right-radius:5px;
}
.page-nav ul {
    margin:0;
    padding:15px 20px 20px 10px;
    background:#FFFFFF;
    list-style: none;
    border:1px solid #D8E0E9;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius:5px;
}
.page-nav ul li {padding:10px 20px;font-size:1rem;line-height:1.1875;}
.page-nav ul li:before {
    display:inline-block;
    color: #6E9039;
    margin-left:-12px;
    height:15px;
    width:15px;
    vertical-align:top;
    content: '»';
}
.page-nav ul li:first-child {padding-top:0;}
.page-nav ul li:last-child {padding-bottom:0;}
.page-nav ul li a {color: #19303E;font-weight:bold;}
.page-nav ul li.current_page_item {font-weight:bold;}
@media (min-width: 768px) {
    .page-nav h4 {font-size:1.25rem;line-height:1;}
}
@media (min-width: 992px) {
    .page-nav ul {
        background:#EBEBEB;
    }
}
/*////////////////////
//////////////////////
Footer
//////////////////////
////////////////////*/
#colophon {margin-top:35px;bottom:0;}
#attribution {background: #3C6E8F;border-top:5px solid #5C93BC;padding-top:45px;padding-bottom:10px;bottom:0;}
#attribution p {display:block;font-size:.75em;color:#FFFFFF;width:100%;margin-bottom:0;text-align:center;}
#attribution p a {color:#FFFFFF;font-weight:400;}

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}


/*//////////////////////////////////////////////////////////////////////////////////////
                                Static Page Styles
//////////////////////////////////////////////////////////////////////////////////////*/

/*/////////////////////////////////////////
Homepage
/////////////////////////////////////////*/


@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}


/*/////////////////////////////////////////
404
/////////////////////////////////////////*/

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}


/*/////////////////////////////////////////
Search
/////////////////////////////////////////*/

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}