html,body {
    -webkit-text-size-adjust:100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
    background-color:#4c9cb5;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    margin:0px;
    padding:0px;
    text-align:center;
}
.body-gradient {
    background: url('../img/gradient.png') repeat-x;
    background-size: auto 100%;
}

#container {
    width:2048px; /* Set size of Viewport, container and wrap to 75% of original, works better in mobile safari  */
    height:1448px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    text-align:center;
    /* overflow:hidden;  */
    background-color:#ffffff;
    /* border:1px solid #737373; */
}

.ContainerSpacingClass {
    height:50px; /* Class gets added to container only if not Baker  */
}

#wrap {
    width:2048px;
    height:1448px;
    margin:0 auto;
    position:relative;
    /* min-width:600px;   Can be used to prevent the resizing of the page too much but will also need to limit the overlays */
    /* min-height:450px;   */
    margin-left:auto;
    margin-right:auto;
    background-size: 100% 100%;
    text-align:left;
    overflow:hidden;
    position: relative;
}

#wrap img {
    display: block;
}

.spread  {
    width:100%;
    height:100%;
}
.page-left {
    top:0;
    left:0;
    width:50%;
    height:100%;
    position: absolute;
}
.page-right {
    top:0;
    right:0;
    width:50%;
    height:100%;
    position: absolute;
}

#NavigationBar {
    position: fixed;
    top:7px; left:0;
    width:100%;
    height:35px;
    z-index: 10;
    background-color: #94202b;
    /*border-top:1px solid #737373;
    border-bottom:1px solid #737373;*/
}
#NavigationTools {
    min-width:700px; 
    max-width:2048px;
    margin-left:auto;
    margin-right:auto;
    height:25px;
    padding:6px 5px 4px 5px;
    background-image:url('../img/toolbar_bkg.png');
    background-repeat:no-repeat;
    background-position:right top;
    text-align:left;
    color:#ffffff;
    font-family:Arial,Helvetica,sans-serif;font-size:13px;
}
.NavigationGroup {
    float:left;
    margin:0px 10px;
    height:22px;
    line-height:24px;
}
.NavigationGroup > img {
    cursor:pointer;
}
#NavigationLogo {
    float:right;
    margin:0px 10px;
    height:22px;
}
#NavigationTitle {
    width:165px;
    height:22px;
    line-height:24px;
    text-align:center;
    font-weight:bold;
    margin-left:auto;
    margin-right:auto;
}

#CurrentPage {
    width:24px;
    height:20px;
    border:0;
    text-align:center;
    color:#000000;
    background-color: #ffffff;
}
#CurrentPage::-webkit-outer-spin-button,
#CurrentPage::-webkit-inner-spin-button { -webkit-appearance:none; margin: 0; }
#FakeSubmit {
    display:none; /*  Mobile Safari needs a submit button to put the GO button on the virtual keyboard */
}

#ContentsBar {
    position: fixed;
    top:50px;
    left:0;
    width:100%;
    height:143px;
    z-index: 10;
}
#ContentsMenu {
    min-width:700px;
    max-width:2048px;
    margin-left:auto;
    margin-right:auto;
    height:143px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.9);
    border-top:1px solid #737373;
    border-bottom:1px solid #737373;
    overflow-x:scroll; overflow-y:hidden;
    text-align:left;
    position:relative;
   
    -webkit-overflow-scrolling: touch;
}
.inline {
    display: inline-block;
}
.inline {
    display: inline !ie7;
}

.box{
    width: 160px;
    height: 113px;
    border: solid 1px black;
    margin:6px 1px 0 1px;
}
.title{
    width: 100%;
    height: 16px;
    margin:6px 1px 0px 1px;
	font-size: 14px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-decoration: none;
}



#page-left {
    top:0;
    left:0;
    width:50%;
    height:100%;
    position: absolute;
}
#page-right {
    top:0;
    right:0;
    width:50%;
    height:100%;
    position: absolute;
}





