GreenZanbato MAL List Style CSS V2.0

/*CHANGELOG:

**Version 2.0
Stats bar now has the extra 2 missing pixels in width
Image column header no longer highlights
Sort column headers now highlight correctly
Search button now highlights blue instead of an underline
Links no longer change color with certain list styles
Fixed dash for Edit/More/Add on odd rows not turning white on hover
Hover images now transition to their new position
Styled header list switch dropdown
Gave filters window a fixed position like it should have had in the first place*/

@import url(https://fonts.googleapis.com/css?family=Orbitron:Medium|Permanent+Marker);

/**BACKGROUND IMAGE**/
body {
  background-attachment: fixed !important;
  background-color: #f0f0f0 !important;
  background-image: url("https://i.imgur.com/FREkBwO.jpg") !important;
  background-repeat: repeat !important;
}

/**GET RID OF BULKY WATCH ON MAL BUTTON**/
.icon-watch {
  display: none !important;
}

/**GLOBAL**/
body {
  font-family: Arial,Verdana,Helvetica,sans-serif;
  font-size: 13px !important;
}
* {
  text-decoration: none !important;
}
a {
  color: white;
}
a:hover {
  color: white !important;
  border-bottom: 2px solid #5c8ae6;
}

/**FLOAT MENU**/
.list-menu-float .icon-menu:hover {
  border-bottom: none !important;
}
.list-menu-float .icon-menu {
  background-color: #595959;
}
.list-menu-float {
  border: #464647 1px solid;
}
svg.icon {
  fill: white !important;
}
.icon-menu:hover:not(.profile) {
  background-color: #2e2f2f !important;
}
.list-menu-float .icon-menu.setting:hover .text  .link-list-setting, .list-menu-float .icon-menu.setting:hover .text  .link-style-setting {
  background-color: #2e2f2f !important;
}
.list-menu-float .icon-menu .text {
  font-size: 16px;
}

/**HEADER MENU**/
.header .header-menu .list-menu .icon-menu {
  color: white;
}
.header .header-menu .list-menu .icon-menu:hover {
  border-bottom: none;
}
.header .header-menu .list-menu {
  border: #464647 1px solid !important;
  background-color: #595959 !important;
  transition: background-color 0.3s;
}
.header .header-menu .list-menu:hover {
  background-color: #2e2f2f !important;
}
.header .header-menu .list-menu .icon-menu svg.icon, .header .header-menu .list-menu .icon-menu svg.icon:hover {
  fill: white !important;
}

/**REMOVE OUTSIDE BORDER**/
.list-container, .list-unit, .list-status-title, .status-menu-container, .list-stats {
  width: 1024px !important;
}

/**COVER**/
.cover-block {
  background: rgba(255, 255, 255, 0) url("https://i.imgur.com/gw7pLMw.gif") no-repeat scroll center center / 100% 100%;
  height: 300px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.41);
}
.cover-block:before {
  content: "GreenZanbato";
  background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
  color: rgba(50, 150, 50, 0.7);
  display: block;
  font-size: 55px !important;
  position: relative;
  text-align: center;
  text-shadow: 1px 2px 6px #000000;
  top: 220px;
  font-family: 'Permanent Marker', cursive;
}

/**STATUS MENU**/
.status-menu-container {
  border-radius: 0 0 25px 25px !important;
  background: #2e2f2f none repeat scroll 0 0;
  line-height: 2.5em !important;
  border-width: 0;
  height: 33px !important;
}
.status-menu-container:after {
  content: "";
  position: absolute;
  width: 1024px;
  height: 30px;
  top: 270px;
  box-shadow: 0 8px 5px -1px rgba(0, 0, 0, 0.41);
}
.status-menu-container.fixed:after {
  top: -30px;
}
.status-menu-container .status-menu {
  border-spacing: 0 !important;
  margin-left: 0;
}
.status-menu-container .status-menu .status-button {
  padding: 0px 38px !important;
  border-collapse: none !important;
  border-spacing: 0 !important;
  box-shadow: none;
  transition: all 0.2s ease 0s;
  color: white !important;
  font-family: Arial,Verdana,Helvetica,sans-serif !important;
  font-size: 13px !important;
}
.status-menu-container .status-menu a.status-button:hover {
  box-shadow: 0 5px 0 0 #5c8ae6 inset;
  transition: all 0.2s ease 0s;
  border-bottom: none !important;
}
.status-menu-container .status-menu .status-button::after {
  background: none;
  display: none;
}
.status-menu-container .status-menu .status-button:first-child {
  border-radius: 0 0 0 25px !important;
}
.status-menu-container .status-menu .status-button.on {
  background: #5c8ae6 none repeat scroll 0 0;
  color: white !important;
  font-weight: normal !important;
}

