#temp_notice4334242 {
display: none;
}

body {
	font-size: 100%;
	font: inherit;
    font-family:       arial;
    cursor:               url("/images/icons/zombie.cur"), default; 
    background: url("/images/main/pn-classic-bg.png") center #0a1225;
    margin:               0 0 0 0;
    padding:              0 0 0 0;
    background-repeat: repeat;
    background-position: 0% 0%;
    background-size: 10%;
    background-origin: padding-box;
    background-clip: border-box;
}

* {
  scrollbar-width: thin; /* For Firefox */
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0d1e32;
}

::-webkit-scrollbar-thumb {
  background: #8d9fb0;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a4666;
}

#landscape_warning 
 {
 display: none;
 }

body h1 {
font-size: 20px;
color: white;
text-align: center;
}

@font-face {
    font-family: 'october crow';
    src: url('october_crow-webfont.woff2') format('woff2'),
         url('october_crow-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Spider Talent';
    src: url('spider-talent.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.tooltip
{
    text-align: center;
    color: #fff;
    background-color: #44115b;
    background:       rgba(68,17,91,0.8);
    position: absolute;
    z-index: 100;
    padding: 15px;
    border-radius: 15px;
    border: black solid 2px;
    pointer-events:   none;
}

.tooltip h4 {
margin:           3px;
text-align:       center;
}

.tooltip p {
margin:           5px;
padding:          10px;
border-radius:    15px;
background:       #190426;
word-wrap:        break-word;
}

.tooltip ul {
text-align:      left;
background:       #190426;
padding:         10px  10px  10px  30px;
}

.tooltip table {
width:            130px;
margin:           0 auto 0 auto;
}

.tooltip .dp_area {
position:              absolute;
margin:                -50px 0 0 -70px;
border:                black solid 2px;
box-shadow:           -5px 5px 20px #3d3791;
}
 
    .tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
        .tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
 
        .tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        .tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }

#pn_docs {
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 3px;
margin: 15px 0 15px 0;
padding: 20px 40px 20px 40px;;
color: white;
}

#pn_docs h2, #pn_docs h4 {
text-align: center;
background-color:   #1f273c;
border:             black solid 2px;
margin: 10px auto 10px auto;
}

#pn_docs h2 {
width: 60%;
}

#pn_docs h4 {
width: 80%;
}

#pn_docs ol li {
margin: 10px 0 10px 0;
}

#close_button, #close {
border: none;
float: right;
}

#log_button {
float: left;
}

#adult_only_barrier {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
margin: -10px 0 0 0;
color: white;
background: url(/images/gradients/pn-bg.png) #121c38;
}

#adult_only_barrier #adult_only_display_box {
border: black solid 4px;
border-radius: 15px;
width: 750px;
margin: 25px auto 0 auto;
border: black solid 4px;
overflow: auto;
padding: 15px;
background-color: #121b38;
}

#adult_only_barrier #adult_only_display_box .sexy_suc {
width: 400px;
float: left;
}

#adult_only_barrier #adult_only_display_box #succubus_2 {
display: none;
}

#adult_only_barrier #adult_only_display_box #pn_adult_logo {
width: 300px;
float: left;
margin-left: 25px;
} 

#adult_only_barrier #adult_only_display_box #js_warning {
width: 94%;
color: red;
margin: 1%;
clear: both;
}

#adult_only_barrier #adult_only_display_box h2 {
float: left;
margin-left: 100px;
}

#adult_only_barrier #adult_only_display_box #question_box {
width: 250px;
border: black solid 4px;
float: left;
background-color: #091525;
margin: 10px 0 0 10px;
padding: 25px;
}

#adult_only_barrier #adult_only_display_box #question_box .pn_box {
margin-left: 5px;
font-size: 20px;
}

#adult_only_barrier #adult_ad_container {
clear: both;
width: 93%;
height: auto;
padding-top: 20px;
position: relative;
}

#banner {
  position: absolute;
  left: 0;
}

#banner .pn_logo {
padding:.25vw;
  width: 6vw;
}

.battle_notice {
text-align:            center;
margin:                3px;
box-shadow:            5px 5px 10px black;
border-radius:         15px;
border:                2px solid black;
background:            #1b2435;
font-size:             14px;
}

.promotion {
background-color:     #384878;
width:                390px;
min-height:           240px;
float:                left;
box-shadow:           5px -5px 0px #9ca8cb;
margin:               10px;
}

.promotion .main_ad {
float: left;
border:            none;
box-shadow:        5px -5px 0px #323264;
margin:            10px 10px 5px 8px;
}

.promotion p {
padding:            5px;
}

.promotion b {
color:              red;
}

.promotion input {
margin:             -10px 5px 5px 5px;
width:              180px;
}

.journal {
width:                800px;
margin:               10px auto 10px auto;
padding:              13px 0 13px 0;
box-shadow:           5px 5px 10px black;
border-radius:        15px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

.journal h4 {
padding:             5px 0 5px 5px;
margin:              5px;
background-color:   #1f273c;
border:             black solid 2px;
}

.journal ul {
list-style:         none;
}

.journal ul li {
width:       720px;
margin:      0px 10px 0px 5px;
padding:     3px 30px 3px 30px;
list-style: none;
background: url(../images/icons/pending.png) no-repeat center left; 
}

.journal ul li i {
color:      red;
}

.journal ul li li {
list-style-image: url(../images/icons/canceled.png);
}

#margin_box {
width:                100%;
background-repeat:    no-repeat;
background-position:  center;  
margin:               0px auto 0 auto;
transition:           all 1s ease;
opacity:              1;
}

#margin_box #adult_check {
width:                      865px;
margin:                     0px auto 0 auto;
padding: 5px 5px 5px 5px;
color: white;
text-align: center;
}

#margin_box #adult_check b {
color: red;
}

#margin_box #loading_icon {
z-index: 100;
position: absolute;
left: 550px;
top: 400px;;
}

#border_box {
width:                      875px;
min-height:                 103px;
margin:                     0px auto 0 auto;
padding:                    0;
border-bottom:              none;
background-color: transparent;
border-radius: 5px;
}

#border_box::after {
content: "";
display: table;
clear: both;
}

#stretch_display_box {    
width:              830px;
min-height:         100px;
padding:            0px 0 0 0;
margin:             0px auto 0px auto;
color:              white;
border-bottom-right-radius:    15px;
border-bottom-left-radius:     15px;
border:            2px solid black;
background-color: #0e2236;
background:       rgba(14,34,54,0.80);
background-size: 50%;
}

#stretch_display_box h4#main_header {
margin:        0 0 0 0;
padding:       0 0 0 0;
}

#stretch_display_box .general_navigation_box {
width: 100%;
min-height: 50px;
clear: both;
}

#stretch_display_box .general_navigation_box .next_button,
#stretch_display_box .general_navigation_box .prev_button {
width: 125px;
height: 50px;
line-height: 50px;
background-color:      #3a4666;
border:               black solid 2px;
border-radius: 10px;
margin: 5px;
font-size: 33px;
text-align: center;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

#stretch_display_box .general_navigation_box .next_button:hover,
#stretch_display_box .general_navigation_box .prev_button:hover {
background-color:      #1b2837;
}

#stretch_display_box .general_navigation_box a {
text-decoration: none;
}

#stretch_display_box .general_navigation_box .next_button {
float: right;
margin-right: 25px;
}

#stretch_display_box .general_navigation_box .prev_button {
float: left;
margin-left: 25px;
}

#stretch_display_box #intro_image {
border-radius: 5px;
box-shadow:       6px 6px 10px black;
margin: 0 auto 0 auto;
display: block;
border: black solid 4px;
}

#stretch_display_box h2 {
text-align: center;
color: white;
}

.hidden_form {
margin:        0;
display:       inline;
}

a:link {
color: #d4eefc;
transition:            color 1s ease;
}

a:visited {
color: #b7d7e9;
}

a:hover {
color: white;
transition:            color 1s ease;
}

a:active {
color: #d4eefc;
}

/* Cookie Notice Layout */

#cookie_notice_1 {
position:      fixed;
left:         0;
bottom:        0;
background-color: #0e2236;
border: black solid 3px;
color: white;
width: 100%;
z-index: 200;
box-shadow:     0px 4px 60px yellow;
}

#cookie_notice_1 p {
padding: 5px;
background-color: #334565;
border:             black solid 3px;
color:              white;
text-align:         center;
width:              75%;
font-size:          17px;
margin:             5px auto 5px auto;
border-radius:      25px;
}

#cookie_notice_1 h5 {
background-color:   #1f273c;
border:             black solid 3px;
color:              white;
text-align:         center;
width:              30%;
font-size:          20px;
margin:             10px auto 10px auto;
border-radius:      25px;
}

#cookie_notice_1 p b {
color: yellow;
}

#cookie_notice_1 .image_pn_box#got_it {
margin: 0 auto 25px auto;
display: block;
font-size: 20px;
width: auto;
height: auto;
line-height: 15px;
background-size: 50px;
padding: 10px 10px 10px 50px;
border:  black solid 3px;
}

/* Suckerfish Layout */

.selectReplacement {
position:       absolute;
z-index:        10;
}

ul.selectReplacement {
margin:           0;
padding:          0;
height:           1.65em;
width:            100px;
}

ul.selectReplacement li {
border:            black solid 2px;
background:        #213059;
color:             #b8c6e0;
color:            #fff;
cursor:           pointer;
display:          none;
list-style:       none;
margin:           0;
padding:          1px 12px;
width:            140px;
height:           12px;
font-size:        11px;
line-height:      11px;
}

ul.selectReplacement li:hover {
background:        #b8c6e0;
color:             #1b2435;
}

ul.selectOpen li {
display:          block;
}

ul.selectReplacement li.selected {
display:          block;
}

ul.selectOpen li.selected {
display:          block;
}

ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
}

.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
    box-sizing: border-box;
}

.sf-menu {
margin:             0 auto 0 auto;
display:            block;
z-index:            21;
list-style:         none;
width: 835px;
}

.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}

#lower_half {
clear: both;
}

.sf-menu ul {
padding:            0;
}

.sf-menu ul {
margin:             5px 0 0px 0px;
}

.sf-menu a {
display:            block;
width:              120px;
line-height:        25px;
margin:             0 0 0 0;
text-align:         center;
padding:            3px 0 3px 0;
background-repeat:  no-repeat;
text-decoration: none;
transition:    all 1s ease;
background-size: 30px 30px;
color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
box-sizing: border-box;
border: black solid 2px;
}

.sf-menu li {
background-image: url("/images/main/cl-button.jpg");
background-color: #1d2538;
}

.sf-menu li:hover {
background-image: url("/images/main/cl-button-light.jpg");
background-color:   #354465;
}

.sf-menu a li {
}

.sf-menu a:hover {
background-repeat:  no-repeat;
}

.sf-menu li {
float:               left;
width:              119px;
}

.sf-menu li ul li a img {
margin:       0;
}

.sf-menu li ul {
position:           absolute;
width:              113px;
display:            none;
border-top:         none;
background-color:   #181b54;
font-size:          12px;
margin-top: 0px;
}

.sf-menu li ul a {
text-decoration: none;
padding-left:    3px;
width:           120px;
margin:          0 0 0 0;
border-top: none;
}

.sf-menu li ul a img {
float:              left;
margin:             0 0 0 -2px;
}

.sf-menu li ul a:hover {
color:              white;
}

.sf-menu img { 
margin:          0 0 0 0;
}

.sf-menu li:hover ul, .sf-menu li.sfhover ul {
left:            auto;
}

.sf-menu li ul ul {
	margin: 0 0 0 117px;
}

.sf-menu, .sf-menu ul {
	padding: 0;
	list-style: none; 
	line-height: 1;
}

.sf-menu li:hover ul ul, .sf-menu li.sfhover ul ul {
display: none;
}

.sf-menu li:hover ul, .sf-menu li li:hover ul, .sf-menu li.sfhover ul, .sf-menu li li.sfhover ul {
	left: auto;
}

#game-rankings {
width:            100%;
margin:           10px auto 10px auto;
border-radius:    10px;
padding:          20px;
}


#game-rankings h3 {
text-align:       center;
margin:           -20px auto 10px auto;
}

#game-rankings h5 {
text-align:       center;
}

#game-rankings p {
text-align: center;
}

#game-rankings p i {
color: red;
}

#game-rankings ul {
list-style:        none;
margin:            0 auto 0 auto;
padding:          20px;
border-radius:    15px;
width:            80%;
overflow: auto;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

#game-rankings ul a {
background-repeat: no-repeat;
line-height:       50px;
border-radius:    15px;
margin:            1.0%;
float:            left;
line-height:      50px;
width: 46%;
display: inline;
text-align: center;
background-color:   #1f273c;
border:             black solid 2px;
}

#game-rankings ul a img {
max-height: 30px;
border:           2px solid black;
border-radius:    10px;
float: left;
margin: 1%;
background-color:   #1b2435;
}

#game-rankings table {
margin:           0 auto 0 auto;
text-align:       center;
width:            80%;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

#game-rankings table td {
background:       #111c39;
padding:          5px;
border:           none;
}

#game-rankings table th {
padding:          5px;
background-color:   #1f273c;
border:             black solid 2px;
}

#game-rankings table td {
border:            #3a4666 solid 2px;
background-color:  #212837;
}

#display_box {    
width:            825px;
min-height:       750px;
margin:           0px auto 0px auto;
padding:          0 0 0 0;
background:       #333333;
border:           2px solid black;
}

#url_notice h6 {
text-align: center;
padding: 0 0 0 0;
background-color:   #1f273c;
border:             black solid 2px;
padding: 10px 6px 10px 6px;
margin: 6px 6px 0 6px;
}

#url_notice a {
background-color: black;
text-align: center;
border-radius: 5px;
padding: 6px;
}

#user_notice {
width:            824px;
margin:           2px auto 2px auto;
background:      #0d1d3f url(../images/gradients/08.png);
border:           black solid 2px;
border-top:       0;
border-bottom-right-radius:  15px;
border-bottom-left-radius:   15px;
box-shadow:                  5px 5px 10px black;
}

#user_notice a {
text-decoration:  none;
transition:    all 1s ease;
}

#user_notice table {
margin:           0 auto 0 auto;
color:            white;
text-align:       center;
}

#user_notice table b {
color:            lime;
}

#user_notice table img {
border:           none;
}

#user_notice table td {
min-width:        250px;
}

.server_data {
color:            white;
width:            100%;
text-align:       center;
line-height:      30px;
margin:           0px auto 0px auto;
display:          block;
clear:            both;
}

/* begin search screen layout */

#search_options {
text-align:         center;
padding:            5px;
margin-top:         5px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
border-bottom:      none;
font-size:          16px;
width: 950px;
margin-left: -50px;
}

#search_options.book_clear {
clear: both;
background: none;
border: none;
margin: 0 0 10px 0;
width: 100%;
}

#search_waiting {
text-align:         center;
padding:            5px;
margin-bottom:         5px;
background-color:   #1f273c;
border:             black solid 2px;
border-top:         none;
font-size:          16px;
color:              white;
width: 950px;
margin-left: -50px;
}

#search_options table {
margin:             0 auto 0 auto;
}

#search_options table th {
color:              white;
}

/* begin Release Map layout */

#release_map_box {
min-height:       10px;
width:            770px;
margin:           10px auto 10px auto;
border-radius:    15px;
background-color:      grey;
border: black solid 2px;
background-repeat: no-repeat;
background-size: 1100px;
}

#release_map_box #month_event_details {
background-color:      #1b2837;
border: black solid 2px;
width: 90%;
margin: 15px auto 15px auto;
}

#release_map_box #month_event_details  h4 {
margin: 5px;
}

#release_map_box #month_event_details  p {
background-color: #0a1126;
border: black solid 2px;
width: 90%;
margin: 15px auto 15px auto;
padding: 10px;
}

#release_map_box h3 {
text-align: center;
background-color:      #1b2837;
width: 80%;
border: black solid 2px;
margin: 25px auto 25px auto;
}

#release_map_box .release_entry {
width: 150px;
float: left;
border: black solid 4px;
border-radius: 15px;
margin: 15px;
background-color:      #1f273c;

position: relative;
}

#release_map_box .release_entry img {
display: block;
width: 150px;
}

#release_map_box .release_entry .reward {
height: 25px;
width: 25px;
position: absolute;
margin-top: -145px;
margin-left: 5px;
}

#release_map_box .release_entry .info {
height: 25px;
width: 25px;
position: absolute;
margin-top: -145px;
margin-left: 130px;
}

#release_map_box .release_entry .label {
height: 50px;
width: 150px;
white-space: nowrap;
overflow: hidden;
padding: 5px 0 5px 0;
margin-top: -55px;
border-top: black solid 4px;
position: absolute;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background: rgba(0,0,0,0.75);
}

#release_map_box .release_entry .label a,
#release_map_box .release_entry .label span {
position: relative;
display: block;
text-align: center;
}

#release_map_box .release_entry .label h6 {
padding: 0;
margin: 8px 0 0 0;
font-size: 14px;
position: relative;
display: block;
text-align: center;
}

#release_map_box ul {
background-color:      #1b2837;
border: black solid 2px;
width: 90%;
margin: 10px auto 10px auto;
padding-bottom: 10px;
padding-top: 10px;
}

#release_map_box ul li {
background-color: #0a1126;
margin: 5px;
padding: 5px;
border: black solid 2px;
}

/* begin player status screen layout */

#unlock_box {
min-height:       10px;
width:            770px;
margin:           10px auto 10px auto;
border-radius:    15px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

#unlock_box ul {
margin:            0 auto 0 auto;
padding:          20px;
border-radius:    15px;
width:            90%;
background-color:   #1f273c;
border:             black solid 2px;
}

#unlock_box ul li {
 
margin:           5px 0 5px 0;
}

#unlock_box h1 {
font-size: 20px;
}

#unlock_box .go_back {
margin:            6px auto 0 auto;
padding:           0;
background-color:   #1f273c;
border:             black solid 2px;
height: 30px;
line-height: 25px;
font-size: 20px;
width:            250px;
text-align: center;
}

#unlock_box .go_back img {
width: 30px; 
float: left;
}


#unlock_box #unlock_description {
width:            500px;
left:             0;
right:            0;
min-height:       16px;
margin:           50px auto 0 auto;
padding:          2px 5px 2px 5px;
text-align:       center;
color:            white;
border-radius:    10px;
padding:          0 0 10px 0;
position:         fixed;
z-index:          10;
display:          none;
opacity:          0;

background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

#unlock_box #unlock_description #central_unlock_image {
float:            left;
margin:           15px 15px 15px 215px;
}

#unlock_box #unlock_description #close {
float: right;
margin: 15px;
position: relative;
}

#unlock_box #unlock_description p {
margin:           15px;
}

#unlock_box h4, #unlock_box h3 {
width:            370px;
clear:            both;
text-align:       center;
margin:           7px auto 7px auto;
padding:          2px 0 2px 0;
background-color:   #1f273c;
border:             black solid 2px;
}

#unlock_box h4 {
font-size:        13px;
}

#unlock_box h3  {
width:            480px;
}

#unlock_box img {
float:            left;
margin-left:      9px;
margin-bottom:    5px;
transition:         all 1s ease;
}

#unlock_box p img {
float: none;
}

#unlock_box img:hover, #unlock_box  .unlock_adv_display:hover {
opacity:          .30;
transition:         opacity 1s ease;
}

#unlock_box  .unlock_adv_display img:hover {
opacity:          1;
}

#unlock_box .faded_unlock {
opacity:          .30;
}

#unlock_box  .unlock_adv_display {
float: left;
margin: 10px;
}

.unlock_adv_display {
height: 50px;
width: 100px;
overflow: hidden;
position:relative;
transition:         opacity 1s ease;
}


.unlock_adv_display  .spr_image {
z-index: 4;
position: absolute;
}

.unlock_adv_display  p {
z-index: 5;
color: white;
text-align: left;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
position: absolute;
width: inherit;
font-size: 14px;
}


/* Account Menu */

#manage_box {
width:              780px;
min-height:         400px;
margin:             0 auto 0px auto;
padding:            8px 0 0 0;
color:              white;
font-size:          12px;
box-sizing:         border-box;
}

#manage_box h3 {
margin:              0 auto 0 auto;
text-align:          center;
color:                 white;
}

#manage_box #info_menu {
width:                110px;
float:                left;
margin:               0;
box-sizing: border-box;
}

#manage_box #info_menu #avatar {
height:               100px;
width:                100px;
text-align:           center;
margin:               0px auto 0 auto;
display:              block;
background-color:   #1f273c;
border: black solid 2px;
border-radius: 15px;
box-sizing: border-box;
}

#manage_box #info_menu h5 {
border:             black solid 2px;
margin:               5px 0 5px 0;
padding: 5px 0 5px 0;
text-align:           center;
background-color:      #2a3e4d;
}

#manage_box #info_menu ul {
list-style:           none;
padding:              0 0 0 0;
margin:               0 0 0 0;
}

#manage_box #info_menu ul li {
padding:             0;
line-height:         20px;
text-align: center;
box-sizing: border-box;
}

#manage_box #info_menu ul li a {
width:    100%;
display: block;
text-decoration: none;
color: white;
transition: all 1s ease;
}

#manage_box #info_menu ul li a:hover {
border-color:      #3a4666;
background-color:  #212837;
color:             white;
}

#manage_box .player_information {
width: 660px;
margin-left: 10px;
float: left;
display: none;
border: black solid 2px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
box-sizing: border-box;
padding-bottom: 25px;
border-radius: 25px;
overflow: auto;
max-height: 800px;
}

#manage_box .player_information p {
    font-size: 14px;
    padding: 15px;
    text-align: left;
}

#manage_box .player_information h2 {
    font-size: 18px;
    margin: 10px 0 10px 0;
}

#manage_box .player_information h3 {
    font-size: 16px;
    margin: 5px 0 5px 0;
}

#manage_box .player_information img {
width: 30px;
height: auto;
}

#manage_box .player_information ul {
    list-style: none;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#manage_box .player_information li {
    background-color:   #1f273c;
    border: black solid 2px;
    width: 45%;
    float: left;
    margin: 5px 2.5% 5px 2.5%;
    box-sizing: border-box;
    height: 50px;
    line-height: 35px;
    padding: 5px;
}

#manage_box .player_information li.long {
        width: 95%;
        margin:  5px 2.5% 5px 2.5%;
        height: auto;
}

#manage_box .player_information .central {
    margin: 15px auto 0 auto;
}

#manage_box .player_information .central input {
    display: block;
    margin: 0 auto 0 auto;
    padding: 10px;
}

#manage_box .player_information li img {
    float: left;
}

/* Google Font */
#manage_box .player_information li li {
    width: 100%;
}

#manage_box .player_information textarea {
    width: 95%;
    max-width: 95%;
    margin:  5px 2.5% 5px 2.5%;
    background-color:   #1f273c;
    color: white;
    padding: 5px;
    border-color: #3a4666;
    box-sizing: border-box;
    min-height: 120px;
}

#manage_box .player_information table {
    border: black solid 2px;
    width: 95%; 
    max-width: 95%;
    margin: 15px auto 0 auto;
    padding: 1%;
    border-radius: 15px;
    box-sizing: border-box;
    border-color: #3a4666;
    background-color:   #1f273c;
    font-size: 14px;
}

#player_accolades p {
padding: 5px;
border:            black solid 2px;
background-color:  #212837;
}

#player_accolades div {
float: left;
margin: 5px;
border:            black solid 2px;
background-color:  #212837;
padding: 5px;
border-radius: 15px;
}


/* Player Status Menu */

.extra_player_status_menu {
margin:           5px auto 0 auto;
width:            780px;
min-height:       50px;
padding-top:      10px;
clear:            both;
color:            white;
border:           black solid 2px;
overflow:         auto;
clear:            both;
background-color: #2a3e4d;
background: rgba(42,62,77,0.90);
}

.extra_player_status_menu .image_pn_box {
width: auto;
}

.extra_player_status_menu h5,
#viewer_status_menu h5 {
margin:              5px 10px 5px 5px;
padding:             0;
background-color:    #1b2837;
text-align:          center;
border:              black solid 2px;
font-size: 15px;
clear: both;
}

.extra_player_status_menu p {
padding: 5px;
border: black solid 2px;
background-color:   #1f273c;
background: rgba(31,39,60,0.75);
margin: 25px;
}

.extra_player_status_menu th {
background-color:    #1b2837;
border:              black solid 2px;
}

.staff_status {
display:          none;
}

.extra_player_status_menu table {
width: 100%;
}

.extra_player_status_menu input {
float: left;
margin: 3px;
}

.extra_player_status_menu #control_close {
float: right; 
display: none;
}

/* end account management layout */
/* Begin General Layout */

#daily_reward_box {
display: block;
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
width: 98%;
margin: 0 auto 0 auto;
}

#daily_reward_box .daily_reward {
float: left;
border-radius: 10px;
margin: 15px;
padding: 10px;
width: 18%;
height: 140px;
overflow: auto;
background-color:   #1f273c;
border:             black solid 2px;
}

#daily_reward_box .daily_reward h4 {
margin: 0;
}

#daily_reward_box .daily_reward img {
width: 40px;
margin: 0 auto 0 auto;
display: block;
}

#daily_reward_box .daily_reward p {
clear: both;
text-align: center;
font-size: 14px;
}

#daily_reward_box .daily_reward input {
margin: 0 auto 0 auto;
display: block;
}

#sprite_sheet_reward_box {
}

#sprite_sheet_reward_box .spr_sheet_notice {
padding: 10px;
margin: 10px;
background-color:      #1b2837;
border: black solid 2px;
}

#sprite_sheet_reward_box #sheet_links, #sprite_sheet_reward_box #claim_box {
border-radius: 15px;
margin: 0 auto 15px auto;
background-color:      #1b2837;
border: black solid 2px;
width: 700px;
padding: 15px;
clear: both;
}

#sprite_sheet_reward_box #sheet_links #close_button {
width: 40px;
}

#sprite_sheet_reward_box .sheet_box div {
float: left;
background-color:      #1b2837;
border: black solid 2px;
border-radius: 15px;
margin: 10px;
width: 140px;
min-height: 180px;
}

#sprite_sheet_reward_box .sheet_box .token_img {
width: auto;
float: none;
display: inline;
margin-left: 3px;
}

#sprite_sheet_reward_box .sheet_box .pn_box_link {
padding: 0px 5px 0px 5px;
}

#sprite_sheet_reward_box .sheet_box div h5 {
text-align: center;
background-color:   #1f273c;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#sprite_sheet_reward_box .sheet_box .faded {
opacity: .50;
background-color: #591515;
}

#sprite_sheet_reward_box .sheet_box img {
width: 100px;
margin: 0 auto 0 auto;
display: block;
}

#sprite_sheet_reward_box .sheet_box p {
margin: 2px;
padding: 0;
text-align: center;
}

#general_display {
padding:           10px;
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
margin: 10px 15px 15px 15px;
}

#general_display table h4 {
margin:            10px;
background-color:   #1f273c;
border:             black solid 2px;
}

#general_display b.warnings {
color: red; 
font-size: 25px;
}

#general_display b.noticeme {
color: lime; 
font-size: 25px;
}

#general_display #report_body {
width: 700px;
max-width: 700px;
height: 200px;
}


#general_display p, 
#general_display ul,
#general_display ol {
background-color:   #1f273c;
border:             black solid 2px;
padding:         10px;
border-radius:   10px;
margin: 5px;
}

#general_display ul,
#general_display ol {
padding:  5px 0 5px 30px;
}

.pn_box_link,.pn_box_link:visited,.pn_box_link:link {
text-decoration:  none;
padding:          5px 5px 5px 45px;
font-size:        15px;
display:           inline;
background-repeat: no-repeat;
display: inline-block;
}

.pn_box, .pn_textarea, .long_url, .image_pn_box, 
.pn_box_link,.pn_box_link:visited,.pn_box_link:link, .button_inspection, 
.battle_row_container .swapper, #mass_dungeon_rewards ul li .sell_reward, 
#mass_dungeon_rewards ul li .dismantle_reward  {
color:              white;
background-color:   #3a4666;
border:             black solid 2px;
transition:         all 1s ease;
}

.button_inspection {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-left: -1px;
}

.pn_box, .long_url, .image_pn_box, .pn_box_link,.pn_box_link:visited,.pn_box_link:link {
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

.pn_box:hover, .long_url:hover, .image_pn_box:hover,.pn_box_link:active,.pn_box_link:hover, 
.battle_row_container .swapper:hover, #mass_dungeon_rewards ul li .sell_reward:hover, 
#mass_dungeon_rewards ul li .dismantle_reward:hover {
border-color:      #3a4666;
background-color:  #212837;
color:             white;
}

.pn_box_link:hover {
background-color:  #b8c6e0;
color:             white;
}

.image_pn_box {
background-repeat: no-repeat;
background-position:center left;
padding-left: 30px;
background-size: auto 20px;
}

.image_pn_box:hover {
background-repeat: no-repeat;
background-position:center left;
}

.long_url {
width: 500px;
}

.pn_textarea {
border:            #3a4666 solid 3px;
background-color:  #212837;
}


/* End General Button Layout */
/* begin custom layout */

.outer_custom_box {
color:        white;
width:        96%;
margin:       20px auto 20px auto; 
}

.outer_custom_box .inner_custom_box {
width:        90%;
padding:      20px 20px 20px 20px;
margin:       20px auto 20px auto; 
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

.outer_custom_box .inner_custom_box h3,
.outer_custom_box .inner_custom_box table th {
margin: 5px auto 5px auto;
padding: 2px;
text-align: center;
background-color:   #1f273c;
border:             black solid 2px;
}

.outer_custom_box .inner_custom_box h2 {
font-size: 22px;
width: 96%;
margin: 0px 0 5px 0;
padding: 2px;
text-align: center;
}

.outer_custom_box .inner_custom_box h3 {
font-size: 18px;
width: 96%;
}

.outer_custom_box .inner_custom_box table {
margin: 0 auto 0 auto;
width: 96%;
padding: 4px;
background-color: #2d333f;
border:             black solid 2px;
}

.outer_custom_box .inner_custom_box ul {
background-color: #2d333f;
padding: 5px 5px 5px 25px;
border:             black solid 2px;
}

.outer_custom_box .inner_custom_box table input,
.outer_custom_box .inner_custom_box table select,
.outer_custom_box .inner_custom_box input,
.outer_custom_box .inner_custom_box select,
.outer_custom_box .inner_custom_box table textarea,
.outer_custom_box .inner_custom_box textarea  {
border:            black solid 2px;
background-color:   #3a4666;
color: white;
margin: 5px;
}

.outer_custom_box .inner_custom_box table input:hover,
.outer_custom_box .inner_custom_box table select:hover,
.outer_custom_box .inner_custom_box input:hover,
.outer_custom_box .inner_custom_box select:hover,
.outer_custom_box .inner_custom_box table textarea:hover,
.outer_custom_box .inner_custom_box textarea:hover  {
border:            #212837 solid 2px;
background-color:  #3a4666;
color: white;
margin: 5px;
}

.outer_custom_box .inner_custom_box table textarea,
.outer_custom_box .inner_custom_box textarea {
width: 96%;
}

.outer_custom_box .inner_custom_box p {
background-color:      #3a4666;
border: black solid 2px;
padding: 5px; 
margin: 10px;
border-radius: 5px;
}

.outer_custom_box .inner_custom_box .range {
width: 40px;
}

.outer_custom_box .inner_custom_box .skill_box .skill_name {
width: 200px;
}

.outer_custom_box .inner_custom_box .skill_box textarea {
height:       80px;
display:      block;
}

.outer_custom_box .inner_custom_box .file_upload {
width: 600px;
}

#custom_currency_updater {
}

#custom_currency_updater h4 {
    font-size: 20px;
}

#custom_currency_updater ul {
    background-color: #1b2837;
    padding: 15px 15px 15px 30px;
    border-radius: 25px;
}

/* end custom layout */
/* begin player lists */

.player_list_box {
margin: 0 auto 0 auto;
padding: 10px;
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
width: 90%;
}

.player_list_box#friend_box {
background-color: #397d39;
}

.player_list_box#block_box {
margin-top: 2%;
background-color: #ab5757;
}

.player_list_box h5 {
background-color:   #1f273c;
border:             black solid 3px;
margin:               5px 0 5px 0;
text-align:           center;
font-size: 25px;
}

.player_list_box .entry_container {
max-height: 500px;
overflow: auto;
}

.player_list_box .entry_container .player_entry {
background-color:   #1f273c;
border:             black solid 2px;
line-height: 15px;
border-bottom-left-radius: 25px;
width: 45%;
margin: 0 auto 0 auto;
padding: 1%;
margin: 1% 1% 0 1%;
float: left;
}

.player_list_box .entry_container .pl_avatar {
width: 25px;
}

.player_list_box .entry_container .image_pn_box {
background-size: contain;
}

/* end player lists layout */
/* begin Aavatar selection */

#avatar_browser {
background-color: #1f273c;
border: black solid 2px;
margin: 25px;
padding: 10px;
}

#avatar_browser .folders {
float:                 left;
width:                 154px;
height:                50px;
margin:                10px;
padding:               5px;
background:            #1b2837 url(../images/icons/folder.png) no-repeat;
background-position: top right;background-color:      #1b2837;
background-size:       60px 60px;
border:                black solid 2px;
line-height: 50px;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

#avatar_browser ul {
margin: 10px auto 10px auto;
width: 75%;
}

#avatar_browser .folders a {
overflow:              hidden;
display:               block;
outline:               none;
text-decoration: none;
}

#avatar_browser .folders:hover {
background-color: black;
}

#avatar_browser .folder_avatar {
border:                black solid 2px;
margin:                20px 0 20px 36px;
background:            #1b2837;
}

#avatar_browser .folder_avatar:hover {
opacity:                .30;
}

/* end account management layout */


#battle_in_progress {
display:          block;
clear:            both;
padding:          15px;
}

#battle_in_progress h4 {
background-color: #411852;
border-radius:    10px;
margin:           0px auto 0px auto;
text-align:       center;
border:           black solid 2px;
font-weight:      normal;
padding:          5px;
}

/* Camp Layout */

.camp_notification {
width:            70%;
color:            white;
border-radius:    10px;
margin:           5px auto 5px auto;
padding:          0;
background-color: #1b2837;
background:       rgba(42,62,77,0.90);
border:           black solid 2px;
}

.camp_notification h4 {
text-align:      center; 
border:          none; 
color:           white;
width: 90%;
margin:          7px auto 0 auto;
font-weight:     normal;
border-radius: 10px;
text-align: center;
padding: 0;
background-color:   #1f273c;
border:             black solid 2px;
}

.camp_notification p {
text-align: center;
}

.camp_spacer {
height: 50px;
}

#top_camp_menu {
width:           830px;
margin:           0;
padding:          0 0 4px 0;
text-align:       center;
color:            white;
position:         fixed;
z-index:          15;
float:            left;
background: rgba(42,62,77,0.90);
border:       black solid 2px;
}

#top_camp_menu, #top_camp_menu * {
box-sizing: border-box;
}

#top_camp_menu #mod_buttons img {
float: right;
width: 50%;
}

#top_camp_menu #menu_buttons {
width:           93%;
min-height:      50px;
max-height:      132px;
float:           left;
overflow:        auto;
}

#top_camp_menu #menu_buttons * {
box-sizing: border-box;
}

#top_camp_menu #mod_buttons {
overflow: auto;
width: 5%;
margin: .5%;
}

#top_camp_menu #mod_buttons img {
width: 90%;
background-color: #161f2d;
background:       rgba(22,31,45,0.9);
border:       black solid 2px;
border-radius: 15px;
margin-bottom: 10px;
}

#top_camp_menu #menu_buttons h4 {
margin: 0;
padding: 0;
}

#top_camp_menu #menu_buttons ul {
margin: 6px 0 0 0px;
padding: 0;
list-style: none;
}

#top_camp_menu #menu_buttons ul li {
float: left;
margin-right: 5px;
}

#top_camp_menu #menu_buttons input {
min-height: 35px;
width: 140px;
margin: 2px;
}

#camp_notice {
box-sizing:       border-box;
width:            100%;
padding:          5px 5px 2px 5px;
text-align:       center;
color:            white;
position:         static;
margin:           0px auto 0 auto;
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border:       black solid 2px;
}

#camp_notice #camp_info_header {
}

#camp_notice #camp_info_header h4  {
min-width:       300px; 
text-align:      center; 
border:          none; 
color:           white;
margin:          1px 1px 1px 1px;
font-weight:     normal;
border-radius: 10px;
background-color:   #1f273c;
border:             black solid 2px;
}

