/* CSS Document */
@font-face {
  font-family: 'Old English Text MT';
  src: url('../fonts/oldengl.woff2') format('woff2'),
       url('../fonts/oldengl.woff') format('woff'),
       url('../fonts/oldengl.ttf') format('truetype');
}

@media (max-width: 480px) {
  body, div {
    margin: 0;
    padding: 0;
  }
    
   .pagetitle {
    visibility: hidden;
    height: 50px;
    display: block;
  }
  
  a.motd {
    font-size: 14px;  /* Größer für Mobile */
  }
  
  .nav-container {
    width: 100%;
    justify-content: center !important;
  }
  
  .table_footer {
    display: none !important;
  }
  
  .table_td_main_right {
    display: none !important;
  }

   .nav-desktop {
    display: none !important;
  }

  .nav-mobile {
    display: block !important;
    width: 100%;
  }
  
   .table_nav, .table_nav_head, .table_nav_body, .table_nav_footer , .table_td_main_left{
    width: 300px !important;
    display: block !important;
  }
  
  .table_td_nav_head_2, .table_td_nav_head_5, .table_td_nav_head_8{
  width: 256px !important;
  }

  .table_td_nav_body_3 {
    width: 264px !important;
    text-align: center !important;
  }
  
  .table_td_nav_footer_2{
    width: 264px !important;
  }
  
  a.nav {
    width: 261px !important; /* 161px + 100px = 261px */
    font-size: 14px !important; /* Größere Schrift für bessere Lesbarkeit */
    padding: 8px 0px !important; /* Mehr Platz oben & unten für Touch */
    display: block; /* Falls sie untereinander stehen sollen */
    text-align: center; /* Falls der Text zentriert sein soll */
  }
  
  .navhead {
	width: 261px !important;
    font-size: 14px !important; /* Größere Schrift für bessere Lesbarkeit */
    padding: 8px 0px !important;  Mehr Platz oben & unten für Touch */
	text-align: center;
  }
  marquee {
    width: 90% !important; /* Macht das Marquee-Element breiter auf Mobile */
  }
  
  .title-image {
    width: 90% !important;
    height: auto;
  }
}

.nav-desktop {
  display: contents;
}

.nav-mobile {
  display: none;
}

.nav-container {
  display: flex;
  justify-content: left; /* Links zentrieren */
  gap: 10px; /* Abstand zwischen den Links */
  width: auto; /* Standard für Desktop */
}

td {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
}

div {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
}

table.nav {
        background-color: #330000;
        border: 1px solid #000000;
        height: auto;
        width: 135px;
}

.navhead {
        text-decoration: none;
        width: 137px;
        height: auto;
        padding: 1px;
        line-height: 18px;
        float: left;
        clear: none;
        background-color: #352D20;
        font-weight: bold;
        color: #ff724a;
        cursor: default;
        text-align: center;
}

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

a.nav {
        text-decoration: none;
        width: 135px;
        height: auto;
        padding: 1px;
        float: left;
        clear: none;
        background-color: #000033;
        border: 1px solid #000033;
}

.navhelp {
        text-decoration: none;
        width: 135px;
        height: auto;
        padding: 1px;
        float: left;
        clear: none;
        background-color: #000033;
        border: 1px solid #000033;
}

a:hover.nav {
        background-color: #663300;
        border-top: 1px solid #0364A3;
        border-left: 1px solid #0364A3;
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
}
a.navhilite {
        text-decoration: none;
        width: 135px;
        height: auto;
        padding: 1px;
        float: right;
        clear: none;
        color:#FFFF00;
        background-color: #330000;
        border-top: thin solid #330000;
        border-bottom: thin solid #330000;
        border-right: thin none #330000;
        border-left: thin none #330000;
}
a:hover.navhilite {
        background-color: #990000;
        border-top: thin outset #CC0000;
        border-right: thin none #CC0000;
        border-bottom: thin outset #CC0000;
        border-left: thin none #CC0000;
}

.charstat-disabled-link {
    cursor: help;
    opacity: 0.6;
}

.charstat-link {
    cursor: pointer;
}


