html{
         height: 100%;
         margin: 0;
         padding: 0;
}

body {
background: #202020;
/*color:  #000000;*/
font-family: helvetica,arial,verdana,sans-serif;
font-size: 120%;
text-align: justify;
height: 100%
}

h1 {
color: #356AA0;
font-family: helvetica,arial,verdana,sans-serif;
font-size: 130%;
font-weight: bold;
margin-top: 10px;
margin-bottom: 40px;
}

h2 {
color: #356AA0;
font-family: helvetica,arial,verdana,sans-serif;
font-size: 110%;
font-weight: bold;
margin-top: 10px;
margin-bottom: 40px;
}

p {
font-family: helvetica,arial,verdana,sans-serif;
margin-top: 20px;
margin-bottom: 20px;
font-size: 1em;
}

/*a:hover { background-color: #f0f0f0}*/
/*a:visited:hover { background-color: #f0f0f0}*/

/* main page */

#container {
	position: absolute;
	top: 50%;
	margin-top: -210px; /* half of wrapper height minus dots on bottom of slidshow */
	left: 0;
	width: 100%;
}

#wrapper {
	margin-right: auto;
	margin-left: auto;
	width: 96%;
	height: 500px;
}

/* navigation bar */

#sidebar {
	position: relative;
	float: left;
	width: 20%;
	height: 100%;
}

#navigation_up {
	position: absolute;
	top : 20px;
}

#navigation_down {
	position: absolute;
	bottom: 40px;
}



#test {
   width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 1.778 */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */

}

#content {
  float: right;
  top : 0;
  width: 80%;
  padding : 0px;
  height: 450px;
}

/* image page */

#image_display {
	position: absolute;
	top: 50%;
	left: 0px;
	float: left;
	top: 0px;
	width: 51%;
	padding: 5% 2%;
	border: 0px;
	margin: 0px;
	height: 80%;
}

#image_display img {
	position: absolute;
	height:80%; 
	border:7px solid #606060;
	right: 20px;
	top: 8%;
}

#text_display {
	position: absolute;
	left: 55%;
	top: 0px;
	bottom: 0px;
	height: 80%;
	color: white;
	float: right;
	width: 41%;
	padding: 5% 2%;
	border: 0px;
	margin: 0px;

}

#text_display span {
	position: absolute;
	bottom: 12%;
	vertical-align: bottom;
}

/* gallery page */

#gallery_container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	
}

#gallery_image_wrapper {
	position: relative;
	width: 160px;
	height: 240px;
	float: left;
	/*border: 5px solid black;*/
}


#gallery_container img {
max-width: 120px;
padding: 5px 20px;
max-height: 170px;
}

#gallery_container span {
display: inline-block;
position: relative;
width: 160px;
max-width: 160px;
padding: 0px 0px 0px 0px;
font-size: 12px;
color: #f0f0f0;
text-align: center;
vertical-align: bottom;
}

#nav_controls {
position: fixed;
bottom: 10px;
height: 48px;
width: 108px;
margin: 0 0 0 -53px  !important;
left: 63px;
z-index: 999;
}

#nav_controls img {
width:48px;
height:48px
}


.bx-wrapper, .bx-viewport {
    height: 100% !important; //provide height of slider
	margin: 0 0 0 0;
	border-color: #202020 !important;
	background: #202020 !important; 
}

.bx-wrapper img {
    margin: 0 auto;
	padding: 0 0 0 0;
	height: 90%;
}

.bx-wrapper .bx-caption {
	position: absolute;
	text-align: center;
	bottom: 0;
	left: 19px !important;
	/*background: #666\9;
	background: rgba(80, 80, 80, 0.75);*/
	background: #202020 !important; 
	width: 87% !important;
	margin: auto;
	bottom: -40px !important;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 0px 0px 20px 10px !important;
}

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 0px #ccc !important;
	-webkit-box-shadow: 0 0 0px #ccc !important;
	box-shadow: 0 0 0px #ccc !important;
	border:  5px solid #fff;
	left: -5px;
	/*background: #fff;*/

	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-prev {
	left: -15px !important;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: -15px !important;
	background: url(images/controls.png) no-repeat -43px -32px;
}