/**
- General stuff applied to every element (like "ul" or "body")
- Top Menu stuff
*/
/* General */
@font-face {
font-family:"Open Sans";
/*src:url('font/OpenSans-Regular.otf');*/
/*url('webfont.eot?#iefix') format('embedded-opentype'), IE6-IE8 */
/*url('font/OpenSans-Regular.svg#svgFontName') format('svg'); Legacy iOS */
src: local("Open Sans"),
url('../font/OpenSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/OpenSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
url('../font/OpenSans-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/OpenSans-Regular.eot'); /* IE9 Compat Mode */
font-style:normal;
}
@font-face {
font-family:"Open Sans";
/*src:url('font/OpenSans-Regular.otf');*/
/*url('webfont.eot?#iefix') format('embedded-opentype'), IE6-IE8 */
/*url('font/OpenSans-Regular.svg#svgFontName') format('svg'); Legacy iOS */
src: local("Open Sans"),
url('../font/OpenSans-Bold.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/OpenSans-Bold.woff') format('woff'), /* Pretty Modern Browsers */
url('../font/OpenSans-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/OpenSans-Bold.eot'); /* IE9 Compat Mode */
font-style:normal;
font-weight:bold;
}
/* Elements */
body{
font-family: "Open Sans", sans-serif;
font-size:15px;
padding:0;
margin:0;
background-color: #002448;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
sup{
line-height:0;
font-size:8px;
}
a{
color:inherit;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
/* Navigation Menu */
#topNavi{
min-width:1130px;
background-color:#0B0C0C;
border-bottom:1px solid #1D1D1D;
font-size:16px;
height:62px;
padding: 0 50px;
margin: 0;
-webkit-box-shadow: 0 0 0 1px black;
-moz-box-shadow: 0 0 0 1px black;
box-shadow: 0 0 0 1px black;
}
/*#topNavi::after{
background:black;
height:1px;
display:block;
position:absolute;
margin:1px 0;
padding:0;
left:0;
width:100%;
content:'';
}*/
#topNavi ul {
color:white;
/*width:1000px;*/
display:inline-block;
}
#topNavi > ul{
display:block;
}
#topNavi li {
margin:0;
padding:0;
display:inline-block;
float:left;
}
#topNavi > ul a > span:nth-of-type(2){
display:none;
}
#topNavi > ul a{
color:white;
padding:20px 15px;
margin:0;
display:inline-block;
text-decoration:none;
height:22px;
vertical-align:top;
min-width:50px;
text-align:center;
}
/*#topNavi > ul > li > a:hover*/
/*#topNavi > ul > li:not(:last-of-type):hover,*/
#topNavi > ul > li:not(.noHighlight):hover {
color:#009FFF;
background-color:#131313;
}
#topNavi li.menuSelected{
background-color:#131313;
}
#topNavi > ul > li:first-child a{
text-transform: uppercase;
font-size:14px;
font-family:sans-serif, Arial;
padding:23px 15px 17px;
/*padding:23px 15px 17px 40px;
background-image:url('../img/icons/user.png?v=0');
background-repeat:no-repeat;*/
background-position:15px 24px;
/*max-width:140px;*/
width:150px;
}
#topNavi > ul > li:first-child a:hover{
color:#FFFF33; /*#21D220;*/
}
/*#topNavi > a{
display:inline-block;
float:right;
margin:30px 30px 30px 0;
}
#topNavi > a:hover{
color:#FF4040;
}*/
#topNavi li.bigMac{
background-image: url('../img/icons/hisoBig.png?v=3');
background-position: -82px -92px;
background-repeat: no-repeat;
}
#topNavi li.bigMac > a{
text-align:left;
padding-left: 35px;
min-width:0;
}
#topNavi .mobileElement{
display:none;
}
/* Navigation Sub-menu */
#topNavi li ul:not(.dropdownMenu){
/* this needs to be disabled by jQuery for js animation to work
and to be removed completely for CSS3 animations
display:none;*/
/*width:400px;*/
height:22px;
}
/*#topNavi li:hover ul:not(.dropdownMenu){
display:inline-block;
}*/
#topNavi li ul:not(.dropdownMenu) li{
margin:0;
padding:0; /*0 5px;*/
font-size:85%;
}
#topNavi li ul:not(.dropdownMenu) li a{
padding-right:10px;
padding-left:10px;
/*padding-left:5px;*/
/*padding-bottom:5px;*/
min-width:auto;
color:#aaa;
}
#topNavi li ul:not(.dropdownMenu) li a:hover span{
color:white;
border-bottom:3px solid #009FFF; /* green */
}
#topNavi li ul li a span{
padding:0 2px 5px;
}
#topNavi li ul:not(.dropdownMenu) li a:before{
content: "\003C\0020";
font-size:85%;
}
/*
#topNavi li ul:not(.dropdownMenu):last-of-type{
margin-left:10px;
}*/
#topNavi li ul:not(.dropdownMenu):last-of-type a{
padding-top: 22px;
padding-bottom: 18px;
}
/* CSS3 animation test
#topNavi li ul li{
margin:0;
padding:0;
width:0;
/*opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#topNavi li:hover ul li{
opacity:100;
width:auto;
padding:0 15px;
}*/
/* topNavi form style on button.css */
/* Search result print (tooltip on Navi) */
#topNavi .dropdownMenu{
display:none;
position:absolute;
width:200px;
max-width:200px;
z-index: 50;
top:50px;
margin:1px;
/*padding:10px 0;*/
background-color:black;
border-width:1px 1px 0 1px;
border-style:solid;
border-color:#1D1D1D;
-webkit-box-shadow: 0 0 0 1px black;
-moz-box-shadow: 0 0 0 1px black;
box-shadow: 0 0 0 1px black;
}
/*#topNavi .dropdownMenu li:first-of-type{*/
#topNavi .dropdownMenu li span{
color:#333;
font-size:10px;
padding:2px 10px;
}
/* leaves a little space to the first span */
#topNavi .dropdownMenu li:not(:first-of-type) span{
display:block;
}
#topNavi .dropdownMenu li{
display:block;
float:none;
border-bottom:1px solid #1D1D1D;
}
#topNavi .dropdownMenu a{
text-align:left;
display:block;
padding:5px 10px;
font-size:14px;
color:white;
text-decoration:none;
}
#topNavi .dropdownMenu a:hover{
color:#009FFF;
background-color:#0B0C0C;
}
#topNavi > ul > li:hover > .dropdownMenu{
display:block;
}
#topNavi .dropdownMenu div{
position:absolute;
z-index: 999;
margin:0;
padding:0;
border:0;
top:-8px;
left:10px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid black;
}
#topNavi .dropdownMenu div.right{
right:10px;
left: auto;
float:none;
}
#topNavi .dropdownMenu div:before {
content:'';
position: absolute;
top: 1px;
left:-6px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #1D1D1D;
}
#topNavi .dropdownMenu div:after {
content:'';
position: absolute;
top: 3px;
left:-5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
/* "this is a preview" annuncement on index.php */
#notice{
position:fixed;
top:140px;
left:50%;
margin: 0 0 0 -125px;
background:rgba(0,0,0,0.8);
width:250px;
color:white;
z-index:9999;
padding:10px;
font-size:10px;
}
/* Classes */
/* Container of each page. jQuery loads these divs... */
.mainCont{
width:1115px;
color:white;
padding: 0 50px;
margin: 10px auto;
}
/* ...and hide them */
.hidden{
display:none;
}
.show{
display:inline-block;
}
.clear{
clear:both;
}
/* general stuff container */
.fullpage{
width:780px;
padding:30px 20px 20px;
margin: 60px auto 50px;
}
.fullpage > *{
margin-left:20px;
}
.fullpage .spaced{
margin-top:50px;
}
.with_bg{
background-color: #001224; /*rgba(0, 0, 0, 0.5)*/
}
.with_bg .filterBar{
float:none;
width:auto;
margin: 30px 0 35px; /* m-right same as .titleBar */
}
.filterBar.warning{
background-position: 15px;
padding-left: 45px;
}
/*ul.alert.filterBar:after{*/
.fullpage ul.filterBar:after{
clear: both;
content: "";
display: block;
}
.fullpage.with_bg .filterBar + .filterBar,
.content.with_bg .filterBar + .filterBar{
margin-top:-20px;
}
.fullpage .bounded{
display:inline-block;
padding: 1px 5px;
margin: 0 3px;
background-color: rgba(0,0,0,.5);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.fullpage .bounded.spaced{
margin-top:2px;
margin-bottom:2px;
padding:4px 6px;
}
/* that long horizontal bar used for separating Categories (Chara, Items, Otomos, Settings, ...) */
.titleBar{
background: rgba(0, 0, 0, 0.2);
/*width:100%;*/
height:8px;
/*margin:40px 12px 15px 0;*/
margin:30px 0 15px 0;
clear:both;
/*position:relative;
top:15px;*/
font-size:16px;
}
.titleBar a{
margin-left:15px;
text-decoration:none;
}
/* background colors for .titlebar */
/*.darkbg{
background-color:#000e1d;
}*/
.darkbg *{
background-color:#001224;
}
/*.lightbg{
background-color:#001d3a;
}*/
.lightbg *{
background-color:#002448;
}
/* filters for groups */
.canToggleGroup input[type='checkbox']{
display:none;
}
.canToggleGroup input[type='checkbox']:checked + div + ul {
display:none;
}
.titleBar > *{
position:relative;
top:-8px;
display:inline-block;
padding:0 12px;
margin-left:20px;
}
.titleBar > div label {
/*border-width: 0 0 2px 0;
border-color: #500404;*/
height: 26px;
width: 26px;
position:relative;
top:-2px;
left:-2px;
margin: 0;
padding: 6px 0;
color: white;
box-sizing: border-box;
vertical-align: top;
line-height: 0.7;
font-size: 20px;
text-align: center;
border-bottom:3px solid green;
}
/*.titleBar div label:hover {
border-color: #bd8e09;
}*/
.canToggleGroup input[type='checkbox']:checked + div label {
border-color: transparent;
}
.titleBar > div label:before {
content: '+';
}
.hasTooltip{
position:relative;
}
div.minTooltip{
display:none;
position: absolute;
top: 35px;
right: 0;
width: 130px;
background: black;
text-align: left;
padding: 8px 12px;
float:right;
border:1px solid #1D1D1D;
font-size:12px;
z-index:100;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.minTooltip:before{
content:'';
position: absolute;
top: -6px;
right: 6px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #1D1D1D;
}
.minTooltip:after{
content:'';
position: absolute;
top: -4px;
right: 7px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.fullpage .minTooltip:before{
right: 17px;
}
.fullpage .minTooltip:after{
right: 18px;
}
.hasTooltip:hover > .minTooltip{
display:block;
}
.startDate,
.endDate{
display:inline-block;
}
.startDate:before,
.endDate:before{
display:inline-block;
}
.startDate{
margin-left:20px;
}
.endDate:before{
content: '\00BB';
padding-left:10px;
padding-right:10px;
}
/* alerts and messages */
.redAlert{
width:230px;
padding:5px 10px 8px 10px;
position:fixed;
background-color:#9C1C1C;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
z-index: 9999;
}
/* Bottom-right Banners */
/* Generic */
#notifyCont{
position:fixed;
bottom:20px;
/*right:20px;*/
left:65px;
z-index: 9999;
}
#notifyCont > div{
position: relative;
margin-top:10px;
display:block;
color:white;
background-repeat:no-repeat;
width: 397px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border: 8px solid rgba(0,0,0,.8);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
#notifyCont * {
color:white;
font-size:12px;
}
/*#notifyUpdate *{
display:inline-block;
position:static;
margin: 0 5px 10px 0;
}*/
#notifyTutorial{
background-position: 0 0, 0;
background-image:url(../img/icons/notifyCont.png?v=1);
background-color: rgba(16,89,179,1);
background-image: url(../img/icons/notifyCont.png?v=1), -moz-linear-gradient(top, rgba(16,89,179,1) 0%, rgba(24,62,132,1) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -webkit-gradient(left top, left bottom, color-stop(0%, rgba(16,89,179,1)), color-stop(100%, rgba(24,62,132,1)));
background-image: url(../img/icons/notifyCont.png?v=1), -webkit-linear-gradient(top, rgba(16,89,179,1) 0%, rgba(24,62,132,1) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -o-linear-gradient(top, rgba(16,89,179,1) 0%, rgba(24,62,132,1) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -ms-linear-gradient(top, rgba(16,89,179,1) 0%, rgba(24,62,132,1) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), linear-gradient(to bottom, rgba(16,89,179,1) 0%, rgba(24,62,132,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1059b3', endColorstr='#183e84', GradientType=0 );
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d26120', endColorstr='#af441a', GradientType=0 ); */
}
#notifyHardMode{
background-position: 0 -215px, 0;
background-image:url(../img/icons/notifyCont.png?v=1);
background-color: rgba(150,15,15,1);
background-image: url(../img/icons/notifyCont.png?v=1), -moz-linear-gradient(top, rgba(150,15,15,1) 0%, rgba(117,7,7,1) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -webkit-gradient(left top, left bottom, color-stop(0%, rgba(150,15,15,1)), color-stop(100%, rgba(117,7,7,1)));
background-image: url(../img/icons/notifyCont.png?v=1), -webkit-linear-gradient(top, rgba(150,15,15,1) 0%, rgba(117,7,7,1) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -o-linear-gradient(top, rgba(150,15,15,1) 0%, rgba(117,7,7,1) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -ms-linear-gradient(top, rgba(150,15,15,1) 0%, rgba(117,7,7,1) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), linear-gradient(to bottom, rgba(150,15,15,1) 0%, rgba(117,7,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#960f0f', endColorstr='#750707', GradientType=0 );
}
#notifyUpdate,
#notifyUpdateWebsite,
#notifyTBF{
background-position: 0 -80px, 0;
background-image:url(../img/icons/notifyCont.png?v=1);
background-color: rgb(24,155,120);
background-image: url(../img/icons/notifyCont.png?v=1), -moz-linear-gradient(top, rgb(24,155,120) 0%, rgb(10,95,85) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -webkit-gradient(left top, left bottom, color-stop(0%, rgb(24,155,120)), color-stop(100%, rgb(10,95,85)));
background-image: url(../img/icons/notifyCont.png?v=1), -webkit-linear-gradient(top, rgb(24,155,120) 0%, rgb(10,95,85) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -o-linear-gradient(top, rgb(24,155,120) 0%, rgb(10,95,85) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), -ms-linear-gradient(top, rgb(24,155,120) 0%, rgb(10,95,85) 100%);
background-image: url(../img/icons/notifyCont.png?v=1), linear-gradient(to bottom, rgb(24,155,120) 0%, rgb(10,95,85) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#189b78', endColorstr='#0a5f55', GradientType=0 );
}
#notifyHardMode.warningBG{
background-position: 0 -150px, 0;
}
#notifyCont .notification{
color:white;
height: 80px;
background-repeat: no-repeat;
display: block;
text-align:right;
}
#notifyCont .notification > *{
display:block;
text-align:left;
margin: 12px 15px 0 100px;
}
#notifyCont .notification a:not(.dismiss){
text-decoration:underline;
}
#notifyCont .notification > a.dismiss{
display:inline-block;
float:left;
margin-top:5px;
}
#notifyCont .notification > a.dismiss:before{
content: '\00BB';
margin-right: 10px;
margin-left:10px;
display:inline-block; /* removes the underline effect */
}
#notifyCont .notification .yellow{
color: yellow;
text-shadow: 0px 0px 1px black;
}
/*
#notifyCont #notifyUpdate{
height:115px;
background-color:black;
background-image:url('../img/updateBG.png');
text-align:right;
-webkit-background-clip: initial; /* for Safari
background-clip: initial; /* for IE9+, Firefox 4+, Opera, Chrome
}
#notifyUpdate .more,
#notifyUpdate .text{
background-color: rgba(0,0,0,.95); /* #00050b;
margin-top: 80px;
}
#notifyUpdate :last-child{
margin-right:10px;
}
#notifyUpdate .dismiss{
position:absolute;
top:10px;
right:10px;
display:block;
padding: 5px 12px;
margin:0;
color:white;
}
#notifyUpdate .text{
float:left;
margin-left:20px;
display:block;
padding: 4px 12px;
background-color: rgba(0,0,0,.95);
}
*/
/* CSS menu used on mobile */
.cssMenuMobile > .mobileTab > input,
.cssMenuMobile > .mobileTab > label,
div.cssMenuMobile > input[type=radio] + label{
display:none;
}
div.cssMenuMobile > input[type=radio] + label ~ div{
display:block;
margin-top:0;
}
/* colors - !important is required for making them work everywhere */
.golden{
color:gold !important;
border-color:#676700 !important;
}
.grayed{
color:#666 !important;
/*text-decoration: line-through;*/
}
.orange{
color:orange !important;
border-color:#676700 !important;
}
.white{
color:white !important;
border-color:#777 !important;
}
.whiteColor{
color:white !important;
}
.cyan{
color:#21DFFF !important;
border-color:#33B3FF !important;
}
.skyblue{
color:skyblue !important;
}
.red{
color: #d83838 !important;
border: 1px solid #e22929 !important;
}
.bolded{
font-weight: bold;
}
.underlined{
/* some links have an higher priority rule that prevents the text-decoration effect */
text-decoration: underline; /* !important; */
}
.twitter-timeline{
display:block;
margin-bottom:20px;
}
input.toggleNext{
display:none;
}
input.toggleNext:checked + *{
display:block;
}
input.toggleNext + *{
display:none;
}
.loading,
.warning{
margin: 5px 0 0 0;
padding: 0 0 5px 35px;
}
/* tooltip boxes */
[data-title]{
position:relative;
}
[data-title]:not(a):not(label):hover{
cursor:help;
}
[data-title].hasTTonLeft:after{
right:auto;
left:0;
}
[data-title].hasTTonCenter:after{
transform: translate(-50%, 0); /* issues on very old browsers and on opera mini */
left: 0;
}
[data-title].hasHugeTTonLeft:after{
width: 270px;
left: -300px;
top: 0;
bottom: auto;
}
[data-title].hasDelayedTT:hover:after{
-webkit-transition: visibility 0s linear .8s;
-moz-transition: visibility 0s linear .8s;
-o-transition: visibility 0s linear .8s;
transition: visibility 0s linear .8s;
}
[data-title].hasMediumTT:after{
width: 125px;
bottom:-44px;
}
[data-title].hasBigTT:after{
width: 225px;
bottom:-44px;
}
[data-title].hasHugeTT:after{
width: 270px;
bottom:-44px;
}
[data-title].hasTTClose:after{
bottom:-30px;
}
[data-title]:after{
background: rgba(0,0,0,0.9);
content:attr(data-title);
position:absolute;
bottom:-27px;
right:0;
font-size:12px;
padding:5px 10px;
width:90px;
color:white;
text-transform:none;
font-weight: normal;
text-align:left;
visibility: hidden;
z-index:999;
white-space: pre-line;
display:block;
}
.hasGoldenTT[data-title]:after{
color: gold;
}
[data-title]:hover:after{
visibility: visible;
-webkit-transition: visibility 0s linear .5s;
-moz-transition: visibility 0s linear .5s;
-o-transition: visibility 0s linear .5s;
transition: visibility 0s linear .5s;
}
.mz-table[data-title]:after{
top: 39px;
bottom:auto;
}
.fullpage :not(.listerTooltip) > hr{
height: 1px;
display:block;
border:0;
border-bottom: 1px solid #020202;
-webkit-box-shadow: 0 1px 0px 0px #03213c;
-moz-box-shadow: 0 1px 0px 0px #03213c;
box-shadow: 0 1px 0px 0px #03213c;
}
.loading{
background-image:url('../img/icons/loading.gif?v=0');
background-repeat: no-repeat;
background-size: 20px;
}
.jsOnly{}
.warning{
padding-left:35px;
display:none;
background-image:url('../img/icons/warning.png?v=0');
background-repeat: no-repeat;
}
/**
- Lister
- more (filters) to come
*/
/** ##########################
Lister Element
########################### */
/* main ul */
.lister{
/*float:left;
margin-top:49px;
margin-bottom:50px;*/
margin-bottom:5px;
padding:0 0 20px 0;
/*clear:both;
overflow-y:auto;
background-color:#001224;*/
}
/* entry */
.lister > li {
background-repeat: no-repeat;
/*background-position: 9px 9px;*/
background-color: rgba(0, 0, 0, 0.5); /*#001224;*/
/*background-size: 48px;*/
display: inline-block;
vertical-align: top;
/*width: 200px;*/
min-height: 66px;
margin: 10px 10px 0 0;
/*float: left;*/
position:relative;
}
.lister > li.color2{
background-color: rgba(0, 0, 0, 0.75); /*#000912;*/
}
/* text container */
.lister > li > ul:first-of-type{
background-repeat: no-repeat;
height:48px;
width: 135px;
/*position:relative;*/
display:inline-block;
padding:12px 0 0 65px;
}
.lister .bordered{
margin-top:2px;
}
#contRight .lister .bordered{
margin-top:0;
}
/* %SB and levels */
/* the > div is for the tooltip inside the tooltip (.hasTooltip) */
.lister .bordered p, .lister .bordered a, .lister .bordered > div, p.bordered.loadout{
display:inline-block;
height:16px;
width:16px;
padding:2px;
margin:0 2px 0 0;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*border:1px solid #00050b; rgba(0,0,0,0.4)*/
background-color: #000912; /*#00050b; rgba(0,0,0,0.4)*/
border: 1px solid #222;
color: #9C9492;
font-size: 11px;
vertical-align:top;
}
@supports (-ms-ime-align:auto) {
.lister .bordered p, .lister .bordered a, .lister .bordered > div, p.bordered.loadout {
border-radius: 0;
/* border-radius currently causes the image contained in here to blur;
not my fault, but Microsoft's, reason why I changed it to 0
mozzarella firefox looks at the border radius property, instead of the -moz one, so I had to define this special case */
}
}
.lister .bordered span{
font-size:11px;
color:#9C9492;
margin-top: 5px;
display: inline-block;
}
.lister .color2 .bordered p{
background-color: #00050b;
}
/* Weapons and Element drawn inside a bordered p */
span.text.stats{
display: inline-block;
width: 19px;
height: 19px;
vertical-align: top;
}
.lister p.loadout,
.stats.loadout,
p.bordered.loadout{
background-image:url('../img/icons/loadout.png?v=2');
background-repeat:no-repeat;
/*background-position-x: -52px;*/
position:relative;
}
.stats{
position: relative;
}
.loadout.sword{
background-position: -80px 1px;
}
.loadout.bow{
background-position: -80px -19px;
}
.loadout.spear{
background-position: -80px -39px;
}
.loadout.staff{
background-position: -80px -59px;
}
.loadout.none{
background-position: -80px -79px;
}
.loadout.attribute::after,
.stats.attribute::after{
display: block;
background-image: url('../img/icons/loadout.png?v=2');
background-repeat: no-repeat;
content: "";
width:11px;
height:11px;
position:absolute;
bottom:-3px;
right:-3px;
}
.loadout.attribute.fire::after,
.stats.attribute.fire::after{
background-position: -83px -102px;
}
.loadout.attribute.ice::after,
.stats.attribute.ice::after{
background-position: -83px -114px;
}
.loadout.attribute.lightning::after,
.stats.attribute.lightning::after{
background-position: -83px -126px;
}
.loadout.attribute.dark::after,
.stats.attribute.dark::after{
background-position: -83px -138px;
}
.loadout.attribute.heal::after,
.stats.attribute.heal::after{
background-position: -83px -150px;
}
.loadout.attribute.remedy::after,
.stats.attribute.remedy::after{
background-position: -83px -162px;
}
.loadout.attribute.photon::after,
.stats.attribute.photon::after{
background-position: -83px -174px;
}
.loadout.attribute.gravity::after,
.stats.attribute.gravity::after{
background-position: -83px -186px;
}
.loadout.skill{
background-position: -99px 0px;
}
.loadout.lv{
background-position: -99px -20px;
}
.loadout.exp{
background-position: -99px -43px;
}
.loadout.coin{
background-position: -99px -66px;
}
.loadout.hp{
background-position: -99px -87px;
}
.loadout.atk{
background-position: -99px -109px;
}
.loadout.matk{
background-position: -99px -132px;
}
.loadout.def{
background-position: -99px -155px;
}
.loadout.mdef{
background-position: -99px -177px;
}
.loadout.next{
background-position: -99px -200px;
}
/* ...more icons */
.upgradeIcon{
background-image:url('../img/icons/iconset.png?v=4');
background-repeat:no-repeat;
background-position: -97px 0;
}
.upgradeIconGold{
background-image:url('../img/icons/iconset.png?v=4');
background-repeat:no-repeat;
background-position: -97px -23px;
}
.tradeIcon{
background-image:url('../img/icons/iconset.png?v=4');
background-repeat:no-repeat;
background-position: -152px -48px;
}
.luckIcon{
background-image:url('../img/icons/iconset.png?v=4');
background-repeat:no-repeat;
background-position: -200px 0;
}
.lister .bordered .stretched{
width:auto;
padding-left:4px;
padding-right:4px;
min-width: 12px;
}
/* %SB (for characters), level (for Otomos) */
.lister p.widerBorder, .lister a.widerBorder{
vertical-align:middle;
margin-right:10px;
width:32px;
/*color:gold;*/
color:white;
}
/*.lister p.goldenborder, .lister a.goldenborder{
color:gold;
border-color:#676700;
}
.lister p.whiteborder, .lister a.whiteborder{
color:white;
border-color:#777;
}
.lister p.cyanborder, .lister a.cyanborder{
color:#21DFFF;
border-color:#33B3FF;
}/*
.lister > li > ul li{
height:19px;
}
/* mark for infinite grinding stages */
.bordered p.special{
color:gold;
border-color: orange;
margin-right: 8px;
margin-left: -2px;
}
/* first child (name) */
.lister li > ul li:first-of-type a{
vertical-align:top;
font-size:14px;
}
/*.lister li > ul li a{
vertical-align:top;
color:white;
font-size:14px;
text-decoration:none;
}
.lister li > ul li a:hover{
text-decoration:underline;
}*/
/* the old "EXP" button for Otomos... */
/* ...and the new button */
.lister label.more, .lister a.more, .more{
z-index:100;
position:absolute;
bottom:10px;
right:8px;
color:white;
background: #00050b; /*rgba(0,0,0,0.5)*/
font-size:11px;
padding:3px 10px 2px;
/*border-bottom:3px solid #00050b; rgba(0,0,0,0.5)*/
border-bottom:3px solid #0A77B9;
cursor:pointer;
}
.lister label.more:hover, .lister a.more:hover, .more:hover{
background-color: #000303;
border-color:green;
text-decoration:none;
}
.lister a.more{
display:none;
}
.lister a.alwaysVisible{
display:block;
}
.lister li:hover a.more{
display:block;
}
.lister input{
display:none;
}
.lister input:checked ~ label {
background-color: #000303;
border-color:green;
}
.lister input:checked ~ ul li.bordered{
display:none;
}
.lister input:checked ~ ul li.toggledLi{
display:block;
}
.lister .toggledLi{
margin-top:8px;
font-size:11px;
display:none;
color:#9C9492;
}
.lister .text{
margin-top: 5px;
margin-left: 5px;
font-size: 13px;
color: #9C9492;
}
.lister .bordered .stretched a{
border: 0;
margin: 0;
width: auto;
background: transparent;
padding: 0;
color:#ccc;
}
.lister > li:hover .hideHover,
.lister > li .showHover{
display:none;
}
.lister > li:hover .showHover{
display:inline-block;
}
/* hidden menu related to droppable items */
.lister > li:hover .listerTooltip{
display:block;
}
.listerTooltip{
display:none;
position:absolute;
z-index: 10;
/* margin and height are defined in tbdate class */
/*margin:-100px 0 0 0;
height:93px;*/
margin:0;
width:184px;
background-color:#000912;
background: -webkit-linear-gradient(-90deg, #00070e, #000912, #00070e); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, #00070e, #000912, #00070e); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, #00070e, #000912, #00070e); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, #00070e, #000912, #00070e); /* Standard syntax */
padding:7px 5px 0 11px;
border-top: 3px solid green;
border-bottom: 3px solid green;
/* other "sizes" are defined with classes (below) */
margin-top:-103px;
height:90px;
}
.listerTooltip:after {
content:'';
position: absolute;
top: 100%;
left: 21px;
/*margin-left: -15px;*/
width: 0;
height: 0;
border-top: solid 11px green;
border-left: solid 11px transparent;
border-right: solid 11px transparent;
}
/* Stage summary */
.listerTooltip > p{
margin:0 5px;
font-size: 14px;
color: #9C9492;
float:left;
display:inline-block;
line-height:1;
}
.listerTooltip .staminaIcon{
width:28px;
padding: 24px 5px 6px 7px;
margin-left: 10px;
background-image:url('../img/icons/stamina.png?v=0');
background-position:4px -23px;
background-repeat:no-repeat;
}
.listerTooltip .staminaIcon.compact{
margin-right:0;
margin-left:0;
}
.listerTooltip .farmCont{
display:inline-block;
float:left;
width:auto;
margin-right:5px;
}
.listerTooltip .bordered .levelCap{
vertical-align:top;
margin:5px;
color:white;
cursor:default;
}
.listerTooltip [data-title]:hover:after{
bottom:auto;
top:32px;
}
/* the Tooltip inside the tooltip: a tooltinception
delete both the ".levelCap" and the comments if needed */
.listerTooltip .bordered > div.levelCap,
.listerTooltip .bordered p.levelCap.important{
/*vertical-align:top;
margin: 5px 5px 5px 0;*/
color: gold;
border-color: orange;
}
/* few fixes to the position of the (hidden) tooltip */
.listerTooltip .bordered .hasTooltip .minTooltip{
top:30px;
right: -2px;
text-align:right;
width:120px;
cursor: auto;
}
/*.listerTooltip .farmIcon{*/
.farmIcon{
background-image:url('../img/icons/iconset.png?v=4');
background-repeat:no-repeat;
display: inline-block;
width: 22px; /*21*/
height: 22px;
margin: 3px;
}
.listerTooltip .button{
background: rgba(13, 162, 32, 0.5);
width:180px; /*100%;*/
padding: 3px 0;
margin-top:6px;
height:28px;
display:block;
text-align:center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.listerTooltip .button:hover{
background: rgba(13, 162, 32, 0.7);
}
/*.lister.hasSidePane li:nth-of-type(3n){
margin-right:0;
}*/
/* Extra icons nearby the lister */
.lister .sidePane{
float: right;
/*height: 92px;*/
width: 55px;
height: 55px;
margin: 5px 5px 5px 0;
display:table;
}
.lister .sidePane .showMore{
font-size: 40px;
background-color:rgba(0,0,0,.4);
text-align:center;
line-height:0;
vertical-align:middle;
width:100%;
height:100%;
/*display:block;*/
display: table-cell;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lister .sidePane .showMore:before{
content:'+';
}
.lister input:checked + .sidePane .showMore:before{
content:'-';
}
.lister .sidePane .showMore:hover{
background-color:rgba(0,0,0,.65);
cursor:pointer;
}
.lister .listerExtra{
font-size: 13px;
padding-left:15px;
margin-top:5px;
margin-bottom: 15px;
display:none;
}
.lister input:checked ~ .listerExtra{
display: block;
}
.lister li > ul .farmIcon{
background-image:url('../img/icons/iconset.png?v=4');
background-repeat:no-repeat;
display: inline-block;
width: 21px;
height: 22px;
/*margin: 3px;*/
margin: 10px 10px 5px 0;
/*float:left;*/
}
.bordered.loadout.farmIcon{
background-image:url('../img/icons/iconset.png?v=4');
}
.lister.centered3 > li:nth-of-type(3n+1) {
margin-left: 70px;
}
/* used only on fullpage.wider, with 2 elements per line */
.lister.wider-text > li:nth-child(2n){
margin-right: 165px;
}
.lister.wider-text > li{
margin-right: 175px;
}
/* usef by search.php */
.lister.wiki{
float:left;
margin-top:-25px;
margin-right:30px;
}
.lister.wiki ul li:first-child{
height:20px; /* jp characters are a couple of pixels taller */
font-size: 14px;
}
.lister.wiki ul li{
margin-top:2px;
}
.lister.wiki span a{
font-size: 13px;
}
/* TH/Neg icons depending on what is the Difficulty of the stage */
.TH-Icon{
background-position:-4px -48px;
}
.KB-Icon{
background-position: -81px -48px;
}
.Neg-Icon{
background-position: -58px -48px;
}
.ProNeg-Icon{
background-position: -31px -48px;
}
.Coin-Icon{
background-position: -104px -48px;
}
.Energy-Icon{
background-position: -128px -48px;
}
/*.bigChest-Icon{
background-position: -177px -48px;
}
.medChest-Icon{
background-position: -202px -48px;
}*/
.CoinBonus-Icon{
background-position: -177px -48px;
}
.ExpBonus-Icon{
background-position: -202px -48px;
}
.event p.minButton{
/*display:block;*/
float: right;
}
.event p.minButton,
.minButton{
font-size: 12px; /* from event > * */
color: white; /* from event > * */
background-color: rgba(0,0,0,0.8);
/*margin: 6px 10px 0 5px;*/
margin: 0 0 0 5px;
display:inline-block;
padding:2px;
width:24px;
height:24px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
event p.minButton *,
.minButton *{
/*padding:0;*/
padding: 1px 2px;
margin:0;
display:block;
width: 18px;
height: 18px;
}
/*.fixedSizeButton{
width:24px;
}
.fixedSizeButton *{
width:18px;
}*/
p.minButton.stretchedButton,
.minButton.stretchedButton *{
width: auto;
}
.event p.stamAndText,
.stamina-Icon{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
padding: 3px 22px 0 32px;
background-image:url('../img/icons/stamina.png?v=0');
background-position:8px 8px;
background-repeat:no-repeat;
}
.disabled{
-khtml-opacity:.20;
-moz-opacity:.20;
-ms-filter:"alpha(opacity=20)";
filter:alpha(opacity=20);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.2);
opacity:.2;
}
.disabled2{
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.5;
}
.listerTooltip hr{
border:0;
position:relative;
height:1px;
margin-bottom:2px;
/*background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));*/
background-color:#141A23;
width:80%;
clear:both;
}
.listerTooltip ul,
ul.chibiLister{
display:block;
margin:0 0 2px 0;
padding:2px 0 0 0;
height:37px;
background-repeat:no-repeat;
/*background:black;*/
clear:both;
}
ul.chibiLister{
max-width: 200px;
}
ul.chibiLister *{
background-size:28px;
}
ul.chibiLister a{
color: inherit;
}
.listerTooltip > *:last-child:after, .listerTooltip.textOnly div:after{
content:'';
position: absolute;
top: 100%;
left: 25px;
z-index:20;
/*margin-left: -15px;*/
width: 0;
height: 0;
border-top: solid 7px #000912;/*#020A10;*/
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
.listerTooltip li,
.chibiLister li{
display:block;
float:left;
}
.listerTooltip li:nth-child(1),
.chibiLister li:nth-child(1){
font-size: 28px;
width: 43px;
text-align: center;
vertical-align: top;
}
.listerTooltip li:nth-child(2),
.chibiLister li:nth-child(2){
/*width:130px;*/
font-size: 11px;
color: white;
margin-top:5px;
}
ul.chibiLister.otomoLister li:nth-child(2){
margin-top:2px;
}
.listerTooltip li:nth-child(2) p,
.chibiLister li:nth-child(2) p{
margin:0;
}
.listerTooltip li:nth-child(3),
.chibiLister li:nth-child(3){
width:130px;
font-size: 9px;
color: #9C9492;
}
.listerTooltip .unitWield{
margin:6px 0 0 5px;
background-image:url('../img/icons/loadout.png?v=2');
background-repeat:no-repeat;
width:26px;
height:36px;
display:inline-block;
}
.listerTooltip .unitWield ~ .unitWield,
.listerTooltip .farmCont ~ .unitWield{
margin-left:0;
}
.loadout1{ /* staff */
background-position: -28px -108px;
}
.loadout2{ /* sword */
background-position: -28px 0;
}
.loadout3{ /* spear */
background-position: -28px -72px;
}
.loadout4{ /* bow */
background-position: -28px -36px;
}
.loadout5{ /* none */
background-position: -28px -144px;
}
.loadout-1{
background-position: -54px 0px;
}
.loadout-2{
background-position: -54px -36px;
}
.loadout-3{
background-position: -54px -72px;
}
.loadout-4{
background-position: -54px -108px;
}
.loadout-17{
background-position: -54px -144px;
}
.loadout-18{
background-position: -54px -180px;
}
/* Traps */
.trapLoadout, /* General */
.listerTooltip .trapLoadout{ /* General */
background-position: -28px -144px;
margin-right:2px;
}
.trapLoadout:before{
content: "";
display:block;
width:14px;
height:14px;
background-image:url('../img/icons/loadout.png?v=2');
background-repeat:no-repeat;
position:absolute;
bottom:10px;
right:-2px;
}
.trapLoadout.trap1:before{ /* fire */
background-position: 0 -98px;
}
.trapLoadout.trap2:before{ /* ice */
background-position: -14px -98px;
}
.trapLoadout.trap3:before{ /* light */
background-position: 0 -112px;
}
.trapLoadout.trap4:before{ /* dark */
background-position: -14px -112px;
}
.trapLoadout.trap5:before{ /* gravity */
background-position: 0 -126px;
}
.trapLoadout.trap6:before{ /* photon */
background-position: -14px -126px;
}
.trapLoadout.trap20:before{ /* damage */
background-position: -14px -14px;
}
.trapLoadout.trap21:before{ /* gel */
background-position: 0 -28px;
}
.trapLoadout.trap22:before{ /* thorn */
background-position: -14px -28px;
}
.trapLoadout.trap23:before{ /* poison */
background-position: -14px 0;
}
.trapLoadout.trap24:before{ /* bomb */
background-position: 0 -14px;
}
.trapLoadout.trap30:before{ /* time */
background-position: 0 -168px;
}
.trapLoadout.trap31:before{ /* kinetic */
background-position: -14px -168px;
}
.trapLoadout.trap32:before{ /* air */
background-position: 0 -182px;
}
.trapLoadout.trap33:before{ /* rift */
background-position: 0 -182px;
}
/*.listerTooltip .tip{
width:115px;
display:block;
font-size:10px;
color:#aaa;
line-height:1;
margin:6px 0 3px 5px;
}*/
/* [BUGGED with temp fix on Chrome] - as on form.css */
.listerTooltip .tip:before, .alert:before{
content:'!';
display:inline-block;
float:left;
height:16px; /*15px;*/
width:16px; /*15px;*/
padding:2px 2px;
margin:0 7px 0 -6px;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size:13px;
color:gold;
background: rgba(0,0,0,0.4);
border: 1px solid #141414;
}
/* Chrome only */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.listerTooltip .tip:before, .alert:before{
padding: 3px 2px 1px;
}
}
/* Microsoft Edge Browser 12+ (All) - @supports method */
@supports (-ms-accelerator:true) {
.listerTooltip .tip:before, .alert:before {
padding:3px 2px 1px 3px;
}
}
.listerTooltip .tip{
display:block;
font-size:10px;
color:#aaa;
line-height:1;
/*margin:5px 0 3px 5px;*/
margin:0 0 3px 5px;
width:175px; /*auto sometimes glitches */
height:29px;
float:left; /* after turning p.tip into div.tip */
}
.listerTooltip .tip > p{ /* after turning p.tip into div.tip */
float: right;
width:150px;
margin:0;
}
.listerTooltip .tip a{
color:white;
}
/* Different heights for the listerTooltip */
/* Format: tooltipHeight + # of Drops + tip + strlen / 90 */
/* height = 90 + ($drops - DROP_ITEM_IBS - 2) * 41 + ($tip * 38);
margin-top: 13 + height */
/* ^ (partially) old data (the tip data, now each tip is +10px in height every 25 chars of length (about 1 row)) */
.tooltipHeight2{
margin-top:-144px; height:131px;
}
.tooltipHeight3{
margin-top:-185px; height:172px;
}
.tooltipHeight4{
margin-top:-226px; height:213px;
}
.tooltipHeight1tip1{
margin-top:-135px; height:122px;
}
.tooltipHeight2tip1{
margin-top:-176px; height:163px;
}
.tooltipHeight3tip1{
margin-top:-217px; height:204px;
}
.tooltipHeight4tip1{
margin-top:-258px; height:245px;
}
.tooltipHeight1tip2{
margin-top: -145px; height: 132px;
}
.tooltipHeight2tip2{
margin-top:-186px; height:173px;
}
.tooltipHeight3tip2{
margin-top:-227px; height:214px;
}
.tooltipHeight4tip2{
margin-top:-268px; height:255px;
}
.tip.tipH2{
height: 39px;
}
.tooltipHeight1tip3{
margin-top: -155px; height: 142px;
}
.tooltipHeight2tip3{
margin-top:-196px; height:183px;
}
.tooltipHeight3tip3{
margin-top:-237px; height:224px;
}
.tooltipHeight4tip3{
margin-top:-278px; height:265px;
}
.tip.tipH3{
height: 49px;
}
.tooltipHeight1tip4{
margin-top: -171px; height: 158px;
}
.tooltipHeight2tip4{
margin-top:-212px; height:199px;
}
.tooltipHeight3tip4{
margin-top:-253px; height:240px;
}
.tooltipHeight4tip4{
margin-top:-294px; height:281px;
}
.tip.tipH4{
height: 59px;
}
/* */
.listerTooltip.textOnly{
font-size: 14px;
padding: 15px 8px;
height: 28px;
margin-top: -64px;
}
.listerTooltip.textOnly p,
.listerTooltip.textOnly a{
margin-bottom: 5px;
}
.listerTooltip.textOnly.heigthTooltipText2{
height: 55px;
margin-top:-91px;
}
.listerTooltip.textOnly.heigthTooltipText3{
height: 82px;
margin-top: -118px;
}
.listerTooltip.textOnly.heigthTooltipText4{
height: 109px;
margin-top: -145px;
}
.listerTooltip.textOnly.heigthTooltipText5{
height: 136px;
margin-top: -172px;
}
.listerTooltip.textOnly.heigthTooltipText6{
height: 163px;
margin-top: -199px;
}
.listerTooltip.textOnly.heigthTooltipText7{
height: 190px;
margin-top: -226px;
}
.listerTooltip.textOnly.heigthTooltipText8{
height: 217px;
margin-top: -253px;
}
/* bar on top of a list with informative text, buttons and more */
.filterBar{
float:left;
text-align:right;
width:570px;
/*padding:10px 25px;*/
padding: 11px 25px 9px;
margin-bottom:5px;
min-height:25px; /*23px; minimal button "1px" fix */
background-color: #000912;
font-size:12px;
/*line-height:1;*/
line-height: 14px;
}
/* "multi-line" filterBar (i.e. alert with a long text) */
ul.filterBar:last-child:after{
content:'';
display:list-item;
clear:both;
}
.filterBar li:first-child{
max-width: 95%;
float:left;
}
/* edit to the structure for the mobile version;
avoid to put .button > .alert elements, use .button.alert instead */
.filterBar li:not(:first-child){
float:right;
}
.filterBar li:first-child a.wide{
margin: 0 10px 0 0;
}
ul.filterBar > p, ul.filterBar li > p{
float:left;
padding:0 0 5px 0;
margin:5px 5px 0 5px;
}
ul.filterBar.alert p{
width: 100%; /* fix an issue on Chrome, where sometimes a word breaks (for unknown reasons) */
}
/* "Negotiator" filterBar */
ul.filterBar li:not(:first-of-type) p:first-of-type{
margin: 5px 0 0 5px;
}
/* "Treasure Hunter" stuff
ul.filterBar.button li.th-buttons p{
margin-right:15px;
}
ul.filterBar.button li.th-buttons a{
margin-left:5px;
} */
div.filterBar{
text-align:left;
}
div.filterBar > p{
text-align:left;
padding:5px;
margin:0;
}
/* padding between different filters */
.filterBar p:nth-child(2n+2){
padding-left:10px;
}
/* number of Kiss Bottles and (Pro) Negotiators */
.filterBar .number{
width:20px;
}
/* Cumulative Bonuses (for TH and Neg) */
.filterBar #monsterFilter:before, .filterBar #itemFilter:before{
content: '+ '; // percent sign
}
.filterBar #monsterFilter:after, .filterBar #itemFilter:after{
content: '%'; // percent sign
}
/* a simple text tag inside a lister */
.filterBar a.text{
color:inherit;
/*border:none;*/
margin:0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background:transparent;
border-width: 0 0 1px 0;
border-color: grey;
border-style: solid;
text-decoration:none;
}
.filterBar a.text:hover{
/*text-decoration:underline;*/
border-color: white;
color:white;
}
/* to use on a .filterBar */
.alert{
/*text-align:justify;
color:gold;
background-image: url('../img/icons/alert.png?v=0');
background-repeat: no-repeat;
background-position: 12px 14px;*/
text-align:left;
}
.filterBar.text{
}
.filterBar.text a{
display:inline-block;
text-decoration:none;
padding:5px 15px 5px 5px;
float:left;
}
.filterBar.text span{
padding-bottom:2px
}
.filterBar.text a:not(.selected):hover span{
border-bottom: 2px solid rgba(0,255,0,0.3);
}
.filterBar.text a.selected span{
border-bottom: 2px solid green;
}
.lister li > p[data-title]:hover:after,
.sidePane li[data-title]:hover:after,
.listerExtra li[data-title]:hover:after{
bottom:-30px;
}
.chibiLister li:nth-child(1) span{
width:28px;
height:28px;
display:block;
margin: 6px 0 4px 5px;
}
.chibiLister li:nth-child(2){
font-size: 13px;
}
.chibiLister li:nth-child(3){
font-size: 11px;
}
/*.grayscale {
/*background: url(image.jpg);*/
/* -moz-filter: url("data:image/svg+xml;utf8,#grayscale");
-o-filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,#grayscale");
}*/
.grayscale{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
/* TEMP Stuff */
.left{
float:left
}
.right{
float:right
}
a.bigButton{
padding:10px 15px;
margin:20px 10px 30px 0;
text-decoration:none;
background-color:#00050b;
float:left;
}
a.bigButton:hover{
color:gold;
}
/**
- Form stuff (form, input, ...)
*/
/* General */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: rgba(255,255,255,0.15);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: rgba(255,255,255,0.15);
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgba(255,255,255,0.15);
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(255,255,255,0.15);
}
:placeholder-shown { /* Standard */
color: rgba(255,255,255,0.15);
}
/* Top Navi Form (input and buttons are below) */
#topNavi form{
margin-top:16px;
display:inline-block;
float:right;
}
#topNavi form > * {
float:right;
}
#topNavi form a{
min-width:auto;
}
/* normal page form */
.fullpage form{
margin-top: 50px;
margin-bottom:80px;
}
.fullpage .description{
font-size:12px;
color: #999;
}
.fullpage .grayed{
color: #666;
}
/* the label before each input (again, normal page) */
.fullpage form p > label:first-child{
display:inline-block;
width:300px;
}
.fullpage.wider{
width:845px;
/*padding: 30px 0;*/
padding:0;
}
.fullpage.wider > *{
margin-left: 0;
}
/* filterBar is on list.css */
.fullpage.wider > .filterBar{
width: 754px;
margin-bottom:15px;
}
/* general elements */
/* text */
form input[type="text"],
form input[type="password"]{
border-width:1px;
border-style:solid;
border-color: #333;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
display:inline-block;
padding:4px 10px;
margin:0;
margin-left:4px;
height:16px;
width:159px;
color:white;
background-color:black;
background-repeat:no-repeat;
font-family:Verdana, Tahoma, sans-serif, "Open Sans";
}
form input[type="text"]:focus,
form input[type="password"]:focus {
outline: none;
border-color: #014871; /*#0574B5*/
}
form input[type="text"]:disabled,
form input[type="password"]:disabled {
color:grey;
}
/* checkbox */
form input[type="checkbox"] {
display:none;
}
form input[type="checkbox"] + label:hover {
cursor: pointer;
}
form input[type="checkbox"] + label{
display:inline-block;
width:20px;
height:20px;
vertical-align:middle;
}
form input[type="checkbox"]:not(.customCheck) + label{
background:url('../img/cbox.png?v=0') 0 0 no-repeat;
}
/*input[type="checkbox"]:not(.customCheck):hover + label{
background:url('../img/cbox.png?v=0') 0 -22px no-repeat;
}*/
form input[type="checkbox"]:not(.customCheck):checked + label{
background:url('../img/cbox.png?v=0') 0 -22px no-repeat;
}
form input[type="checkbox"]:not(.customCheck):disabled + label{
background:url('../img/cbox.png?v=0') 0 -44px no-repeat;
}
/* dropdown select */
form select{
color:white;
outline:none;
padding:3px 8px;
margin:0 0 0 3px;
height:26px; /* absolute height, padding, etc included */
width:182px;
font-family:Verdana, Tahoma, sans-serif, "Open Sans";
border-width:1px;
border-style:solid;
border-color: black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
/* background-color: #1D1D1D; IE, Edge (for corners **needed only if gradent is specified with background-image**) and old browsers */
background: -moz-linear-gradient(top, #222 3%, #1D1D1D 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#222), color-stop(100%,#1D1D1D)); /* webkit (Safari/Chrome 10) */
background: -webkit-linear-gradient(top, #222 3%, #1D1D1D 100%); /* Chrome 11+ */
background: -ms-linear-gradient(top, #222 3%, #1D1D1D 100%); /* ie 10 */
background: -o-linear-gradient(top, #222 3%, #1D1D1D 100%); /* opera */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#1D1D1D', GradientType=0 ); /* IE7-8-9*/
}
form select:disabled,
form select:disabled:hover{
color:grey;
}
form select:hover{
background-color:#1A1A1A;
color:#EEE;
cursor: pointer;
}
form option{
color:white;
background-color:#1D1D1D;
}
/* submit */
form input[type="submit"], form input[type="reset"], button {
cursor:pointer;
outline: 0;
padding: 5px 12px;
margin-right:10px;
color:#ddd;
border: 1px solid #060606;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
/* background-color: #333; IE, Edge (for corners **needed only if gradent is specified with background-image**) and old browsers */
background: -moz-linear-gradient(top, #333 3%, #222 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#333), color-stop(100%,#222)); /* webkit (Safari/Chrome 10) */
background: -webkit-linear-gradient(top, #333 3%, #222 100%); /* Chrome 11+ */
background: -ms-linear-gradient(top, #333 3%, #222 100%); /* ie 10 */
background: -o-linear-gradient(top, #333 3%, #222 100%); /* opera */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333', endColorstr='#222'); /* IE7-8-9*/
}
form input[type="submit"]:hover, form input[type="reset"]:hover, button:hover {
color: white;
/* background-color: #3E3E3E; IE, Edge (for corners **needed only if gradent is specified with background-image**) and old browsers */
background: -moz-linear-gradient(top, #3E3E3E 3%, #222 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3E3E3E), color-stop(100%,#222)); /* webkit (Safari/Chrome 10) */
background: -webkit-linear-gradient(top, #3E3E3E 3%, #222 100%); /* Chrome 11+ */
background: -ms-linear-gradient(top, #3E3E3E 3%, #222 100%); /* ie 10 */
background: -o-linear-gradient(top, #3E3E3E 3%, #222 100%); /* opera */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E3E3E', endColorstr='#222',GradientType=0 ); /* IE7-8-9*/
}
form input[type="submit"]:active, form input[type="reset"]:active, button:active {
position: relative;
top: 1px;
color: white;
padding: 5px 12px 4px;
background: #222;
}
/* smaller form items */
.smaller select{
height: 22px;
padding-left: 10px;
padding-right: 10px;
width: auto;
/* FF */
padding-top:0;
}
/* FF */
.smaller option{
display:block;
}
.smaller input[type="submit"]{
padding: 2px 12px;
margin-right:0;
}
.smaller input[type="submit"]:active {
padding: 3px 12px 1px;
}
/* button main class */
.button{
list-style-type:none;
/*float:right;
margin:20px;*/
}
.button > *:not(option){
display:inline-block;
margin:0;
padding:0;
}
.fullpage .button p{
margin-right:20px;
}
.button a, .button label, .hamburger{
display:inline-block;
/* margin:0 0 0 3px; */
margin-left:3px;
text-decoration:none;
color:grey;
text-align:center;
border-width:1px;
border-style:solid;
border-color: #333;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
background-color: #070707; /*rgba(0,0,0,0.4)*/
}
.button label{
cursor:pointer;
}
/*.button a.selected{
background-color:rgba(0,0,0,0.6);
}*/
/* [BUGGED with temp fix] classes for different sizes/types of (inside ul > li) - same for .tip on lists.css */
/* a little character */
.minimal{
padding:3px 3px 2px 4px;
width:14px;
height:15px;
line-height:1; /* fix for the 15px line height of the filterBar */
/*margin-top:2px; same here */
}
/* Chrome only */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.minimal {
padding-top:4px;
padding-bottom:1px;
}
}
/* Microsoft Edge Browser 12+ (All) - @supports method
@supports (-ms-accelerator:true) {
.minimal {
padding:3px 1px 2px 5px;
width:14px;
}
} */
/* Safari has a 1px extra padding on left */
/* only a small image */
.small{
padding:4px;
width:16px;
height:16px;
background-image: url('../img/icons/iconset.png?v=4');
background-repeat: no-repeat;
}
.small:hover{
border-color: #20465A;
/*background-position-y: -24px;*/
}
.small:active, .small:focus {
background-color: #131313;
}
/* bigger, 1 char inside */
.medium{
width:19px;
height:19px;
padding:1px 3px 4px 3px;
}
a.wide, label.wide{
/*padding:4px 9px;*/
padding: 3px 9px;
margin: 0 0 0 10px;
}
/* +1px of padding-top on firefox */
@-moz-document url-prefix() {
a.wide, label.wide{
padding: 2px 9px 4px;
}
}
/* Microsoft Edge Browser 12+ (All) - @supports method */
@supports (-ms-ime-align:auto) {
a.wide, label.wide {
padding-top:2px;
padding-bottom:4px;
}
}
.medium:hover, .minimal:hover, .wide:hover, .hamburger:hover, .hamburger:hover *, .chapterLister ul li label:hover, .chapterLister > ul.button > li > a:hover{
background-color:#000101;
border-color:#0D5A2F;
color:seagreen;
}
.medium:active, .medium:focus, .button .selected, .lister p.selected, .hamburger.selected *, .button input[type='radio']:checked + label, .chapterLister > ul.button > li > a.selected {
color:green;
border-color:green;
}
.button input[type='radio']{
display:none;
}
.hamburger{
padding: 0;
margin-right:10px;
}
.hamburger a{
border:0;
padding:4px 9px 4px 5px;
margin-left:25px;
}
.hamburger:before{
content:'';
display:inline-block;
position:absolute;
width:25px;
height:20px;
background-image: url('../img/icons/iconset.png?v=4');
background-position:-110px 0;
background-repeat: no-repeat;
}
.hamburger.selected:before{
background-position: -110px -25px;
}
/* special buttons */
.settings{
background-position:-52px 0;
}
.info{
background-position:-31px 0;
}
/* calendar is a ".minimal" button */
.calendar{
background-image: url('../img/icons/iconset.png?v=4');
background-position:-76px 0;
background-repeat: no-repeat;
}
/* for FF */
.settings:hover{
background-position:-52px -24px;
}
.info:hover{
background-position:-31px -24px;
}
.calendar:hover{
background-position: -76px -24px;
}
/*a.filter*/
label.filter{
background-image: url('../img/icons/iconset.png?v=4');
background-position:-140px 0;
background-repeat: no-repeat;
width:45px;
text-align:right;
padding-right: 8px;
}
/*a.filter:hover*/
label.filter:hover{
background-position: -140px -25px;
}
/* Hamburger Menu CSS */
/* toComplete */
input[type=radio]:checked + ul.filterBar{
display:block;
}
/*input[type=radio]:not(:checked) + ul.filterBar{
display:none;
}*/
/* mobile */
.bigSettings{
background-image: url('../img/icons/hisoBig.png?v=3');
background-position: -204px 17px;
background-repeat: no-repeat;
}
.bigInfo{
background-image: url('../img/icons/hisoBig.png?v=3');
background-position: -204px -29px;
background-repeat: no-repeat;
}
/* classes for different sizes/types of input[type="text"] */
.smallSearch{
margin:0 0 0 3px;
padding-right: 32px !important;
font-family:Verdana, Tahoma, sans-serif, "Open Sans";
background-image:url('../img/icons/iconset.png?v=4');
background-position:173px 0;
}
/* form2 */
form input.inputType2{
background-image:url('../img/icons/search.png?v=0');
padding: 8px 5px 8px 40px;
margin: 5px 5px 15px 0;
}
form input.userField{
background-position: 11px -115px;
width:220px;
}
form input.passField{
background-position: 11px -144px;
width:160px;
display:inline-block;
margin-bottom:50px;
}
/* Utils > Stamina */
.utilsText1{
display:inline-block;
width:120px;
}
.utilsText2{
display:inline-block;
width:100px;
margin-left: 50px;
}
.utilsText3{
margin-left:35px;
margin-right:0
}
.utilsText4{
}
#opt81-1{
width:250px;
padding:3px 8px;
}
.button .utilsLabel81{
margin-left:40px;
border:0;
}
/* Bordered Container (more on the search stylesheet) */
div .borderedCont{ /*
form .borderedCont */
background:rgba(0,0,0,0.30);
border-radius: 8px;
padding:20px;
margin-bottom:20px;
}
div .borderedCont > p{ /*
form .borderedCont > p */
margin-top:30px;
}
form .borderedCont input[type='text']{
width:80px;
padding: 8px 12px;
}
form .borderedCont input.actualStamina{
background-image: url('../img/icons/stamina.png?v=0');
background-position: 16px 13px;
padding-left: 50px;
}
form .borderedCont input.alertStamina{
background-image: url('../img/icons/search.png?v=0');
background-position: 10px -173px;
padding-left: 50px;
}
form input[type='checkbox'].inputType2 + label + label{
margin-left:10px;
margin-right:10px;
}
form div > input[type='checkbox'].inputType2:not(:checked):first-of-type + label + label ~ * {
display:none;
}
form div > input[type='checkbox'].inputType2:first-of-type + label + label ~ * {
/*:not(input[type='checkbox'].inputType2 + label + label)*/
margin-left:40px;
}
/* RADIO #2 */
form .radioType2{
display: inline-block;
vertical-align:middle;
margin:20px 5px;
}
/*form .radioType2:after{
content:'';
display:block;
clear:both;
}*/
form .radioType2 input[type='radio']{
display:none;
}
form .radioType2 p:first-of-type{
float:left;
display:inline-block;
margin-right:30px;
margin-left: 15px;
vertical-align:middle;
line-height:0;
}
form .radioType2 label:first-of-type{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-left: 1px solid #04598e;
}
form .radioType2 label:last-of-type{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-right: 1px solid #04598e;
}
form .radioType2 label,
label.niceButton,
form input[type="submit"].submitType2{
font-size: 14px;
color:#eee;
float:left;
padding:5px 12px;
/* GREEN
border: 1px solid #208401;
border-left: 1px solid #0d3800;
border-right: 1px solid #2fbf00;
box-shadow: 0px 1px 0px #0d3800,
0px -1px 0px #0d3800;
background: rgba(20,153,0,1);
background: -moz-linear-gradient(top, rgba(20,153,0,1) 0%, rgba(18,107,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,153,0,1)), color-stop(100%, rgba(18,107,0,1)));
background: -webkit-linear-gradient(top, rgba(20,153,0,1) 0%, rgba(18,107,0,1) 100%);
background: -o-linear-gradient(top, rgba(20,153,0,1) 0%, rgba(18,107,0,1) 100%);
background: -ms-linear-gradient(top, rgba(20,153,0,1) 0%, rgba(18,107,0,1) 100%);
background: linear-gradient(to bottom, rgba(20,153,0,1) 0%, rgba(18,107,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#149900', endColorstr='#126b00', GradientType=0 );
*/
/*border: 1px solid #0A77B9;*/
border: 1px solid #0565a0;
border-left: 1px solid #003758;
border-right: 1px solid #0565a0;
box-shadow: 0px 1px 0px #003758, 0px -1px 0px #003758;
background: rgba(10,118,185,1);
background: -moz-linear-gradient(top, rgba(10,118,185,1) 0%, rgba(0,68,107,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(10,118,185,1)), color-stop(100%, rgba(0,68,107,1)));
background: -webkit-linear-gradient(top, rgba(10,118,185,1) 0%, rgba(0,68,107,1) 100%);
background: -o-linear-gradient(top, rgba(10,118,185,1) 0%, rgba(0,68,107,1) 100%);
background: -ms-linear-gradient(top, rgba(10,118,185,1) 0%, rgba(0,68,107,1) 100%);
background: linear-gradient(to bottom, rgba(10,118,185,1) 0%, rgba(0,68,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a76b9', endColorstr='#00446b', GradientType=0 );
border-top: 1px solid #0f81c7;
}
form .radioType2 input[type='radio']:not(:disabled)+label:hover,
label.niceButton:hover,
form input[type="submit"].submitType2:not(:disabled):hover{
background: rgba(6,108,171,1);
background: -moz-linear-gradient(top, rgba(6,108,171,1) 0%, rgba(0,68,107,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(6,108,171,1)), color-stop(100%, rgba(0,68,107,1)));
background: -webkit-linear-gradient(top, rgba(6,108,171,1) 0%, rgba(0,68,107,1) 100%);
background: -o-linear-gradient(top, rgba(6,108,171,1) 0%, rgba(0,68,107,1) 100%);
background: -ms-linear-gradient(top, rgba(6,108,171,1) 0%, rgba(0,68,107,1) 100%);
background: linear-gradient(to bottom, rgba(6,108,171,1) 0%, rgba(0,68,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#066cab', endColorstr='#00446b', GradientType=0 );
cursor:pointer;
}
form .radioType2 input[type='radio']:checked:not(:disabled)+label,
label.niceButton:active,
form input[type="submit"].submitType2:not(:disabled):active{
/* GREEN
background: rgba(18,117,0,1);
background: -moz-linear-gradient(top, rgba(18,117,0,1) 0%, rgba(18,82,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(18,117,0,1)), color-stop(100%, rgba(18,82,0,1)));
background: -webkit-linear-gradient(top, rgba(18,117,0,1) 0%, rgba(18,82,0,1) 100%);
background: -o-linear-gradient(top, rgba(18,117,0,1) 0%, rgba(18,82,0,1) 100%);
background: -ms-linear-gradient(top, rgba(18,117,0,1) 0%, rgba(18,82,0,1) 100%);
background: linear-gradient(to bottom, rgba(18,117,0,1) 0%, rgba(18,82,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#127500', endColorstr='#125200', GradientType=0 );
border: 1px solid #1b7300;
border-left: 1px solid #0a2900;
*/
background: rgba(0,80,130,1);
background: -moz-linear-gradient(top, rgba(0,80,130,1) 0%, rgba(0,57,90,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,80,130,1)), color-stop(100%, rgba(0,57,90,1)));
background: -webkit-linear-gradient(top, rgba(0,80,130,1) 0%, rgba(0,57,90,1) 100%);
background: -o-linear-gradient(top, rgba(0,80,130,1) 0%, rgba(0,57,90,1) 100%);
background: -ms-linear-gradient(top, rgba(0,80,130,1) 0%, rgba(0,57,90,1) 100%);
background: linear-gradient(to bottom, rgba(0,80,130,1) 0%, rgba(0,57,90,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005082', endColorstr='#00395a', GradientType=0 );
color:white;
/*text-decoration: underline;*/
border-top: 1px solid #0b69a5;
}
form .radioType2 input[type='radio']:checked:not(:disabled)+label:hover{
background: rgba(0,76,117,1);
background: -moz-linear-gradient(top, rgba(0,76,117,1) 0%, rgba(0,57,87,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,76,117,1)), color-stop(100%, rgba(0,57,87,1)));
background: -webkit-linear-gradient(top, rgba(0,76,117,1) 0%, rgba(0,57,87,1) 100%);
background: -o-linear-gradient(top, rgba(0,76,117,1) 0%, rgba(0,57,87,1) 100%);
background: -ms-linear-gradient(top, rgba(0,76,117,1) 0%, rgba(0,57,87,1) 100%);
background: linear-gradient(to bottom, rgba(0,76,117,1) 0%, rgba(0,57,87,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004c75', endColorstr='#003957', GradientType=0 );
}
/*form .radioType2 input[type='radio']:checked+label:first-of-type{
border-left: 1px solid #0A77B9;
}
form .radioType2 input[type='radio']:checked+label:last-of-type{
border-right: 1px solid #0A77B9;
}*/
form .radioType2 input[type='radio']:checked+label:not(:last-of-type){
border-right: 1px solid transparent;
}
form .radioType2 input[type='radio'][disabled] + label,
form input[type="submit"].submitType2:disabled{
color: #aaa;
border: 1px solid #5f5f5f;
border-left: 1px solid #383838;
border-right: 1px solid #5f5f5f;
box-shadow: 0px 1px 0px #383838, 0px -1px 0px #383838;
background: rgba(90,90,90,1);
background: -moz-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(58,58,58,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(90,90,90,1)), color-stop(100%, rgba(58,58,58,1)));
background: -webkit-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(58,58,58,1) 100%);
background: -o-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(58,58,58,1) 100%);
background: -ms-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(58,58,58,1) 100%);
background: linear-gradient(to bottom, rgba(90,90,90,1) 0%, rgba(58,58,58,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#3a3a3a', GradientType=0 );
}
form .radioType2 input[type='radio'][disabled]:checked + label,
form .submitType2:disabled:active{
text-decoration: line-through;
}
form input[type="submit"].submitType2{
float:right;
margin-top:8px;
border-left: 1px solid #04598e;
border-right: 1px solid #04598e;
margin-right: 5px;
margin-left: 5px;
}