style.scss

//@import "_normalize";
@import "_util";
@import "_fonts";
@import "_icons";

@viewport{width:device-width}

div,
span {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}
body {
    background: #006648;
    background: image-url('bkgnd-content.jpg') repeat-x scroll left top #cccccc;
    background: linear-gradient(to bottom, #006648 20%,#ffffff 20%,#cccccc 100%);
    margin: 0;
    padding: 0;
    font-family: 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    line-height: 1.2;
}

ul {
    list-style: disc outside;
    margin-top: 0;
}

ul.none {
    list-style: none;
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    background-color: white;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: #333 4px solid;
    border-bottom: #333 4px solid;
    border-left: #333 1px solid;
    border-right: #333 1px solid;
    margin: 0;
    width: 100%;
}
thead tr {
    background-color: #e6e6e6;
    background-color: rgba(195,195,197, 0.1);
    color: #333;
    font-weight: 700;
    text-indent: 2px;
    text-align: left;
}
tbody tr:nth-child(even) {
    background-color: #e0e0d6;
    background-color: rgba(224,224,214,0.3);
}

// tbody tr:nth-child(even) {
//     background-color: #fff
// }
td, th {
    padding: 6px;
    text-align: left;
}
.fulltable {
    width: 100%;
    overflow-x: auto;
    background-color: white;
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-size: 20% 100%, 20% 100%, 10% 100%, 10% 100%;
    background-attachment: local, local, scroll, scroll;
    background-repeat: no-repeat;
    background-image:
    linear-gradient(left, #ffffff, rgba(255, 255, 255, 0)),
    linear-gradient(right, #ffffff, rgba(255, 255, 255, 0)),
    linear-gradient(left, #c3c3c5, rgba(195, 195, 197, 0)),
    linear-gradient(right, #c3c3c5, rgba(195, 195, 197, 0));
}
#main_container {
    @media all and (min-width: 46em){
        background: image-url('header/rotate.php') no-repeat top center;
    }
    @media all and (min-width: 123em){
       background-size: 100%;
    }
    margin: 0 auto;
    padding: 0;
}

a {
    color: #006648;
    text-decoration: underline;
}

a:visited {
    color: #666666;
    text-decoration: underline;
}

a:hover,
a:active {
    text-decoration: none;
}

img {
    border: 0;
}

img a {
    border: 0;
}

.img_right {
    float: right;
    margin: 0 0 10px 25px;
}

.img_left {
    float: left;
    margin: 0 25px 10px 0;
}
.relimage, iframe, object, embed {
    max-width: 100%;
}

.caption {
    font-weight: bold;
    font-size: 12px;
}

.clear {
    clear: both
}

h1 {
    color: #004e2b;
    font: normal 28px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    margin: 0 0 20px;
}

h2 {
    color: #006648;
    font: normal 20px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    //line-height: 1;
    margin: 16px 0;
}

h2.intro {
    color: #006648;
    margin-bottom: -12px;
}

h1 a,
h1 a:visited,
h2 a,
h2 a:visited {
    color: #004e2b;
    text-decoration: none;
}

h1 a:hover,
h1 a:active,
h2 a:hover,
h2 a:active {
    color: #004e2b;
    text-decoration: underline;
}


h3 {
    color: #333;
    font: normal 16px 'PT Sans Bold',Tahoma,Geneva,Arial,sans-serif;
}

h3 a {
    color: #333;
    text-decoration: none;
}

h3 a:hover {
    color: #333;
    text-decoration: underline;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

input {
    font: normal 13px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    color: #333;
}

li {
    //line-height: 1;
    margin: 0;
    padding: 4px 0;
}

.obscure {
    border: 0;
    position: absolute!important;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
}

#header {
    //height: 108px;
    margin: 0 auto;
    padding: 0;
    width: 95%;
    max-width: 1180px;
}

#logo {
    float: left;
    // height: 108px;
    padding: 0;
    width: 50%;
    @media all and (min-width: 41em){
        width: 30%;
    }
    @media all and (min-width: 50em){
        width: 19.270833%; /* 185/960 */
    }
}
#logo img {
    max-width: 100%;
    height: auto;
}
#logo a {
    border: none;
}

#header_links {
    color: #fff;
    float: right;
    font: normal 13px 'PT Sans Bold',Tahoma,Geneva,Arial,sans-serif;

    padding-top: 12px;
    width: 50%;
    @media all and (min-width: 41em){
        //width: 70%;
    }
    @media all and (min-width: 50em){
        width: 80.729167%; /* 775/960 */
    }
}

