/*
Theme Name: Draconis Online
Theme URI: /NA/
Author: Christopher Javier Oliveros
Author URI: https://www.upwork.com/freelancers/~01c9ce827b0aebce0b/
Description: /NA/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/*-- Add fonts --*/
/* Google Fonts imports removed for QQiROSE: Oswald was the condensed face that
   read badly, and style/qqirose.css sets the system stack used on the main site
   instead. Removing them also means the page makes no external requests. */
/* @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700); */
/* @import url(https://fonts.googleapis.com/css?family=Oswald:700,400); */


/*-- Global Presets --*/
html,
body,
ul, li, p,
h1, h2, h3, h4, h5, a {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5 {
    font-family: "Oswald", sans-serif;
    color: #333;   
}

input, select {
    font-family: "Roboto", sans-serif;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    box-shadow: 0px 1px 1px #efefef inset;
    color: #333;   
    transition-duration: .2s;
}

input[type="submit"], button {
    font-weight: 700;
    font-size: 12px;
    background-color: #ebebeb;
    color: #606060;
    border-radius: 3px;
    border: 1px solid #c3c3c3;
    box-shadow: 0 1px 0 white inset;
    cursor: pointer;
    transition-duration: .2s;
}

input[type="submit"]:hover,
button:hover{
    background-color: #fcfcfc;
}

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
select:focus {
    outline: none;
    border: 1px solid #b5b5b5;
    box-shadow: 0px 1px 2px rgb(212, 212, 212) inset;
}

a {
    color: #dd1b19;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p {
    text-align: justify;
}

.clear {
    clear: both;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 14px;
    background-color: #f6f2dd;
    background-image: url('../images/web/bg.jpg');
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;    
    color: #333; 
}

.status-success {
    font-size: 12px;
    color: white;
    padding: 10px;
    border-radius: 3px;
    background-color: #0bb458;    
}

.status-failed {
    font-size: 12px;
    color: white;
    padding: 10px;
    border-radius: 3px;
    background-color: #b81700;
}

.form-return-wrapper {
    margin-top: 10px;
    text-align: center;
}

.global-gray-link {
    display: inline-block;
    font-weight: 700;
    font-size: 12px;
    padding: 8px;
    background-color: #ebebeb;
    color: #606060;
    box-shadow: 0 1px 0 white inset;
    cursor: pointer;
    transition-duration: .2s;
    border: 1px solid #cacaca;
    border-radius: 3px;
}

.global-gray-link:hover {
    text-decoration: none;
    background-color: #fcfcfc;   
}

/*-= Table Listing Style 1 -=*/
.tablelisting-type1 {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tablelisting-type1 tr td {
    padding: 8px;
    color: #797979;
}

.tablelisting-type1 tr:nth-child(odd) td {
    background-color: #fafafa;
    border-top: 1px solid  #ededed;
    border-bottom: 1px solid  #ededed;
}

.tablelisting-type1 tr:nth-child(1) td {
    font-weight: bold;
    background-color: #f4f4f4;
    border-top: 1px solid  #d9d9d9;
    border-bottom: 1px solid  #d9d9d9;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #4e4e4e;
}

.tablelisting-type1 tr:nth-child(1) td:first-child {
    border-left: 1px solid  #d9d9d9;
}

.tablelisting-type1 tr:nth-child(1) td:last-child {
    border-right: 1px solid  #d9d9d9;
}

.tablelisting-type1 tr td:first-child {
    border-left: 1px solid  #ededed;    
}

.tablelisting-type1 tr td:last-child {
    border-right: 1px solid  #ededed;    
}

.tablelisting-type1 tr:last-child td {
    border-bottom: 1px solid  #ededed;    
}

.tablelisting-type1 tr td:nth-child(1) {
    text-align: center;
}

.tablelisting-type1 tr:nth-child(1) td {
    border-right: none;
}


/*-= Form Style 1 =-*/
.form-table-type-1 {
    position: relative;
}

.form-table-type-1 table {
    width: 100%;
    border-collapse: collapse;
}

.form-table-type-1 table tr td:first-child {
    font-size: 12px;
    width: 20%;
    text-align: right;
}

.form-table-type-1 table tr td:last-child {
    width: 80%;
    border-right: 1px dashed #e0e0e0;
    background-color: #f8f8f8;
}

.form-table-type-1 table tr td:first-child {
    border-right: 1px dashed #e0e0e0;
}

.form-table-type-1 table tr:first-child td:last-child {
    border-top: 1px dashed #e0e0e0;
}

.form-table-type-1 table tr:last-child td:last-child {
    border-bottom: 1px dashed #e0e0e0;
}

.form-table-type-1 table tr td {
    padding: 2%;
    padding-top: 2.5%;
}

.form-table-type-1 label {
    font-weight: 300;
}

.form-table-type-1 input[type="text"],
.form-table-type-1 input[type="password"],
.form-table-type-1 input[type="email"]{
    padding: 1.5%;
}

.form-table-type-1 select,
.form-table-type-1 input[type="number"] {
    padding: .8%;   
}

.form-table-type-1 input[type="file"] {
    font-size: 12px;
    box-shadow: none;
    border: none;
}

.form-table-type-1 input[type="submit"] {
    padding: 9px;
    padding-left: 18px;
    padding-right: 18px;
}



/*-= Form Style 2 =-*/
.form-table-type-2 {
    
}

.form-table-type-2 table {
    width: 100%;   
}

.form-table-type-2 table tr td {
    padding: 5px; 
    padding-bottom: 10px;
    padding-top: 0px;
    transition-duration: .3s;
}

.form-table-type-2 table tr:last-child td {
    padding-top: 10px;   
}

.form-table-type-2 table tr td:first-child {
    width: 20%;
    text-align: right;
    font-weight: 300;
    font-size: 12px;
    font-style: italic;
    opacity: .5;
}

.form-table-type-2 table tr:hover td:first-child {
    opacity: 1;
}

.form-table-type-2 table tr td:last-child {
    width: 80%;
}

.form-table-type-2 table tr td input[type="text"],
.form-table-type-2 table tr td input[type="password"],
.form-table-type-2 table tr td input[type="email"],
.form-table-type-2 table tr td select {
    padding: 10px;
    padding-left: 10px;
    font-size: 16px;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid rgba(255, 0, 0, 0);
    transition-duration: .2s;
}

.form-table-type-2 table tr td input[type="text"],
.form-table-type-2 table tr td input[type="password"],
.form-table-type-2 table tr td input[type="email"] {
    width: 90%;
}

.form-table-type-2 table tr td input[type="submit"] {
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;
}

.form-table-type-2 table tr td input:focus {
    border-bottom: 1px solid #717171;
}


/*-- Top Bar --*/
#top-bar {
    background-color: #272727;
    min-width: 978px;
    padding: 3px;
}

#top-bar ul {
    max-width: 978px;
    margin: 0 auto;
}

