*{ border: 0; margin: 0; padding: 0; } a, a:visited { color: white; text-decoration: none; } body { position: relative; background: #151515; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; } #err { margin: auto; width: 200px; padding: 5px; text-align: center; background: red; color: white; } #loading { display: none; position: fixed; padding: 50px 100px 50px 100px; border: 1px solid white; background: #333; color: white; top: 100px; left: 40%; } .menu_title { margin: 0; padding: 2px; border: 1px solid black; background: #444; color: white; text-transform: uppercase; font-size: 11px; font-weight: bold; } .menu_item a, .menu_item a:visited { color: #bbb; font-style: none; text-decoration: none; } .menu_item { padding: 2px; margin: 5px; } .menu_item:hover { background: #666; } .menu_item:hover a, .menu_item:hover a:visited { color: white; } .content_title { margin: auto; padding: 20px; } .content_title, .content_title a, .content_title a:visited { font-size: 30px; font-style: italic; color: white; } .content_title a:hover { text-decoration: underline; } .thumb { text-align: center; position: relative; } .thumb img { max-width: 90%; max-height: 90%; border: 2px solid black; } .thumb:hover img { border-color: yellow; cursor: pointer; } #breadcrumbs { background: black; position: fixed; top: 0; left: 0; right: 0; -webkit-box-shadow: rgb(0, 0, 0) 0px 0px 8px 2px; box-shadow: 0 0 8px black; z-index: 100; } #content { margin-top: 80px; padding: 20px; overflow: auto; } #menu { visibility: hidden; position: absolute; left: 0px; width: 200px; top: 0px; bottom: 0px; bottom: 0; background: #333; overflow:auto; } #dirs, #thumbs { text-align: center; margin: auto; } #viewer { display: none; position: fixed; top: 150px; left: 0; right: 0; text-align: center; height: 50%; } #viewer img { max-height: 100%; max-width: 80%; border: 1px solid black; -webkit-box-shadow: rgb(0, 0, 0) 0px 0px 8px 2px; box-shadow: 0 0 8px black; } .thumb { display: inline-block; width: 250px; height: 160px; text-align: center; margin: 0px 1px 10px 1px; } .thumb img { -webkit-box-shadow: rgb(0, 0, 0) 0px 0px 8px 2px; box-shadow: 0 0 8px black; } .folder { display: inline-block; position: relative; width: 300px; height: 160px; background: blue; margin: 20px; -webkit-box-shadow: rgb(0, 0, 0) 0px 0px 8px 2px; box-shadow: 0 0 8px black; background-size: contain; cursor: pointer; border: 2px solid black; } .folder:hover { border: 2px solid rgb(80, 140, 200); } .folder .title { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px; background: rgba(0, 0, 0, 0.5); text-align: center; } .folder .new { position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 0px; width: 1px; height: 1px; border-style: solid; border-width: 0 50px 50px 0; border-color: transparent rgba(255, 255, 57, 0.4) transparent transparent; text-align: right; } .thumb.new a img { border-color: rgb(255, 255, 57); }