@charset "utf-8";
/* CSS Document */

body
{
	background: #a7a597 url('images/background.jpg') no-repeat top left;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #373737;
}

#page
{
	width: 780px;
	margin: auto;
}

#header
{
	width: 780px;
	height: 245px;
	background: url('images/logo.png') no-repeat;
	float: left;
}

#tabs
{
	width: 99%;
	height: 32px;
	background: url('images/tabs-bg.png') no-repeat;
	padding-left: 200px;
	position: relative;
	display: inline-flex;
	right: 0;
}

	#tabs .tab
	{
		width: 112px;
		height: 20px;
		background: url('images/tab.png') no-repeat;
		float: left;
		text-align: center;
		color: #E2E2E2;
		font-weight: bold;
		padding-top: 12px;
		cursor: pointer;
	}

	#tabs .tab:hover
	{
		text-decoration: underline;
	}

	#tabs .tab-active
	{
		width: 113px;
		height: 22px;
		background: url('images/tab-active.png') no-repeat;
		float: left;
		text-align: center;
		color: #FFFFFF;
		font-weight: bold;
		padding-top: 10px;
		cursor: pointer;
	}

#mainsubmenu
{
	width: 760px;
	height: 42px;
	background: url('images/submenu.png') no-repeat;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}

	#mainsubmenu a
	{
		display: block;
		float: left;
		padding: 5px;
		color: #FFFFFF;
		font-weight: bold;
		margin-top: 7px;
		text-decoration: none;
	}

	#mainsubmenu a:hover
	{
		text-decoration: underline;
	}

	#mainsubmenu .separator
	{
		width: 2px;
		height: 32px;
		display: block;
		float: left;
		background: url('images/separator.png') no-repeat;
	}

#content
{
	width: 780px;
	background: url('images/site-bg.png') repeat-y;
	float: left;
}

	#margins
	{
		width: 760px;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 5px;
		margin-bot: 5px;
		text-align: justify;
	}

#content-bot
{
	width: 780px;
	height: 28px;
	background: url('images/site-bot.png') no-repeat;
	float: left;
}

#copyrights
{
	width: 740px;
	padding: 10px;
	float: left;
	text-align: center;
}

#news-submenu,
#account-submenu,
#community-submenu,
#library-submenu,
#shops-submenu
{
	display: none;
}

a
{
	color: #990000;
	text-decoration: none;
	font-weight: bold;
}

a:hover
{
	color: #FF0000;
}

.white, .whites
{
	color: #FFFFFF;
}










/** -------------------------------
 *  Stylesheet declarations for the
 *  NEW TABLES
 *  -------------------------------
 */

.TableContainer {
  border: 1px solid #d0cdb4;
  position: relative;
  width: 100%;
  font-size: 10px;
}
.TableContainer .Odd {
  background-color: #e5e3d7;
}
.TableContainer .Even {
  background-color: #d0cdb4;
}

/* TABLEHEADER DECORATION */
.TableContainer .CaptionContainer {
  position: relative;
  font-size: 10pt;
  background-color: #afab89 !important;
  height: 100%;
  width: 100%;
  text-align: left;
}
.TableContainer .CaptionContainer .CaptionInnerContainer {
	position: relative;
  background-color: #afab89;
  width: 100%;
  height: 100%;
  padding-top: 3px;
  padding-bottom: 4px;
}
.TableContainer .CaptionContainer .Text {
	font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: white;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftTop {
	position: absolute;
  width: 5px;
  height: 5px;
	top: -2px;
  left: -2px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeRightTop {
	position: absolute;
  width: 5px;
  height: 5px;
	top: -2px;
  right: -2px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
	position: absolute;
  width: 5px;
  height: 5px;
	left: -2px;
	bottom: -3px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeRightBottom {
	position: absolute;
  width: 5px;
  height: 5px;
	right: -2px;
	bottom: -3px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionBorderTop {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  top: -1px;
}
.TableContainer .CaptionContainer .CaptionBorderBottom {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  bottom: -2px;
}
.TableContainer .CaptionContainer .CaptionVerticalLeft {
  position: absolute;
  height: 100%;
  width: 3px;
  left: -1px;
  top: 0px;
}
.TableContainer .CaptionContainer .CaptionVerticalRight {
  position: absolute;
  height: 100%;
  width: 3px;
  right: -1px;
  top: 0px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightTop {
  right: -3px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
  bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightBottom {
  right: -3px;
  bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionBorderBottom {
  bottom: -3;
}
* html .TableContainer .CaptionContainer .CaptionVerticalRight {
  right: -2px;
}
/* TABLE CONTENT */
.TableContentContainer {
  border: 1px solid #afab89;
  position: relative;
  margin-right: 4px;
  height: 100%;
  background-color: #d0cdb4;
  padding: 0px;
}
.TableContent {
  width: 100%;
  border-collapse: collapse;
}
.TableContent td {
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}
/* INNERLYOUT 1 */
.TableContainer .Table1 {
  width: 100%;
  background-color: #d0cdb4;
  border: 2px solid #afab89;
}
.TableContainer .Table1 .InnerTableContainer {
  padding: 5px;
}
/* INNERLYOUT 2 */
.TableContainer .Table2 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
  padding: 0px;
  margin: 0px;
  border-collapse: collapse;
}
.TableContainer .Table2 td {
  padding: 0px;
  margin: 0px;
}
.TableContainer .Table2 .InnerTableContainer {
  margin-top: 1px;
}
.TableContainer .Table2 .InnerTableContainer table {
  border-collapse: collapse;
}
.TableContainer .Table2 .InnerTableContainer td {
  padding-top: 2px;
  padding-left: 5px;
  padding-bottom: 2px;
  padding-right: 5px;
  border: 1px solid #e5e3d7;
}
/* INNERLYOUT 3 */
.TableContainer .Table3 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
}
.TableContainer .Table3 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table3 .TableContentAndRightShadow td {
  border: 1px solid #e5e3d7;
}
/* INNERLYOUT 4 */
.TableContainer .Table4 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
}
.TableContainer .Table4 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 3px;
}
.TableContainer .Table4 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* INNERLYOUT 5 */
.TableContainer .Table5 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
}
.TableContainer .Table5 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table5 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* SHADOWS */
.TableShadowContainerRightTop {
  position: relative;
  top: 0px;
  right: 3px;
  margin-right: 0px;
  font-size: 10px;
  float: right;
  z-index: 99;
}
.TableShadowRightTop {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 4px;
  height: 5px;
  z-index: 99;
}
.TableContentAndRightShadow {
  position: relative;
  background-repeat: repeat-y;
  background-position: top right;
  margin-right: 3px;
  font-size: 10px;
}
.TableShadowContainer {
  position: relative;
  widht: 100%;
  margin-right: 5px;
}
.TableBottomShadow {
  position: relative;
  font-size: 10px;
  height: 5px;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.TableBottomLeftShadow {
  position: relative;
  height: 5px;
  width: 4px;
  float: left;
  padding: 0px;
  margin: 0px;
}
.TableBottomRightShadow {
  position: relative;
  float: right;
  right: -2px;
  top: 0px;
  height: 5px;
  width: 4px;
}
/* LABELS */
.LabelV {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
}
.LabelV120 {
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
	width: 120px;
}
.LabelV150 {
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
	width: 150px;
}
.LabelV200 {
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
	width: 200px;
}
.LabelH {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  background-color: #afab89;

}
.LabelH td {
  background-color: #afab89;
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}

/* BUTTONS */
.InnerTableButtonRow {
  width: 100%;
  padding-left: 1px;
  padding-right: 0px;
  padding-bottom: 4px;
  border: 0px;
}
.InnerTableButtonRow td {
  padding-right: 4px;
}
.BigButton {
  position: relative;
  width: 135px;
  height: 25px;
  z-index: 10;
}
.BigButtonOver {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 137px;
  height: 25px;
  visibility: hidden;
  z-index: 15;
}
.ButtonText {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 135px;
  z-index: 20;
}
.TopButtonContainer {
  position: relative;
  right: 4px;
  top: 4px;
  z-index: 60;
}
* html .TopButtonContainer {
  right: 27px;
}
.TopButtonContainer .TopButton {
  position: absolute;
  right: 0px;
  z-index: 55;
}
.Content .BoxContent .Odd {
  background-color: #d0cdb4;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #e5e3d7;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}
.Content .BoxContent .Odd {
  background-color: #d0cdb4;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #e5e3d7;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}
.Content .BoxContent .Odd {
  background-color: #d0cdb4;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #e5e3d7;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

/* News Ticker */

.Content #NewsTicker .BoxContent {
  padding: 5px;
  min-height: 90px;
  height: auto !important;
  height: 100px;
}

.Content #NewsTicker .BoxContent .Row {
  position: relative;
  width: 100%;
}

.Content #NewsTicker .NewsTickerIcon {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

.Content #NewsTicker .NewsTickerText {
  font-size: 9pt;
  position: relative;
  margin-left: 20px;
}

.Content #NewsTicker .NewsTickerDate {
  font-size: 7pt;
  position: absolute;
  top: 0px;
  float: left;
}

.Content #NewsTicker .NewsTickerShortText {
  margin-left: 85px;
  height: 14px;
}

.Content #NewsTicker .NewsTickerFullText {
  margin-left: 85px;
  margin-right: 20px;
  display: none;
}

