HTML,BODY {height:100%;}

#container {
    width:960px;
    position:relative;
    margin:0px auto;
    padding-bottom:20px;
}

#main {position:relative;}
#main H1 { text-align:center;font-size:1.6em;}
#main H2 { text-align:center;font-size:1.3em;margin:10px 0px;}

.btn,.btn:visited {color:#000;}
.disabled {color:#aaa !important;}
/*#####################################################################
    Page Header
#######################################################################*/

HEADER {
    height:80px;
    background: url('../images/slwa_logo_230x72.png') 5px 5px no-repeat;
    padding-left:160px;


}
HEADER FORM {position:absolute;right:5px;top:20px;}
HEADER FORM INPUT[type=text]{
    border:1px solid #ccc;
    border-bottom-color: #999;
    border-right: none;
    font-size:1.285em;
    height:24px;
    margin:0px;
    outline: medium none;
    padding:4px 6px 0px 6px;
    vertical-align: top;
    border-top-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 4px;
    
}
HEADER FORM INPUT[type=submit] {
    border:1px solid #ccc;
    border-bottom-color: #999;
    border-right-color: #999;
    background:url('../images/search_btn_30x30.png') center center no-repeat;
    font-size:1.285em;
    height:30px;
    margin:0px;
    padding:0px 6px 4px 6px;
    text-indent:-200px;
    width:26px;
    vertical-align: top;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0px;

}
/*#####################################################################
    Requesting Object from Storage
#######################################################################*/
BODY.statusRequesting HEADER {
    background-position:center 20px;
    height:100px;
}
BODY.statusRequesting #main {
    background:none;
    text-align:center;
    margin-top:30px;

}

/*#####################################################################
    Object Not Found Template
#######################################################################*/
BODY.err404 #main {padding-top:350px;background: #fff url('../images/404book.jpg') top center no-repeat;}
BODY.err404 #main H1 {font-size:1.3em;text-align:center;color:#666;}
BODY.err404 #main FORM {background:#eee;margin-top:5px; padding:5px 10px;text-align:center;}
BODY.err404 #main FORM LABEL {display:block;}
BODY.err404 #main FORM INPUT.search {border:1px solid #ccc;font-size:1.3em;width:250px;text-align:center;display:block;margin:3px auto;}

BODY.restrictedAccess #main {padding-top:400px;background: #fff url('../images/Library_exterior_July_2018.jpg') top center no-repeat;}
BODY.restrictedAccess #main H1 {font-size:1.3em;text-align:center;color:#666;}
BODY.restrictedAccess #main H3 {position: absolute; top: 0;margin-left: 33%;width: 500px; color: white; font-size: xx-large; text-shadow: 3px 3px 3px  black;}
BODY.restrictedAccess #main FORM {background:#eee;margin-top:5px; padding:5px 10px;text-align:center;}
BODY.restrictedAccess #main FORM LABEL {display:block;}
BODY.restrictedAccess #main FORM INPUT.search {border:1px solid #ccc;font-size:1.3em;width:250px;text-align:center;display:block;margin:3px auto;}



/*#####################################################################
    BRN View Styles
#######################################################################*/
#brnObjects {overflow:hidden;padding:10px 0px;}
#brnObjects A {
    float:left;
    width:182px;
    min-height:215px;
    border:1px solid #ccc;
    text-decoration:none;
    text-align:center;
    margin:2px;
    padding:2px 2px 5px 2px;
    font-size:0.9em;
    color:#000;
    overflow: hidden;

}
#brnObjects A:hover {background-color:#eff; }
#brnObjects A EM {display:block;font-size:0.9em;}
.paging {padding:10px 5px;text-align: center;}
.paging A {margin:0px 3px;padding:2px 6px;}

/*#####################################################################
    Video Template Styles
#######################################################################*/

#vplayer {width:960px;height:480px;margin:10px 0px;}

/*#####################################################################
    Audio Template Styles
#######################################################################*/
BODY.audio #aplayer {width:960px;height:200px;margin:10px 0px;background:#fff;}
BODY.audio #main .audio {text-align:center;}

