Frontend/static/styles/sugoi/style.css

/* Layout (Torrents page) */

#site_debug td{
  border: 1px solid #666;
}

/* We're going to opt for the category icon method for now, tags_* is also available */
.cats_anime { width: 28px; height: 28px; background: url('images/anime.png') no-repeat center center; }
.cats_movies { width: 28px; height: 28px; background: url('images/movies.png') no-repeat center center; }
.cats_manga { width: 28px; height: 28px; background: url('images/manga.png') no-repeat center center; }
.cats_games { width: 28px; height: 28px; background: url('images/games.png') no-repeat center center; }
.cats_other { width: 28px; height: 28px; background: url('images/other.png') no-repeat center center; }
/* Global */
* {
  padding: 0em;
  margin: 0em;
}

html {
  width: 100%;
}

body {
  width: 100%;
  background-color: #000030;
  font-family: tahoma, helvetica, sans-serif;
  font-size: 8pt;
  color: #c6c9c9;
  min-width: 850px;
}

/* Common elements */

.header a, h2{
  color: white;
}

a {
  text-decoration: none;
  border: none;
  color: white;
}

a:hover {
  text-decoration: underline;
}

button, input[type=button], input[type=submit] {
  background: #0B2593;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  color: #FFF;
}
button:hover, input[type=button]:hover, input[type=submit]:hover {
  background: #081654;
}
button:focus, input[type=button]:focus, input[type=submit]:focus {
  background: #6687ff;
}

.spoilerButton {
  max-width: 540px;
}

.forum_post .body a:not([href="#"]), .rule_summary a, .wiki_article a, #actual_rules a, .news_post .pad a, .store_table a {
  text-decoration: none;
  border: none;
  color: white;
}

.forum_post .body a:hover:not([href="#"]), .rule_summary a:hover, .wiki_article a:hover, #actual_rules a:hover, .news_post .pad a:hover, .store_table a:hover {
  text-decoration: underline;
  border: none;
  color: white;
}

h1,h2,h3,h4 {
  margin: 5px 0px;
  font-weight: bold;
  color: white;
}

h2 {
  text-align: center;
  font-size: 12pt;
}

h4 {
  font-size: 8pt;
}

p {
  margin: 10px 5px;
}

li {
  margin: 5px 15px;
}

img {
  border: none;
}

/* Styles generated by the BBCode parser */

span.size1 { font-size:0.75em; }
span.size2 { font-size:1em; }
span.size3 { font-size:1.25em; }
span.size4 { font-size:1.5em; }
span.size5 { font-size:1.75em; }
span.size6 { font-size:2em; }
span.size7 { font-size:2.25em; }
span.size8 { font-size:2.5em; }
span.size9 { font-size:2.75em; }
span.size10 { font-size:3em; }

ul.thin { margin:0px 0px 0px 25px; padding:0px; }
ul.thin li { margin:0px 0px; padding:0px; }

/* Layout (Every page) */

#header {
  width: 100%;
  padding: 0px 0 0 0;
  background: #0e238b;
  margin-bottom: 10px;
}

#content {
  margin: auto;
  margin-top: 10px;
/*  margin-top: 100px; */
  width: 90%;
  min-width: 872px;
  overflow: hidden;
}

#footer {
/*  margin-top: 40px; */
  margin-top: 10px;
  width: 100%;
  text-align: center;
  padding: 1em 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  transition-delay: 0.7s;
  /* color: #c6c9c9;  */
}
#footer:hover {
  opacity: 1;
}
#footer a { 
  color: white;
}
#footer a:hover {
  text-decoration: underline;
}

#logo {
  width: 300px;
  height: 197px;
  background: url('images/logo.png') no-repeat center center;
  margin: 0 auto;
}

#logo a {
  border: none;
  width: 100%;
  height: 197px;
  display: block;
}

#logo a:hover {
  border: none;
}

#menu {
  width: 100%;
  text-align: center;
  background-color: #081653;
  font-size: 10pt;
}

