/*!
 * Gridpak Beta CSS
 *
 * Responsive Grid CSS for Ohio University College of Arts and Sciences
 * Author: Will Presley - wpresley@ev.net
 * EV
 */

.cf:before,
.cf:after,
#middle:before,
#middle:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after,
#middle:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf,
#middle {
    *zoom: 1;
}

/* Full width for defaults */
        .mobileHide, #ouws_links {
            display:inherit!important;
        }
        .fullsizeHide {
           display: none;
        }

        .col {
           /* margin-left:2%; */
            padding:0 1%;
        }

        .span_1 {
            width:5.375%;
        }
        .span_2 {
            width:11.75%;
        }
        .span_3 {
            width:18.125%;
        }
        .span_4, .sideBar, .rightBar, .socialBox, .centersBox {
            width:24.5%;
        }
        .span_5{
            width:30.875%;
        }
        .span_6 {
            width:37.25%;
        }
        .span_7, #ouws_logo {
            width:43.625%;
        }
        .span_8 {
            width:50.0%;
        }
        .span_9, #ouws_search {
            width:56.375%;
        }
        .span_10 {
            width:62.75%;
        }
        .span_11{
            width:69.125%;
        }
        .span_12 .mainContent, .insideContent {
            width:75.5%;
        }
        .span_13 {
            width:81.875%;
        }
        .span_14 {
            width:88.25%;
        }
        .span_15 {
            width:94.625%;
        }
        .span_16, #ouwsFooter, #ouwsHeader, .mainWrap, .mainNavWrap, .collegeHeaderWrap, .contentWrapper, #bottom .toolsBox, .breadBox {
            margin:auto;
            max-width:960px;
        }

        #ouwsHeader,
        #top { width: 960px; }

        #middle {
            width: 100%;
            background-color: #f4f3f2;
            border-top: solid 1px #e4e2e0;
        }

        #bottom {
            width: 100%;
            background-color: #fff;
            border-top: solid 1px #e4e2e0;
        }

        #breadBox {
            width: 100%;
            background-color: #f4f3f2;
        }

        .centersBox {
            padding-left: 0;
        }

        .facultyBox, .researchBox {
            width: 25.58%;
        }

        .socialBox {
            width: 24%;
            padding-right: 0;
            margin-left: -3px;
            text-align: center;
        }

        .deptSpotlightLeft {
            width: 66.66%;
        }

        .deptSpotlightRight {
            width: 33.33%;
        }

        .deptSpotlightLeft {
            padding: 0;
        }

        .deptSpotlightRight {
            padding: 0;
        }

        .deptSpotlightLeft .deptSpotlightBox div.col:first-of-type {
            padding: 0 1.8% 0 0;
        }

        .deptSpotlightLeft .deptSpotlightBox div.col:last-of-type {
            padding: 0 1% 0 0.6%;
        }

        .deptSpotlightRight .deptSpotlightBox div.col {
            padding: 0 0 0 3.3%;
        }

        .deptSpotlightBox div.col {
            float: left;
            width: 33.33%;
        }

        .deptSpotlightLeft .deptSpotlightBox div.col {
            width: 50%;
        }

        .deptSpotlightRight .deptSpotlightBox div.col {
            width: 100%;
        }

        .rightBar {
            padding-right: 0 !important;
            padding-left: 15px !important;
            width: 24.7% !important;
        }



        .pageContentWithSidebar .pageContent {
            width: 100%;
        }

        .pageContentWithSidebar,
        .staffWrapper,
        .fullProfileWrapper,
        .rssReedAggregator,
        .formWrapper {
            width: 74.5%;
            padding-right: 2.5% !important;
        }

        .pageContent .staffWrapper {
            width: 100%;
            padding-right: 0 !important;
        }

        .sectionSidebar {
            width: 25.3%;
            display: inline-block !important;
            vertical-align: top;
        }

        #ouws_search {
            padding-top: 22px !important;
        }

        #ouws_spyglass {
            position: relative;
            bottom: 1px;
            margin-right: 1em;
        }

        .bottomBar a div.ouws_SpotlightTitle,
        .bottomBar div.spotlight > h4 {
            font-size: 22px;
        }

        .rightBar .imageImg .imageCaption {
            font-size: 22px;
        }

        .theme-default .nivo-caption {
            font-size: 32px;
        }

        #ouws_logo {
            height: 53px;
        }

        #ouws_logo img {
            max-width: 400px;
            padding: 0 0 0 10px !important;
        }

        /*#ouws_content, */.mainWrap {
            overflow:visible !important;
        }

        .deptHeaderNav:empty {
            display: none;
        }

        .deptHeaderNav {
            background: #FFF;
            border-left: 1px solid #E9E8E6;
            border-right: 1px solid #E9E8E6;
            border-bottom: 1px solid #fff;

        }

        .deptHeaderNav a {
            display: block;
            padding: 10px;
        }

        .deptHeaderNav .imageImg img {
            display: block;
            max-width: 100%;
        }

        .socialBox .imageImg {
            padding: 20px 4px 0 4px;
        }

        .footerSocial .imageImg {
            width: 13%;
        }

        .socialBox img {
            width: 100% !important;
        }

        .deptSpotlightBox .youtubeBox object, .deptSpotlightBox .youtubeBox object embed {
            max-height: 136px;
        }