.Content #NewsTicker .NewsTickerExtend {
  position: relative;
  right: 0px;
  top: 1px;
  right: 1px;
  height: 12px;
  width: 12px;
  background-repeat: no-repeat;
  float: right;
  cursor: pointer;
  z-index: 10;
}

/* Featured Article */

.Content #FeaturedArticle .BoxContent {
  position:relative;
  height: 100px;
  padding: 5px;
  padding-left: 10px;
  min-height: 100px;
  height: auto !important;
  height: 110px;
  line-height: 10.5pt;
}

.Content #FeaturedArticle #TeaserThumbnail {
  position: relative;
  top: 0px;
  right: 0px;
  height: 100px;
  width: 150px;
  margin-left: 10px;
  background-color: black;
  z-index: 90;
  float: right;
}

#ContentHelper #FeaturedArticle:first-child .BoxContent {
  padding: 10px;
}

.Content #FeaturedArticle #TeaserText {
  height: 100px;
  overflow: hidden;
  z-index: 0;
}

.Content #FeaturedArticle #Link {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 89 165 0 0;
  z-index: 99;
}

.Content #FeaturedArticle .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

.Content #FeaturedArticle .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  float:left;
}

.Content #FeaturedArticle .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #FeaturedArticle .NewsHeadlineText {
  position: relative;
  top: 8px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News */

.Content #News .BoxContent {
  min-height: 100px;
  height: auto !important;
  height: 110px;
}

.Content #News .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

.Content #News .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

.Content #News .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 10px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #News .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

.Content #News .NewsHeadlineAuthor {
  position: absolute;
  top: 7px;
  right: 10px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News Archive */

.Content #NewsArchive .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

.Content #NewsArchive .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

.Content #NewsArchive .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #NewsArchive .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/** --------------------------------------
 *  ### not final versions for tests
 *  ### concerning the new payment process
 *  --------------------------------------
 */

/* new error handling concept tests */

.FormFieldError {
  font-size: 8pt;
  color: red;
}
.SmallBox {
  position: relative;
  font-size: 1px;
}
.SmallBox .ErrorMessage {
  font-size: 8pt;
  position: relative;
  color: red;
  height: 100%;
  background-color: #d0cdb4;
  padding: 5px;
  padding-left: 43px;
}
.SmallBox .Message {
  font-size: 10pt;
  position: relative;
  height: 100%;
  background-color: #d0cdb4;
  padding: 10px;
}
.SmallBox .ErrorMessage ul {
  padding-left: 15px;
}
.SmallBox .BoxFrameHorizontal {
  position: relative;
  height: 4px;
}
.SmallBox .BoxFrameVerticalRight {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}
.SmallBox .BoxFrameVerticalLeft {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}
.SmallBox .MessageContainer {
  position: relative;
  height: 100%;
}
.SmallBox .BoxFrameEdgeLeftTop {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeLeftBottom {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeRightTop {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeRightBottom {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .AttentionSign {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 30px;
  height: 26px;
}

/* =========================================================
   VALTHERA ONLINE - MODERN WEBSITE OVERRIDE
   ========================================================= */

html { background: #05070d; }

body {
    background:
        radial-gradient(circle at 50% 0%, rgba(25,90,180,.22), transparent 42%),
        radial-gradient(circle at 100% 45%, rgba(150,20,35,.16), transparent 38%),
        linear-gradient(180deg,#03050a 0%,#080b13 48%,#020307 100%);
    color:#d7dce7;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;
    min-width:320px;
}

#page {
    width:min(1180px,96%);
    margin:22px auto 40px;
}

#header {
    width:100%;
    height:360px;
    float:none;
    background:
        linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.55)),
        url('images/logo.png') center center / cover no-repeat;
    border:1px solid rgba(120,170,255,.35);
    border-bottom:2px solid rgba(180,35,55,.7);
    border-radius:14px 14px 0 0;
    box-shadow:0 0 35px rgba(0,100,255,.16),0 12px 45px rgba(0,0,0,.65);
    overflow:hidden;
}

#tabs {
    width:100%;
    min-height:54px;
    height:auto;
    padding:0;
    right:auto;
    float:none;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:4px;
    box-sizing:border-box;
    background:linear-gradient(180deg,rgba(19,28,48,.98),rgba(7,10,18,.98));
    border-left:1px solid rgba(80,130,220,.25);
    border-right:1px solid rgba(80,130,220,.25);
    border-bottom:1px solid rgba(180,35,55,.35);
    box-shadow:0 8px 25px rgba(0,0,0,.45);
}

#tabs .tab,
#tabs .tab-active {
    width:auto;
    min-width:105px;
    height:auto;
    padding:18px 20px 16px;
    float:none;
    box-sizing:border-box;
    background:transparent;
    color:#cbd5e8;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.6px;
    cursor:pointer;
    transition:all .18s ease;
}

#tabs .tab:hover {
    color:#fff;
    background:linear-gradient(180deg,rgba(25,105,210,.28),rgba(10,20,40,.15));
    text-decoration:none;
    box-shadow:inset 0 -2px 0 #2e8cff;
}

#tabs .tab-active {
    color:#fff;
    background:linear-gradient(180deg,rgba(30,105,215,.38),rgba(180,25,50,.20));
    box-shadow:inset 0 -3px 0 #e13b4e,0 0 18px rgba(45,120,255,.12);
}

#mainsubmenu {
    width:100%;
    height:auto;
    min-height:42px;
    padding:0 18px;
    box-sizing:border-box;
    float:none;
    background:linear-gradient(90deg,#0b1220,#111a2b,#0b1220);
    border-left:1px solid rgba(90,130,200,.18);
    border-right:1px solid rgba(90,130,200,.18);
    border-bottom:1px solid rgba(255,255,255,.06);
}

#mainsubmenu a {
    padding:13px 14px;
    margin:0;
    color:#aebbd0;
    font-size:10px;
    transition:color .15s ease,background .15s ease;
}

#mainsubmenu a:hover {
    color:#fff;
    text-decoration:none;
    background:rgba(45,125,255,.13);
}

#mainsubmenu .separator {
    width:1px;
    height:20px;
    margin-top:11px;
    background:rgba(150,170,210,.18);
}

#content {
    width:100%;
    min-height:300px;
    float:none;
    box-sizing:border-box;
    padding:16px;
    background:linear-gradient(180deg,rgba(13,18,29,.98),rgba(6,9,15,.98));
    border-left:1px solid rgba(90,130,200,.18);
    border-right:1px solid rgba(90,130,200,.18);
}

#margins {
    width:100%;
    margin:0;
    box-sizing:border-box;
    text-align:left;
}

#content-bot {
    width:100%;
    height:20px;
    float:none;
    background:linear-gradient(180deg,#080d17,#03050a);
    border:1px solid rgba(90,130,200,.18);
    border-top:0;
}

#copyrights {
    width:100%;
    padding:18px 10px;
    float:none;
    box-sizing:border-box;
    text-align:center;
    color:#68758b;
}