#menu > ul {
  display: flex;
  width: 70%;
  margin: 0 auto;
}

#menu > ul > li {
  position: relative;
  height: 32px;
  display: flex;
  margin: 0;
  flex: 1 1 auto;
}

#menu ul > li > a {
  padding: 0.6em 0;
  display: inline-block;
  width: 100%;
  color: #FFFFFF;
  transition: ease-in-out 0.2s;
}

#nav_links {
  max-width: 40px;
}

#menu ul li a.active {
  background-color: #565656;
}

#menu ul li a:hover {
  background-color: #0B2592;
  text-decoration: none;
}

#menu .nav_dropdown {
  background: #081653;
  margin-top: 0;
}

.nav_dropdown > div {
  position: absolute;
  background-color: #081653;
  width: 100%;
  z-index: 99999;
  margin-top: 32px;
  left: 0;
}

#nav_links > #links_menu {
  width: 120px;
  margin-left: -80px;
}

.nav_dropdown > div > a {
  display: none;
  color: #FFFFFF;
  height: 32px;
  line-height: 32px;
}

.nav_dropdown:hover > div > a {
  display: block;
}

#filter_menu {
  width: 100%;
  text-align: center;
  background-color: #081653;
  font-size: 10pt;
}

#filter_menu > ul {
  display: flex;
  width: 80%;
  margin: 0 auto;
}

#filter_menu > ul > li {
  position: relative;
  height: 26px;
  display: flex;
  margin: 0;
  flex: 1 1 auto;
}

#filter_menu ul > li > a {
  padding: 0.4em 0;
  display: inline-block;
  width: 100%;
  color: #FFFFFF;
  transition: ease-in-out 0.1s;
}

#filter_menu ul li a.active {
  background-color: #565656;
}

#filter_menu ul li a:hover {
  background-color: #0B2592;
  text-decoration: none;
}

#userinfo {
/*  position: absolute;
  top: 258px; */
  color: #e6e6e6;
  padding: 4px 0px;
  width: 100%;
  text-align: center;
  font-size: 8pt;
  /* border-bottom: 1px solid #999; */
}

#userinfo img {
  margin-top: -5px;
}

#userinfo ul {
  display: inline;
  margin: 0px 0.8%;
}

#userinfo ul li {
  display: inline;
  margin: 0 0.1em;
  line-height: 20px;
  vertical-align: middle;
  padding: 0px;
}

#userinfo a {
  color: #FFFFFF;
}
#userinfo a:hover {
  text-decoration: underline;
}

#userinfo b a {
  font-weight: normal;
  font-size: 0.9em;
  font-weight: bold;
}

#searchbars {
  text-align: center;
  box-sizing: border-box;
  display: flex;
  width: 60%;
  margin: 4px auto;
  min-width: 850px;
}

#searchbars > .search_form {
  flex: 1 1 auto;
  text-align: center;
  margin: 0 3px;
}

#searchbars input {
  position: relative;
  border: 1px solid transparent;
  box-sizing: border-box;
  padding: 2px 2px 2px 4px;
  font-size: 0.9em;
  background-color: #222f68;
  width: 100%;
  color: #c6c9c9;
}

#searchbars ul {
  margin: 0 auto;
  display: block;
  text-align: center;
}

#searchbars ul li {
  display: inline;
  margin: 0px 1px;
  list-style: none;
  position: relative;
}

#searchbars ul li ul {
  display: block;
  position: absolute;
  top: 1em;
  left: 0;
  z-index: 1000;
  background-color: #222f68;
  width: 12em;
  margin-top: 12px;
}

#searchbars ul li ul li {
  margin: 0 0 0 0;
  padding: 0;
  display: block;
  width: 100%;
}

#searchbars ul li ul li.highlight {
  background: #222f68;
}

#searchbars ul li form {
  display: inline;
}

#alerts {
/*  margin-top: 85px;
  margin-bottom: -85px; */
/*  padding: 10px 0px; */
  margin: 10px 0px;
}

#cat-selector ul {
  width: 100%;
}

