/* Site-wide CSS for www.wmsrt.com */

/* Set some defaults */

/*Font*/
@import url(http://fonts.googleapis.com/css?family=Lato);

/*Colors*/
 /*grey*/
 /*red*/
 /*blue*/
 /*white*/



* { margin: 0; padding: 0; }

img { border: 0; }

html { 
    position: relative;
    height: 100%;
}

body {
    line-height: 1.3em;
    font-family: 'Lato', sans-serif;
    color: #333;
    height: 100%;
    background: #FFF url('https://wmsrt.org/uploads/images/layout/water_bkg_1920.jpg') repeat-y center top;
}

h1 { font-size: 1.9em; line-height: 1.9em; }

h2 { font-size: 1.6em;  line-height: 1.6em;}

h3 { font-size: 1.4em;  line-height: 1.4em;}

h4 { font-size: 1.2em; line-height: 1.2em;}

h5 { font-size: 1.2em; font-weight: normal; color: #D42007; }

h6 { font-size: .8em; }

a, a:visited, a:hover { text-decoration: underline; }

ul, ol { list-style-position: outside; margin-left: 25px;}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

/* Structural bits */

div#page {
    background: rgba(255,255,255,0.5);
    max-width: 1000px;
    min-width: 320px;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 0 70px 0;
}

div#header {
    width: 98%;
    margin: 0 auto;
    padding-top: 1em;
    padding-bottom: 1em;
}

div#header-search-social {
    float: right;
}

div#social {
    float: right;
    width: 60px;
    height: 25px;
    margin: 0 0 14px 0;
    padding-right: 5px;
}

div#social .fa {
    float: left;
    color: #333399;
    padding-right: 5px;
}

div#header-search {
    min-width: 183px;
    height: 24px;
    float: right;
    clear: right;
    line-height: 65px;
}

div#content {
    width: 70%;
    margin: 1em auto 3em auto;
}

div#footer {
    width: 96%;
    min-height: 36px;
    margin: 2em auto 0;
    padding: 0 1% 0 1%;
    border-top: solid 5px #333399;
    font-size: .68em;
    font-weight: bold;
    color: #333399;
    text-align: justify;
    padding-top: 1em;
    justify-content: space-between;
    display: flex;
}
/*
#footer span{
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}*/

div#footer h1{
    text-transform:uppercase;
    font-size: 1.5em;
    line-height: 1.8em;
    font-weight: bold;
}

div#footer h2{
    font-size: 1.3em;
    line-height: 1.8em;
    font-weight: bold;
    color: #D42007;
    word-spacing: 1em;
}

div#footer h3{
    font-size: 1.1em;
    line-height: 1.8em;
    font-style: italic;
}

div#footer a, .footerlinks a:visited{
    color:#333;
    text-decoration: none;
    text-align: left;
    text-transform: lowercase;
}

div.footerlinks{
    display:inline-block;
    vertical-align: top;
}

.footerlinks a:hover, #info a:hover{
    text-decoration: underline;
}

div#info{
    display:inline-block;
    vertical-align: top;
    line-height: 1.8em;
}


/* Classes for toggleMenu.js */
/* This is for the responsive drop down menu used for smaller screens */

.show-menu {
    position: relative;
    visibility: visible;
}

.hide-menu {
    position: absolute;
    visibility: hidden;
}

.show-menu-arrow {
    display: none !important;
}

.hide-menu-arrow {
    display: block !important;
}

/*** Page/template specific styling and tweaks ***/

h1#title {
    width: 96%;
    font-weight: normal;
    text-align: center;
    /*margin: 1.25em auto 0;*/
}

img#gg-logo {
    float: right;
    margin: 1em 0 0 0;
}

ul#partners{
    width: 100%;
    margin: 0;
}

ul#partners li{
    list-style-type: none;
    display: inline-block;
    margin: 10px;
}

/* Responsive iFrame */

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Home page stuff */
div#photo-credit {
    text-align: right;
    font-size: .6em;
    margin-right: 1em;
}

.home-content {
    font-size: 2em;
    line-height: 1.5em;
}

div.column {
    height: 40em;
    margin: 0 0 30px 0;
    margin-left: 1%;
    margin-right: 1%;
    font-size: .9em;
}

img.col-img {
    max-width: 100%;
    margin: 0 0 1em 0;
}

div.column p {
    margin-top: 1em;
    height: 12em;
}

a.read-more {
    display: inline-block;
    margin-top: 1em;
    background: #333399;
    color: #FFF;
    text-decoration: none;
    padding: 0.3em 1em;
    font-weight: bold;
}