a { color:#55a5ff; }
a:hover { color:#ff5b6c; }

.TableContainer {
    border:1px solid rgba(80,120,180,.28);
    border-radius:7px;
    overflow:hidden;
    background:#0b101b;
    box-shadow:0 8px 25px rgba(0,0,0,.28);
}

.TableContainer .Odd { background-color:#0d1420; }
.TableContainer .Even { background-color:#101927; }

.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer,
.LabelH,
.LabelH td {
    background:linear-gradient(90deg,#152744,#101a2b) !important;
}

.TableContainer .CaptionContainer .Text { color:#fff; }

.TableContentContainer {
    border-color:rgba(80,120,180,.25);
    background-color:#0b101b;
}

.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5 {
    border-color:rgba(80,120,180,.25);
    background-color:#0d1420;
}

.TableContainer .Table2 .InnerTableContainer td {
    border-color:rgba(80,120,180,.12);
}

.Content .BoxContent .Odd { background-color:#0d1420; }
.Content .BoxContent .Even { background-color:#101927; }

.Content #News .NewsHeadlineBackground,
.Content #NewsArchive .NewsHeadlineBackground,
.Content #FeaturedArticle .NewsHeadlineBackground {
    background:linear-gradient(90deg,#152d4e,#173b68 55%,#4a1822);
    border-left-color:rgba(70,130,220,.3);
    border-right-color:rgba(70,130,220,.3);
    border-radius:4px;
}

.Content #News .NewsHeadlineText,
.Content #NewsArchive .NewsHeadlineText,
.Content #FeaturedArticle .NewsHeadlineText,
.Content #News .NewsHeadlineAuthor {
    color:#fff;
}

.FormFieldError { color:#ff5b6c; }

@media (max-width:850px) {
    #page { width:98%; margin-top:8px; }
    #header { height:300px; background-size:cover; }
    #tabs { flex-wrap:wrap; padding:4px; }
    #tabs .tab,#tabs .tab-active {
        min-width:0;
        flex:1 1 30%;
        padding:13px 7px;
        font-size:9px;
    }
    #mainsubmenu { overflow-x:auto; white-space:nowrap; }
    #content { padding:10px; }
}

@media (max-width:520px) {
    #header { height:230px; }
    #tabs .tab,#tabs .tab-active { flex:1 1 45%; }
}

/* =========================================================
   VALTHERA ONLINE - V5 DESIGN
   Visual polish only - does not remove MyAAC functionality
   ========================================================= */

:root {
    --val-blue: #1678d4;
    --val-blue-dark: #08111f;
    --val-blue-light: #2da4ff;
    --val-red: #e51f3f;
    --val-red-light: #ff3b57;
    --val-bg: #060a12;
    --val-panel: #0d1420;
    --val-panel-2: #111a28;
    --val-border: rgba(70,130,190,.30);
    --val-text: #e8eef7;
    --val-muted: #91a4bb;
}


/* =========================================================
   GLOBAL CONTENT POLISH
   ========================================================= */

body {
    background-color: #05070d;
    color: var(--val-text);
}

a {
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

a:hover {
    color: #ffffff;
}


/* =========================================================
   MAIN NAVIGATION
   Keeps existing links and structure intact
   ========================================================= */

#tabs {
    background:
        linear-gradient(
            180deg,
            #101b2b 0%,
            #09111d 100%
        ) !important;

    border-top: 1px solid rgba(55,140,220,.25);
    border-bottom: 1px solid rgba(55,140,220,.30);
    box-shadow:
        0 8px 22px rgba(0,0,0,.35),
        inset 0 -1px 0 rgba(255,255,255,.03);
}

#tabs .tab,
#tabs .tab-active {
    position: relative;
    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

#tabs .tab:hover {
    background:
        linear-gradient(
            180deg,
            rgba(30,110,190,.25),
            rgba(10,25,42,.95)
        ) !important;

    color: #ffffff !important;
}

#tabs .tab-active {
    background:
        linear-gradient(
            180deg,
            #142b46 0%,
            #0b1728 100%
        ) !important;

    color: #ffffff !important;

    box-shadow:
        inset 0 -3px 0 var(--val-red),
        0 0 18px rgba(229,31,63,.10);
}

#tabs .tab-active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--val-red),
        #ff405a,
        var(--val-red)
    );
    box-shadow: 0 0 9px rgba(229,31,63,.55);
}


/* =========================================================
   SUBMENU
   Fixar även klickytan så hela länken fungerar
   ========================================================= */

#mainsubmenu {
    background:
        linear-gradient(
            180deg,
            #0c1523 0%,
            #080f1b 100%
        ) !important;

    border-bottom: 1px solid rgba(65,120,175,.25);
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.02);
}

#mainsubmenu a {
    display: inline-block;
    position: relative;

    padding: 10px 16px !important;

    color: #b9c8da !important;
    text-decoration: none !important;

    border-right: 1px solid rgba(80,120,160,.14);

    transition:
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

#mainsubmenu a:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(22,120,212,.22),
            rgba(10,24,40,.95)
        ) !important;

    box-shadow:
        inset 0 -2px 0 var(--val-blue-light);
}

#mainsubmenu a:active {
    background: rgba(229,31,63,.15) !important;
}


/* =========================================================
   CONTENT CONTAINER
   ========================================================= */

#content {
    background:
        linear-gradient(
            180deg,
            rgba(8,14,24,.96),
            rgba(5,9,16,.98)
        );
}


/* =========================================================
   HEADINGS
   ========================================================= */

#content h1,
#content h2,
#content h3 {
    color: #eef5ff;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

#content h2,
#content h3 {
    border-bottom: 1px solid rgba(70,130,190,.20);
    padding-bottom: 9px;
}


/* =========================================================
   GENERAL MYAAC PANELS
   ========================================================= */

.Content,
.Content .BoxContent,
.BoxContent {
    color: var(--val-text);
}

.Content .BoxContent {
    background:
        linear-gradient(
            180deg,
            rgba(15,24,38,.96),
            rgba(8,14,24,.96)
        ) !important;

    border: 1px solid var(--val-border);
    border-radius: 5px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* =========================================================
   TABLE CONTAINERS
   ========================================================= */

.TableContainer {
    border-color: rgba(70,130,190,.25) !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
}

.TableContainer .Odd {
    background-color: #0c1420 !important;
}

.TableContainer .Even {
    background-color: #101a27 !important;
}

.TableContainer td {
    border-color: rgba(80,120,160,.12) !important;
}

.TableContainer a {
    color: #73bdff !important;
}

.TableContainer a:hover {
    color: #ffffff !important;
}


/* =========================================================
   ACCOUNT INFORMATION
   ========================================================= */

#accountmanagement,
#accountmanagement table {
    background: transparent;
}

#accountmanagement td {
    border-color: rgba(80,120,160,.16);
}

#accountmanagement tr {
    background:
        linear-gradient(
            90deg,
            rgba(18,28,43,.96),
            rgba(12,20,32,.96)
        );
}


/* =========================================================
   BUTTONS
   ========================================================= */

input[type="submit"],
input[type="button"],
button,
.Button,
.button {
    background:
        linear-gradient(
            180deg,
            #1679d4 0%,
            #0d4f91 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid #3199ef !important;
    border-radius: 5px !important;

    padding: 7px 16px !important;

    font-weight: bold;

    text-shadow: 0 1px 2px rgba(0,0,0,.6);

    box-shadow:
        0 3px 10px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.16);

    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.Button:hover,
.button:hover {
    background:
        linear-gradient(
            180deg,
            #2697f0 0%,
            #1268b5 100%
        ) !important;

    box-shadow:
        0 0 14px rgba(22,120,212,.35),
        inset 0 1px 0 rgba(255,255,255,.20);

    transform: translateY(-1px);
}

input[type="submit"]:active,
input[type="button"]:active,
button:active {
    transform: translateY(0);
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    background: #0a111c !important;

    color: #eaf3ff !important;

    border: 1px solid rgba(80,140,200,.32) !important;
    border-radius: 4px;

    padding: 7px 9px;

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.35);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;

    border-color: #248ce4 !important;

    box-shadow:
        0 0 0 2px rgba(36,140,228,.12),
        0 0 12px rgba(36,140,228,.18);
}


/* =========================================================
   BREADCRUMBS / SERVER STATUS
   ========================================================= */

#content .BoxContent a {
    color: #65b6ff;
}

#content .BoxContent a:hover {
    color: #ffffff;
}


/* =========================================================
   LINKS
   ========================================================= */

#content a {
    color: #72bdff;
}

#content a:hover {
    color: #ffffff;
}


/* =========================================================
   RED ACCENTS
   ========================================================= */

.FormFieldError {
    color: #ff596d !important;
}

.red {
    color: #ff435d !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    #page {
        width: 96% !important;
        margin: 10px auto !important;
    }

    #header {
        width: 100% !important;
        height: auto !important;
        background-size: cover !important;
        background-position: center !important;
    }

    #tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 0 !important;
    }

    #tabs .tab,
    #tabs .tab-active {
        flex: 1 1 25% !important;
        min-width: 120px;
    }

    #mainsubmenu {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #mainsubmenu a {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* =========================================================
   VALTHERA V6 - HIGHSCORE SIDEBAR
   ========================================================= */

