div.reel {
	height: 90%;
	width: 20%;
	overflow-y: auto;
	text-align: center;
	display: inline-block;
	padding: 1vw;
}

div.reel a {
	padding: 0;
}

div.reel img {
	width: 100%;
	height: auto;
	border: .3vw black solid;
}

div.reel img.selected {
	border: .3vw solid white;
	box-shadow: 0 0 .6vw white;
}

div.display {
	width: 78%;
	height: 90%;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	padding: 1vw;
}

div.display img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border: .3vw black solid;
}

::-webkit-scrollbar {
	width: 5%;
	height: 0;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment
	{
	display: none;
}

::-webkit-scrollbar-track-piece {
	background-color: #3b3b3b;
	-webkit-border-radius: 5px;
}

::-webkit-scrollbar-thumb:vertical {
	-webkit-border-radius: 6px;
	height: 20px;
	/*background: #666 url(scrollbar_thumb_bg.png) no-repeat center;*/
}


/*_________________________________________ PORTRAIT
*/
@media all and (orientation:portrait) {  

div.reel {
	height: 20%;
	width: 99%;
	overflow-x: auto;
	white-space: nowrap;
	padding: 1vh;
}

div.reel>div {
	display: inline-block;
	height: 100%;
}

div.reel img {
	height: 100%;
	width: auto;
	border: .3vh black solid;
}
div.reel img.selected {
	border: .3vh white solid;
	box-shadow: 0 0 .6vh white;
}
 

div.display {
	width: 99%;
	height: 69%;
	vertical-align: top;
	text-align: center;
	padding: 1vh;
}

div.display img {
	border: .3vh black solid;
}
::-webkit-scrollbar {
	width: 0;
	height: 5%;
}


}