/*Responsive CSS styles for Encyclopedia Virginia*/
/*Prepared by John Rhea*/

html, body, .texture-top, .texture-bottom, .constrain {
    overflow-x: hidden;
}

#vfh-bottom, #lov-bottom, .ref-title {
    display: none;
}
/** Menu toggle **/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 1.5em;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
	width: 200px;
}
.main-navigation li:hover {
    background-color: #396a94;
}

.main-navigation ul li:hover > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul {
	left: 100%;
}

/* Small menu. */
.menu-toggle, .search-toggle {
	display: none;
}
iframe{
	width: 100%;
}

#mobile-site-navigation { display: none; }

/** END MEnu toggle **/



button.menu-toggle, button.search-toggle {
    background-color: #5188b6;
    color: #FFFFFF;
    border: none;
    width: 5em;
    height: 5em;
    font-size: 1.3em;
}
h1.tab_h1{
	margin-left: 3px;
}
div.title.left{
	margin-top: 20px;
	margin-left: 10px;
}
.index section.tab {
width: 100%;
margin-bottom: 0;
}
@media only screen and (max-width: 64em) {
    html, body {
        overflow-x: hidden;
    }
	#myContainer{
		width: 100%;
	}
	.media-detail section.tab-invert .slideshow .wrapper figure figcaption span.zoom {
		left: auto;
		right: 0;
		margin-bottom: 15px;
	}
    body {
        width: 100%;
        max-width: 1040px;
        min-width: 0;
    }
	.bx-wrapper .bx-viewport {
		height: 700px !important;
	}
    .home .features .wrapper, #page-header, header#page-header, #wrapper, .index .texture-top .texture-bottom .constrain, #slideshow {
        width: 100%;
        max-width: 890px;
    }

    footer#main-footer .constrain {
        width: 100%;
        max-width: 940px;
        min-width: 0;
    }
    footer#main-footer {
        padding: 10px 1em 20px;
    }
    .texture-top, .texture-bottom {
        width: 100%;   
    }
    ul.bxslider {
        padding: 0;
         }
    ul.bxslider li{
        list-style-type: none;
        background: none;
    }
    ul.bxslider figure {
        max-width: 890px;
        width: 100%;
        position: relative;
    }
    ul.bxslider figure img {
        float: none;
        margin: auto;
    }
    ul.bxslider figcaption { 
    		position: static;
		width: 96%;
		padding: 2%;
		max-width: 870px;
		height: auto;
		min-height: 180px;
		margin: 0 0 0 -10px;
	}
    .article section.intro, #features {
        max-width: 890px;
        width: 90%;
        padding: 0 5%;
        overflow: visible;
    }
    .article section.article article {
        max-width: 890px;
        width: 94%;
        padding: 3%;
    }
    .article section.article .meta {
        max-width: 890px;
        width: 96%;
        padding: 2% 0;
    }
    .map, span.button.myva {
        display: none;
    }
    #main-content img {
        width: 100%;
        max-width: 100%;
    }
    #main-content #slideshow {
        position: relative;
        overflow: visible;
    }
    #main-content #slideshow img {
        width: 110% !important;
	max-width: 110%
        position: absolute;
        top: 0;
        bottom: 0;
        left: -5%;
        right: -5%;
    }
    #search_results {
        max-width: 695px;
        width: 70%;
        float: left;
        margin-left: 20px;
    }
    #template {
        max-width: 890px;
        width: 90%;
	padding-top: 85px;
    }
    .media-detail section.tab-invert .slideshow .wrapper, .media-detail section.tab-invert .gradient-bottom header .wrapper {
        max-width: 890px;
        width: 94%;
        padding-left: 3%;
        padding-right: 3%;
    }
    .media-detail section.tab-invert .gradient-bottom{
	padding-bottom: 75px;

    }
    div.slideshow.group.resp{
	/*display: none;*/
    }
    div.wrapper.resp{
	display: none;
    }
    div#resp_ss{
	display: block;
    }
    div#resp_ss li{
	margin-left: -35px;
    }
    div.resp.slideshow{
	display: block;
    }
    .media-detail section.tab-invert .slideshow .wrapper article {
        max-width: 365px;
        width: 40%;
    }
    .media-detail section.tab-invert .slideshow .wrapper figure {
        max-width: 500px;
        width: 52%;
        margin-right: 3%;
    }
	.media-detail section.tab-invert .slideshow .wrapper article {
        max-width: 700px;
        width: 100%;
    }
    .media-detail section.tab-invert .slideshow .wrapper figure {
        max-width: 700px;
        width: 100%;
        margin-right: 0;
	margin-bottom: 15px;
        /*margin-top: 5em;*/
    }
    .media-detail section.tab-invert .slideshow .wrapper article {
        float: none;
        position: static;
    }
    .media-detail section.tab-invert .slideshow .wrapper {
        position: relative;`
    }/*
    .slide-carousel h1 {
        position: absolute;
        width: 90%;
        top 0;
        left: 5%;
        z-index: 1000;
    }*/
    #main-content .history img {
        width: 30%;
    }
}

@media only screen and (max-width: 58em) {
	.bx-wrapper .bx-viewport {
		height: 80% !important;
		height: 80vw !important;
	}
}
@media only screen and (max-width: 49em) {
	.bx-wrapper .bx-viewport {
		height: 85% !important;
		height: 85vw !important;
	}
}
@media screen and (max-width: 41em) {
	.menu-toggle,
	.main-navigation.toggled .nav-menu,
	.main-navigation.toggled #top_search, .search-toggle {
		display: block;
	}
	.bx-wrapper .bx-viewport {
		height: 91% !important;
		height: 91vw !important;
	}


	.main-navigation ul, .utility nav, #main-nav, .utility form {
		display: none;
	}
    #mobile-site-navigation { display: block; }
}

/* max-width: 928px */
@media only screen and (max-width: 58em) {
    #vfh, #lov {
        display: none;
    }
    .logos-bottom {
        width: 630px;
        position: relative;
        margin: auto;
        margin-top: 2em;
    }
    #vfh-bottom a {
        height: 17px;
        width: 343px;
    }
    #vfh-bottom {
        background: transparent url("../images/logo-vfh.png") scroll no-repeat 0 0;
        height: 17px;
        width: 343px;
    }
    #lov-bottom {
        background: transparent url("../images/logo-library-of-virginia.png") scroll no-repeat 0 0;
        height: 42px;
        width: 262px;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
    #lov-bottom a {
        height: 42px;
        width: 262px;
    }
    #vfh-bottom, #lov-bottom {
        display: block;
    }
    #slideshow {
        width: 100%;   
    }
    .callout {
        display: none;
    }
    .index .texture-top .texture-bottom .constrain {
        width: 95%;
        padding: 0;
    }
    section.tab {
        background-position: left bottom;
    }
    .constrain .index {
        width: 100%;
        max-width: 650px;
        margin: auto;
    }
    #main-nav .first {
        display: none;   
    }
    footer#main-footer {
        margin-top: 2em;
    }
    footer#main-footer .inline {
        float: none;
        text-align: center;
        margin-bottom: 1em;
    }
    footer#main-footer ul.gap {
        margin: 0;
    }
    footer#main-footer .constrain {
        padding: 0;
    }
    footer#main-footer .social {
        margin: 1em auto;
        width: 60px;
    }
    header#page-header .wrapper #logo {
        margin-left: 10px;
    }
    header#page-header .wrapper .utility {
        right: 10px;
    }
    .media-detail section.tab-invert .gradient-bottom header .tabtitle {
        background-position: 14% top;
    }
    .home .features .wrapper aside.history {
        display: none;
    }
    
}

@media only screen and (max-width: 51em) {
    #page-header nav#main-nav #my-va {
        display: none;
    }
    #search_results {
        width: 60%;
    }
}
/*max-width 784px*/
@media only screen and (max-width: 49em) {
    .index section.tab ul.azlist li, .index section.tab ul.azlist li.last {
/*         float: left; */
        padding: 10px 20px;
        border: solid 1px #afafaf;
        margin: 3px;
        width: 15px;
        text-align: center;
        vertical-align: middle;
        position: relative;
        display: inline-block;
    }
    .index section.tab ul.azlist {
        font-size: 1.5em;
        width: 94%;
        height: 170px;
        margin: 0;
        padding: 2%;
        text-align: center;
        float: none;
        text-align: center;
        vertical-align: baseline;
    }
    .article section.article article section.group p {
        margin-right: 20px;
    }
    .arrow-bubble {
        display: none;   
    }
    .article section.article article section.group aside.article-callout {
        margin: 20px 0 20px 20px;
    }
}
/*max-width 656px*/
@media only screen and (max-width: 41em) {
    .index section.tab ul.azlist {
        height: 215px;
    }
    header#page-header .wrapper .logos {
        float: none;
        margin: 0 auto;
        width: 100%;
        max-width: 281px;
    }
	#main-content #slideshow img{
		max-width; 1000%;
		margin-top: -10px !important;
		width: auto !important;
	}
    header#page-header .wrapper.group {
        overflow: visible;
    }
    #mobile-site-navigation {
        margin-top: -2em;
        position: relative;
    }
    .mobile-nav {
        position: absolute;
        top: 5em + 15px;
        left: 0;
        z-index: 1000;
        background-color: #5188b6;
        color: #FFFFFF;
        width: 70%;
    }
    .mobile-nav li {
        list-style-type: none;
        background: none;
        float: none;
        font-size: 1.5em;
        padding: .5em;
        text-indent: 0;
        border: solid 1px #335e86
    }
    .mobile-nav li + li {
        border-top: none;
    }
    .mobile-nav a {
        color: #FFFFFF;
    }
    header#page-header {
        padding-top: 15px;
        overflow: visible;
    }
    header#page-header .wrapper .utility {
        position: static;
        float: right;
        margin-top: -6.5em;
    }
    .search-toggle {
        position: relative;
        z-index: 10000
    }
    .menu-toggle{
	position: relative;
	z-index: 10000;
    }
    aside {
        padding: .7em;
    }
    #subForm input{
           padding: .65em;
    }
    header#page-header #top_search {
        position: absolute;
        top: 5em + 15px;
        right: 0;
        background-color: #5188b6;
        padding: .5em;
        z-index: 1000;
        border: solid 1px #335e86;
    }
    header#page-header #top_search .button {
        position: relative;
        padding: .6em .55em .4em .55em;
        margin-top: -3px;
        background-position: center 47%;
    }
    header#page-header #top_search input {
        padding: .7em;
        margin: 0;
    }
    .index .col, .index .col.last {
        width: 80%;
        padding: 2% 4%;
        margin: auto;
        float: none;
    }
    #col1 ul, #col2 ul, #col3 ul {
        display: none;
    }
    #col1.toggled ul, 
    #col2.toggled ul, 
    #col3.toggled ul {
        display: block;
    }
    .index .col h2, 
    #entry section h2, 
    .timeline h2, 
    .ref-title {
        padding: 1em;
        border: solid 1px #335e86;
        overflow: visible;
    }
    .index .col h2:after, 
    #entry section h2:after, 
    .timeline h2:after, 
    .ref-title:after {
        content: "";
        width: 0px;
        height: 0px;
        border-top: 12px solid #9a2926;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid transparent;
        float: right;
        margin-top: 5px;
    }
    .index .col.toggled h2:after, 
    #entry section.toggled h2:after, 
    .timeline.toggled h2:after, 
    .toggled .ref-title:after{
        border-top: 12px solid transparent;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #9a2926;
        margin-top: -5px;
    }
    .index .col li {
        font-size: 1.2em;   
    }
    
    .logos-bottom {
        width: 90%;
        margin: 2% 5%;
    }
    #vfh-bottom {
        margin: 0 auto 1em;
    }
    #lov-bottom {
        position: static;
        margin: auto;
    }
    .article section.intro {
        /*padding-top: 2em; */
        padding-top: 5em;
    }
    .article section.intro figure {
        margin: 0 0 20px 20px;
    }
    .contents {
        display: none;
    }
    .article section.article .meta aside {
        min-height: 10px !important;
    }
    section.toggled .section-entry {
        display: block;
    }
    section .section-entry {
        display: none;
        padding: 2px 10px;
    }
    .timeline.toggled ul {
        display: block;
	width: 100%; /* HEDLUND 2/2016 added for responsive timeline width issues*/
    }
    div.timeline{
	margin-top: 0px;
    }
    .timeline ul {
        display: none;
    }
    .ref-title {
        display: block;
    }
    .references{
        display: none;
    }
    .article section.article article .references{
        padding: 10px;
    }
    .article section.article article .categories, .article section.article article .references, .article section.article article .feedback{
        padding-right: 10px;
    }
    .toggled .references {
        display: block;
    }
    .feedback {
        display: none;
    }
    .article section.article .wrapper {
        background: none;
    }
    section.group ul {
        margin-right: 10px;
    }
    #all_facets {
        display: none;
    }
    #search_results {
        width: 89%;
        margin: 0 auto;
        padding: 3%;
    }
    div.gradient-bottom figcaption{
	display: none;
    }
    div#myContainer{
	display: none;
    }
    div#resp_img{
	display: block;
    }
    .share {
        margin: 1em 1em 0 0;
    }
    .blog {
        display: none;
    }
    .home .features .wrapper aside {
        width: 90%;
        padding: 2% 5%;
    }
}
@media only screen and (max-width: 35em) {
	.bx-wrapper .bx-viewport {
		height: 95% !important;
		height: 95vw !important;
	}
	
.index section.tab {
background: none;
}
section.tab .tabtitle {
display: none;
}
}
@media only screen and (max-width: 30em) {
	.bx-wrapper .bx-viewport {
		height: 105% !important;
		height: 105vw !important;
	}
}
@media only screen and (max-width: 28em) {
	.bx-wrapper .bx-viewport {
		height: 115% !important;
		height: 115vw !important;
	}
}
/*max-width 512px*/
@media only screen and (max-width: 32em) {
    header#page-header .wrapper #logo {
        width: 100%;
        max-width: 200px;
        background-size: contain;
        background-position-y: 50%;
    }
    header#page-header .wrapper .logos {
        max-width: 200px;
    }
    .index section.tab ul.azlist {
        height: 265px;
    }
	.bx-wrapper .bx-viewport {
                height: 100% !important;
                height: 100vw !important;
        }
    
}
/*max-width 408px*/
@media only screen and (max-width: 25.5em) {  
    header#page-header .wrapper #logo {
        max-width: 87px;
        background-position-y: 50%;
        background-size: auto;
    }
    header#page-header .wrapper .logos {
        max-width: 87px;
        overflow: hidden;
    }
    .index section.tab ul.azlist {
        height: 265px;
    }
    #search_results {
        width: 85%;
    }
	.bx-wrapper .bx-viewport {
		height: 125% !important;
		height: 125vw !important;
	}
	#vfh-bottom {
    		/*background: transparent url("../images/vfh_cond-logo.png") scroll no-repeat 0 0;*/
    		background: transparent url("../images/logo-vfh.png") scroll no-repeat 0 0;
    		height: 15px;
    		width: 400px;
	}
}
/*max-width 368px*/
@media only screen and (max-width: 23em) {  
    .index section.tab ul.azlist {
        height: 360px;
    }
	.bx-wrapper .bx-viewport {
		height: 135% !important;
		height: 135vw !important;
	}
	.bx-wrapper .bx-controls-direction a {
		top: 40%;
	}
}
@media only screen and (max-width: 20.5em) {
		.bx-wrapper .bx-viewport {
		height: 148% !important;
		height: 148vw !important;
	}
}
/*max-width 296px*/
@media only screen and (max-width: 18.5em) {  
    .index section.tab ul.azlist {
        height: auto;
    }
    button.menu-toggle, button.search-toggle {
        width: 4em;
        height: 5em;
        font-size: 1.1em;
    }
    .mobile-nav {
        width: 100%;
    }
    .bx-wrapper .bx-viewport {
		height: 165% !important;
		height: 165vw !important;
	}
	header#page-header .wrapper .utility {
		margin-top: -5.5em;
	}
	.bx-wrapper .bx-controls-direction a {
		top: 30%;
	}
}
@media only screen and (max-width: 16em) {  
		.bx-wrapper .bx-viewport {
		height: 190% !important;
		height: 190vw !important;
		font-size: 0.95em;
	}
}
@media only screen and (max-width: 14em) {  
	.bx-wrapper .bx-viewport {
		height: 205% !important;
		height: 205vw !important;
		font-size: 0.9em;
	}
	.bx-wrapper .bx-controls-direction a {
		top: 25%;
	}
}
@media only screen and (max-width: 12.5em) {  
		.bx-wrapper .bx-viewport {
		height: 220% !important;
		height: 220vw !important;
		font-size: 0.8em;
	}
}
@media only screen and (max-width: 11em) {  
		.bx-wrapper .bx-viewport {
		height: 240% !important;
		height: 240vw !important;
		font-size: 0.75em;
	}
}
@media only screen and (max-width: 9.5em) {  
		.bx-wrapper .bx-viewport {
		height: 300% !important;
		height: 300vw !important;
		font-size: 0.75em;
	}
}