/* Själva högerspalten */
#content .Content > table > tbody > tr > td[width="15%"] {
    vertical-align: top;
    padding-left: 18px !important;
}

/* Alla små paneler i högerspalten */
#content .Content > table > tbody > tr > td[width="15%"] table {
    width: 100% !important;

    background: linear-gradient(
        180deg,
        #101a29 0%,
        #0a111d 100%
    ) !important;

    border: 1px solid rgba(55,130,205,.30) !important;
    border-radius: 5px;

    overflow: hidden;

    box-shadow:
        0 5px 18px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.025);

    margin-bottom: 12px;
}

/* Panelens rubrik */
#content .Content > table > tbody > tr > td[width="15%"] table tr:first-child td {
    background:
        linear-gradient(
            90deg,
            #152b45,
            #0d1726
        ) !important;

    color: #ffffff !important;

    border-bottom: 1px solid rgba(50,145,225,.35) !important;

    font-weight: bold;
    text-align: left !important;

    padding: 9px 10px !important;

    text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* Alla länkar i sidebar */
#content .Content > table > tbody > tr > td[width="15%"] a {
    display: block;

    color: #75bdff !important;

    text-decoration: none !important;

    padding: 4px 9px !important;

    border-left: 2px solid transparent;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease,
        padding-left .15s ease;
}

/* Hover */
#content .Content > table > tbody > tr > td[width="15%"] a:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(22,120,212,.25),
            rgba(22,120,212,.04)
        ) !important;

    border-left-color: #2da4ff;

    padding-left: 13px !important;

    text-decoration: none !important;
}

/* Highscore-panelens innehåll */
#content .Content > table > tbody > tr > td[width="15%"] table td {
    background: transparent !important;

    border-color: rgba(80,130,180,.10) !important;

    color: #c7d4e5 !important;
}


/* =========================================================
   HIGHSCORE TABELLEN
   ========================================================= */

#content .Content table tr[bgcolor="#e5e3d7"],
#content .Content table tr[bgcolor="#afab89"] {
    background: linear-gradient(
        180deg,
        #17263a,
        #0e1928
    ) !important;

    color: #ffffff !important;
}

#content .Content table td[bgcolor="#e5e3d7"],
#content .Content table td[bgcolor="#afab89"] {
    background: #111b29 !important;

    color: #dbe8f7 !important;

    border-color: rgba(70,125,180,.20) !important;
}


/* =========================================================
   SELECT MENYER - FILTER
   ========================================================= */

#content select {
    background:
        linear-gradient(
            180deg,
            #101d2e,
            #08111d
        ) !important;

    color: #e8f2ff !important;

    border: 1px solid rgba(55,145,225,.45) !important;

    border-radius: 5px;

    padding: 7px 10px !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.25);
}

#content select:hover {
    border-color: #2da4ff !important;
}
/* =========================================================
   VALTHERA V7 - HIGHSCORE TABLE
   ========================================================= */

/* Highscore-tabellen */
#content .Content table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Tabellens rubrikrad */
#content .Content table tr:first-child td {
    background: linear-gradient(
        180deg,
        #182b42 0%,
        #0d1828 100%
    ) !important;

    color: #ffffff !important;

    border-top: 1px solid rgba(65,150,225,.35) !important;
    border-bottom: 1px solid rgba(65,150,225,.35) !important;

    font-weight: bold !important;
}

/* Highscore-rader */
#content .Content table tr[bgcolor] td {
    background: #101a28 !important;
    color: #d9e7f5 !important;

    border-bottom: 1px solid rgba(80,130,180,.15) !important;
}

/* Varannan rad */
#content .Content table tr:nth-child(even) td {
    background: #0d1725 !important;
}

/* Hover på spelarrad */
#content .Content table tr:hover td {
    background: rgba(25,115,190,.18) !important;
}

/* Namn/länkar */
#content .Content table a {
    color: #6ebcff !important;
    text-decoration: none !important;
}

#content .Content table a:hover {
    color: #ffffff !important;
}

/* Svensk flagga / outfit ska inte påverkas */
#content .Content table img {
    vertical-align: middle;
}

/* Rank/nummer */
#content .Content table td {
    border-color: rgba(70,125,180,.15) !important;
}
/* =========================================================
   VALTHERA ONLINE - V8 COMMUNITY NAVIGATION
   ========================================================= */

/* Secondary navigation container */
#mainsubmenu {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    background:
        linear-gradient(
            180deg,
            rgba(18, 32, 53, 0.98) 0%,
            rgba(8, 17, 31, 0.98) 100%
        );

    border-top: 1px solid rgba(80, 150, 220, 0.18);
    border-bottom: 1px solid rgba(80, 150, 220, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 4px 12px rgba(0,0,0,0.25);
}

/* Individual navigation links */
#mainsubmenu a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 17px;

    box-sizing: border-box;

    color: #dce9f8 !important;
    background: transparent;

    border-left: 1px solid rgba(90, 140, 190, 0.10);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;

    text-decoration: none !important;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

/* First button */
#mainsubmenu a:first-child {
    border-left: none;
}

/* Hover */
#mainsubmenu a:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(35, 72, 112, 0.75),
            rgba(13, 31, 53, 0.95)
        );

    box-shadow:
        inset 0 -2px 0 rgba(50, 150, 255, 0.75),
        inset 0 1px 0 rgba(255,255,255,0.04);

    text-decoration: none !important;
}

/* Small blue glow on hover */
#mainsubmenu a:hover::after {
    content: "";
    position: absolute;

    left: 18%;
    right: 18%;
    bottom: 0;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #249cff,
        transparent
    );

    box-shadow: 0 0 8px rgba(36,156,255,0.65);
}

/* Active/current section */
#mainsubmenu a.active,
#mainsubmenu a.selected,
#mainsubmenu a.current {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(25, 55, 88, 0.95),
            rgba(10, 23, 40, 0.98)
        );

    box-shadow:
        inset 0 -3px 0 #ff304f,
        inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Active red underline */
#mainsubmenu a.active::after,
#mainsubmenu a.selected::after,
#mainsubmenu a.current::after {
    content: "";
    position: absolute;

    left: 12%;
    right: 12%;
    bottom: 0;

    height: 3px;

    background: #ff304f;

    box-shadow:
        0 0 8px rgba(255,48,79,0.55);
}

/* Make the submenu text stay on one line */
#mainsubmenu a {
    white-space: nowrap;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    #mainsubmenu {
        overflow-x: auto;
        justify-content: flex-start;
    }

    #mainsubmenu a {
        flex: 0 0 auto;
        padding: 0 13px;
        font-size: 11px;
    }
}
/* =========================================================
   VALTHERA ONLINE - V9 CONTENT / HIGHSCORES
   ========================================================= */

/* Main content area */
#content {
    color: #dce8f5;
}

/* Main headings */
#content h1,
#content h2,
#content h3 {
    color: #f2f7ff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* Highscore main panel */
#content .TableContainer,
#content .Content {
    background:
        linear-gradient(
            180deg,
            rgba(18, 38, 62, 0.96),
            rgba(8, 20, 35, 0.98)
        );

    border: 1px solid rgba(70, 145, 220, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        0 8px 25px rgba(0,0,0,0.25);

    border-radius: 4px;
}

/* Highscore title */
#content .TableContainer .CaptionContainer,
#content .TableContainer .CaptionInnerContainer {
    background:
        linear-gradient(
            90deg,
            #152f4c,
            #0b1c31
        ) !important;

    border-bottom: 1px solid rgba(60,150,240,0.35);
}

/* Caption text */
#content .TableContainer .Text,
#content .TableContainer .CaptionContainer {
    color: #ffffff !important;
}

/* Ranking table */
#content table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Table headers */
#content table th {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #173655,
            #0d2239
        ) !important;

    border-bottom: 1px solid rgba(70,150,230,0.35);

    font-weight: 700;
}

/* Table cells */
#content table td {
    background: rgba(10, 24, 40, 0.92) !important;
    color: #dce8f5 !important;

    border-bottom: 1px solid rgba(80,120,160,0.14);
}

/* Alternating rows */
#content table tr:nth-child(even) td {
    background: rgba(18, 37, 58, 0.92) !important;
}

/* Hover ranking row */
#content table tr:hover td {
    background:
        linear-gradient(
            90deg,
            rgba(30, 75, 115, 0.75),
            rgba(13, 31, 51, 0.95)
        ) !important;

    transition: background 0.18s ease;
}

