/*-- Universal Settings --*/
* { margin: 0; padding: 0; }
a { color: #fdfdfd; text-decoration: none; }
button {cursor: pointer;}
a:hover { text-decoration: underline; }
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.hidden {display:none;}
.center {text-align: center;}
/*-- Main Containers --*/
body {
   font-size: 14px;
   color: #fdfdfd;
   font-family: Arial;
   background-size: 252px;
   background-color: #272727;
   background-image: url('/themes/default/images/background.svg');
}
.overlay {
   background-color: rgba(0,0,0,0.8);
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   z-index:2000;
}
#MainContainer {
   min-width: 950px;
   margin: 10px;
   border-radius: 15px;
   text-aling: center;
}
#Header { position: relative; }
#TopImage, #BottomImage{
	z-index: 1;
	height: 161px;
	margin: 0 auto;
   text-align: center;
	position: relative;
	background-image: url('/themes/default/images/header.svg');
}
#BottomImage {
   transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
}
.error {
   background-color: #93191C;
   font-size: 15px;
   line-height: 25px;
   font-weight: bold;
}
.frame {
   height: 25px;
   padding: 0px 5px;
   line-height: 23px;
   border-radius: 5px;
   display: inline-block;
   background-color: #272727;
}
#Content {
   margin: 10px;
   position: relative;
   text-align: left;
}
.container {
	overflow: hidden;
	position: relative;
	border-radius: 15px 15px 0px 0px;
	border: 1px solid #171717;
}
.container-header {
	height: 30px;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
	padding-left: 20px;
	background-color: #171717;
	border-bottom: 3px solid #93191C;
}
.container-text {
	padding: 10px;
	text-align: justify;
	background-color: #888;
   color: #171717;
}
#TimerContainer, #TimerLoader {
   width: 300px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   border: 2px solid #93191C;
   border-radius: 15px;
   font-size: 14px;
   font-weight: bold;
}
#TimerLoader { border: 0px;}

/*-- Utility Buttons --*/
.close-button {
   height: 20px;
   width: 20px;
   display: inline-block;
   cursor: pointer;
   background-image: url('/themes/default/images/square.svg.php?i=close');
}
.nav-button {
   cursor: pointer;
   float: left;
   width: 160px;
   margin: 0px 1px 5px 1px ;
   text-align: center;
}
.close-button:hover { background-image: url('/themes/default/images/square.svg.php?i=close&a=TRUE');}
.settings-button { width: 25px; cursor: pointer; }
.settings-button img { margin-top: 3px; height: 18px;}
#btn-search {
   width: 20px;
   height: 15px;
   margin-right: 3px;
}
button.timeout-button {
   height: 30px;
   line-height: 24px;
   font-weight: bold;
   padding: 0px 10px;
   border-radius: 10px;
   margin: 0px 5px;
}
button.timeout-button[ref="Logout"] {
   border-color: #555;
   background-color: #171717;
   color: #fdfdfd;
   margin-top: 5px;
}
button.timeout-button[ref="Login"] {
   border-color: #93191C;
   background-color: #93191C;
   color: #fdfdfd;
   height: 35px;
}

/*-- Theme Components --*/
#Login {
   top: 10px;
   right: 10px;
   position: absolute;
}
#Logo {
   z-index: 2;
   height: 150px;
   margin-top: 90px;
}
#TopNav {
   height: 95px;
   margin: 0 auto;
   position: relative;
   background-color: #888;
}
#Clock iframe { margin-top: 4px; margin-left: -2px; }
#Clock {
   top: 5px;
   right: 10px;
   width: 242px;
   position: absolute;
   text-align: center;
   vertical-align: middle;
}
#SearchBox {
   top: 40px;
   right : 10px;
   width: 252px;
   padding: 0px;
   padding-top: 5px;
   position: absolute;
   text-align: center;
   vertical-align: middle;
   border-radius: 10px 10px 0px 0px;
}
#Search input:focus { outline: none; }
#Search input[type="text"] {
   border: 0;
   width: 215px;
   height: 19px;
   color: #fdfdfd;
   margin-left: 3px;
   background-color: #272727;
}
.search_slct { top: -2px; position: relative; }
.srch_slct {
   width: 74px;
   height: 20px;
   cursor: pointer;
   font-size: 12px;
   text-align: center;
   border-radius: 0px 0px 10px 10px;
   border-top: 2px solid #93191C;
}
.selected { background-color: #555; cursor: default; }
.selected:hover { text-decoration: none; }
#NavLeft {
   top: 5px;
   left: 10px;
   z-index: 3;
   position: absolute;
   width: 35px;
}
#NavRight {
   top: 5px;
   left: 50px;
   z-index: 3;
   position: absolute;
   width: 165px;
}
a .frame:hover { background-color: #171717; }
.ui-menu-item:hover a, .ui-menu-item:hover, .ui-menu-item:active {
	color: #fdfdfd;
	background-color: #171717;
}
.ui-autocomplete {
   width: 200px;
   overflow: hidden;
   max-height: 302px;
   background-color: #272727;
   border: 1px solid #555;
}
.ui-autocomplete li {
	padding: 0 3px;
	font-size: 16px;
	line-height: 20px;
}
.ui-helper-hidden-accessible { display: none; }

#RarityContainer {
     text-align: center;
}
.rarity {
     width: 450px;
     height: 400px;
     display: inline-block;
     margin: 5px;
}
#RarityContainer .container {
     border: 0px;
}
#RarityContainer .container-header {
     font-size: 16px;
     padding: 0px;
     height: 45px;
     line-height: 28px;
     border-radius: 15px;
}
.rarity_image {
     width: 200px;
     height: 200px;
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     background-color: #555;
     margin: 5px;
     border-radius: 15px;
     border: 1px solid #171717;
}
.rarity-designer {
     font-size: 10px;
     line-height: 15px;
}
.rarity_stats {
     text-align: left;
     width: 50%;
     float: right;
     margin: 5px 5px;
     background-color: #555;
     border-radius: 10px;
     position: relative;
     padding-bottom: 5px;
}
.rarity_stats_line {
     padding-left: 10px;
     font-size: 12px;
     line-height: 23px;
}
.rarity_stats_line b {
     position: absolute;
     left: 70%;
     text-align: right;
     width: 20px;
}
#RarityContainer .rarity_stats_header {
     height: 28px;
     text-align: center;
     border-radius: 10px 10px 0px 0px;
}
.rarity_content {
     text-align: left;
     margin: 0px 5px;
     background-color: #555;
     border-radius: 10px;
}
.rarity_content .rarity_stats_line {
     line-height: 18px;
     padding: 5px 10px;
}