/* Mobile */
@media only screen and (max-width : 320px) {
    .MobilePortrait {
        display: block;
    }
}

/* Mobile Wide Screen */
@media only screen and (min-width : 321px) and (max-width : 480px) {
    .MobileLandscape {
        display: block;
    }
}

/* Tablet */
@media only screen and (min-width : 481px) and (max-width : 600px) {
    .SmallTabletPortrait {
        display: block;
    }
}

/* Tablet Wide Screen */
@media only screen and (min-width : 601px) and (max-width: 768px) {
    .SmallTabletLandscape {
        display: block;
    }
}

/* Tablet Wide Screen */
@media only screen and (min-width : 769px) and (max-width: 984px) {
    .TabletLandscape {
        display: block;
    }
}

/* Desktop */
@media screen and (min-width: 985px) {
    .Desktop {
        display: block;
    }
    div.content { /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */ display: none; float: left; width: 600px; }
div.content a, div.Gnavigation a { text-decoration: none; color: #fff; }
div.content a:focus, div.Gcontent a:hover, div.Gcontent a:active { text-decoration: underline; }

div.slideshow-container { position: relative; clear: both; width: 600px; height: 400px; /* This should be set to be at least the height of the largest image in the slideshow */ }
div.loader { position: absolute; top: 0; left: 0; background-image: url( '/Images/Control/Slider/loader.gif' ); background-repeat: no-repeat; background-position: center; width: 600px; height: 400px; /* This should be set to be at least the height of the largest image in the slideshow */ }
div.slideshow { }
div.slideshow span.image-wrapper { display: block; position: absolute; background-color: black; }
div.slideshow a.advance-link { display: block; width: 600px; height: 400px; /* This should be set to be at least the height of the largest image in the slideshow */ /*line-height: 400px; /* This should be set to be at least the height of the largest image in the slideshow */ text-align: center; }
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited { text-decoration: none; }
div.slideshow img { border: none; }
div.btm-container { width: 600px; height: 127px; }
div.caption-container { position: relative; height: 127px; width: 340px; float: right; background-color: #000; }
span.image-caption { display: block; position: absolute; top: 0; left: 0; }
div.caption { padding: 2px 20px 12px 20px; width: 300px; height: 103px; }

div.image-desc { /*line-height: 1.3em; 	padding-top: 12px;*/ }
div.navigation { /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */ }
#thumbs { background-color: #000; height: 127px; opacity: 0.8 !important; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80) !important; /*-ms-filter must come before filter*/ filter: alpha(opacity=80) !important; float: left; width: 260px; }
ul.thumbs { margin: 0; padding: 0; }
ul.thumbs li { margin-top: 9px; margin-left:9px; margin-bottom:0; margin-right:0; float: left; padding: 0;  list-style: none; width: 71px; height: 46px; }
a.thumb { display: block; }

ul.thumbs li.selected a.thumb img { width: 71px; height: 46px; border: 2px solid #fff; }

a.thumb:focus { outline: none; }
ul.thumbs img { border: none; display: block; }
div.pagination { display: none; }

div.slideshow img { height: 390px; width: auto; max-width: 600px; }
.caption h1 { color: #fff; font-weight: bold; font-size: 20px; margin: 5px 0; padding: 0; }
.caption h1 a{ font-size: 20px !important; }
.caption p { color: #b3b3b3; font-size: 14px; margin: 0; }
}