#links {
    //margin-right: 1.5em;
    text-align: right;
    //width: 50%;
    //margin-left: 47%;

    @media all and (min-width: 50em){
        margin: 18px 0;
        float: left;
        width: 75.612903225806%; /* 586/775 */
    }
}

#links a,
#links a:visited {
    color: #fff;
    font: normal 14px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
   // margin: 0 4px;
    text-decoration: none;
    text-shadow: 2px 2px 3px #333;
}

#links a {
    width: 80%;
    display: block;
    float: left;
    padding: 0.4em 1em 0.4em 1em;
    text-align: left;
    @media all and (min-width: 35em){
        width: 37%;
        text-align: center;
    }
    @media all and (min-width: 50em){
        display: inline;
        float: none;
        width: auto;
        text-align: right;
        padding: 0;
        margin: 0 0 0 0.4em;
       &:after {
            content: "|";
            margin: 0 0 0 0.4em;
        }
        &:last-child:after{
            content: "";
        }
    }
}

#links a:hover,
#links a:active {
    color: #fff;
    text-decoration: underline;
}

#search_cont {
    //height: 41px;
    clear: both;
    //text-align: right;
   // margin-left: 1.806451612903%; /* 14/775 */
    //margin-bottom: 2em;
    //width: 15em;
    @media all and (min-width: 50em){
        width: 22.193548387097%; /* 172/775 */
        float: right;
        clear: none;
    }
}

#search_cont form {
    background: none;
    font-size: 100%;
    margin: 0;
   // max-width: inherit;
    padding: 0;
}

#search_cont form fieldset {
    border: none;
    clear: none;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

fieldset.search {
    border: none;
    //height: 29px;
    width: 100%; /* 172/172 */
    margin: 0 auto;
    padding: 0;
}

fieldset.search input,
fieldset.search button {
    border: none;
    float: left;
}

.search input.box {
    background: rgba(255,255,255, 0.75);
    border-radius: 20px 0 0 20px;
    color: #333;
    height: 24px;
    line-height: 0.9em;
    font-size: 0.9em;
    margin-top: 12px;
    padding: 1px 0.4em 1px 1em;
    //padding: 0 0 0 1em;
    /* padding: 2px 5px 0 10px; */
    //width: 58.139534883721%; /* 100/172 */
    width: 52%;
}

.search button.btn {
    display: inline-block;
    background: #F0F0F0;
    color: #333;
    cursor: pointer;
    //font-family: 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    font-size: 0.9em;
    font-weight: normal;
    line-height: 0.9em;
    height: 26px;
    padding: 0px;
    border-width: 0;
    margin: 0;
    margin: 12px 0;
    //width: 30.232558139535%; /* 52/172 */
    //width: 4em;
    width: 35%;
    max-width: 75px
}

#nav {
    clear: both;
    margin: 0 auto;
    padding: 0;
    width: 95%;
    background: #333;
    overflow: hidden;
    text-align: center;
    position: relative;
    max-width: 1180px;
}