#search-button, #search-box {
  margin-top: 0 !important;
}
.status-menu-container .search-container #search-button {
  color: white !important;
  transition: color 0.2s;
}
.status-menu-container .search-container #search-button:hover {
  color: #5c8ae6 !important;
  border-bottom: none !important;
}

/**LIST CONTAINER**/
.list-container {
  border: none;
  background: none;
  background: rgba(0, 0, 0, 0.25) none no-repeat scroll 0 0;
  border-radius: 25px 25px 25px 25px;
  box-shadow: 0 36px 12px 2px rgba(0, 0, 0, 0.41);
}
.list-block {
  min-height: 0;
}

/**STATUS TITLE**/
.list-unit .list-status-title {
  margin-top: 20px;
  border-radius: 25px 25px 0 0;
  background-color: #e5e5e5 !important;
  height: 56px !important;
}
.list-unit .list-status-title .text {
  color: #868686 !important;
  font-family: 'Orbitron', sans-serif;
  font-weight: medium !important;
}
.list-unit .list-status-title .stats a {
  color: #868686 !important;
}
.list-unit .list-status-title .stats {
  top: 11px;
}

/**STATS**/
.list-unit .list-stats {
  background: #2e2f2f !important;
  color: white;
}

/**COLUMN HEADERS**/
.list-table .list-table-header .header-title {
  background: #2e2f2f !important;
  border-bottom: none !important;
}
.list-table .list-table-header .header-title .link, .list-table .list-table-header .header-title.tags, .list-table .list-table-header .header-title {
  color: white !important;
}
.list-table .list-table-header .header-title.image a:hover {
  border-bottom: none !important;
}
.list-table .list-table-header .header-title {
  font-size: 11px !important;
}
.list-table .list-table-header .header-title .link.sort {
  transition-property: none;
  display: inline;
}

.list-table {
  border: none !important;
}
.list-table .list-table-header .header-title.image {
  width: 40px;
}
.list-table .list-table-header .header-title.score {
  width: 54px;
}
.list-table .list-table-header .header-title.number, .list-table .list-table-data .data.number {
  display: none;
}

/**LIST ITEMS**/

/*ROWS*/
.list-item {
  background: #464647;
}
.list-item:hover {
  background: #393939 !important;
}
.list-item:hover .data {
  border-bottom: #393939 1px solid !important;
}
.list-table > .list-item:nth-of-type(2n+1) {
  background: #595959;
}
.list-table > .list-item .data {
  border-bottom: #464647 1px solid;
}
.list-table > .list-item:nth-of-type(2n+1) .data {
  border-bottom: #595959 1px solid;
}
.list-table .list-table-data a:hover:not(.edit-disabled) {
  color: white !important;
}

/*NUMBERS*/
.list-table .list-table-data .data.number {
  color: white !important;
}
.add-edit-more, .list-item .data {
  color: white;
}
.list-item .add-edit-more, .list-item .add-edit-more .edit a, .list-item .add-edit-more .more a, .list-item .add-edit-more .add a {
  color: #464647;
}
.list-table > .list-item:nth-of-type(2n+1) .add-edit-more, .list-item:nth-of-type(2n+1) .add-edit-more .edit a, .list-item:nth-of-type(2n+1) .add-edit-more .more a, .list-item:nth-of-type(2n+1) .add-edit-more .add a {
  color: #595959;
}
.list-item:hover .add-edit-more, .list-item:hover .add-edit-more .edit a, .list-item:hover .add-edit-more .more a, .list-item:hover .add-edit-more .add a {
  color: white !important;
}
.list-table .list-table-data .data.title .link, .list-table .list-table-data .data.score .link {
  font-weight: normal;
}
.list-table .list-table-data .tags .edit {
  color: #CCC;
  display: inline;
}
.list-table .list-table-data .tags .edit:hover {
  color: #CCC !important;
}
div[class^="tags"] {
  font-size: 11px;
}
.list-table .list-table-data .data.progress a.icon-add-episode:hover {
  border-bottom: none !important;
  color: #5c8ae6 !important;
}