.row {
    clear: both;
    overflow: auto;
}

.row.col {
    clear: none;
}

 .mobileHide{
        display:none;
}

/* Reusable column setup */
.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
}



    /* 1. 3 Column Grid 0px - 399px
    -----------------------------------------------------------------------------

    Span 1:    32.0%
    Span 2:    66.0%
    Span 3:    100%

    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 0px) and (max-width: 399px) {

        .mobileHide, #ouws_links {
            display:none!important;
        }
        .fullsizeHide {
            display:inherit;
        }

        .col {
            padding:0 1%;
        }

        .span_1 {
            width:32.0%;
        }
        .span_2 {
            width:66.0%;
        }
        .span_3, #top, #ouwsFooter, #ouwsHeader, .bannerWrapper, .collegeHeaderWrap, .collegeBanner, .mainWrap, .mainNavWrap, .contentWrap, .mainContent, .sliderHolder, .rightBar, .bottomBar .col, .insideContent, .deptSpotlightLeft,
    .deptSpotlightRight, .deptSpotlightBox div.col, #bottom .toolsBox, .breadBox {
            margin-left:0;
            width:99% !important;
        }

        #ouws_links_wrapper {
            display: none;
        }

        ul#mainNav {
            width: 99%;
        }

        .rightBar {
            padding: 10px 0 10px 0 !important;
        }

        .rightBar .leftButton {
            float: left;
            max-width: 46%;
            margin-left: 1.7%;
        }

        .rightBar .imageImg img {
            width: 99%;
        }

        .rightBar .rightButton {
            float: right;
            max-width: 46%;
            margin-right: 1.6%;
        }

        .pageContentWithSidebar,
        .staffWrapper,
        .fullProfileWrapper,
        .rssReedAggregator,
        .formWrapper {
            width: 100%;
        }

        .rightBar .imageImg .imageCaption {
            font-size: 14px;
        }

        .sectionSidebar {
            float: none;
            clear: both;
            margin: 0 auto;
            display: block !important;
            width: 75%;
            position: relative;
            top: 20px;
        }

        .theme-default .nivo-caption {
            font-size: 18px;
        }

        #ouws_logo {
            height: 40px !important;
        }

        #ouws_logo img {
            padding: 0 0 0 10px !important;
        }

        .deptHeaderTop {
            padding: 15px 15px 15px 15px;
        }

        .deptHeaderTop img {
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }

        .collegeBanner {
            text-align: center;
        }

        .collegeBanner img {
            max-width: 98%;
            height: auto;
            padding: 0 !important;
            margin: 10px 0 !important;
        }

        .socialBox .imageImg {
            padding: 20px 20px 0 20px;
        }

        .footerSocial .imageImg {
            width: 20%;
        }

        .socialBox {
            margin-top: 20px;
            margin-left: 0;
        }

        .socialBox img {
            width: 80% !important;
        }

        .deptSpotlightBox .youtubeBox p {
            height: 184px;
        }

        .deptSpotlightBox .youtubeBox object, .deptSpotlightBox .youtubeBox object embed {
            max-height: 184px;
        }

        .deptSpotlightLeft,
        .deptSpotlightRight,
        .deptSpotlightLeft .deptSpotlightBox div.col {
            padding: 0 0 0 0 !important;
        }

        .deptSpotlightRight .deptSpotlightBox div.col {
            padding: 0 1% 0 1% !important;
        }

        .pageContent .cas-button.inline-button {
            display: block;
        }

        .pageContent .cas-button.inline-button:last-of-type {
            margin-right: 10px;
        }

    }

    /* 2. 8 Column Grid 400px - 759px
    -----------------------------------------------------------------------------

    Span 1:    10.75%
    Span 2:    23.5%
    Span 3:    36.25%
    Span 4:    49.0%
    Span 5:    61.75%
    Span 6:    74.5%
    Span 7:    87.25%
    Span 8:    100%

    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 400px) and (max-width: 759px) {

        .mobileHide, #ouws_links {
            display:none!important;
        }
        .fullsizeHide {
            display:inherit;
        }

        .col {
           /*  margin-left:1.5%; */
            padding:0 1%;
        }

        .row .col:first-child {
        }



        .span_1 {
            width:11.75%;
        }
        .span_2 {
            width:24.5%;
        }
        .span_3 {
            width:37.25%;
        }
        .span_4, #ouws_logo, #ouws_address, .centersBox, .facultyBox, .researchBox, .socialBox {
            width:50.0%;
        }
        .span_5 {
            width:62.75%;
        }
        .span_6 {
            width:74.5%;
        }
        .span_7 {
            width:88.25%;
        }
        .span_8, #top, #ouwsFooter, #ouwsHeader, .mainWrap, .mainNavWrap, .audienceNav, .contentWrap, .mainContent, .sliderHolder, .rightBar, .insideContent, #bottom .toolsBox, .breadBox {
            margin-left:0;
            width:100% !important;
        }

        ul#mainNav {
            width: 99%;
        }

        .insideContent .deptSpotlightBox a div.ouws_SpotlightTitle,
        .insideContent .deptSpotlightBox div.spotlight > h4 {
            font-size: 20px;
        }

        .deptSpotlightLeft .deptSpotlightBox div.col:first-of-type {
            padding: 0 1% 0 0;
        }

        .deptSpotlightLeft .deptSpotlightBox div.col:last-of-type {
            padding: 0 0 0 1%;
        }

        .deptSpotlightRight .deptSpotlightBox div.col {
            padding: 0 1% 0 1%;
        }

        .bottomBar .centersBox {

        }

        .rightBar {
            padding: 10px 0 10px 0 !important;
        }

        .rightBar .leftButton {
            float: left;
            max-width: 46%;
            margin-left: 1.7%;
        }

        .rightBar .imageImg img {
            width: 99%;
        }

        .rightBar .rightButton {
            float: right;
            max-width: 46%;
            margin-right: 1.6%;
        }

        .socialBox {
            text-align: center;
            margin-top: 33px;
            margin-left: 0;
        }

        .socialBox img {
            width: 80% !important;
        }

        .socialBox .imageImg {
            padding: 20px 12px 20px 12px;
        }

        #ouws_search {
            padding-top: 14px !important;
            float: right !important;
            width:auto !important;
        }

        #ouws_links_wrapper {
            display: none;
        }

        #ouws_spyglass {
            margin-right: .5em;
        }

        .rightBar .imageImg .imageCaption {
            font-size: 26px;
        }

        .bottomBar a div.ouws_SpotlightTitle,
        .bottomBar div.spotlight > h4 {
            font-size: 18px;
        }

        .theme-default .nivo-caption {
            font-size: 26px !important;
        }

        .sidebarContent p, .sidebarContent span {
            font-family: "CartoGothicProLight", Arial, Helvetica, sans-serif;
            font-size: 14px;
        }

        #casHeaderImg {
            max-height: 80px;
        }

        #ouws_logo img {
            padding: 0 0 0 10px !important;
        }

        .deptHeaderTop {
            padding: 0 15px 10px 15px;
        }

        .deptHeaderTop img {
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }

        .collegeBanner img {
            max-width: 100%;
            height: auto;
        }

    }

    /* 3. 16 Column Grid 760px - 959px
    -----------------------------------------------------------------------------

    Span 1:    5.375%
    Span 2:    10.75%
    Span 3:    17.125%
    Span 4:    23.5%
    Span 5:    29.875%
    Span 6:    36.25%
    Span 7:    42.625%
    Span 8:    49.0%
    Span 9:    55.375%
    Span 10:    61.75%
    Span 11:    68.125%
    Span 12:    74.5%
    Span 13:    80.875%
    Span 14:    87.25%
    Span 15:    94.625%
    Span 16:    100%

    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 760px) and (max-width: 959px) {

        .mobileHide, #ouws_links {
            display:inherit;
        }
        .fullsizeHide {
           display: none!important;
        }

        .col {
          /*  margin-left:1.5%;*/
            padding:0 1%;
        }

        .row .col:first-child {
        }


        .span_1 {
            width:5.375%;
        }
        .span_2 {
            width:11.75%;
        }
        .span_3 {
            width:18.125%;
        }
        .span_4, .navWrap {
            width:24.5%;
        }
        .span_5 {
            width:30.875%;
        }
        .span_6 #ouws_logo, #ouws_address {
            width:37.25%;
        }
        .span_7 {
            width:43.625%;
        }
        .span_8 {
            width:50.0%;
        }
        .span_9 {
            width:56.375%;
        }
        .span_10, .audienceNav {
            width:62.75%;
        }
        .span_11 {
            width:69.125%;
        }
        .span_12, .contentWrap, .sliderHolder {
            width:74.5%;
        }
        .span_13 {
            width:81.875%;
        }
        .span_14 {
            width:88.25%;
        }
        .span_15 {
            width:94.625%;
        }
        .span_16, #top, .mainContent, #ouwsFooter, #ouwsHeader, .mainWrap, .mainNavWrap, #bottom .toolsBox, .breadBox {
            margin:auto;
            width:100% !important;
            max-width:960px;
        }

        .bottomBar {
            padding-top: 15px;
        }

        .bottomBar a div.ouws_SpotlightTitle,
        .bottomBar div.spotlight > h4 {
            font-size: 18px;
        }

        .centersBox {
            padding-left: 0;
        }

        .socialBox {
            margin-top: 27px;
        }

        .insideContent .deptSpotlightBox a div.ouws_SpotlightTitle,
        .insideContent .deptSpotlightBox div.spotlight > h4 {
            font-size: 20px;
        }

        .rightBar .imageImg .imageCaption {
            font-size: 15px;
        }

        .theme-default .nivo-caption {
            font-size: 32px;
        }

        #ouws_logo img {
            max-width: 350px;
        }

        #ouws_search {
            padding-top: 18px !important;
        }

        #ouws_content, .mainWrap {
            overflow:visible !important;
        }

    }

    /* 4. 16 Column Grid 960px - Infinity
    -----------------------------------------------------------------------------

    Span 1:    5.375%
    Span 2:    10.75%
    Span 3:    17.125%
    Span 4:    23.5%
    Span 5:    29.875%
    Span 6:    36.25%
    Span 7:    42.625%
    Span 8:    49.0%
    Span 9:    55.375%
    Span 10:    61.75%
    Span 11:    68.125%
    Span 12:    74.5%
    Span 13:    80.875%
    Span 14:    87.25%
    Span 15:    94.625%
    Span 16:    100%

    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 960px) {

        .mobileHide, #ouws_links {
            display:inherit;
        }
        .fullsizeHide {
           display: none!important;
        }

        .col {
           /* margin-left:2%; */
            padding:0 1%;
        }

        .row .col:first-child {
        }



        .span_1 {
            width:5.375%;
        }
        .span_2 {
            width:11.75%;
        }
        .span_3 {
            width:18.125%;
        }
        .span_4, .sideBar, .rightBar, .socialBox, .centersBox {
            width:24.5%;
        }
        .span_5{
            width:30.875%;
        }
        .span_6 {
            width:37.25%;
        }
        .span_7, #ouws_logo {
            width:43.625%;
        }
        .span_8 {
            width:50.0%;
        }
        .span_9, #ouws_search {
            width:56.375%;
        }
        .span_10 {
            width:62.75%;
        }
        .span_11{
            width:69.125%;
        }
        .span_12 .mainContent, .insideContent {
            width:75.5%;
        }
        .span_13 {
            width:81.875%;
        }
        .span_14 {
            width:88.25%;
        }
        .span_15 {
            width:94.625%;
        }
        .span_16, #ouwsFooter, #ouwsHeader, .mainWrap, .mainNavWrap, .collegeHeaderWrap, .contentWrapper, #bottom .toolsBox, .breadBox {
            margin:auto;
            max-width:960px;
        }

        #ouwsHeader,
        #top
            { width: 960px; }

        #middle {
            width: 100%;
            background-color: #f4f3f2;
            border-top: solid 1px #e4e2e0;
        }

        #breadBox {
            width: 100%;
            background-color: #f4f3f2;
        }

        .centersBox {
            padding-left: 0 !important;
        }

        .facultyBox, .researchBox {
            width: 25.58%;
        }

        .socialBox {
            width: 24%;
            padding-right: 0 !important;
            margin-top: 33px;
            margin-left: -4px !important;
            text-align: center;
        }

        .deptSpotlightLeft {
            width: 66.66%;
        }

        .deptSpotlightRight {
            width: 33.33%;
        }

        .deptSpotlightLeft {
            padding: 0;
        }

        .deptSpotlightRight {
            padding: 0;
        }

        .deptSpotlightLeft .deptSpotlightBox div.col:first-of-type {
            padding: 0 1.8% 0 0;
        }

        .deptSpotlightLeft .deptSpotlightBox div.col:last-of-type {
            padding: 0 1% 0 0.6%;
        }

        .deptSpotlightRight .deptSpotlightBox div.col {
            padding: 0 0 0 3.3%;
        }

        .deptSpotlightBox div.col {
            float: left;
            width: 33.33%;
        }

        .deptSpotlightLeft .deptSpotlightBox div.col {
            width: 50%;
        }

        .deptSpotlightRight .deptSpotlightBox div.col {
            width: 100%;
        }

        .rightBar {
            padding-right: 0 !important;
            padding-left: 15px !important;
            width: 24.7% !important;
        }

        #ouws_spyglass {
            position: relative;
            bottom: 1px;
            margin-right: 1em;
        }

        #ouws_search {
            padding-top: 22px !important;
        }

        .bottomBar a div.ouws_SpotlightTitle,
        .bottomBar div.spotlight > h4 {
            font-size: 22px;
        }

        .rightBar .imageImg .imageCaption {
            font-size: 22px;
        }

        .theme-default .nivo-caption {
            font-size: 32px;
        }

        #ouws_logo img {
            max-width: 400px;
            padding: 0 0 0 10px !important;
        }

        .mainWrap {
            overflow:visible !important;
        }

        .rightBar .imageImg img {
            max-width: 208px;
        }

    }