#top-bar ul li {
    font-size: 11px;
    text-transform: uppercase;
    color: white;
    display: inline-block;
    position: relative;
    margin-right: 15px;
}

#top-bar ul li:first-child {
    margin-right: 410px;   
}

#top-bar ul li:last-child {
    text-align: right;
}

#top-bar ul li span {
    color: #ffd626;   
}


/*-- Logo --*/
#logo-wrapper {
    text-align: center;
    padding: 30px;
}


#main-wrapper {
    max-width: 978px;
    min-width: 978px;
    background-color: #f0f0f0;
    margin: 0 auto;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-left: 1px solid #b9b9b9;
    border-right: 1px solid #b9b9b9;
}


/*-- Navigation --*/
#main-navigation {
    position: relative;
    background-color: #4e0000;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    z-index: 5;
}

#main-navigation > ul {
    position: relative;
    left: 10px;
}

#main-navigation > ul > li {
    position: relative;
    margin-left: -4px;
    display: inline-block;
    transition-duration: .2s;
    padding-left: 7px;
    padding-right: 7px;
}

#main-navigation > ul > li:hover,
#main-navigation > ul > li.active-navigation {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffd626+0,ffae0d+100 */
    background: rgb(255,214,38); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,214,38,1) 0%, rgba(255,174,13,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,214,38,1) 0%,rgba(255,174,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,214,38,1) 0%,rgba(255,174,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd626', endColorstr='#ffae0d',GradientType=0 ); /* IE6-9 */
}

#main-navigation > ul > li:hover a,
#main-navigation > ul > li.active-navigation a {
    color: #4e0000;
    text-decoration: none;
}

#main-navigation > ul > li:hover ul {
    display: block;   
}

#main-navigation > ul > li > a {
    display: block;
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    color: rgba(255, 255, 255, 0.74);
    text-transform: uppercase;
    font-weight: 600;
}


#main-navigation > ul > li > ul {
    position: absolute;
    left: 0px;
    background-color: #ffae0d;
    display: none;
}

#main-navigation > ul > li > ul > li {
    position: relative;
    list-style: none;
    border-bottom: 1px solid #f2a610;
    min-width: 150px;
}

#main-navigation > ul > li > ul > li > a {
    position: relative;
    display: block;
    padding: 8px;
    font-size: 12px;
    transition-duration: .2s;
}