#camp_notice #camp_info_header p {
margin:          0 auto 0 auto;
padding:         4px;
max-height: 48px;
}

#camp_notice #camp_info_header h4 b {
color:           lime;
}

#camp_notice p {
width: 800px;
max-width: 800px;
padding: 5px;
border: none;
height:           auto;
max-height:       70px;
background-color: transparent;
text-align: center;
color: white;
overflow: auto;
}

#camp_notice table {
margin:           0 auto 0 auto;
}

.inventory_containers {
margin: 0px 0 5px 0;
}

#inventory_holder {
overflow: hidden;
}

#inventory_holder  * {
box-sizing: border-box;
}

.camp_info {
width:            300px;
color:            white;
margin:           0px auto;
}

#creature_changer .camp_creature {
width:         155px;
height:        270px;
float:         left;
transition:         border-color 1s ease;
margin:        10px 5px 0 5px;
border-radius: 10px;
overflow: hidden;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border:       black solid 2px;
}


#creature_changer .camp_creature h3 {
margin:        5px 0 5px 0;
font-size:     14px; 
text-align: center;
padding: 0;
}

#creature_changer .camp_creature h3 a {
display: inline-block;
text-align: left; 
text-overflow:     ellipsis;
white-space:       nowrap;
overflow:          hidden;
color: inherit;
}

#creature_changer .camp_creature .possessed {
color:         red;
}

#creature_changer .camp_creature .possessed a:hover {
color: #6d0f0f;
}

#creature_changer .camp_creature table {
margin:        0 auto 0 auto;
font-size:     13px;
text-align: center;
}

#creature_changer .camp_creature table img {
margin-right: 5px;
}

#creature_changer .camp_creature .camp_sprite {
height:        125px;
width:         125px;
display:       block;
margin:        0 auto 0 auto;
background-size: 125px 125px;
transition:    opacity 1s linear;
transform: scaleX(-1);
background-repeat: no-repeat;
background-position: center;
background-color: #1b2435;
border: black solid 2px;
}

#creature_changer .camp_creature .camp_sprite p {
margin: 0 0 0 0px;
font-size: 10px;
color: white;
background:   rgba(0,0,0,0.5);
padding:     2px 1px 2px 5px;
transform: scaleX(-1);
}

#creature_changer .camp_creature .camp_sprite p img {
margin-bottom: -3px;
padding-right: 2px;
width: 15px;
}

#creature_changer .camp_creature .camp_sprite:hover {
opacity: .30;
}

#extra_camp_data {
display: none;
}

.clear_it {
clear:   both;
}

/* Camp Order Menu */

.order_menu {
clear:            both;
position:         fixed;
background-color: #161f2d;
background:       rgba(22,31,45,0.9);
bottom:           0; 
left:             0;
z-index:          25;
width:            100%;
border:           black solid .15vw;
box-sizing: border-box;
text-align: center;
}

.order_menu .camp_controls {
margin: 0 auto 0 auto;
overflow: auto;
padding: 0;
display: inline-block;
width: 100%; /* Add this to make the .camp_controls take up the full width */
}

.order_menu .camp_controls ul {
width: 45vw;
list-style: none;
padding: 0;
margin: 0;
display: inline-block; /* Add this to display the ul elements inline */
}

.order_menu .camp_controls ul li {
float: left;
line-height: 2.5vw;
padding: 0;
margin: 0;
}

.order_menu .camp_controls ul li p {
    width: 5vw;
    float: left;
    padding: 0;
    margin: 0;
font-size: 1.15vw;
line-height: 2.5vw;
}

.order_menu .camp_controls ul li input,
.order_menu .camp_controls ul li select  {
    width: 9.40vw;
font-size: 1.15vw;
border-width: .15vw;
}

.order_menu .camp_controls ul li input {
    width: 9vw;
}
 
.order_menu .control_button {
width: 3vw;
margin: 0 .5vw 0 .5vw;
padding-top: .5vw;
}

.order_menu .control_button:hover {
opacity: .50;
transition:    opacity .25s ease-in;
}

/* Global Close? */
.close {
float:              right;
margin-top:         5px;
margin-right:        5px;
width: 30px;
height: 30px;
}

/* Text Color Layout */

.uber_color, .Uber_color {
color: red;
}

.pocket_color, .Pocket_color {
color: yellow;
}

.puppet_virus_color {
color: #d0c887;
}

.fetish_color {
color: #f9afc7;
}

.superb_color, 
.Superb_color, 
.creature_holder_r h4 .Superb_color, 
.creature_holder_l h4 .Superb_color {
color: violet;
}

.great_color, 
.Great_color, 
.creature_holder_r h4 .Great_color, 
.creature_holder_l h4 .Great_color {
color: lime;
}

.good_color, 
.Good_color, 
.creature_holder_r h4 .Good_color, 
.creature_holder_l h4 .Good_color {
color: yellow;
}

.average_color, 
.Average_color, 
.creature_holder_r h4 .Average_color, 
.creature_holder_l h4 .Average_color {
color: aqua;
}

.poor_color, .Poor_color, 
.creature_holder_r h4 .Poor_color, 
.creature_holder_l h4 .Poor_color {
color: orange;
}

.flame_color {
color: white;
background-color: #783232;
}

.water_color {
color: white;
background-color: #326278;
}

.rock_color {
color: white;
background-color: #7a7266;
}

.electric_color {
color: white;
background-color: #bcbb82;
}

.shadow_color {
color: white;
background-color: #4f3d6a;
}

.sacred_color {
color: black;
background-color: #fdfdfd;
}

.ghost_color {
color: black;
background-color: #fdfdfd;
}

.wrath_color {
color: white;
background-color: #87655b;
}

.ice_color {
color: black;
background-color: #d0fcff;
}

.poison_color {
color: black;
background-color: #e4d0ff;
}

.plant_color {
color: white;
background-color: #4b6938;
}

.wind_color {
color: black;
background-color: #b1e2b1;
}

.miss_color {
color: white;
}

.critical_color {
color: yellow;
}

.enchantment_color {
color: gold;
}

.bloodstain_color {
color: red;
background-color: black;
}

.kin_color {
color: tan;
}

.hp_color {
color: lime;
}

.std_color {
color: grey;
}

.skill_color {
color: #d46ad8;
}

.attack_color {
color: #d86a6a;
}

.style_color {
color: #d86a6a;
}

.level_up_color {
color: #8bffc2;
}

.item_color {
color: yellow;
}

.level_color {
color: aqua;
}

.discipline_color {
color: #d33f55;
}

.ep_color {
color: yellow;
}

.atk_color, .color_2 {
color: red;
}

.sick_color {
color: #c1c1c1;
}

.buff_color {
color: aqua;
}

.debuff_color {
color: violet;
}

.def_color, .color_1 {
color: #3399ff;
}

.guest_color, .color_3 {
color: lime;
}

.pocket_form {
border-radius: 5px;
padding: 3px;
border: black solid 1px;
}

/* Key Inventory Layout */

.key_box {
height:       155px;
width:        400px;
margin:            5px 0 0px 11px;
padding:           0 0 0 0;
transition:         border-color 1s ease;
font-size:         14px;
float:             left;
z-index:           1;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border:       black solid 2px;
box-sizing: border-box;
position: relative;
}

.key_box img.inventory_pic {
float:             left;
width:             50px;
height:            50px;
text-align:        center;
margin:            5px 5px 0 5px;
color:             white;
background-color:   #1b2435;
border:        black solid 2px;  
border-radius: 10px;
left: 0;
position: absolute;
}

.key_box p {
font-size:         14px;
height:            60px;
overflow:         auto;
border:           black solid 2px;
background-color: #1f273c;
border-radius: 10px;
margin:        5px 10px 5px 75px;
padding:       4px;
}

.key_box p.expanded {
height:            90px;
}

.key_box h4 {
color:             white;
text-align:        center;
margin:            0 0 0 0;
padding:           5px 0 5px 0;
background-color:   #1f273c;
border:       black solid 2px;
height: 25px;
border-top: none;
border-right: none;
border-left: none;
font-size:         15px;
}

.key_box span {
    text-align: right;
    width: 90%;
    display: inline-block;
    margin-top: 10px;
}

/* Marble Inventory Layout */

.marble_box {
width:             152px;
height:            130px;
margin:            5px 0 0px 11px;
transition:         border-color 1s ease;
font-size:         10px;
float:             left;
z-index:           1;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border:       black solid 2px;
box-sizing: border-box;
}

.marble_box ul {
list-style: none;
height:            70px;
margin: 0;
padding: 4px 0 0 0;
}

.marble_box ul li img {
width: 30px;
height: auto;
}

.marble_box h4 {
color:             white;
text-align:        center;
margin:            0 0 0 0;
padding:           5px 0 5px 0;
background-color:   #1f273c;
border:       black solid 2px;
height: 25px;
border-top: none;
border-right: none;
border-left: none;
font-size:         15px;
}

.marble_box h5 {
    text-align: center;
    font-size: 10px;
    padding: 0;
    margin: 0;
}

.marble_box img.inventory_pic {
float:             left;
width:             50px;
height:            50px;
text-align:        center;
margin:            10px 10px 0 10px;
color:             white;
background-color:   #1b2435;
border:        black solid 2px;  
border-radius: 10px;
}

/* Equip Inventory Layout */

.outer_equip_box {
height:           275px;
float:             left;
margin:       5px 0 0 5px;
box-sizing:       border-box;
}

.outer_equip_box .equip_box {
height:            225px;
width:             395px;
margin:            0;
transition:         border-color 1s ease;
font-size:         10px;
float:             left;
z-index:           1;
background-color:  #2a3e4d;
background:        rgba(42,62,77,0.90);
border:            black solid 2px;
box-sizing:        border-box;
clear:             both;
overflow:          auto;
position:          relative;
}

.outer_equip_box .equip_box img {
width: 20px;
height: auto;
}

.equip_box img.inventory_pic {
width: 75px;
height: auto;
left: 0;
padding: 2px;
border-radius: none;
position: absolute;
}

.outer_equip_box .equip_box h4 {
color:             white;
text-align:        center;
margin:            0 0 0 0;
padding:           0 0 0 0;
background-color:  #1f273c;
border:            black solid 2px;
height:            25px;
border-top:        none;
border-right:      none;
border-left:       none;
font-size:         16px;
}

.outer_equip_box .equip_box h4 b a {
color: inherit;
}

.outer_equip_box .equip_box p {
font-size:        12px;
overflow:         auto;
height:           auto;
border:           black solid 2px;
background-color: #1f273c;
margin:           0 5px 0 80px;
padding:          5px;
}

.outer_equip_box .equip_box p img {
    width: 20px;
}

.outer_equip_box .equip_box .eq_attributes {
height:           70px;
border-radius:    10px;   
margin-top: 5px;   
}

.outer_equip_box .equip_box .eq_special {
height:           60px;
border-top-right-radius:    10px;
border-top-left-radius:    10px;
border-bottom: none;
margin-top: 5px;
margin-left: 5px;
}

.outer_equip_box .equip_box .eq_extensions {
height:           40px;
border-bottom-right-radius:    10px;
border-bottom-left-radius:    10px;
border-top: none;
margin-left: 5px;
}

.outer_equip_box .equip_box span {
color:            white;
clear:            both;
float:            right;
}

.outer_equip_box .eq_marble {
margin-left: 15px;
clear: both;
}

.outer_equip_box .eq_marble img, .outer_equip_box .safety {
width:             50px; 
height:            50px;
background-color:   #1f273c;
border:            2px solid black;
padding:           4px;
float: left;
border-bottom-right-radius:    10px;
border-bottom-left-radius:     10px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
margin-top: -2px;
border-top: none;
margin-left: 10px;
}

.outer_equip_box .safety {
float: right;
margin-right: 15px;
}

/* Item Inventory Layout */

.item_box {
height:            165px;
width:             395px;
margin:            5px 0 0px 11px;
transition:         border-color 1s ease;
font-size:         10px;
float:             left;
z-index:           1;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border:       black solid 2px;
box-sizing: border-box;
position: relative;
overflow: auto;
}

.item_box img.inventory_pic {
width: 50px;
height: auto;
left: 0;
padding: 2px;
border-radius: none;
position: absolute;
}

.item_box h4 {
color:             white;
text-align:        center;
margin:            0 0 0 0;
padding:           5px 0 5px 0;
background-color:   #1f273c;
border:       black solid 2px;
height:       35px;
border-top: none;
border-right: none;
border-left: none;
font-size:         15px;
}

.item_box h4 img {
width: 20px;
}

.item_box h4 img.magnifier {
left: 10px;
width: 30px;
position: absolute;
height: auto;
margin: -5px;
}

.item_box h4 .hide_option {
 right: 5px;
 position: absolute;
background-color:   #3a4666;
border:             black solid 2px;
color: white;
}

.item_box h4 .hide_option:hover {
border-color:      #3a4666;
background-color:  #212837;
}

.item_box p {
border:           black solid 2px;
background-color: #1f273c;
padding: 3px 5px 3px 5px;
margin: 0;
}

.item_box p img {
width: 20px;
margin-bottom: -5px;
}

.item_box .item_top_info {
font-size:         14px;
height:            60px;
margin:            5px 5px 0 60px;
overflow:          auto;
}

.item_box .item_top_info input {
width: 80px;
margin: 0 5px 0 5px;
}

.item_box .item_bottom_info {
height: 50px;
font-size: 10px;
margin:       5px 5px 0 5px;
position: relative;
}

.item_box .item_bottom_info span {
    width: 90%;
    display: inline-block;
}

.item_bottom_info .pn_box {
width: 75px;
}

.item_box .fav_icon {
width: 9%;
position: absolute;
right: 5px;
}

.item_box .pn_box_link {
color: lime;
padding: 2px;
width: 20px;
}

/* Party Layout */

.party_container {
float:               left;
width:               400px;
margin:              5px 0 5px 10px;
box-sizing: border-box;
}

.party_container .creature_party {
width:               390px;
height:              280px;
margin:              0px auto 0 auto;
padding:             8px 5px 16px 5px;
border-radius:       15px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border:       black solid 2px;
}

.party_container .creature_party .group_wrap {
overflow: auto;
height: 180px;
margin: 0 auto 0 auto;
overflow: hidden;
}

.party_container .creature_party .group_wrap .creature_box {
width:            110px;
height:           160px;
float:            left;
margin:           5px 0 0 14px;
text-align:       center;
font-size:        13px;
position:  relative;
}

.party_container .creature_party .group_wrap .creature_box .party_level {
margin-top: 0px;
margin-bottom: -6px;
border: none;
width: 20px;
background: none;
}

.party_container .creature_party .group_wrap .creature_box h6 {
margin:             4px 0 4px 0;
font-size:          15px;
white-space:        nowrap;
overflow:           hidden;
text-overflow:      ellipsis;
}

.party_container .creature_party .group_wrap .creature_box h6 a {
text-decoration:    none;
}

.party_container .creature_party .group_wrap .creature_box h6 a:hover {
opacity:  .50;
} 

.party_container .creature_party .group_wrap .creature_box img {
border:              black solid 2px;
border-radius:       10px;
padding:              0 0 0px 0;
background-color:   #1f273c;
}

.party_container .creature_party .group_wrap .creature_box img.spr {
    width: 110px;
    padding: 0;
}

.party_container .creature_party .group_wrap .creature_box img.party_battle_type {
    height:  30px;
    width:  auto;
    top:  110px;
    left:  78px;
    background:  none;
    border:  none;
    position:  absolute;
    pointer-events:     none;
}


.party_container .creature_party .group_wrap .creature_box .arrow_switch_r,
.party_container .creature_party .group_wrap .creature_box .arrow_switch_l {
background: none;
border: none;
width: 15px;
}

.party_container .creature_party .group_wrap .creature_box .arrow_switch_r {
float: right;
}

.party_container .creature_party .group_wrap .creature_box .arrow_switch_l {
float: left;
}

.party_container .creature_party .adventure_container {
clear:      both;
margin:     -10px 0 0 0;
height:     30px;
padding:    0;
position: relative;
}

.party_container .creature_party .adventure_container .adv_repeat {
position: absolute;
top: 0;
left: 50px;
width: 35px;
}

.party_container .creature_party .adventure_container  .adv_image {
    width: 150px;
}

.party_container .creature_party .adventure_container img {
display:    block;
margin:     auto;
border:     none;
}

.party_container .creature_party .adventure_container a img {
border:     none;
}

.party_container .creature_party .adventure_container .wait_message {
position: absolute;
width:    370px;
z-index:  19;
top: 60px;
left: 0;
border-radius: 10px;
padding: 10px;
background-color: black;
background: rgba(0,0,0,0.8);
}

.party_container .creature_party .adventure_container .wait_message .pn_box_link {
background-size: 30px;
margin: 5px;
}

.party_container .creature_party .party_header,
.party_container .creature_party .party_footer {
width:               100%;
min-height:          48px;
color:               black;
margin:              0 0 0 0px;
color:               white;
position:            relative;
}

.party_container .creature_party .party_header h4,
.party_container .creature_party .party_footer h5 {
font-weight:         bold;
font-size:           18px;
background-color:    #1f273c;
border:              black solid 2px;
border-radius:       10px;
text-align:          center;
white-space:         nowrap;
overflow:            hidden;
text-overflow:       ellipsis;
font-size:           14px;
width:               250px;
display:             inline-block;
margin:              0px auto 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 20px;
}

.party_container .creature_party .party_footer img.rename,
.party_container .creature_party .party_header img.formation {
left: 0;
position: absolute;
}

.party_container .creature_party .party_footer img.destroy,
.party_container .creature_party .party_header img.pick {
right: 0;
position: absolute;
}

.party_container .creature_party .party_footer h5 {
    margin-top: 15px;
}

.party_container .creature_party .party_header h4 a {
font-size:           18px;
}

.party_container .creature_party .party_footer h5 b {
margin:             0 5px 0 5px;
}

.party_container .creature_party .party_footer img,
.party_container .creature_party .party_header img {
width: 40px;
}

/* Begin Test Layout */

#testing_page {
width:      750px;
background: rgba(26,29,85,0.5);
border:     #0b0d35 solid 2px;
margin:     15px auto 15px auto;
border-radius: 15px;
padding:    0;
}

#testing_page h4 {
width:      635px;
border:    #132b54 solid 2px;
border-radius: 15px;
background: #111c39;
text-align: center;
padding: 5px 0 5px 0px;
margin: 15px auto 15px auto;
font-size: 20px;
}

#testing_page ol {
width:      600px;
margin:     0 auto 0 auto;
padding: 35px;
line-height: 25px;
color: #d7e0f1;
background: #111c39;
border:    #132b54 solid 2px;
border-radius: 15px;
}

#testing_page ol li ul {
margin:           0px;
padding:          0px;
list-style:       none;
}

#testing_page ol li ul li {
background-image: none;
list-style: none;
}

#testing_page span input {
margin: 10px auto 10px auto;
display: block;

}

/* End Test Layout */

/* Begin Conversation Layout */

#dark_convo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.75);
  color: #fff; 
  font-size: 1em;
  z-index: 999;
  /* Kaelle Fixes? */
  box-sizing: border-box;
  height: 100vh;
}

#dark_convo #inner_convo {
  position: absolute;
  top: 0;
color:             white;
padding:           0;
margin:            0;
position:          absolute;
overflow:          auto;
width:             95vw;
height:            95vh;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow-x: hidden;
}

#dark_convo #close_conversation {
position: absolute;
right: 0;
width: 5vw;
z-index: 35;
}

#dark_convo #inner_convo #background_div {
position: absolute;
width: 85vw;
height: 25vw;
margin: 5vw auto 0 auto;
left: 50%;
transform: translateX(-50%);
background-size: cover;
border: black solid .3vw;
border-radius: .5vw;
box-shadow:       .3vw .3vw .5vw black;
background-repeat: no-repeat;
}

#dark_convo #inner_convo #message_window {
position: absolute;
background-color: transparent;
background-size: cover;
background-repeat: no-repeat;
color: black;
margin-top: 24.5vw;
width: 72.75vw;
height: 21.85vw;
left: 50%;
transform: translateX(-50%);
z-index: 18;
border: none;
overflow: hidden;
}

#dark_convo #inner_convo #message_window a {
color: #1a2c45;
}

#dark_convo #inner_convo #message_window a:visited, 
#dark_convo #inner_convo #message_window a:active,
#dark_convo #inner_convo #message_window a:focus {
color: #3b5375;
}

#dark_convo #inner_convo #message_window #c_avatar {
position: absolute;
top: 5vw;
left: 5vw;
width: 7.5vw;
height: 7.5vw;
border: black solid .3vw;
display: block;
position: absolute;
background-color: #614c79;
}

#dark_convo #inner_convo #message_window #c_message {
    position: absolute;
height: 60%;
width: 54vw;
left: 15vw;
top: 4vw;
font-size: 1.5vw;
}

#dark_convo #inner_convo #next_button, 
#dark_convo #inner_convo #battle_button {
background: transparent;
width: 7vw; 
height: 7vw;
position: absolute;
right: 2vw;
top: 35vw;
border: none;
overflow: hidden;
z-index: 20;
}


#dark_convo #inner_convo #next_button h4, 
#dark_convo #inner_convo #battle_button h4 {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: center;
line-height: 7vw;
margin: 0;
padding: 0;
width: 100%;
font-family: 'october crow';
font-size: 2vw;
    text-shadow:
    -.15vw -.15vw 0 #000,
    .15vw -.15vw 0 #000,
    -.15vw .15vw 0 #000,
    .15vw .15vw 0 #000; 
}

#dark_convo #inner_convo #next_button:hover,
#dark_convo #inner_convo #battle_button:hover {
opacity: .50;
}

#dark_convo #inner_convo .left_images, 
#dark_convo #inner_convo .right_images {
position: absolute;
z-index: 11;
height: 27.3vw;
margin-top: 3vw;
}

#dark_convo #inner_convo .left_images {
left: -50%;
}

#dark_convo #inner_convo .right_images {
right: -50%;
transform:          scaleX(-1); 
-webkit-transform:  scaleX(-1);
}

#dark_convo #choice_box {
  position: absolute;
  top: 2.5vw;
  left: 50%;
  transform: translateX(-50%);
width: 80vw;
height: auto;
z-index: 16;
border: none;
overflow: auto;
background-color: rgba(0,0,0,0.75);
border: black solid .5vw;
border-radius: 1vw;
}

#dark_convo #choice_box h4 {
margin: 0 0 0 0;
font-size: 2vw;
}

#dark_convo #choice_box .choice {
width: auto;
height: auto;
border:             #2a3e4d solid .15vw;
border-radius: .5vw;
color: white;
padding: .3vw .3vw .3vw 4vw;
width: 65vw;
margin: 1vw 0 1vw 4vw;
background:         url(../images/icons/comparisons/g-greater.gif) no-repeat left;
background-color:   #1f273c;
font-size: 1.5vw;
background-size: 2vw 2vw;
}

#dark_convo #choice_box .choice:hover {
opacity: .50;
}


#dark_convo #inner_convo #title_display {
-webkit-transition: color 1s ease;
transition:         color 1s ease;
font-size: 5vw;
margin-top: 25vh;
right: -50%;
position: absolute;
z-index: 18;
border: none;
text-shadow:
    -.15vw -.15vw 0 #000,
    .15vw -.15vw 0 #000,
    -.15vw .15vw 0 #000,
    .15vw .15vw 0 #000; 
background-color: #1f273c;
border: black solid .3vw;
box-shadow: .3vw .3vw .5vw black;
padding: 1vw;
text-align: center;
border-radius:3vw;
width: 90%;
}

#dark_convo #inner_convo #codec_div {
position: absolute;
z-index: 10;
width: 85vw;
margin-top: 1vw;
height: 32vw;
background-size: cover;
border: none;
box-shadow:       .15vw .15vw .3vw black;
background-repeat: no-repeat;
background-size: contain;
background-color: black;
border-radius: .5vw;
}

#dark_convo #inner_convo .codec_avatar {
opacity: .65;
width: 12vw;
height: 12vw;
position: absolute;
margin-top: 4.45vw;
border-radius: .3vw;
border: none;
background-color: transparent;
}

#dark_convo #inner_convo .codec_avatar#left_codec_avatar {
margin-left: 2.5vw;
}

#dark_convo #inner_convo .codec_avatar#right_codec_avatar {
margin-left: 70.7vw;
}

#dark_convo #inner_convo #codec_div #codec_text {
color: #ddb4e7;
margin: 23vw 0px 0 3vw;
font-size: 1.5vw;
}

#dark_convo #inner_convo #codec_div #codec_text b {
color: #a3a9fa;
margin-right: 1vw;
}

#dark_convo #inner_convo .bottom_foreground_images {
position: absolute;
z-index: 14;
width: 85vw;
bottom: 0;
top: 20vw;
left: 50%;
transform: translateX(-50%);
border-bottom-right-radius:    .3vw;
border-bottom-left-radius:     .3vw;
} 

/* Story Tutor layout */

.screen_cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.75);
  color: #fff; 
  font-size: 1em;
  z-index: 999;
}

.screen_cover#adult_content {
background:   rgba(0,0,0,1); 
margin-top: -1vw;
width: 100%; 
height: 110%;
position:fixed;
}

.screen_cover #tutorial {
color:             white;
width:             80%;
left: 50%;
transform: translateX(-50%);
margin:            0;
padding:           .50vw;
max-height:        80vh;
overflow: auto;
position:          absolute;
overflow:          auto;
background-color:  #2a3e4d;
border:            black solid .15vw;
}

.screen_cover #tutorial {
top: 0%;
border-bottom-right-radius: .50vw;
border-bottom-left-radius: .50vw;
font-size:        1.15vw;
}

.screen_cover #tutorial .icon {
width: 2vw; 
margin-bottom: -.50vw;
}

.screen_cover #tutorial #close {
width: 3vw;
float:            right;
margin:           .50vw .25vw .25vw .25vw;
}

.screen_cover #tutorial img {
margin: .15vw;
}

.screen_cover #tutorial h1 {
text-align: center; 
background: black; 
padding: .25vw; 
font-size:        1.35vw;
margin: 0;
}

.screen_cover #tutorial h4 {
margin:           .50vw .25vw 0 .25vw;
padding:          .25vw 0 .25vw 0;
font-size:        1.25vw;
text-align:       center;
clear: both;
}

.screen_cover #tutorial h3 {
margin:           .3vw .15vw 0 .50vw;
font-size:        1.15vw;
border:           black solid .15vw; 
padding:          .15vw;
width:            40%;
text-align:       left;
background:       #0d1d3f;
border-radius:    .50vw;
clear:            both;
box-shadow:       .25vw .25vw .50vw black;
}


.screen_cover #tutorial .avatar, 
.screen_cover #tutorial .avatar_r, 
.screen_cover #tutorial .avatar_l,
.screen_cover #tutorial .spr {
margin:           .50vw .50vw .50vw .15vw;
float:            left;
background-color: #161f2d;
border:           black solid .15vw;
border-radius:    .50vw;
width: 7vw;
}

.screen_cover #tutorial .spr {
background: transparent;
float: none;
}

.screen_cover #tutorial .avatar_r {
float: right;
margin:           .50vw .15vw .50vw .50vw;
}

.screen_cover #tutorial .avatar_l {
float: left;
}

.screen_cover #tutorial p {
margin:           .50vw 0 .50vw 0;
padding:          .25vw .50vw .25vw .50vw;
overflow:         auto;
background-color: #161f2d;
border:           black solid .15vw;
border-radius: .50vw;
}

.screen_cover #tutorial ul,  #tutorial ol {
clear: both;
background-color: #161f2d;
border:           black solid .15vw;
border-radius: .50vw;
}

.screen_cover #tutorial ol {
padding:          0vw 0vw 0vw 2vw;
}

.screen_cover #tutorial .img_float {
padding: 0;
margin: 0;
border: black solid .25vw;
}

.screen_cover #tutorial ul li {
overflow: auto;
}

.screen_cover #tutorial ul li, .screen_cover #tutorial ol li {
margin:           .50vw 0 .50vw 0;
padding:          .25vw .25vw .25vw .25vw;
}

.screen_cover #tutorial ol li ol li {
border:           none;
background-color: transparent;
}

.screen_cover #tutorial #next_tutorial {
width:              10vw;
height:             auto;
padding:            0;
background-color:   #1f273c;
border:             black solid .15vw;
padding:            .25vw;
clear:              both;
margin-bottom:      1vw;
transition:    all .5s linear;
border-radius:     .50vw;
overflow: auto;
float: right;
}

.screen_cover #tutorial #next_tutorial:hover {
transition:    all .5s linear;
background-color:   #3a4666;
} 

.screen_cover #tutorial #next_tutorial span {
width: 4vw;
text-align: center;
font-size: 100%;
float: left;
margin: 0;
padding: 0;
}

.screen_cover #tutorial #next_tutorial #moving_arrow {
float: right;
height: 3vw;
margin: .15vw .50vw 0 0;
padding: 0;
animation-name: move_tutorial_arrow;
animation-duration: 2s;
animation-iteration-count: infinite;
}

/* Tutor Layout */

@keyframes move_tutorial_arrow {
    0%   {margin-right: 10px;}
    50%  {margin-right: 0px; }
    100% {margin-right: 10px;}
}

/* Begin NPC Talk layout*/

#story-npc-talk {
width:              824px;
min-height:         150px;
padding:            10px 0 0px 0;
margin:             0px auto 0px auto;
color:              white;
border:             2px solid black;
border-bottom-right-radius:    15px;
border-bottom-left-radius:     15px;
background-color: #0e2236;
background:       rgba(14,34,54,0.80);
}

#story-npc-talk div {
color:                white;
border-bottom-right-radius: 15px;
background-color:   #273b4a;
width:                770px;
min-height:           100px;
float:                left;
color:                white;
margin:               9px 0 0 26px;
float:                left;
border-top-left-radius: 15px;
border:             2px solid black;
border-top: none;
}

#story-npc-talk .story {
width:              94%;
margin:             10px auto 10px auto;
background-color:   #111c39;
border-radius:      10px;
padding:            10px;
border:             black solid 2px;
clear:              both;
}

#story-npc-talk .story_image {
border:               black solid 2px;
border-radius: 15px;
box-shadow: 6px 6px 20px black;
}

#story-npc-talk .st_item_l {
max-width: 40px;
}

#story-npc-talk .story_pad {
padding-top: 6px;
border: none; 
background: none;
box-shadow: none;
}

#story-npc-talk .slab_image {
border:               black solid 2px;
border-radius: 15px;
box-shadow: 6px 6px 20px black;
margin: 0 auto 6px auto;
display: block;
}


#story-npc-talk .story-area {
border-radius:      20px;
margin:             0 auto 0 auto;
display:            block;
box-shadow:         1px 1px 10px black;
}

#story-npc-talk div h4 {
background:           #1b2837;
text-align:           center;
padding:              2px 0 2px 0;
margin:               0;
border: black solid 2px;
border-left: none;
right-top: none;
border-bottom-right-radius: 50px;
border-top-left-radius: 25px;
}

#story-npc-talk .story {
}

#story-npc-talk h3 {
width:              700px;
text-align:         center;
margin:             10px auto 10px auto;
}


#story-npc-talk div img {
float:                left;
}

#story-npc-talk div p img {
float:                none;
}

#story-npc-talk div p .sp_speak {
font-weight: normal;
color: aqua;
}

#story-npc-talk div .player_spirit {
width:             100px; 
height:            100px;
margin:             0 0 0 0;
background-repeat: no-repeat;
float: left;
}

div .st_item {
width:                50px;
height:               50px;
margin:               6px 12px 6px 6px;
float:                left;
border:               none;
}

#story-npc-talk div p {
margin:             0 0 0 110px;
padding:            5px 5px 0 5px;
}

#story-npc-talk .sm_speech {
width:                375px;
}

#story-npc-talk div a {
border:               none;
line-height:          25px;
display:              block;
width:              15%;
white-space:        nowrap;
padding:            0px 0 0px 35px;
background:         url(../images/icons/comparisons/g-greater.gif) no-repeat left;
transition:    all 1s ease;
clear:              none;
text-align:         left;
margin:             0 0 0 0px;
}

#story-npc-talk div .normalize_link {
padding:            0;
clear:              none;
text-align:         left;
background-image: none;
margin:             0;
background: none;
display: inline;
text-decoration:    underline;
}

#story-npc-talk #disable_quest_link {
float:        left;
border:       none;
}

#story-npc-talk div .defloat {
float: none; 
margin: 3px;
}

#story-npc-talk div select {
margin-left:       10px;
}

#story-npc-talk div ul {
margin:             10px 0 10px 90px;
padding-right:      5px;
list-style:         none;
}

#story-npc-talk div  ul li {
background:         url(../images/icons/pending.png) no-repeat center left; 
padding-top:        2px;  
padding-bottom:     2px;    
padding-left:       30px;
}

#story-npc-talk div  ul.reward_list {
margin:             10px 0 10px 50px;
}

#story-npc-talk div  ul.reward_list li {
background:         none; 
line-height: 30px;
}

#story-npc-talk div  ul.reward_list li img {
width:  30px;
float:  left;
}


/* End NPC Talk Layout*/
/* Begin NPC General Layout*/

.underline_me {
text-decoration: underline;
color: tan;
}

.credit_color {
color: aqua;
}

.coins_color,
.coin_color {
color: yellow;
}

.gold_lesp_tokens_color {
color: gold;
}

.silver_lesp_tokens_color {
color: silver;
}

.atrophy_coins_color {
color: #b47a7a;
}

.loyalty_points_color {
color: pink;
}

.holiday_event_points_color {
color: orange;
}

/* Kin Colors */

.nature_kin_color, .Nature_kin_color {
background-color: #b1e2b1;
color: black;
border-radius: 5px;
padding: 2px;
}

.beast_kin_color, .Beast_kin_color {
background-color: #87655b;
color: white;
border-radius: 5px;
padding: 2px;
}

.unliving_kin_color, .Unliving_kin_color {
background-color: #afbed3;
color: black;
border-radius: 5px;
padding: 2px;
}

.demon_kin_color, .Demon_kin_color {
background-color: #4f3d6a;
color: white;
border-radius: 5px;
padding: 2px;
}

.winged_kin_color, .Winged_kin_color {
background-color: #fdfdfd;
color: black;
border-radius: 5px;
padding: 2px;
}

.aquatic_kin_color, .Aquatic_kin_color {
background-color: #326278;
color: white;
border-radius: 5px;
padding: 2px;
}

.humanoid_kin_color, .Humanoid_kin_color {
background-color: #bcbb82;
color: white;
border-radius: 5px;
padding: 2px;
}

.construct_kin_color, .Construct_kin_color {
background-color: #7a7266;
color: white;
border-radius: 5px;
padding: 2px;
}

/* Form Colors */

.unavailable_form_color, .Unavailable_form_color {
background-color: #a1a1a1;
color: white;
border-radius: 5px;
padding: 2px;
}

.flame_form_color, .Flame_form_color {
background-color: #783232;
color: white;
border-radius: 5px;
padding: 2px;
}

.water_form_color, .Water_form_color {
background-color: #326278;
color: white;
border-radius: 5px;
padding: 2px;
}

.rock_form_color, .Rock_form_color {
background-color: #7a7266;
color: white;
border-radius: 5px;
padding: 2px;
}

.electric_form_color, .Electric_form_color {
background-color: #bcbb82;
color: white;
border-radius: 5px;
padding: 2px;
}

.shadow_form_color, .Shadow_form_color {
background-color: #4f3d6a;
color: white;
border-radius: 5px;
padding: 2px;
}

.sacred_form_color, .Sacred_form_color {
background-color: #fdfdfd;
color: black;
border-radius: 5px;
padding: 2px;
}

.ghost_form_color, .Ghost_form_color {
background-color: #afbed3;
color: black;
border-radius: 5px;
padding: 2px;
}

.wrath_form_color, .Wrath_form_color {
background-color: #87655b;
color: white;
border-radius: 5px;
padding: 2px;
}

.ice_form_color, .Ice_form_color {
background-color: #d0fcff;
color: black;
border-radius: 5px;
padding: 2px;
}

.poison_form_color, .Poison_form_color {
background-color: #e4d0ff;
color: black;
border-radius: 5px;
padding: 2px;
}

.plant_form_color, .Plant_form_color {
background-color: #4b6938;
color: white;
border-radius: 5px;
padding: 2px;
}

.wind_form_color, .Wind_form_color {
background-color: #b1e2b1;
color: black;
border-radius: 5px;
padding: 2px;
}