div#tag-line-and-header {
    margin: 0 0 1.5em 0;
}

div#tag-line-and-header p {
    text-align: center;
    font-size: 2.5em;
    line-height: 2em;
    color: #333399;
}

div#main-image-wrapper {
    max-width: 960px;
    margin: 0 auto;
}

img#main-image {
    display: block;
    width: 100%;
}

/*** Media Queries ***/

/* 4 columns */
@media screen and (min-width: 768px) {
    div.column {
        width: 22.5%;
        margin-left: 1%;
        margin-right: 1.6666666%; 
    }
    div.float-even { float: left; }
    div.float-odd { float: left; }
    div.last { margin-right: 1%; }

    .gallery .img {
        width: 14.65%;
        height: auto;
    }
}

/* Medium background image for tablets */
@media screen and (min-width: 481px) and (max-width: 979px) {

    .gallery .img {
        width: 14.65%;
        height: auto;
    }

}

/* 2 columns */
@media screen and (min-width: 401px) and (max-width: 768px) {
    div.column {
        width: 48%;
        margin-left: 1%;
        margin-right: 1%; 
    }
    div.float-even { float: left; }
    div.float-odd { float: right; }
    .gallery .img {
        width: 23%
    }
}


/*** DEFAULT NAVIGATION FOR LARGER SCREENS ***/
@media screen and (min-width: 481px) {

    span#mobile-menu,
    #menu-down,
    #menu-up {
        display: none !important;
    }

    div#nav {
        /*width: 98%;*/
        min-height: 36px;
        margin: 0 auto 15px auto;
        line-height: 36px;
    }

    div#nav ul li {
        display: inline-block;
        font-weight: bold;
        font-size: .9em;
    }

    div#nav a {
        text-decoration: none;
    }

    .nav-delimiter {
        display: inline-block;
        /*margin: 0 .3em 0 .3em;*/
    }

    div#menuwrapper > ul ul { margin-left: 0; }

    ul#primary-nav {
        visibility: visible;
        position: relative;
        display: inline-block;
        margin-left: 0;
    }

    ul#primary-nav li {
        font-size: 1em;
        list-style-type: none;
    }

    ul#primary-nav > li {
        float: left;
    }

    ul#primary-nav li ul {
        visibility:hidden;
        position:absolute;
        top: 0px;
    }

    ul#primary-nav li:hover { position:relative; }

    ul#primary-nav li:hover > ul { visibility: visible; z-index: 1000; padding: 5px 0; margin-top: 36px; }

    ul#primary-nav a {
        display: inline-block;
        white-space: nowrap;
        margin: 0 10px 0 10px;
        font-weight: bold;
    }

    ul#primary-nav a,
    ul#primary-nav a:visited {
        color: #D42007;
        text-decoration: none;
    }

    ul#primary-nav a:hover { text-decoration: underline; }

    ul#primary-nav a.menuactive, 
    ul#primary-nav a.menuactive:hover, 
    ul#primary-nav a.menuactive:visited {
        color: #333399;
        text-decoration: none;
    }

}

/* SMALL SCREENS: smaller background image for mobile, single column and dropdown nav */
@media screen and (max-width: 480px) {

    .gallery .img {
        width: 48%
    }

    /* Dropdown navigation */

    div#menuwrapper {
        cursor: pointer;
    }

    #menu-down, #menu-up {
        float: right;
        margin: 8px 2% 8px 0;
    }

    span.nav-delimiter {
        display: none;
    }

    span#mobile-menu {
        margin: 0 0 0 2%;
    }

    div#nav {
        width: 98%;
        margin: 0 auto 15px auto;
        font-size: 1em;
        min-height: 36px;
        line-height: 36px;
        font-weight: bold;
    }

    div#nav ul li {
        width: 100%;
        display: block;

    }

    div#nav ul {
        margin: 0 0 0 0;
    }

    ul#primary-nav li {
        list-style-type: none;
    }

    ul#primary-nav li ul {
        margin: 0 0 0 10px;
    }

    ul#primary-nav a {
        display: inline-block;
        width: 96%;
        height: 100%;
        white-space: nowrap;
        padding: 0 2% 0px 2%;
    }

    div#footer{
        display: block; 
        text-align: left;
    }

    div#footer div{
        width: 46%;
        padding: 1%;
    }
}


/* YouTube TinyMCE plugin */
div.mce-video {    padding-bottom: 60%; /* This controls the aspect ratio */  }
div.mce-video iframe {    border: 0;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;  }


/* Stylesheet: site Modified On 2016-04-28 12:35:40 */