#main-navigation > ul > li > ul > li:hover a {
    left: 5px;
    color: white;
    font-weight: bold;
}


/*-- Main Body Sections --*/
#main-body > section {
    float: left;
}

#main-body-section {
    padding: 20px;
    width: 660px;
    min-height: 1350px;
    background-color: white;
    border-right: 1px solid #b9b9b9;
}

#main-body-section > h1 {
    position: relative;
    font-size: 24px;
    border-bottom: 1px dotted rgba(51, 51, 51, 0.2);
    padding-bottom: 10px;
    margin-bottom: 30px;
}


/*-- News Listing --*/
.news-list > li {
    display: block;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e8e8e8;
}   

.news-read-limiter {
    max-height: 145px;
    overflow: hidden;
}

.calendar-date-section,
.news-titles-and-details-section {
    float: left;
}

.news-headers .calendar-date-section {
    position: relative;
    width: 15%;
    height: 80px;
}

.calendar-rim {
    position: relative;
    top: 0px;
    width: 60%;
    left: 12%;
    height: 10px;
    background-color: #fcb562;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ce9552;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.34) inset;
    z-index: 2;
}

.calendar-page {
    position: relative;
    top: -1px;
    width: 60%;
    left: 12%;
    height: 50px;
    background-color: #ffffff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid #cfcfcf;
    z-index: 1;
}   

.calendar-page b {
    position: relative;
    top: 2px;
    text-align: center;
    font-size: 24px;
    letter-spacing: -1px;
    font-weight: 700;
    display: block;
}

.calendar-page span {
    text-align: center;
    font-size: 13px;
    letter-spacing: -1px;
    display: block;
    text-transform: uppercase;
}

.news-headers .news-titles-and-details-section {
    width: 85%;
    height: 80px;
}

.news-titles-and-details-section a:hover h2 {
    color: #dd1b19;   
}

.news-titles-and-details-section a:hover {
    text-decoration: none;    
}

.news-type {
    font-size: 10px; 
    border-radius: 3px;
    padding: 2px;
    padding-right: 5px;
    padding-left: 5px;
    display: inline-block;
    text-transform: uppercase;
}

.news-type-announcement {
    color: blueviolet;
    border: 1px solid blueviolet;
}

.news-type-event {
    color: #28ac17;
    border: 1px solid #28ac17;
}

.news-type-patch {
    color: #dd1b19;
    border: 1px solid #dd1b19;
}

.news-title {
    font-size: 20px;
}

.news-details {
    display: block;
    font-size: 12px;   
}

.news-contents p {
    margin: 8px;
    margin-top: 0px;
}

.news-list li .news-contents ul,
.news-list li .news-contents ol {
    padding-left: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.read-full-news {
    position: relative;
    left: 80%;
    width: 100px;
    margin-top: 10px;
    padding: 5px;
    border-radius: 2px;
    border: 1px solid #8c5527;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.35) inset;
    display: block;
    background-color: #9c6c45;
    color: white;
    text-shadow: 1px 1px 0px #4b331e;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.read-full-news:hover {
    text-decoration: none;
    background-color: #a7764e;   
}


#news-read-body ul,
#news-read-body ol {
    padding-left: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.news-pagination {
    text-align: center;
}

.news-pagination li {
    display: inline-block;
    margin-right: 2px;
    margin-left: 2px;
}

.news-pagination li a {
    padding: 4px;
    padding-right: 9px;
    padding-left: 9px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 250px;
    display: block;
    color: gray;
    border: 1px solid rgba(78, 0, 0, 0); 
    transition-duration: .2s;
}

.news-pagination li:hover a {
    border: 1px solid #4e0000;  
    text-decoration: none;
}

.news-pagination .news-pagination-active {

}

.news-pagination .news-pagination-active a {
    padding-right: 8px;
    padding-left: 8px;
    color: #ffffff;
    font-weight: bold;
    background-color: #4e0000;
}


/*-- News Reading --*/
#news-read-header {
    height: 90px;
    border-bottom: 1px dotted #e2e2e2;
}

#news-read-details,
#news-read-calendar {
    float: left;
}

#news-read-calendar {
    position: relative;
    width: 15%;
}

#news-read-details {
    width: 70%;
    padding-left: 2.7%;
    padding-bottom: 2.5%;
    border-left: 1px dotted #e2e2e2;
}

#news-read-details > h1 {
    line-height: 30px;
    font-size: 26px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#calendar-position {
    position: relative;
    top: 8px;
    left: 8px;
}

#news-read-body {
    padding-top: 15px;
}

#news-read-body p {
    margin-bottom: 12px;
}

