User:Lola 1/jolie.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

h3 {
 font-weight: 900;
 color: #FFFFFF;
}

<css>
@import 'https://fonts.googleapis.com/css?family=Rock+Salt|Oswald|Lato';

a:link {text-shadow: 0px 0px 5px #57799B; color: #517294; font-family: 'Oswald'; font-size: 15px; font-weight: bold; text-transform: none; padding: 1px;}
a:visited {text-shadow: 0px 0px 5px #57799B; color: #517294; font-family: 'Oswald'; font-size: 15px; font-weight: bold; text-transform: none; padding: 1px;}
a:hover {text-decoration: none; opacity: 0.7; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease;}
.header { color: #517294; border-bottom: #57799B 0px solid; text-align: center; text-shadow: 1px 1px 1px #000000; padding: 0px; font-size: 20px; font-family: Rock Salt; letter-spacing: 5px; font-weight: bold; font-style: italic; text-transform: none; }
.header2 {color: #FFFFFF;  text-align: center; text-shadow: 1px 1px 1px #000000; padding: 4px; font-size: 35px; font-family: 'Lato'; letter-spacing: 5px;}
.banner {color: #57799B; text-shadow: 15px 0px 20px #57799B; padding: 20px; font-size: 60px; font-family: 'Rock Salt'; letter-spacing: 5px;}
hr {background: #F0F8FF;}
.boxes {background: -webkit-linear-gradient(#57799B, #0E1D2B); background: -o-linear-gradient(#57799B, #0E1D2B); background: -moz-linear-gradient(#57799B, #0E1D2B); background: linear-gradient(#57799B, #0E1D2B); color: #F0F8FF; text-shadow: 1px 1px 1px #000; padding:10em; padding: 10px; font-size: 13px; font-family: 'Lato';}
.boxes b {color: padding:2em; padding:10px;}
.boxes2 {background: #000000; color: #57799B; font-size: 16px; font-family: 'Lato'; border: 2px solid #57799B; position: relative; right: -40px; padding: 10px; box-shadow: -2px -2px 8px #000000; style="padding: 20px"; padding: 20px;}
.font1 {color: #ffffff; font-size: 14px; letter-spacing: 2px; text-transform: none;}
.font {color: #57799B; font-size: 14px; letter-spacing: 2px; text-transform: none;}
.label {color: #ffffff; font-family: 'Oswald'; font-size: 18px; letter-spacing: 2px; text-transform: none;}
.label2 {color: #57799B; font-family: 'Rock Salt'; font-size: 18px; letter-spacing: 2px; text-transform: none;}
.collapse {color: #fff;}
.box3 {background-color: #000; style="padding: 20px"; padding: 20px; padding:2em; border: 1px solid #90a5d6; position: relative; left: 10px}
.box4 {background-color: #000; style="padding: 20px"; padding: 20px; padding:2em; border: 1px solid #90a5d6; position: relative; center: 10px}
.inset {
	background-color: #000;
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 0;
	border-spacing: 0;
	padding: 0;
	margin: 0;
	color: #57799B;
	outline: 2px;
	outline-style: solid;
	outline-color: #57799B;
	font-weight: bold;
	text-align: left;
	-moz-box-shadow: 0px 0px 10px #000000;
	webkit-box-shadow: 0px 0px 10px #000000;
	box-shadow: 0px 0px 10px #000000;
	font-size: 9pt;
	line-height: 9pt;
style="padding: 20px"; padding: 20px;
}

.kickleft {
	position: relative; right: -40px; padding: 10px;}
.kickright {
	position: relative; left: -40px; padding: 10px;}

.insetmrg {
	background-color: #000;
	color: #57799B;
	outline: 2px;
	outline-style: solid;
	outline-color: #57799B;
	font-weight: bold;
	text-align: left;
	-moz-box-shadow: 0px 0px 10px #000000;
	webkit-box-shadow: 0px 0px 10px #000000;
	box-shadow: -2px -2px 8px #000000;
	font-size: 12pt;
	line-height: 15pt;
style="padding:50px;"
}

.inl {
	font-weight: bold;
	color: #57799B;
	font-size: 9pt;
	line-height: 9pt;
	vertical-align: top;
}

@import 'https://fonts.googleapis.com/css?family=Karla|Pompiere|Satisfy|Bad Script|Forum|Cinzel Decorative';

a:link {color: #4EA2EB;}
a:visited {color: #8FC4F2;}
body{overflow-y:scroll;}
.quote {letter-spacing: 2px; font-family: Bad Script; font-size: 16px; vertical-align: middle; margin-top: 15px; display: inline; width: 600px; text-shadow: 1px 1px 1px #000;}

#rcorners {border-radius: 20px; background: 729193; padding: 20px; width: 200px; height: 150px; border:1px dashed #729193; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px} 


#main {padding: 1em; margin: 0em 0; background-color:#528172; width:100%; border-width:0px; vertical-align: top; }
#main2 {padding: 1em; margin: 0.5em 0; background-color:#528172; width:100%; border-width:0px; vertical-align: top; }
#block {color: #528172; background-color: white; padding:2em; margin-bottom: 0.5em;}
#blockinfo {color: #528172; background-color: white; padding:1.5em; margin: 32px 32px 32px 32px;}
#blockbody {padding:2em; color: #528172; background-color: white; margin: 10px 0 32px 32px;}
#blockbodyfull {padding:2em; color: #528172; background-color: white; margin: 0px 32px 32px 32px;}
#blocksound {color: #528172; background-color: #528172; padding:0px 64px 0px 64px;}
#blockintro {color: #FFFFFF; background-color: #528172; padding:2em; margin-bottom: 0.5em; vertical-align: top;}
#intro {color: #FFFFFF; background-color: #57799B; font-size: 0pt; vertical-align: top; margin: 0;}
#intro2 {color: #FFFFFF; background-color: #528172; border-radius: 2em 2em 0em 0em;}
#banner {background-color: #000000;}

#title-bar-outro {background-color: #528172; color: #FFF; text-align: center; font-weight:bold; font-family: cursive; font-size: 2rem; padding:0em 0 0em 0;vertical-align: top; margin: 0}

#title-bar {border-radius:1em 1em 0px 0px;}

#outro {padding: 2em; color: white; background-color: #528172; border-radius:0 0 2em 2em;}
#outro2 {color: white; background-color: #528172; border-width:4px 4px 4px 4px;}

#character-table
{
    background-color: {{{page color}}};
    border: 0px solid {{{page border}}};
    -border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

#character-table .character-table
{
{{ #switch: {{{page gradient|}}}|no=|
    background: -webkit-gradient(linear, 48% top, 52% bottom, from(rgba(128, 128, 128, .3)), to(rgba(0, 0, 0, .3)));
    background: -moz-linear-gradient(-80deg, rgba(128, 128, 128, .3), rgba(0, 0, 0, .3));
}}
    width: 100%;
    padding: 5px;
    margin: 0px;
}

.character-cell
{
    border: 0px solid {{{cell border}}};
    -border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: {{{cell color}}};
    margin-bottom: 0.5em; 
    width: 100%;
}

img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

.character-cell-table
{
{{ #switch: {{{cell gradient|}}}|no=|
    background: -webkit-gradient(linear, 48% top, 52% bottom, from(rgba(255, 255, 255, .3)), to(rgba(160, 160, 160, .3)));
    background: -moz-linear-gradient(-80deg, rgba(255, 255, 255, .3), rgba(160, 160, 160, .3));
}}
    -border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: {{{cell text}}};
    width: 100%;
}
.character-cell-table table td, .character-cell-table table th
{
    color: {{{cell text}}};
}

.character-cell a, .character-cell a:visited, #content .character-cell a.external, #content .character-cell a.external:visited { color: {{{link color}}}; }
.character-cell a:hover, #content .character-cell a.external:hover { color: {{{link hover color}}}; }
.character-cell a.new, .character-cell a.new:visited { color: red; }

.character-header
{
    background: {{{header color}}};
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border: 1px solid {{{header border}}};
    color: {{{header text}}};
    font-weight: bold;
    text-align: center;
}

.character-glass 
{
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .5)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(50%, rgba(0, 0, 0, .2)), to(rgba(255, 255, 255, .1)));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2) 50%, rgba(0, 0, 0, .2) 50%, rgba(255, 255, 255, .1));
    display: block;
    text-outline: 1px 1px #000;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .7);
    width: 100%;
}

.character-2columns
{
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

.character-3columns
{
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

.character-italic { font-style: italic; }
#character-table table.gallery, #character-table table.gallery td { background-color: transparent; border: 0px; }
#character-table h2
{
    color: {{{page color}}};
    font-family: Josefin Sans, sans;
    font-size: 125%;
    font-style: italic;
    font-weight: bold;
    padding-right: 2em;
    text-align: right;
}

.character-quote
{
    color: {{{header color}}};
    font-family: Josefin Sans, sans;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-outline: 1px 1px #000;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .7);
    width: 50%;
}

.character-shadowtext
{
    font-family: Josefin Sans, sans;
    text-outline: 1px 1px #000;
    text-shadow: 0 -1px 1px rgba( 0, 0, 0, .7 );
}

.character-rounded img
{
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

.infobox td
{
    vertical-align: top;
}

.hiddenStructure { display: none; }

.spacer1 {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  line-height: 10px;
  padding:20px 5px 10px;
  position: relative; 
  object-position: right;
  left: -25px; 
  top: -5px;
  border: none;
  border-radius: 500px; 
-moz-border-radius: 500px; 
-webkit-border-radius: 500px;
  background-image: url("https://liberationmush.site/liberationwiki/images/a/ab/LolaSmoke.png");
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
  mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
}

.spacer1A {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  line-height: 10px;
  padding:20px 5px 10px;
  position: relative; 
  left: -25px; 
  top: -45px;
  border: none;
  font-family: 'Tangerine', cursive; font-size: 50px;
  color: rgb(255,255,255);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgb(255,255,255) , 0 0 20px rgb(157, 61, 202) , 0 0 30px rgb(157, 61, 202) , 0 0 40px rgb(157, 61, 202) , 0 0 70px rgb(136,136,136) , 0 0 80px rgb(136,136,136) , 0 0 100px rgb(136,136,136) , 0 0 150px rgb(136,136,136) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  z-index: 1;
}

.spacer1A:hover {
  text-shadow: 0 0 5px rgb(0,0,0) , 0 0 10px rgb(169, 65, 217) , 0 0 15px rgb(157, 61, 202) , 0 0 20px rgb(169, 65, 217) , 0 0 35px rgb(169, 65, 217) , 0 0 40px rgb(136,136,136) , 0 0 50px rgb(136,136,136) , 0 0 75px rgb(136,136,136) ;
}

.spacer2 {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  line-height: 10px;
  padding:20px 5px 10px;
  position: relative; 
  object-position: right;
  left: -25px; 
  top: -5px;
  border: none;
  border-radius: 500px; 
-moz-border-radius: 500px; 
-webkit-border-radius: 500px;
  background-image: url("https://liberationmush.site/liberationwiki/images/a/ab/LolaSmoke.png");
  background-position: top left;
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
  mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
}

.spacer3 {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  line-height: 10px;
  padding:20px 5px 10px;
  position: relative;
  left: -25px; 
  top: -5px;
  border: none;
  border-radius: 500px; 
-moz-border-radius: 500px; 
-webkit-border-radius: 500px;
  background-image: url("https://liberationmush.site/liberationwiki/images/a/ab/LolaSmoke.png");
  background-position: bottom right;
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
  mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
}

.spacer4 {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  line-height: 10px;
  padding:20px 5px 10px;
  position: relative; 
  object-position: right;
  left: -25px; 
  top: -5px;
  border: none;
  border-radius: 500px; 
-moz-border-radius: 500px; 
-webkit-border-radius: 500px;
  background-image: url("https://liberationmush.site/liberationwiki/images/a/ab/LolaSmoke.png");
  background-position: top;
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
  mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
}

.spacer5 {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  line-height: 10px;
  padding:20px 5px 10px;
  position: relative; 
  object-position: right;
  left: -25px; 
  top: -5px;
  border: none;
  border-radius: 500px; 
-moz-border-radius: 500px; 
-webkit-border-radius: 500px;
  background-image: url("https://liberationmush.site/liberationwiki/images/a/ab/LolaSmoke.png");
  background-position: bottom;
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
  mask-image: linear-gradient(to right, rgb(0, 0, 0, 1) 55%, rgb(0, 0, 0, -0.2) 100%);
}

.dropC {
 position: relative; 
 display: inline-block;
}

.dropC-content {
 position: absolute;
 background-color: #8842d5;
 color: white;
 background-color: rgb(127, 101, 148);
 border: 2px double rgb(234, 75, 242);
 border-radius: 25px;
 min-width: max-content;
 padding: 12px 16px;
 z-index: 1;
 display: none;
 box-shadow: inset 1px 1px 2px 0px rgba(158,165,176,0.25),inset 2px 2px 12px 0px rgba(226, 227, 236,.5),inset -2px -2px 12px 0px rgba(226, 227, 236,.5),inset 0px 0px 48px rgba(226, 227, 236,.5),0px 0px 15px rgba(255, 255, 255, .5),0px 0px 10px rgba(255, 255, 255, .5),0px 0px 4px rgba(255, 255, 255, .5) !important;
}

.dropC:hover .dropC-content {
 display: block; 
}

.drop2C {
  position: relative;
  display: inline-block;
  opacity: .9;
  transition: all 1500ms ease 500ms; 
  min-width: max-content;
  padding: 16px;
}

.drop2C-content {
 position: absolute;
 top: 200px;
 left: -10px;
 color: white;
 font-size: 9pt;
 background-color: rgb(81, 114, 148);
 border: 2px double rgb(82, 163, 247);
 border-radius: 25px;
 min-width: 275px;
 padding: 12px 16px;
 z-index: 1;
 display: none;
 box-shadow: inset 1px 1px 2px 0px rgba(158,165,176,0.25),inset 2px 2px 12px 0px rgba(226, 227, 236,.5),inset -2px -2px 12px 0px rgba(226, 227, 236,.5),inset 0px 0px 48px rgba(226, 227, 236,.5),0px 0px 15px rgba(255, 255, 255, .5),0px 0px 10px rgba(255, 255, 255, .5),0px 0px 4px rgba(255, 255, 255, .5) !important;
}

.drop2C:hover {
  animation: bounce .5s;
  opacity: 1;
  z-index: 2;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -moz-box-shadow: 1px 1px 50px #000000;
  webkit-box-shadow: 1px 1px 50px #000000;
  box-shadow: 1px 1px 50px #000000;
}

.drop2C:hover .drop2C-content {
 display: block; 
}

.drop2C2-content {
 position: absolute;
 top: 175px;
 left: -30px;
 color: white;
 font-size: 12pt;
 text-align: center;
 background-color: rgb(81, 114, 148);
 border: 2px double rgb(82, 163, 247);
 border-radius: 25px;
 min-width: 150px;
 padding: 6px 8px;
 z-index: 2;
 display: none;
 box-shadow: inset 1px 1px 2px 0px rgba(158,165,176, .75),inset 2px 2px 12px 0px rgba(226, 227, 236, 1),inset -2px -2px 12px 0px rgba(226, 227, 236, 1),inset 0px 0px 48px rgba(226, 227, 236, 1),0px 0px 15px rgba(255, 255, 255, 1),0px 0px 10px rgba(255, 255, 255, 1),0px 0px 4px rgba(255, 255, 255, 1) !important;
}

.drop2C:hover .drop2C2-content {
 display: block; 
}

.drop2D {
  position: relative;
  display: inline-block;
  opacity: .9;
  transition: all 1500ms ease 500ms; 
  min-width: max-content;
  padding: 12px 16px;
}