#previewWrapper{
width: 500px;
}
#displayContainer {
	width: 500px;
	height: 380px;
	border: 1px solid #999;
	overflow: hidden;
    text-align: center;
}

#outputFrame {
    margin-left: 20px;
    margin-right: 20px;
    height: 380px;
}
#displayContainer {
    background-color: #CCC;
}
#outputElm {
    display: table-cell;
    height: 380px;
    vertical-align: middle;
    /*background-color: #FFF;*/
}
#outputElm img {
    vertical-align: middle;
    max-width: 460px;
}
#outputElmRight {
    display: table-cell;
    height: 380px;
    vertical-align: middle;
    background-color: #FFF;
    position: relative;
}
#outputElmRight img {
    vertical-align: middle;
    max-width: 460px;
}
#outputFrameRight { 
    margin-left: 20px;
    margin-right: 20px;
}
#overlayElmLeft, #outputFrameLeft, #outputElmLeft { display: none!important; }
.grabUp {
	cursor: url('../images/icons/grabby1.ico'), auto;
}
.grabDown {
	cursor: url('../images/icons/grabby2.ico'), auto;
}
.autoNavContainer {
	display: inline-block;
	float: right;
}
.autoNavContainer input{
	margin: 0px 3px 0px 0px;
}
#svgNext {
	margin-left: 3px;
}
.pageNavContainer {
	margin-top: 12px;
}
.thumbContainer {
	display: inline-block;
	width: 100px;
	height: 80px;
	border: 1px solid #999;
	margin-right: 4px;
	padding-top: 5px;
	position: relative;
	vertical-align: top;
}
.thumbContainer:hover {
	border: 1px solid #666;
	cursor: pointer;
}
.thumbContainer.selected, .thumbContainer.selected:hover {
	border: 2px solid #000;
	cursor:auto;
}
.thumbContainer img {
    max-width: 100px;
    max-height: 75px;
}
.thumbNumberDisplay {
	display: none;
	position: absolute;
	top: 55%;
	right: -15px;
	z-index: 10;
	background-color: #333;
	color: #FFF;
	border: 1px solid #000;
	padding: 5px;
}
#tblThumbNavigation {
	width: 100%;
	margin: 20px 0 5px 0;
	height: 91px;
	table-layout:fixed;
}
.tdThumbPagerNav {
	width: 30px; 
	vertical-align: middle; 
	text-align: center
}
#imgThumbPageNext {
	background-image: url('../images/forward_active_NS_lg.png');
	height: 0;
	width: 0;
	padding: 9px 5px;
}
#imgThumbPageNext:hover 
{
	background-image: url('../images/forward_hover_NS_lg.png');
}
#imgThumbPageNext.disabled, #imgThumbPageNext.disabled:hover {
	background-image: url('../images/forward_inactive_NS_lg.png');
}
#imgThumbPagePrev {
	background-image: url('../images/back_active_NS_lg.png');
	height: 0;
	width: 0;
	padding: 9px 5px;
}
#imgThumbPagePrev:hover {
	background-image: url('../images/back_hover_NS_lg.png');
}
#imgThumbPagePrev.disabled, #imgThumbPagePrev.disabled:hover {
	background-image: url('../images/back_inactive_NS_lg.png');
}

#previewTopNavigation {
	height: 30px;
	background-color: #DDD;
	width: 100%;
}
.tdTopNav {
	vertical-align: middle;
	text-align: left;
	padding: 0 10px 0 10px;
}
.tdTopNav.tdPager {
	text-align: right;
}

.pagerButton {
	height: 0px;
	width: 0px;
	padding: 12px 12px;
	background-repeat: no-repeat;
}
#txtCurrentPage {
	width: 20px;
	height: 20px;
	background-color: transparent;
	margin-right: 5px;
	border: 1px solid #666;
}
#imgPagerNext {
	background-image: url('../images/forward_active.png');
	vertical-align: middle;
	margin-left: 5px;
}
#imgPagerNext:hover 
{
	background-image: url('../images/forward_hover.png');
}
#imgPagerNext.disabled, #imgPagerNext.disabled:hover {
	background-image: url('../images/forward_inactive.png');
}
#imgPagerPrev {
	background-image: url('../images/back_active.png');
	vertical-align: middle;
	margin-right: 5px;
}
#imgPagerPrev:hover {
	background-image: url('../images/back_hover.png');
}
#imgPagerPrev.disabled, #imgPagerPrev.disabled:hover {
	background-image: url('../images/back_inactive.png');
}
#imgZoomOut {
	background-image: url('../images/zoomout_active.png');
	vertical-align: middle;
	margin-right: 5px;
}
#imgZoomOut:hover {
	background-image: url('../images/zoomout_hover.png');
}
#imgZoomOut.disabled, #imgZoomOut.disabled:hover {
	background-image: url('../images/zoomout_inactive.png');
}
#imgZoomIn {
	background-image: url('../images/zoom_active.png');
	vertical-align: middle;
}
#imgZoomIn:hover {
	background-image: url('../images/zoom_hover.png');
}
#imgZoomIn.disabled, #imgZoomIn.disabled:hover {
	background-image: url('../images/zoom_inactive.png');
}

.background-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
}


/* tabs */

.right-tab-well-portrait { /* well for frontside of tabs which can contain text */
    width: 483px;
    height: 20px;
    position: absolute;
    top: 231px;
    left: 61px;
    text-align: left;
    transform: rotate(90deg);
}

.right-tab-well-landscape { /* well for frontside of tabs which can contain text */
    width: 483px;
    height: 20px;
    position: absolute;
    top: 231px;
    left: 228px;
    text-align: left;
    transform: rotate(90deg);
}

.right-tab { /* can contain tab text */
    background-color: white;
    height: 20px;
    padding: 0 2px;
    display: inline-block;
    margin-left: 5px;

    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -khtml-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

.tab-text-well {
    padding-top: 1px;
}
.tab-text {
    color: black;
    overflow: hidden;
}

.tab-text-5 {
    font-size: 8px;
    max-height: 9px;
}
.tab-text-5-one-row {
    font-size: 10px !important;
    min-height: 18px;
    line-height: 16px;
}

.tab-text-8 {
    font-size: 8px;
    max-height: 9px;
}
.tab-text-8-one-row {
    font-size: 10px !important;
    min-height: 18px;
    line-height: 16px;
}

.tab-text-10 {
    font-size: 8px;
    max-height: 9px;
}
.tab-text-10-one-row {
    font-size: 10px !important;
    min-height: 18px;
    line-height: 16px;
}


.tab-empty {
    min-height: 18px;
}

.tab-multiline {
    min-height: 9px;
}