table {
}
.charinfo{
	border: none;
	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #800000;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	cursor: default;
	width: 220px;
}
.charhead{
        background-color: #352D20;
        border: none;
        cursor: default;
        color: #ff724a;
        text-align: center;
}
td.popupheader {
        background-color: #333399;
        background-image: url(../images/headbkg.GIF);
        height: 20px;
}
td.noborder {
        border: none;
}
table.noborder {
        border: none;
}
input {
        background-color: #352D20;
        border: 1px solid #806B4D;
        color: #CCCCCC;
}
.button {
font-family: verdana,arial,helvetica,sans-serif;  
     font-size: 12px;  
     color: #F8DB83;  
     background-color: #6b563f;  
     border-top: 1px solid #947356;  
     border-left: 1px solid #947356;  
     border-right: 1px solid #403225;  
     border-bottom: 1px solid #403225;
}
.input {
        background-color: #003800;
        border: 3px solid #806B4D;
        color: #CCCCCC;
}
select {
        background-color: #433828;
        border: 1px solid #806B4D;
        color: #CCCCCC;
}
table.vitalinfo {
        background-color: #000033;
        border: 1px solid #000000;
        width: 218px;
}
a.motd {
        text-decoration: none;
        color:#FFFFFF;
}
a:hover.motd {
        font-weight: bold;
}