/* Character name */
#content table a {
    color: #5bb8ff !important;
    font-weight: 700;
    text-decoration: none;
}

#content table a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(70,170,255,0.65);
}

/* =========================================================
   FILTERS
   ========================================================= */

#content select {
    color: #eaf4ff !important;

    background:
        linear-gradient(
            180deg,
            #132d49,
            #091a2c
        ) !important;

    border: 1px solid #24577f !important;

    border-radius: 5px;

    padding: 7px 10px;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.5),
        0 0 0 rgba(40,150,255,0);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

#content select:hover,
#content select:focus {
    border-color: #3ba9ff !important;

    box-shadow:
        0 0 8px rgba(40,150,255,0.25);
}

/* Filter labels */
#content label {
    color: #dce8f5;
    font-weight: 700;
}

/* =========================================================
   RIGHT SIDEBAR
   ========================================================= */

/* Sidebar containers */
#content .TableContainer {
    overflow: hidden;
}

/* Sidebar titles */
#content .TableContainer .CaptionContainer {
    color: #ffffff !important;
}

/* Sidebar links */
#content .TableContainer a {
    color: #4dafff !important;
    text-decoration: none;
}

#content .TableContainer a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 7px rgba(60,170,255,0.6);
}

/* =========================================================
   BUTTONS
   ========================================================= */

#content input[type="submit"],
#content input[type="button"],
#content button {
    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            #1476c8,
            #0b477e
        );

    border: 1px solid #2998ec;

    border-radius: 5px;

    padding: 7px 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 3px 8px rgba(0,0,0,0.3);

    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content button:hover {
    background:
        linear-gradient(
            180deg,
            #2498f0,
            #0b5d9f
        );

    box-shadow:
        0 0 10px rgba(35,150,255,0.35);

    transform: translateY(-1px);
}

/* =========================================================
   GENERAL CONTENT SECTIONS
   ========================================================= */

#content hr {
    border: 0;
    border-top: 1px solid rgba(100,150,200,0.22);
}

#content .BoxContent {
    color: #dce8f5;
}

/* Links outside tables */
#content a {
    transition:
        color 0.18s ease,
        text-shadow 0.18s ease;
}
/* =========================================================
   VALTHERA ONLINE - HIGHSCORES CLEANUP
   Hide duplicate skill/vocation sidebar
   ========================================================= */

/* Hide the right-side Highscores filter column */
#content td[width="15%"] {
    display: none !important;
}

/* Expand the main Highscores content */
#content td[width="85%"] {
    width: 100% !important;
}

/* Make the ranking area use the available width */
#content .TableContainer {
    max-width: 100%;
}

/* =========================================================
   HIGHSCORE DROPDOWN - READABLE OPTIONS
   ========================================================= */

#content select {
    color: #ffffff !important;
    background-color: #0b1c31 !important;
}

#content select option {
    color: #ffffff !important;
    background-color: #0b1c31 !important;
}

/* Selected option */
#content select option:checked {
    color: #ffffff !important;
    background-color: #15527f !important;
}
/* =========================================================
   VALTHERA ONLINE - V10 HIGHSCORES FINISH
   Premium ranking / filters / top rankings
   ========================================================= */

/* ---------------------------------------------------------
   HIGHSCORE MAIN PANEL
   --------------------------------------------------------- */

#content .TableContainer {
    border-radius: 5px;
}

/* Ranking heading */
#content .TableContainer h1,
#content .TableContainer h2,
#content .TableContainer h3 {
    letter-spacing: 0.3px;
}

/* ---------------------------------------------------------
   FILTER BAR
   --------------------------------------------------------- */

#content select {
    min-width: 105px;
    height: 36px;

    padding: 6px 30px 6px 12px;

    font-size: 13px;
    font-weight: 700;

    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #173b5e 0%,
            #0b2036 100%
        ) !important;

    border: 1px solid rgba(70,160,230,0.55) !important;
    border-radius: 5px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 2px 6px rgba(0,0,0,0.35);

    cursor: pointer;
}

/* Dropdown options */
#content select option {
    color: #ffffff !important;
    background: #0b2036 !important;
}

/* Selected option */
#content select option:checked {
    color: #ffffff !important;
    background: #155b89 !important;
}

/* Filter labels */
#content label {
    color: #e8f3ff !important;
    font-weight: 700;
}

/* ---------------------------------------------------------
   RANKING TABLE
   --------------------------------------------------------- */

#content table tbody tr {
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
}

/* Normal ranking rows */
#content table tbody tr td {
    height: 42px;
    vertical-align: middle;
}

/* Hover */
#content table tbody tr:hover td {
    background:
        linear-gradient(
            90deg,
            rgba(24,70,108,0.95),
            rgba(12,31,51,0.98)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(70,170,255,0.12),
        inset 0 -1px 0 rgba(70,170,255,0.08);
}

/* ---------------------------------------------------------
   PLAYER NAME
   --------------------------------------------------------- */

#content table tbody tr td a {
    color: #55bdff !important;
    font-size: 13px;
    font-weight: 800;

    text-shadow:
        0 0 5px rgba(40,160,255,0.12);
}

#content table tbody tr:hover td a {
    color: #ffffff !important;

    text-shadow:
        0 0 8px rgba(70,180,255,0.55);
}

/* ---------------------------------------------------------
   TOP 3 RANKINGS
   --------------------------------------------------------- */

/* #1 */
#content table tbody tr:nth-child(1) td {
    background:
        linear-gradient(
            90deg,
            rgba(72,58,20,0.55),
            rgba(18,30,43,0.95)
        ) !important;

    border-top: 1px solid rgba(255,210,70,0.20);
    border-bottom: 1px solid rgba(255,210,70,0.20);
}

/* #2 */
#content table tbody tr:nth-child(2) td {
    background:
        linear-gradient(
            90deg,
            rgba(65,70,78,0.38),
            rgba(16,28,42,0.95)
        ) !important;

    border-bottom: 1px solid rgba(190,205,220,0.16);
}

/* #3 */
#content table tbody tr:nth-child(3) td {
    background:
        linear-gradient(
            90deg,
            rgba(75,45,27,0.38),
            rgba(16,28,42,0.95)
        ) !important;

    border-bottom: 1px solid rgba(210,145,90,0.16);
}

/* Keep hover stronger than top-3 background */
#content table tbody tr:nth-child(1):hover td,
#content table tbody tr:nth-child(2):hover td,
#content table tbody tr:nth-child(3):hover td {
    background:
        linear-gradient(
            90deg,
            rgba(28,78,120,0.95),
            rgba(12,31,51,0.98)
        ) !important;
}

/* ---------------------------------------------------------
   RANK NUMBER
   --------------------------------------------------------- */

#content table tbody tr td:first-child {
    font-weight: 800;
}

/* ---------------------------------------------------------
   OUTFIT
   --------------------------------------------------------- */

#content table tbody tr td img {
    vertical-align: middle;
}

/* ---------------------------------------------------------
   POINTS / LEVEL
   --------------------------------------------------------- */

#content table tbody tr td:last-child {
    font-weight: 800;
    color: #eaf5ff !important;
}

/* ---------------------------------------------------------
   RANKING HEADER
   --------------------------------------------------------- */

#content table thead th {
    text-transform: none;
    letter-spacing: 0.2px;
}

/* ---------------------------------------------------------
   HIGH SCORE NOTE
   --------------------------------------------------------- */

#content .Content > p {
    color: #a9c2d9;
}

/* ---------------------------------------------------------
   SUBTLE VALTHERA BLUE GLOW
   --------------------------------------------------------- */

#content .TableContainer:hover {
    border-color: rgba(65,155,230,0.38);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        0 8px 28px rgba(0,0,0,0.28),
        0 0 18px rgba(20,100,170,0.06);
}
/* =========================================================
   VALTHERA ONLINE - V10 CHARACTER HOVER
   ========================================================= */

/* Character name */
#content table tbody td a span {
    color: #6ecbff !important;
    font-weight: 700;
    transition:
        color 0.18s ease,
        text-shadow 0.18s ease;
}

/* Character name hover */
#content table tbody td a:hover span {
    color: #ffffff !important;

    text-shadow:
        0 0 5px rgba(70, 180, 255, 0.8),
        0 0 12px rgba(40, 140, 255, 0.45);
}

/* Highlight the complete character row */
#content table tbody tr:hover td {
    background:
        linear-gradient(
            90deg,
            rgba(25, 65, 100, 0.95),
            rgba(12, 32, 55, 0.98)
        ) !important;

    transition:
        background 0.18s ease;
}