/* Solely to undo a bad bit of padding by OIT */
@media screen and (max-width: 705px) {
    #ouws_search #ouws_searchForm {
        padding: 0 0 0 0 !important;
    }
    #ouws_spyglass {
        vertical-align: middle !important;
    }
}

/* Nudge the horizontal nav in between full size and 8-col */
@media screen and (min-width: 900px) and (max-width: 950px) {
    .mainNav #mainNav {
        width: 94% !important;
    }

    .rightBar .imageImg img {
        max-width: 99%;
    }
}
@media screen and (min-width: 800px) and (max-width: 899px) {
    .mainNav #mainNav {
        width: 84% !important;
    }
}
@media screen and (min-width: 830px) and (max-width: 899px) {
    .rightBar .imageImg img {
        max-width: 99%;
    }
}
@media screen and (min-width: 760px) and (max-width: 799px) {
    .mainNav #mainNav {
        width: 80% !important;
    }
}
@media screen and (min-width: 760px) and (max-width: 829px) {
    .rightBar .imageImg img {
        max-width: 98.5%;
    }
}



@media screen and (min-width: 400px) and (max-width: 550px) {
    .pageContentWithSidebar,
    .staffWrapper,
    .fullProfileWrapper,
    .rssReedAggregator,
        .formWrapper {
        width: 100%;
    }

    .rightBar .imageImg .imageCaption {
        font-size: 16px;
    }

    .sectionSidebar {
        float: none;
        clear: both;
        margin: 0 auto;
        display: block !important;
        width: 75%;
        position: relative;
        top: 20px;
    }

    .bottomBar a div.ouws_SpotlightTitle,
    .bottomBar div.spotlight > h4 {
        font-size: 16px;
    }

    /*.bottomBar .centersBox,
    .bottomBar .facultyBox,
    .bottomBar .researchBox {
        min-height: 305px;
    }*/

    .socialBox {
        margin-top: 24px;
    }

    .socialBox .imageImg {
        padding: 20px 5px 20px 5px;
    }

    .insideContent .deptSpotlightBox a div.ouws_SpotlightTitle,
    .insideContent .deptSpotlightBox div.spotlight > h4 {
        font-size: 18px;
    }

    .deptSpotlightLeft,
    .deptSpotlightRight {
        width: 100%;
    }

    .deptSpotlightLeft .deptSpotlightBox div.col:first-of-type {
        padding: 0 1% 0 0;
    }

    .deptSpotlightLeft .deptSpotlightBox div.col:last-of-type {
        padding: 0 0 0 1%;
    }

    .deptSpotlightRight .deptSpotlightBox div.col {
        padding: 0 1% 0 1%;
    }
}



@media screen and (min-width: 760px) and (max-width: 806px) {

    .sectionSidebar .casSidebarContent span.artLabel {
        font-size: 16px;
        top: 14px;
    }
}

@media screen and (min-width: 551px) and (max-width: 615px) {
    .sectionSidebar .casSidebarContent span.artLabel {
        font-size: 14px;
        top: 16px;
    }
}

/* Fix the searchbar up a little bit */
@media screen and (max-width: 610px) {
    #ouws_logo {
        width: 100%;
        padding-right: 0 !important;
        float: none;
        margin: 0 auto;
        height: 61px;
    }

    #ouws_logo img {
        max-width: 95%;
    }

    #ouws_search {
        float: none !important;
        width: auto;
        max-width: 350px;
        margin: 0 auto !important;
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }

    #ouws_q {
        width: 130px;
        margin-bottom: .5em;
    }

    #ouws_q, #searchType {
        margin-right: 0 !important;
    }

    #ouws_spyglass {
        margin-right: 1px;
    }

    #ouws_searchForm {
        float: none !important;
        padding: 5px 0 0 0 !important;
        margin: 0 auto !important;
        text-align: center;
    }

}