a.hotmotd {
        font-weight: bold;
}
.pagetitle {
        font-family: "Old English Text MT", "Times New Roman";
        font-size: 20px;
        color: #CCCCCC;
}
.navhi {
        color: #FF0000;
        text-decoration: underline;
}
.colDkBlue    { color: #0000B0; }
.colDkGreen   { color: #00B000; }
.colDkCyan    { color: #00B0B0; }
.colDkRed     { color: #B00000; }
.colDkMagenta { color: #B000CC; }
.colDkYellow  { color: #B0B000; }
.colDkWhite   { color: #B0B0B0; }
.colLtBlue    { color: #0000FF; }
.colLtGreen   { color: #00FF00; }
.colLtCyan    { color: #00FFFF; }
.colLtRed     { color: #FF0000; }
.colLtMagenta { color: #FF00FF; }
.colLtYellow  { color: #FFFF00; }
.colLtWhite   { color: #FFFFFF; }
.colLtBlack   { color: #999999; }
.colOrange  { color: #FF9900; }
.colDkOrange  { color: #FF6600; }
.colBlue  { color: #0070FF; }
.colLime  { color: #DDFFBB; }
.colBlack  { color: #000000; }
.colRose { color: #EEBBEE; }
.colblueviolet { color: #9A5BEE; }
.coliceviolet{ color: #AABBEE; }
.colLtBrown { color: #F8DB83; }
.colDkBrown { color: #6b563f; }
.colXLtGreen{color: #aaff99; }
.colAttention { background-color: #00FF00; color: #FF0000;}
.colWhiteBlack { background-color: #FFFFFF; color: #000000; }
.colBack  { background-color:#00FFFF; color:#000000; }
.trhead  { background-color:#990000; color:#FFFFFF; }
.trlight { background-color:#330000; }
.trdark  { background-color:#000000; }

div.table_head {
	border-spacing: 0px;
	width: 100%;
    height: 100%;
	display: table;
    border: 2px;
}

div.table_tr {
	display: table-row;
}

div.table_td {
	display: table-cell;
}

div.table_td_head {
	display: table-cell; 
    background-color: #000000;
	background-image: url('../images/headbkg.png');
	background-repeat: repeat-x;
	background-position: top;
	height: 60px;
	vertical-align: top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
}

div.table_main {
	width: 100%;
    height: 100%;
	display: table;
}

div.table_td_main_left {
	display: table-cell;
	width: 145px;
	vertical-align: top;
    background-color: #433828;
}

div.table_td_main {
	display: table-cell;
	width: 100%;
	vertical-align: top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
    background-color: #352D20;
}

div.table_td_main_right {
	display: table-cell;
	width: 220px;
	vertical-align: top;
    background-color: #352D20;
}

div.table_nav {width: 142px;display: table;}
div.table_td_nav_head {display: table-cell;background-image: url('../images/nav_top.png');height: 11px;width: 142px;vertical-align: top;}
div.table_td_nav{display: table-cell;width: 142px;vertical-align: top;}
div.table_td_nav_footer {display: table-cell;background-image: url('../images/nav_bottom.png');height: 11px;width: 142px;vertical-align: top;}

div.table_info {width: 220px;display: table;}
div.table_td_info_head {display: table-cell;background-image: url('../images/info_top.png');height: 15px;width: 200px;vertical-align: top;}
div.table_td_info {display: table-cell;background-color: #000033;width: 200px;vertical-align: top;text-align: left;}
div.table_td_info_2 {display: table-cell;background-color: #000033;width: 200px;vertical-align: top;text-align: center;}
div.table_td_info_footer {display: table-cell;background-image: url('../images/info_bottom.png');height: 15px;width: 200px;vertical-align: top;}

div.table_middle {width: 95%;display: table;margin: 0 auto;}
div.table_middle_head {width: 100%;display: table;}
div.table_td_middle_head_1 {display: table-cell;background-image: url('../images/trans.gif');height: 0px;width: 54px;vertical-align: top;}
div.table_td_middle_head_2 {display: table-cell;background-image: url('../images/trans.gif');height: 0px;vertical-align: top;}
div.table_td_middle_head_3 {display: table-cell;background-image: url('../images/trans.gif');height: 0px;width: 54px;vertical-align: top;}
div.table_td_middle_head_4 {display: table-cell;background-image: url('../images/corner_l.png');height: 30px;width: 54px;vertical-align: top;}
div.table_td_middle_head_5 {display: table-cell;background-image: url('../images/ranke_wo.png');height: 20px;vertical-align: top;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;}
div.table_td_middle_head_6 {display: table-cell;background-image: url('../images/corner_r.png');height: 30px;width: 54px;vertical-align: top;}
div.table_td_middle_head_7 {display: table-cell;background-image: url('../images/trans.gif');height: 0px;width: 54px;vertical-align: top;}
div.table_td_middle_head_8 {display: table-cell;background-image: url('../images/trans.gif');height: 0px;vertical-align: top;}
div.table_td_middle_head_9 {display: table-cell;background-image: url('../images/trans.gif');height: 0px;width: 54px;vertical-align: top;}
div.table_middle_body {width: 100%;display: table;}
div.table_td_middle_body_1 {display: table-cell;background-image: url('../images/ranke_ns.png');width: 20px;vertical-align: top;}
div.table_td_middle_body_2 {display: table-cell;background-image: url('../images/trans.gif');vertical-align: top;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10pt;}
div.table_td_middle_body_3 {display: table-cell;background-image: url('../images/ranke_ns.png');width: 20px;vertical-align: top;}
div.table_middle_footer {width: 100%;display: table;}
div.table_td_middle_footer_1 {display: table-cell;background-image: url('../images/corner_l.png');height: 30px;width: 54px;vertical-align: top;}
div.table_td_middle_footer_2 {display: table-cell;background-image: url('../images/ranke_wo.png');height: 30px;vertical-align: top;}
div.table_td_middle_footer_3 {display: table-cell;background-image: url('../images/corner_r.png');height: 30px;width: 54px;vertical-align: top;}
div.table_middle_break {width: 100%;display: table;}
div.table_td_middle_break_1 {display: table-cell;background-image: url('../images/corner_l.png');height: 30px;width: 54px;vertical-align: top;}
div.table_td_middle_break_2 {display: table-cell;background-image: url('../images/ranke_wo.png');height: 30px;vertical-align: top;}
div.table_td_middle_break_3 {display: table-cell;background-image: url('../images/corner_r.png');height: 30px;width: 54px;vertical-align: top;}

.title-image {
    position: absolute;
    top: 20;
    right: 0;
    width: 394px;
    height: 55px;
    background-image: url('../images/title.png');
    background-size: contain;
    background-repeat: no-repeat;
}

div.table_footer{
	border: none;
	border-spacing: 0px;
	width: 100%;
	display: table;
	height: 38px;
}
div.table_td_footer{
	border: none;
	background-image: url('../images/rule.png');
	background-repeat: repeat-x;
	background-position: top;
	height: 38px;
	display: table-cell;
}

div.table_td_footer_left{
	border: none;
	vertical-align: bottom;
	display: table-cell;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	height: 38px;
}
div.table_td_footer_right{
	border: none;
	vertical-align: bottom;
	display: table-cell;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	height: 38px;
}

div.table_login{
	border: none;
	border-spacing: 0px;
	width: 244px;
	display: table;
	height: 300px;
    background-position: top;
    background-image: url('../images/logindragon.png');
}
div.table_td_login{
	border: none;
    text-align: center;
    vertical-align: top;
	display: table-cell;
}