#news-read-body > img {
    position: relative;
    border-radius: 5px;
    float: left;
    margin-right: 15px;
}

#sharing-section {
    margin-top: 15px;
    border-top: 1px solid #ededed;   
}

/* News Composition --*/ 
#news-compose-form  td input[type="text"] {
    width: 96.85%;
}

#news-compose-form > table tr td input[type="submit"] {
    padding: 8px;
    padding-left: 16px;
    padding-right: 16px;
}


#news-compose-form > table tr:nth-child(4) td {
    position: relative;
}

#news-compose-form > table tr:nth-child(4) td img {
    height: 150px;
    width: 260px;
}

#news-compose-form > table tr:nth-child(4) td input {
    display: block;
}


/*-- News Update --*/
#news-update-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#news-update-list tr td {
    padding: 8px;
    color: #797979;
}

#news-update-list tr:nth-child(odd) td {
    background-color: #fafafa;
    border-top: 1px solid  #ededed;
    border-bottom: 1px solid  #ededed;
}

#news-update-list tr:nth-child(1) td {
    font-weight: bold;
    background-color: #f4f4f4;
    border-top: 1px solid  #d9d9d9;
    border-bottom: 1px solid  #d9d9d9;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #4e4e4e;
}

#news-update-list tr:nth-child(1) td:first-child {
    border-left: 1px solid  #d9d9d9;
}

#news-update-list tr:nth-child(1) td:last-child {
    border-right: 1px solid  #d9d9d9;
}

#news-update-list tr td:first-child {
    border-left: 1px solid  #ededed;    
}

#news-update-list tr td:last-child {
    border-right: 1px solid  #ededed;    
}

#news-update-list tr:last-child td {
    border-bottom: 1px solid  #ededed;    
}

#news-update-list tr td:nth-child(1) {
    width: 5%;
    border-right: 1px solid  #ededed;
    text-align: center;
}

#news-update-list tr td:nth-child(2),
#news-update-list tr td:nth-child(3),
#news-update-list tr td:nth-child(4),
#news-update-list tr td:nth-child(5) {
    border-right: 1px solid  #ededed;     
}

#news-update-list tr:nth-child(1) td {
    border-right: none;
}

#news-update-list tr td:nth-child(2) {
    width: 25%;
}

#news-update-list tr td:nth-child(3) {
    width: 15%;
    text-transform: capitalize;
}

#news-update-list tr td:nth-child(5),
#news-update-list tr td:nth-child(6) {
    width: 4%;
}

#news-update-list tr td input {
    font-size: 10px;
    padding-bottom: 4px;
    padding-top: 4px;
}



/*-- Downloads Page --*/
#download-page > section {
    padding: 10px;
    border-bottom: 1px dotted #e2e2e2;
}

#download-page > section > p {
    font-size: 12px;
    margin: 10px;
}


#download-page-related ul {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 5px;
}

#download-page-related ul li {
    display: inline-block;
}

#download-page-client > section  {
    background-color: #f4f4f4;
    margin-bottom: 10px;
    margin-right: 20px;
    margin-left: 20px;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
}

#download-page-client > section > h4 {
     border-bottom: 1px dotted #191919;  
     padding-bottom: 5px;
     margin-bottom: 5px;
}

.download-link a {
    font-size: 13px;
    padding-top: 3px;
    padding-bottom: 3px;
    display: block;
}

.download-link a img {
    width: 40%;   
}

#system-requirements table {
    position: relative;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    border: 1px solid #e8e8e8;
    padding: 10px;
    border-radius: 3px;
    background-color: #fafafa;
    border-collapse: collapse;
}

#system-requirements table tr:nth-child(1) td {
    font-weight: bold;
}

#system-requirements table tr td:nth-child(1) {
    font-weight: bold;
}

#system-requirements table tr td {
    padding: 8px;
    border: 1px solid #e2e2e2;
}



/*-- Side Body Sections --*/
#side-body-section {
    width: 277px;
    min-height: 1000px;
}

.side-section {
    padding: 3%;
    margin-bottom: 5px;
    border-bottom: 1px dotted #d3d3d3;
}

.side-section > h2 {
    position: relative;
    padding-bottom: 5px;
    padding-top: 5px;
    letter-spacing:-1px;
    text-transform: uppercase;
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    border-bottom: 1px groove rgba(124, 124, 124, 0.1);
    margin-bottom: 5px;
}

.side-section h2 b {
    color: #a20000;   
}


/*-- Login Form / Panel --*/
#login-status {
    padding: 10px;
    border-radius: 3px;
    font-size: 12px;
    color: white;
}