@keyframes rainbow {
      0% { color: #FF9597; }
      5% { color: #FFC795; }
      10% { color: #FFF995; }
      25% { color: #A8FF95; }
      40% { color: #95FFDB; }
      55% { color: #95E3FF; }
      70% { color: #959AFF; }
      85% { color: #DE95FF; }
      100% { color: #FF95EC; }
    }

.rainbow_lesp_tokens_color, .Rainbow_lesp_tokens_color {
 animation: rainbow 15s linear infinite;
}

/* Story layout */

#story_display_box {
width:              824px;
min-height:         100px;
overflow: auto;
padding:            0 0 0px 0;
margin:             20px auto 0px auto;
color:              white;
border:             2px solid black;
border-radius:    15px;
background-color: #0e2236;
}

#story_display_box .main_story_img {
margin: 3%;
border-radius: 5%;
border: black solid 2px;
box-shadow:         5px 5px 5px black; 
}

#story_display_box .main_story_div {
margin: 3%;
}

#story_display_box .main_story_div h6 {
margin: 1% 0 1% 0;
font-size: 14px;
text-align: center;
}

#story_display_box .main_story_div img {
border-radius: 5%;
width: 100%;
border: black solid 2px;
}

#story_display_box #difficulty_selector {
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}


#story_display_box #difficulty_selector p {
text-align: left;
padding: 5px;
background-color:   #1f273c;
border:             black solid 2px;
}

#story_display_box #difficulty_selector img {
transition:         all 1s ease;
border:             black solid 4px;
}

#story_display_box #difficulty_selector img:hover {
opacity: .50;
}

#story_display_box #difficulty_selector img:active {
border-color: lime;
opacity: .20;
}

#story_display_box #selection_notice {
text-align: center;
clear: both;
background-color:   #1f273c;
border:             black solid 2px;
padding: 5px;
}

#story_display_box #episode_selector, 
#story_display_box #fetish_selection {
margin:            0; 
padding:           0;
list-style:        none;
overflow: auto;
}

#story_display_box #fetish_selection input {
    display: none;
}

#story_display_box #episode_selector li, 
#story_display_box #fetish_selection li {
float: left;
width: 45%;
margin: 2% 2% 2% 2%;
}

#story_display_box #episode_selector li img,
 #story_display_box #fetish_selection li img {
width: 100%;
display: block;
border: black solid 4px;
background-color:   #1f273c;
}

#story_display_box #episode_selector li p,
#story_display_box #fetish_selection li p {
text-align: center;
margin: 0 0 0 0;
padding:  1% 0 1% 0;
}

#story_display_box #episode_selector li img:hover,
#story_display_box #fetish_selection li img:hover {
opacity: .50;
}

#story_display_box #episode_selector li a,
#story_display_box #fetish_selection li a {
margin: 0;
padding: 0;
display: inline;
}

#story_display_box #confirm_fetish  {
margin: 0 auto 0 auto;
display: block;
}

#story_display_box #summary_selection, #story_display_box #next_page {
color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
background-image: url("/images/main/cl-button.jpg");
background-color: #334565;
border: black solid 3px;
}

#story_display_box #summary_selection {
float: right;
border-bottom-left-radius: 30px;
padding-bottom: 5px;
}

#story_display_box #summary_selection a {
margin-top: -10px;
}

#story_display_box #next_page {
float: right;
border-top-left-radius: 30px;
padding: 15px;
clear: right;
}

#story_display_box #summary_selection:hover, #story_display_box #next_page:hover {
background-image: url("/images/main/cl-button-light.jpg");
}

#story_display_box ol li {
margin-top: 15px;
}

#story_display_box p {
margin:  15px 15px 15px 15px;
}

#story_display_box a {
float: right;
padding: 5px;
}

#story_display_box li a {
float: none;
padding: 2px;
}

#story_display_box #episode_form {
margin: 20px;
border-radius: 10px;
background-color:   #1f273c;
border:             black solid 2px;
box-shadow:         5px 5px 10px black; 
}

#story_display_box #episode_form h4 {
padding: 0;
margin: 0;
}

#story_display_box #episode_form p {
margin-left: 250px;
}

#story_display_box table {
margin:             0 auto 15px auto;
text-align:         center;
background-color: #1e2c52;
border-radius:    15px;
width: 790px;
border: #49567b solid 1px;
}

#story_display_box table ul {
text-align: left;
background-color:   #1f273c;
padding: 2% 2% 2% 6%;
border: black solid 2px;
}

#story_display_box table img {
border:             1px solid black;
}

#story_display_box .story_image {
margin:             6px 12px 6px 12px;
box-shadow:         5px 5px 10px black; 
background:         #111a34;
}

.story_avatar {
width:             100px; 
height:            100px;
margin:            10px;
padding:           0;
display:           block;
box-shadow:    5px 5px 10px black;
background-repeat: no-repeat;
background-color:  #8f7d51;
}

#story_display_box h3 {
width:              700px;
text-align:         center;
margin:             10px auto 10px auto;
clear: both;
}

#story_display_box p.story {
margin:             5px 26px 10px 26px;
padding: 5px;
}

#story_display_box a:focus, #story-npc-talk a:focus {
outline:            none;
color:              violet;
}

div.event {
width:              350px; 
height:             350px; 
margin:             0 auto 0 auto;
background-color:   grey;
border:             2px solid black;
}

#comic_page {
}

#comic_page img {
margin:           10px auto 10px auto;
display:          block;
border:           #2d4d79 solid 2px;
box-shadow:       5px 5px 10px black;
border-radius:    10px;
}

.center_link {
margin: 5px auto 5px auto;
clear: both;
padding: 5px 0 0 35px;
width: 250px;
display: block;
background:         url(../images/icons/comparisons/g-greater.gif) no-repeat left;
transition:    all 1s ease;
}

/* Map Layout */

.map_container {    
width:            830px;
margin:           0px auto 0px auto;
padding:          10px 0 10px 0;
color:            white;
border:           2px solid black;
background-color: #0e2236;
background:       rgba(14,34,54,0.80);
border-bottom-right-radius:    15px;
border-bottom-left-radius:     15px;
top-border:       none;
}

.map_container span.pending_reward {  
text-align:       center;
margin:           5px auto 5px auto;
display:          block;
width:            80%;
padding:          2px;
border:           black solid 2px;
border-radius:    15px;
background-color:   #4d2a31;
}

.map_container span.pending_reward a {
color: yellow;
}

.map_container span.pending_reward a:hover {
color: lime;
}

.map_container h3,
.map_container h4 {
margin:           0 auto 0 auto;
padding:          0 0 0 0;
text-align:       center;
border:           2px solid black;
width:            696px;
background-color:   #2a3e4d;
background:         rgba(42,62,77,0.90);
font-size: 20px;
}

.map_container h3 {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

.map_container h4 {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}


.map_container h4 a {
text-decoration: none;
}


.map_container #map_box {
width:              700px;
height:             525px;
margin:             0 auto 0 auto;
border:             2px solid black;
border-top:         none;
background-color:   #1a1a1a;
position:           relative;
box-sizing: border-box;
background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

.map_object {
position: absolute;
box-sizing: border-box;
transition:         all 1s ease;
}


/* Mass Rewards Layout*/

#mass_dungeon_rewards {
width: 700px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
margin: 0px auto 10px auto;
border-radius: 15px;
padding: 10px 10px 10px 10px;
}

#mass_dungeon_rewards ul {
background-color:   #1f273c;
border:             black solid 2px;
border-radius: 15px;
padding: 5px 5px 5px 25px;
list-style: none;
}

#mass_dungeon_rewards ul img {
width: 30px;
margin-bottom: -7px;
}

#mass_dungeon_rewards ul li {
}

#mass_dungeon_rewards ul li .has_space {
color: lime;
}

#mass_dungeon_rewards ul li .has_space:hover {
color: #13691f;
}

#mass_dungeon_rewards ul li .no_space {
color: red;
}

#mass_dungeon_rewards ul li .no_space:hover {
color: #691313;
}

#mass_dungeon_rewards #reward_exit {
display:    block;
width:      300px;
text-align: center;
margin:     7px auto 7px auto;
clear:      both;
background-color:   #1f273c;
border:             black solid 2px;
padding:           3px;
border-radius:    10px;
color:            lime;
transition:         all 1s ease;
}

/* Begin admin CP layout */

.control_box {
width:                 940px;
background:            #333333;
border:                2px solid black;
border-top:            0;
margin:                0 auto 0 auto;
padding:               0 15px 20px 15px;
border-bottom-right-radius:    15px;
border-bottom-left-radius:     15px;
}

.control_box ul {
color:                 white;
list-style:            none;
margin:                0 auto 0 auto;
padding:               10px 15px 10px 15px;
background:            #141414;
border-radius:         15px;
}

.control_box .custom_table {
color:                 white;
background:            #141414;
border-radius:         15px;
padding:               10px 5px 5px 5px;
margin:                0px 0 5px 0;
width:                 100%;
}

.custom_box .custom_table .spr_img {
width: 100%;
height: 100%;
max-width: 100px;
transition:    all 1s ease;
position: relative;
}

.custom_box .custom_table img:hover {
width: 200%;
height: 200%;
max-width: 150px;
background-color: #0d113b;
border: red solid 1px;
transition:    all 1s ease;
z-index: 5;
}

.control_box h4 {
color: white;
background-color: #242424;
border-radius: 20px;
}

.control_box .custom_table th {
background-color: #242424;
border-radius: 20px;
}

.control_box .custom_table input, .control_box .custom_table select {
display: block;
margin: 0 auto 0 auto;
}

.control_box div table {
float:                 left;
color:                 #bcbcbc;
background:            #1d1d1d;
margin:                5px 5px 5px 5px;
box-shadow:            5px 5px 10px black;
border-radius:         15px;
font-family:           "Matisse ITC";
font-style:            italic;
border:                2px solid black;
padding:               5px 5px 5px 5px;
}

.control_box div ul {
float:           left;
list-style:      none;
margin:          16px 0 0 -40px;
}

.control_box div iframe {
width:           726px;
height:          435px;
margin:          16px 0 0 10px;
float:           left;
}

.control_box div ul input, .control_box div ul select {
background:     #3c3c3c;
color:          white;
border:         2px solid black;
width:          200px;
}

.control_box table textarea, .control_box table select {
border:                2px solid #333333;
border-radius:         5px;
}

.control_box .admin_info {
font-family:         arial;
font-style:          normal;
overflow:            auto;
font-size:           12px;
background:          black;
height:              400px; 
margin:              0 auto 0 auto; 
width:               920px;
text-align:          left; 
font-size:           12px;
background:          black;
padding-left: 5px;
}

.control_box .admin_info i {
font-size:           12px;
color:               aqua;
}

.control_box div table img {
border:                none;
}

.control_box div table tr td input, .control_box div table tr td select, .control_box div table tr td textarea {
background:            black;
color:                 white;
border:                2px solid #333333;
border-radius:         5px;
}

.control_box .daily_reward {
float: left;
background-color: black;
color: white;
border-radius: 10px;
margin: 15px;
padding: 10px;
width: 100px;
height: 130px;
}

.control_box .daily_reward h4 {
margin: 0;
}

.control_box .daily_reward img {
width: 40px;
margin: 0 auto 0 auto;
display: block;
}

.control_box .daily_reward p {
clear: both;
text-align: center;
font-size: 14px;
}


#admin_notice {
width:                 970px;
background:            #333333;
margin:                0 auto 0 auto;
padding:               5px 0 5px 0;
border:                2px solid black;
border-bottom:         0;
border-top:            0;
margin:                0 auto 0 auto;
text-align:            center;
color:                 white;
}

#admin_notice h4 {
width:                 500px;
margin:                0 auto 0 auto;
background:            red;
color:                 black;
border:                2px solid black;
}

.admin_menu {
width:                 940px;
background:            #333333;
padding:               10px 15px 0px 15px;
border-top-right-radius:    15px;
border-top-left-radius:     15px;
border:                2px solid black;
border-bottom:         0;
margin:                0 auto 0 auto;
}

.admin_menu  table {
margin:                0 auto 0 auto;
color:                 white;
text-align:            center;

}

.admin_menu table td {
height:                30px;
margin:                0 0 0 0;
font-size:             12px;
border:                1px solid white;
}

.admin_menu table th {
height:                30px;
margin:                0 0 0 0;
background:            black;
color:                 white;
border:                1px solid white;
font-size:             10px;
border-top-right-radius:    15px;
border-top-left-radius:     15px;
}

.admin_menu td {
padding:               0 0 0 0;
}

.admin_menu td a {
width:                114px;
height:               28px;
line-height:          28px;
display:              block;
text-decoration:      none;
background:           black;
}

.admin_menu img { 
border:               none; 
margin:               0 0 0 0;
padding:              0 0 0 0;
display:              block
}

.admin_menu td a:link {
color:                #cccccc;
}

.admin_menu td a:hover {
background:           grey;
color:                white;
}

.admin_menu td a:visited {
color:                #cccccc;
}

.admin_menu textarea {
width:                 800px;
color:                 white;
background:            black;
border:                1px solid white;
display:               block;
margin:                0 auto 0 auto;
}

/* Bottom *dvertising Menu */

.top_eclectic {
position: absolute;
left:      50%;
top:       50%;
transform: translate(-50%, -50%);
padding:   0;
width:     18.5vw;
overflow:  hidden;
border:    black solid .15vw;
padding-top: .15vw;
background-color: black;
}

.bottom_eclectic {
margin:             .15vw auto .75vw auto;
display:            block;
pointer-events:     none;
}

.bottom_eclectic p {
color:              white;
text-align:         center;
margin:             0 auto 0 auto;
}

.bottom_eclectic a {
text-align: center;
}

.bottom_eclectic img {
border:             2px solid black;
height:             auto;
margin:             0 auto 0 auto;
pointer-events:     auto;
display:            block;
}

.bottom_eclectic .site_promotion img {
height: auto;
max-height: none;
}

.bottom_eclectic .nacho_image {
    border: black solid 2px;
    width: 776px;
    margin: 20px auto 0 auto;
    box-sizing: border-box;
}

.bottom_eclectic .nacho_info {
    border: black solid 2px;
    text-align: center;
    padding: 5px 5px 5px 5px;
    margin: -5px auto 0px auto;
    width: 776px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    box-sizing: border-box;
    background-color:   #1f273c;
    position: relative;
    height: 30px;
}

.bottom_eclectic a .nacho_info {
   color: white;
}

.bottom_eclectic .nacho_info h4 {
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    transform:        translateX(-50%);
    left:              50%;
}

.bottom_eclectic .nacho_info h6 {
text-align: right;
font-size: 13px;
padding: 0;
margin: 2px 0 0 0;
position: absolute;
font-weight: normal;
right: 25px;
}


#outer_box .bottom_eclectic {
min-height:         5vw;
overflow-x: hidden;
}

/* 0.11575 */
#outer_box .bottom_eclectic img {
border:             .10vw solid black;
width:              44vw;
margin-bottom: 0;
}

/* Player Growth Layout */

#growth_box {
width:              750px;
min-height:         186px;
padding:            5px 10px 5px 10px;
margin:             15px auto 15px auto;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
color:              white;
font-size:          12px;
}

#growth_box #growth_amount {
margin:             10px;
width: 100px;
float: left;
}

#growth_box h5 {
padding:            5px 0 5px 0;
margin:             16px auto 3px auto;
text-align:         center;
font-size:          20px;
width:              590px;
background-color:   #1f273c;
border:             black solid 2px;
font-weight:        normal;
float: right;
border-radius:    10px;
}

#growth_box table {
width:              100%;
color:              white;
text-align:         center;
margin:             0 0 0 0px;
background-color:   #1f273c;
border:             black solid 2px;
border-radius:    10px;
}

#growth_box table h4 {
font-weight: normal;
text-align: center;

}

#growth_box table ul {
text-align: left;
}

#growth_box table ul li {

}

#growth_box table .growth_img {
margin: 15px;
}

#growth_box table .growth_upgrade {
margin: 15px;
}

/* end of player growth layout */
/* Taskbar Layout */

#taskbar {
  z-index: 99;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  padding: 5px 5px 5px 0;
  color: white;
  margin: 0 0 0 0;
  background-color: #2a3e4d;
  background: rgba(42,62,77,0.90);
  border-top: black solid 2px;
  font-size: 14px;
  overflow: auto;
}

#taskbar .tskbr_entry {
width: auto;
border: black solid 2px;
background-color: #161f2d;
border-radius: 5px;
margin: 0 2px 5px 2px;
padding: 3px;
float: left;
overflow: hidden;
transition: all 1s ease;
}

#taskbar .tskbr_entry:hover {
opacity: .50;
transition: all 1s ease;
}

#taskbar .tskbr_entry a:hover {
color: lime;
}

@keyframes glowing {
  0% { box-shadow: 0 0 .5vw yellow; }
  50% { box-shadow: 0 0 1vw white; }
  100% { box-shadow: 0 0 .5vw orange; }
}

#taskbar .tskbr_entry a.glow {
animation: glowing 3s infinite;
}

#taskbar .tskbr_entry img {
margin-right: 5px;
border: none;
width: 30px;
height: auto;
float: left;
max-width: 30px;
}

#taskbar .tskbr_entry a,
#taskbar .tskbr_entry b {
display: inline-block;
width: 100%;
font-size: 14px;
line-height: 30px;
text-align: center;
height: 100%;
}

#taskbar #mini_notice {
  float: right;
  margin-right: 3px;
  transition: none;
}

#taskbar #mini_notice:hover {
transition: none;
}

#taskbar #taskbar_legend img {
margin: 0;
}

#mini_chat,
#mini_chat * {
    box-sizing: border-box;
}

#mini_chat {
width:                            270px; 
height:                           530px; 
font-size:                        14px;
z-index:                          100;
background-color:                 #161f2d;
background:                       rgba(22,31,45,0.90);
border:                           2px solid black;
border-top-right-radius:                    15px;
border-top-left-radius:                    15px;
color:                            white;
bottom:                           50px;
right:                            5px;
position:                         fixed;
}

#mini_chat #rp_button {
left: 5px;
top: 5px;
position: absolute;
width: 40px;
}

#mini_chat #mini_chat_close_button {                          
width: 40px;
position: absolute;
right: 5px;
top: 5px;
}

#mini_chat h4 {
margin:     7px 0 0 0;
padding:    3px 0 3px 0;
text-align: center;
padding:    0;
width:      100%;
font-size:  15px;
}

#mini_chat #selector_container  {
width:                           175px;
margin: 3px auto 3px auto;
display: block;
overflow: auto;
}

#mini_chat #selector_container  h6 {
width:                            100%;
margin: 3px 0 3px 0;
padding: 0;
display: block;
float: left;
font-size: 13px;
text-align: center;
}

#mini_chat #selector_container select {
width:                            100%;
font-size:                        14px;
padding:                          0;
text-align:                       center;
border:                           none;
margin: 0;
display: block;
border:                           2px solid black;
float: left;
}

#mini_chat #chat_messages {
width:              96%;
height:             350px;
padding:            5px;
background-color:   #2a3e4d;
color:              white;
border:             2px solid black;
font-size:          12px;
overflow:           auto;
word-wrap:   break-word;
margin:      2px auto 2px auto;
box-sizing: border-box;
}

#mini_chat #chat_messages .player_message {
width:       98%;
padding:     3px;
margin:      2px 0 2px 1%;
display:     block;
color:       white;
background:  #0a101a;
word-wrap:  break-word;
border: black solid 2px;
overflow: auto;
}

#mini_chat #chat_messages .player_message img {
width: 20px;
height: auto;
}

#chat_room .player_message .pn_box {
margin: 3px;
}

#mini_chat #chat_messages .player_message .pn_box_link {
width: 5vw;
padding: 3px;
margin: 0vw 3px 0vw 3px;
font-size: 14px;
}

#mini_chat #chat_messages .player_message i {
float:       right;
color:       white;
margin-top: 3px;
margin-right: 3px;
font-size: 11px;
}

#mini_chat #chat_messages .chat_user_name a {
    text-decoration: none;
}

#mini_chat textarea {
height:      60px;
width:       96%;
background:  black;
color:       white;
font-size:   12px;
border:      3px solid black;
padding:     0;
resize:      none;
margin:      0 auto 0 auto;
box-sizing: border-box;
display: block;
}

#mini_chat input {
background-color:   #2a3e4d;
border:      2px solid black;
font-size:   15px;
margin:      5px 10px 5px 2px;
padding:    3px 5px 3px 5px;
color:       white;
float:       right;
border-bottom-right-radius:       3px;
transition:      background-color 1s ease;
}

#mini_chat input:hover {
background-color:   #161f2d;
transition:      background-color 1s ease;
}

/* LESP Reward Ad */

#lesp_countdown_display {
position:         fixed;
background-color: #2a3e4d;
text-decoration: none;
color:           white;
transition:      color 1s ease;
border:          black solid .15vw;
width:                            10vw; 
height:                           auto;
font-size:                        1.15vw;
min-height:                        auto;
min-width:                         auto;
left:                             -14vw;
bottom:                            7vw;
margin:                           0vw 0 0 0;
padding:                          1vw 1vw 1vw 2vw;
float:                            none;
border-top-right-radius:          .50vw;
border-bottom-right-radius:       .50vw;
border-width:                     .15vw;
z-index: 100;
}

#lesp_countdown_display:hover {
transition:    color 1s ease;
background-color: #4e6a9d;
}

#lesp_countdown_display b {
color: lime;
}

#lesp_countdown_display h4 {
margin:  .15vw;
font-size: 1vw;
}

#lesp_countdown_display #sprite {
width: 5vw;
height: 5vw;
float: none;
margin: 0 auto 0 auto;
display: block;
}

#lesp_countdown_display p {
font-size: 1vw;
padding: 0;
margin: 0;
text-align: center;
}

/* SP ID Creation */


#id_creation {
margin:     0 25px 0 25px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
padding: 10px;
}

#id_creation h1 {
font-size:  24px;
text-align: center;
font-size:         17px;
padding:           0 0 0 0;
margin:            0px 10px 0px 10px;
text-align:        center;
background-color:   #1f273c;
border:             black solid 2px;
}

#id_creation p {
margin:     20px 20px 20px 20px;
background-color:   #1f273c;
border:             black solid 2px;
padding: 2%;
}

#id_creation textarea {
width: 100%;
background-color:   #1b2435;
border:             black solid 2px;
color: white;
}

#id_creation .flip_sprite {
transform:          scaleX(-1); 
}

#id_creation #done_sp_id {
margin: 0 auto 0 auto;
display: block;
border: black solid 4px;
}

#id_creation div p {
margin:  10px 40px 10px 40px;
}

#id_creation div p i {
color:          lime;
}

#id_creation div p input {
margin:  0 auto 0 auto;
display: block;
}

#id_creation div p select {
margin-left: 20px;
}

#id_creation div h5 {
margin: 10px 0 5px 0;
}

#id_creation div #widget_bg {
padding:           0 0 0 0;
margin:            0 auto 20px auto;
overflow:          hidden;
background-repeat: no-repeat;
border:            black solid 4px;
border-radius:     0px;
}

#id_creation div #widget_bg p {
margin:     0;
padding: 0;
background-color:   transparent;
border:             none;
}

#id_creation div .widget_normal {
width:             300px;
height:            63px;
}

#id_creation div .widget_large {
width:       600px;
height:      125px;
}

#feedback div {
z-index:       99;
position:      fixed;
left:          0;
top:           230px;
background-image: url(../images/menu/feedback.png);
height:        125px;
width:         34px;
display:       block;
}


#feedback div:hover {
opacity:      .30;
}


#game_over {
width:     450px;
margin:    0 auto 0 auto;
}

#game_over h3 {
color:     white;
text-align: center;
}

#game_over h4 {
color:     red;
text-align: center;
}

#game_over ul li b {
color:     red;
}

#game_over a {
margin:    0 auto 0 80px;

}

#game_over ul {
list-style: none;
margin-bottom: 0px;
padding-bottom: 0px;
}

#game_over ul li {
padding-left: 40px;
margin:       5px 0 5px 0;
background: url(../images/icons/doll.png) no-repeat left;
}

#game_over p {
color:        white;
}

#game_over p a {
margin:       0;
}

.link_appearance {
text-decoration:      underline;
color: lime;
}

.link_appearance:hover {
color: #1d5e12;
}

.information_table {
width:            100%;
color:            white; 
margin:           0 auto 0 auto;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
width: 964px;
padding: 10px;
margin-left: -50px;
}

#search_output_container {
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
width: 960px;
border: black solid 2px;
margin-left: -50px;
}

#script_container .information_table, 
#search_output_container .information_table{
margin-left: 0px;
width: 960px;
}

#search_output_container .pn_box {
margin: 5px;
}

.information_table .icon {
width: 30px;
}

.information_table tr {
background:       #0f123d;
border:           1px solid black;
border-radius:    25px;
}

.information_table tr th {
font-weight:      normal;
border:            #3a4666 solid 3px;
background-color:  #212837;
}

.information_table tr th h3 {
font-size: 20px;
margin:    10px;
padding:   0px;
}

.information_table tr td {
border:             black solid 3px;
background-color:   #1f273c;
}

.information_table tr td, .information_table tr th {
text-align:        center;
}

.information_table .special_info {
text-align:        left; 
padding:           0 14px 0 14px;
}

.information_table .image_box {
width:             50px;
height:            50px;
}

.information_table .object_info {
margin: 3px; 
padding: 0;
float: left;
border-radius: 15px;
background-color:   #1b2435;
line-height: 20px;
width: 120px;
border: black solid 2px;
font-size: 14px;
text-align: left;
}

.information_table .object_info img {
width: 20px; 
height: 20px;
float: left;
}

/* Creature Collection Book */

#collector_cat_list,
#collector_cat_list *, 
#creature_collector_panel,
#creature_collector_panel *{
box-sizing: border-box;
}

#collector_cat_list,
#creature_collector_panel {
min-height: 825px;
padding: .5%;
float: left;
margin-left: .5%;
margin-top:  2.5%;
margin-bottom:  1%;
}

#collector_cat_list {
width: 28%;
background-color:      #2a3e4d;
border: black solid 2px;
}

#collector_cat_list h2 {
margin: 15px 0 15px 0;
padding: 0 0 0 0;
text-align: center;
font-size: 18px;
}

#collector_cat_list ul {
list-style: none;
margin: 0 0 0 0;
padding: 0;
}

#collector_cat_list ul li {
padding: 0;
color: #d4eee5;
transition:    color 1s ease;
border: black solid 2px;
padding:  4px;
margin-top: 2px;
background-color:   #1f273c;
}

#collector_cat_list ul li:hover {
transition:    color 1s ease;
background-color:  #2d333f;
}

#collector_cat_list ul #selected_cat {
color: lime;
transition:    color 1s ease;
}

#collector_cat_list ul #selected_cat:hover {
transition:    color 1s ease;
}

#creature_collector_panel {
width: 70%;
background-color:      #2a3e4d;
border: black solid 2px;
}

#creature_collector_panel .creature_container {
float:          left;
border-radius:  20px;
margin:         .5%;
width:          48%; 
display:        block;
height:         85px;
text-align:     center;
background-color:   #1f273c;
border:             black solid 2px;
color:             white;
overflow:  hidden;
}


#creature_collector_panel .creature_container .creature_portrait,
#creature_collector_panel .creature_container .faded_creature_portrait {
width:  25%;
height: auto;
border: black solid 2px;
margin: 2.5%;
border-radius: 10px;
float:  left;
background-color:   #2d333f;
}

#creature_collector_panel .creature_container .faded_creature_portrait {
opacity: .25;
}

#creature_collector_panel .creature_container .creature_details {
width: 70%;
padding: 0;
margin: 0;
border-radius: 0px;
float:  left;
}

#creature_collector_panel .creature_container .creature_details h3,
#creature_collector_panel .creature_container .creature_details h4,
#creature_collector_panel .creature_container .creature_details h5 {
padding: 0;
margin: 7px 0 7px 0;
}


#creature_collector_panel .creature_container .creature_details h3 {
font-size: 16px;
}

#creature_collector_panel .creature_container .creature_details h4 {
font-size: 15px;
}

#creature_collector_panel .creature_container .creature_details h5 {
font-size: 14px;
}

#creature_collector_panel .creature_container p {
clear:  both;
padding: 1%;
width:  100%;
}

#creature_collector_panel #collection_footer {
width: 100%;
clear: both;
border: none;
height: auto;
background-color: transparent;
padding: 0;
margin: 0;
}

#creature_collector_panel #prev {
float: left;
width: 50px;
}

#creature_collector_panel #next {
float: right;
width: 50px;
}


#creature_collector_panel  .creature_container span {
clear: both;
float: none;
}

#creature_collector_panel .direction {
transition:    opacity 1s ease;
}

#creature_collector_panel .direction:hover {
opacity: .50;
transition:    opacity 1s ease;
}

#collection_book, #war_book, #blood_book, #skill_book, #challenge_book, #comp_of_love{
clear:      both;
}

#collection_book h5, #war_book h5, #blood_book h5, #skill_book h5, #challenge_book h5, #comp_of_love h5 {
width:          783px;
height:         34px;
margin:         0px 0 0 20px;
padding:        0;
clear:          both;
border-radius:  0px;
box-shadow:     0px 0px 0px transparent;
border:         none;
text-align:     center;
color:          white;
font-size:      20px;
line-height:    50px;
}

#collection_book div, #war_book div, #blood_book div, #skill_book div, #challenge_book div, #comp_of_love div {
width:  783px;
margin:  -20px 0 0 20px;
padding: 20px 0 15px 35px;
margin-bottom: 15px;
overflow: auto;
}

#war_book h5 {
background: transparent url(../images/special-backgrounds/book-top-r.png) no-repeat;
}

#war_book div {
background: transparent url(../images/special-backgrounds/book-mid-r.jpg) repeat-y;
}

#collection_book h5 {
background: transparent url(../images/special-backgrounds/book-top-o.png) no-repeat;
}

#comp_of_love h5 {
color: black;
background: transparent url(../images/special-backgrounds/book-top-s.png) no-repeat;
}

#collection_book div {
background: transparent url(../images/special-backgrounds/book-mid-o.jpg) repeat-y;
}

#comp_of_love div {
background: transparent url(../images/special-backgrounds/book-mid-s.jpg) repeat-y;
}

#blood_book h5 {
background: transparent url(../images/special-backgrounds/book-top-b.png) no-repeat;
}

#blood_book div {
background: transparent url(../images/special-backgrounds/book-mid-b.jpg) repeat-y;
}

#challenge_book h5 {
background: transparent url(../images/special-backgrounds/book-top-l.png) no-repeat;
}

#challenge_book div {
background: transparent url(../images/special-backgrounds/book-mid-l.jpg) repeat-y;
}

#skill_book h5 {
background: transparent url(../images/special-backgrounds/book-top-g.png) no-repeat;
}

#skill_book div {
background: transparent url(../images/special-backgrounds/book-mid-g.jpg) repeat-y;
width:  750px;
}

#comp_of_love div div h4 {
color: white;
background-color: #523744;
border-radius: 25px;
border: black solid 2px;
}

#comp_of_love div div {
width: 600px;
background: none;
}

#comp_of_love div div img, #comp_of_love div div .math {
float: left;
transform: scaleX(-1); 
}

#comp_of_love div div .math {
font-size: 100px;
color: black;
margin: 0 25px 0 25px;
}

#comp_of_love div.cumstain {
background: transparent url(../images/special-backgrounds/cum-stain.png) no-repeat;
	background-position: bottom left;

}

#comp_of_love div div .hint {
float: left;
border: black solid 2px;
color: black;
background-color: white;
border-radius: 25px;
padding: 10px;
margin-left: 40px;
margin-top: 40px;
width: 360px;
}

#comp_of_love div div .hint a {
color: blue;
}

#comp_of_love div .hint_options {
height: auto;
width: 550px;
padding: 0;
margin: 0;
background-color: #b75c84;
border: black solid 2px;
border-radius: 15px;
padding: 5px 0 5px 0px;
margin: 0px auto 0px auto;
}

#comp_of_love div .hint_options input {
margin-left: 25px;
}

#skill_display {
position: fixed;
display: none;
height: 300px;
width: 500px;
margin: 0px 0 0 150px;
overflow:auto;
}

#skill_display p {
background: #0f1739;
padding: 10px;
border-radius: 5px;
border: black solid 2px;
}

#skill_display table {
width: 100%;
text-align: center;
}

#skill_display table  th {
background: #0f1739;
}

#skill_display table  td {
background: #2b3860;
}

#book_completion div h3 {
font-size:      20px;
text-align: center;
position: absolute;
margin: -4px 0 0 220px;
z-index: 5;
}

#book_completion div {
height: 20px;   
position: relative;
background: #4e5262;
border-radius: 25px;
padding: 10px;
width: 550px;
margin: 0 auto 0 auto;
z-index: 4;
}

#book_completion div span {
display: block;
height: 100%;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #1a8637;
}

#collection_book div div {
float:          left;
padding:        5px;
border-radius:  20px;
margin:         10px;
font-size:      14px;
min-width:      150px;
width:          140px; 
display:        block;
height:         80px;
text-align:     center;
background:     #918745;
color:          #fdf5c1;
border:         #b1a765 solid 2px;
}

#collection_book div div h4 {
margin: -4px 0 0 0;
line-height: 14px;
padding: 0px;
}

#collection_book div div h4 a {
color: white;
}

#collection_book div div h4 a:visited,
#collection_book div div h4 a:active  {
color: #fdf5c1;
}

#collection_book div div h4 a:hover {
color: #b8af77;
}

#collection_book div div p {
width:         90px;
float:         left;
margin-top:        8px;
display:       block;
color:         #7a7241;
background:    #cdc8aa;
border-radius: 10px;
}


#skill_book div div {
background:     #225626;
border:         #599a5e solid 2px;
width:          210px;
height:         60px;
padding:        0 10px 0 10px;
margin:         10px 0px 0px 6px;
border-radius:  10px;
float: left;
}

#skill_book div div h4 {
margin: 5px; 
padding: 0;
}

#skill_book div div p {
background:     #307034;
border-radius: 5px;
margin: 0; 
padding: 0;
text-align: center;
}

#skill_book div div .unavailable {
background: #703030;
}

#skill_book div div .book_element {
float: left; 
}

#skill_book div div .examine {
float: right; 
transition:    all 1s ease;
}

#skill_book div div .examine:hover {
opacity: .50;
transition:    all 1s ease;
}

#blood_book div .faded, #collection_book .faded, #skill_book div .faded, 
#war_book div .faded, #challenge_book div .faded, #challenge_display .faded {
opacity: .50;
}

#collection_book .faded {
background-color: #72996c;
border: black solid 2px;
}

#blood_book div div {
float:          left;
padding:        5px;
color:          black;
border-radius:  20px;
margin:         10px;
font-size:      14px;
height:         120px;
width:          300px;
padding:        10px;
background:     #a19f9f;
border: #6f6e6e solid 2px;
}

#blood_book div div h4 {
margin:         0px 0 2px 0;
padding:        0;
}

#blood_book div div h4 a {
color: black;
}

#blood_book div div p {
width:      200px; 
float:      left;
background: #d5d5d5;
border-radius: 5px;
margin: 1px;
padding: 1px;
}

#blood_book div div .avatar {
width:  65px;
height: 65px;
margin-left: 5px;
border: none;
}

#challenge_book div div {
padding:        5px;
color:          black;
border-radius:  20px;
margin:         10px;
background:     #1b2435;
border:         black solid 2px;
font-size:      14px;
color:          #b8c6e0;
min-height:     390px;
width:          90%;
}

#book_sort_order {
display: block;
float: left;
margin: 15px 0 0 220px;
position: absolute;
}

 #challenge_book div div h4 {
padding: 0;
margin: 0;
font-size: 16px;
}

#challenge_display table tr th {
background-color:   #1f273c;
border:             black solid 2px;
}


#challenge_display table tr td {
border:            black solid 3px;
background-color:   #1b2435;
padding: 5px;
}

#challenge_book div div .challenge_creature_box, #challenge_display table tr td .challenge_creature_box {
width:         100px;
min-height:    130px;
float:         left;
border:        2px solid black;
margin:        10px 3px 0 3px;
background:    #2d333f;
border-radius: 10px;
}

#challenge_book div div .challenge_creature_box h6, #challenge_display table tr td .challenge_creature_box h6 {
text-align:    center;
margin:        5px 5px 5px 5px;
font-size:     14px;
text-overflow:     ellipsis;
white-space:       nowrap;
overflow:          hidden;
}