.list-table .list-table-data .data.image .link {
  border-bottom: none;
}
.list-table .list-table-data .data.image .link .image {
  border-color: white;
  width: 21px;
  height: 30px;
  border-radius: 7px 0px 7px 7px;
  background-color: rgba(248, 162, 200, 0.7);
}
.list-table .list-table-data a.edit-disabled {
  color: white !important;
}
.list-table .more-info {
  border-bottom: none;
  color: #CCC;
}

/**BOTTOM OF LIST**/
.list-unit .loading-space {
  background-color: #2e2f2f;
  border-radius: 0 0 25px 25px;
  margin: 0 !important;
  height: 30px;
}
.list-unit .loading-space #loading-spinner {
  margin-top: 4px;
  color: white;
}

/**FOOTER**/
#footer-block {
  background: none;
  padding-top: 8px !important;
  padding-bottom: 20px !important;
  z-index: 20;
}
#footer-block #copyright {
  color: black;
  font-size: 14px;
}

/**HOVER IMAGE**/
.list-table .list-table-data .data.image .image {
  transition: all 0.2s ease;
  position:absolute;
  margin-left: -12px;
  margin-top: -16px;
  pointer-events: none;
}
.list-table .list-table-data .data.image .link:hover .image {
  width: 96px !important;
  height: 136px !important;
  margin-left: -138px;
  margin-top: -120px;
  background-color: transparent;
  background-repeat: no-repeat no-repeat;
  background-size: cover;
  border-radius: 20px;
  box-shadow: rgba(63, 52, 60, 0.55) 0 0 8px 8px;
  position: absolute;
  z-index: 1;
}
.list-table .list-table-data .data.image .link:before {
  background: transparent;
  content: " ";
  height: 30px;
  width: 21px;
  margin-top: -16px;
  margin-left: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 7px 0px 7px 7px;
  left: 0;
  position: absolute;
  z-index: 20;
}
.list-table .list-table-data .data.title {
  height: 32px !important;
}

/**ADVANCED OPTIONS**/
#fancybox-overlay {
  background-color: black !important;
}
#advanced-options span.widget-header, #advanced-options h2.advanced-options-header, #advanced-options span.text {
  color: white !important;
}
#advanced-options {
  position: fixed;
  background-color: #595959;
  border: #464647 1px solid;
}
#advanced-options .btn-apply, #advanced-options .btn-clear {
  background-color: white !important;
  color: black !important;
}
#advanced-options .btn-apply:hover, #advanced-options .btn-clear:hover {
  border-bottom: none !important;
  background-color: #5c8ae6 !important;
}
#advanced-options #fancybox-close {
  top: 0px !important;
  right: 0px !important;
  background: none !important;
  border-bottom: 0px solid transparent !important;
}
#advanced-options .sort-widget input[type="radio"]:checked + label {
  background-color: #5c8ae6;
  border: #5c8ae6 1px solid;
  color: black;
}
#advanced-options #fancybox-close::before {
  content: "";
  display: block;
  width: 4px;
  height: 24px;
  background-color: #CCC;
  border-radius: 2px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 4px;
  right: 14px;
  transition: background-color 0.15s ease-in-out;
}
#advanced-options #fancybox-close:after {
  content: "";
  display: block;
  width: 4px;
  height: 24px;
  background-color: #CCC;
  border-radius: 2px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  top: 4px;
  right: 14px;
  transition: background-color 0.15s ease-in-out;
}
#advanced-options #fancybox-close:hover:before, #advanced-options #fancybox-close:hover:after {
  background-color: white;
}

/**FANCY BOX**/
#fancybox-wrap #fancybox-outer {
  background-color: #595959;
  border: #464647 1px solid;
}
#fancybox-frame {
  background-color: white !important;
}
#fancybox-inner div {
  color: white !important;
}
#fancybox-wrap #fancybox-close {
  border-bottom: none !important;
}