#login-form {
    position: relative;
    margin-top: 12px;
    margin-bottom: 5px;
    font-size: 12px;
}

#login-form table {
    width: 100%;   
}

#login-form table tr td:nth-child(1) {
    width: 25%;
}

#login-form table tr td:nth-child(2) {
    width: 75%;
}

#login-form table tr td {
    padding: 3px;   
}

#login-form input[type="text"],
#login-form input[type="password"] {
    font-family: "Oswald", sans-serif;
    padding: 2%;
    width: 94%;
    font-size: 12px;
}

#login-form input[type="submit"] {
    position: relative;
    margin-top: 5px;
    font-weight: 700;
    font-size: 12px;
    padding: 8px;
    padding-left: 17px;
    padding-right: 17px;
    background-color: #ebebeb;
    color: #606060;
    box-shadow: 0 1px 0 white inset;
    cursor: pointer;
    transition-duration: .2s;
}

#login-form input[type="submit"]:hover {
    background-color: #f4f4f4;
}

#lost-password {
    padding: 10px;
    font-size: 12px;
    background-color: #ffb069;   
    border-radius: 3px;
}

/*-- Control Panel --*/
#user-info-header {
    height: 51px;
    padding: 7px;
    background-color: #efefef;
    border: 1px solid #d6d6d6;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 25px 15px rgb(250, 250, 250) inset;
}

#user-info-header > div:nth-child(1),
#user-info-header > div:nth-child(2) {
    float: left;
}

#user-info-header > div:nth-child(1) {
    width: 50px;
    height: 50px;
    border: 1px solid #9d9d9d;
    border-radius: 3px;
    overflow: hidden;
}

#user-info-header > div:nth-child(1) img {
    width: 100%;
    height: 100%;
}

#user-info-header > div:nth-child(2) {
    padding-left: 7px;
}

#user-info-header > div:nth-child(2) p {
    margin-top: 7px;
    margin-bottom: -3px;
    font-size: 12px;
    color: #797979;
}

#user-info-header > div:nth-child(2) h3 {
    font-size: 20px;
}

.control-panel-list {
    margin-top: 5px;
    border: 1px solid #dddddd;
    background-color: #f7f7f7;
    border-radius: 3px;
    margin-bottom: 5px;
    overflow: hidden;
}

.control-panel-list > li {
    border-bottom: 1px dotted #d6d6d6;
    list-style: none;
}

.control-panel-list > li:hover,
.control-panel-list .active-control-panel-menu {
    text-indent: 5px;
    background-color: #fff6d1;
}

.control-panel-list > li:last-child {
    border-bottom: none;   
}

.control-panel-list > li > a {
    display: block;
    padding: 7px;
    padding-left: 7px;
    color: #767676;
    font-size: 12px;
    transition-duration: .2s;
}

.control-panel-list > li > a:hover {
    text-decoration: none;
}

.control-panel-list > li:hover ul {
    display: block;
}

.control-panel-list > li > ul > li {
    font-size: 12px;
}

.control-panel-list > li > ul > li:first-child {
    padding-top: 0px;
}

.control-panel-list > li > ul > li:last-child {
    padding-bottom: 10px;   
}


/*-- Upcoming Events --*/
#server-events ul li {
    position: relative;
    height: 80px;
    margin-bottom: 5px;
    display: block;
    list-style: none;
    border-radius: 5px;
    overflow: hidden;
    transition-duration: .2s;
}

#server-events ul li:last-child {
    margin-bottom: 0px;   
}

#server-events ul li span {
    position: absolute;
    top: 7px;
    left: 2.5%;
    background-color: rgba(0, 0, 0, 0.20);
    width: 91%;
    border-radius: 3px;
    color: white;
    font-weight: 400;
    font-size: 12px;
    padding: 2%;
    transition-duration: .2s;
}

#server-events ul li:hover {
    height: 150px;
}

#server-events ul li:hover span {
    background-color: rgba(0, 0, 0, 0.60);   
}


/*-- Rankings --*/
#ranking-option select {
    position: relative;
    width: 100%;
    padding: 3px;
    border: 1px solid #b1b1b1;
    margin-top: 5px;
}

.ranking-table {
    position: relative;
    margin-top: 5px;
    width: 100%;
    background-color: white;
    border: 1px solid #c4c4c4;
    border-collapse: collapse;
}

.ranking-table tr:first-child td {
    font-weight: bold;
    border-bottom: 1px solid silver;
}

.ranking-table tr td {
    font-size: 12px;
    padding: 5px;
}

.ranking-table tr td:nth-child(1) {
    width: 30px;
    text-align: center;
}