.nav-btn, .close-btn {
    text-indent: 100%;
    text-decoration: none;
    position: absolute;
    height: 1px;
    width: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

//Toggle Navigation
@media all and (max-width: 42em){
    .nav-btn, .close-btn {
        color: #fff;
        top: 0;
        background: #333;
        &:visited{ color: #fff; }
        &:before{
            position: absolute;
            text-indent: 0;
        }
    }
    .nav-btn{
        &:before{
            left: 20%;
            right: 20%;
            top: 0.25em;
            font-size: 2em;
        }
    }
    .close-btn {
        &:before{
            left: 25%;
            right: 25%;
            top: 1em;
        }
    }
    #header_links:target{
        height: auto;
        opacity: 1;
    }
    #header_links:not(:target) {
        height: 0;
        opacity: 0;
        overflow: hidden;
    }
    #header_links:target ~ .close-btn, #header_links:not(:target) ~ .nav-btn,
    #nav:target .close-btn, #nav:not(:target) .nav-btn {
        overflow: hidden;
        margin: 0;
        clip: auto;
        height: 3em;
        width: 3em;
    }
    #header .nav-btn, #header .close-btn {
        right: 2.5%;
        text-align: center;
        background: rgba(51, 51, 51, 0.5);
    }

    #nav .nav-btn, #nav .close-btn{
        right: 0;
    }

    #nav:target {
        background: none;
        #menu{
            height: auto;
            opacity: 1;
        }
    }
    #nav:not(:target) {
        #menu{
          height: 0;
          opacity: 0;
          overflow: hidden;
        }
    }
}
#menu{
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden;
    @media all and (max-width: 42em){
        background: #333;
        margin-top: 3em;
    }
    @media all and (min-width: 42em){
        display: inline-block;
    }
}
#menu li {
    float: left;
    height: auto;
    text-align: center;
    list-style: none;
    margin: 2px 0;
    padding: 0;
    width: 100%;
    &:nth-child(-n+5) a{
        border-bottom: #fff 1px dotted;
    }
    @media all and (min-width: 28em){
        width: 50%;
        &:nth-child(n) a{
            border-bottom: none;
            border-right: none;
        }
        &:nth-child(-n+4) a{
            border-bottom: #fff 1px dotted;
        }
        &:nth-child(odd) a{
            border-right: #fff 1px dotted;
        }
    }
    @media all and (min-width: 42em){
        width: 33%;
        &:nth-child(n) a{
            border-bottom: none;
            border-right: none;
        }
        &:nth-child(3n+1) a{
            border-right: #fff 1px dotted;
        }
        &:nth-child(3n+2) a{
            border-right: #fff 1px dotted;
        }
        &:nth-child(-n+3) a{
            border-bottom: #fff 1px dotted;
        }
    }
    //@media all and (min-width: 69.25em){
    @media all and (min-width: 59em){
        text-align: left;
        width: auto;
        &:nth-child(-n+5) a{
            border-right: #fff 1px dotted;
        }
        &:nth-child(n) a{
            border-bottom: none;
        }
    }
}
#menu li a {
    display: block;
    font: normal 18px 'PT Sans Narrow',Tahoma,Geneva,Arial,sans-serif;
    color: #fff;
    padding: 4px 1.6em;
    text-decoration: none;
    //@media all and (min-width: 69.25em){
    @media all and (min-width: 59em){
        padding-bottom: 0;
    }
}
#menu li a:hover {
    color: #f2ce68
}
#feature_cont {
    background: #DDDCDD;
    margin: 0 auto;
    width: 95%;
    overflow: hidden;
    max-width: 1180px;

    @media all and (min-width:60em){
        background: linear-gradient(to bottom, #DDDCDD 0%,#aaa 100%);
    }
}

#audience {
    font: normal 20px 'PT Sans Bold';
    margin: 0 auto;
    width: 95%;
    overflow: auto;
    @media all and (min-width:60em){
        width: 33%;
        float: left;
    }
}

#audience ul {
    list-style: none;
    color: #222;
    margin: 0; padding: 0;
    @media all and (min-width:60em){
        padding: 10% 5% 0;
    }
}

#audience li {
    float: left;
    text-align: center;
    width: 100%;
    margin: 2px 0;
    &:nth-child(-n+3){
        border-bottom: #333 1px dotted;
    }
    @media all and (min-width: 36em){
        width: 49%;
        &:nth-child(n){
            border-bottom: none;
            border-right: none;
        }
        &:nth-child(2n+1){
            border-right: #333 1px dotted;
        }
        &:nth-child(-n+2){
            border-bottom: #333 1px dotted;
        }
    }
    @media all and (min-width:60em){
        &:nth-child(n){
            border: none;
        }
        &:nth-child(-n+3){
            border-bottom: #333 1px dotted;
        }
        width: 100%;
        text-align: left;
    }
}
#audience a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 4px 1.6em;
    &:hover{
        color: #006648;
        text-shadow: 1px 1px 2px #FCFCFC;
    }
}

#feature {
    float: right;
    //height: 303px;
    //width: 66.666666666667%; //640/960
    width: 100%;
    @media all and (min-width:60em){
        width: 66.666666666667%;
    }
    position: relative;
}
#feature img {
    width: 100%;
    display: block;
}
#feature .description{
    background: #333;
    color: #fff;
    padding: 1em 1.5em;
    @media all and (min-width: 42em){
        background: rgba(51,51,51,.5);
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 1em 1em;
        margin: 1em;
    }
    a {
        color: #fff;
    }
}

#home_cont {
    margin: 0 auto;
    width: 95%; //960
    overflow: auto;
    max-width: 1180px;
}
.ie7 #home_cont{
    overflow: hidden;
}
#home_left {
    background-color: #fff;

    font: normal 14px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    padding: 20px 2.083333333333%; //20/960
    width: 95.8333333%;
    @media all and (min-width:57em){
        width: 62.5%; //600/960
         float: left;
    }
}
#home_left .column_left {
    margin-bottom: 20px;
    padding-bottom: 20px;
    width: 100%;
    @media all and (min-width: 42em){
        border-right: #666 2px dotted;
        padding-bottom: none;
        width: 46%;
    }
}

