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; } input[type="submit"] { font-size: 120%; } label { width: 200px; display: block; } input[type=text], input:not([type=submit]) { 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 .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 a.link { font-size: 180%; text-decoration: none; color: #191919; font-style: italic; } .vote-btns { float: right; } .vote-positive, .vote-negative { 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 { 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; } @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; } }