.ranking-table tr td:nth-child(2) {
    font-weight: bold;   
}

.ranking-table tr td:nth-child(3) {
    width: 70px;
    text-align: center;
}

.ranking-table tr:nth-child(2) td:nth-child(2),
.ranking-table tr:nth-child(3) td:nth-child(2),
.ranking-table tr:nth-child(4) td:nth-child(2){
    color: #9c22d1;   
}

.ranking-table tr:nth-child(5) td:nth-child(2),
.ranking-table tr:nth-child(6) td:nth-child(2), 
.ranking-table tr:nth-child(7) td:nth-child(2) {
    color: #d9242b;   
}
.ranking-table tr:nth-child(8) td:nth-child(2),
.ranking-table tr:nth-child(9) td:nth-child(2), 
.ranking-table tr:nth-child(10) td:nth-child(2) {
    color: #1a9fb7;  
}

#clan-rankings {
    display: none;
}

/*-- Community Links --*/
#community-links {
    position: relative;
    margin-top: 10px;
    left: 2px;
}


#community-links li {
    display: inline-block;
    margin-right: 5px;
}

#community-links li:last-child {
    margin-right: 0px;   
}

#community-links li a {
    height: 36px;
    width: 36px;
    display: block;   
    overflow: hidden;
    opacity: .9;
    transition-duration: .2s;
}

#community-links li a:hover {
    opacity: 1;   
}

#community-links li a img {
    height: 100%;
    width: 100%;
}

/*-- Administrator Notes --*/
#welcome-note {
    font-size: 13px;    
}

#welcome-note p {
    text-align: justify;
    margin: 8px;
}

#welcome-note section {
    margin: 8px;   
}

#welcome-note section ul {
    margin-top: 5px;
    padding: 8px;
    padding-bottom: 5px;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
}

#welcome-note section ul li {
    list-style: none;
    margin-bottom: 3px;
    font-size: 12px;
}


/*-- Registration Form --*/
#registration-form table tr td:first-child {
    width: 25%;
}

#registration-form table tr td b {
    font-weight: bold;
    font-size: 16px;
    color: #ce1818;
}

#registration-form table tr td input[type="text"],
#registration-form table tr td input[type="password"],
#registration-form table tr td input[type="email"] {
    width: 95.2%;
    padding: 10px;
}


.form_tooltip {
    position: relative;
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
    font-style: italic;
    color: #888888;
}


/*-- Item Mall --*/
.shop-sorting {
    position: relative;
    padding: 10px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    background-color: rgba(245, 245, 245, 0.4);
    border: 1px solid rgba(226, 226, 226, 0.6);
    border-radius: 2px;
}

.shop-sorting .hide-toggle {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 20px;
}

.shop-sorting .hide-toggle img {
    height: 100%;
}

.shop-sorting ul {
    margin-top: 10px;
    margin-bottom: 10px;
}

.shop-sorting ul li {
    display: inline-block;
    margin-bottom: 5px;
}

.shop-sorting ul li a {
    font-size: 12px;
    display: inline-block;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 25px;
    background-color: rgba(222, 222, 222, 0.15);
    border: 1px solid rgba(196, 196, 196, 0.06);
    color: #3e3e3e;
}

.shop-sorting ul .shop-sorting-active a,
.shop-sorting ul li:hover a {
    color: #ffd626;
    text-decoration: none;
    background-color: #4e0000;
}

.shop-sorting ul .strikeout {
    display: none;
}


/*-= Shop Listing =-*/
#shop-listing {
    position: relative;
    margin-top: 20px;   
}

#shop-listing-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
    display: none;
}

#shop-listing-table p { 
    text-align: left;
}

#shop-listing-table p b.information-highlight  {
    color: #29e7f7;
}

#shop-listing-table tr td {
    padding: 8px;
    font-size: 11px;
    transition-duration: .2s;
}

#shop-listing-table tr:nth-child(even) td {
    background-color: #f5f5f5;
}

#shop-listing-table tr:nth-child(odd) td {
    background-color: #fcfcfc;
}

#shop-listing-table tr td:nth-child(1) {
    position: relative;
    border-left: 1px solid #e6e6e6;   
    width: 20px;
}

.shop-listing-slot {
    position: absolute;
    top: 11px;
    left: 11px;
}

#shop-listing-table tr td:nth-child(4) {
    position: relative;
    text-align: center;
    width: 95px;
}

#shop-listing-table tr td:nth-child(5) {
    text-align: center;
    width: 10px;
}

#shop-listing-table tr td:nth-child(6), 
#shop-listing-table tr td:nth-child(7) {
    text-align: center;
    width: 10px;
}