/* Keep character name above the hover background */
#content table tbody td a {
    position: relative;
    z-index: 2;
}

/* Profession below character name */
#content table tbody td small {
    color: #9fb6cc;
    transition: color 0.18s ease;
}

#content table tbody td a:hover + br + small {
    color: #dcefff;
}
/* =========================================================
   VALTHERA ONLINE - V10 CLEAN RANKING
   Clean / premium / less boxes
   ========================================================= */

/* Main ranking area */
#content .TableContainer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Remove unnecessary inner boxes */
#content .TableContainer .CaptionContainer,
#content .TableContainer .CaptionInnerContainer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Ranking title */
#content .TableContainer .Text {
    color: #f4f8ff !important;
    font-size: 18px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

/* Main content panels */
#content .Content,
#content .BoxContent {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   RANKING TABLE
   ========================================================= */

#content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent !important;
    border: 0 !important;
}

/* Header */
#content table th {
    background: rgba(10, 27, 45, 0.72) !important;
    color: #dcecff !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(80,150,210,0.22) !important;

    padding: 9px 8px;
    font-weight: 700;
}

/* Cells */
#content table td {
    background: transparent !important;
    color: #d9e7f5 !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(100,140,175,0.12) !important;

    padding: 8px;
}

/* Alternating rows - extremely subtle */
#content table tr:nth-child(even) td {
    background: rgba(255,255,255,0.018) !important;
}

/* Hover row */
#content table tbody tr:hover td {
    background:
        linear-gradient(
            90deg,
            rgba(35,100,155,0.16),
            rgba(35,100,155,0.04)
        ) !important;

    border-bottom-color: rgba(60,160,230,0.28) !important;
}

/* =========================================================
   CHARACTER NAMES
   ========================================================= */

#content table tbody td a {
    color: #62bcff !important;
    font-weight: 800;
    text-decoration: none !important;

    text-shadow:
        0 0 8px rgba(40,160,255,0.10);
}

#content table tbody td a:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 10px rgba(60,180,255,0.55);
}

/* Small vocation text */
#content table tbody td small {
    color: #91a9bf !important;
}

/* =========================================================
   FILTER AREA
   ========================================================= */

/* Remove box around filter container */
#content form,
#content .TableContainer form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Filter labels */
#content label {
    color: #d9e8f7 !important;
    font-weight: 700;
}

/* Dropdowns */
#content select {
    color: #edf7ff !important;

    background:
        linear-gradient(
            180deg,
            #132c46,
            #091a2b
        ) !important;

    border: 1px solid rgba(70,150,215,0.48) !important;

    border-radius: 5px;

    padding: 6px 9px;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.45);

    outline: none;
}

#content select:hover,
#content select:focus {
    border-color: #3daeff !important;

    box-shadow:
        0 0 8px rgba(40,160,255,0.22);
}

/* Dropdown options */
#content select option {
    background: #102238;
    color: #ffffff;
}

/* =========================================================
   SIDEBAR - MAKE IT QUIET
   ========================================================= */

/* Hide unnecessary visual box styling */
#content .TableContainer .TableContentContainer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Sidebar links */
#content .TableContainer a {
    color: #58b6ff !important;
    text-decoration: none !important;
}

#content .TableContainer a:hover {
    color: #ffffff !important;
}

/* =========================================================
   SEPARATORS
   ========================================================= */

#content hr {
    border: 0 !important;

    border-top:
        1px solid rgba(100,150,195,0.16) !important;

    margin: 12px 0;
}

/* =========================================================
   RANKING PANEL OUTLINE
   ONE subtle outline instead of many boxes
   ========================================================= */

#content .TableContainer table {
    border-top:
        1px solid rgba(65,130,185,0.28);

    border-bottom:
        1px solid rgba(65,130,185,0.22);
}

/* =========================================================
   FOOTER / GENERAL CLEANUP
   ========================================================= */

#content a {
    transition:
        color 0.18s ease,
        text-shadow 0.18s ease;
}
/* =========================================================
   VALTHERA ONLINE - V10.1
   CLEAN HIGHSCORE HOVER
   Remove excessive hover boxes
   ========================================================= */

/* Remove heavy hover backgrounds */
#content table tbody tr:hover td,
#content table tr:hover td,
#content .TableContainer tr:hover td {
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep only a very subtle row highlight */
#content table tbody tr:hover {
    background: rgba(45, 120, 180, 0.07) !important;
}

/* Prevent nested MyAAC tables from creating extra boxes */
#content .TableContainer table,
#content .TableContainer table table {
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove excessive cell borders */
#content table td {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Keep only subtle horizontal separators */
#content table tbody td {
    border-bottom: 1px solid rgba(100,150,190,0.10) !important;
}

/* No visual box when hovering character name */
#content table tbody tr:hover a {
    background: transparent !important;
}

/* Character link stays clean */
#content table tbody tr:hover a {
    color: #70c5ff !important;
    text-shadow: 0 0 8px rgba(50,170,255,0.25);
}
/* =========================================================
   VALTHERA ONLINE - V10
   REMOVE RANKING HOVER BOX EFFECT
   ========================================================= */

#content .Content table tr:hover td,
#content table tr:hover td {
    background: inherit !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* Keep character links clean */
#content .Content table tr:hover a,
#content table tr:hover a {
    text-shadow: none !important;
}
/* =========================================================
   VALTHERA ONLINE - V10.1
   CLEAN HIGHSCORE TABLE
   ========================================================= */

/* Remove MyAAC's heavy cell styling */
#content .Content table tbody tr td {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove gradients from ranking rows */
#content .Content table tbody tr td,
#content .Content table tbody tr:nth-child(odd) td,
#content .Content table tbody tr:nth-child(even) td,
#content .Content table tbody tr:first-child td {
    background-image: none !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Clean ranking rows */
#content .Content table tbody tr {
    background: rgba(10, 25, 42, 0.65) !important;
    border: 0 !important;
}

/* Slight alternating row effect */
#content .Content table tbody tr:nth-child(even) {
    background: rgba(17, 37, 58, 0.75) !important;
}

/* Very subtle hover - no boxes */
#content .Content table tbody tr:hover,
#content .Content table tbody tr:hover td {
    background: rgba(35, 85, 125, 0.28) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove vertical cell borders */
#content .Content table td,
#content .Content table th {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Keep ranking text clean */
#content .Content table a {
    text-shadow: none !important;
}

/* Keep character name blue */
#content .Content table a span {
    color: #6ecbff !important;
}

/* Keep vocation text subtle */
#content .Content table small {
    color: #a9bfd3 !important;
}
/* =========================================================
   VALTHERA ONLINE - V11
   PREMIUM RANKING
   ========================================================= */

/* Main ranking area */
#content .Content {
    background:
        linear-gradient(
            180deg,
            rgba(15, 32, 52, 0.96),
            rgba(7, 18, 31, 0.98)
        ) !important;

    border: 1px solid rgba(70, 145, 220, 0.20) !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    border-radius: 3px;
}

/* Ranking title */
#content .Content h1,
#content .Content h2,
#content .Content h3 {
    color: #f3f8ff !important;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.75);
}

/* =========================================================
   FILTER AREA
   ========================================================= */

#content .Content table:first-of-type {
    background: rgba(8, 22, 37, 0.55) !important;
}

/* Filter labels */
#content .Content table:first-of-type td {
    color: #dcecff !important;
    font-weight: 700;
}

/* Dropdowns */
#content .Content select {
    min-height: 34px;

    color: #eef7ff !important;

    background:
        linear-gradient(
            180deg,
            #173a5c,
            #0b2037
        ) !important;

    border: 1px solid #28618d !important;
    border-radius: 5px;

    padding: 6px 10px;

    font-weight: 700;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 2px 6px rgba(0,0,0,0.25);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

#content .Content select:hover,
#content .Content select:focus {
    border-color: #42a9ed !important;

    box-shadow:
        0 0 10px rgba(50,160,240,0.22);
}

/* =========================================================
   RANKING HEADER
   ========================================================= */

#content .Content table th {
    background:
        linear-gradient(
            180deg,
            #163753,
            #102941
        ) !important;

    color: #f2f8ff !important;

    border: 0 !important;

    font-weight: 800;

    text-shadow:
        0 1px 4px rgba(0,0,0,.65);
}

/* =========================================================
   RANKING ROWS
   ========================================================= */

#content .Content table tbody tr {
    background:
        rgba(9, 24, 40, 0.72) !important;

    transition:
        background .18s ease,
        transform .12s ease;
}