#home_left .column_right{
   padding-left: 3%;
    width: 100%;
    border-top: #666 2px dotted;
    padding-top: 20px;
    @media all and (min-width: 42em){
        border: none;
        width: 47%;
    }
}

#home_left h2 {
    font-family: 'PT Sans Bold',Tahoma,Geneva,Arial,sans-serif;
    font-weight: normal;
}
#home_left h3 { margin-top: 0 }
#home_left img {
    max-width: 100%;
    height: auto;
}
#home_left #news_cont {
    border-top: #666 2px dotted;
    padding-top: 10px;
    margin-top: 10px;
    overflow: auto;
}
.news_item {
    clear: both;
    margin-bottom: 20px;
    width: 100%;
}
.news_img {
    float: left;
    margin: 0 1.666666666667% 12px 0; //10/600
    width: 15%; //90/600
    max-width: 114px;
}
#home_left .news_img {
    //margin: 10px 0;
}
.news_img img {
    //height: 90px;
    height: auto;
    width: auto;
    max-width: 100%;
    margin-left: 1.666666666667% ;
}
#home_left .news_text {
    //float: right;
    margin: 10px 1.666666666667% 10px 16.33333333333%;
    //margin-left: 3.333333333333%; //20/600
    //width: 81.666666666667%; //490/600
}
.news_text {
    margin-left: 16.33333333333%;
}
.news_item h2 {
    font-size: 16px;
    margin: 0 0 6px 0;
}
#home_left .news_item p { margin: 0 }
#home_right {
    background-color: #442359;
    color: #fff;
   // margin-right: 1.041666666667%; //10/960
    padding: 20px 2.083333333333%; //20/960
    //width: 28.125%; //270/960
    width: 95.8333333%;
    clear: both;
    @media all and (min-width:57em){
        width: 29.166666666667%;
        float: right;
        clear: none;
    }
}
#home_right h2 {
    color: #fff;
    font: normal 38px 'PT Sans Bold',Tahoma,Geneva,Arial,sans-serif;
    line-height: 38px;
    margin: 0;
}
#home_right h3 {
    color: #ccc;
    font: bold 28px 'PT Sans Narrow',Tahoma,Geneva,Arial,sans-serif;
    margin: 0;
}
#home_right p {
    font-size: 14px;
    margin: 2px 0;
}
#home_right a,
#home_right a:visited {
    color: #fff;
    text-decoration: underline;
}
#home_right a:hover { color: #f2ce68 }
#home_right.dark {
    background-color: #333;
}
#home_right.dark h3 {
    color: #fff;
}
#content_cont {
    background-color: #fff;
    margin: 0 auto;
    width: 95%;
    clear: both;
    max-width: 1180px;
}
.three_spec #content_cont {
    background: #fff;
    //background: url(/ui/img/bkgnd-content-three_spec.jpg) repeat-y top left;
}
.onestop #content_cont {
    background: #fff;
   //background: url(/ui/img/bkgnd-content-one_stop.jpg) repeat-y top left;
}

#top_head {
    background-color: #fff;
    clear: both;
    padding: 10px 4.166666666667%; // 40/960
    width: 91.666666666667%; /* 880/960 */
}

#breadcrumbs {
    background-color: #DDDCDD;
    color: #004e2b;
    font: normal 12px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    padding: 8px 4.166666666667%; /* 40/960 */
    text-align: left;
    text-transform: uppercase;
    width: 91.666666666667%; /* 880/960 */
}

#breadcrumbs a,
#breadcrumbs a:visited {
    color: #333;
    text-decoration: underline;
}

#breadcrumbs a:hover,
#breadcrumbs a:active {
    text-decoration: none
}

#content {
    background-color: #fff;
    float: left;
    font: normal 14px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    padding: 20px 4.166666666667%; /* 40/960 */
}

#content img {
    max-width: 100%;
    width: auto;
    height: auto;
}
#content .img_left, #content .img_right {
    max-width: 50%;
    height: auto;
    width: auto;
}
.fb_iframe_widget, .fb_iframe_widget span {
    max-width: 100%;
}

.two_col #content,
.three_spec #content,
.onestop #content {
    width: 91.666666666667%;
    @media all and (min-width: 57.5em){
        width: 31.666666666667%; /* 304/960 */
    }
}

.three_col #content {
    width: 91.666666666667%;
    @include breakpoint(mama-bear){
        width: 51.666666666667%; /* 496/960 */
    }
}

.four_col #content {
    width: 91.666666666667%;
    @media all and (min-width: 58em){
        width: 71.666666666667%; /* 688/960 */
    }
}
.full #content {
    width: 91.666666666667%;
}