#shop-listing-table tr td:last-child {
    border-right: 1px solid #e6e6e6;   
    width: 30px;
}

#shop-listing-table tr td {
    border-top: 1px solid #e6e6e6;   
    border-bottom: 1px solid #e6e6e6;
}

#shop-listing-table tr:nth-child(1) td {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: white;
    border: none;
}

#shop-listing-table tr td select {
    font-size: 12px;
    padding: 4px;
    width: 115px;
}

#shop-listing-table tr td input[type="submit"] {
    font-size: 10px;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

#shop-listing-table tr td input[type="number"] {
    font-size: 11px;
    padding: 3px;
    width: 29px;
}

#shop-listing-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.3);
}

.shop-information-toggler {
    cursor: pointer;
}

#shop-listing-table tr td:nth-child(4) img {
    opacity: .6;
}

#shop-listing-table tr td:nth-child(4) img:hover {
    opacity: 1;   
}

#shop-listing-table tr td:nth-child(4) img:hover + .shop-information-body {
    display: block;
}

.shop-information-body {
    position: absolute;
    top: 50px;
    left: -100px;
    padding: 10px;
    width: 300px;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgb(49, 49, 49);
    box-shadow: 0 0 12px #a8a8a8;
    border-radius: 5px;
    font-size: 12px;
    color: white;
    z-index: 1;
    display: none;
}

.shop-information-body > p {
    margin-bottom: 3px;
}

#shop-listing-terms {
    position: absolute;
    top: 0px;
    left: 2%;
    width: 90%;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 2px;
    box-shadow:  0 0 50px rgba(160, 160, 160, 0.37);
    border: 1px solid #ebebeb;
    z-index: 10;
}

#shop-listing-terms hr {
    height: 1px;
    border: none;
    background-color: #d8d8d8;
    margin-bottom: 10px;
}

#shop-listing-terms p:nth-child(3) {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    font-family: "Oswald", sans-serif;
}

#shop-listing-terms ol {
    padding: 0;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#shop-listing-terms p:nth-child(6) {
    position: relative;
    left: 150px;
    display: inline;
}

#shop-listing-terms p:nth-child(6) button {
    padding: 6px;   
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
}


/*-- Shop Listing Edit --*/
#shop-listing-edit tr td:first-child {
    position: relative;
    width: 20px;
}

#shop-listing-edit tr td:first-child .shop-listing-slot {
    top: 11px;
    left: 11px;
}

#shop-listing-edit tr td input {
    padding: 3px;   
    padding-left: 6px;   
    padding-right: 6px;
    font-size: 10px;
}

#shop-listing-edit tr td:nth-child(2) {
    width: 50px;   
}


#shop-listing-edit tr td:nth-child(4),
#shop-listing-edit tr td:nth-child(5),
#shop-listing-edit tr td:nth-child(6) {
    text-align: center;
    width: 70px;
}

#shop-listing-edit tr td:nth-child(7),
#shop-listing-edit tr td:last-child {
    width: 10px;
}

/*-- Storage --*/
#storage {
    position: relative;
}

#storage-hex-cast {
    position: absolute;
    top: 100px;
    left: 21%;
    width: 50%;
    padding: 20px;
    padding-bottom: 5px;
    padding-top: 15px;
    background-color: white;
    border: 1px solid #cccccc;
    box-shadow: 0 0 15px #b5b5b5;
    z-index: 10;
    display: none;
}

#storage-hex-cast p {
    text-align: center;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 10px;
}

#storage-hex-cast input {
    font-size: 16px;
    padding: 10px;
    width: 91%;
    text-align: center;
}

#storage-hex-cast p button {
    margin-top: 10px;   
    font-size: 10px;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
}

#storage-ears {
    position: relative;
    z-index: 2;
}

#storage-ears ul li {
    display: inline-block;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #f0f0f0;
    border: 1px solid #6d6d6d;
    border-bottom: none;
    padding: 12px;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    opacity: .18;
    transition-duration: .2s;
}   

#storage-ears ul li:hover,
#storage-ears ul li.storage-ears-active {
    background-color: #f5f5f5;  
    border: 1px solid #d0d0d0;
    border-bottom: none;
    opacity: 1;
}

.storage-listing {
    position: absolute;
    width: auto;
    border-collapse: collapse;
}

.storage-listing-active {
    z-index: 1;
}

.storage-listing tr td {
    position: relative;
    height: 73px;
    width: 75px;
    padding: 3px;
    text-align: center;
    background-color: #f8f8f8;  
    border: 1px solid #d8d8d8;
}

.storage-listing tr td:hover {
    background-color: #ededed;   
}

