/*
*/
/* 
    Created on : May 17, 2015, 1:24:02 PM
    Author     : Steve Reinert <stephen.reinert@gmail.com>
*/

/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */
body { 
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.off-canvas-wrap, .off-canvas-wrap > .inner-wrap {
    min-height: 100vh;
}

h4 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.bottom-bar{
    /*position: fixed;*/
    bottom: 0px;
    width: 100%;
    margin-bottom: 0px;
}
/*.main-section {
    margin-left: 20px;
    margin-top: 20px;
}*/

H1 { color: green; }
a:link { color:purple; }

.search-li {
    font-weight: bold;
    color: #3388cc;
}

ul.someText li > a {
    font-weight: lighter;
    font-family: Helvetica, san-serif;
    background-color: white;
}

.div-content {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: lighter;
    padding-top: 50px;
}

.headerBar {
    display: table;
    width: 100%;                
}


.brandingTitle, .headerTitle, .button {
    display: table-cell;
    vertical-align: middle;
    width: auto;    
    text-shadow: 0 0 0; 
    font-weight: 700; 
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    line-height: 20px; 
    color: #777;
}

.brandingTitle {
    display: block;
}

.inlineAppButtonSmall {
    max-height: 20px;
}

.inlineAppButtonLarge {
    max-height: 40px;
}

#headerTitle {
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    padding-left: 20px; 
}


/* Stack the two content containers */


/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
    .main { float: left; width: 0%}
    .verticalSeparator { float: left; }
    .blankLeft { float: left}
    .blankRight { float: right }
    #headerTitle { width: 100px; }
}

/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media all and (min-width: 50em){
    .blankLeft { width: 10%; }
    .blankRight { width: 10%; }
    .verticalSeparator { width: 50px; }
    .main { width:50%; }
    #headerTitle { width: 75%; padding-left: 20px; }
    /* You can also tweak any other styles in a breakpoint */
    H1 { color: blue; font-size:1.2em }
}