#cat-selector ul li {
  display: inline;
  width: 12em;
  height: 1em;
  float: left;
}

.alertbar {
  /* border: 1px solid #999; */
  background-color: #0e238b;
  text-align: center;
  color: #c6c9c9;
  font-weight: bold;
  font-size: 0.95em;
  width: 350px;
  margin: 0 auto 0px auto;
  padding: 10px;
}
.alertbar a {
  color: white;
  text-decoration: underline;
}
.alertbar a:hover {
  text-decoration: none;
}

/* IE doesn't appear to like a simple display:none in our header. Random things start fucking up pretty badly. */
.hidden {
  position: absolute;
  left: -10000px;
}

input.hidden {
  position: absolute;
  display: none;
}

/* Layout (Any page) */


.thin {
  width: 850px;
  margin: 0px auto;
}

#userinfo_major .brackets:before {
  font-weight: bold;
}

#userinfo_major .brackets:after {
  font-weight: bold;
}

#userinfo #userinfo_minor {
  position: absolute;
  text-align: left;
}

#userinfo_minor > li > ul {
  display: none;
  position: absolute;
  padding: 5px;
  left: -5px;
  background-color: #0e238b;
  z-index: 100;
}

#userinfo_minor li {
  display: block;
}

div.linkbox {
  text-align:center;
  padding: 5px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.min_padding {
  padding: 0px;
  margin: 0px 0px;
}

p.min_padding {
  margin: 2px 0px;
}

.pad {
  padding: 1em;
}

.slight_margin {
  margin: 4px;
}

.vertical_space {
  margin-bottom: 10px;
}

.box {
  font-size: 8pt;
  background-color: #222f68;
  /* border: 1px solid #666666; */
  border: none;
  margin-bottom: 10px;
}

.torrents_nomatch {
  margin-top: 10px;
}

.box2 {
  margin-bottom: 10px;
  font-size: 8pt;
  background-color: #222f68;
  /* border: 1px solid #666666; */
  border: none;
}

.pad h3, .pad h4, .padbox h3, .padbox h4 {
  margin-top: 0px;
  padding-top: 0px;
  color: white;
}

.sidebar {
  float: right;
  width: 245px;
}

.head {
  padding: 4px;
  /* border-bottom: 1px solid #666; */
  /* background: #E1E1E1; */
  background: #0B2593;
  color: #FFF;
}

.head a {

text-decoration: none;
border: none;
color: #FFFFFF;
}

.head a:hover  {
text-decoration: underline;
color: #FFFFFF;
}

.body {
  padding: 3px 10px 10px 10px;
}

.main_column {
  width: 592px;
}

.main_column table {
  margin-bottom: 10px;
}

/*
These 3 #artist styles extend the width to ensure .sidebar does not steal width from .main_column
and result in it only being 592px, which despite looking ok for the news items on the main page
and other areas, it is just too thin for any torrent table.
*/
#artist .main_column {
  width: 845px;
}

#artist .thin {
  width: 1100px;
}

body#artist {
  min-width: 1225px;
}

.tags {
  padding: 0px 0px 0px 20px;
  font-style: italic;
}

.tags a {
  color: white;
}

.tags a:hover {
  text-decoration: underline;
}

.noborder {
  border: none;
}

ul.nobullet, ul.nobullet li {
  list-style-type: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  /* border: 1px solid #666666; */
}

tr {
  background-color: #222f68;
}

td, th {
  /* border: 1px solid #666666; */
  padding: 5px;
  text-align: left;
}

.colhead {
  background: #081654;
  font-weight: bold;
  color: #ffffff;
}

td.colhead, .colhead td, .colhead th {
  padding-left: 10px;
  padding-right: 10px;
}

.colhead a {

text-decoration: none;
border: none;
color: #FFFFFF;
}

.colhead a:hover  {
text-decoration: underline;
color: #FFFFFF;
}
.colhead .sign, .colhead_dark .sign {
  padding: 0px 8px 0px 8px;
  vertical-align: middle;
  text-align: center;
  font-size: 12pt;
  font-weight: bold;
}