/*#####################################################################
    Common Elements Styles
#######################################################################*/

#shareit {padding:5px;background-color:#eff;border:1px solid #ccc;}
#shareit input[type=text] { width:700px;}
#shareit > SPAN {float:left;width:100px;}
#shareit .actions {overflow:hidden;display:block;padding:3px 5px;margin-left:21px;margin:5px 0px;}
#shareit A, .btn {
    font-size:11px;
    color:#000;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #ccc;
    padding:1px 4px 1px 2px;
    background:url('../images/button_bg.png') top left repeat-x;
    border-radius: 4px;
    cursor:pointer;
    margin:2px 1px;
    
}
#shareit A:hover  {background-position: left -30px;color:#fff;}
#shareit SPAN {padding:6px 4px 4px 28px;}
#shareit A.email SPAN { background:url('../images/email_21x21.png') 2px center no-repeat;}
#shareit A.facebook SPAN { background:url('../images/facebook_21x21.png') 2px center no-repeat;}
#shareit A.twitter SPAN { background:url('../images/twitter_21x21.png') 2px center no-repeat;}
#shareit A.download SPAN { background:url('../images/download_21x21.png') 2px center no-repeat;}
/* temp fix to hide purchase button NC 31072016 */
#shareit A.purchase { display: none;}
#newInfo {
    padding:5px;
    background:#ffbd01 url('../images/new_info_bg.png') top left no-repeat;border:1px solid #ccc;margin:10px 0px;
}
#newInfo H3 {margin-left:250px;}
#newInfo TEXTAREA {display:block;width:600px;height:100px;margin:5px 0px 5px 0px;padding:4px;border:1px solid #ccc;}
#newInfo DIV {display:block;margin-left:250px;padding:2px 0px;}
#newInfo DIV LABEL {float:left;width:100px;font-weight:bold;padding:2px 0px;}
#newInfo DIV LABEL EM {color:#f00;}
#newInfo DIV INPUT.text {width:300px;border:1px solid #ccc;padding:5px 2px;margin-right:5px;}
#newInfo DIV.submit {text-align:right;width:600px;}
#newInfo LABEL.error {border:1px solid red;background:#fee;padding:2px 5px;float:none;}
#newInfo #infoInfo {width:600px;}
#newInfo #emailInfo,
#newInfo #nameInfo {width:300px;margin-left:350px;}
#siblings {overflow:hidden;text-align:center; padding:5px 0px 10px;position:relative;}
#siblings A {text-decoration:none;position:absolute;color:#000;}
#siblings A:hover  {background-position: left -30px;color:#fff;}
#siblings A SPAN {}
#siblings A.previous {left:10px;}
#siblings A.previous SPAN {background:url('../images/nav_left_21x21.png') left center no-repeat;padding:6px 4px 4px 28px;}
#siblings A.next {right:10px;}
#siblings A.next SPAN {background:url('../images/nav_right_21x21.png') right center no-repeat;padding:6px 28px 4px 4px}

.navigation {overflow:hidden;text-align:center;height:28px;}
.navigation{overflow:hidden;text-align:center; padding:5px 0px 0px;position:relative;}
.navigation A {text-decoration:none;color:#000;}
.navigation A:hover  {background-position: left -30px;color:#fff;}
.navigation A SPAN {}
.navigation A.previous {position:absolute;left:0px;}
.navigation A.previous SPAN {background:url('../images/nav_left_21x21.png') left center no-repeat;padding:6px 4px 4px 28px;}
.navigation A.next {position:absolute;right:0px;}
.navigation A.next SPAN {background:url('../images/nav_right_21x21.png') right center no-repeat;padding:6px 28px 4px 4px}

.restricted {border:1px solid red;background:#fee;padding:20px 10px;margin-top:20px;}
.restricted A {font-weight:bold;color:red;}

/*#####################################################################
    Thank you Page
#######################################################################*/
#main.thankyou {text-align:center;padding-bottom:50px;}
#main.thankyou P {font-size:120%;margin-bottom:20px;}
#main.thankyou A {font-size:120%;}
/*#####################################################################
    Page Footer
#######################################################################*/
#copyright { padding:5px;background-color:#eee;border:1px solid #ccc;margin:10px 0px;font-size:0.8em;}
#disclaimer { padding:5px;margin:10px 0px 5px;font-size:0.8em;}
FOOTER {
    position:fixed;
    bottom:0px;
    text-align:center;
    width:100%;
    font-size:0.79em;
    background-image: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0));
    padding: 3px;
    height: 20px;
}
FOOTER p {
    margin-top: 10px;
}
/* #####################################################################
    projekktor Styles
######################################################################## */
#aplayer_media_image {
    margin: 0 auto !important;
    position: static !important;
}