#challenge_book div div .insufficient_level {
float:         left;
border:        2px solid black;
margin:        10px 5px 0 5px;
background:    #2d333f;
border-radius: 10px;
padding:       5px 8px 5px 8px;
width:         332px;
}

#challenge_book div div .insufficient_level b {
color: red;
}

#challenge_book div div ol {
float:         left;
border:        2px solid black;
margin:        10px 5px 0 5px;
background:    #2d333f;
border-radius: 10px;
padding:       5px 8px 5px 8px;
width:         332px;
font-size:     11px;
list-style:    none;

}

#challenge_book div div span img {
margin-bottom: -10px;
}

#challenge_book div div .prepare_for_battle {
min-height: 50px;
width: 332px;
margin: -10px auto 0 auto;
border: none;
}

#challenge_book div div .prepare_for_battle .pn_box_link {
margin:     10px auto 0 auto;
width:      100px;
display:    block;
}

#challenge_book div div .effect_information {
float:         left;
width: 300px;
min-height:     100px;
background-color: #2d333f;
border: black solid 2px;
}

#challenge_book div div .reward_information {
height: auto;
min-height:    0;
background-color: #2d333f;
border: black solid 2px;
}

#challenge_book div div .reward_information table {
margin: 0 auto 0 auto;
}

#challenge_book div div .reward_information  h3 {
text-align: center;
margin: 0;
}

#challenge_book div div .reward_information table .challenge_reward {
width: 30px;
min-height:    0;
}

#challenge_book div div .effect_information h3 {
font-size: 14px;
margin:    0;
padding:   0;
text-align: center;
}

#challenge_display {
box-shadow:      -5px 0px 3px black;
background:      #2d333f;
border:          black solid 2px;
padding:         20px;
}

#challenge_display table {
width: 100%;
}

#challenge_display table td {
text-align: center;
}

#challenge_display table tr td .challenge_creature_box {
width:         100px;
min-height:    130px;
margin-bottom: 15px;
}

#challenge_display table tr td .challenge_creature_box h6 {
}

#challenge_display table tr td ul {
font-size: 13px;
text-align: left;
list-style: none;
padding-left: 0;
margin-left: 7px;
}

#challenge_display table tr td ul li {
line-height: 30px;
}

#challenge_display table .challenge_reward {
width: 25px;
}

#challenge_display .prepare_for_battle {
min-height:      60px;
width:           332px;
border-radius:   10px;
margin:          10px auto 0 auto;
}

#challenge_display .prepare_for_battle a {
width: 100px;
margin: 10px auto 0 auto;
display: block;
}
 
#challenge_options {
border:        2px solid black;
margin:        6px auto 6px auto;
background:    #2d333f;
border-radius: 10px;
padding:       5px 18px 5px 18px;
line-height:   35px;
width:         650px;
}

#challenge_options #spirit_display {
border:        2px solid black;
margin:        -30px 5px 0 5px;
background:    #2c457b;
border-radius: 10px;
width:         40px;
height:        80px;
float:         right;
}

#challenge_options #spirit_display img {
margin: 0 auto 0 auto;
display: block;
}

#challenge_options #spirit_display h6 {
margin: 0;
text-align: center;
}

#challenge_options #option_holder {
float: left;
margin-left: 10px;
}

#challenge_options h4 {
margin: 0;
}

#war_book div div {
float:          left;
padding:        5px;
color:          black;
border-radius:  20px;
margin:         10px;
background:     #280709;
border:          #6e272a solid 2px;
font-size:      14px;
color:          #fae3e5;
height:         220px;
width:          210px;
overflow:       auto;
}



#war_book div div div {
height:         70px;
width:          100%;
box-shadow:     none;
border:         none;
padding:        0px; 
margin:         0;
}

#war_book div div h6 {
padding: 0px;
margin: 5px 0 0 0;
text-align: center;
}

#war_book div div p {
padding: 0px;
margin: 0px;
}

#war_book div div h4 {
margin:         0px auto 5px auto;
text-align:     center;
}

#war_book input {
margin: -35px 0 10px 150px;
width: auto;
float: left;
}

#users_online_box table tr td .avatar {
width:        50px;
height:       50px;
border: none;
}

#users_online_box table tr td .mail {
float: right;
margin-top: 5px;
border: none;
}

#users_online_box table {
width:            90%;
text-align:       center;
border-bottom-left-radius:    15px;
border-bottom-right-radius:    15px;
margin: 0 5% 20px 5%;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

#users_online_box table th {
background-color:   #1f273c;
border:             black solid 2px;
}

#users_online_box h3, #users_online_box, h4 {
text-align: center;
}

#users_online_box h3 {
margin: -50px 0 0 300px;
position: absolute;
}

.map_container #magnifier {
position: absolute;
width: 7.14%;
}

/* Quick Action Layout */

#mobile_quick_actions {
width:              776px;
min-height:         205px;
margin:             0 auto 25px auto;
border-radius:      20px;
background-color:   #2a3e4d;
background:         rgba(42,62,77,0.90);
border:             black solid 2px;
}

#mobile_quick_actions #quick_display_options {
background-color:   #1f273c;
border:             black solid 2px;
color:              white;
margin:             5px auto 5px auto;
padding:            5px 6px 2px 6px;
overflow: auto;
}

#mobile_quick_actions #quick_display_options .image_pn_box {
width: auto;
float: right;
margin-top: -3px;
}

#mobile_quick_actions #quick_button_list {
clear: both;
}

#mobile_quick_actions h1 {
font-size: 20px;
margin: 0;
padding: 10px 0 10px 0;
}

#mobile_quick_actions h2 {
color: white;
text-align: center;
}

#mobile_quick_actions h4 {
color: white;
text-align: left;
}

.quick_button_container {
width: 155px;
float: left;
}

.quick_button_container h5 img {
margin-left: 10px;
width: 30px;
}


.quick_button_container .preference_option {
float: left;
}

.quick_button, .faded_quick_button {
float: left;
width: 130px;
height:130px;
margin: 5px;
padding: 0;
border-radius: 20px;
transition:      all 0.3s ease;
border:            black solid 3px;
background-color:  #2d333f;
position: relative;
box-sizing: border-box;
}

.quick_button:hover {
transition:      all 0.3s ease;
background-color: #391111;
}

.quick_button img, .faded_quick_button img {
position:   absolute;
top:        2px;
margin:     0 auto 0 auto;
width:      60px;
left:       50%;
transform: translateX(-50%);
display:    block;
}

.quick_button p, .faded_quick_button p {
position:           absolute;
bottom:             0;
color:              white;
background-color:   #1f273c;
border:             black solid 2px;
margin:             0;
padding:            10px;
min-height:         50px;
width:              125px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-left: none;
border-bottom: none;
border-right: none;
text-align: center;
box-sizing: border-box;
}

.quick_button p a, .faded_quick_button p a {
text-decoration: none;
color: white;
}

.faded_quick_button {
background:       rgba(57,17,17,0.75);
}

.faded_quick_button .unavailable {
position: absolute;
top: 3px;
left: 3px;
width: 115px;
height: 115px;
border-radius: 15px;
padding: 0px 2px 0px 2px;
margin: 0;
background: rgba(0,0,0,.80);
z-index: 5;
}

.faded_quick_button .unavailable h5 {
    font-size: 15px;
    margin: 0;
    padding: 5px;
    color: lime;
    text-align: center;
}

.faded_quick_button .unavailable span {
margin: 0 auto 0 auto;
text-align: center;
display: block;
font-size: 14px;
}

.faded_quick_button .unavailable ul {
margin: 0 0 0 0;
padding: 0 0 0 20px;
font-size: 14px;
}

#quick_actions_results {
background-color: #2d333f;
border: black solid 2px;
clear: both;
position: absolute;
margin: 5px;
width: 760px;
max-height: 350px;
overflow: auto;
display: none;
z-index: 6;
position: relative;
}

#quick_actions_results .sm_icon {
    width: 30px;
    height: auto;
}

#quick_actions_results h3, 
#quick_actions_results h4 {
color: white;
padding-left: 15px;
}

#quick_actions_results p {
padding: 15px;
color: white;
background-color:   #1f273c;
border:             black solid 2px;
margin: 1%;
}

#quick_actions_results ul {
color: white;
background-color:   #1f273c;
border:             black solid 2px;
margin: 1%;
}

#quick_actions_results #quick_preset_breed li {
background-color:   #1b2435;
border:     #3a4666 solid 2px;
background: rgba(27,40,55,0.90);
margin: 10px 5px 10px 5px;
padding: 10px;
}

#quick_action_options {
padding: 2px;
background-color:   #1f273c;
border:             black solid 2px;
}

#quick_actions_results .exact_trades_m {
opacity: 1;
}

#quick_actions_results .close_trades_m {
opacity: 1;
}

#quick_actions_results .partial_trades_m {
opacity: 1;
}

#quick_actions_results #quick_action_options .pn_box {
text-transform: uppercase;
}


#gift_code_box {
background: url(/images/main/gift-code-bg.png) transparent;
background-position: center; 
background-repeat: no-repeat;
padding: 30px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

#gift_code_box h2 {
text-align: center;
text-shadow: 2px 2px #000000;
}

#gift_code_box div {
border-radius: 15px;
width: 300px;
margin: 0 auto 0 auto;
padding: 25px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 3px;

}

#gift_code_box div p {
border-radius: 15px;
background-color:   #1f273c;
border:             black solid 3px;
padding: 15px;
}

#gift_code_box div input {
margin-left: 10px;
}

/* Support Reward Page */

#support_rewards {
border-radius: 20px;
margin: 10px 20px 10px 20px;
padding: 20px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

#support_rewards h2 {
background-color:   #1f273c;
border:             black solid 2px;
}

#support_rewards ul {
list-style: none;
margin: 0;
padding: 0;
}

#support_rewards ul li {
background-color:   #1f273c;
border:             black solid 2px;
border-radius: 15px;
padding: 5px 10px 5px 10px;
margin: 10px 0 10px 0;
}

#support_rewards ul li h3 {
}

#support_rewards ul li h4 {
text-align: left;
line-height: 50px;
}

#support_rewards ul li h4 img {
width: 50px;
float: left;
margin-right: 20px;
}

#support_rewards ul li p {
padding: 10px;
clear: both;
background-color:   #1b2435;
border:     #3a4666 solid 2px;
background: rgba(27,40,55,0.90);
}

#support_rewards ul li p .reward_claim_button {
padding: 5px;
text-decoration: none;
margin: 5px;
border:            #3a4666 solid 2px;
background-color:  #212837;
}

#support_rewards ul li p .reward_claim_button:hover {
border:            #3a4666 solid 2px;
background-color:   #3a4666;
}

#stretch_display_box #breeding_presets_div {
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
width: 90%;
margin: 2.5% 5% 2.5% 5%;
}

#stretch_display_box #breeding_presets_div table {
margin: 2.5% auto 2.5% auto;
width: 90%;
}

#stretch_display_box #breeding_presets_div table tr .delete {
width: 50px;
}

#stretch_display_box #breeding_presets_div table tr .delete:hover {
opacity: .50;
}

#stretch_display_box #breeding_presets_div table th {
background-color:   #1f273c;
border:             black solid 2px;
}

#stretch_display_box #breeding_presets_div table tr.type_1 {
border:            #3a4666 solid 2px;
background-color:   #3a4666;
}

#stretch_display_box #breeding_presets_div table tr.type_2 {
border:            #3a4666 solid 2px;
background-color:  #212837;
}

#stretch_display_box #breeding_presets_div table td.sprite {
background-color:   #1b2435;
border:     #3a4666 solid 2px;
background: rgba(27,40,55,0.90);
}

#stretch_display_box #breeding_presets_div table td.sprite img {
margin: 0 auto 0 auto;
display: block;
width: 125px;
}

#stretch_display_box #breeding_presets_div table td.item {
background-color:   #1f273c;
border:             black solid 2px;
padding: 5px;
}

#stretch_display_box #breeding_presets_div table td.item img {
width: 30px;
}

#stretch_display_box #player_activity_list {
margin: 15px 35px 15px 35px;
padding: 15px 0 15px 0;
}

#stretch_display_box #player_activity_list h3 {
text-align: center;
padding-bottom: 10px;
margin: 0;
}

#stretch_display_box #player_activity_list table {
background-color:      #1b2837;
margin: 0 auto 0 auto;
border: black solid 2px;
padding: 30px;
border-radius: 15px;
width: 750px;
}

#stretch_display_box #player_activity_list table th {
background-color: #1b2435;
text-align: center;
}

#stretch_display_box #player_activity_list .underline {
text-decoration: underline;
color: tan;
}

#stretch_display_box #player_activity_list table td,
#stretch_display_box #player_activity_list table th {
text-align: center;
border-bottom: black solid 2px;
}

#stretch_display_box #player_activity_list table td .complete_color {
color: lime;
}


#stretch_display_box #player_activity_list table td .pending_color {
color: orange;
}

/* Scene Maker Layout */

#scene_maker {
width:                      1000px;
margin: 0 auto 0 auto;
color: white;
background-image: url("/images/main/classic-silhouette.png");
background-color: #0e2236;
background-size: 50%;
border-bottom-right-radius:    15px;
border-bottom-left-radius:     15px;
border: black solid 2px;
}

#scene_maker #banner .pn_logo {
margin-left: -185px;
border: none;
margin-top: 15px;
}

#scene_maker #top_menu {
margin-left: 70px;
}

#scene_maker h2, #scene_maker h3, #scene_maker h4, #scene_maker h5 {
text-align: center;
color: white;
padding: 10px 0 5px 0;
margin: 0 0 0 0;
}

h2#scene_header {
margin: 10px auto 10px auto;
border-radius:  15px;
border: black solid 2px;
background-color: #2d333f;
width: 80%;
}

#scene_bg {
height: 585px; 
width: 780px; 
position: relative;
overflow: hidden;
background-repeat: no-repeat;
float: left;
border: black solid 2px;
margin: 0 0  0px 10px;
padding: 0;
background-size: contain;
}

#black_stage #scene_bg {
float: none;
margin: 0 auto 0 auto;
border-radius: 5px;
background-color: black;
}

#scene_bg .unclickable_object {
pointer-events: none;
}

#scene_bg .object,
#scene_bg .unclickable_object  {
padding: 0 0 0 0; 
margin: 0 0 0 0; 
position: absolute;
}

#scene_bg .object img,
#scene_bg .unclickable_object img {
width: 100%;
height: 100%;
padding: 0 0 0 0; 
margin: 0 0 0 0; 
}

#scene_bg .object p,
#scene_bg .unclickable_object p {
padding: 0 0 0 0; 
margin: 0 0 0 0; 
text-align: left;
position: absolute;
pointer-events: none;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
display: block;
height: 50px;
}

#scene_maker #scene_options {
background-color: #2a3e4d;
background:       rgba(42,62,77,0.90);
float: left;
border: black solid 2px;
margin: 0;
padding: 0;
}

#scene_maker #scene_options.vertical {
width: 192px;
height: 588px; 
border-top: none;
border-bottom: none;
border-left: none;
}

#scene_maker #scene_options.horizontal,
#scene_maker #scene_options.bottom_horizontal  {
width: 974px;
margin-left: 10px; 
}

#scene_maker #scene_options.horizontal {
border-bottom: none;
height: 104px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}

#scene_maker #scene_options.bottom_horizontal {
clear: both;
float: none;
height: auto;
overflow: auto;
border-top: none;
margin-bottom: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

#scene_maker #scene_options.bottom_horizontal #navigation_options {
margin: 0 0 0 245px;
padding-top: 13px;
display: block;
}

#scene_maker #scene_options.bottom_horizontal #navigation_options a,
#scene_maker #scene_options.bottom_horizontal #navigation_options input {
text-decoration: none;
padding: 3px;
margin-left: 10px;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu {
height: auto;
float: none;
padding: 10px;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu h4 {
margin: 0;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu #timeline_container {
background-color: #1b2435;
border-radius: 10px;
padding: 10px;
overflow: auto;
float: none;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu #timeline_container .timeline_option,
#scene_maker #scene_options.bottom_horizontal #timeline_menu #timeline_container .active_timeline_option {
float: left;
text-decoration: underline;
float: left;
text-align: center;
width: 90px;
border:            #3a4666 solid 2px;
background-color:  #212837;
color: white;
padding: 0 5px 0 5px;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu #timeline_container .timeline_option a,
#scene_maker #scene_options.bottom_horizontal #timeline_menu #timeline_container .active_timeline_option a {
display: block;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu #time_frame_sub_menu p {
background-color:   #1f273c;
border:             black solid 2px;
border-radius:      15px;
padding: 5px;
margin: 10px 10px 10px 10px;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu #time_frame_sub_menu ul {
padding: 0;
margin: 0;
clear: both;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu #time_frame_sub_menu ul li {
float: left;
margin: 5px 5px 5px 5px;
padding: 0;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu #timeline_container .timeline_option:hover {
border:             #3a4666 solid 2px;
background-color:   #3a4666;
}

#scene_maker #scene_options.bottom_horizontal #timeline_menu #timeline_container .active_timeline_option {
border:             red solid 2px;
background-color:   #3a4666;
}

#scene_maker #scene_options.horizontal div {
float: left;
}

#scene_maker #scene_options.horizontal #loading_object_options {
z-index: 100;
}

#scene_maker #scene_options.horizontal .rotate_text {
transform: rotate(270deg);
font-size: 14px;
white-space: nowrap;
width: 35px;
padding: 0;
margin: 0;
margin-top: 40px;
}

#scene_maker #scene_options  .user_help {
font-size: 20px;
padding: 10px;
}

#scene_maker #scene_options ul {
list-style: none;
margin: 0;
padding: 10px;
}

#scene_maker #scene_options li {
margin: 0;
padding: 0;
}

#scene_maker #scene_options table {
width: 190px;
}

#scene_maker #scene_options #selected_object_options table th {
white-space: nowrap;
font-size: 14px;
}

#scene_maker #loading_object_options {
background-color: #1b2435;
margin-left: 30px;
}

#scene_maker #scene_options.vertical select {
max-width: 100px;
}

#scene_maker #scene_options.horizontal select {
width: 180px;
}

#scene_maker #scene_options input {
max-width: 100px;
}

#scene_maker #scene_options .pn_box#remove_button {
max-width: 180px;
border-color: red;
margin: 15px 5px 15px 5px;
}

#scene_maker #scene_options textarea {
height: 100px;
max-height: 100px;
width: 175px;
max-width: 175px;
}

#scene_maker #scene_options.horizontal #easy_select_options {
float: right;
background-color: #1b2435;
padding: 5px 5px 14px 5px;
width: 240px;
}

#scene_maker #scene_options .pn_box#object_selector {
max-width: 180px;
display: block;
margin: 0 auto 0 5px;
float: left;
}

#scene_maker #scene_options #object_total_div {
float: left;
margin: 0 auto 0 10px;
}

#scene_maker #scene_options #object_total_div input {
background-color: transparent;
width: 15px;
border: none;
color: white;
}

#scene_maker #scene_options.horizontal #general_scene_options input,
#scene_maker #scene_options.horizontal #general_scene_options select {
max-width: 180px;
width: 180px;
}

/* Player Scene Viewer */

#scene_maker #scene_list {
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
overflow: auto;
margin: 30px;
}

#scene_maker #scene_list .preview_container {
width: auto;
float: left;
margin-bottom: 10px;
}

#scene_maker #scene_list .preview_container .scene_bg_preview {
width: 150px;
height: 113px;
border: black solid 4px;
margin: 10px 10px 10px 10px;
background-size: contain;
background-repeat: no-repeat;
transition:      all 0.3s ease;
}

#scene_maker #scene_list .preview_container .scene_bg_preview b {
color: yellow;
}

#scene_maker #scene_list .preview_container .scene_bg_preview:hover {
border-color: #f5eca2;
transition:      all 0.3s ease;
opacity: .80;
}

#scene_maker #scene_list .preview_container .scene_bg_preview h4 {
font-size: 16px;
margin: 30px 3px 0 3px;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

#scene_maker #scene_list .preview_container a {
text-decoration: none;
width: 100%;
height: 100%;
display: block;
}

#scene_maker #scene_list .preview_container .preview_options {
margin-left: 25px;
display: block;
width: 150px;
}

#scene_maker #scene_list .preview_container .preview_options a {
display: inline;
height: auto;
width: auto;
padding: 0px 10px 0px 10px;
font-size: 14px;
}

#scene_maker #scene_list p.notice {
background-color:   #1b2435;
border:     #3a4666 solid 2px;
background: rgba(27,40,55,0.90);
margin: 10px auto 10px auto;
padding: 5px;
width: 75%;
text-align: center;
border-radius: 15px;
}

#stretch_display_box #black_stage #scene_bg #play_button {
font-size: 50px;
color: white;
display: block;
width: 150px;
margin: 225px auto 0 auto;
white-space: nowrap;
}

#design_selector {
margin: 2% auto 2% auto;
display: block;
}

#design_vote_menu {
background-color:   #1b2837;
border: #3a4666 solid 2px;
width: 96%;
margin: 0 auto 0 auto;
border-radius: 15px;
}

#design_vote_menu #design_img {
width: 90%;
display: block;
margin: 0 auto 0 auto;
border: white solid 2px;
border-radius: 15px;
}

#design_vote_menu h3 {
    text-align: center;
}

#design_vote_menu h4 {
    text-align: center;
}

#design_vote_menu ul {
    text-align: center;
    list-style: none;
}


/* Dungeon Layout */

#diff_header {
color: white;
padding: 10px 13px 10px 13px;
margin: 0 auto 0 auto;
width: 800px;
font-size: 13px;
background-color: #401919;
border: black solid 2px;
text-align: left;
border-top: none;
border-bottom: none;
}

#dungeon_container {
width:              760px; 
margin:             0 auto 0 auto;
}

#dungeon_container #dungeon_map #player_hunt_notice {
width:                75px;
position:             absolute;
background:           rgba(0,0,0,0.50);
border-radius:        15px;
padding:              0px;  
font-size:            13px;
margin:               5px 0 0 5px;
padding:              10px;
}

#dungeon_container #dungeon_map #player_hunt_notice img {
width: 25px; height: 30px;
}

#dungeon_container #dungeon_map #player_hunt_notice b {
line-height: 30px;
margin-left: 5px;
}

#dungeon_container h6 {
line-height:                  30px;
margin:                       0 0 0 50px;
width:                        703px;
text-align: center;
border-top-right-radius:      15px;
border-top-left-radius:      15px;
border-bottom-right-radius:   0px;
border-bottom-left-radius:    0px;
font-size:                    18px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
border-bottom:                none;
box-sizing: border-box;
}

#dungeon_map {
height:             450px; 
width:              450px;
float:              left;
border: black solid 2px;
background-repeat: no-repeat;
background-color: #141414;
position: relative;
background-size: contain;
box-sizing: border-box;
}

#dungeon_map img {
border:             none;
position:           absolute;
}

#dungeon_map div a {
text-decoration:      none;
padding:              0 0 0 0;
margin:               0 0 0 0;
}

#dungeon_map div {
padding:           0;
margin:            0;
position:          absolute;
}

#dungeon_map div span {
clear:              both;
padding: 0;
margin: 0;
width: 100%;
border:             1px solid black;
text-align:         center;
display:            block;
font-size:          100%;
word-wrap:           break-word;
background-color: #132147;
padding:           2px;
}

#dungeon_map div img {
position:          relative;
width:             100%;
transition:         opacity .5s ease;
}

#dungeon_map div img:hover {
opacity: .50;
transition:         opacity .5s ease;
}

#dungeon_map div h5 {
background-color: #132147;
border:    2px black solid;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
font-size: 14px;
}

#dungeon_map div h5#danger {
color: #ff7777;
}

#dungeon_map div#uber_enemy,
#dungeon_map div#holiday_event {
height: 32.00%;
width:  22.22%; 
}

#dungeon_map .hunt_creature {
height: 10.00%;
width:  10.00%; 
}

#dungeon_map .hunt_creature span {
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#dungeon_map .hunt_creature span {
background-color: #1b2435;
}

#dungeon_map .dungeon_enemy_click {
box-shadow: 0px 0px 10px #ff5f5f;
border-radius: 5px;
background: rgba(255,95,95,0.50);
}

#dungeon_map #maze_panel {
border-radius:         .15vw;
width:                 10%;
height:                auto;
top:                   1%;
right:                 5%;
padding:               2%;
line-height:           20px;
font-size:             20px;
background-color: black;
background: rgba(0,0,0,0.8);
position: absolute;
}

#dungeon_map #maze_panel p {
padding: 0;
margin: 0;
text-align: center;
}

#dungeon_menu {
text-align:         center;
width:              303px;
min-height:         375px; 
border-bottom-right-radius:   15px;
background-color:   #2a3e4d;
background:         rgba(42,62,77,0.90);
border:             black solid 2px;
border-top:         none;
border-left:        none;
float:              left;
box-sizing: border-box;
}

#dungeon_menu .spacer {
margin: 0 0 0 0;
padding: 5px 0 5px 0;
}

#dungeon_menu table td a {
display: inline;
}

#dungeon_menu table {
width: 300px;
}

#dungeon_menu table td img {
display:            inline;
margin-top:         -5px;
}

#dungeon_menu table td a img {
display:            block;
margin:             0 0 0 0;
}

#dungeon_menu input {
padding: 5px 5px 5px 30px;
background-size: 25px 25px;
}

#dungeon_menu b {
color:              lime;
}

#dungeon_menu table {
border:             none;
}

#dungeon_menu h2 {
background: none;
border: none;
background-image: none;
box-shadow: none;
font-size: 30px;
width: auto;
}

#dungeon_menu h2 img {
float: none;
display: inline;
position: relative;
margin-bottom: -5px;
}

#dungeon_menu table p {
text-align: left;
padding: 5px;
}

#dungeon_menu h4 {
background-color:   #1f273c;
border:             black solid 2px;
width:              95%;
font-size:          15px;
border-bottom-right-radius:    0px;
border-bottom-left-radius:     0px;
box-shadow: none;
margin:             5px auto 5px auto;
}

#dungeon_menu #dun_item_use {
margin-top: 5px;
}

/* Universal Overlay Menus */

.overlay_menu {
width:              35vw;
min-height:         5vh;
max-height:         80vh;
padding:            .25vw .25vw .25vw .15vw;
overflow:           auto;
margin:             0;
border-radius:      .15vw;
position:           fixed;
box-shadow:         .15vw .15vw .25vw black;
display:            none;
color:              white;
background-color:   #0e2236;
background:         rgba(14,34,54,0.90);
border:             black solid .15vw;
z-index:            101;
box-sizing:         border-box;
font-size:          1vw;
top: 2vw;
left: 50%;
transform: translateX(-50%);
transition: height 0.5s ease;
}

.overlay_menu .sm_icon {
    width:  1.5vw;
    height:  auto;
}

.overlay_menu input {
width: 8vw;
min-width: auto;
font-size:          1vw;
margin: 0 auto 0 auto;
padding: .25vw .25vw .25vw .25vw;
background-size: 2vw 2vw;
height: auto;
}

.overlay_menu #main_display_img {
margin: 0 auto 0 auto;
width: 5vw;
display: block;
background-color:      #2a3e4d;
border: black solid .15vw;
padding: .25vw;
}

.overlay_menu #main_display_img.marble {
border-radius: 5vw;

}

.overlay_menu select {
font-size:          1vw;
width: auto;
clear: both;
margin: 1vw auto 1vw auto;
max-width: 100%;
display: block;
}

.overlay_menu input[type='checkbox'] {
    width: 2.5vw;
    height: 2.5vw;  
}

.overlay_menu input[type='text'] {
    width: 70%; 
    margin: 0 auto 0 auto;
    display: block;
}

.overlay_menu input[type='number'] {
    width: 70%; 
    margin: 0 auto 0 auto;
    display: block;
}

.overlay_menu .close {
width: 2vw;
height: 2vw;
  position: absolute;
  top: 0;
  right: 0;
}

.overlay_menu h1 {
margin: 1.45vw 0 1.45vw 0;
font-size: 1.5vw;
}

.overlay_menu h2 {
margin: 1.35vw 0 1.35vw 0;
font-size: 1.4vw;
}

.overlay_menu h3 {
margin: 1.25vw 0 1.25vw 0;
font-size: 1.3vw;
}

.overlay_menu h4 {
margin: 1.15vw 0 1.15vw 0;
font-size: 1.15vw;
}

.overlay_menu h5 {
text-align: center;
margin: 1vw 0 1vw 0;
font-size: 1.08vw;
}

.overlay_menu h6 {
margin: .90vw 0 .90vw 0;
font-size: 1vw;
}


.overlay_menu p {
background-color:      #2a3e4d;
border: black solid .15vw;
padding: .25vw;
text-align: center;
}

.overlay_menu .option_container {
margin: .50vw auto .50vw auto;
width: 23vw;
text-align: center;
}

.overlay_menu .option_container .just_one {
width: auto;
margin: 0 auto 0 auto;
display: inline-block;
}

/* Dungeon Overlay Menu Layout */

.overlay_menu#party_manage {
width:     40vw;
max-height: none;
height: auto;
overflow: auto;
}

.overlay_menu#party_manage .creature_card {
width:              30%;
float:              left;
transition:         border-color 1s ease;
margin:             .25vw .15vw 0 .15vw;
border-radius:      .50vw;
padding:            .50vw 0 .50vw 0;
overflow:           hidden;
background-color:   #2a3e4d;
background:         rgba(42,62,77,0.90);
border:             black solid .15vw;
}

.overlay_menu#party_manage .creature_card h6 {
text-align:    center;
padding:       0;
margin:        0;
font-size:          1vw;
}

.overlay_menu#party_manage .creature_card table {
font-size:          1vw;
margin: 0 auto 0 auto;
width: 100%;
text-align: center;
}

.overlay_menu#party_manage .creature_card .card_spr {
width: 80%;
height: auto;
max-width: 200px;
display:       block;
transition:    all .5s linear;
transform: scaleX(-1);
background-repeat: no-repeat;
background-position: center;
background-color: #1b2435;
border: black solid .15vw;
margin:            .50vw auto .50vw auto;
}

.overlay_menu#party_manage .creature_card .card_spr:hover {
opacity: .75;
background-color: #351b20;
}

.overlay_menu#party_manage .creature_card table img {
float: right;
width: 1vw;
}

.overlay_menu#party_manage .option_container input {
font-size:          1vw;
}

.overlay_menu#party_manage #party_select {
width: 90%;
margin: .20vw;
padding: 1vw 0 1vw 0;
overflow: auto;
}

.overlay_menu#party_manage #party_select span {
width: 20%;
margin: 0 0 0 0;
padding: 0;
float: left;
text-align: center;
clear: none;
line-height: 1.25vw;
}

.overlay_menu#party_manage #party_select select {
width: 70%;
margin: 0;
padding: 0;
float: left;
clear: none;
}

.overlay_menu#supply_viewer {
width: 25vw;
}

.overlay_menu#supply_viewer table, 
.overlay_menu#supply_viewer .reward_container,
.overlay_menu#supply_viewer .half_reward_container {
margin: 1vw auto 1vw auto;
font-size:  1.15vw;
padding: .25vw .25vw 1vw .25vw;
width: 90%;
background-color:   #2a3e4d;
background:         rgba(42,62,77,0.90);
border: black solid .15vw;
border-radius: .25vw;
text-align: center;
box-sizing: border-box;
}

.overlay_menu#supply_viewer .reward_container h4,
.overlay_menu#supply_viewer .half_reward_container h4 {
margin:  0;
padding:  .5vw 0 .5vw 0;
}

.overlay_menu#supply_viewer .reward_container span,
.overlay_menu#supply_viewer .half_reward_container span {
font-size:  1.15vw;
}

.overlay_menu#supply_viewer .reward_container .sm_icon,
.overlay_menu#supply_viewer .half_reward_container .sm_icon,
.overlay_menu#supply_viewer table img {
width:  2vw;
}


.overlay_menu#supply_viewer .half_reward_container {
    width:  45%;
    float:  left;
    margin:  0 0 0 2.5%;
}

.overlay_menu#party_member_modifier {
width:     45vw;
}

.overlay_menu#party_member_modifier h3 {
text-align: center;
font-size:          1vw;
width: 90%;
margin: 0 auto 0 auto;
}

/* Party Overlay Layout */

/* It's necessary #replace_output and #creation_information are separate 
   since they both may be present on the same page */

.overlay_menu#party_creation_box {
width: 60vw;
}

.overlay_menu#party_member_modifier #replace_output,
.overlay_menu#party_creation_box #creation_information {
margin:              .15vw auto .15vw auto;
display:             block;
width:               90%;
overflow:            auto;
padding:             .15vw;
background-color: #161f2d;
border: black solid .15vw;
}

.overlay_menu#party_creation_box #creation_information {
height: auto;
max-height: none;
}

.overlay_menu#party_member_modifier #replace_output #spr_img_container,
.overlay_menu#party_creation_box #creation_information #spr_img_container {
float: left;
width: 30%;
}

.overlay_menu#party_member_modifier #replace_output img 
.overlay_menu#party_creation_box #creation_information img {
width: 2vw;
}

.overlay_menu#party_member_modifier #replace_output h5
.overlay_menu#party_creation_box #creation_information h5 {
font-size:          1vw;
}

.overlay_menu#party_creation_box #creation_information .formation_info {
margin-top: .50vw;
}

.overlay_menu#party_creation_box #creation_information .formation_info img {
width: 3vw;
max-width: 100px;
}

.overlay_menu#party_member_modifier #replace_output p,
.overlay_menu#party_creation_box #creation_information p {
background-color: transparent;
border: none;
font-size:          1vw;
}

.overlay_menu#party_member_modifier #replace_output #creature_info_img,
.overlay_menu#party_creation_box #creation_information #creature_info_img {
width: 100%;
max-width: 200px;
margin: 0 auto 0 auto;
}

.overlay_menu#party_member_modifier #replace_output table,
.overlay_menu#party_creation_box #creation_information table {
white-space:       nowrap;
width:             100%;
}

.overlay_menu#party_member_modifier table.limited,
.overlay_menu#party_creation_box #creation_information table.limited {
max-width: 70%;
width: 70%;
padding: 0;
margin: 0;
float: left;
}

.overlay_menu#party_member_modifier table img,
.overlay_menu#party_creation_box #creation_information table img {
width: 1.5vw;
}

.overlay_menu#party_member_modifier table td,
.overlay_menu#party_creation_box #creation_information table td {
background-color:  #3a4666;
text-align: center;
border: black solid .15vw;
}

.overlay_menu#party_member_modifier table th,
.overlay_menu#party_creation_box #creation_information table th {
background-color: #2e364d;
border: black solid .15vw;
}

.overlay_menu#party_member_modifier input,
.overlay_menu#party_creation_box input {
clear:              both;
display:            block;
margin:             .50vw auto .50vw auto;
font-size:          1vw;
width:              auto;
background-size:    2vw 2vw;
}

.overlay_menu#party_member_modifier #replace_output #gene_info,
.overlay_menu#party_creation_box #creation_information #gene_info {
word-break:       break-all;
white-space:      normal;
}

.overlay_menu#party_creation_box table {
width: 100%;
margin-top: .30vw;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90); 
border: black solid .15vw;
padding: .15vw;
}

.overlay_menu#party_creation_box table#top_table {
margin-top: .75vw;
}

.overlay_menu#party_creation_box table th,
.overlay_menu#party_creation_box table td,
.overlay_menu#party_creation_box table select,
.overlay_menu#party_creation_box table input {
    margin: 0;
    padding:0;
    text-align: center;
}

.overlay_menu#party_creation_box table th {
background-color:      #1b2837;
background: rgba(27,40,55,0.90);
border: black solid .10vw;
}

.overlay_menu#party_creation_box table select,
.overlay_menu#party_creation_box table input[type='text'] {
width: 90%;
display: block;
margin: 0 auto 0 auto;
}

.overlay_menu#party_creation_box table input[type='text'] {
text-align: left;
}

.overlay_menu#party_log_display_box textarea {
width:              95%;
margin: 1vw auto .15vw auto;
height: 10vw;
display: block;
}

.overlay_menu#party_formation_menu #selected_formation_image {
width: 5vw;
margin: .50vw auto 0 auto;
display: block;
}

.overlay_menu#party_adventure_menu #adventure_info_display h6,
.overlay_menu#party_adventure_menu div .bounty_information h6 {
text-align: center;
font-size:          1vw;
padding: .15vw;
width: 90%;
margin: 1vw auto 1vw auto;
background-color:   #1f273c;
border: black solid .15vw;
}

.overlay_menu#party_adventure_menu #adventure_info_display img {
width: 1.5vw;
}