/* Alternating rows */
#content .Content table tbody tr:nth-child(even) {
    background:
        rgba(16, 34, 54, 0.78) !important;
}

/* Premium hover */
#content .Content table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            rgba(28, 72, 108, 0.55),
            rgba(18, 45, 70, 0.72)
        ) !important;

    transform: translateX(2px);
}

/* Cells stay clean */
#content .Content table tbody tr td {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

/* =========================================================
   RANK NUMBER
   ========================================================= */

#content .Content table tbody tr td:first-child {
    color: #a9c9e5 !important;
    font-weight: 800;
}

/* =========================================================
   CHARACTER NAME
   ========================================================= */

#content .Content table tbody tr td a {
    color: #65c1ff !important;

    font-weight: 800;

    text-decoration: none !important;

    transition:
        color .18s ease,
        text-shadow .18s ease;
}

#content .Content table tbody tr td a:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 8px rgba(80,180,255,.55);
}

/* Vocation */
#content .Content table tbody tr td small {
    color: #9eb6cc !important;
    font-weight: 600;
}

/* =========================================================
   POINTS / LEVEL
   ========================================================= */

#content .Content table tbody tr td:last-child,
#content .Content table tbody tr td:nth-last-child(2) {
    color: #e4f1ff !important;
    font-weight: 800;
}

/* =========================================================
   TOP 3 ACCENTS
   ========================================================= */

/* 1st place */
#content .Content table tbody tr:first-child td:first-child {
    color: #ffd76a !important;

    text-shadow:
        0 0 7px rgba(255,190,50,.22);
}

/* 2nd place */
#content .Content table tbody tr:nth-child(2) td:first-child {
    color: #d9e2eb !important;
}

/* 3rd place */
#content .Content table tbody tr:nth-child(3) td:first-child {
    color: #d99a68 !important;
}

/* =========================================================
   CLEAN TABLE EDGES
   ========================================================= */

#content .Content table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#content .Content table th,
#content .Content table td {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Remove unwanted old gradients */
#content .Content table tr,
#content .Content table td {
    background-image: none !important;
}

/* Re-apply premium row backgrounds */
#content .Content table tbody tr {
    background: rgba(9, 24, 40, 0.72) !important;
}

#content .Content table tbody tr:nth-child(even) {
    background: rgba(16, 34, 54, 0.78) !important;
}

#content .Content table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            rgba(28, 72, 108, 0.55),
            rgba(18, 45, 70, 0.72)
        ) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    #content .Content {
        border-radius: 0;
    }

    #content .Content table {
        font-size: 12px;
    }

    #content .Content select {
        max-width: 140px;
    }

}
/* =========================================================
   VALTHERA ONLINE - V11.1
   PREMIUM RANKING POLISH
   ========================================================= */

/* Ranking rows - slightly more visible */
#content .Content table tbody tr {
    background: rgba(15, 32, 51, 0.88) !important;
}

#content .Content table tbody tr:nth-child(even) {
    background: rgba(19, 39, 61, 0.88) !important;
}

/* First place - subtle premium gold */
#content .Content table tbody tr:first-child {
    background:
        linear-gradient(
            90deg,
            rgba(92, 70, 24, 0.20),
            rgba(18, 38, 58, 0.90) 45%
        ) !important;
}

/* First place rank */
#content .Content table tbody tr:first-child td:first-child {
    color: #ffd76a !important;
    font-weight: 900;
}

/* Character names */
#content .Content table tbody tr td a {
    color: #70c8ff !important;
    font-size: 14px;
    font-weight: 800;
}

/* Vocation */
#content .Content table tbody tr td small {
    color: #91aac0 !important;
    font-size: 11px;
}

/* Ranking numbers */
#content .Content table tbody tr td {
    color: #dceaf7 !important;
}

/* Level / points */
#content .Content table tbody tr td:last-child,
#content .Content table tbody tr td:nth-last-child(2) {
    color: #eaf5ff !important;
    font-weight: 800;
}

/* Very subtle hover - no movement or boxes */
#content .Content table tbody tr:hover {
    transform: none !important;

    background:
        rgba(38, 78, 112, 0.30) !important;
}

/* First place keeps gold tint on hover */
#content .Content table tbody tr:first-child:hover {
    background:
        linear-gradient(
            90deg,
            rgba(105, 78, 22, 0.28),
            rgba(38, 78, 112, 0.30)
        ) !important;
}

/* Keep cells completely clean */
#content .Content table tbody tr td {
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}
/* =========================================================
   VALTHERA ONLINE - V12.3
   TOP 3 - RANK + NAME ONLY
   ========================================================= */

/* 1ST PLACE */
#content .Content table tbody > tr:nth-child(2) > td:nth-child(2) {
    color: #ffd75a !important;
    font-weight: 800 !important;
}

#content .Content table tbody > tr:nth-child(2) > td:nth-child(4) a {
    color: #ffd75a !important;
}


/* 2ND PLACE */
#content .Content table tbody > tr:nth-child(3) > td:nth-child(2) {
    color: #d9e1e8 !important;
    font-weight: 800 !important;
}

#content .Content table tbody > tr:nth-child(3) > td:nth-child(4) a {
    color: #9fd0f5 !important;
}


/* 3RD PLACE */
#content .Content table tbody > tr:nth-child(4) > td:nth-child(2) {
    color: #d99a67 !important;
    font-weight: 800 !important;
}

#content .Content table tbody > tr:nth-child(4) > td:nth-child(4) a {
    color: #72c1f5 !important;
}
/* =========================================================
   VALTHERA ONLINE - V13 CHARACTER PROFILE
   Built on V12.3
   Character page only
   ========================================================= */


/* =========================================================
   CHARACTER PROFILE - MAIN AREA
   ========================================================= */

#content .Content {
    color: #dce8f5;
}


/* =========================================================
   CHARACTER INFORMATION
   ========================================================= */

/* Main character information area */
#content .Content table {
    color: #dce8f5;
}

/* Character information rows */
#content .Content table tr td {
    background: transparent !important;
    border-bottom: 1px solid rgba(80,140,190,0.10);
}

/* Labels */
#content .Content table tr td:first-child {
    color: #ffd45c !important;
    font-weight: 700;
}

/* Values */
#content .Content table tr td:nth-child(2) {
    color: #e5f2ff !important;
}


/* =========================================================
   CHARACTER NAME
   ========================================================= */

#content .Content a {
    color: #5bb8ff !important;
    text-decoration: none;
}

#content .Content a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(70,170,255,0.55);
}


/* =========================================================
   CHARACTER OUTFIT
   ========================================================= */

/* Outfit image */
#content .Content img {
    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

/* Gentle highlight on character outfit */
#content .Content img:hover {
    transform: scale(1.04);
    filter:
        drop-shadow(0 0 7px rgba(60,170,255,0.35));
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

#content .Content h1,
#content .Content h2,
#content .Content h3 {
    color: #f3f8ff !important;
    text-shadow: 0 1px 7px rgba(0,0,0,0.65);
}


/* =========================================================
   SKILLS
   ========================================================= */

/* Skill section */
#content .Content table td {
    vertical-align: middle;
}

/* Skill names */
#content .Content table td strong,
#content .Content table td b {
    color: #f2c94c;
}

/* Skill values */
#content .Content table td:last-child {
    color: #eaf5ff;
    font-weight: 700;
}


/* =========================================================
   EQUIPMENT
   ========================================================= */

/* Remove heavy visual boxes around equipment */
#content .Content table table {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Equipment cells */
#content .Content table table td {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Equipment images */
#content .Content table table img {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
}


/* =========================================================
   SIGNATURE
   ========================================================= */

#content .Content textarea,
#content .Content input[type="text"] {
    background: #0b1a2b !important;
    color: #dce8f5 !important;

    border: 1px solid rgba(70,145,220,0.30) !important;
    border-radius: 4px;
}


/* =========================================================
   ACCOUNT INFORMATION
   ========================================================= */

#content .Content table tr {
    transition: background 0.15s ease;
}

#content .Content table tr:hover {
    background: rgba(35,95,145,0.08) !important;
}


/* =========================================================
   CHARACTERS LIST
   ========================================================= */

/* Character list */
#content .Content table tbody tr {
    background: transparent !important;
}

/* Alternating character rows */
#content .Content table tbody tr:nth-child(even) {
    background: rgba(20,45,70,0.20) !important;
}

/* Character list hover */
#content .Content table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            rgba(35,90,135,0.24),
            rgba(10,25,42,0.10)
        ) !important;
}