/* #####################################################################
    Zoomify Styles
######################################################################## */

#myContainer {
    width:900px;
    height:720px;
    margin:auto;
    border:1px;
    border-style:solid;
    border-color:#f0f0f0;
}
#noscript_fallback {
    max-width:880px;
    max-height:705px;
    width:auto;
    height:auto;
    margin:auto;
    display:block;
}
#noscript_text {
    margin:10px;
    text-align:center;
    width:100%;
}

/* #####################################################################
    Media Query imports
##################################################################### */
@media screen and (min-width: 1281px) {
    #container {
        width:1280px;
    }
    #vplayer {
        width: 1280px;
        height: 720px;
    }
    #myContainer {
        width:1280px;
    }
    BODY.audio #aplayer {
        width:1280px;
    }

    #shareit input[type=text] {
        width: 1000px;
    }
    #newInfo TEXTAREA {
        width:780px;
    }
}

@media screen and (max-width: 960px) {
    #container {
        width:720px;
    }
    #vplayer {
        width: 720px;
        height: 480px;
    }
    #myContainer {
        width:720px;
        height:560px;
    }
    BODY.audio #aplayer {
        width:720px;
    }
    #shareit input[type=text] {
        width: 520px;
    }
    #newInfo H3 {
        margin-left: 150px;
    }
    #newInfo TEXTAREA {
        width:500px;
    }
    #newInfo DIV {
        margin-left: 150px;
    }
    #newInfo DIV.submit {
        width: 408px;
    }
}
@media screen and (max-width: 700px) {
    #container {
        width:640px;
    }
    #vplayer {
        width: 100%;
        height: auto;
    }
    #myContainer {
        width:640px;
        height:400px;
    }
    BODY.audio #aplayer {
        width:640px;
    }
    #shareit input[type=text] {
        width: 420px;
    }
    #newInfo H3 {
        margin-left: 150px;
    }
    #newInfo TEXTAREA {
        width:396px;
    }
    #newInfo DIV {
        margin-left: 150px;
    }
    #newInfo DIV.submit {
        width: 408px;
    }
    BODY.picture #brnObjects A {
        width: 174px;
    }
}

@media screen and (max-width: 639px) {
    #container {
        width: 100%;
    }
    #myContainer {
        width:100%;
        height:300px;
    }
    BODY.audio #aplayer {
        width:100%;
    }
    #shareit input[type=text] {
        width: 270px;
    }
    #newInfo H3 {
        margin-left: 100px;
    }
    #newInfo TEXTAREA {
        width:90%;
    }
    #newInfo DIV {
        margin-left: 100px;
    }
    #newInfo DIV.submit {
        width: 408px;
    }
    .navigation {
        height: 56px;
    }
    .navigation .previous, .navigation .next {
        bottom: 13px;
    }
    BODY.err404 #main {
        background-image: url('../images/404book_180x128.png');
        background-color: #fff;
        background-position: top center;
        background-repeat: no-repeat;
        padding-top: 140px;
        width:100%;
    }
}

.waiting {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 111;
    backdrop-filter: blur(4px);
    padding: 200px 10px;
    top:  0;
    left: 0;
    right: 0;
    bottom: 0;
}

.waiting DIV {
    background-color: #fff;
    padding:  10px;
    border: 1px solid silver;
    margin: 0 auto;
    width: 30em;
    text-align: center;
}