/*** CSS Reset ***/
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
line-height:1;
}
ol, ul{
list-style:none;
}
/*** ***/
a{text-decoration: underline; cursor: pointer; color: #fdc31d;}
a:HOVER{color: #ffffff;}
body{width:100%; height: 100%; font-family:Verdana, Arial, Myriad, sans-serif; font-size:10px; color:#999999;}
html{width:100%; height:100%;}
.left{float: left; position: relative; overflow: hidden;}
.right{float: right; position: relative; overflow: hidden;}
#container{width:100%; height:100%; background: #e3953b url('../assets/res/bulletinboard.jpg') top center repeat; position:absolute; overflow-y: auto; overflow-x: hidden; z-index: 1;}
#logo{width: 250px; height: 184px; background: url('../assets/res/app_logo.png') no-repeat; overflow: hidden; position: absolute; z-index: 5; left:0px; top: 0px; cursor:pointer;}

#msg{width: 239px; height: 100px; background: url('../assets/res/bg_msg.png') no-repeat; position: absolute; z-index: 2; left:50%; margin-left: -120px; display:none;}
#msg .text{color: #c56c1c; font-size: 18px; text-align: center; height: 25px; margin-top: 45px; white-space: nowrap;}

#albumBar{width: 100%; height: 200px; background: url('../assets/res/bg_albums.png') left bottom repeat-x; position: absolute; z-index: 3; top:43px; left:0px;}
#albumTab{width: 93px; height: 24px; background: url('../assets/res/tab_albums.png') no-repeat; position: absolute; bottom: 8px; left:87px;}
#albums_container{height: 170px; margin: 15px 0px 0px 220px; overflow: auto;}
#albums_container li{float:left;}

#topbar{width: 100%; height: 43px; background: url('../assets/res/bg_topbar.gif') repeat-x; position: absolute; z-index: 4; top:0px; left:0px;}
#topbar #pageControls{float:right; margin: 5px 25px 0px 0px;}
#topbar .loader{float: right; height: 20px; margin: 17px 25px 0px 0px; vertical-align: middle; display: none;}
#topbar .loader img{float: left; margin-right: 5px;}
#topbar .loader .text{white-space: nowrap; overflow: hidden; text-align: left; color: #c56c1c; font-size: 12px; float: left; padding-bottom: 10px;}

#thumb_container{width:100%; overflow: auto; padding: 10px 25px 0px 0px;}
#thumb_container li{float:left;}
.thumbnail{float:left; width:100px; height:100px; overflow:hidden; margin:5px; cursor:pointer;}
/*.album{float:left; width:100px; height:100px; overflow:hidden; margin:5px; cursor:pointer; background: url('../assets/res/album_icon.png') no-repeat 0px 0px;}*/
.album{float:left; width:150px; height:150px; position: relative; overflow: visible; margin: 10px; cursor:pointer; background: #ffffff; text-align: center;}
.album img{width: 140px; height: 115px; position: absolute; overflow: hidden; left: 5px; top: 5px; z-index: 1;}
.album #label{color: #000000; text-align: center; font-size: 10px; width: 100%; height: 12px; position: absolute; bottom: 5px; margin:0px auto; overflow: hidden; white-space: nowrap; padding: 0px 5px;}
.album .thumbtack{width: 41px; height: 31px; position: absolute; overflow: hidden; z-index: 2;}

#overlay{width:100%; height:100%; position:absolute; overflow: hidden; z-index: 2; display: none;}
#overlay #blackbox{width: 100%; height: 100%; background-color: black; position: absolute; z-index: 1; opacity:0.85; filter: alpha(opacity=85); cursor:pointer;}
#overlay #whitebox{position: absolute; z-index: 2; left: 0px; top: 0px; overflow: visible;}
#overlay #whitebox #imageContainer{background-color: white; overflow: hidden; padding: 15px;}
#overlay .loader{width: 42px; height: 42px; background: #000000 url('../assets/res/loader_zoom.gif')no-repeat fixed center center; position: absolute; top: 50%; left: 50%; margin: -21px 0px 0px -21px; z-index: 3;}
#overlay #whitebox #options{float: right; background-color: white; width:178px; height: 35px; vertical-align: middle;}
#tape_top{width: 127px; height: 132px; position: absolute; top:-40px; right: -45px;overflow: hidden; z-index: 3; background: url('../assets/res/tape_top.png');}
#tape_bot{width: 144px; height: 136px; position: absolute; bottom:-15px; left: -45px;overflow: hidden; z-index: 3; background: url('../assets/res/tape_bot.png');}
#overlay #whitebox .thumbtack{width: 64px; height: 48px; position: absolute; overflow: hidden; top: 0px; z-index: 3;}

.leftArrow{width: 13px; height: 19px; background: url('../assets/res/btn_left_arrow.png') no-repeat; margin: 7px 0px 0px 9px; float:left; cursor:pointer;}
.rightArrow{width: 13px; height: 19px; background: url('../assets/res/btn_right_arrow.png') no-repeat; margin: 7px 0px 0px 5px; float:left; cursor:pointer;}
#whitebox .leftArrow{background: url('../assets/res/btn_left_arrow2.png') no-repeat;}
#whitebox .rightArrow{background: url('../assets/res/btn_right_arrow2.png') no-repeat;}
.x{width: 20px; height: 20px; background: url('../assets/res/btn_x.png') no-repeat; margin: 6px 0px 0px 15px; float:left; cursor:pointer;}
.display{width: 80px; height: 15px; white-space: nowrap; overflow: hidden; text-align: center; color: #c56c1c; font-size: 12px; margin: 9px 0px 0px 5px; float:left; font-weight: bold;}
.viewMultipage{width: 21px; height: 24px; background: url('../assets/res/btn_multipage.png') no-repeat; margin: 10px 20px 0px 0px; float:right; cursor:pointer;}
.viewSinglepage{width: 18px; height: 22px; background: url('../assets/res/btn_singlepage.png') no-repeat; margin: 12px 20px 0px 0px; float:right; cursor:pointer;}
.viewAlbums{width: 30px; height: 23px; background: url('../assets/res/btn_albums.png') no-repeat; margin: 11px 20px 0px 0px; float:right; cursor:pointer;}
.home{width: 25px; height: 24px; background: url('../assets/res/btn_home.png') no-repeat; margin: 10px 20px 0px 0px; float:right; cursor:pointer;}

#footer{width: 100%; height: 50px; background: #412010; position: relative; overflow: hidden; font-size: 12px; color: #c56c1c; display: table;}
#footer .left{margin: 0px 10px 0px 10px; vertical-align: middle; display: table-cell; float: none; text-align: left;}
#footer img, #footer p{vertical-align: middle; margin: 0px 5px;}
#footer .right{margin: 0px 10px 0px 10px; vertical-align: middle; display: table-cell; float: none; text-align: right;}