/* =========================================================
   CHARACTER LIST - STATUS
   ========================================================= */

#content .Content font[color="#00FF00"],
#content .Content font[color="green"] {
    color: #35e875 !important;
    font-weight: 700;
}


/* =========================================================
   VIEW BUTTONS
   ========================================================= */

#content .Content input[type="submit"],
#content .Content input[type="button"],
#content .Content button {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #1476c8,
            #0b477e
        ) !important;

    border: 1px solid #2998ec !important;

    border-radius: 4px;

    padding: 5px 12px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 2px 6px rgba(0,0,0,0.30);

    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

#content .Content input[type="submit"]:hover,
#content .Content input[type="button"]:hover,
#content .Content button:hover {
    background:
        linear-gradient(
            180deg,
            #2498f0,
            #0b5d9f
        ) !important;

    box-shadow:
        0 0 9px rgba(35,150,255,0.30);

    transform: translateY(-1px);
}


/* =========================================================
   SEARCH CHARACTER
   ========================================================= */

#content .Content input[type="text"] {
    background:
        linear-gradient(
            180deg,
            #102942,
            #091a2b
        ) !important;

    border: 1px solid #24577f !important;

    color: #eaf4ff !important;

    border-radius: 4px;

    padding: 7px 9px;
}

#content .Content input[type="text"]:focus {
    border-color: #3ba9ff !important;

    box-shadow:
        0 0 8px rgba(40,150,255,0.22);

    outline: none;
}


/* =========================================================
   REMOVE EXCESSIVE BOX FEEL
   ========================================================= */

/* Remove unnecessary backgrounds from nested content tables */
#content .Content > table,
#content .Content > div > table {
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep content visually connected */
#content .Content > div {
    background: transparent;
}


/* =========================================================
   CLEAN SECTION DIVIDERS
   ========================================================= */

#content .Content hr {
    border: 0 !important;

    border-top:
        1px solid rgba(80,145,195,0.18) !important;

    margin: 18px 0;
}


/* =========================================================
   CHARACTER PAGE - TYPOGRAPHY
   ========================================================= */

#content .Content small {
    color: #9eb8ce !important;
}

#content .Content strong {
    font-weight: 700;
}


/* =========================================================
   CHARACTER PAGE - RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    #content .Content table {
        max-width: 100%;
    }

    #content .Content img {
        max-width: 100%;
    }

}
/* =========================================================
   VALTHERA ONLINE - V13.1
   CHARACTER PROFILE - COMPACT REDESIGN
   ========================================================= */


/* =========================================================
   MAIN CHARACTER CONTENT
   ========================================================= */

#content .Content {
    background:
        linear-gradient(
            180deg,
            rgba(18, 39, 60, 0.94),
            rgba(8, 20, 34, 0.98)
        ) !important;

    color: #dce8f5;
}


/* =========================================================
   REMOVE HEAVY MYAAC BOX FEEL
   ========================================================= */

#content .Content table,
#content .Content table tbody,
#content .Content table tr,
#content .Content table td {
    box-shadow: none !important;
}


/* Nested tables should not create additional panels */
#content .Content table table {
    background: transparent !important;
    border: 0 !important;
}


/* =========================================================
   CHARACTER INFORMATION
   ========================================================= */

/* Main information table */
#content .Content > table:first-of-type {
    background: transparent !important;
}


/* Information rows */
#content .Content > table:first-of-type tr {
    background: transparent !important;
}


/* Labels */
#content .Content > table:first-of-type td:first-child {
    color: #f0c84b !important;
    font-weight: 700;
}


/* Values */
#content .Content > table:first-of-type td {
    border-bottom: 1px solid rgba(90,150,200,0.10) !important;
}


/* Remove excessive row backgrounds */
#content .Content > table:first-of-type tr:nth-child(even) td,
#content .Content > table:first-of-type tr:nth-child(odd) td {
    background: transparent !important;
}


/* =========================================================
   CHARACTER OUTFIT
   ========================================================= */

#content .Content img {
    filter:
        drop-shadow(0 3px 5px rgba(0,0,0,0.45));
}


/* =========================================================
   SKILLS + EQUIPMENT
   ========================================================= */

/* Remove surrounding panel backgrounds */
#content .Content table table,
#content .Content table table tbody,
#content .Content table table tr,
#content .Content table table td {
    background: transparent !important;
}


/* Skill rows */
#content .Content table table tr {
    border-bottom: 1px solid rgba(80,140,190,0.08);
}


/* Skill names */
#content .Content table table td:first-child {
    color: #e6c44f !important;
    font-weight: 700;
}


/* Skill values */
#content .Content table table td:last-child {
    color: #e8f3ff !important;
    font-weight: 700;
}


/* =========================================================
   EQUIPMENT AREA
   ========================================================= */

/* Equipment cells */
#content .Content table table td img {
    background: transparent !important;
    box-shadow: none !important;
}


/* Equipment slot backgrounds */
#content .Content table table td {
    border: 0 !important;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

#content .Content td:first-child b,
#content .Content td:first-child strong {
    color: #f0c84b !important;
}


/* Skills / Equipment titles */
#content .Content font[color] {
    font-weight: 700;
}


/* =========================================================
   ACCOUNT INFORMATION
   ========================================================= */

#content .Content table tr:hover {
    background: rgba(35,90,135,0.07) !important;
}


/* =========================================================
   CHARACTERS LIST
   ========================================================= */

#content .Content table tbody tr {
    background: transparent !important;
}


/* Alternating rows */
#content .Content table tbody tr:nth-child(even) {
    background: rgba(18,42,65,0.25) !important;
}


/* Hover */
#content .Content table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            rgba(30,85,130,0.25),
            rgba(10,25,42,0.05)
        ) !important;
}


/* Character names */
#content .Content table a {
    color: #5bb8ff !important;
    font-weight: 700;
}


/* =========================================================
   VIEW BUTTONS - SMALLER
   ========================================================= */

#content .Content input[type="submit"],
#content .Content input[type="button"],
#content .Content button {
    padding: 4px 10px !important;

    font-size: 12px;

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #1476c8,
            #0b477e
        ) !important;

    border: 1px solid #2998ec !important;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.25);
}


#content .Content input[type="submit"]:hover,
#content .Content input[type="button"]:hover,
#content .Content button:hover {
    background:
        linear-gradient(
            180deg,
            #2498f0,
            #0b5d9f
        ) !important;

    box-shadow:
        0 0 8px rgba(35,150,255,0.30);
}


/* =========================================================
   SEARCH
   ========================================================= */

#content .Content input[type="text"] {
    background: #091b2d !important;

    color: #eaf4ff !important;

    border: 1px solid #24577f !important;

    border-radius: 4px;

    padding: 6px 9px;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

#content .Content hr {
    border: 0 !important;

    border-top:
        1px solid rgba(90,150,200,0.16) !important;
}


/* =========================================================
   REMOVE EXCESSIVE EMPTY PANEL BACKGROUNDS
   ========================================================= */

#content .Content > div {
    background: transparent !important;
}


/* Prevent empty cells from becoming visible panels */
#content .Content td:empty {
    background: transparent !important;
}


/* =========================================================
   CHARACTER PAGE SPACING
   ========================================================= */

#content .Content table {
    margin-bottom: 4px;
}


/* =========================================================
   MOBILE / SMALL SCREEN
   ========================================================= */

@media (max-width: 900px) {

    #content .Content {
        overflow-x: auto;
    }

}
/* =========================================================
   VALTHERA ONLINE - V14
   SUBTLE GLOBAL POLISH
   ========================================================= */

/* Cleaner links */
#content a {
    color: #5bb8ff;
    text-decoration: none;
    transition: color .18s ease, text-shadow .18s ease;
}

#content a:hover {
    color: #ffffff;
    text-shadow: 0 0 7px rgba(70,170,255,.35);
}

/* Cleaner headings */
#content h1,
#content h2,
#content h3 {
    color: #f1f6fc;
    text-shadow: 0 2px 7px rgba(0,0,0,.55);
}

/* Subtle separators */
#content hr {
    border: 0 !important;
    border-top: 1px solid rgba(90,145,190,.16) !important;
}

/* Better secondary text */
#content small {
    color: #91a9bf;
}

/* Cleaner buttons */
#content input[type="submit"],
#content input[type="button"],
#content button {
    border-radius: 4px;
    transition:
        background .18s ease,
        box-shadow .18s ease;
}

/* Valthera blue hover */
#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content button:hover {
    box-shadow:
        0 0 8px rgba(35,150,255,.25);
}