.colhead .sign {
  padding: 0px 8px 0px 8px;
  font-size: 12pt;
  font-weight: bold;
}

.colhead_dark {
  background: #081654;
  color: #FFF;
}
.staff_post .colhead_dark {
  background: #4d73ff;
}

td.label {
  font-weight: bold;
  text-align: right;
  width: 180px;
}

.label_annotate {
  font-weight: normal;
  text-align: right;
  margin: 0px;
}

table.slice {
  margin-top: -1px;
}

.error_message {
  border: 1px solid #666;
  padding: 3px 0px 3px 0px;
  background-color: #AF2525;
  text-align: center;
  color: white;
  font-weight: bold;
}

.save_message {
  border: 1px solid #666;
  padding: 3px 0px 3px 0px;
  background-color: #F4E649;
  text-align: center;
  color: #492802;
  font-weight: bold;
}

.elem_error {
  border: 3px solid #B00D0D;
}

.hidden {
  display: none;
}

ul.nobullet {
  display: inline-block;
}


/* Layout (home page) */

ul.stats li {
  padding: 0px 0px 1px 0px;
}

ul.poll li {
  padding: 0px 0px 0px 10px;
  margin: 0px;
  clear: left;
}

ul.poll li.graph {
  margin-bottom: 3px;
  padding-left: 20px;
}

/* Layout (Torrents page) */

.show_torrents {
  width: 21px;
  height: 28px;
  background: url('images/show2.png') no-repeat center center;
}

.hide_torrents {
  width: 21px;
  height: 28px;
  background: url('images/hide2.png') no-repeat center center;
}

.show_torrents_link {
  border: none;
  width: 28px;
  height: 28px;
  display: block;
  cursor: pointer;
}

.filter_torrents {
  width: 750px;
  margin: auto;
  background: #222f68;
}

.filter_torrents .submit {
  text-align: right;
  padding-top: 5px;
}

.filter_torrents .ft_cat_list {
  border-top: 1px solid #222f68;
  border-bottom: 1px solid #222f68;
}

#content form.search_form + .torrent_table {
  margin-top: 20px;
}

#content form.search_form .submit {
  text-align: center;
}

.cat_list tr td {
  border: none;
}

.torrent_table tr {
  /* vertical-align: top; */
  vertical-align: middle;
}

h3 a {
  color: white;
}

.torrent_table .number_column {
  text-align: center;
}

.torrent_table, .torrent_table td {
  border: none;
}

.torrent_table tr.torrent, .torrent_table tr.group {
  font-weight: bold;
}

.torrent_table tr.group {
  background-color: #2b4297;
}
.torrent_table tr.group_torrent {
  background-color: #222f68;
}
.torrent_table tr.torrent {
  background-color: #222f68;
}

.torrent_table tr.group td.center:first-child {
  padding: 3px;
  width: 21px;
}
.torrent_table tr.torrent:nth-child(2n) {
  background-color: #07123c;
}
.torrent_table tr.torrent:nth-child(2n-1) {
  background-color: #293c80;
}
/*
It is not possible to .addClass() nth-child so a new style must be created with
the same css attributes as the nth-child lines above.
Also defining an extra style class with nth-child also does not work so an extra
css block is needed for .rowlight and .rowdark*/
.torrent_table tr.torrent.rowlight {
  background-color: #07123c;
}
.torrent_table tr.torrent.rowdark {
  background-color: #293c80;
}

.torrent_table div.tags {
  font-weight: normal;
  max-width: 500px;
}

.torrent_table tr .center, #collage_table td {
  vertical-align: middle;
  text-align: center;
}

.group_torrent span {
  float: right;
}

.torrent span {
  font-weight: normal;
  float: right;
}

.nobr {
  white-space: nowrap;
}

/* Layout (Forums) */

