@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

body, ul, li, p, h1, h2, form, input, button, img { margin: 0; padding: 0; }
li { list-style-type: none; }

body { background-color: #5d5d5d; color: #d1d1d1; font-family: Tahoma, sans-serif; font-size: 14px; margin: 0; padding: 0; }

img, .sq { background-color: rgba(0,0,0,0.1); border: 0 none; }

a { color: #FFFFFF; text-decoration: none; }
a:hover, li.active a, .footer span { color: #ff97ef; }

h1 { color: rgb(55,55,55); text-transform: uppercase; margin: 10px 5px 0 5px; display: block; font-size: 22px; line-height: 24px; font-weight: normal; }

.wrapper { background-color: #6b6b6b; box-shadow: 0 0 15px -5px rgb(115,115,115); margin: 0 auto; width: 98%; overflow: hidden; }

.head { background-color: #6b6b6b ; border-bottom: 1px solid #5d5d5d; box-shadow: 0 1px 0 0 #6b6b6b; overflow: hidden; padding: 2px; text-align: center; }
.logo a { background-image: url(../images/logo.jpg); background-repeat: no-repeat; margin: 0 auto; width: 300px; height: 40px; display: block; }

.head-desc { display: none; }
.desc { text-align: justify; font-size: 13px; line-height: 15px; height: 30px; overflow: hidden; }

.content-wrapper { overflow: hidden; margin-right: -1px; margin-left: -1px; }

.thumb { float: left; width: 50%; }
.thumb a { border-right: 1px solid #5d5d5d; border-bottom: 1px solid #5d5d5d; border-left: 1px solid #; border-top: 1px solid #6b6b6b; display: block; padding: 2px; position: relative; }
.thumb a img { width: 100%; height: auto; max-height: 300px; display: block; }
.thumb a:hover { background-color: #ff97ef; }

.view-icon-bg { background-color: rgba(0,0,0,0.4); display: none; position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; }
.view-icon { color: #6b6b6b; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; line-height: 60px; font-size: 60px; margin: -30px 0 0 -30px; }

.pages { border-top: 1px solid #6b6b6b; text-align: center; padding-bottom: 10px; }
.pages li { border: 1px solid #5d5d5d; box-shadow: 0 0 0 1px #6b6b6b; display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; width: 30px; height: 30px; line-height: 30px; }
.pages li a { display: block; }
.pages li a:hover, .pages li.active a { background-color: #2e2e2e; }

.sqs { border-top: 1px solid #6b6b6b; box-shadow: 0 -1px 0 0 #5d5d5d; margin-top: 1px; text-align: center; padding-bottom: 10px; }
.sq { display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; width: 300px; height: 250px; }
.sq-2, .sq-3, .sq-4, .sq-5 { display: none; }

.line { border-top: 1px solid #5d5d5d; }

.toplist { border-top: 1px solid #5d5d5d; margin-top: 1px; overflow: hidden; }
.toplist-column { font-size: 12px; float: left; width: 50%; overflow: hidden; }
.toplist ul { border-right: 1px solid #5d5d5d; border-bottom: 1px solid #5d5d5d; border-left: 1px solid #6b6b6b; border-top: 1px solid #6b6b6b; }
.toplist li { border-bottom: 1px solid #5d5d5d; box-shadow: 0 1px 0 0 #6b6b6b; }
.toplist li:last-child { border-bottom: 0 none; box-shadow: none; }
.toplist li a { display: block; padding: 0 10px; height: 30px; line-height: 30px; overflow: hidden; }
.toplist li a:hover { background-color: #6b6b6b; text-decoration: underline; }

.gallery-thumb .view-icon { width: 40px; height: 40px; line-height: 40px; font-size: 40px; margin: -20px 0 0 -20px; }

.go-to li { width: auto !important; text-transform: uppercase; }
.go-to li a { padding: 0 20px; }

.footer { border-top: 1px solid #6b6b6b; text-align: center; padding: 15px; }

@media screen and (min-width: 450px) {
    .thumb, .gallery-thumb { width: 33.3333%; }
    .toplist-column { font-size: 14px; }
}

@media screen and (min-width: 672px) {
    .thumb, .gallery-thumb { width: 25%; }
    .sq-2 { display: inline-block; }
}

@media screen and (min-width: 844px) {
    .wrapper { width: 822px; }
    .head { display: table; width: 100%; padding: 0; height: 40px; }
    .logo, .head-desc { display: table-cell; vertical-align: middle; }
    .logo { width: 310px; border-right: 1px solid #5d5d5d;}
    .logo a { margin: 0 10px; }
    .head-desc { border-left: 1px solid #6b6b6b; padding: 5px 10px; }
    .thumb { width: 206px; }
    .thumb a img { width: 200px; height: 300px; }
    .pages { padding-bottom: 0; }
    .pages ul { border-right: 1px solid #6b6b6b; border-left: 1px solid #5d5d5d; overflow: hidden; display: inline-block; vertical-align: top; }
    .pages li { border: 0 none; border-right: 1px solid #5d5d5d; border-left: 1px solid #6b6b6b; box-shadow: none; display: block; float: left; margin: 0; width: 55px; height: 50px; line-height: 50px; font-size: 16px; }
    .toplist-column { width: 25%; font-size: 12px; }
    .view-icon-bg { top: 2px; left: 2px; width: 200px; height: 300px; }
    .thumb a:hover .view-icon-bg, .gallery-thumb a:hover .view-icon-bg { display: block; }
    
}

@media screen and (min-width: 1256px) {
    .wrapper { width: 1234px; }
    .sq { margin: 10px 1px 0 1px; }
    .sq-3, .sq-4 { display: inline-block; }
    .toplist-column { width: 12.5%; }
}

@media screen and (min-width: 1668px) {
    .wrapper { width: 1646px; }
    .sq { margin: 10px 5px 0 5px; }
    .sq-5 { display: inline-block; }
    .toplist-column { font-size: 14px; }
}