.three_col div.half {
    float: left;
    margin-right: 20px;
    width: 100%;
    @media all and (min-width:68em){
        width: 37.9032258%; //188/496
    }
}

.three_col div.third {
    float: left;
    margin-right: 8px;
    width:100%;
    @media all and (min-width:68em){
       width: 27.4193548%; //136/496
    }
}

#content .half {
    float: left;
    margin-right: 3%;
    width: 47%;
}

#content .half-right {
    border-left: #333 1px dotted;
    float: right;
    margin-left: 3%;
    padding-left: 3%;
    width: 44%;
}

#content .third-right {
    border-left: #333 1px dotted;
    float: right;
    margin-left: 3.3%;
    padding-left: 3%;
    width: 27%;
}

ul.half-right,
ul.third-right,
ol.half-right,
ol.third-right {
    font-size: 95%
}

.half-right li,
.third-right li {
    margin-left: 14px;
    padding: 4px 0;
}

.buttons {
    list-style: none;
    padding: 0;
    margin: 0;
}

.buttons li {
    background: #f3f3f3;
    border: 1px solid #a2a2a2;
    border-radius: 10px;
    font-weight: bold;
    margin: 0.75em auto;
    width: 100%;
    position: relative;
    padding: 0;
    &:hover, &:focus{
        border: 1px solid #222;
    }
    @media all and (min-width: 57.5em){
        width: 50%;
    }
}

#mid-col .buttons li {
    width: 95%;
}

#mid-col .buttons {
    margin: 0 auto 2.5em;
}

.buttons a {
    color: #595959;
    display: block;
    font-weight: bold;
    padding: 0.75em;
    text-decoration: none;
}

.buttons a:hover {
    text-decoration: underline;
    color: #222;
}

.buttons [data-icon]:before {
    float: left;
    font-size: 2em;
    margin: -0.25em 0.5em 0 0;
}
.buttons a:hover [data-icon]:before{
        text-decoration: none;
    }
.ie7 #content, .ie7 #home_left{
    padding-right: 0;
}

.job {
    h3 {
        margin-bottom: .5em;
    }
    p, h4 {
        margin: .5em 0;
    }
}

/***** Youtube embed responsive video *****/
.embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.embed-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/***** Google Calendar embed *****/
.cal-month{
    @media all and (max-width:60em){
        display: none;
    }
}
.cal-agenda{
    @media all and (min-width:60em){
        display: none;
    }
}
/***** LiveWhale Calendar embed *****/
.lw_events_header_date {
  clear: both;
}

/******** 8. Sub Page Right Hand Column Styles ********/
#rt_column {
    float: right;
    margin: 0 auto;
}

#rt-col,
#mid-col {
    float: left;
    font: normal 14px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    width: 100%;
    @media all and (min-width: 34.5em){
        width: 50%; /* 288/576 */
    }
}

#rt_column > img {
    height: auto;
    width: 100%;
}
#rt_column img {
    display: block;
    max-width: 100%;
    height: auto;
}

#column_content ul{
    padding-left: 20px;
    word-wrap: break-word;
}

.ie7 #column_content ul {
    margin-left: 0;
}

.two_col #rt_column,
.three_spec #rt_column,
.onestop #rt_column {
    width: 100%;
    @media all and (min-width: 57.5em){
        width: 60%; /* 576/960 */
    }
}

.three_col #rt_column {
    width: 100%;
    @include breakpoint(mama-bear){
       width: 40%; /* 384/960 = 40 with padding = 424/960*/
    }
}

// .onestop #rt_column {
//     margin-bottom: 185px;
// }
.three_spec #rt_column {
    background-color: #e0e0d6;
}
.three_spec #rt-col {
    background-color: #333;
    color: #fff;
    font-weight: 400;
    margin-bottom: 20px;
}
.three_spec #rt-col a {
    color: #fff;
    text-decoration: underline;
}
.three_spec #rt-col a:visited { color: #ccc }
.three_spec #rt-col a:hover { text-decoration: none }
.three_spec #mid-col {
    background-color: #e0e0d6;
    //padding: 20px;
    //width: 248px;
    width: 100%;
}
.onestop #rt-col {
    background-color: #333;
    color: #fff;
    font-weight: 400;
}
.onestop #rt-col a {
    color: #fff;
    text-decoration: underline;
}
.onestop #rt-col a:visited { color: #ccc }
.onestop #rt-col a:hover { text-decoration: none }

.tabnav {
    padding: 0;
}

.tabnav li {
    display: inline;
}

.tabnav li a {
    padding: 3px 10px;
    background: #eee;
    border-bottom: 1px solid #ddd;
    color: #004E2B;
    text-decoration: none;
    font: normal 24px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
}