.storage-listing tr td img {
    position: absolute;
    top: 19px;
    left: 20px;
    height: 40px;
    width: 40px;
    opacity: .05;
}

.storage-listing tr td button,
.storage-listing tr td input[type="submit"]{
    position: relative;
    margin-bottom: 5px;
    font-size: 10px;
    padding: 3px;
}

.storage-listing tr .storage-lising-vacant {
    background-color: white;   
}


/*-= New Item Mall Entry =-*/
#new-mall-entry-form table td input[type="text"] {
    width: 96.7%;
}

#new-mall-entry-form table td input[type="number"] {
    width: 40%;
}

#new-item-mall-description-note {
    margin-bottom: 25px;
    font-style: italic;
    font-size: 13px;
}


/*-= Vote Links =-*/
#vote-links li {
    display: inline-block;
    margin-right: 8px;
    height: 240px;
    transition-duration: .2s;
}

#vote-links li:nth-child(3n+0) {
    margin-right: 0px;
    margin: 0;
}

#vote-links li a {
    position: relative;
    display: block;
    width: 180px;
    z-index: 2;
}

#vote-links li img {
    width: 100%;
    height: 100%;
}

.vote-details {
    position: relative;
    top: -5px;
    width: 179px;
    border: 1px solid #e2e2e2;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    overflow: hidden;
    z-index: 1;
}

.vote-details p {
    padding: 5px;
    transition-duration: .3s;
}

#vote-links li:hover p {
    background-color: #f7f7f7;
}

.vote-details p:nth-child(1) {
    font-size: 12px;   
    font-family: "Oswald", sans-serif;
    border-bottom: 1px solid #d9d9d9;
    padding-top: 10px;
    padding-bottom: 10px;
}

.vote-details p span { 
    display: inline-block;
}

.vote-details p:nth-child(1) span:nth-child(1) {
    width: 45%;
}

.vote-details p:nth-child(1) span:nth-child(2) {
    width: 50%;
    text-align: right;
}

.vote-details p:nth-child(2) {
    padding: 5px;
    font-size: 12px;   
    background-color: #f8f8f8;
}

.vote-details p:nth-child(2) span:nth-child(2){
    font-style: italic;
    text-align: center;
}

.vote-link-inactive a,
.vote-link-inactive div p:nth-child(1) {
   opacity: .4;
    cursor: not-allowed;
}

#vote-links .vote-link-inactive:hover {
    box-shadow: none;   
}

#vote-information p {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #5a5a5a;
    font-weight: 300;
    border-bottom: 1px dashed #c6c6c6;
    padding-bottom: 18px;
    margin-bottom: 20px;
}


/*-- My Characters --*/
#character-listing tr td:nth-child(1) {
    width: 200px;
}


/*-- Change Password --*/
#change-password-form input[type="password"] {
    width: 96%;
}

/*-- Donation Methods and Guides --*/
.donation-method {
    margin-bottom: 20px;
    border-bottom: 1px dashed #e2e2e2;
}

.donation-method > ol > li {
    line-height: 20px;
    margin-bottom: 10px;
}

.donation-method > ol > li > ol > li {
    list-style: lower-alpha;
}

/*-- Footer --*/
footer {
    width: 980px;
    color: #bcbcbc;
    font-size: 12px;
    margin: 0 auto;
    background-color: #340000;   
    color: rgba(255, 255, 255, 0.72);
}

#footer-section > section {
    float: left;
    padding: 1.6%;
    width: 30%;
    min-height: 100px;
}   

#footer-section > section > h2 {
    text-transform: uppercase;
    color: #ffd626;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #ffd626;
    margin-bottom: 10px;
}

/*-- Footer SiteMap --*/
#footer-sitemap ul {
    margin-left: 10px;
}

#footer-sitemap ul li {
    list-style: none;
}

#footer-sitemap ul li a {
    color: rgba(255, 255, 255, 0.72);
}

#footer-sitemap > ul > li {
    width: 50%;
    display: table-cell;
}

#footer-sitemap > ul > li a:hover {
    color: #ff5f47;
}

#footer-sitemap > ul > li > ul > li > ul {
    margin: 5px;
}

/*-- Footer Donation Methods --*/
#donation-methods ul li {
    position: relative;
    height: 43px;
    width: 67px;
    margin: 2px;
    display: inline-block;
    transition-duration: .2s;
}

#donation-methods ul li:hover {
    opacity: .8;   
}

#donation-methods ul li img {
    width: 100%;
    height: 100%;
}


#copyright {
    border-top: 1px dashed rgba(255, 255, 255, 0.19);
    padding: 15px;
    text-align: center;
}