.last_read {margin-left: 5px; fill: #222f68;}
.colhead_dark .last_read {fill: #DC86E0;}

.unread_locked_sticky{background: url(images/locked_sticky_unread.png) no-repeat center center;}
.read_locked_sticky{background: url(images/locked_sticky_read.png) no-repeat center center;}
.read_sticky{background: url(images/sticky_read.png) no-repeat center center;}
.unread_sticky{background: url(images/sticky_unread.png) no-repeat center center;}
.unread_locked{background: url(images/locked_unread.png) no-repeat center center;}
.read_locked{background: url(images/locked_read.png) no-repeat center center;}
.unread{background: url(images/unread.png) no-repeat center center;}
.read{background: url(images/read.png) no-repeat center center;}
strong.quoteheader {color: #000;}

tr.row:nth-of-type(odd) {
  background-color: #293c80;
}

table.forum_post {
  margin: 10px 0px;
}

table.forum_post td {
  /* border: 1px solid #666; */
  border: none;
}

table.forum_unread {
  border: 2px solid  #335fff;
}

td.avatar {
  width: 150px;
  padding: 0px;
}

.box_description > div:not(.head) {
  max-height: 400px;
  overflow-y: scroll;
}
.box_description, table.forum_post td.body {
  word-break: break-word;
  word-wrap: break-word;
  display: inline-block;
}
.box_description {
  width: 100%;
}
.thin > table.forum_post td.body {
  width: 690px;
}
#torrent_comments table.forum_post td.body {
  width: 422px;
}

blockquote {
  margin: 10px;
  padding: 10px;
  /* border: 1px dashed #666; */
  border: 1px solid #BBB;
}


/* Layout (Inbox) */


tr.unreadpm {
  background-color: #ECC;
}

/* Layout (Permission Page) */

.permission_head {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.permissions {
  width: 930px;
  margin-left: auto;
  margin-right: auto;
}

.permission_container {
  float: left;
  width: 300px;
  padding: 5px;
}
.permission_container input {
  margin: 0px 3px 5px 0px;
  vertical-align: top;
}

.submit_container {
  clear: both;
  text-align: right;
}

/* Layout (Invite tree) */

ul .invitetree {
  margin: 0px 0px 0px 25px;
}

.invitetree li {
  list-style: none;
  margin: 10px 2px;
}

/* Layout (User options) */

.user_options .options_list li {
  margin: 0;
}

/* Layout (MISC) */

.left_poll {
  display: none;
  width: 2px;
  height: 9px;
  float: left;
  margin: 0px;
  padding: 0px;
}

.center_poll {
  height: 9px;
  background: #C5D1FF;
  border-radius: 4px;
  float: left;
  margin: 0px;
  padding: 0px;
}

.right_poll {
  display: none;
  width: 2px;
  height: 9px;
  float: left;
  margin: 0px;
  padding: 0px;
}

.curtain {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

.lightbox {
  position: fixed;
  text-align: center;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  padding: 0px;
  z-index: 1002;
  overflow: auto;
}

.center {
  text-align: center;
}

.spellcheck {
  margin: 25px 0;
  font-size: 1.25em;
  font-weight: bold;
}

tr.torrent .bookmark > a:before {
  color: black;
}
tr.torrent .bookmark > a:after {
  color: black;
}

.field_div {
  margin-bottom: 10px;
}

.edit_changelog textarea {
  width: 600px;
}

.brackets {
  font-weight: normal;
}

div[class~=tooltipster-content] > a {
  color: #AAAAAA;
}

.post_id {
  font-weight: normal;
}

.vote_tag_up, .vote_artist_up, .vote_album_up, .small_upvote, .small_upvoted {
  color: green;
}

.vote_tag_down, .vote_artist_down, .vote_album_down, .small_downvote, .small_downvoted {
  color: red;
}

/* get rid of extraneous padding in the Top Contributors box */
#request_top_contrib {
  border: none;
}
#request_top_contrib tr:first-child th {
  border-top: 0;
}
#request_top_contrib tr:last-child td {
  border-bottom: 0;
}
#request_top_contrib tr td:first-child,
#request_top_contrib tr th:first-child,
#request_top_contrib tr td:nth-child(2),
#request_top_contrib tr th:nth-child(2) {
  border-left: 0;
  border-top: 0;
}
#request_top_contrib tr td:last-child,
#request_top_contrib tr th:last-child {
  border-right: 0;
}

