Hydra.css

/* CSS placed here will affect users of the Hydra skin */

/***** GENERAL STYLES *****/
/* Body */
body {
	background: #eef2f4 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAABCAIAAADW7TIxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QMVAB4U/zBUWAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAEUlEQVQY02OUlFVgGAXDFwAApKUAWOLbFvoAAAAASUVORK5CYII=") repeat-y left top;
}

@media (max-width: 720px) {
	body {
		background: #eef2f4;
	}
}
/***** HEADER STYLES *****/
/** Logo **/
#p-logo {
  top: -140px;
  width: 160px;
  height: 160px;
  left: 0;
}

body.rootpage-Raft_Wiki.ns-0 #p-logo { 
  left: calc( 50vw - 75px );
  top: -320px;
}

#p-logo a {
  width: 160px;
  height: 160px;
}

/** Header styles **/   
div#mw-page-base {
    background: #EEF2F7 url(https://static.wikia.nocookie.net/raft_gamepedia_en/images/7/7d/Raft-Background.jpg/revision/latest) no-repeat center center / cover !important;
    height: 128px;
    margin-bottom: 0.7em;
}

body.rootpage-Raft_Wiki.ns-0 div#mw-page-base {
    background: #eef2f4 url(https://static.wikia.nocookie.net/raft_gamepedia_en/images/a/a6/Header.png/revision/latest) !important;
    /*background: #eef2f4 url(https://static.wikia.nocookie.net/raft_gamepedia_en/images/4/4e/Header-Christmas.png/revision/latest) !important;*/
    height: 326px;
    margin-bottom: 0.1em;
}

#mw-head {
   top:  57px;
   left: -20px;
   background: transparent;
}

@media (max-width: 720px) {
    div#mw-head {
        top: 62px;
    }
}  
body.rootpage-Raft_Wiki.ns-0 div#mw-head {
    top: 254px;
}

/***** ARTICLE NAVIGATION *****/
#p-search,
div.vectorMenu,
div.vectorTabs {
	background: transparent;
	font-size: 90%;
    opacity: 0.95;
}

/* sizing and font styles for non-active tabs */
div#mw-head div.vectorMenu h3 span,
div#mw-head div.vectorTabs span a {
	color: #000;
	height: 1.25em;
	padding: 0;
	font-size: 100%;
	text-decoration: none;
}

/* allow space for the vectormenu arrows */
div#mw-head div.vectorMenu h3 span {
	padding-right: 15px;
	vertical-align: top;
}

div#mw-head div.vectorMenu h3 span:after {
	top: 0;
}

/* padding/sizing and aesthetic styles for the background of the tabs */
div#mw-head div.vectorMenu h3,
div#mw-head div.vectorTabs ul li span {
	background: #eee;
	border-radius: 2px;
	padding: 0.5em;
	margin: 0 0.25em;
	height: 1em;
	line-height: 1;
	overflow: visible;
}

/* styles for the currently selected tab and on-hover dropdown menus */
div#pageWrapper div#mw-navigation li.selected a {
	color: #FFF;
}

div.vectorMenu div.menu,
div#mw-head div.vectorMenu:hover h3,
div#mw-head div.vectorTabs ul li span:hover{
	background: #fff;
}

div#mw-head div.vectorTabs ul li.selected span {
	    background: -webkit-radial-gradient(center, ellipse cover, rgba(181,153,99,1) 0%, rgba(144,114,69,1) 100%); /* safari5.1+,chrome10+ */
}

/* clear border-radius on the bottom of the dropdown menu on hover */
div#mw-head div.vectorMenu:hover h3 {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* reset backgrounds on various parts of the dropdown menu to allow custom styles to show */
div.vectorMenu:hover ul,
div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs ul li.selected {
	background: transparent;
}

/* position the dropdown menu to properly align with the bottom of the tabs */
.vectorMenu .menu {
	top: 2em;
	border: 0;
	right:unset;
	left:3px;
}

/* clean up links in dropdown menu */
div#mw-navigation div.vectorMenu div.menu li a {
	padding: 0.3em;
	font-size: 90%;
	display: block;
	height: auto;
	margin: auto;
}

/* style watch button to fit inside tabs */
div#mw-head #p-views #ca-unwatch.icon a,
div#mw-head #p-views #ca-watch.icon a {
	background-size: 1.5em;
	height: 0;
	margin: -0.25em 0;
	padding-top: 1.5em;
	background-position: center center;
}

/***** SEARCH *****/
div#simpleSearch {
	background: #fff;
	height: 1.95em;
	border: 0;
	margin: 0;
	padding-left: 0.5em;
    top: -5px;
}
/* sizing and aesthetic styles for search input */
div#simpleSearch #searchInput {
	color: #000;
	padding: 0.2em 0;
	height: 1.95em;
	box-sizing: content-box;
	text-overflow: ellipsis;
    font-size: 90%;
}

/* styling for the search placeholder text */
div#simpleSearch #searchInput::placeholder {
	color: #000;
	opacity: 0.7;
}