.paging {
    border:0 none;
    margin-top:-75px;
    position:absolute;
    top:50%;
    cursor:pointer;
}
.paging.prev {
    left:-54px;
}
.paging.next {
    right:-54px;
}



.overlay {
    position:absolute;
}
.overlay * {
    /*cursor:pointer;*/
}
.overlay .contents {
    background-color:rgb(255,255,255);
    /*border:0 solid #b7cbe7;*/
    border-color: #fff;
    border-style: solid;
    border-width: 0;
    height:0;
    overflow:hidden;
    position:absolute;
    width:0;
    z-index:1;
    /*box-shadow: 0px 0px 30px #aaa;*/
}
.rgba .overlay .contents {
    background-color:rgba(255,255,255,0.5);
}
.overlay.open .contents img {
    display:block;
}
.overlay > img {
    cursor:pointer;
    position:absolute;
    z-index:3;
}
.overlay.open div {
    z-index:3;
}
.overlay.open > img {
    /*z-index:4;*/
}
/* link */
.overlay.link  {
    padding: 0px;
    border: 0px;
    /*background-color:transparent; */
}
/* iframe */
.overlay.iframe .contents {
    border-color: #0137B3;
    padding: 0px;
    background-color:rgba(255,255,255,0.7);
}
/* text */
.overlay.text .contents {
    border-color: #0137B3;
    cursor:default;
}
/* text and gallery */
.overlay.text .contents img {
    height:100%;
    width:100%;
    opacity: 0.95;
}
/* gallery */
.overlay.gallery .contents img {
    height:100%;
    width:100%;
    cursor:pointer;
    position: absolute;
}
/* video */
.overlay.video .contents {
    overflow: hidden;
    cursor:pointer;
}
.overlay.video.open.fullscreen > img,
.overlay.video.open.fullscreen .contents div.playlist div {
    z-index:1;
}
.overlay.video .video-js {
    z-index:11;
}
.overlay.video .contents div.playlist div {
    /*height: 50px;*/
    overflow: hidden;
    position: relative;
}
.overlay.video .contents div.playlist div img {
    left: 0;
    position: absolute;
    top: 0;
    height:200%;
    width: 100%;
}
.overlay.video .contents div.playlist div img.current,
.overlay.video .contents div.playlist div img:hover {
    bottom:0;
    top: auto;
}
/* words */
.overlay.words .button {
    /*background-image:url(../img/words-button-bg.png);*/
    background-image:url(../img/transparent.png);
    background-repeat: repeat;
}
.overlay.words {
    cursor:pointer;
}
.overlay.words .contents {
    border-color: #0137b3;
}
.overlay.words .contents img {
    width: 100%;
    height: 100%;
    opacity: 0.95;
}
/* transparent words */
.overlay.transparent .contents {
    border: 0;
    border-style:none;
    box-shadow: none;
    background-color:transparent;
    background-color:rgba(255,255,255,0);
}

.hoverer  {
    /*transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s; */
    padding: 0px;
    border: 0px;
    background-color:transparent;
}
.hoverer img:hover, .hovered img{
    background-color:#00aeef;
    /*background-color:rgba(0,174,239,0.25);*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";/* works for IE 8. */
    filter:alpha(opacity=25); /* works for IE 5+. */
    -moz-opacity:0.25; /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    opacity: 0.25; /* The current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
}

.noborder .contents {
    border:0 none;
}
.noshadow .contents {
    box-shadow:none;
}


@media only screen and (max-device-width:1024px) and (orientation:landscape) {
    /*paging not needed on ipad version*/
    .paging {
        display:none;
    }
    /*pop up images sometimes blurry on iPad - turn off dynamic sizing, as not needed on iPad version*/
    .overlay.text .contents img, .overlay.gallery .contents img {
        height:auto;
        width:auto;
    }
}

.hidden { display:none; }
.mousedrag { cursor:move; }
a img {border: none; }

/*for background-size on IE < 9*/
/* #wrap {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='spread.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='spread.jpg', sizingMethod='scale')";
} */

.video-js {
    height:0;
    width:0;
}