/**
 * main.css
 * Author:  jesse  shawl
 * URI:           jshawl.com
 * Contact: jesse@jshawl.com
 * 

 Table of Contents:
   1. Base
   2. Layout
   3. Modules
   4. State
   5. Typography
   6. Theme - Colors n' things that might change
   7. Helpers

 */

/* ==========================================================================
   Base
   ========================================================================== */

body {
    background:#EEEEEE;
}

a {
  text-decoration: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrapper{
    width:90%;
    max-width:1024px;
    margin:auto;
    position: relative;
}
	.wrapper:after { /* always contain floats */
		content: "."; 
		visibility: hidden; 
		display: block; 
		height: 0; 
		clear: both;
	}
	@media all and (max-width:30em){
	    .wrapper{
	        width:95%;
	    }
	}

[class*=grid]{
    float:left;
}
	[class*=grid] img{
    	max-width:100%;
	}
.grid-1-3{
    width:33.3%;
}
.grid-1-4{
    width:25%;
}
.grid-1-4-2{
    width:2%;
}
.grid-2-3 {
    width:66.6%;
}
.grid-3-4 {
    width:75%;
}
.grid-3-4-2 {
    width:98%;
}

	@media all and (max-width:50em){
    	[class*=grid]{
        	width:100%;
    	}
	}

.row{
    clear:both;
}

/* the main site header */
    .site-header .member-log-in{
        float:right;
        padding:.5em 2.25em;
        box-shadow:1px 1px 2px #fff;
        border-radius: 0em 0em .75em .75em;
    }
    .site-header .site-search{
        float:right;
        clear:right;
        margin:2em 0 2em 2em;
    }
    @media all and (max-width: 50em){
        .site-header .site-search{
            margin:0em 0 2em 0;
        }  
    }
    .site-header .site-search input[type='search']{
        border:1px solid #1C1F54;
        padding:.25em .5em;
        outline: none;
    }
    .site-header .site-search button, .siteSearchSubmit {
        background:none;
        border:none;
        padding:0;
        top:3px;
        position: relative;
    }

/* carousel */

.carousel__title{
  display: block;
}

.carousel__subtitle{
    display: block;
    margin-bottom:.5em;
}

.carousel__text--wrapper {
    display: none;
}
.carousel__text--wrapper.active {
    display: block;
}

.carousel__text p{
    margin: 0 0 .5em 0;
}

.carousel__nav li a{
    display: block;
    text-align:center;
    margin:0 0 3px 10px;
    padding:1em;
}
    @media all and (max-width:50em){
        .carousel__nav li a{
            margin-left:0;
        }
    }

/* quick-links 
 * -- the three main areas above site footer
 */

.quick-links h2{
    text-align: center;
    padding-bottom:.5em;
    margin-top:1.5em;
    border-bottom:6px solid #fff;
}

.quick-links .module {
    padding:10px 15px; /* overrides default .module passing */
}

.quick-links ul {
    padding:0 20px 0 20px;
    margin: auto;
}
  .quick-links li {
      border-bottom:2px solid #fff;
      padding:15px 25px;
      position: relative;
  }
      .quick-links li:last-child{
          border:0px solid #fff;
      }

.quick-links .read-more {
    white-space: nowrap;
}

.site-footer{
    padding:2em 0;
    margin-top:2em;
}
    .site-footer .grid-1-3.left{
        text-align:left;
    }
    .site-footer .grid-1-3.center{
        text-align:center;
    }
    .site-footer .grid-1-3.right{
        text-align:right;
    }
    @media all and (max-width:50em){
        .site-footer .grid-1-3.left,.site-footer .grid-1-3.center,.site-footer .grid-1-3.right{
            text-align:left;
        }
    }
    .site-footer span{
        display: block;
        padding:.25em 0;
    }

/* ==========================================================================
   Modules
   ========================================================================== */

.module{ /* .module's are used inside the .grid classes for padding */
    padding:10px;
}

/* icons*/
.icon--microscope:before,
.icon--money:before{
    content:'';
    display: block;
    position: absolute;
    left:-5px;
    background-image: url(../img/icon-sprite.png);
    background-repeat: no-repeat;
    width:22px;
    height:26px;
}

.icon--microscope:before{
        background-position: -25px -1px;
}

.icon--money:before{
        background-position: -1px -1px;
}

.icon--microscopeR:before,
.icon--moneyR:before,
.icon--jobR:before,
.icon--educationR:before,
.icon--researchR:before,
.icon--memberR:before,
.icon--meetingR:before {
    content:'';
    display: block;
    left:-5px;
    background-image: url(../img/icon-sprite.png);
    background-repeat: no-repeat;
    width:22px;
    height:26px;
}

.icon--microscopeR:before{
        background-position: -25px -1px;
}

.icon--moneyR:before{
        background-position: -1px -1px;
}

.icon--jobR:before{
        background-position: -25px -1px;
}

.icon--educationR:before{
        background-position: -1px -1px;
}

.icon--researchR:before{
        background-position: -25px -1px;
}

.icon--memberR:before{
        background-position: -1px -1px;
}

.icon--meetingR:before{
        background-position: -25px -1px;
}


/* 
 * .logo is a <div> which contains the h1 and h2 text 
 */

.logo {
    float: left;
    color:#1c1d54;
    display: block;
    text-decoration: none;
    padding:30px 0 30px 100px;
    background: url(../img/logo.png) no-repeat left center;
    background-size: 87px 87px;
}
    .logo h1{
        font-size:1.5em;
        margin:0;
        font-weight: bold;  
    }
    .logo h2{
        font-size: 1em;
        font-weight:normal;
        font-style: italic;
        margin:0;
        color:#1c1d54;
    }


/**
 *  .nav--primary{} - <ul class='nav--primary'></ul>
 *	Primary Nav - main nav across top of DOM
 */

.nav--primary > li{
    float:left;
    width:16.6%;
    text-align: center;
    position: relative;
}
    .nav--primary > li > a {
        color:#fff;
        text-transform: uppercase;
        font-weight:bold;
        text-decoration: none;
        display: block;
        padding:1em 0;
        text-shadow:1px 1px 3px #3F416F;
        -webkit-transition:color .25s ease;
    }
        .nav--primary > li:hover > a {
            text-shadow:none;
        }

@media all and (max-width:50em){
    .nav--primary > li {
        display:none;
        clear:both;
        text-align:left;
        width: 100%;
    }
    .nav--primary > li.nav-toggle{
        display:block !important;
        text-align:center;
    }
}
@media all and (min-width:51em){
    .nav--primary > li {
        display:block !important;
    }
    .nav--primary .nav-toggle{
        display:none !important;
    }  
}


/**
 *  .nav--secondary{}
 *	Secondary Nav - often found in :hover-induced dropdowns;
 */

 .leftnav {
	max-width: 250px;
 }
.nav--secondary, .topnav ul, .leftnav ul {
    width:auto;
    padding:.75em 0;
    overflow: visible !important;
}

.nav--secondary li a, .topnav ul li a, .leftnav ul li a {
        display: block;
        font-weight: normal;
        text-align: left;
        padding:.25em 1.5em;
        text-decoration: none;
}
.nav--primary .nav--secondary li {
        white-space: nowrap;
        position: relative;
}
/**
 *  .nav--flyout{}
 *      Flyout Nav - Child nav of .nav--secondary{}, pops out to the right
 */     
        
        .nav--flyout{
                position: absolute;
                left:100%;
                top:0;
                display: none;
        }
        .nav--secondary li:hover .nav--flyout{
                display: block;
        }
        
/**
 *  .nav--tertiary{}
 *	Tertiary Nav - Child nav of .nav--secondary{} 
 */

.nav--tertiary, .leftnav ul ul {
	padding-left:2em;
}
.nav--tertiary li a, .leftnav ul ul li a {
    position:relative;
}

.nav--tertiary li a:before,  .leftnav ul ul li a:before {
    content:'>';
    position:absolute;
    left:5px;
}


.masthead-img{
    max-width:98%; /* save a littl room for the border */
    padding:0px 4px 4px 4px;
    background:#fff;
    border-top:none;
    display: block;
    margin:auto;
}

.shadow-box{
    background:#fff;
    /*margin:1em 0;*/
    overflow: hidden;
    box-shadow: 0px 0px 6px rgba(0%, 0%, 0%, .3);
}


/* ==========================================================================
   State
   ========================================================================== */

/* Dropdown states */
.nav--primary .nav--secondary {
    z-index: 999;
    position: absolute;
    left:-999em;
}
    .nav--primary > li:hover > .nav--secondary,
    .nav--primary > li.active > .nav--secondary {
        left:0;
    }
    @media all and (max-width:50em){
        .nav--primary > li:hover > .nav--secondary,
        .nav--primary > li.active > .nav--secondary {
          left:-999em;
        } 
        .nav--primary > li > .nav--secondary.active{
            left:0;
            position:relative;
        }  
    }
/* Responsive Menu Toggle */
.nav--primary .nav-toggle{
    display: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* family */
body, input{
    font-family: 'Open Sans', sans-serif;
}

.carousel__title {
  font-family: 'Open Sans Condensed', sans-serif;
}

@media all and (max-width:65em){
    .quick-links h2 {
        font-family: 'Open Sans Condensed';
    }
}
@media all and (max-width:50em){
    .quick-links h2 {
        font-family: 'Open Sans';
    }
}


/* weight */
.member-log-in{
  font-weight:100;
}

.member-log-in,
.quick-links h2 {
  text-transform: uppercase;
}

h1 {
    font-weight: normal;
}


/* font-size */
body{
  font-size: 100%;
}

.member-log-in,
.carousel__nav li a,
.carousel__text p,
.quick-links li,
.nav--secondary,
.leftnav,
footer {
  font-size:.8em;
}

input[type='search'],
.quick-links h2{
  font-size:1em;
}

.carousel__title{
  font-size:1.2em;
}


/* ==========================================================================
   Theme
   ========================================================================== */

/* dark blue */
h1,
.nav--secondary li:hover > a,
.nav--tertiary li:hover a,
.leftnav ul li a:hover,
.quick-links h2 {
    color:#1C1F54; 
}

.dark {
  background:#1C1F54;
}


/* light blue gradient */
header.site-header, .highlightSBDMeetingResults{
    background: #dee6f2; /* Old browsers */
    background: -moz-linear-gradient(top, #dee6f2 0%, #c2cde0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dee6f2), color-stop(100%,#c2cde0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dee6f2 0%,#c2cde0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dee6f2 0%,#c2cde0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #dee6f2 0%,#c2cde0 100%); /* IE10+ */
    background: linear-gradient(to bottom, #dee6f2 0%,#c2cde0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dee6f2', endColorstr='#c2cde0',GradientType=0 ); /* IE6-9 */
}


/* periwinkle */
.nav--primary > li:hover > a{
  color:#6D78B9; 
}
.pw-border{
  border-bottom:4px solid #6D78B9;
}


/* rusty orange */
h2,
.nav--secondary li a,
.nav--tertiary li a,
.leftnav ul li a,
.topnav ul li a,
.topnav ul ul li a,
.carousel__title, 
.carousel__text p, 
.carousel__subtitle,
.quick-links .read-more,
a, a:hover{
    color:#9C4B15; 
}
.carousel__text a, carousel__text a:hover {
    color: #6D78B9;
}
.carousel__nav li.active a,
.member-log-in {
    background:#9C4B15;
}

.donate {
    background:#669966;
}


/* medium grey */
.carousel__nav li a{
    background:#959595;
}


/* darker grey */
p,
.quick-links li,
.quick-links li a,
.searchResults li a  {
    color:#373737; 
} 


/* grey gradient */
.site-footer{
    background: #bbbbbb; /* Old browsers */
    background: -moz-linear-gradient(top,  #bbbbbb 0%, #747474 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(99%,#747474)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #bbbbbb 0%,#747474 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #bbbbbb 0%,#747474 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #bbbbbb 0%,#747474 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #bbbbbb 0%,#747474 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#747474',GradientType=0 ); /* IE6-9 */  
}


/* white */
.member-log-in,
.member-log-in a,
.site-header a:hover,
.carousel__nav li a,
.site-footer,
.site-footer a{
  color:#fff;
}

/* ==========================================================================
   Helpers
   ========================================================================== */

.cf:after { /* clearfix */
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

.strong{
    font-weight: bold;
}

/* ~~~~~~~~~~~~~~~~~***************** MIKE STYLES *****************~~~~~~~~~~~~~~~~~ */
.right {
        float: right;
}
.left {
        float: left;
}
.issue-column1 a,
.issue-column2 a,
.issue-column3 a
 {
        color: #1C1F54;
}
.issue-column1 a:hover,
.issue-column2 a:hover,
.issue-column3 a:hover {
        color: #6D78B9;
}       
.issue-column1 {
        width: calc(100% - 143px);
        max-width: 517px;
        min-width: 210px;
        float:left;
        padding-left: 20px; /* was padding-right: 30px; */
}
.noLeftPadding {
        padding-left: 0px;
}
@media all and (max-width:399px){
        .issue-column1 {
                padding-left: 0;
                min-width: 230px;
        }
}
.issue-column1 p {
        margin-top: 0;
}

.issue-column2 {
        width: 113px;
        float:left;
        padding-bottom: 20px;
}
.issue-column3 {
        width: 100%;
        float:left;
}
.issue-cover-image a {
        font-size: 11px;
}
.issue-header a{
        /*color: #373737;*/
        font-size: 1.3em;
        border-bottom: 4px solid #FFF;
        text-transform: none;
}
.issue-header strong {
        text-transform: uppercase;
        color: #1C1F54;
}

.issue-title a{
        /*color: #373737;*/
        font-size: 1.3em;
        text-transform: none;
}

.issue-archive {
        margin-bottom: 15px;
}

.issue-navigation {
        padding-top: 10px;
        padding-bottom: 20px;
        font-size: 14px;
        margin-bottom: 15px;
}

.issue-navigation a{
        color: #373737;
}
.issue-content-link {
        display: block;
        float:left;
        padding-bottom: 5px;
}
.issue-content-volInfo {
        font-size: .8em;
        font-weight: bold;
        color: #555;
        margin-bottom: 5px;
}
.issue-content-authors {
        font-size: .8em;
        font-weight: bold;
        color: #555;
        margin-bottom: 10px;
}
.issue-content-description {
        font-size: .8em;
        margin-bottom: 10px;
}

.article-search{
        margin-bottom: 10px;
}

/* Jquery expander Read More */
.read-more a,
.read-less a{
        font-style: italic;
}

/* ==========================================================
   Additions made during development
   ==========================================================*/
.searchResults li {
    padding-bottom: 7px;   
}

.searchResultHighlighted a {
        text-decoration: underline;
}

.search {
	padding: 20px 20px 0;
}

.form-col {
        width: 32%;
        float: left;
        margin-right: 8px;
}

.form-2colA {
        width: 40%;
        float: left;
        margin-right: 8px;
}

.form-2colB {
        width: 55%;
        float: left;
        margin-right: 8px;
}

.form-col .well {
	min-height: 145px;
	margin-bottom: 0;
	max-height: 145px;
	overflow: auto;
}

#search, #resourcesKeyword {
	margin-top: 25px;
}

#search-btn {
	margin-top: 30px;
	font-family: 'Open Sans';
	font-weight: bold;
}

.center {
	text-align: center;
}

.no-margin {
        margin: 0 !important;
}

.btm-margin {
        margin: 0 0 .5em 0 !important;
}

.result-item {
        clear: both;
        min-height: 49px;
        padding: 5px 0;
        border-bottom: solid #555 1px;
        margin: 10px 20px 0 0;
        overflow: hidden;
}
.results-stats {
	float: left;
	line-height: 70px;
	font-size: 14px;
	margin: 0 8px;
}
.results-stats select {
	width: 150px;
	margin-left: 3px;
}

.pagination ul {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.paginationList a:hover, .memberInitial a:hover {
        cursor: pointer;     
}

.ilb {
        display: inline-block;
}

.topMargin {
        margin-top: 7px;
}

.bottomMargin {
        margin-bottom: 15px;
}
.SDBMeetingHeader{
        border-bottom: solid #555 1px;
        padding: 10px 0;
        text-align: center;
        font-size: 20px;
        background: #c2cde0;
        
}

#EducationResourceTypeSelecter {
        width: 280px;
}

.memberInitial {
        padding-right: 7px;
}

.input-resourceDate {
        width: 40px;
        font-size: 12px;
}

#RTKSubmit {
    border: none;
    background: url('/img/search-button.png') no-repeat top left;
    padding: 0 10px 4px 10px;
    margin-left: 10px;
}

.clearBoth {clear:both;}