/*** Search suggestions ***/
.skin-hydra .suggestions-results .suggestions-result .highlight {
  color: #0396f7;
}

.skin-hydra .suggestions-result-current {
  background: #0088d0 !important;
  color: #ffffff;
}

.skin-hydra .suggestions-results .suggestions-result-current .highlight {
  color: #89b0ca;
}

/***** SITENOTICE *****/
#localNotice {
	width: auto;
	border-radius: 7px;
	border: none;
	background: rgb(249, 249, 249);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	color: #000;
	margin: 0 0 10px 0;
	padding: 3px 6px;
}

/***** SIDEBAR *****/
div#mw-panel {
   top:115px;
   width: 160px;
   left: -10px;
}

body.rootpage-Raft_Wiki.ns-0 div#mw-panel{
    top:310px;
}

div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:visited {
    color: #FFF;
}

div#mw-panel div.portal h3,
.skin-hydra #mw-panel.collapsible-nav .portal h3 a,
.skin-hydra #mw-panel.collapsible-nav .portal h3 a:visited,
.skin-hydra #mw-panel.collapsible-nav .portal.collapsed h3 a,
.skin-hydra #mw-panel.collapsible-nav .portal.collapsed h3 a:visited {
    color: #FFF;
    font-weight: bold;
    font-size: 100%;
}

div#mw-panel div.portal div.body ul li a:hover {
    color: #FFF;
}

/***** CONTENT *****/
/*** General ***/
div#content {
  border: none;
  background: #eef2f4;
  color: #343c46;
}

div#content #firstHeading {
  border-bottom: 1px solid #c0cdd2;
  color: #343c46;
}

body.rootpage-Raft_Wiki.ns-0.action-view div#content #firstHeading {
  display: none;
}

/*** FPboxes ***/
.fpbox {
    background: rgb(249, 249, 249);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    color: #000;
}

.fpbox .welcome {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    color: #000;
}

.fpbox .heading {
    border-bottom: 2px solid #191e22;
    color: #000;
}

/*** Links ***/
a:link, a:visited {
  color: #007f9a;
}

a:extiw {
  color: #007f9a;	
}

a:active {
  color: #007f9a;
}

a.new {
	color: #FF0000;
}
/*** Table of content ***/
div.toc, div#toc {
    border-radius: 7px;
    border: none;
    background: #f9f9f9;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    color: #343c46;
    margin: 0 0 10px 0;
    padding: 3px 6px;
}

/*** Lists ***/
ul {
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANAQMAAABb8jbLAAAABlBMVEUAAAAufMCPWiZvAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhAxQGNS+EelvCAAAAFUlEQVQI12NgQAEFDA0MHQwcQJoBAA6aAfGXImSHAAAAAElFTkSuQmCC");
}

/*** Wikitable ***/
/* Won't be implemented now to test new design */

/*** Navboxes ***/
.navbox {
	background: #FFF;
	border: 1px solid #CCC;
}

.navbox table {
	background: #FFF;
}

.navbox .navbox-top {
	background-color: #CCC;
}

.navbox th {
	background-color: #EEE;
}

/*** Galleries ***/
li.gallerybox {
    border-radius: 7px;
    border: none;
    background: #f9f9f9;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    color: #343c46;
    margin: 0 0 10px 0;
    padding: 3px 6px;
}

li.gallerybox div.thumb {
  border: none;
  background: #f9f9f9;
  color: #343c46;
}

div.gallerytext {
  text-align: center;
}

div.thumb {
  border: none;
  background: transparent;
  color: #343c46;
}

.thumb.tleft {
  margin: 0 20px 10px 0;
}

.thumb.tright {
  margin: 0 0 10px 20px;
}

div.thumbinner {
    border-radius: 5px;
    border: none;
    background: #f9f9f9;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    color: #343c46;
    margin: 0 0 10px 0;
    padding: 3px 5px !important;
}

html .thumbimage {
  border: none;
  background: #eef2f4;
  color: #343c46;
}

/*** Codes and pre-formated code ***/
pre, .skin-hydra .mw-code {
    border: 1px dashed #c0cdd2;
    background: #f9f9f9;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    color: #343c46;
    padding: 5px 5px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

code {
  background: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*** Category links ***/
#catlinks {
    border-radius: 4px;
    border: none;
    background: #f9f9f9;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    color: #343c46;
    margin: 10px 0 10px 0;
    padding: 3px 6px;
}

#catlinks li {
  border-left: 1px solid #c0cdd2;
}

#catlinks li:first-child {
  border-left: none;
}

/*** Fixes ***/
#pagehistory li{
border:none;
}

/***** EDITOR *****/
/* Drop files here (msupload)*/
#msupload-div {
	background: #0e89a5;
}

/***** FOOTER *****/
div#footer {
  box-sizing: border-box;
  border: none;
  background: #eef2f4;
  color: #343c46;
}

/*** For elements which only display in the mobile view ***/
.mobileonly {
  display: none;
}

.uppermarks {
	float: right;
}