.tabnav .active {
    border-top: 1px solid #ddd;
    border-bottom: 0;
    background: white;
}
.three_spec #mid-col {
    background-color: #e0e0d6;
    width: 100%;
    @media all and (min-width: 34.5em){
        padding: 20px 3.472222222222%;  //20/576
        width: 43.055555555556%; //248//576
    }
}
.onestop #mid-col {
    background-color: #f6dca5;
    width: 100%;
    @media all and (min-width: 34.5em){
        padding:  20px 3.472222222222%; //20/576
        width: 43.055555555556%; //248/576
     }
}
#mid-col h2 {
    border-top: #333 2px dotted;
    color: #333;
    padding-top: 14px;
}

#mid-col h3{
    padding-left: 20px;
}
@media all and (max-width: 34.5em){
    .onestop #mid-col p {
        padding-left: 20px;
    }
}

.four_col #rt_column {
    width: 100%;
    @media all and (min-width: 58em){
       width: 20%; /* 192/960 */
    }
}

#sub_nav {
    background-color: #333;
    color: #fff;
    font: normal 14px 'PT Sans Bold',Tahoma,Geneva,Arial,sans-serif;
    padding: 20px 0 20px 20px;
    width: auto;
}

.column {
    float: left;
    margin-right: 2.083333333333%; /* 20/960 */
    padding-left: 2.083333333333%; /* 20/960 */
    width: 36.979166666667%; /* 142/384 */
}

.four_col .column {
    float: none;
    padding-left: 0;
    width: 79.1666667%; //152/192
}

.three_spec .column {
    float: none;
    font-size: 18px;
    padding-left: 0;
    width: 152px;
}

.four_col .column ul,
.column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.four_col .column li,
.column li {
    //line-height: 1;
    margin-bottom: 12px;
}

.column a,
.column a:visited {
    color: #fff;
    display: block;
    text-decoration: none;
}

.column a:hover {
    color: #f2ce68;
    text-decoration: underline;
}

#column_content {
    font: normal 14px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    padding: 20px;
    width: auto;
}

// .onestop #bkgnd_photo {
//     background: url(/ui/img/onestop/rotate.php) no-repeat bottom right;
//     background-size: 100% auto;
//     @media all and (min-width: 57.5em){
//         background-size: 60% auto;
//     }
// }
.yellow {
    background: #f6dca5;
    background-image: linear-gradient(to bottom,#f6dca5,#fff);
}

.gray {
    background: #e0e0d6;
    background-image: linear-gradient(to bottom,#e0e0d6,#fff);
}

.green {
    background: #e6efc4;
    background-image: linear-gradient(to bottom,#e6efc4,#fff);
}

.lav {
    background: #f0e3ec;
    background-image: linear-gradient(to bottom,#f0e3ec,#fff);
}
.columns_cont {
    width: 95%
}

.ie7 .columns_cont {
    width: auto;
}

.columns_cont p {
    margin-bottom: 0;
    margin-top: 0;
}

.columns_cont ul {
    padding-left: 20px;
    word-wrap: break-word;
}
.column_left {
    float: left;
    padding-right: 3%;
    width: 47%;
}

#content .column_left {
    border-right: #333 1px dotted;
    width: 46%;
}

.column_right {
    float: left;
    padding-left: 3%;
    width: 47%;
}

#column_content h2 {
    border-top: #333 1px dotted;
    color: #333;
    font: normal 22px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    margin-top: 12px;
    padding-top: 12px;
}

#column_content h2 a {
    color: #333;
    text-decoration: none;
}

#column_content h2 a:hover {
    color: #333;
    text-decoration: underline;
}

.onestop h1 {
    margin: 0;
}

.three_spec #rt-col h2, .onestop #rt-col h2 {
    border-top: #fff 1px dotted;
    color: #ffd425;
    &:first-child {
        border-top: none;
        padding-top: 0;
    }
}

#rt-col #column_content h2 a {
    color: #ffd425;
    text-decoration: none;
}

#rt-col #column_content h2 a:hover {
    color: #ffd425;
    text-decoration: underline;
}

h3.event {
    color: #004e2b;
    font: normal 15px 'PT Sans Bold',Tahoma,Geneva,Arial,sans-serif;
    margin: 14px 0 0;
}

h3.event a,
h3.event a:visited {
    color: #004e2b;
    text-decoration: none;
}

h3.event a:hover,
h3.event a:active {
    text-decoration: underline
}