.overlay_menu#party_adventure_menu #adventure_info_display table {
margin:              0 auto 0 auto;
width: 100%;
background-color:      #2a3e4d;
border:             black solid .15vw;
padding:           .15vw;
}

.overlay_menu#party_adventure_menu #adventure_info_display .reward {
float:               left;
width:               30%;
background-color:      #2a3e4d;
border:             black solid .15vw;
border-radius:       .25vw
padding:             .15vw .15vw .15vw .15vw;
text-overflow:     ellipsis;
margin: 2% 0 0 2%;
}


.overlay_menu#party_adventure_menu #adventure_info_display  .reward span {
float: left;
width: 30%;
margin-left: 5%;
}

.overlay_menu#party_adventure_menu #adventure_info_display .reward img {
float: left;
width: 50%;
max-width: 100px;
}

.overlay_menu#party_adventure_menu .sm_key_item {
width: 3vw;
}

.overlay_menu#party_adventure_menu #adventure_info_display  .bounty_information p {
overflow: auto;
}

.overlay_menu#party_adventure_menu #adventure_info_display  .bounty_information p img {
width: 3vw;
max-width: 100px;
}

.overlay_menu#party_adventure_menu #adventure_info_display .bounty_information .bounty_img {
float:               left;
width:               5vw;
margin:             .25vw .25vw .25vw .15vw;
border:              black solid .15vw;
background-color:    #1f273c;
border-radius:       .25vw;
}

.overlay_menu#quick_party_generation_box table {
border: black solid .15vw;
background-color:      #2a3e4d;
width: 95%;
margin: 0 auto 0 auto;
}


.overlay_menu#quick_party_generation_box table th {
background-color:   #1f273c;
border: black solid .15vw;
}

.overlay_menu#quick_party_generation_box #gen_adventure_party {
display: block; 
margin: .15vw auto .15vw auto;
}

/* Camp Creature Overlay Layout */

.overlay_menu#skip_page_menu .option_container #page_skip {
margin-bottom: 1vw;
}

.overlay_menu#skip_page_menu p {
text-align: center;
}


.overlay_menu#confirmation .option_container {
width: 12vw;
margin: 0 auto 0 auto;
padding: .25vw;
}

.overlay_menu#confirmation .option_container input {
font-size:          1vw;
width: 4vw;
min-width: auto;
padding: .5vw;
margin-left: 1vw;
border-width: .15vw;
}

.overlay_menu#feeding_menu #exp_food_information {
width: 98%;
margin: .50vw auto .50vw auto;
background-color:      #2a3e4d;
border: black solid .15vw;
padding: .50vw;
box-sizing: border-box;
}

.overlay_menu#feeding_menu #exp_food_information img {
width: 4vw;
max-width: 100px;
margin: .50vw;
float: left;
}

.overlay_menu#feeding_menu .option_container#primary {
width: 100%;
}

/* Camp Equip Overlay Layout */

.overlay_menu#bloodstain_menu #bloodstained {
background-image: url("/images/bloodstains/1.png");
background-repeat: no-repeat;
width: 5vw;
margin: 0 auto 0 auto;
display: block;
background-color:      #2a3e4d;
border: black solid .15vw;
padding: .25vw;
}

.overlay_menu#bloodstain_menu h5 {
text-align: left;
margin-left: 2vw;
}

.overlay_menu#bloodstain_menu ul {
margin: 0;
padding-left: 1vw;
width: 90%;
margin-left: 2vw;
}


.overlay_menu#after_battle {
display: inline;
width: 20vw;
padding: .25vw;
top: 19vh;
}

.overlay_menu#after_battle h4 {
text-align:         center;
padding:            .25vw;
margin:             0 0 0 0;
font-size:          1vw;
}

.overlay_menu#after_battle a {
text-decoration:    none;
}


.overlay_menu#after_battle h2 {
text-align:         center;
padding:            0 0 0 0;
margin:             0 0 0 0;
border-radius:      .25vw;
background-color:   #1f273c;
border:             black solid .15vw;
}

.overlay_menu#after_battle img.reward {
width: 3vw;
}

.overlay_menu#after_battle #exit_link #exit_button {
background:         none;
border:             none;
margin:             0;
padding:            0;
transition:         background-color 1s ease;
background-color: #2a3e4d;
border: black solid .15vw;
color: white;
padding: 1vw;
}

.overlay_menu#after_battle #exit_link #exit_button:hover {
transition:         background-color 1s ease;
background-color: #1b2435;
}

.overlay_menu#after_battle table {
margin:             0 auto 0 auto;
}

.overlay_menu#formation_menu #formation_image {
margin: 0 auto 0 auto;
width: 5vw;
display: block;
background-color:      #2a3e4d;
border: black solid .15vw;
padding: .25vw;
border-radius: 0;
}

.overlay_menu#formation_menu input{
clear:             both;
}

.overlay_menu#taskbar_legend {
height: auto;
max-height: none;
overflow: visible;
}

.overlay_menu#taskbar_legend table {
background-color:      #2a3e4d;
border: black solid .15vw;
margin: 0 auto 0 auto;
width: 90%;
}

.overlay_menu#taskbar_legend table img {
max-width: 2vw;
margin-right: .15vw;
float: left;
}

/* Auto Battle Layout */

#ab_container {
width:            830px;
margin:           0px auto 0px auto;
height:           50px;
border-bottom: none;
color:            black;
transition: all 1s ease;
background-color: #0e2236;
background:       rgba(14,34,54,0.80);
border:           black solid 2px;
}

#ab_container.active_ab {
background: linear-gradient(to bottom right, #e0e46f, #b2652d);
opacity: 1;
}

#ab_container.inactive_ab {
background: linear-gradient(to bottom left, white, grey);
opacity: .50;
}

#ab_container #auto_battle_bar {
width:           100%;
height:          100%;
position: relative;
}

#ab_container.active_ab #auto_battle_bar {
background-image: url('/images/icons/buttons/ab_active.png');
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}

#ab_container.inactive_ab #auto_battle_bar {
background-image: url('/images/icons/buttons/ab_inactive.png');
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}


#auto_battle_bar #ab_countdown {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
font-size: 40px;
margin: 0;
padding: 0;
text-shadow: 2px 2px #000000;
color: white;
z-index: 2;
pointer-events: none;
}

/* Battle Layout */

#background_map_display {
position: absolute;
width: 500px;
height: 500px;
background-color: black;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
left: 50%;
top: 75px;
transform: translateX(-50%);
z-index: 1;  
border: black solid 2px;
opacity: .75;
border-radius: 15px;
}

#battle_changer {
    z-index: 5;
    position: relative;
}



.battle_row_container {
width:           750px;
height:          140px;
margin:          5px auto 0 auto;
color:           white;
clear:           both;
position: relative;
}

.battle_row_container .battle_table_r,
.battle_row_container .battle_table_l {
float:          left;
position: absolute;
z-index: 15;
}

#battle_menu_1 {
display: block;
}

.battle_row_container .battle_table_r {
margin:         5px 48px 25px 285px;
opacity: 1;
}

.battle_row_container .battle_table_l {
margin:         5px 20px 25px 48px;
opacity: 1;
}

.battle_row_container .battle_table_r table,
.battle_row_container .battle_table_l table {
float:          left;
}

.battle_row_container .battle_table_r input,
.battle_row_container .battle_table_l input 
{
width:          82px;
height:         25px;
font-size:      11px;
}

.battle_row_container .battle_table_r select,
.battle_row_container .battle_table_l select 
{
width:          170px;
font-size:      11px;
}

.battle_row_container .left_slider, 
.battle_row_container .action_slider {
height: 100px;
float: left;
transition:    opacity .5s ease-in;
}

.battle_row_container .action_slider:hover, 
.battle_row_container .left_slider:hover {
opacity: .50;
}

.battle_row_container .creature_battle_display_r,
.battle_row_container .creature_battle_display_l {
position:       absolute;
width: 275px;
}

.creature_battle_display_r {
    left: 0;
}

.creature_battle_display_l {
    right: 0;
}

.battle_row_container .creature_holder_r h4,
.battle_row_container .creature_holder_l h4 {
width:           100px;
margin:          0;
padding:         0;
display:         block;
color:           white;
text-align:      center;
font-size:       12px;
background-repeat: no-repeat;
background-position:center;
border: black     solid 1px;
border-radius:    5px;
}

.battle_row_container .r_b_type,
.battle_row_container .l_b_type {
width: 20px;
height: 20px;
position: absolute;
}

.battle_row_container .r_b_type {
left: -30px;
}

.battle_row_container .l_b_type {
right: -30px;
}

.battle_row_container .r_f_type,
.battle_row_container .l_f_type {
    transform:rotate(270deg);
    top: 60px;
    position: absolute;
    width: 100px;
}

.battle_row_container .r_f_type {
left: -70px;
}

.battle_row_container .l_f_type {
right: -70px;
}

.battle_row_container .swapper {
position: absolute;
left: -101px;
top: 60px;
width: 100px;
background-size: 20px 20px;
padding-left: 20px;
transform:rotate(90deg);
text-align: center;
background-image: url(/images/icons/buttons/top-menu/parties.png);
background-repeat: no-repeat;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

.battle_row_container .creature_holder_r h4, 
.battle_row_container .creature_holder_l h4 {
position: absolute;
}

.battle_row_container .creature_holder_r h4 {
background-color: #1b2435;
background:      rgba(7,16,40,0.7);
left: 5px;
}

.battle_row_container .creature_holder_l h4 {
background-color: #391111;
background:      rgba(57,17,17,0.7);
right: 5px;
}

.battle_row_container .creature_holder_r h4 a:hover,
.battle_row_container .creature_holder_l h4 a:hover {
opacity:         .50;
}

.battle_row_container p {
margin:         0px; 
font-size:      14px;
clear:          both;
}

.battle_row_container .creature_holder_r {
float:          left;
}

.battle_row_container .creature_holder_l {
float:          right;
}

.battle_row_container .battle_status_l,
.battle_row_container  .battle_status_r {
width:  80px;
height: 90px;
top: 20px;
position: absolute;
}

.battle_row_container .battle_status_l img,
.battle_row_container .battle_status_r img {
width: 20px;
height: 20px;
}

.battle_row_container .battle_status_l {
right: 125px;
}

.battle_row_container  .battle_status_r {
left: 125px;
}

.battle_row_container  .battle_formation_l,
.battle_row_container  .battle_formation_r {
    position: absolute;
    top: 40px;
}


.battle_row_container  .battle_formation_r {
left: 220px;
}

.battle_row_container  .battle_formation_l {
right: 220px;
}

.battle_row_container .creature_image {
font-size:      14px;
width:          100px; 
height:         100px;
border-radius:  10px;
top:            15px;
position: absolute;
background-size: cover;
}

.battle_row_container .creature_holder_r .creature_image {
    left: 0;
}

.battle_row_container .creature_holder_l .creature_image {
   right: 0;
}

.battle_row_container .creature_image:hover {
transition:    background-color 1s ease-in;
}

.battle_row_container .creature_holder_r .creature_image:hover {
background-color:  #111c39;
}

.battle_row_container .creature_holder_l .creature_image:hover {
background-color: #391111;
}

.creature_holder_r .creature_image,
.creature_holder_r .creature_image .top_creature_messages, 
.creature_holder_r .creature_image .bottom_creature_messages, 
.creature_holder_r .battle_ability_display,
.creature_holder_r .ep_damage_display, 
.creature_holder_r .hp_damage_display,
.creature_holder_r .shrinking_debuff,
.creature_holder_r .growing_buff,
.creature_holder_r .shrinking_sickness,
.creature_holder_r .growing_sickness,
.creature_holder_r .item_gain,
.creature_holder_r .egg_gain,
.creature_holder_r .message_display,
.spr_switch {
transform: scaleX(-1);
}


.battle_row_container .energy_display_r,
.battle_row_container .energy_display_l {
border-radius:    5px;
padding:          2px;
    position: absolute;
    width: auto;
top: 115px;
}

.battle_row_container .energy_display_r {
left: 0;
}

.battle_row_container .energy_display_l {
right: 0;
}

.battle_row_container .energy_display_r p,
.battle_row_container .energy_display_l p {
padding:          0 5px 0 5px;
border:           black solid 2px;
white-space:      nowrap;
border-radius:    5px;
}


.battle_row_container .energy_display_r p {
background-color: #1b2435;
background:      rgba(7,16,40,0.7);
text-align:      left;
}

.battle_row_container .energy_display_l p {
background-color: #391111;
background:      rgba(57,17,17,0.7);
text-align:      right;
}

.battle_row_container .bottom_creature_messages img,
.battle_row_container .bottom_creature_messages img {
width:             20px;
height:            20px;
z-index:           20;
}

.battle_row_container .bottom_creature_messages .affliction_r {
float:          left;
}

.battle_row_container .bottom_creature_messages .affliction_l {
float:          right;
}

.battle_row_container .bottom_creature_messages .affliction_r img, 
.battle_row_container .bottom_creature_messages .affliction_l img {
margin-bottom: -6px;
}

.battle_options {
position:           absolute;
margin-top:         -54px;
height:             110px;
width:              190px;
display:            none;
padding-top:        3px;
background-repeat: no-repeat;
padding-left:       5px;
border:            black solid 2px;
background-color:   #1b2435;
background: rgba(27,40,55,0.90);
overflow:          auto;
}

.battle_options a {
color:             white;
border:            none;
width:             75px;
display:           block;
float:             left;
margin:            2px 2px 2px 2px;
text-decoration:   none;
font-size:         11px;
text-align:        center;
position:          relative;
z-index:           1;
border:            #3a4666 solid 2px;
background-color:   #3a4666;
color:             white;
text-overflow:     ellipsis;
white-space:       nowrap;
overflow:          hidden;
}

.battle_options a:hover {
border:            #3a4666 solid 2px;
background-color:  #212837;
z-index:           101;
}

.battle_options a:visited {
color:             white;
}

.battle_options h4 {
margin:         0;
padding:        0;
font-size:      12px;
}

.battle_options h4 b {
color:          lime;
}

#battle_execute {
margin:          6px 0 10px 15px;
display:         block;
clear:           both;
height:          30px;
position:        relative;
}

#battle_execute input,
#battle_execute img {
position: absolute;
}

#battle_execute #reposition_button {
left: 50px;
}

#battle_execute #repeat {
left: 290px;
}

#battle_execute #execute {
left: 335px;
}

#battle_execute #run {
right: 50px;
}

#cho_targ {
width:           150px;
text-align:      center;
padding:         3px 3px 3px 3px;
background:      #2b1f35;
border:          black solid 1px;
position:        fixed;
z-index:         20;
margin:          40px 0 0 140px;
background:      rgba(171,36,36,0.8);
border-radius:    15px;
text-decoration: blink;
display:         none;
}

#hotkey_img {
position:        absolute;
margin:          40px 0 0 570px;
width: 50px;
}

.battle_info_bar {
height:           22px;
width:            742px;
font-size:        14px;
margin:           5px auto 5px auto;
clear:            both;
color:            white;
float:            left;
clear:            both;
padding:          0 5px 0 5px;
background:       #2b1f35;
background:       rgba(20,3,32,.9);
border-radius:    15px;
box-shadow:       4px 4px 10px black;
background-repeat: no-repeat;
}

.battle_info_bar  table {
width:           100%;
margin:          0 0 0 0;
font-size:       10px;
}

.battle_info_bar  table tr td {
min-width:       17px;
}

.battle_info_bar  img {
width:           17px;
height:          17px;
}

.battle_info_bar  table td .status_bar {
margin:          0px 0 0 0;
width:           150px;
height:          18px;
overflow:        hidden;
}

#action_text_div {
position: absolute;
z-index: 200;
width: 800px;
top: 0;
background-color: #184065;
border: black solid 2px;
padding: 20px;
}

#action_text_div #action_script_textarea {
width: 600px;
height: 400px;
margin-left: 100px;
}

#battle_message {
margin:          0px auto 14px auto;
overflow:        auto;
padding:         0px 0 0 20px;
border:          none;
border-radius:   15px;
background-repeat: no-repeat;
word-wrap:   break-word;
margin-left: 7px;
z-index: 40;
resize: vertical;
background-color:   #1b2435;
background: rgba(27,40,55,0.90);
border: black solid 2px;
}

#battle_message #battle_settings {
overflow: auto;
width: auto;
background-color:  transparent;
}

#battle_message #battle_settings h6 {
font-size: 14px;
float: left;
line-height: 30px;
padding: 0 5px 0 5px;
margin: 5px 5px 5px 5px;
border: black solid 2px;
background-color:   #3a4666;
}

#battle_message #battle_settings h6:hover {
border:            #3a4666 solid 2px;
background-color:  #212837;
}

#battle_message #battle_settings h6 b {
text-decoration: underline;
color: #fff08a;
}

#battle_message #battle_settings img {
float: left;
width: 30px;
margin: 5px;
border-radius: 5px;
}

#battle_message.message_overlay #battle_settings h6,
#battle_message.message_overlay #battle_settings img {
    display: none;
}

#battle_message.message_overlay #battle_settings #modify_button {
    display: block;
}

#battle_message #battle_settings #modify_button {
float: right;
}

#battle_message.no_guest {
height:          200px;
width:           792px;
float: none;
}

#battle_message.guest_present {
height:         130px;
width:          450px; 
position: absolute; 
right: 0;
bottom: -15px;
}

#battle_message.message_overlay {
height:          600px;
width:           806px;
margin:        0;
top:           0;
border-radius: 0;
position: absolute;
transition: height 1s ease;
left: 50%;
transform: translateX(-50%);
}

.formation_block {
background-color: #3c1b62;
}

#target_information_window #guest_formation_slot {
background-color: #3c1b62;
}

#admin_battle_menu {
    margin: 10px auto 10px auto;
    border: black solid 2px;
    padding: 5px 15px 5px 15px;
background-color:   #1b2435;
background: rgba(27,40,55,0.90);
    border-radius: 15px;
}

.text_bubble_l, .text_bubble_r {
width:              97px;
height:             51px;
padding:            2px 2px 2px 2px;
margin:             0 0 0 0;
color:              black;
visibility:         visible;
pointer-events:   none;
z-index: 10;
position: absolute;
}

.text_bubble_l {
background: url(../images/bubbles/3.png) no-repeat;
padding: 15px 0 0 5px;
top: 60px;
left: 60px;
}

.text_bubble_r {
background:   url(../images/bubbles/4.png) no-repeat;
padding: 15px 0 0 5px;
top: 60px;
right: 60px;
}

.fade_turn_avatar, .turn_avatar {
width:             26px; 
height:            26px; 
margin:            0 0 0 5px; 
border:            #132b54 solid 2px;
background:        #1b2435;
color:             #b8c6e0;
border-radius:     5px;
}

.fade_turn_avatar {
opacity:            .30;
}

#turn_info_container {
width:              598px;
margin:             0 25px 0 25px;
float:              left;
}

#turn_info_container h4 {
margin:             3px 148px 0 148px;
width:              300px;
border-radius:      15px;
background-color:   #1f273c;
border:             black solid 2px;
font-size:          12px;
float:              left;
display:            block;
}

#turn_info_container img {
background-color:   #1b2435;
border:            #3a4666 solid 2px;
}

#turn_info_container h2 {
margin:             14px 0 0 148px;
width:              300px;
font-size:          15px;
display:            block;
float:              left;
background:         grey;
border:             2px solid black;
}

#turn_info_container input {
width:              34px;
margin:             0 3px 0 3px;
color:              white;
background:         black url(../images/gradients/10.png);
border:             none;
}

#battle_header_container {
width:              750px;
height:             72px;
color:              white;
margin:             0px auto 0 auto;
padding:            5px 0 0 0;
text-align:         center;
}

#battle_header_container .avatar_box {
width:              50px;
margin:             0px 0 0 0;
float:              left;
position:           relative;
}

#battle_header_container .avatar_box .avatar {
width:              50px;
height:             50px;
border:             none;
display:            block;
background-color:   #1b2435;
border:            #3a4666 solid 2px;
border-radius:     5px;
}

#battle_header_container .avatar_box .avatar:hover {
border:            #3a4666 solid 2px;
background-color:   #3a4666;
}

#battle_header_container .avatar_box .complete_formation_l,
#battle_header_container .avatar_box .complete_formation_r {
position:           absolute;
margin-top:         10px;
overflow:           hidden;
}

#battle_header_container .avatar_box .complete_formation_r {
left: 100px;
}

#battle_header_container .avatar_box .complete_formation_l {
right: 100px;
}

#battle_header_container .avatar_box p {
margin:             0 0 0 0;
padding:            0 0 0 0;
width:              40px;
height:             18px;
font-size:          12px;
}

.vanish_element {
visibility: hidden;
}

/* Battle Animations */
.creature_holder_r .shrinking_sickness,
.creature_holder_r .growing_sickness,
.creature_holder_r .item_gain,
.creature_holder_r .egg_gain,
.creature_holder_r .message_display,
.creature_holder_r .battle_ability_display,
.creature_holder_r .ep_damage_display, 
.creature_holder_r .hp_damage_display,
.creature_holder_l .shrinking_sickness,
.creature_holder_l .growing_sickness,
.creature_holder_l .message_display,
.creature_holder_l .battle_ability_display,
.creature_holder_l .ep_damage_display, 
.creature_holder_l .hp_damage_display {
font-size: 20px;
padding: 3px;
border-radius: 5px;
}

.battle_ability_display {
background-color: #724499;
background:      rgba(114,68,153,0.7);
border: black solid 2px;
position: absolute;
padding: 5px;
border-radius: 15px;
animation-name: mov_ability_display;
animation-duration: 4s;
opacity: 0;
}

.message_display {
color:           #514666;
background:      rgba(81,70,102,0.7);
position: absolute;
animation-name: damage_display;
animation-duration: 4s;
opacity: 0;
color: white;
}

.hp_damage_display {
color:           #609944;
background:      rgba(96,153,68,0.7);
position: absolute;
animation-name: damage_display;
animation-duration: 4s;
opacity: 0;
color: white;
}

.ep_damage_display {
color:           #999444;
background:      rgba(153,148,68,0.7);
position: absolute;
animation-name: damage_display;
animation-duration: 4s;
opacity: 0;
color: white;
}

.growing_buff, .growing_sickness, .growing_revive, .item_gain, .egg_gain {
position: absolute;
animation-name: grow_icon;
animation-duration: 2.5s;
opacity: 0;
padding: 6px;
border-radius: 35px;
background-color: #58a9ba;
}

.growing_sickness {
background-color: #ba5858;
}

.item_gain {
background-color: #bab258;
}

.egg_gain {
background-color: #3b8d3b;
}

.shrinking_debuff, .shrinking_sickness {
position: absolute;
animation-name: shrink_icon;
animation-duration: 2.5s;
opacity: 0;
padding: 6px;
border-radius: 35px;
background-color: #ba5858;
}

.shrinking_sickness {
background-color: #58a9ba;
}

.dodge_effect {
opacity: 0;
animation-name: fadeout;
animation-duration: 1s;
position: absolute;
}

.block_effect {
opacity: 0;
animation-name: fadeout;
animation-duration: 1s;
position: absolute;
}

.miss_effect {
opacity: 0;
animation-name: miss_fadeout;
animation-duration: 1s;
position: absolute;
}

.critical_effect {
opacity: 0;
animation-name: moving_strike;
animation-duration: 1s;
position: absolute;
width: 50px;
}

.element_effect {
opacity: 0;
animation-name: moving_element;
animation-duration: 1s;
position: absolute;
width: 50px;
}

.bad_effect {
opacity: 0;
animation-name: fadeout;
animation-duration: 3s;
animation-timing-function: ease-out;
position: absolute;
width: 100px;
height: 100px;
}

.first_appear, .going_out {
width: 100px;
height: 100px;
position: absolute;
opacity: 0;
}

.first_appear {
animation-name: fading_in_awhile;
animation-duration: 6s;
animation-timing-function: ease-out;
}

.going_out  {
animation-name: fading_out;
animation-duration: 3s;
animation-timing-function: ease-out;
}

@keyframes fading_in_awhile {
0%   {opacity: 0;}
5%   {opacity: 1;}
100% {opacity: 0;}
}

@keyframes fading_out {
0% {opacity: 1;}
50% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes grow_icon {
from {width: 0px; height: 0px; opacity: 1;}
to {width: 100px; height: 100px; opacity: 0;}
}

@keyframes shrink_icon {
from {width: 100px; height: 100px; opacity: 1;}
to {width: 0px; height: 0px; opacity: 0;}
}

@keyframes mov_ability_display {
from {margin-left: 25px; opacity: 1;}
to {margin-left: 0px; opacity: 0;}
}

@keyframes damage_display {
0% {margin-left: 0; margin-top: 0; opacity: 1;}
100% {margin-left: 25px; margin-top: 25px; opacity: 0;}
}

@keyframes moving_strike {
0%   {opacity: 0; width: 25px; height: 10px;}
100% {opacity: 1; width: 100px; height: 41px;}
}

@keyframes moving_element {
0%   {opacity: 0; width: 25px; height: 25px;}
100% {opacity: 1; width: 100px; height: 100px;}
}


@keyframes hp_flash {
0%     {color: #ff9b9b;}
50%    {color: #38ff29;}
100%   {color: white;}
}

@keyframes ep_flash {
0%    {color: #ff9b9b;}
50%   {color: #ffed29;}
100%  {color: white;}
}

@keyframes fadeout {
0%   {opacity: 1;}
100% {opacity: 0;}
}

@keyframes reappear_fadein {
0%   {opacity: 0;}
100% {opacity: 1;}
}

@keyframes miss_fadeout {
0%   {opacity: 1; margin-top: 0; }
100% {opacity: 0; margin-top: 50px;}
}

@keyframes drop_and_fade {
0%   {margin-bottom: 0px;}
50%  {opacity: 1;}
100% {margin-bottom: -30px; opacity: 0;}
}

@keyframes step_right {
0%   {margin-left: 0px;}
100% {margin-left: 100px;}
}

@keyframes step_left {
0%   {margin-left: 0px;}
100% {margin-left: -100px;}
}

@keyframes back_right {
0%   {margin-left: -100px; transform: scaleX(-1);
}

100% {margin-left: 0px; 
transform: none; 
}
}

@keyframes back_left {
0%   {margin-left: 100px; transform: none; 
}
100% {margin-left: 0px; transform: scaleX(-1); 
}
}

@keyframes dummy {
}

/* PVP Interface Layout */

.game_timer {
width:            724px;
min-height:       20px;
margin:           0 auto 0 auto;
padding:          0 0 0 0;
text-align:       center;
color:            white;
border:           1px solid black;
border-radius:    15px;
background:       rgba(0,0,0,0.5);
}

.game_timer input {
background:      none;
border:          none;
color:           lime;
width:           50px;
}

#battle_rules {
margin:           0 auto 4px auto;
width:            700px;
padding:          0 10px 0 10px;
color:            white;
border-radius:    15px;
background:       rgba(0,0,0,0.5);
border: black solid 2px;
}

#battle_rules th{
padding:          0px 3px 0px 3px;
}

#battle_rules td {
color:            lime;
}

#battle_inaction {
width:             172px;
padding-top:       2px;
color:             white;
background:        #1b2435;
border:            none;
text-align:        center;
background-repeat: no-repeat;
position:          absolute;
border-radius:     10px;
margin:            35px 0 0 290px;
border:            black solid 2px;
z-index: 25;
border-radius: 15px;
}

/* Battle Select Layout */

.battle_ads {
width:           468px;
height:          74px;
margin:          5px auto 0 auto;
border:          2px solid black;
}

.battle_result {
width:           600px;
min-height:      20px;
margin:          10px auto 0 auto;
border:          2px solid black;
color:           white;
font-size:       14px;
text-align:      center;
background:      #000033;
}

.advert {
width:           100px;
height:          20px;
color:           white;
margin:          0 auto 0 auto;
}

.battle_select_container {
clear:                 both;
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
padding: 2% 0 2% 0;
}

.battle_select_container table {
white-space:           nowrap;
margin:                0 auto 0 auto;
font-size: 14px;
}

.battle_select_container table th {
background-color:   #1f273c;
border:             black solid 2px;
padding: 2px;
}

.battle_select_container table td {
border:            #3a4666 solid 2px;
background-color:   #1b2435;
text-align:            center;
}

.battle_select_container h4 {
background-color:   #1f273c;
border:             black solid 2px;
margin: 5%;
padding: 2%;
border-radius: 4px;
}

#wait_box {
width: 600px;
margin: 15px auto 15px auto;
}

#wait_box img {
float:           left;
}

#wait_box #waiting {
margin:          10px 40px 0  40px;
border:          2px solid black;
}

#view_battle_table {
margin:          5px auto 5px auto;
clear:           both;
} 

#view_battle_table select {
width:           136px;
}

#view_battle_table input {
width:           136px;
}

#game_creation {
width:           450px;
min-height:      110px;
margin:          15px auto 15px auto;
padding:         10px 5px 12px 5px;
color:           white;
text-align:      center;
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

#game_creation table th {
font-style:            italic;
border-radius:         10px;
background-color:   #1f273c;
border:             black solid 2px;
}

#game_creation table td img {
float:               left;
}

#create_notice {
width:           100%;
background:      none; 
border:          none; 
color:           white; 
text-align:      center; 
margin-top:      3px;
background-color:   #1f273c;
border:             black solid 2px;
border-radius:   20px;
font-style:      italic;
margin:          0 auto 0 auto;
text-align: center;
}

#game_creation table {
width:           340px;
margin:          6px auto 0 auto;
}

#game_creation select {
width:           160px;
}

#game_creation table tr th input {
color:           white;
background:      black;
text-align:      center;
}

/* Login Notice Layout */

#important_notice {
color:            white;
padding:          10px;
margin:           10px 15px 10px 15px;
border-radius:    10px;
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
position: relative;
}

#important_notice #close_button {
width: 50px;
height: 50px;
background-size: 50px 50px;
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
font-size: 24px;
position: absolute;
right: 5px;
top: 0;
}

#important_notice h1 {
font-size:        20px;
padding: 0;
margin:           15px 0 20px 0;
text-align:       center;
}

#important_notice h3 {
font-size:        20px;
padding: 0;
margin:           5px 0 10px 0;
text-align:       center;
}

#important_notice h4 {
font-size:        18px;
text-align: left;
}

#important_notice h5.admin_notice {
font-size:        16px;
margin: -4px 0 5px 0;
padding:0;
text-align: center;
color: red;
background-color: black;
padding: 2px;
}

#important_notice #update_notice p {
padding: 10px;
margin: 5px;
background-color:   #141e2a;
border: black solid 2px;
border-radius: 15px;
}

#important_notice #update_notice h2 {
color: red;
font-size: 17px;
}

#important_notice #update_notice b {
color: lime;
}

#important_notice .promotion-info {
display: none;
}

#important_notice .promotion-info p {
padding: 15px;
margin: 15px 0 15px 0;
background-color:  #1f273c;
border:             black solid 2px;
clear: both;
overflow: auto;
}

#important_notice .promotion-info ul {
padding: 0px;
margin: 0;
}

#important_notice .promotion-info ul li {
min-height: 100px;
position: relative;
padding-left: 110px;
padding-bottom: 25px;
}

#important_notice .promotion-info ul li .preorder_reward {
margin: 15px 25px 5px 5px;
color: pink;
float: left;
font-size: 21px;
}

#important_notice .promotion-info ul li .left_icon {
width: 100px;
position: absolute;
left: 0px;
top: 5px;
}

#important_notice .promotion-info ul li img {
width: 20px;
}

#important_notice .promotion-info ul li i {
position: absolute;
right: 5px;
bottom: 5px;
}

#important_notice .promotion-info ul li p {
background-color:   #141e2a;
}

#important_notice .promotion-info ul li i.mult {
color: lime;
}

#important_notice .promotion-info ul li i.one {
color: yellow;
}

#important_notice .promotion-info ul li ul {
padding-left: 40px;
}

#important_notice .promotion-info ul li ul li {
padding-top: 10px;
padding-left: 0px;
min-height: auto;
padding-bottom: 0;
}

#important_notice .nacho_image {
    border: black solid 2px;
    width: 776px;
    margin: 20px auto 0 auto;
    box-sizing: border-box;
}

#important_notice .nacho_info {
    border: black solid 2px;
    text-align: center;
    padding: 5px 5px 5px 5px;
    margin: -5px auto 0px auto;
    width: 776px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    box-sizing: border-box;
    background-color:   #1f273c;
    position: relative;
    height: 30px;
}

#important_notice .nacho_info h4 {
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    left: 25px;
}

#important_notice .nacho_info h6 {
text-align: right;
font-size: 13px;
padding: 0;
margin: 2px 0 0 0;
position: absolute;
font-weight: normal;
right: 25px;
}

#important_notice .monthly_event {
float:            left;
}

#important_notice ul {
list-style:       none;
margin: 0 5px 0 50px;
padding: 0;
}

#important_notice ul li {
margin:           10px 0 10px 0;
border-radius:    15px;
padding:          7px;
background-color:   #1f273c;
border:             black solid 2px;
}

#important_notice ul ul ul {
margin:           0;
border-radius:    15px;
list-style-image: url(../images/icons/completed.png);
background-color: #112250;
}

#important_notice ul li ul li{
border:           none;
background-color: transparent;
}

/* Front Page Layout */

#outer_box {
width:            100%;
margin:           75px auto 0 auto;
padding:          0;
overflow:         auto;
min-height:       100%;
}

#outer_box #js_warning_header {
color:            white;
text-align:       center;
margin:           0 auto 0 auto;
display:          block;
clear:            both;
border:           black solid 5px;
background:       rgba(25,25,25,.9);
width:            99.9vw;
clear:            both;
font-size:        17px;
}

#outer_box #footer,
#outer_box #main_menu {
height:           75px;
overflow:         hidden;
width:            99.9vw;
border-bottom:    none;
margin:           0 auto 0 auto;
display:          block;
text-align:       center;
background-color: #0e2236;
background:       rgba(14,34,54,.90);
border:           black solid 5px;
position:         relative;
color:            white;
font-size:        17px;
box-sizing:       border-box;
z-index:           10;
background-image: url('/images/main/scratchboard-thin.png');
background-repeat: repeat;
position:         fixed;
}

#outer_box #main_menu {
  top: 0;
  left: 0;
  padding: 2px;
  text-align: center;
  background-size:  auto 100%;
}

#outer_box #footer {
  position: static;
  padding: 5px;
  text-align: center;
transform: scaleY(-1);
  width: 1000px;
  border-radius: 1vw;
}

#outer_box #footer p {
margin: 0;
font-size: 17px;
padding: 5px 3px 5px 3px;
transform: scaleY(-1);
}

#outer_box #footer p.copyright {
font-size: 15px;
}


#outer_box #main_menu #left_menu, 
#outer_box #main_menu #right_menu {
position: absolute;
}

#outer_box #main_menu #left_menu {
left: 5px;
width: 75px;
}

#outer_box #main_menu #left_menu  #main_logo {
position: absolute;
left: 0;
width: 115px;
top: 5px;
}

#outer_box #main_menu #left_menu ul {
left: 120px;
}

#outer_box #main_menu #right_menu {
right: 1vw;
width: 375px;
}

#outer_box #main_menu #right_menu ul {
right: 0vw;
}

#outer_box #main_menu ul {
padding:         0;
margin:          0;
text-align:      center;
list-style:      none;
display:         block;
position: absolute;
}

#outer_box #main_menu ul li {
padding:         0;
margin:          15px 10px 0 0;
float:            left;
}

#outer_box #main_menu ul li a {
padding:              10px 20px 10px 50px;
margin:                0;
transition:            all 1s ease;
background-color:      #3a4666;
border:                black solid 3px;
font-size:             24px;
text-shadow:
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000,
    3px 3px 0 #000; 
text-decoration:       none;
background-repeat:     no-repeat;
background-position:   left; 
color:                 white;
background-size:       50px;
}

#outer_box #main_menu  ul li a#layout_link {
padding-left: 50px;
}

#outer_box #main_menu ul li a:hover {
border-color:      #3a4666;
background-color:  #212837;
opacity: .5;
}

#outer_box #content_box {
margin:           15px auto 15px auto;
padding:          20px 0 20px 0;
background-color: #0e2236;
background:      rgba(14,34,54,.90);
border:          black solid 3px;
color:           white;
width:           1125px;
border-radius: 25px;
z-index: 0;
position: relative;
background-image: url('/images/main/scratchboard-thin.png');
}

#outer_box #content_box * {
    z-index: 1;
    position: relative;
}

