/* reset */
* { position: relative; margin: 0; padding: 0; outline: none; list-style: none; border: 0; box-sizing: border-box; }

/* general */
html, body { min-width: 300px; height: 100%; }
body { background: #3d3d3d; padding: 0px; color: #fff; text-align: center; font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 16px; font-weight: 300; }

#login { max-width: 300px; margin: 0 auto; padding-top: 20px; }
#login form { background: rgba(255, 255, 255, .1); padding: 20px; }
#login p { font-size: 16px; margin-bottom: 10px; }
#login input { width: 100%; line-height: 20px; padding: 5px 10px; font-size: 16px; }
#login button { display: block; width: 100%; background: #04b033; color: #fff; font-size: 16px; line-height: 20px; padding: 5px 10px; }

.images { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.images .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; text-align: center; }
.images .img.active { visibility: visible; }
.images .img img { max-width: 100%; max-height: 100%; }
.images .img span { position: absolute; left: 10px; top: 10px; display: block; background: rgba(0, 0, 0, .9); padding: 5px; font-weight: bold; color: #fff; }

.panel { position: absolute; right: 10px; bottom: 10px; width: 300px; background: rgba(0, 0, 0, .8); padding: 10px; }
.panel .progress { padding-top: 15px; }
.panel .progress div { position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; min-width: 1px; }
.panel .progress div.load { background: rgba(255, 255, 255, .2); }
.panel .progress div.play { background: #3884cc; }

.calendar { display: none; position: absolute; right: 10px; bottom: 77px; background: rgba(0, 0, 0, .8); padding: 10px; text-align: left; }
.calendar.active { display: block; }
.calendar select { width: 120px; }
.calendar dl dt { display: block; float: left; width: 80px; clear: left; padding-bottom: 5px; }
.calendar dl dd { display: block; float: left; width: 200px; padding-bottom: 5px; }
.calendar dl:after { content: ''; display: block; clear: both; }

.button { display: inline-block; padding: 5px 10px; margin: 0; border: none; border-radius: 5px; background: #3566ab; color: #fff; font: inherit; font-weight: bold; text-decoration: none; line-height: 1; cursor: pointer; transition: all linear .1s; }
.button:hover { background-color: #3884cc; text-decoration: none; }