.aura {
    background: #f0f0f0;
    border-radius: 15px;
    margin-bottom: 20px;
    padding: 10px;
}
.aura ul {
    margin: 0 0 0 18px;
    padding: 0;
}
.aura li {
    //line-height: 1.1;
    margin: 0;
    padding: 2px 0;
}
.aura a {
    display: block;
    color: #006648;
    text-decoration: none;
}
.aura a:hover {
    color: #333;
    text-decoration: underline;
}
.aura a:visited { color: #006648 }
.aura h2 {
    color: #333;
    margin-top: 0;
}

/******** 11. Form Styles  ********/
form {
    background-color: #F0F0F0;
    margin: 0;
    padding: 10px;
    font-size: 100%;
    max-width: 100%
}
form br { display: none; }
form div {
    margin: 5px 0 0;
    padding: 1px 3px;
}
form div label {
    display: block;
    cursor: pointer;
}
form textarea {
    padding: 0;
    width: 100%;
}
.ss-choices {
    padding-left: 20px;
    list-style: none;
}
.ss-q-help {
    margin: 6px 0;
    color: #666;
    text-shadow: 2px 2px 2px #eee;
}
.ss-required-asterisk { color: #CC3300; }
input[type="submit"]{
    background-color: #006648;
    border: none;
    color: #fff;
    width: auto;
    padding: 5px;
    margin: 0 20px 0 0;
    cursor: pointer;
}
input[type="submit"]:hover { background-color: #333; }

/** Library Search **/
.libsearch {
border: 1px solid #006648;
border-top: 2px solid #006648;
}
.libsearch div {
display: flex;
flex-flow: row wrap;
align-content: stretch;
}
.libsearch label {
flex: 1 100%;
}
.libsearch input {
margin: 0;
}
.libsearch .libtext{
flex-grow: 6;
}
.libsearch input[type="submit"]{
flex-grow: 1;
}
/** Check I'm Here Events **/

#check-events{
    clear: both;
    padding: 0;
    list-style: none;
}
.check-event{
    margin: 0 0 1em 0;
    .event-info{
        margin: 0 0 0 6em;
        display: block;
    }
    .start-date{
        display: block;
        text-align: center;
        float: left;
        width: 4em;
        background: #e0e0e0;
        border-right: 1px dotted #333;
    }
    .start-month{
        display: block;
        font-size: 1.2em;
        text-transform: uppercase;
        font-family: "PT Sans Narrow";
    }
    .start-day{
        display: block;
        color: #006648;
        font-size: 1.5em;
    }
    .name, .location, .dates{
        display: block;
    }

}


#footer {
    background: #333;
    clear: both;
    margin: 0 auto;
    padding: 0;
}

#footer_cont {
    background: #333;
    margin: 0 auto;
    padding: 0 0 2.083333333333%; /* 20/960 */
    width: 95%;
    max-width: 1180px;
}

#footer_logo {
    float: left;
    height: 74px;
    padding-left: 2%;
    padding-top: 19px;
    width: 48%;
    @media all and (min-width: 57.5em){
        width: 13.854166666667%; /* 133/960 */
    }
}

#footer_logo a {
    border: none;
}

#footer_contact {
    color: #e0e0e0;
    float: left;
    font: normal 12px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    margin-top: 30px;
    padding-left: 2%;
    width: 48%;
    @media all and (min-width: 57.5em){
       width: 15.3125%; /* 147/960 */
       padding-left: 2.083333333333%; /* 20/960 */
    }
}

#footer_links1, #footer_links2 {
    color: #e0e0e0;
    float: left;
    font: normal 14px 'PT Sans Narrow',Tahoma,Geneva,Arial,sans-serif;
    margin-top: 30px;
    padding-left: 2%;
    width: 48%;
    @media all and (min-width: 57.5em){
        width: 14.583333333333%; /* 140/960 */
        border-left: #e0e0e0 1px dotted;
        padding-left: 1.979166666667%; /* 19/960 */
    }
}

#footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer a,
#footer a:visited {
    color: #e0e0e0;
    display: block;
    //line-height: 1;
    padding-bottom: 10px;
    text-decoration: none;
}

#footer a:hover,
#footer a:active {
    text-decoration: underline
}

#social {
    float: left;
    // height: 40px;
    width: 100%;
    padding-left: 2%;
    @media all and (min-width: 57.5em){
        margin: 6px 0 0 5.208333333333%; /* 50/960 */
        //width: 20.833333333333%; /* 200/960 */
        width: 24%;
    }
}