#outer_box #content_box::before,
#outer_box #content_box::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 140px;  
  background-repeat: repeat-x;
  z-index: 0;
  background-size: 100% 100%;
 opacity: 1;
}

#outer_box #content_box::before {
background-image: url('/images/main/slime-border-t.png');
border-top-right-radius: 25px;
border-top-left-radius: 25px;
  top: 0;
}

#outer_box #content_box::after {
background-image: url('/images/main/slime-border-b.png');
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
  bottom: 0;
}

#outer_box #content_box #front_page_container {
  margin: 0 auto 100px auto;
  position: relative;
}

#outer_box #content_box #front_page_container #front_img {
margin:           0 auto 0 auto;
display:          block;
width:            90%;
border: black solid 3px;
border-radius: 25px;
box-shadow:       5px 5px 0 black;
}

#outer_box #content_box #front_page_container #join_button {
width:            150px;
left:             50%;
transform:        translateX(-50%);
top:              480px;
position:         absolute;
transition:       opacity 0.3s ease;
z-index: 5;
}

#outer_box #content_box #join_button a {
color:            white;
display:          block;
text-align:       center;
text-decoration:  none;
padding:          15px 10px 15px 10px;
font-size:        30px;
line-height:      25px;
border:           black solid 3px;
background-color:  #2b3f4f;
transition:        all 1s ease;
text-shadow:
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000,
    3px 3px 0 #000; 
border-radius:    25px;
animation: join-glowing-border 2s infinite;
}

@keyframes join-glowing-border {
  0% {
    box-shadow: 0 0 10px 5px  #bce6f7;
  }
  50% {
    box-shadow: 0 0 10px 5px #cef7bc;
  }
  100% {
    box-shadow: 0 0 10px 5px #d9bcf7;
  }
}

#outer_box #join_button a:hover {
color:            white;
opacity:          .50;
background-color:  #2b3f4f;
}

#outer_box #join_button a:visited {
color:            white;
}

#outer_box .slime_me  {
position: relative;
    z-index: 1;
}

#outer_box .slime_me * {
    z-index: 2;
    position: relative;
}

.slime_me::before,
.slime_me::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;  
  background-repeat: repeat-y;
  z-index: 0;
  background-size: 100%;
 opacity: 1;
}

.slime_me::before {
background-image: url('/images/main/slime-border-l.png');
    left: 0;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.slime_me::after {
background-image: url('/images/main/slime-border-r.png');
    right: 0;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

#outer_box #content_box #feature_box,
#outer_box #content_box #social_media_box,
#outer_box #content_box #front_affiliate_box {
width:            85%;
margin:           15px auto 15px auto;
padding:          15px 2.5% 0 2.5%;
float:            none;
clear:            both;
overflow:         auto;
background-color: #334565;
border:           black solid 3px;
font-size:        15px;
border-radius: 25px;
}

#outer_box #content_box #feature_box h3,
#outer_box #content_box #social_media_box h3,
#outer_box #content_box #front_affiliate_box h3 {
font-size: 25px;
margin: 0 auto 0 auto;
text-align: center;
}

#outer_box #content_box #feature_box .feature {
width: 210px;
border: black solid 3px;
float: left;
box-shadow:       5px 5px 0 black;
margin: 20px 0 20px 20px;
box-sizing: border-box;
background-color:  #2b3f4f;
background: rgba(43,63,79,.75);
border-radius: 25px;
}

#outer_box #content_box #feature_box .feature h5 {
font-size: 18px;
margin: 5px 0 5px 0;
padding: 0;
text-align: center;
}

#outer_box #content_box #feature_box .feature img {
border:           black solid 3px;
box-shadow:       5px 5px 0 black;
border-radius:   5px;
margin:          2px 5px 2px 5px;
background-color: #1f273c;
width:            90%;
}

#outer_box #content_box #feature_box .feature p {
height: 115px;
margin:      0;
text-shadow:
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000,
    3px 3px 0 #000; 
padding:    10px;
border:             black solid 3px;
border-left: none;
border-right: none;
border-bottom: none;
background-color:   #1f273c;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
font-size: 20px;
}

#outer_box #content_box #feature_box h4 {
padding:           0;
margin:            0 auto 0 auto;
clear:             both;
background-color:  #2b3f4f;
width: 200px;
text-align: center;
border: black solid 3px;
text-shadow:
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000,
    3px 3px 0 #000; 
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-bottom: none;
box-shadow:       5px 5px 0 black;
transition:         all 1s ease;
}

#outer_box #content_box #feature_box h4:hover {
opacity:  .5;
}

#outer_box #content_box #feature_box h4 a {
font-size: 25px;
text-decoration: none;
padding: 5px 0 5px 0;
margin: 0 0 0 0;
display: block;
width: 100%;
height: 100%;
color: #96f7b8;
transition:         all 1s ease;
}

#outer_box #content_box #feature_box h4 a:hover {
color: #e496f7;
}


#outer_box #content_box #feature_box h4 a {
font-size: 25px;
text-decoration: none;
}

#outer_box #content_box #social_media_box img,
#outer_box #content_box #front_affiliate_box img {
padding:          5px;
border:           black solid 3px;
background-color:   #1f273c;
width:            150px;
margin:           15px 15px 15px 3px;
transition:         all 1s ease;
box-shadow:       5px 5px 0 black;
position:          relative;
z-index:           1;
}

#outer_box #content_box #social_media_box img:hover,
#outer_box #content_box #front_affiliate_box img:hover {
background-repeat: no-repeat;
background-size: cover;
background-color: #303d62;
border-color: #645a72;
opacity: .50;
}

#register {
top:               50px;
left:              50%;
transform:         translateX(-50%);
width:             1100px;
position:          absolute;
margin:            0;
padding:           0;
background-color:  black;
background:        rgba(0,0,0,0.8);
z-index:           20;
border-radius:     25px;
display: none;
background-position: left top;
background-size: 350px;
background-repeat: no-repeat;
border: black solid 3px;
box-shadow:     0vw 3px 5px #1c8340;
}

#register #result_output {
  color: white;
  font-size: 20px;
  text-align: center;
  border: black solid 3px;
  animation: red-glowing-border 2s infinite;
  background: rgba(33,44,70,.75);
  padding: 5px;
  border-radius: 25px;
  width: 90%;
  margin: 2.5% 10px 2.5% auto;
  display: none;
  min-height: 10px;
}

@keyframes red-glowing-border {
  0% {
    box-shadow: 0 0 10px 5px  yellow;
  }
  50% {
    box-shadow: 0 0 10px 5px orange;
  }
  100% {
    box-shadow: 0 0 10px 5px red;
  }
}

#register #needed_reg_info {
position:    absolute;
color:       white;
width:       350px;
top:         350px;
left:        25px;
padding:     10px 5px 10px 5px;
background-color: black;
background: rgba(0, 0, 0, .9);
box-shadow:        0vw 3px 10px #1c2183;
border-radius: 25px;
border: black solid 3px;
font-size: 17px;
}

#register #needed_reg_info ul {
margin:            5px;
}

#register #reg_input_panel {
width:             650px;
padding:           10px 3px 10px 3px;
margin:            1vw auto 1vw 425px;
color:             white;
display:           block;
box-shadow:        0vw 2px 3px #1c2183;
background-color: black;
background: rgba(0, 0, 0, .9);
border-radius: 25px;
border: black solid 3px;
}

#register #reg_input_panel table {
border-spacing: 10px;
margin: 0 auto 0 auto;
}

#register #reg_input_panel b,
#register #needed_reg_info b {
    margin: 5px;
    font-size: 25px;
    line-height: 20px;
    color: red;
}

#register #reg_input_panel .results  {
text-align:        center;
}

#register #reg_input_panel table th {
text-align:        center;
font-size: 17px;
}

#register #reg_input_panel table td {
text-align:        left;
font-size: 17px;
}


#register #reg_input_panel .please_agree {
    margin-left: 10px;
}

#register #reg_input_panel input,
#register #reg_input_panel select {
font-size: 17px;
}

#register #reg_input_panel .center input,
#register #reg_input_panel .center select {
margin: 0 auto 0 auto;
display: block;
}

#register #reg_input_panel .results span {
    font-size: 17px;
}

#register #reg_input_panel p {
font-size: 17px;
    margin: 3px;
    padding:0;
}

#register #reg_input_panel .pn_box[type='button'] {
padding: 0 5px 0 5px;
}

#register #reg_input_panel p input[type='checkbox'] {
    width: 20px;
    height: 20px;      
}

#register #reg_input_panel ol {
text-align:        left;
padding:           0 0 0 3px;
font-size:         17px;
width: 90%;
}

#register #reg_input_panel ol li {
    margin: 5px 0 5px 40px;
    padding: 0;
}

#register #reg_input_panel ol li .pn_box, #register #reg_input_panel #register_button_2 {
font-size:      17px;
transition:      all 1s ease;
margin-right:    10px;
padding: 0 5px 0 5px;
}

#register #reg_input_panel #register_button_2 {
margin:  10px;
}

#register #reg_input_panel #recapcha {
  margin: 5px 0 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Used on several pages listed below */

#outer_box #content_box #h_c {
    text-align: center;
    position: relative;
}

#outer_box #content_box #h_c h1 {
background-color:  rgba(28, 33, 131, 0.5);
border:             none;
font-size:          25px;
padding:            0 5px .15 5px;
box-shadow:        0 0 50px #1c2183;
display: inline-block;
margin: 0 auto 10px auto;
    text-shadow:
    -7px -7px 0 #000,
    7px-7px 0 #000,
    -7px 7px 0 #000,
    7px 7px 0 #000; 
border-radius: 25px;
white-space: nowrap;
  background-position: center;
}


/* Login Page */

#outer_box #content_box #log_in_container {
margin:            0 auto 0 auto;
width:             1000px;
border-radius:     25px;
padding:          25px;
color:             white;
background-color: #334565;
border:           black solid 3px;
overflow:         hidden;
font-size: 15px;
box-sizing:       border-box;
}

#outer_box #content_box #log_in_container #log_info {
width:              450px;
height:            400px;
padding:            25px;
margin-left:        5px;
float:              left;
color:              white;
background-color:   #2a3e4d;
background:         rgba(43,63,79,.75);
border:             black solid 3px;
box-sizing:         border-box;
position:          relative;
overflow: hidden;
}

#outer_box #content_box #log_in_container #log_info p {
position:          absolute;
bottom: -15px;
right: 10px;
width: 175px;
height: 25px;
line-height: 30px;
padding: 0 0 5px 0;
background-color: #0e2236;
text-align: center;
border: black solid 3px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-bottom: none;
box-shadow:       0vw -5px 15px #1c8340;
transition:         all 1s ease;
}

#outer_box #content_box #log_in_container #log_info p:hover {
box-shadow:       0vw -5px 15px #831c7d;
}

#outer_box #content_box #log_in_container #log_info p a {
font-size: 20px;
text-decoration: none;
padding: 0;
margin: 0;
display: block;
width: 100%;
height: 100%;
color: #96f7b8;
transition: all 1s ease;
}

#outer_box #content_box #log_in_container #log_info p a:hover {
color: #e496f7;
}

#outer_box #content_box #log_in_container #log_info ul {
list-style:         none;
margin:             0 auto 0 auto;
padding:            25px;
font-size:          20px;
background-color:   #1f273c;
border:             black solid 3px;
}

#outer_box #content_box #log_in_container #log_info ul li {
padding:           5px 0 5px 0;
margin:            5px 0 5px 0;
}

#outer_box #content_box #log_in_container #log_info ul li input[type='checkbox'] {
    width: 25px;
    height: 25px;  
}

#outer_box #content_box #log_in_container #log_info ul li input {
font-size: 20px;
}

#outer_box #content_box #log_in_container #log_info ul li #login {
    font-size: 25px;
    padding: 3px 10px 3px 10px;
}

#outer_box #content_box #log_in_container #login_news {
width:              475px;
height:            400px;
overflow:          auto;
float:             left;
padding:          25px;
margin:            0 0 0 5px;
color:             white;
background-color:  #2a3e4d;
background:         rgba(43,63,79,.75);
border:            black solid 3px;
box-sizing:        border-box;
}

#outer_box #content_box #log_in_container #login_news h3 {
text-align:        center;
padding:           5px 0 5px 0;
margin:            0 0 0 0;
}

#outer_box #content_box #log_in_container #login_news .article {
background-color: #0e2236;
width:            95%;
padding:          5%;
border:           black solid 3px;
margin:           0 auto 5px auto;
box-sizing:        border-box;
}


#outer_box #content_box #log_in_container #login_news .article h4 {
text-align:       center;
background-color: #0a1126;
border:           black solid 3px;
margin:           0 5px 0 5px;
padding:          5px 0 5px 0;
}

#outer_box #content_box #log_in_container #login_news .article ul,
#outer_box #content_box #log_in_container #login_news .article ol {
    margin:             0 0 0 5px;
    padding:            0 0 0 0;
    background-color:   #1f273c;
    border:             black solid 3px;
}

#outer_box #content_box #log_in_container #login_news .article ul li, 
#outer_box #content_box #log_in_container #login_news .article ol li {
    margin:             0 0 0 5px;
    padding:            0 0 0 0;
}

#outer_box #content_box #log_in_container #login_news .article  p {
padding:          10px;
font-size: 16px;
background-color: #202e4a;
border:           black solid 3px;
box-sizing:        border-box;
}

#outer_box #content_box #log_in_container #login_news .article h5 {
text-align: right;
padding-right: 5px;
font-size: 13px;
margin: 0;
padding: 0;
}

/* 404 Page */

#outer_box #content_box #broken {
width:             30vw;
margin:            1vw auto 1vw auto;
box-shadow:        .50vw .50vw black;
border:             black solid .15vw;
display:           block;
border-radius:     .25vw;
}

/* Contact Page */

#outer_box #content_box #contact_box {
text-align:       center;
width:            46vw;
margin:           0vw auto .5vw auto;
padding:          1vw;
background-color: #334565;
border:           black solid .10vw;
border-radius: 1vw;
}

#outer_box #content_box #contact_box p {
width:                     95%;
font-weight:               normal;
text-align:                center;
padding:                   .75vw;
margin:                    .75vw auto .75vw auto;
background-color:          #1f273c;
background:                rgba(31,39,60,.80);
border:                    black solid .10vw;
font-size:                 1vw;
border-radius:            .5vw;
}

/* Features Page */

#outer_box #content_box #features {
color:            white;
margin:           0 auto 0 auto;
padding:          0 5px 0 5px;
margin:           10px 20px 20px 20px;
padding-top:      20px;
background-color: #334565;
border:           black solid 3px;
border-radius:   25px;
font-size:       16px;
box-sizing: border-box;
}

#outer_box #content_box #features img {
width: 90%;
border-radius:   15px;
opacity: .9
}

#outer_box #content_box #features p {
font-weight:                normal;
text-align:                 left;
padding:                    15px;
margin:                    20px 10px 20px 10px;
background-color:          #1f273c;
background:                rgba(31,39,60,.9);
border:                    black solid 3px;
border-radius:             15px;
}

#outer_box #content_box #features ul {
padding:                    .25 .25 1 .25vw;
margin:                    .5vw .25vw .5vw .25vw;
}

#outer_box #content_box #features ul li {
margin:                    .35vw .25vw .35vw .25vw;
}

#outer_box #content_box #features p.small_note {
font-size:       .9vw;
padding:                    .5vw;
}

#outer_box #content_box #features .panel {
margin:           0 auto 0 auto;
display:          block;
border:           black solid .10vw;
background-color: #282536;
}

#outer_box #content_box #features h3 { 
margin:                0;
border-radius:         .15vw;
text-align:            center;
color:                 white;
border:                .10vw solid black;
margin:              .20vw 1vw .20vw 1vw;
background-color:      #282536;
font-size: 1.05vw;
}

#outer_box #content_box #features #join_img {
float: left;
width: 30%;
margin: 1% 1% 0 1%;
}

#outer_box #content_box #features #final {
    float: left;
width: 65%;
margin-left: 2%;
}

/* Affiliates Page */

#outer_box #content_box #affiliates {
text-align:       center;
width:            46vw;
margin:           0vw auto .5vw auto;
padding:          1vw;
background-color: #334565;
border:           black solid .10vw;
border-radius: 1vw;
overflow: auto;
}

#outer_box #content_box #affiliates div {
width:                     22vw;
background-color:          #1f273c;
border:                    black solid .10vw;
margin:                    .5vw;
float:                     left;
padding-bottom:           .25vw;
box-sizing: border-box;
}

#outer_box #content_box #affiliates h4 {
font-size: 1.05vw;
}

#outer_box #content_box #affiliates div img {
    width: 20vw;
    height: 2.75vw;
    border: black solid .15vw;
}

#outer_box #content_box #affiliates p {
   color: white;
   font-size: 1vw;
   height: 4.5vw;
   overflow: auto;
   text-align: left;
   margin: .5vw .5vw .5vw .5vw;
   padding: .5vw .5vw .5vw .5vw;
   border:           black solid .15vw;
   background-color:  #2b3f4f;
}

/* Password Reset Page / Email Validation */

#outer_box #content_box #outside_data_box {
width:            850px;
padding:          10px;
margin:           0 auto 5px auto;
display:          block;
background-color: #334565;
border:           black solid 3px;
border-radius:    15px;
font-size:        16px;
box-sizing: border-box;
}

#outer_box #content_box #outside_data_box p {
margin:           15px auto 15px auto;
padding:          10px;
border-radius:    15px;
background-color: #202e4a;
background:       rgba(32,46,74,.9);
border:           black solid 3px;
text-align:       center;
width:            90%;
}

#outer_box #content_box #outside_data_box ul {
margin:           0vw auto 0vw auto;
padding:          10px 0vw 10px 10px;
border-radius:    15px;
border:           black solid 3px;
background-color:  #1f273c;
background:       rgba(31,39,60,.9);
list-style: none;
width:           95%;
}

#outer_box #content_box #outside_data_box li {
margin:  10px 0 10px 0;
padding:  0 0 0 0;
text-align: center;
}

#outer_box #content_box #outside_data_box #email_to_reset {
font-size:         16px;
margin: 15px auto 15px auto;
display: block;
}

#outer_box #content_box #outside_data_box #recapcha {
  display: flex;
  justify-content: center;
  align-items: center;
}

#outer_box #content_box #outside_data_box input[type='button'],
#outer_box #content_box #outside_data_box input[type='submit'] {
font-size:         16px;
margin:            10px auto 4px auto;
padding:           4px 13px 4px 13px;
display:           block;
}

#outer_box #content_box #outside_data_box  input#toggle {
    display: inline-block;
}

#outer_box #content_box #outside_data_box .result {
    width: 60%;
    margin: 1vw auto 0 auto;
    border: black solid 3px;
    padding: 15px;
    text-align: left;
}

#outer_box #content_box #outside_data_box textarea {
    width: 90%;
    height: 150px;
    background-color: black;
    color: white;
    margin: 0 auto 0 auto;
}

#outer_box #content_box #outside_data_box .result b {
    color: lime;
}

#outer_box #content_box #outside_data_box input[type='text'],
#outer_box #content_box #outside_data_box input[type='password'] {
width: 40%;
padding: 5px 10px 5px 10px;
line-height: 16px;
font-size: 16px;
}

#outer_box #content_box #outside_data_box #recaptcha-v2-container {
margin:  0 auto 0 auto;
width:  50%;
}

#outer_box #content_box #outside_data_box #recaptcha-v2-container #button_wrapper {
margin-top:  10px;
font-size: 20px;
}

/* Successful Registration Page */

#intro_header {
padding: 15px 0 15px 0;
margin: 0;
}

#intro_box {
width:             700px;
margin:            0 auto 0 auto;
}

#intro_box #persona_table {
margin: 0 auto 0 auto;
}

#intro_box #welcome_image {
border-radius:    15px;
background-color: black;
width:            600px;
margin:           15px auto 0 auto;
display: block;
}

#intro_box div span {
display:          none;
}

#intro_box p {
margin:           20px 60px 20px 60px;
padding:        15px;
border-radius:  10px;
background-color:      #1b2837;
border: black solid 2px;
}

/* Bottom Map Dev Info Layout */

#margin_box .developer_info {
width:            830px;
border-radius:    15px;
margin:             10px auto 0 auto;
padding:            15px 0 15px 0;
background-color: #454545;
background:       rgba(69,69,69,0.80);
border:       black solid 2px;
}

#margin_box .developer_info p {
color: white;
}

#margin_box .developer_info table {
color: white;
border-radius: 5px;
width: 70%;
margin: 0 auto 0 auto;
padding: 5px;
}

#margin_box .developer_info table td {
color: lime;
}

.server_data b {
color:            lime;
}

/* Inside Alert */

#alert {
color:            white;
width:            824px;
margin:           0px auto 0px 23px;
padding:          5px;
box-shadow:        0vw .30vw .5vw black;
background:       black;
border-radius:    15px;
position:         absolute;
background:       rgba(0,0,0,0.9);
z-index:          20;
}

#alert img {
float:            right;
margin:           10px 10px 0 0;
padding:          5px;
width:            50px;
}

#alert .unlock_reward {
float:            none;
}

/* Outside Alert */

#outer_box #alert {
color:            white;
width:            95vw;
margin:           0;
top: 3.25vw;
left:             50%;
transform: translateX(-50%);
padding:          .75vw;
box-shadow:        0vw .30vw .5vw black;
border-radius:    .30vw;
z-index:          101;
font-size: 1vw;
}

#outer_box #alert img {
margin:           .15vw .15vw 0 0;
padding:          .15vw;
width:            2vw;
}

/* Payment Preview Page */

#premium_reward {
color:             white;
text-align:        center;
padding:           2px 8px 2px 8px;
overflow:          auto;
width:         340px;
height:        340px;
margin:        10px 5px 0 5px;
float: left;
background-color:      #273b4a;
border: black solid 2px;
box-sizing: border-box;
}

#premium_reward h3 {
margin: 5px 0 0 0;
padding: 2px;
font-size: 13px;
background-color:   #1f273c;
border:             black solid 2px;
}

#premium_reward .left_icon {
width: 30px;
float: left;
margin-right: 5px;
}

#premium_reward #next_period {
display: none;
}

#premium_reward ul {
list-style: none;
padding: 0 0 0 0;
text-align: left;
}

#premium_reward ul li {
margin: 15px 0 15px 0;
font-size: 14px;
min-height: 30px;
border-radius: 10px;
background-color:   #1f273c;
border:             black solid 2px;
position: relative;
padding-bottom: 30px;
}

#premium_reward ul li i {
right: 5px;
bottom: 5px;
position: absolute;
}

#premium_reward .earn_message {
color: yellow;
left: 5px;
right: auto;
}

#premium_reward ul li i.mult {
color: lime;
}

#premium_reward ul li i.one {
color: yellow;
}

#premium_reward ul li h4 {
margin: 0;
padding: 0;
color: yellow;
}

#credit_purchase_block {
margin:        10px 5px 0 5px;
width:         470px;
padding-bottom: 10px;
float:          left;
min-height:        280px;
background-color:      #273b4a;
border: black solid 2px;
box-sizing: border-box;
}

#credit_purchase_block #buy_menu {
margin: 10px 0 0 10px;
min-height: 70px;
float: left;
padding:         10px;
width:            420px;
border:             black solid 2px;
background-color:   #1f273c;
}

#credit_purchase_block #payment_button {
display: block;
margin: 15px auto 15px auto;
}

#credit_purchase_block #order_option {
color:           white;
font-weight:     normal;
background-color:   #1f273c;
border:             black solid 2px;
float: left;
box-sizing: border-box;
float: left;
margin: 10px 0 0 10px;
min-height: 70px;
padding:         10px;
width:           443px;
box-sizing: border-box;
}

#credit_purchase_block .option {
float: left;
margin: 10px 35px 0 0;
}

#credit_purchase_block p {
margin: 10px;
}

#credit_purchase_block #payment_processor_links {
margin: 10px auto 0 70px;
display: block;
height: 50px;
}

#credit_purchase_block #payment_processor_links h5 {
margin: 0px 0 0 50px;
line-height: 50px;
float: left;
}

#credit_purchase_block #payment_processor_links a img {
border-radius: 15px;
border: #9ba5ef solid 4px;
height: 30px;
transition:            all 2s ease;
float: left;
margin-left: 5px;
margin-top: 7px;
}

#credit_purchase_block #payment_processor_links a img:hover {
border: red solid 4px;
transition:            all 2s ease;
opacity: .80;
}

#payment_limit {
margin: 0; 
padding: 0;
text-align: center;
}

#current_processor img {
border-radius: 15px;
border: #9ba5ef solid 4px;
height: 40px;
margin: 0 auto 0 auto;
display: block;
}

#payment_reward_message {
width:         820px;
margin:        15px auto 15px auto;
padding:       10px 10px 10px 10px;
border:        2px solid black;
background:    #4a2727;
box-sizing: border-box;
}

#payment_reward_message p {
padding: 10px;
margin: 10px;
background-color: #1f273c;
border: black solid 2px;
}

#payment_reward_message p a {
font-size: 20px;
}

#payment_reward_message p b {
color: yellow;
font-size: 20px;
}

#payment_reward_message h3 {
text-align: center;
margin: 0;
padding: 0;
font-size: 18px;
}

#payment_policies_notice {
text-align: center;
margin:     5px auto 5px auto;
clear: both;
}

#reward_preview_button {
margin-left:  235px;
padding: 5px;
padding-left:  25px;
background-size:  30px;
}

#reward_display_box {
margin:        10px 5px 0 5px;
background-color:      #273b4a;
border: black solid 2px;
box-sizing: border-box;
top:  0;
left: 50%;
transform: translateX(-50%);
position:  absolute;
max-height: 90vh;     /* cap at screen height */
overflow-y: auto;      /* add scroll when content exceeds height */
padding: 10px;
}

#reward_display_box .close {
width:  50px;
height: auto;
}

#reward_display_box h4 {
text-align:      center; 
color:           white;
font-weight:     normal;
padding:         5px;
width: 90%;
border-radius:   10px;
margin:          10px auto 10px auto;
background-color:   #1f273c;
border:             black solid 2px;
margin: 25px;
}

#reward_display_box ul {
list-style:    none;
margin: 0 auto 0 auto; 
padding: 0;
}

#reward_display_box ul li {
margin: 10px; 
padding: 5px;
}
 
#reward_display_box ul li .premium_preview_sprite {
width: 30px; 
height: 30px; 
margin: 2px;
}

#reward_display_box p {
padding: 10px;
margin: 10px;
background-color:   #1f273c;
border: black solid 2px;
border-radius: 15px;
}

/* Currently Unused

#credit_purchase_block #address_info {
border-radius: 10px;
border: black solid 2px;padding: 15px;
background: #1f273c;
}

#reward_display_box #eva_box {
background-repeat: no-repeat;
background-position: right bottom; 
min-height: 370px;
padding-bottom: 25px;
}

*/

/* Revised General NPCs Shops */

#re_shop_container {
position: relative;
}

#re_shop_container #re_npc_image {
margin:            0 25px 0 25px;
height:            90%;
max-height:        400px;
background-size:   cover;
background-repeat: no-repeat;
border:            black solid 2px;
position:          absolute;
box-sizing:        border-box;
  top:             50%;
  transform:       translateY(-50%); /* Center vertically */
  z-index:         0;
}


#re_shop_container .re_npc_speech {
margin:               10px 0 10px 270px;
width:                550px;
color:                white;
border-bottom-right-radius: 15px;
min-height:           100px;
color:                white;
border-top-left-radius: 15px;
background-color:    #273b4a;
background:          rgba(42,62,77,0.90);
border:              black solid 2px;
position:            relative;
box-sizing:          border-box;
overflow:            hidden;
}

#re_shop_container .re_npc_speech .avatar {
left: 0;
position: absolute;
bottom: 0;
}

#re_shop_container .re_npc_speech a {
border:               none;
padding:              5px 0 0 0;
margin:               0 0 0 0;
background:           none;
text-decoration:      none;
line-height:          25px;
}

#re_shop_container .re_npc_speech img {
border:               none;
}

#re_shop_container .re_npc_speech p {
padding:              5px;
margin-top:           5px;
position:             relative;
left:                 115px;
max-width:            420px;
}

#re_shop_container .re_npc_speech h3 {
font-size:            14px;
display:              inline;
padding:              0 3px 0 3px;
}

#re_shop_container .re_npc_speech h4 {
font-size:            18px;
text-align:           center;
padding:              2px 0 2px 0;
margin:               0;
border-bottom-right-radius: 50px;
border-top-left-radius: 25px;
background-color:   #1b2837;
border-bottom:        2px solid black;
border-right:         2px solid black;
}

#re_shop_container .re_npc_speech h4 i a, 
#re_shop_container .re_npc_speech h3 i a  {
color: #d4eefc;
transition:            all 1s ease;
border:            black solid 4px;
border-right: none;
padding: 0 10px 0 17px;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
background-color:  #1b2435;
position: absolute;
margin: -2px -2px 0 0px;
display: inline;
height: 32px;
line-height: 30px;
background-size: 20%;
border-bottom-left-radius: 20px;
border-top: none;
border-bottom: none;
}

#re_shop_container .re_npc_speech h4 i a {
right: 0;
top: 0;
border-color: #3a4666;
background: url(/images/icons/eating.png) left no-repeat;
background-size: 20%;
}

#re_shop_container .re_npc_speech h3 i a {
right: 0;
bottom: 0;
border-color: #1b2837;
background: url(/images/icons/return.png) left no-repeat;
background-size: 30%;
}

#re_shop_container .re_npc_speech h3 i a {
height: auto;

background-size: 30%;
border-top-left-radius: 20px;
border-top: 0px;
border-bottom: 0;
}

#re_shop_container .re_npc_speech h4 i a:hover, 
#re_shop_container .re_npc_speech h3 i a:hover {
color: #58a5ce;
transition:            all 1s ease;
border-color: #58a5ce;
}

#re_shop_container .re_npc_speech #admin_buttons {
	margin-left: 100px;
}

#re_shop_container #shop_restock_notice {
background-color: #501414;
margin: 0 0 10px 360px;
padding: 5px;
text-align: center;
width: 350px;
border-radius: 15px;
border: black solid 2px;
position: relative;
z-index: 1;
}

#re_shop_container .re_shop_stock {
width:               565px;
min-height:          200px;
height:              auto;
padding:             0px 0px 0px 0px;
margin:              0 0 20px 250px;
color:               white;
background-color:     #2a3e4d;
background:          rgba(42,62,77,0.90);
border:              black solid 2px;
overflow:            auto;
position:            relative;
z-index:             1;
border-radius:       15px;
}

#re_shop_container .re_shop_stock p.empty,
#re_shop_container .re_product_display p.empty  {
color: red;
text-align: center;
padding: 5px;
text-decoration: underline;
clear: both;
border-radius:       5px;
background-color:   #1f273c;
border:             black solid 2px;
margin: 5px 15px 5px 15px; 
}

#re_shop_container .re_shop_stock .limited_stock_display {
max-height: 500px; 
overflow: auto;
}


#re_shop_container .re_shop_stock h3 {  
margin:               5px 50px 5px 50px;
padding:              5px 0 5px 0;
color:                white; 
text-align:           center;
font-size:            16px;
background-color:   #1f273c;
border:             black solid 2px;
border-radius:        15px;
}

#re_shop_container .re_shop_stock h4 {  
margin:               5px 70px 5px 70px;
padding:              5px 0 5px 0;
color:                white; 
text-align:           center;
font-size:            15px;
background-color:   #1f273c;
border:             black solid 2px;
border-radius:        15px;
clear: both;
font-weight: normal;
}


#re_shop_container .re_shop_stock .re_shop_selection  {
float:                left;
width:                83px;
height:               100px;
margin:               4px 3px 4px 5px;
padding:              5px 0 0 0;
transition:         all 1s ease;
height:               auto;
background-color:   #1f273c;
border:             black solid 2px;
box-sizing:          border-box;
}

#re_shop_container .re_shop_stock .re_shop_selection p {
color:           red;
text-align:      center;
padding:         5px;
}

#re_shop_container .re_shop_stock .re_shop_selection:hover {
opacity:            .50;
}

#re_shop_container .re_shop_stock .re_shop_selection a {
text-decoration:     none;
color:               white;
text-align: center;
}

#re_shop_container .re_shop_stock .re_shop_selection img {
width:                75px;
height:               75px;
border-radius:        40px;
margin:               0 auto 0 auto;
display:              block;
padding:              0;
background-color:   #2d333f;
border:             black solid 2px;
box-sizing:          border-box;
}

#re_shop_container .re_shop_stock .re_shop_selection p {
font-size:            12px;
margin:               0 0 0 0;
padding:              2px;
height:               50px;
width:                100%;
overflow:             hidden;
text-overflow:        ellipsis;
color:               white;
box-sizing:          border-box;
}

#re_shop_container .re_product_display {
width:                800px;
min-height:           100px;
top:                   0;
border-radius:        15px;
color:                white;
background-color:     #2a3e4d;
background:           rgba(42,62,77,0.90);
border:               black solid 2px;
position:             absolute;
top:                  10px;
left:                 50%;
transform:            translateX(-50%);
z-index:              10;
display:              none;
}

#re_shop_container .re_product_display h3 {
border-radius:        5px;
text-align:           center;
width:                auto;
background-color:     #1f273c;
border:               black solid 2px;
clear:                both;
font-size:            18px;
margin:               6px 5% 6px 5%;
}

#re_shop_container .re_product_display h4 {
border-radius:        5px;
text-align:           center;
margin:               0;
width:                auto;
background-color:   #1f273c;
border:             black solid 2px;
color               white;
clear:              both;
font-size:          17px;
margin:              6px 10% 6px 10%;
}

#re_shop_container .re_product_display h5 {
border-radius:        5px;
text-align:           center;
width:                auto;
background-color:   #1f273c;
border:             black solid 2px;
clear: both;
font-size: 16px;
margin:               6px 15% 6px 15%;
}

#re_shop_container .re_product_display input[type='checkbox'] {
}

#re_shop_container .re_product_display input[type='button'].image_pn_box,
#re_shop_container .re_product_display input[type='button'].pn_box,
#re_shop_container .re_product_display input[type='submit'].image_pn_box,
#re_shop_container .re_product_display input[type='submit'].pn_box {
min-width: 120px;
height: 30px;
margin: 5px;
}

#re_shop_container .re_product_display .section,
#re_shop_container .re_product_display .wide_section {
width: 48%;
margin-left: 1%;
margin-top: 1%;
float: left;
box-sizing: border-box;
}

#re_shop_container .re_product_display .section#limit_me,
#re_shop_container .re_product_display .wide_section#limit_me {
overflow: auto;
max-height: 300px;
}

#re_shop_container .re_product_display .wide_section {
width: 680px;
max-width: 100%;
margin: 0 auto 10px auto;
float: none;
}

#re_shop_container .re_product_display .wide_section .they_be_mates {
width: 100%;
margin: 10px 0 10px 0;
box-sizing: border-box;
overflow: auto;
}

#re_shop_container .re_product_display .wide_section .they_be_mates h6 {
width: 50%;
box-sizing: border-box;
float: left;
margin: 0 0 0 0;
padding: 0;
font-size: 15px;
text-align: center;
}

#re_shop_container .re_product_display .wide_section .they_be_mates select,
#re_shop_container .re_product_display .wide_section .they_be_mates input {
max-width: 50%;
box-sizing: border-box;
float: left;
margin: 0;
padding: 0;
}

#re_shop_container .re_product_display .section select {
margin: 0 auto 0 auto;
width: 100%;
}

#re_shop_container .re_product_display #re_product_img {
margin:               10px auto 10px auto;
display:              block;
border:               black solid 2px;
background-color:     #2d333f;
border-radius:       25px;
width: 100px;
}

#re_shop_container .re_product_display p {
clear:               both;
margin:              10px 5px 10px 5px;
padding:             5px;
border-radius:       5px;
background-color:   #1f273c;
border:             black solid 2px;
}

#re_shop_container .re_product_display p img,
#re_shop_container .re_product_display table img,
#re_shop_container .re_product_display ol img,
#re_shop_container .re_product_display ul img {
width: 20px;
}

#re_shop_container .re_product_display .icon {
width: 30px;
height: auto;
}

#re_shop_container .re_product_display ul {
clear:               both;
margin:              5px;
padding:             5px;
background-color:   #1f273c;
border:             black solid 2px;
border-radius:       5px;
list-style:          none;
}

#re_shop_container .re_product_display ul li {
margin: 5px 0 5px 0;
}

#re_shop_container .re_product_display table {
width:                100%;
}

