body { background-color: #fff; font-family: "Open Sans", Helvetica; margin: 0; padding: 0; } .button, input[type="submit"], button { display: inline-block; padding: 5px 10px; background-color: #fdfdfd; border: 1px solid #ddd; border-radius: 5px; text-decoration: none; color: #000; } .button.modbutton { background-color: #ffe599; border: 1px solid #a76300; color: #945800; font-weight: bold; } input[type="submit"] { font-size: 120%; } label { width: 200px; display: block; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=url] { padding: 5px; font-size: 120%; width: 280px; border-radius: 5px; border: 1px solid #b3b3b3; background-color: #ffffff; box-shadow: inset 2px 2px 5px #ddd; } .helptext { display: block; margin-bottom: 10px; font-style: italic; font-size: 80%; cursor: help; } .unibar { padding: 20px; border-bottom: 1px solid #ddd; box-shadow: 2px 2px 5px #9c9c9c; } .unibar .logo { font-size: 200%; } .unibar .userdata { display: inline-block; float: right; padding: 12px; } .wrapper { min-height: 100vh; } .show-promo { display: inline-block; width: 200px; text-align: center; margin: 5px; vertical-align: text-top; } .show-promo .artwork { max-width: 180px; max-height: 260px; } .show-promo span { display: block; } .blocklayout .block { margin: 15px; box-shadow: 2px 2px 5px #9c9c9c; } .blocklayout .block h1 { background-color: #f5f5f5; border: 2px solid #d0d0d0; border-bottom: 0; padding: 8px; margin: 0; word-wrap: break-word; } .blocklayout .block .content { overflow: hidden; border: 2px solid #d0d0d0; padding: 10px; } .blocklayout.columns { position: relative; overflow: hidden; } .blocklayout.columns .column.primary { width: 80%; } .blocklayout.columns .column.smaller { width: 20%; float: right; } section.show-details { position: relative; } .show-details .banner { position: absolute; width: 100%; height: 100%; filter: blur(4px); background-position: center center; background-size: cover; z-index: -1; } .show-details .banner-cover { overflow: auto; } .show-details .artwork { width: 182px; margin: 15px; float: left; } .show-details .details { margin-left: 220px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; display: block; min-height: 260px; overflow: hidden; font-size: 150%; background-color: #dadada38; padding: 10px; } .show-details .details h1 { margin: 0; font-size: 200%; } .show-details .details.season h3 { margin-top: 0; } .show-details .details .description { width: 80%; } section.seasons, section.submissions { min-height: 100vh; padding: 25px; } .season-name { padding: 6px; font-size: 180%; background-color: #e8e8e8; } a.episode { padding: 10px; display: block; color: #000; text-decoration: none; background-color: #f7f7f7; } a.episode:nth-child(even) { background-color: #fbfbfb; } a.episode .submission_cnt { float: right; color: #949494; } .submission-list .submission { background-color: #f9f9f9; } .submission-list .submission:nth-child(even) { background-color: #ececec; } .submission { padding: 10px; } .submission .data { font-size: 90%; color: #b1b1b1; } .submission a.link { font-size: 180%; text-decoration: none; color: #191919; font-style: italic; display: inline-block; padding: 15px 0; } .vote-btns { float: right; } .vote-positive, .vote-negative, .sub-report { padding: 10px; display: inline-block; min-width: 20px; text-align: center; border-radius: 5px; font-weight: bold; cursor: pointer; text-decoration: none; } .vote-btns form { display: inline-block; } .vote-positive { background-color: #a4ffa7; color: #008005; } .vote-negative, .sub-report { background-color: #ffa6a6; color: #ab0000; } .submission-list .submission.buried { opacity: 0.3; } .message.error { width: fit-content; padding: 10px; background-color: #ffcaca; border: 1px solid #b10000; margin: 5px 0; } .actions { float: right; padding: 15px; } .divider { margin: 0 5px; opacity: 0.5; user-select: none; } @media all and (max-width: 800px) { .logo { font-size: 5vw !important; } .blocklayout.columns .column { position: initial; display: block; } .blocklayout.columns .column.primary { width: initial; } .blocklayout.columns .column.smaller { display: none; } .blocklayout .block { margin: 0; margin-bottom: 10px; border: none; box-shadow: none; } .blocklayout .block .content, .blocklayout .block h1 { border: none; } .blocklayout .block .content .show-promo, .blocklayout .block h1 .show-promo { display: block; margin: 5px auto; } }