#requests table.layout.cat_list {
  border-bottom: 1px solid #AAA;
  border-top: 1px solid #AAA;
}
#requests tr#media_list {
  border-bottom: 1px solid #AAA;
  border-top: 1px solid #AAA;
}
#request_table {
  margin-bottom: 5px;
}
#request_table .request:nth-of-type(odd){
  background: #6687ff;
}
#request_table .request:nth-of-type(even){
  background: #335fff;
}

/* workaround for calendar display issue */
div.sidebar #event_div {
  margin-left: -232px;
}

ol {
  margin-left: 1em;
}

#forum_search_cat_list {
  border: none;
}

#coverCont {
  background-color: #335fff;
  padding: 5px;
  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
}
#coverCont img {
  background-color: #335fff;
}
.torrent_info {
  font-size: 100%;
  font-weight: 100;
}
.group_info > a:last-of-type {
  text-decoration: underline;
}
.group_image {
  padding-right: 1em;
}

.recent_snatches_images, .recent_uploads_images {
  position: relative;
}

.edit_tags_votes {
  padding-left: 5px;
}

.row_hl {
  background-color: #4d73ff;
}

input.inputtext {
  border: none;
  border-bottom: 1px solid #AAA;
  background-color: rgba(0, 0, 0, 0);
  font-size: 13px;
  outline: none;
  transition: ease-in-out 0.12s;
}
input.inputtext:focus {
  border-bottom: 1px solid #081654;
}

input, textarea {
  background-color: #081653;
  padding: 5px 5px;
  color: white;
  outline: none;
  border: none;
}

select {
  padding: 5px 5px;
  background-color: #081653;
  color: white;
  border-radius: 0px;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

.bbcode_bar {
  background: #081653;
  border-bottom: none;
}
.collage_images .collage_image {
  margin: 1px;
  width: 121px;
  display: inline-block;
}

.box, .border, .alertbar, .artist_table, .request_table, .forum_index, #userinfo_minor > li > ul, .permissions table {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
#userinfo {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -2px rgba(0, 0, 0, 0.2), 0 0px 5px 0 rgba(0, 0, 0, 0.12);
}

.last_edited {
  font-size: 10px;
  opacity: 0.7;
}

#comm_badge_tr .badge_icon, #user_badge_edit_tr .badge_icon {
  margin-right: 1em;
  margin-left: 2px;
}

.store_table .badge_icon {
  display: inline-block;
  width: 16px;
}

.store_table .badge_icon img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.hnr-yes {
  color: red;
}
.hnr-no {
  color: green;
}

.webm {
  max-width: 100%;
}

.point_gift_box p {
  margin: 7px 2px 0px;
}
.point_gift_box input[type="text"], .point_gift_box textarea {
  width: 100%;
  box-sizing: border-box;
}
.dead {
  opacity: 0.6;
}
.search_warning {
  fill: #081654;
}

.tl_reported {
  color: red;
}

.tl_snatched {
  color: #C35C1C;
}
.tl_leeching {
  color: #BD0D0D;
}
.tl_seeding {
  color: #068206;
}
caption {
  border-bottom: 1px solid #BBB;
  font-weight: bold;
}

#noty_bottomRight_layout_container li {
	background-color:#0a133d !important;
	color: #E9E9E9 !important;
	border: none !important;
}

.noty_buttons {
	background-color: #222f68 !important;
	border-top: none !important;
}


.tag_parody {
	color: #e08e00 !important;
}
.tag_character {
	color: #099809 !important;
}
.tag_female {
	color: #d51b8a !important;
}
.tag_male {
	color: #0000ff !important;
}

.collage_image:hover {
  box-shadow: 0px 0px 0px 3px #122CB5;
  position: relative;
}