#re_shop_container .re_product_display table th {
background-color:   #1f273c;
border:             black solid 2px;
}

#re_shop_container .re_shop_button_box {
clear: both;
}

#re_shop_container .re_shop_button_box a {
text-decoration: none;
float: right;
}

#re_shop_container .re_shop_button_box input {
float: right;
margin: 15px;
}

#re_shop_arrows {
min-height:        40px;
font-weight:       bold;
color:             white;
padding:           0;
margin:            0 0 0 0;
border-radius:     5px;
line-height:       36px;
clear:             both;
}

#re_shop_arrows div:hover {
background-color: #0a132b;
}

#re_shop_arrows a,
#re_shop_arrows p {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

#re_shop_arrows .re_left_button, 
#re_shop_arrows .re_right_button {
width:             60px;
height:            36px;
text-align:        center;
font-size:         15px;
border-radius:     5px;
margin:            2px;
border:            #3a4666 solid 2px;
background-color:  #212837;
position: relative;
}

#re_shop_arrows .re_left_button {
float:             left;
padding-left:      10px;
padding-right:     10px;
margin-left:       10px;
margin-bottom:     10px;
}

#re_shop_arrows .re_right_button {
float:             right;
margin-right:       10px;
margin-bottom:     10px;
}

#re_shop_arrows .re_left_button:hover,
#re_shop_arrows .re_right_button:hover {
border-color:      #212837;
background-color:  #3a4666;
}

#re_shop_container .return_link  {
margin:                20px 130px 10px 130px;
text-align:            center;
text-decoration:       none;
clear:                 both;
background-color:     #1f273c;
border:               black solid 2px;
padding:              5px 5px 5px 5px;
position:             relative;
background-image:     url('/images/icons/return.png');
background-repeat:    no-repeat;
background-size:      25px 25px;
background-position:  right; 
transition:           all 1s ease;
border-radius:        15px;
clear: both;
}

#re_shop_container .return_link a {
width:              100%;
height:             100%;
display:            block; 
text-decoration:    none;
color:              white;
font-size:          14px;
}

/* Custom Creature Shop */

#re_shop_container .re_product_display#custom_shop_buyer_list,
#re_shop_container .re_product_display#custom_shop_settings_display,
#re_shop_container .re_product_display#custom_sale_menu_display  {
    z-index: 12;
}

#re_shop_container .re_product_display#custom_pricing_menu_display {
    z-index: 11;
}

#re_shop_container .re_product_display#custom_shop_primary_display {
    z-index: 10;
}

#re_shop_container .re_product_display#custom_shop_buyer_list ul {
    max-height: 550px;
    overflow: auto;
}

#re_shop_container .re_shop_stock #custom_sale_conditionals .re_shop_selection {
width: 105px;
height: auto;
}

#re_shop_container .re_shop_stock #custom_sale_conditionals .re_shop_selection p {
    font-size: 16px;
    height: 30px;
}

#re_shop_container .re_shop_stock #custom_sale_conditionals .re_shop_selection p a {
 height: 100%;
 width: 100%;
 display: block;
}

#re_shop_container .re_shop_stock #custom_shop_buyer_protection {
    width: 60%;
    margin: 0 auto 0 auto;
}

#re_shop_container .re_shop_stock #custom_shop_buyer_protection p {
margin:              -35px 5px 10px 5px;
padding:             5px;
border-radius:       5px;
background-color:   #1f273c;
border:             black solid 2px;
font-size:          12px;
}

#re_shop_container  .re_product_display#custom_shop_text_settings_display .wide_section#text_settings textarea {
    width: 96%;
    max-width: 96%;
    margin: 0 auto 0 auto;
    min-height: 100px;
}

#re_shop_container  .re_product_display#custom_shop_text_settings_display .wide_section#text_settings input {
    margin: 0 auto 0 auto;
    display: block;
    clear: both;
}

#re_shop_container  .re_product_display#custom_shop_image_settings_display .wide_section#image_settings input {
    color: white;
background-color:   #2d333f;
border:             black solid 2px;
    width: 70%;
}

#re_shop_container  .re_product_display#custom_shop_image_settings_display .wide_section#image_settings h6 {
    width: 30%;
}

#re_shop_container  .re_product_display#custom_shop_image_settings_display .wide_section#image_settings img {
    width: 100px;
    height: 100px;
    float: right;
    border-radius: 15px;
    background-color:   #2d333f;
    border: black solid 2px;
}

/* Auction */
#holding_auction, #not_holding_auction, #bid_holding_menu {
display: none;
}

.re_product_display#search_display,
.re_product_display#auction_bid_tracker_display {
	z-index: 9;
}

#re_shop_container .re_product_display .section#auction_buy {
	float: right;
	margin-right: 60px;
	margin-bottom: 20px;
}

#re_shop_container .re_product_display .wide_section ol#bid_history {
max-height: 100px;
overflow: auto;
}

#re_shop_container .re_product_display#search_display {
	width: 240px;
	left: 0px;
	transform: none;
}

#re_shop_container .re_product_display#search_display #search {
margin: 0 auto 10px auto;
display: block;
}

/* Eq Build Shop */

#re_shop_container #shop_eq_build_menu {
z-index: 11;
}

#re_shop_container .re_npc_speech .st_equip {
width: 50px;
margin: 10px 10px 10px 0px;
float: left;
}

#re_shop_container .re_npc_speech#build_reward_display {
	margin-left: 175px;
}

/* Mail NPC Shop */

#mail_notice {
width: 500px;
color: white;
background-color:   #2d333f;
border:             black solid 2px;
margin: 5px auto 5px 280px;
padding: 5px;
position: relative;
z-index: 1;
border-radius: 10px;
}

#mail_notice h4 {
padding: 0;
margin: 0;
font-size: 16px;
}


#mail_container .mail_options {
min-height:         20px;
border-radius:      10px;
padding:            5px;
margin:             5px 50px 5px 50px;
background-color:   #1f273c;
border:             black solid 2px;
}

#mail_container .mail_options input {
margin-left: 40px;
}

#mail_container .mail_options table {
color:              white;
clear:              both;
white-space:        nowrap; 
width:              100%;
text-align:         center;
font-size:          12px;
}

#mail_container .mail_options table td b {
color:               lime;
}

#mail_container #mail_list {
max-height:         430px;
overflow:           auto;
width:              95%;
margin:             0 auto 0 auto;
}

#mail_container #mail_list #load_more_mail_button {
margin:             5px auto 0 auto;
display:            block;
}


#mail_container #mail_list .mail_box {
border-top-left-radius:    15px;
border-bottom-left-radius: 15px;
width:                     95%;
margin:                    5px auto 5px auto;
background-color:          #1f273c;
border:                    black solid 2px;
height:                    55px;
box-sizing:                border-box;
}

#mail_container #mail_list .mail_box .tag {
display:           block;
height:            100%;
width:             10%;
float:             left;
box-sizing:        border-box;
}

#mail_container #mail_list .mail_box .tag img {
height: 80%;
margin: 10% auto 0 auto;
display: block;
}


#mail_container #mail_list .mail_box .info {
float:             left;
height:            100%;
width:             80%;
box-sizing:        border-box;
position: relative;
transition:           all 1s ease;
padding-left: 2%;
height: 100%;
}

#mail_container #mail_list .info:hover {
background-color:     #2f699f;
transition:           all 1s ease;
}

#mail_container #mail_list .mail_box .delete {
float: left;
width:             10%;
height:            100%;
box-sizing:        border-box;
transition:           all 1s ease;
}

#mail_container #mail_list .mail_box .delete img {
height: 80%;
margin: 10% auto 0 auto;
display: block;
}

#mail_container #mail_list .delete:hover {
background-color:     #772c2c;
transition:           all 1s ease;
}

#mail_container #mail_list .mail_box .info h6 {
	margin: 0;
	padding: 0;
	font-size: 16px;
}

#mail_container #mail_list .mail_box .info h6 img {
margin-left: 10px;
}

#mail_container #mail_list .mail_box .info p {
	margin: 5px 0 0 0;
	padding: 0;
	font-size: 16px;
}

#mail_container #mail_list .mail_box .info i {
	margin: 0;
	padding: 0;
	right: 5px;
	top: 5px;
	position: absolute;
	font-size: 12px;
}

#mail_container #mail_list .mail_box .info input {
	display: none;
}

#mail_display  {
  display:   none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.75);
  font-size: 1em;
  z-index: 999;
  box-sizing: border-box;
  height: 100vh;
}

#mail_display #mail {
width:              800px;
max-height:         99vh; 
background-color:   #2a3e4d;
border:             black solid 2px;
left:      50%;
top:       50%;
transform: translate(-50%, -50%);
position:           absolute;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
box-sizing: border-box;
overflow: auto;
overflow-x: hidden;
}

#mail_display #mail textarea {
width:                95%;
}

#mail_display #mail .avatar {
width:       12.5%;
margin:      5px;
transition:  all 1s ease;
box-sizing: border-box;
}

#mail_display #mail .avatar img {
width:            100%;
height:           auto;
margin:           5px 5px 0 0px;
float:            left;
color:            white;
display:          block;
border:           none;
background-color:   #1f273c;
border:             black solid 2px;
border-radius:    10px;
}

#mail_display #mail .avatar:hover {
opacity: .50;
transition:           all 1s ease;
}

#mail_display #mail h3 {
width:            70%;
color:             white;
margin:           0 0 0 12.5%;
text-align: left;
padding:           0px 0px 0 5px;
}


#mail_display #mail h4 {
width:            70%;
color:            white;
margin:           10px 20% 0 20%;
padding:          0px 0px 0 5px;
background-color:   #1f273c;
border:             black solid 2px;
}

#mail_display #mail h5 {
text-align: left;
margin-left: 1.5%;
padding: 0;
}

#mail_display #mail p {
color:            white;
width:            82.5%;
overflow:         auto;
background-color:   #1f273c;
border:             black solid 2px;
margin:           10px 0 10px 15%;
padding:          10px;
box-sizing:       border-box;
}

#mail_display #mail p i {
opacity:           .50;
}


#mail_display #mail span {
color:             white;
}

#mail_display #mail span img {
margin:       0 10px 0 10px;
}

#mail_display #mail .single_mail_options {
width:              100%;
padding:            5px;
border:            #3a4666 solid 2px;
background-color:  #212837;
box-sizing:        border-box;
clear: both;
}

#mail_display #mail .single_mail_options input,
#mail_display #mail #send {
	margin-left: 15px;
	background-size: 25px auto;
}

#mail_display #mail .data_entry,
#mail_display #mail .big_data_entry {
border:            #3a4666 solid 2px;
background-color:  #212837;
color: white;
width: 95%;
padding: 5px;
box-sizing: border-box;
margin-left: 1.5%;
}

#mail_display #mail .big_data_entry {
max-width: 100%;
min-height: 100px;
}

#mail_display #mail .big_data_entry#reference {
	background-color: transparent;
	border: none;
}

#mail_display #mail #send {
margin: 10px 10px 10px 10px;
}


#filter_panel {
display: none;
z-index: 2;
position: absolute;
left: 100px;
top: 50px;
width: 400px;
padding: 5px;
border-radius: 15px;
border:            black solid 2px;
background-color:   #2a3e4d;
box-sizing: border-box;
}

#filter_panel p {
margin: 15px;
width: 90%;
}

#filter_panel table {
border:            black solid 2px;
background-color:  #212837;
width: 90%;
padding: 5px;
}

#filter_panel #filter_button {
margin: 10px;
}

/* News NPC Shop */

#re_shop_container #news_shop_product_display {
top: 0;
width: 780px;
padding: 0 25px 0 25px;
}

#re_shop_container #news_shop_product_display h3 {
margin-bottom: 25px;
}

#re_shop_container #news_shop_product_display h5 {
margin-top: 25px;
margin-bottom: 10px;
}

#re_shop_container #news_list {
	list-style: none;
	padding: 0 20px 0 20px;
	box-sizing: border-box;
}

#re_shop_container #news_list li {
margin: 10px 0 10px 0;
text-align:            center;
color:                 white;
background-color:   #1f273c;
border:             black solid 2px;
padding:          5px 15px 5px 15px;
text-align:       center;
background-color:   #1f273c;
overflow: auto;
border-radius: 15px;
transition:           all 1s ease;
}

#re_shop_container #news_list li:hover {
opacity: .50;
transition:           all 1s ease;
}


#re_shop_container #news_list li b {
float: left;
font-size:          16px;
}

#re_shop_container #news_list li i {
float: right;
font-size: 12px;
}

/* Equip NPC Shop */

#re_shop_container .re_product_display #fitting_information {
overflow:       auto;
border-radius:  15px;
margin:         5px 0 5px 0;
background-color:   #2d333f;
border:             black solid 2px;
width: 100%;
}

#re_shop_container .re_product_display #fitting_information .equals {
color: yellow; 
font-size: 25px;
}

#re_shop_container .re_product_display #fitting_information .unknown {
color: violet; 
font-size: 25px;
}

#re_shop_container .re_product_display #fitting_information img {
float: none;
width: 20px;
height: auto;
}

/* Egg NPC Shop */

#re_egg_shop_stock img,
#egg_shop_product_display #re_product_img  {
transform:          scaleX(-1); 
}

/* Tutorial NPC Shop */

#re_shop_container #tutor_category {
margin:             10px 0 10px 270px;
width:               550px;
padding:              10px 15px 10px 15px;
position:              relative;
z-index:               1;
border-radius:         10px;
background-color:      #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
box-sizing: border-box;
max-height: 500px;
overflow: auto;
}

#re_shop_container #tutor_category h4 {
text-align:            center;
color:                 white;
background-color:   #1f273c;
border:             black solid 2px;
font-size:        22px;
padding:          5px 15px 5px 15px;
text-align:       center;
margin:           0 10px 0 10px;
background-color:   #1f273c;
border:             black solid 2px;
font-size:          20px;
}

#re_shop_container #tutor_category .sp_link {
float:                 left;
width:                 210px;
background-color:   #1f273c;
border:             black solid 2px;
text-align:            center;
text-decoration:       none;
margin:                10px  10px  10px 20px;
transition:           all 1s ease;
position: relative;
box-sizing: border-box;
}

#re_shop_container #tutor_category .sp_link a {
font-size: 14px;
text-decoration:    none;
color:              white;
display:            block; 
width:              100%; 
height:             100%;
margin:             0;
padding:            5px 5px 5px 0px;
text-align:         center;
}

#re_shop_container #tutor_category .sp_link:hover,
#re_shop_container .return_link:hover {
border-color:            white;
background-color:   #3a4666;
transition:           all 1s ease;
}

#re_shop_container #display_lesson {
width:                760px;
min-height:           60px;
position:              relative;
z-index:               1;
margin:               10px auto 0 auto;
padding:              8px 8px 8px 8px;
color:                 white;
background-color:      #273b4a;
border: black solid 2px;
}

#re_shop_container #display_lesson .pocket_nightmare_list, #display_lesson .enemy_list {
border: black solid 4px; 
background-color: #3f2b56; 
padding-bottom: 10px; 
padding-top: 10px;
}

#re_shop_container #display_lesson .enemy_list {
background-color: #163316;
}

#re_shop_container #display_lesson .return_link  {
margin:                10px 200px 10px 200px;
text-align:            center;
text-decoration:       none;
clear:                 both;
padding: 5px;
display: block;
}

#re_shop_container #display_lesson table {
margin: 0 auto 0 auto;
}

#re_shop_container #display_lesson ol,
#re_shop_container #display_lesson ul {
margin: 0 0 0 30px;
}

#re_shop_container #display_lesson table h4 {
margin: 0 auto 0 auto;
}

#re_shop_container #display_lesson table tr th p, 
#display_lesson table tr td p {
word-wrap:        break-word;
}

#re_shop_container #display_lesson table tr th {
background-color:   #2d333f;
border:             black solid 2px;
padding: 10px;
}

#re_shop_container #display_lesson table tr td  {
border:            black solid 2px;
background-color:   #1b2435;
padding: 5px;
}

#re_shop_container #display_lesson table tr td img  {
margin:               0 auto 0 auto;
}

#re_shop_container #display_lesson .learn {
box-shadow:        5px 5px 10px black;
border:            1px solid black;
}

#re_shop_container #display_lesson ul {
background-color:   #1b2435;
border:             black solid 2px;
padding-bottom: 10px;
padding-top: 10px;
}

#re_shop_container #display_lesson .month_banner {
width: 90%; 
margin: 1% auto 1% auto; 
display: block;
border:  black solid 2px;
}

#re_shop_container #display_lesson ul ul {
background-color: #1b2837;
}

#re_shop_container #display_lesson ul li p {
background-color: #0d1e32;
}

#re_shop_container #display_lesson ul ul ul {
background-color:   #1f273c;
}

#re_shop_container #display_lesson p {
margin:             10px 10px 10px 10px;
background-color:   #1b2435;
border:             black solid 2px;
padding: 10px;
}

#re_shop_container #display_lesson td p { 
background-color:   #2d333f;
border-radius: 5px;
}

#re_shop_container #display_lesson td ol,
#re_shop_container #display_lesson td ul {
background-color:   #2d333f;
border-radius: 5px;
border:             black solid 2px;
padding: 10px 0 10px 30px;
margin:  0 10px 0 30px;
}

#re_shop_container #display_lesson h3 {
text-align:            center;
color:                 white;
margin:                0 5px 0 5px;
font-size:             24px;
background-color:   #1f273c;
border:             black solid 2px;
}

#re_shop_container #display_lesson h4 {
font-size:        22px;
padding:          0 15px 0 15px;
text-align:       center;
margin:           20px 20px 20px 20px;
background-color:   #1f273c;
border:             black solid 2px;
}

#re_shop_container #display_lesson h5 {
background-color:   #1f273c;
border:             black solid 2px;
font-size:        18px;
padding:          0 20px 0 15px;
text-align:       center;
margin:           20px 40px 20px 40px;
color:            white;
}

#re_shop_container #display_lesson .lesp_promo {
float: left;
}

#re_shop_container #display_lesson .growth_attr, 
#re_shop_container #display_lesson .key_item,
#re_shop_container #display_lesson .smaller,
#re_shop_container #display_lesson .tutorial_avatar {
width: 30px;
height: 30px;
}

#re_shop_container #display_lesson table .shrink img {
width:  90px;
height: 90px;
}

#re_shop_container #display_lesson .diff_image {
width: 200px; 
}

#re_shop_container #display_lesson #cat_info_list li span {
color: yellow;
}

#re_shop_container #display_lesson #cat_info_list li {
list-style: square;
}

#re_shop_container #display_lesson #cat_info_list li b {
font-size: 25px;
}

/* Breeding Shop */

#breeding_result {
width: 500px;
z-index: 3;
background-color:      #1b2837;
border:            #3a4666 solid 6px;
color: white;
box-shadow:           5px 5px 10px black;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

#breeding_result .close {
height: 30px;
width: 30px;
}

#breeding_result p {
background-color:   #1f273c;
margin: 15px 50px 15px 15px;
padding:5px 5px 20px 5px;
font-size: 16px;
text-align: center;
border: black solid 2px;
background-color:   #2d333f;
}

#breeding_result .egg_icon {
width: 30px;
}

/* Bedroom/Playroom Shop */

#the_bedroom {
    position: relative;
    height: 700px;
}

#the_bedroom, #the_bedroom div {
    box-sizing: border-box;
}

#the_bedroom  #bedroom_img {
width:   500px;
height:  500px;
margin: 0 auto 0 auto;
background-repeat: no-repeat;
background-size: cover;
border: black solid 2px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 1;
}


#the_bedroom .breeding_talk {
background-color: #273b4a;
background: rgba(42,62,77,0.90);
border: black solid 2px;
position: relative;
box-sizing: border-box;
overflow: hidden;
color: white;
position: absolute;
z-index: 2;
width:45%;
border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
}

#the_bedroom .breeding_talk#bedroom_text_l {
   left: 25px;
    top: 25px;
}

#the_bedroom .breeding_talk#bedroom_text_r {
    right: 25px;
    top: 50px;
}

#the_bedroom .breeding_talk#bedroom_text_egg {
top: 275px;
left: 50%;
transform: translateX(-50%);
width:80%;
}

#the_bedroom .breeding_talk#bedroom_text_b {
top: 500px;
left: 25px;
}

#the_bedroom .breeding_talk#bedroom_text_c {
top: 450px;
right: 25px;
}

#the_bedroom .breeding_talk .avatar {
float:                left;
width: 100px;
height: auto;
}

#the_bedroom .breeding_talk p {
padding: 5px;
margin:          5px 0 5px 110px;
}

#the_bedroom .breeding_talk p#bedroom_exit {
    border: black solid 2px;
    border-radius: 25px;
    background-color:   #1b2837;
    margin: 0 auto 10px auto;
    display: block;
    width: 250px;
    padding: 5px;
    text-align: center;
    transition:    all 1s ease;
}

#the_bedroom .breeding_talk p#bedroom_exit a {
    height: 100%;
    width: 100%;
    display: block;
    text-decoration: none;
}

#the_bedroom .breeding_talk p#bedroom_exit:hover {
border-color:      #212837;
background-color:  #3a4666;
}

#the_bedroom .breeding_talk h3 {
font-size: 16px;
text-align:           center;
padding:              2px 0 2px 0;
margin:               0;
border-bottom-right-radius: 50px;
border-top-left-radius: 25px;
background-color:   #1b2837;
border-bottom:        2px solid black;
border-right:         2px solid black;
}

/* Laboratory & Breeding Shops */

#re_shop_container .re_product_display #info_display {
clear: both;
width: 100%;
}

#re_shop_container .re_product_display #info_display ul,
#re_shop_container .re_product_display #info_display p {
width: 100%;
padding: 5px;
}

#re_shop_container .re_product_display #info_display ul li {
padding: 5px;
margin: 0;
}

#re_shop_container .re_product_display #info_display ul li img,
#re_shop_container .re_product_display #info_display p img {
    width: 15px;
}

#re_shop_container .re_product_display #info_display #info_sprite {
margin:               10px auto 10px auto;
display:              block;
border:               black solid 2px;
background-color:     #2d333f;
border-radius:       25px;
width: 200px;
}

#re_shop_container .re_product_display .preparation_table th,
#re_shop_container .re_product_display .preparation_table td {
width: 30%;
box-sizing: border-box;
}

#re_shop_container .re_product_display .preparation_table td .spr {
    width: 125px;
    background-color:     #2d333f;
    border: black solid 2px;
    border-radius: 25px;
    margin: 10px auto 10px auto;
    display: block;
}

#re_shop_container .re_product_display .preparation_table td.math {
    font-size: 25px;
    text-align: center;
}

#re_shop_container .re_product_display .preparation_table td.math img {
    width: 50px;
    margin-right: 15px;
}

#re_shop_container .re_product_display .preparation_table#cook_table .math {
    font-size: 75px;
}

/* Cooking Shops */

#re_shop_container .re_product_display .preparation_table#cook_table th,
#re_shop_container .re_product_display .preparation_table#cook_table td {
width: 20%;
}

#re_shop_container .re_product_display .preparation_table td h6.warning {
    color: red;
    font-size: 25px;
    border: red solid 2px;
    text-align: center;
    border-radius: 25px;
    background-color: black;
    animation: warning 3s ease-in-out infinite;
}

@keyframes warning {
0%  {
    opacity: 0;
    }
50% {
     opacity: 1;
     }
100% {
     opacity: 0;
     }
}

/* Suggestion Board */

.suggestion_box {
width:               80%;
min-height:          10px;
padding:             0px 0px 0px 0px;
margin:              10px auto 10px auto;
color:               white;
border-radius:       15px;
background-color:    #2a3e4d;
border:              black solid 2px;
}

.suggestion_box h3,  .suggestion_box h4, #suggestion_listing ul li h6 {
width:      90%;
margin:     5px auto 5px auto;
color:      white;
text-align: center;
background-color:   #1f273c;
border:             black solid 2px;
border-radius: 15px;
}

.suggestion_box h4 {
    width: 80%;
    clear: both;
}

.suggestion_box ul {
list-style: none;
width: 90%;
padding: 0;
margin: 0 auto 0 auto;
box-sizing: border-box;
overflow: auto;
}

#suggestion_listing ul li {
line-height: 30px;
float: left;
padding: 5px;
width: 50%;
box-sizing: border-box;
}

#suggestion_listing ul li#central {
width: 100%;
text-align: center;
}

#suggestion_listing ul li .pn_box_link,
#suggestion_listing ul li .image_pn_box {
display: block;
height: 43px;
margin: 0;
width: 100%;
box-sizing: border-box;
background-size: 40px 40px;
text-align: center;
}

#suggestion_listing ul li h6 {
margin-top: 0px;
padding: 0px;
font-size: 14px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-top: none;
}

#suggestion_posting h2 {
text-align:           center;
}

#suggestion_posting h3 {
text-align:           center;
}

#suggestion_posting #cat_select {
  width: 180px;
  border: black solid 2px;
  margin: 0 auto 0 auto;
  padding: 5px;
  border-radius: 15px;
background-color:   #1f273c;
}

#suggestion_posting table {
width: 90%;
margin: 0 auto 0 auto;
}

#suggestion_posting table th {
text-align: left;
}

#suggestion_posting #header {
width: 90%;
padding: 5px;
background-color:   #1f273c;
border-color: #3a4666;
}

#suggestion_posting #body {
width: 90%;
max-width: 90%;
height: auto;
min-height: 250px;
padding: 5px;
background-color:   #1f273c;
border-color: #3a4666;
}

#suggestion_display, #suggestion_posting, #suggestion_notice {
width: 800px;
margin: 25px 0 0 0;
padding-left: 0px;
background-color: #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
display: none;
}

#suggestion_display h2 {
font-size: 18px;
margin-left: 5px;
background-color:   #1f273c;
border:             black solid 2px;
}

#suggestion_display h3 {
text-align:         center;
width:              80%;
margin:             0 auto 0 auto;
background-color:   #1f273c;
border:             black solid 2px;
}

#suggestion_display #avatar {
width:              10%;
margin:             2.5%;
float: left;
box-sizing: border-box;
border: black solid 2px;
border-radius: 15px;
background-color:   #2d333f;
}

#suggestion_display p {
width:              80%;
display:            block; 
overflow:           auto; 
margin-left:        0 0 0 0;
padding:            10px;
border-radius: 15px;
background-color:   #2d333f;
border:             black solid 2px;
box-sizing: border-box;
float: left;
}

#suggestion_display h4 {
clear: both;
}

#suggestion_display h5,
#suggestion_display h6  {
text-align: right;
margin-right: 15px;
clear: both;
}

#suggestion_display .image_pn_box,
#suggestion_posting .image_pn_box {
padding: 6px 15px 6px 30px;
margin-bottom: 5px;
}

#suggestion_posting .image_pn_box {
margin: 5px;
float: right;
}

#suggestion_display #staff_options  {
background-color: #2d333f;
padding: 10px 0 0 10px;
height: 40px;
border-top: black solid 2px;
}

#suggestion_display #option_container {
background-color:   #1f273c;
padding: 10px 0 0 10px;
height: 40px;
border-top: black solid 2px;
}

#suggestion_display #option_container #vote_updater {
float: left;
width: 140px;
}

#suggestion_display #option_container #vote_updater .vote_option {
background-color: transparent;
border: none;
width: 25px;
}

#suggestion_display #option_container #vote_updater img {
width: 30px;
}

#suggestion_display #option_container img:hover {
opacity: .50;
}

#suggestion_display #option_container .image_pn_box {
float: right;
margin-right: 10px;
}

#suggestion_notice ol {
width: 80%;
margin: 0 auto 0 auto;
border: black solid 2px;
background-color:   #1f273c;
border-radius: 15px;
}

#suggestion_notice ol li {
    margin: 10px 0 10px 0;
}

#suggestion_notice .option {
    width: 25%;
    padding: 0px;
    clear: both;
    margin: 20px auto 0 auto;
box-sizing: border-box;
height: 40px;
}

#suggestion_notice .option .pn_box_link {
margin: 15px;
width: auto;
box-sizing: border-box;
}

/* Bottom Info */

#user_bottom_information {
color:            white;
text-align:       center;
line-height:      30px;
display:          block;
clear:            both;
width:            830px;
border-radius:    15px;
margin:           10px auto 0px auto;
background-color: #1d2538;
background:       rgba(29,37,56,0.90);
border:       black solid 2px;
}

#user_bottom_information p {
padding: 0;
margin: 0;
}

#user_bottom_info_update b {
color: lime;
}

/* Error Report Page */

#error_report_display {
padding:           10px;
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
margin: 10px 15px 15px 15px;
overflow: auto;
}

#error_report_display h1, h2, h3 {
    text-align: center;
}

#error_report_display .er_section {
box-sizing: border-box;
overflow: auto;
}

#error_report_display b.warnings {
color: red; 
}

#error_report_display b.noticeme {
color: lime; 
}

#error_report_display textarea {
width: 90%;
max-width: 90%;
height: 200px;
margin: 0 auto 0 auto;
display: block;
box-sizing: border-box;
}

#error_report_display input {
margin: 15px;
float: right;
}

#error_report_display p, 
#error_report_display ul,
#error_report_display ol {
background-color:   #1f273c;
border:             black solid 2px;
padding:         10px;
border-radius:   10px;
margin: 5px;
box-sizing: border-box;
width:              90%;
}

#error_report_display ul,
#error_report_display ol {
padding:  5px 0 5px 30px;
}

#error_report_display ul li,
#error_report_display ol li {
    margin: 10px 0 10px 0;
}

 
/* Status Screen Layout */


#view_status_menu {
clear: both;
margin: 0 1px 5px 10px;
padding-top: 5px;
overflow: auto;
}

#view_status_menu input {
width: 130px;
float: left;
padding: 5px 5px 5px 15px;
margin-left: 4px;
margin-bottom: 4px;
background-size: auto 25px;
}

#view_status_menu img:hover {
transition:    background-color 1s linear;
}

.status_page .status_window, 
.status_page .small_status_window, 
.status_page .large_status_window, 
.status_page .extra_large_status_window {
height:  auto;
float:  left;
margin: 0;
padding: 1%;
color: white;
text-align: center;
color: white;
overflow: auto;
background-color: #2a3e4d;
background: rgba(42,62,77,0.90);
border: black solid 2px;
}

.status_page .status_window .sm_icon, 
.status_page .small_status_window .sm_icon, 
.status_page .large_status_window .sm_icon, 
.status_page .extra_large_status_window .sm_icon {
width:  30px;
height: auto;
}

.status_page div {
box-sizing: border-box;
}

.status_page .small_status_window {
width: 25%;
}

.status_page .status_window {
width: 50%;
}

.status_page .large_status_window {
width: 75%;
}

.status_page .extra_large_status_window {
width: 100%;
}

.status_page div h1 img {
    margin: 0 0 -.10vw .5vw;
    height: .75vw;
    width: auto;
}

.status_page div#profile {
position: relative;
}

.status_page div#profile .portrait {
border: black solid 2px;
border-radius: 15px;
background-color:   #2d333f;
width: 100px;
}

.status_page div#profile img#creature_portrait {
transform: scaleX(-1);
width: 150px;
}

.status_page div#profile p {
max-height: 150px;
overflow: auto;
}

.status_page #outfit_selection {
overflow: auto;
max-height: 350px;
}

.status_page .image_pn_box {
background-size: auto 20px;
padding: 5px 10px 5px 25px;
}

.status_page #outfit_selection .image_pn_box {
width: 100%;
}

.status_page div#profile #conv_form {
padding:        4px;
margin:         0 auto 0px auto;
}

.status_page div#profile #first_superb {
position: absolute;
top: 105px;
left: 20px;
width: 80px;
}

.status_page h1,.status_page h2,.status_page h3,.status_page h4,.status_page h5,.status_page h6 {
background-color:   #1f273c;
border:             black solid 2px;
}

.status_page h1 {
font-size: 20px;
width: 90%;
margin: 20px auto 20px auto;
}

.status_page h2 {
font-size: 18px;
width: 85%;
margin: 18px auto 18px auto;
}

.status_page h3 {
font-size: 16px;
width: 80%;
margin: 15px auto 15px auto;
}

.status_page h4 {
font-size: 14px;
width: 75%;
margin: 12px auto 12px auto;
}

.status_page h5 {
font-size: 12px;
width: 70%;
margin: 10px auto 10px auto;
}

.status_page h6 {
font-size: 10px;
width: 60%;
margin: 5px auto 5px auto;
}

.status_page h2 input {
    font-size: 15px;
    margin: 5px;
}

.status_page table {
width: 96%;
margin: 2%;
font-size: 14px;
padding: 5px;
border: black solid 2px;
background-color:   #1f273c;
}

.status_page .big_number {
font-size: 50px;
text-align: center;
}

.status_page table img,
.status_page p img,
.status_page img,
.status_page ul li img,
.status_page ol li img,
.status_page #discipline_display .attribute_container img {
width: 30px;
}

.status_page ul img,
.status_page ol img {
  margin: 5px 5px -3px 5px;
}

.status_page .tat_area {
width: 40px;
}

.status_page table .sm_avatar {
border: black solid 2px;
border-radius: 15px;
background-color:   #2d333f;
}

.status_page #sprite_viewer {
max-height: 700px;
}

.status_page #sprite_viewer img,
.status_page #spr_group .display_spr,
.status_page #spr_assignment img {
width: auto;
}

.status_page #spr_group .display_spr,
.status_page #spr_assignment img {
border: black solid 2px;
background-color:   #2d333f;
margin: 5px;
border-radius: 15px;
transform: scaleX(-1);
}

.status_page table p {
background-color: #2a3e4d;
}

.status_page table input {
width: 160px;
float: right;
}

.status_page table .push_down {
margin-bottom: -8px;
}

.status_page table th {
font-weight:    normal;
background-color:   #3a4666;
border:             black solid 2px;
padding: 5px;
}

.status_page ul {
list-style:     none;
background-color:   #1f273c;
border:             black solid 2px;
padding: 10px;
margin: 7px 7px 7px 7px;
}

.status_page ul li {
text-align: left;
}

.status_page p {
margin:             2%;
padding:            2%;
text-align:         left;
overflow:           hidden;
background-color:   #1f273c;
border:             black solid 2px;
}

.status_page #outfit_sprite_selector {
background-color:      #1b2837;
border: black solid 2px;
padding: 10px;
width: 100%;
clear: both;
background-color: #2a3e4d;
background: rgba(42,62,77,0.90);
border-bottom: none;
}

.status_page #outfit_sprite_selector .image_pn_box {
width: 185px;
}

.status_page .outfit_tab {
width: 96%;
float: left;
margin: 1%;
padding: 0;
border-radius: 15px;
background-color: #2d333f;
border: black solid 2px;
}

.status_page .outfit_tab .outfit_spr {
float: left;
width: 20%;
}

.status_page .outfit_tab p {
height: auto;
overflow: auto;
display: block;
border-radius: 15px;
margin-bottom: 8px;
background-color:   #1f273c;
border:             black solid 2px;
width: 90%;
float: left;
}

.status_page .outfit_tab .unlock_req {
background-color: #571010;
width: 90%;
float: left;
}

.status_page #kill_count {
    text-align: center;
}

.status_page .default_spr_selection {
width: 50px;
transition:    width 1s linear;
}

.status_page .default_spr_selection:hover {
width: 100px;
transition:    width 1s linear;
}

.status_page #discipline_display {
overflow: auto;
height: 180px;
}

.status_page #discipline_display h5 {
margin: 0;
}

.status_page #discipline_display .attribute_container {
float:          left;
width:          48px;
background-color:   #1f273c;
border-radius:  5px;
margin:         2px 5px 2px 5px;
font-size: 14px;
}

#outfit_output {
background-color: #2a3e4d;
font-weight:normal;
padding: 12px;
}

/* Custom Status Page Section */

#custom_warning {
background-color:      #1b2837;
background: rgba(42,62,77,0.90);
border: black solid 2px;
width:        90%;
margin:       10px auto 10px auto; 
}

#custom_warning p {
margin: 5px 10px 10px 10px;
padding: 10px;
text-align: left;
background-color:   #1f273c;
border: black solid 2px;
}

#custom_warning h2 {
margin: 0;
padding: 5px;
}

#custom_warning b {
color: red;
}

.status_page #custom_sprites {
    overflow: auto;
}

.status_page #custom_sprites input {
    margin: 5px 0 5px 0;
    width: 125px;
    padding: 5px;
}

.status_page #custom_sprites tr {
float: left;
width: 50%;
box-sizing: border-box;
}

.status_page #custom_sprites img {
width: 100px;
transition:    all 1s ease;
}