#social a {
    background: image-url('social-sprite.png') no-repeat 0 0;
    display: block;
    float: left;
    height: 40px;
    width: 40px;
    padding: 0;
    margin-right: 4.5%; /* 5/200 */
    //margin-top: 4.5%;
    margin-top: 1.5em;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#social a.twitter {
    background-position: -40px 0;
}

#social a.youtube {
    background-position: -80px 0;
}

#social a.blogs {
    background-position: -120px 0;
}

#social a.hacu {
    background-position: 0 -80px;
    width: 94px; /* 94/200 */
    // margin-top: 40px;
    clear: both;
    @media all and (min-width: 33em){
        clear: none;
    }
    @media all and (min-width: 82em){
        clear: both;
    }
}
#social a.vip {
    background-position: 0 -160px;
    width: 94px;
}

#social a.facebook:hover {
    background-position: 0 -40px;
}

#social a.twitter:hover {
    background-position: -40px -40px;
}

#social a.youtube:hover {
    background-position: -80px -40px;
}

#social a.blogs:hover {
    background-position: -120px -40px;
}

#social a.hacu:hover {
    background-position: 0 -120px;
}
#social a.vip:hover{
    background-position: 0 -200px;
}

@media all and (max-width: 970px) {
  #trigger_cont { display: none; }
}

#trigger_cont {
    bottom: 50px;
    position: fixed;
    right: 0;
    text-align: right;
    width: 56px;
    z-index: 10003;
}
div.trigger_apply,
div.trigger_visit,
div.trigger_inquire {
    cursor: pointer;
    height: 100px;
    width: 46px;
    border: none;
    outline: none;
    display: block;
}
div.trigger_apply {
    background: image-url('tab-sprite.png') -56px 0 no-repeat;
    margin-left: 10px;
    width: 46px;
    z-index: 10006;
}
div.trigger_visit {
    background: image-url('tab-sprite.png') -56px -200px no-repeat;
    margin-left: 10px;
    width: 46px;
    z-index: 10005;
}
div.trigger_inquire {
    background: image-url('tab-sprite.png') -56px -100px no-repeat;
    margin-left: 10px;
    width: 46px;
    z-index: 10004;
}
div.trigger_apply:hover,
div.trigger_apply:active {
    width: 56px;
    background: image-url('tab-sprite.png') 0 0 no-repeat;
    display: block;
    margin-left: 0;
}
div.trigger_visit:hover,
div.trigger_visit:active {
    width: 56px;
    background: image-url('tab-sprite.png') 0 -200px no-repeat;
    display: block;
    margin-left: 0;
}
div.trigger_inquire:hover,
div.trigger_inquire:active {
    width: 56px;
    background: image-url('tab-sprite.png') 0 -100px no-repeat;
    display: block;
    margin-left: 0;
}
ul.trigger {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
ul.trigger li {
    text-indent: 0;
    margin: 0;
    padding: 0;
}
ul.trigger li li {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: #fff 1px dotted;
}
ul.trigger li ul {
    display: none;
    color: #fff;
    list-style: none;
    margin-top: -100px;
    padding: 12px;
    position: absolute;
    font: bold 13px 'PT Sans',Tahoma,Geneva,Arial,sans-serif;
    font-weight: 400;
    background: #006648;
    opacity: .9;
    width: 156px;
}
ul.trigger li ul.apply {
    right: 56px;
    z-index: 11000;
}
ul.trigger li ul.visit {
    right: 56px;
    z-index: 11001;
}
ul.trigger li ul.inquire {
    right: 56px;
    z-index: 11002;
}
ul.trigger li ul a,
ul.trigger li ul a:visited {
    color: #fff;
    display: block;
    text-decoration: none;
}
ul.trigger li ul a:hover,
ul.trigger li ul a:active { color: #f2ce68 }
.trigger li:hover ul,
li.over ul { display: block }
div.trigger_apply i,
div.trigger_visit i,
div.trigger_inquire i { visibility: hidden }

@media print {
    * {
        background: transparent !important;
        color: black !important;
    }
    @page {
        margin: .5cm;
    }

    #header_links, #nav, #footer, #trigger_cont, #vip_cont, #rt_column, #feature_cont, #home_right, .nav-btn, .close-btn {
        display: none;
    }

    .two_col #content, .three_col #content {
        width: 80%;
    }

    #content {
        background: transparent;
    }

    #content a:after {
        content: " (http://www.adams.edu" attr(href) ")";
        font-size: 80%;
    }

    #content a[href^="http://"]:after, a[href^="https://"]:after {
        content: " (" attr(href) ")";
    }

    #content a[href^="#"]:after {
        display: none;
    }

    #content a, #content a:visited {
        text-decoration: underline;
        word-wrap: break-word;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
    }
}