.status_page #custom_sprites img:hover {
width: 200px;
transition:    all 1s ease;
}

/* Species Status Voting Menu */

.status_page #vote_options_menu {
overflow: auto;
}

.status_page #vote_options_menu * {
box-sizing: border-box;
}

.status_page #vote_options_menu .vote_selector {
width: 33%;
float: left;
overflow: auto;
}

.status_page #vote_options_menu .vote_selector h4 {
clear: both;
width: 90%;
}

.status_page #vote_options_menu .vote_selector ul {
height: 80px;
overflow: auto;
}


.status_page #vote_options_menu .vote_selector ul li {
float: left;
overflow: auto;
width: 25%;
margin: 0;
}

.status_page #vote_options_menu .vote_selector ul li img {
width: 90%;
margin: 0;
}

/* Simplified Guest Menu */

#guest_menu,
#guest_menu * {
 box-sizing: border-box;
}

#guest_menu {
overflow: auto;
background-color: #0e2236;
background: rgba(14,34,54,.90);
border: black solid 2px;
width:              834px;
height: 45px;
margin: 0 auto 0 auto;
    background-image: url('/images/main/scratchboard-thin.png');
background-repeat: repeat;
border-bottom: none;
}

#guest_menu ul  {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    margin: 0 auto 0 auto;
}

#guest_menu ul li {
    width: 100px;
    height: 35px;
    margin: 3px 0 0 0;
    padding: 0;
}

#guest_menu ul li#main {
float: left;
margin-left: 20px;
}

#guest_menu ul li#login {
float: right;
margin-right: 20px;
}

#guest_menu ul li a {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 16px;
    text-align: center;
    padding: 5px 5px 5px 25px;
background-color:      #3a4666;
border:                black solid 2px;
text-decoration: none;
transition: all 1s ease;
color: white;
background-size: auto 30px;
background-repeat: no-repeat;
}

#guest_menu ul li a:hover {
border-color:      #3a4666;
background-color:  #212837;
}

/* Evolution Section */

.status_page #evo_wrapper {
position: relative;
height: 300px;
}

.status_page #evolve_button {
clear: both;
display: block;
margin: 0 auto 0 auto;
margin-top: 30px;
margin-bottom: 10px;
}

.status_page #evo_wrapper .evo_spr {
z-index: 10;
width: 25%;
}

.status_page #evo_wrapper #evolution_details {
width: 25%;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 6;
}

.status_page #evo_wrapper #evolution_details p {
margin-top: 0%;
display: block;
text-align: center;
}

.status_page #evo_wrapper #evolution_details img {
margin: 0 auto 0 auto;
width: 50%;
}

.status_page #evo_wrapper #evolution_details #evo_arrow {
animation: moveLeftRight 2s linear infinite;
}

@keyframes moveLeftRight {
  0%, 100% {
    margin-left: 0px;
  }
  50% {
    margin-left: calc(50% - 50px); /* Adjust the width of the image */
  }
}



.status_page #evo_wrapper #left_evolution_sprite {
left: 0px;
position: absolute;
transform: scaleX(-1);
z-index: 5;
}

.status_page #evo_wrapper #right_evolution_sprite {
right: 0px;
position: absolute;
z-index: 5;
}

.status_page #evolution_message {
color: yellow;
position: absolute;
  text-shadow:
   -.15vw -.15vw 0 #000,  
    .15vw -.15vw 0 #000,
    -.15vw .15vw 0 #000,
     .15vw .15vw 0 #000;
font-size: 2.5vw;
z-index: 15;
left:      50%;
top:       50%;
transform: translate(-50%, -50%);
width: 50%;
animation: congrats 2s linear infinite;
border: none;
background: none;
display: none;
}

    @keyframes congrats {
      0% {
        color: orange;
      }
      50% {
        color: yellow;
      }
      100% {
        color: orange;
      }
    }

/* Equip Creature */

#equip_creature_container,
#equip_creature_container * {
box-sizing: border-box;
}

#equip_creature_container {
width:               100%;
margin:              0;
border-bottom:       0px;
overflow: auto;
padding: 1%;
}

#equip_creature_container h2 {
width: 100%;
 margin: 0px auto 0 auto;
padding: 10px;
font-weight: normal;
font-size: 16px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
background-color: #2a3e4d;
border:             black solid 2px;
border-bottom: none;
}

#equip_creature_container #character_panel,
#equip_creature_container #equip_selection_box {
height:              400px;
}

#equip_creature_container #character_panel {
width:               40%;
color:               white;
float:               left;
border-left: black solid 2px;
margin: 0;
background-color: #2a3e4d;
}

#equip_creature_container #character_panel #critter_level {
margin-bottom: -10px;
width: 25px; 
}

#equip_creature_container #character_panel h4 {
margin:              0 auto 0 auto;
padding:             5px;
border-radius:       20px;
width:               90%;
background-color:   #1f273c;
border: black solid 2px;
}

#equip_creature_container #character_panel .spr_image {
margin:              15px auto 15px auto;
display:             block;
width:               50%;
height:              auto;
background-color:   #1f273c;
border: black solid 2px;
border-radius:       15px;
}

#equip_creature_container #character_panel table {
width:               90%;
color:               white;
margin:              0 auto 0 auto;
background-color:   #1f273c;
border: black solid 2px;
text-align:          center;
font-size:           14px;
border-radius:       15px;
}

#equip_creature_container #character_panel table img {
width: 25px;
}

#equip_creature_container #equip_selection_box {
width:               60%;
padding-left:        2px;
color:               white;
float:               left;
background-color: #2a3e4d;
border-right: black solid 2px;
}

#equip_creature_container #equip_selection_box ul {
list-style: none;
padding: 0;
}

#equip_selection_box ul li {
    height: 35px;
    margin: 0;
}

#equip_creature_container #equip_selection_box ul li h5 {
width: 85%;
font-size: 14px;
padding: 5px;
text-align:          center;
background-color:   #1f273c;
border:             black solid 2px;
margin:             0 0 0 0;
}

#equip_creature_container #equip_selection_box ul li select {
width: 85%;
}


#equip_creature_container #equip_selection_box ul li .examine {
transition:    all 1s ease;
height: 40px;
margin: -20px 10px 0 0;
float: right;
}

#equip_creature_container #equip_selection_box ul li .examine:hover {
opacity: .50;
}

#equip_creature_container #equip_management {
width: 100%;
clear: both;
margin:         0 auto 0 auto;
overflow: auto;
background-color: #2a3e4d;
border: black solid 2px;
border-bottom:          none;
border-top:          none;
}

#equip_creature_container #equip_management ul {
list-style: none;
margin: 0 0 0 8%;
padding: 0;
width: auto;
overflow: auto;
float: left;
border-radius: 5px;
border:             black solid 2px;
}

#equip_creature_container #equip_management ul li {
float:               left;
padding: 5px;
}

#equip_creature_container #equip_management ul li {
border:            #3a4666 solid 2px;
background-color:  #212837;
}

#equip_creature_container #equip_management ul li img {
width: 30px;
}

#equip_creature_container #equip_management ul .chosen {
background-color: #6d2929;
}

#equip_creature_container #equip_management input {
margin: 0 4% 0 0;
float: right;
padding: 5px 5px 5px 30px;
}

#equip_creature_container #comparison_container {
background-color: #2a3e4d;
overflow: auto;
width: 100%;
border: black solid 2px;
border-top: none;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

#equip_creature_container #comparison_container .eq_output, 
#equip_creature_container #comparison_container #compare_arrow {
height:              300px;
float:               left;
color:               white;

}

#equip_creature_container #comparison_container #compare_arrow {
width:              10%;
padding: 5px;
}

#equip_creature_container #comparison_container #compare_arrow img {
margin: 50px auto 0 auto;
transition:         all 1s ease;
display: block;
}

#equip_creature_container #comparison_container #compare_arrow img:hover {
opacity:            .25;
}

#equip_creature_container #comparison_container .eq_output  {
width:              45%;
overflow:           auto;
font-size:          14px;
padding: 10px;
}

#equip_creature_container #comparison_container .eq_output img {
width: 30px;
margin: 2px;
}

#equip_creature_container #comparison_container .eq_output p {
font-size:           14px;
padding:             6px;
border-radius:       15px;
margin:               5px;
border:              black solid 2px;
background-color:   #1f273c;
}

#equip_creature_container #comparison_container .eq_output .eq_img {
width: 75px;
margin: 5px auto 5px auto;
display: block;
background-color:   #1f273c;
border: black solid 2px;
border-radius: 15px;
}

#equip_creature_container #comparison_container .eq_output h4 {
margin: 2px;
font-size: 16px;
background-color:   #1f273c;
border: black solid 2px;
padding: 5px;
border-radius: 15px;
}

#equip_creature_container #comparison_container .eq_output b {
color:       lime;
}

#equip_creature_container #quick_creature {
color:               white;
margin:              15px auto 4px auto;
border-radius:       15px;
padding:             5px;
width:               60%;
background-color: #2a3e4d;
border:             black solid 2px;
overflow: auto;

}

#equip_creature_container #quick_creature h5 {
    margin: 0 0 0 5%;
    padding: 0;
    line-height: 20px;
    font-weight: normal;
    width: 25%;
    float: left;
}

#equip_creature_container #quick_creature select {
    width: 65%;
    float: left;
}

/* Trade Menu General */


.trade_box,
.trade_box *,
.trade_inventory_menu,
.trade_inventory_menu * {
    box-sizing: border-box;
}

.trade_box .exit_a,
.trade_inventory_menu .exit_a {
display: block;
margin: 2.5% 0 2.5% 40%;
}


.trade_box,
.trade_inventory_menu {
width:      90%;
margin:     25px auto 25px auto;
border-radius: 10px;
padding:       5px;
background-color:      #2a3e4d;
border: black solid 2px;
}

/* Trade Listing Menu */

#trade_selections p {
    text-align: center;
}

#trade_selections ul {
    width:  75%;
    margin: 10px auto 10px auto;
    padding: 0;
    display: block;
}

#trade_selections ul li {
    border-radius: 15px;
    padding: 0;
    margin: 10px auto 10px auto;
    padding: 0;
    display: block;
    text-align:  center;
    list-style: none;
}

#trade_selections ul li a {
    width:  75%;
    display:  block;
    margin: 0px auto 0px auto;
    background-color:  #212837;
    border:  black solid 2px;
    text-decoration:  none;
    border-radius: 15px;
    padding: 5px 0 5px 0;
}

#trade_selections ul li a:hover {
background-color:      #2c3552;
}

/* View/Manage Trade Menu */

#view_trade {
width:      90%;
margin:     25px auto 25px auto;
border-radius: 10px;
padding:       5px;
background-color:      #2a3e4d;
border: black solid 2px;
}

#view_trade .pn_box_link {
    background-size: 25px 25px;
}

#view_trade .pn_box_link {
    padding-left:  30px;
}

#view_trade  h3 {
font-size:  17px;
}

#view_trade h4 {
font-size:  14px;
margin: 0 0 15px 0;
padding: 15px 0 0 0;
clear: both;
}


#view_trade p {
width:  90%;
margin:  5px auto 5px auto;
border:            black solid 2px;
background-color:  #212837;
border-radus:  15px;
border-radius:  15px;
padding:  10px;
}

#view_trade p #send_offer {
margin-left:  37.5%;
}

#view_trade p.half {
    width:  45%;
    margin-left:  3%;
    float:  left;
    font-size: 12px;
}

#view_trade p #approve {
    float:  right;
}

#view_trade .trade_entry {
color:         white;
width:         30%;
height:        175px;
line-height:   40px;
margin:        1% 1% 1% 2%;
text-align:    center;
border-radius: 10px;
padding:       5px;
float:         left;
font-size: 14px;
background-color:   #1f273c;
border:             black solid 2px;
}

#view_trade .trade_entry h3 {
width:   100%;
padding: 0;
margin:  0 auto 0 auto;
display: block;
text-align: center;
font-size: 12px;
}

#view_trade .trade_entry h3 img {
    width: 20px;
}

#view_trade .trade_entry .primary_img {
border-radius: 15px;
border: black solid 2px;
width:         75px;
display: block;
height: auto;
margin: 0 auto 0 auto;
background-color:  #212837;
padding: 5px;
}

#view_trade .trade_entry h6 {
width:   100%;
padding: 0 0 0 0;
margin:  10px auto 0 auto;
display: block;
text-align: center;
font-size: 12px;
}

#view_trade h5 {
width:   45%;
float:  left;
font-size: 14px;
padding:  10px;
margin:  2% 2.5% 2% 2.5%;
border:  black solid 2px;
background-color:   #1f273c;
border-radius:  15px;
text-align: center;
}

#view_trade #lower_trade_information {
clear:         both;
}

#view_trade #cancel {
    margin: 0 auto 0 auto;
    display:  block;
}

 
/* Trade Menu */

.trade_inventory_menu h2 {
   margin: 5px 5px 5px 5px;
}

.trade_inventory_menu .options,
.trade_inventory_menu .one_option {
    width:  90%;
    overflow:  auto;
    margin: 10px auto 10px auto;
}

.trade_inventory_menu .options div {
    width:  50%;
    float:  left;
}

.trade_inventory_menu .options div h6 {
width:  50%;
margin: 0;
padding: 0;
font-size:  14px;
float: left;
text-align: center;
}

.trade_inventory_menu .options div input,
.trade_inventory_menu .options div select {
width:  50%;
margin: 0 0 0 0;
padding: 0;
float: left;
}

.trade_inventory_menu .one_option div {
    width:  100%;
}

.trade_inventory_menu .one_option div h6 {
width:  25%;
margin: 0;
padding: 0;
font-size:  14px;
float: left;
text-align: center;
}

.trade_inventory_menu .one_option div input,
.trade_inventory_menu .one_option div select {
width:  auto;
margin: 0 0 0 0;
padding: 0;
float: left;
}

.trade_inventory_menu a {
color:    white;
border-radius: 10px;
padding: 5px;
text-decoration: none;
text-align: center;
border:            black solid 2px;
background-color:  #212837;
}

.trade_inventory_menu p {
border:            black solid 2px;
background-color:  #212837;
padding:   3px;
margin: 5px;
border-radius: 5px;
}

.trade_inventory_menu a:hover {
border:            #3a4666 solid 3px;
background-color:   #3a4666;
}

#add_trade_button {
    float: right;
    margin: 15px;
}

.enter_trade_information.trade_box {
overflow:   auto;
}

.trade_entries {
width:      80%;
margin:     25px auto 25px auto;
}

.trade_object {
margin:     5px auto 5px auto;
border-radius: 10px;
padding:    5px;
border:            black solid 2px;
background-color:      #2a3e4d;
}

.trade_object b {
color:      lime;
}

.trade_object div {
color:            white;
border:           #4e6fa7 solid 1px;
float:            right;
padding:          3px;
border:            black solid 3px;
background-color:  #1b2435;
}

.trade_object .deletion_button {
float:           left;
margin:         5px 10px 5px 5px;
}

#total_objects, #trade_options {
background-color:   #1f273c;
border:             black solid 2px;
width: 125px;
margin: 0 auto 15px auto;
padding:  5px;
text-align: center;
background-color:      #2a3e4d;
}

#total_objects input {
background: none;
border: none;
width: 25px;
text-align: center;
color: white;
}

#trade_options {
width:    160px;
margin:   2px auto 2px auto;
opacity:  0;
}

.trade_box h5 {
margin: 5px;
clear: both;
text-align: center;
}

.trade_box #none_available {
color:       red;
}

#trade_entry_want_options, #trade_entry_offer_options {
display: none;
}

.trade_box #big_button {
margin: 15px auto 0 auto;
font-size: 20px;
display: block;
}

.trade_box #trade_description {
width: 98%;
}

#trade_list_box {
width: 800px;
}

#trade_list_box .arrow_box {
height: 26px;
width: 180px;
overflow: auto;
border-bottom-left-radius: 15px;
background-color:   #1f273c;
border:             black solid 2px;
margin: 0 0 0 5px;
padding-top: 5px;
}

#trade_list_box .arrow_box img {
margin-left: 5px;
transition:            opacity .5s ease;
}

#trade_list_box .arrow_box a {
background: none;
display: inline;
border: none;
margin: 0;
padding: 0;
}

#trade_list_box .arrow_box img:hover {
opacity: .25;
transition:            opacity .5s ease;
}

#trade_list_box .tr_list_descrip {
overflow: auto;
}

#trade_list_box ol {
border-radius: 15px;
padding: 15px 0 15px 0;
}

#trade_list_box ol li {
margin: 5px 5px 0 30px;
}

#trade_list_box ol li .delete_button {
float: right;
}

#trade_list_box ol li textarea {
width: 96%;
max-width: 96%;
background-color:   #1b2435;
padding: 5px;
}

#trade_list_box ol li p {
margin-top: 15px;
padding: 5px;
border: none;
}

#trade_list_box ol li img {
width: 30px;
}

/* Admin Chat Layout */

#birthday_box {
    color: white;
    padding: 10px;
    border-radius: 20px;
}

#admin_chat_log_box {
background-color:  black;
border:  white solid 2px;
width:  90%;
margin:  5%;
height:  100px;
overflow:  auto;
color:  white;
font-size:  12px;
resize: both;
}

#admin_chat_log_box p {
margin:  0;
padding:  3px;
}

#birthday_box h5 {
margin: 0 15px 0 0;
}

#birthday_box ul {
    
}

#birthday_box ul b {
    color: yellow;
}

/* Chat Layout */


#chat_room, #chat_room * {
box-sizing: border-box;
}

#chat_room {
width:       97%;
padding:     0 0 0 0;
margin:      0 auto 0 auto;
color:       white;
}

#chat_room h2 {
border:      2px solid black;
margin:      5px auto 5px auto;
width: 90%;
font-size: 20px;
background:  #273b4b;
border-radius: 15px;
}

#chat_room h3 {
text-align:  center;
color:       white;
clear:       both;
background:  #333333;
border:      2px solid black;
margin:      0 auto 0 auto;
font-size: 18px;
}


#chat_room h4 {
text-align:  center;
color:       white;
margin:      15px auto 15px auto;
width:       90%;
padding:     2px 0 2px 0;
margin:      4px auto 4px auto;
background:  #1f273c;
border:      2px solid black;
font-size:   14px;
}

#chat_room .chat_bar {
text-align:     center;
color:          white;
margin:         0 auto 0 auto;
padding:        5px 0 5px 0;
min-height:     0;
width:          100%;
background:     #273b4b;
border:         black solid 2px;
line-height: 30px;
}

#chat_room .chat_bar#room_description {
border-bottom: none;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

#chat_room .chat_bar#notice {
border-top: none;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

#chat_room #room_list {
height:      400px;
width:       20%;
background:  #273b4b;
border:      2px solid black;
border-top:    none;
border-right:  none;
border-bottom:  none;
overflow:      auto;
padding:      0 0 0 0;
color:        white;
font-size: 12px;
float:       left;
}

#chat_room #room_list .image_pn_box {
margin: 5px auto 0 auto;
width: 80%;
display: block;
}

#chat_room #room_list ul {
list-style:                 none;
padding:                   0;
margin:                    0 auto 0 auto;
display:                   block;
width: 90%;
}

#chat_room #room_list ul li img {
margin-right: 5px;
}


#chat_room #room_list #room_selection {
overflow: auto;
max-height: 165px;
}

#chat_room #room_list #room_selection li a {
width:                      90%;
display:                    block;
text-align:                 center;
color:                      white;
text-decoration:            none;
border:                     black solid 2px;
margin:                    5px auto 5px auto;
background-color: #1b2435;
background-size: 15px auto;
background-repeat:no-repeat;
}

#chat_room #room_list #room_selection li .private_room {
    background-image: url('/images/icons/lock.png');
    background-color: #6c363c;
}

#chat_room #room_list table {
    width: 80%;
    margin: 0 auto 0 auto;
    text-align: left;
}

#chat_room #chat_messages {
height:      400px;
width:       60%;
background-color:   #2a3e4d;
border:      2px solid black;
overflow:    auto;
float:       left;
}

#chat_room #chat_messages .player_message {
width:       98%;
padding:     5px;
margin:      5px 0 5px 1%;
display:     block;
color:       white;
background:  #0a101a;
word-wrap:  break-word;
border: black solid 2px;
overflow: auto;
}

#chat_room #chat_messages .player_message i {
float:       right;
color:       white;
margin-top: 5px;
margin-right: 5px;
font-size: 12px;
}

#chat_room #chat_messages .player_message img.player_avatar,
#chat_room #chat_messages .player_message .content_rating {
width:  25px; 
height: auto;
}

#chat_room #chat_messages b a {
text-decoration: none;
}

#chat_room #chat_messages b a:hover {
opacity: .50;
transition:    all 1s ease;
}

#chat_room #chat_messages .player_message img {
width: 20px;
height: auto;
}

#chat_room #chatter_list {
height:      400px;
width:       20%;
background:  #273b4b;
border:      2px solid black;
border-top:   none;
border-left:  none;
border-bottom:  none;
overflow:     auto;
float:       left;
}

#chat_room #chatter_list #notifications {
padding-left: 20px;
margin: 0px auto 0 auto;
}

#chat_room #chatter_list ul {
list-style:                 none;
padding:                   0;
margin:                    0 auto 0 auto;
display:                   block;
font-size: 14px;
}

#chat_room #chatter_list ul li img {
margin-right: 5px;
}

#chat_room #chatter_list #chatter_selection {
list-style:       none;
padding:          0 0 0 0;
text-align:       center;
margin: 0 auto 0 auto;
}

#chat_room #chatter_list #chatter_selection li {
text-overflow:     ellipsis;
white-space:       nowrap;
margin:           0px auto 0px auto;
font-size: 12px;
overflow: auto;
line-height: 25px;
margin-left: 5px;
}

#chat_room #chatter_list #chatter_selection li * {
    float: left;
}

#chat_room #chatter_list #chatter_selection li span img {
width: 10px; 
height: 10px;
margin: 7px 0 0 2px;
transition:    all 1s ease;
}

#chat_room #chatter_list #chatter_selection li span .avatar {
    border: black solid 2px;
    border-radius: 15px;
    width: 20px;
    height: auto;
    margin: 0 2px -10px 0;
    background-color: #1b2435;
}

#chat_room #chatter_list #chatter_selection li span:hover {
opacity: .3;
transition:    all 1s ease;
}

#chat_room #smiley_box {
width: 100%;
background:      #273b4d;
border:          2px solid black;
display:         none;
margin: 5px auto 5px auto;
padding: 5px;
overflow: auto;
border-radius: 15px;
}

#chat_room #smiley_box h5 {
    float: left;
    margin: 5px 0 5px 0;
    padding: 5px 2px 5px 2px;
    font-size: 14px;
    background-color: #2d333f;
    border: black solid 2px;
}

#chat_room #smiley_box img {
    float: left;
    margin: 7px;
    display: block;
}

#chat_room #private_communications_panel {
clear:           both;
float:           none;
background:      #273b4d;
border:          2px solid black;
border-top-left-radius:  15px;
border-top-right-radius:  15px;
width:           40%;
padding:         5px;
margin:          5px 0 0 0;
display:         none;
}

#chat_room #private_communications_panel h5 {
font-size:   14px;
margin: 5px auto 5px auto;
width:       90%;
background-color: #2d333f;
text-align:  center;
border: black solid 2px;
}

#chat_room #private_communications_panel input {
background-color: #1a1a1c;
margin: 15px;
width: 90%;
}

#chat_room #chat {
width:       100%;
max-width:   100%;
min-height: 75px;
background:  black;
color:       white;
border:      2px solid black;
}

#chat_room input, 
#chat_room select {
margin: 5px 0 5px 9px;
background-color:   #3a4666;
border:      2px solid black;
color:       white;
}

#chat_room input:hover, 
#chat_room select:hover {
margin: 5px 0 5px 9px;
background-color:  #212837;
border:      2px solid black;
color:       white;
}

.overlay_menu#profile_card,
.overlay_menu#profile_card * {
box-sizing: border-box;
}

.overlay_menu#profile_card {
width: 25vw;
height: auto;
max-height: 90vh;
}

.overlay_menu#profile_card #profile_comment {
    margin: 0vw auto 0 auto;
    background:      #273b4d;
    border: black solid .15vw;
    padding: .5vw .5vw .5vw .5vw;
    display: block;
    width: 90%;
    max-width: 90%;
    min-height: 20vh;
    font-size: 1.15vw;
    border-radius: 1vw;
}

.overlay_menu#profile_card #update_comment {
    float: right;
    margin: .5vw;
}

.overlay_menu#profile_card h4 {
    text-shadow:
    -.1vw -.1vw 0 #000,
    .1vw -.1vw 0 #000,
    -.1vw .1vw 0 #000,
    .1vw .1vw 0 #000; 
}

.overlay_menu#profile_card ul {
    list-style: none;
    background:      #273b4d;
    border: black solid .15vw;
    width: 95%;
    overflow: auto;
    padding: .3vw .3vw .3vw .3vw;
    margin: .5vw auto 0 auto;
    border-radius: 1vw;
}

.overlay_menu#profile_card ul li {
    margin: 1%;
    width: 45%;
    margin: 2.5% 0% 2.5% 2.5%;
    display: block;
    float: left;
}

.overlay_menu#profile_card ul li input {
    width: 100%;
    background-size: 2vw auto;
}

.overlay_menu#profile_card #avatar_holder {
    width: 5vw;
    overflow: none;
    position: relative;
    margin:  0 auto 0 auto;
}

.overlay_menu#profile_card #avatar_holder #profile_avatar {
    width: 100%;
    border: black solid .15vw;
    border-radius: 5vw;
    background-color: #1b2435;
}

.overlay_menu#profile_card #avatar_holder #chat_status {
    position: absolute;
    bottom: -10%;
    right: -10%;
    border-radius: 5vw;
    border: black solid .15vw;
    width: 2vw;
}

.overlay_menu#room_creation_menu ul, 
.overlay_menu#room_editing_menu ul,
.overlay_menu#roleplay_options_menu ul {
    width: 75%;
    min-width: auto;
    margin: 0 auto 0 auto;
    padding: .5vw;
    display: block;
    border-radius: .5vw;
    background:      #273b4d;
    border: black solid .15vw;
    list-style: none;
}

.overlay_menu#room_creation_menu ul li,
.overlay_menu#room_editing_menu ul li,
.overlay_menu#roleplay_options_menu ul li {
    text-align: center;
}

.overlay_menu#room_creation_menu ul li textarea,
.overlay_menu#room_editing_menu ul li textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    font-size: 1.15vw;
}

.overlay_menu#roleplay_options_menu ul li p {
background-color:  #0d1e32;
}

.overlay_menu#roleplay_options_menu ul li input {
    width: 30%;
    float: none;
    clear: none;
}

.overlay_menu#room_creation_menu ul li select {
    padding: 0;
    margin: 0 auto 0 auto;
}

/* Fashion Handbook */

#fashion_handbook,
#fashion_handbook * {
    box-sizing: border-box;
}


#fashion_handbook {
width:  800px;
border:  black solid 2px;
margin:  20px auto 0 auto;
border-radius:  15px;
padding:  5px;
overflow:  auto;
background-color:      #2a3e4d;
clear:  both;
}

 #fashion_handbook h3 {
 font-size:  16px;
 }

#fashion_handbook #search_options table {
 font-size:  14px;
}

#fashion_handbook .fashion_entry {
border:  black solid 2px;
width: 45%;
margin: 2.5%;
float:  left;
border-radius:  15px;
padding: 5px;
background-color: #1f273c;
}

#fashion_handbook .fashion_entry h4 {
 width: 90%;
 font-size:  15px;
 height: 42px;
 margin: 0 auto 0 auto;
}

#fashion_handbook .fashion_entry .fashion_info {
}

#fashion_handbook .fashion_entry .fashion_info .stand_img {
width:  40%;
margin:  2.5%;
margin-right:  0;
float:  left;
background-color: #2d333f;
border:  black solid 2px;
padding: 2%;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}


#fashion_handbook .fashion_entry .fashion_info p {
width:  55%;
margin:  2.5%;
margin-left:  0;
font-size:  14px;
float:  left;
background-color:  #3a4565;
padding: 2%;
border:  black solid 2px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
overflow:  auto;
}

#fashion_handbook .directory_arrows {
    clear:  both;

}

#fashion_handbook .directory_arrows img {
width: 70px;
}

/* Card Album */

#card_album {
width:  800px;
border:  black solid 2px;
margin:  20px auto 0 auto;
border-radius:  15px;
padding:  0;
overflow:  auto;
background-color:      #2a3e4d;
clear:  both;
overflow: hidden;
}

#card_album h3 {
 font-size:  16px;
 }

#card_album #search_options ul {
 font-size:  14px;
 list-style: none;
 width: 500px;
 margin:  0 auto 0 auto;
}

#card_album #search_options li {
    float:  left;
    margin: 0 5px 0 5px;
    padding: 0;
}

#card_album .card_entry {
border:  black solid 2px;
width: 45%;
margin: 2.5%;
float:  left;
border-radius:  15px;
box-sizing: border-box;
background-color: #1f273c;
}

#card_album .card_entry h4 {
 width: 90%;
 font-size:  15px;
line-height: 30px;
 margin: 10px auto 0 auto;
}

#card_album .card_entry .card_info, 
#card_album .card_entry .card_info_faded {
}

#card_album .card_entry .card_info_faded {
opacity: .50;
}

#card_album .card_entry .card_info img, 
#card_album .card_entry .card_info_faded img {
    float:  left;
    width:  40%;
    box-sizing: border-box;
    margin: 5%;
}

#card_album .card_entry h5 {
 width: 90%;
 font-size:  12px;
line-height: 25px;
 margin: 0 auto 10px auto;
 text-align: center;
}

#card_album .empty {
margin:  0px auto 0 auto;
clear: both;
padding-top: 20px;
width:  60%;
}

#card_album .empty p {
margin:  0;
color:  red;
background-color: #1b2435;
color:  red;
border-radius: 20px;
border:  black solid 2px;
text-align: center;
padding: 0px 0 0 0;
}

/* Battle Reset Recapcha box */

#battle_reset_menu.recapcha_box {
width: 400px;
margin: 15px auto 15px auto;
padding: 15px;
border-radius: 15px;
background-color: #273b4a;
border:  #040813 solid 2px;
box-sizing: border-box;
}

#battle_reset_menu.recapcha_box h3 {
background-color: #1f273c;
border: black solid 3px;
margin: 10px 25px 10px 25px;
}

#battle_reset_menu.recapcha_box #button_wrapper {
margin-top: 20px;
}

/* Nightfaux's Character Select at Index Page */

#character_select_outer, 
#character_select_outer * {
    box-sizing: border-box;
}

#character_select_outer {
  width:  1000px;
  height:  700px;
  /*
  background-color: #402966;
  background-image: linear-gradient(to bottom, #402966 0%, #5a5f8c 100%);
  */
  position:  absolute;
  z-index:  50;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  border-radius:  20px;
    background-color: black;
    background:       rgba(0,0,0,0.90);
box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.9);
}

#character_select_outer h2,
#character_select_outer h3 {
    position:  absolute;
    color:  #c6d7f1;
    left: 50%;
  z-index:  55;
  font-weight: bold;
  transform: translateX(-50%) scaleY(1.5);
}

#character_select_outer h2 {
  font-size: 20px;
  top: 20px;
}

#character_select_outer h3 {
  font-size: 50px;
  top: 30px;
}

#character_select_outer #rel_div {
        position: relative;
}

#character_select_outer #char_sel_counter {
position:  absolute;
  top:  160px;
  left: 50%;
  transform: translateX(-50%) scaleY(1.15);
  font-size: 95px;
  color:  #c6d7f1;
  z-index:  55;
  font-weight: bold;
}

#character_select_outer #sel_p1,
#character_select_outer #sel_p2 {
top:  50px;
width: 350px;
z-index:  51;
}

#character_select_outer #sel_p1 img,
#character_select_outer #sel_p2 img {
width:  100%;
}


#character_select_outer #sel_p1 {
position:  absolute;
left: 50px;
}

#character_select_outer #sel_p2 {
position:  absolute;
right: 50px;
}

#character_select_outer #char_select_container {
}

#character_select_outer #char_select_container #left_char_selection,
#character_select_outer #char_select_container #right_char_selection,
#character_select_outer #char_select_container #center_char_selection {
    position:  absolute;
    z-index:  55;
box-shadow: 0 -8px 6px rgba(0, 0, 0, 0.5);
}

#character_select_outer #char_select_container #left_char_selection,
#character_select_outer #char_select_container #right_char_selection {
width: 375px;
}

#character_select_outer #char_select_container #left_char_selection {
    top: 350px;
    left: 62px;
  transform: skewX(10deg);
  transform-origin: top left;
  transform: skewY(10deg);  
}

#character_select_outer #char_select_container #left_char_selection .char_selector img {
  transform: skewX(-10deg);
  transform: skewY(-10deg);  
}

#character_select_outer #char_select_container #center_char_selection {
    top: 416px;
left: 50%;
transform: translateX(-50%);
width: 125px;
}

#character_select_outer #char_select_container #right_char_selection {
top: 416px;
right: 62px;
  transform: skewX(-10deg);
  transform: skewY(-10deg);  
  transform-origin: top left;
}

#character_select_outer #char_select_container #right_char_selection .char_selector img {
  transform: skewX(10deg);
  transform: skewY(10deg);  
}

#character_select_outer #char_select_container .char_selector {
float:  left;
border:  black solid 2px;
width:  125px;
height:  125px;
font-size: 75px;
color:  #c6d7f1;
line-height: 125px;
text-align: center;
background-color: #4d518b;
background-image: linear-gradient(to bottom, #1f273c 0%, #334565 100%);
overflow: hidden;
font-weight: bold;
}

#character_select_outer #char_select_container .char_selector:hover {
border:  violet solid 4px;
background-image: linear-gradient(to bottom, #653350 0%, #311f3c 100%);
}

#character_select_outer #char_select_container .char_selector img {
width:  110%;
}

#character_select_outer #char_select_container .char_selector#random {
color:  white;
font-size: 21px;
font-weight: bold;
}

#character_select_outer #char_select_container .char_selector#random b {
transform: scaleY(2.55);
  display: inline-block;
}

/* End Nightfaux Character Select */

/* Gene Research Manual Layout */

#gene_board,
#gene_board * {
box-sizing: border-box;
}

#gene_board {
clear:      both;
}

#gene_board h2 {
font-size:      20px;
text-align: center;
}

#gene_board #gene_container {
width:  95%;
margin:  0 auto 0 auto;
padding: 0;
margin-bottom: 15px;
overflow: auto;
background-color: #2a3e4d;
border-radius: 15px;
border: black solid 2px;
box-shadow:        5px 5px 10px black;
}

#gene_board #gene_container .gene_display {
float:          left;
padding:        0;
color:          black;
border-radius:  20px;
margin:         .60%;
width:          32%;
overflow:       none;
height:         120px;
color:          white;
background-color: #1f273c;
border:         black solid 2px;
}

#gene_board #gene_container .gene_display .gene_icon {
width: 15px;
margin: 2px 0 0 10px;
float: left;
}

#gene_board #gene_container .gene_display h3 {
margin:  0;
padding:  0;
text-align:     center;
line-height: 22px;
font-size:  15px;
background-color: black;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}

#gene_board #gene_container .gene_display h4 {
margin:  0;
padding:  0;
color: red;
font-size:  13px;
}

#gene_board #gene_container .gene_display h4.unavailable {
color: red;
}

#gene_board #gene_container .gene_display h4.available {
color:  aqua;
}

 #gene_board #gene_container .gene_display p {
padding: 0px;
margin: 0px;
font-size:  14px;
min-height: 61px;
}

 #gene_board #gene_container .gene_display p img {
width: 20px;
padding:  0;
margin:   0;
height: auto;
margin: 0;
}

#gene_board #gene_container .gene_display h5 {
padding: 0;
margin:  0;
text-align: center;
font-size:  13px;
clear:  both;
line-height: 18px;
background-color: black;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

#gene_board #gene_container .gene_display h5 img {
width: 20px;
margin:  0 0 0 4px;
float:  left;
}

/* End Gene Research Manual Layout */

/* Assorted Directory Arrows */

.directory_arrows {
margin:            0 0px 0 0px;
height:            75px;
clear: both;
}

.directory_arrows img {
border: none;
height: 100%;
width: auto;
}

.directory_arrows img:hover {
opacity:           .50;
}

.directory_arrows .left {
float:  left;
}

.directory_arrows .right {
float: right;
}

/* Directory Arrows */