@charset "ISO-8859-1";

*{
	margin: 0;
	padding: 0;
}

html, body{
	height: 100%;
    width: 100%;
	background: #000;
	min-height: 685px;
}

#overall{
	margin: -1050px auto 0;
	width: 506px;
	z-index:50;
	
}
#sky {
    width:100%;
    height:1198px;
    position:relative;
    overflow:hidden;
    background:transparent url(img/portal/bg_sky.png) no-repeat top center;
    z-index:10;
}
#arena1 {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:1198px;
    background:transparent url(img/portal/arena1.png) no-repeat top center;
    z-index:20;
}
#arena2 {
    position:absolute;
    top:374px;
    left:0px;
    width:100%;
    height:1198px;
    background:transparent url(img/portal/arena2.png) no-repeat top center;
    z-index:20;
}
#arena3 {
    position:absolute;
    top:688px;
    left:0px;
    width:100%;
    height:1198px;
    background:transparent url(img/portal/arena3.png) no-repeat top center;
    z-index:20;
}
#gladiatorz {
    position:absolute;
    top:30px;
    left:0px;
    width:100%;
    height:1198px;
    background:transparent url(img/portal/gladiatorz.png) no-repeat top center;
    z-index:20;
}


#rand {
    position:absolute;
    width:100%;
    height:1198px;
    background:transparent url(img/portal/rand.png) no-repeat top center;
    z-index:40;
}

#cloud1 {
    position:absolute;
    top:-10px;
    height:200px;
    width:475px;
    background:url(img/portal/cloud1.png) 0 0 no-repeat;
    -webkit-animation-name: cloud1;
    -webkit-animation-duration: 65s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: cloud1;
    -moz-animation-duration: 65s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	 animation-name: cloud1;
     animation-duration: 65s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
	-o-animation-name: cloud1;
    -o-animation-duration: 65s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes cloud1 {
    0% {left:-250px;}
    100% {left:1464px;}
}
@-moz-keyframes cloud1 {
    0% {left:-250px;}
    100% {left:1464px;}
}
@keyframes cloud1 {
    0% {left:-250px;}
    100% {left:1464px;}
}
@-o-keyframes cloud1 {
    0% {left:-250px;}
    100% {left:1464px;}
}

#cloud2 {
    position:absolute;
    top:40px;
    height:150px;
    width:324px;
    background:transparent url(img/portal/cloud2.png) 0 0 no-repeat;
    -webkit-animation-name: cloud2;
    -webkit-animation-duration: 85s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: cloud2;
    -moz-animation-duration: 85s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	 animation-name: cloud2;
     animation-duration: 85s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
	-o-animation-name: cloud2;
    -o-animation-duration: 85s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes cloud2 {
    0% {left:-100px;}
    100% {left:1464px;}
}
@-moz-keyframes cloud2 {
    0% {left:-100px;}
    100% {left:1464px;}
}
@keyframes cloud2 {
    0% {left:-100px;}
    100% {left:1464px;}
}	
@-o-keyframes cloud2 {
    0% {left:-100px;}
    100% {left:1464px;}
}
		
#cloud3 {
    position:absolute;
    top:-80px;
    height:200px;
    width:432px;
    background:transparent url(img/portal/cloud3.png) 0 0 no-repeat;
    -webkit-animation-name: cloud3;
    -webkit-animation-duration: 110s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: cloud3;
    -moz-animation-duration: 110s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	 animation-name: cloud3;
     animation-duration: 110s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
	-o-animation-name: cloud3;
    -o-animation-duration: 110s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes cloud3 {
    0% {left:-700px;}
    100% {left:1464px;}
}
@-moz-keyframes cloud3 {
    0% {left:-700px;}
    100% {left:1464px;}
}
@keyframes cloud3 {
    0% {left:-700px;}
    100% {left:1464px;}
}	
@-o-keyframes cloud3 {
    0% {left:-700px;}
    100% {left:1464px;}
}
	#cloud4 {
    position:absolute;
    top:-30px;
    height:200px;
    width:432px;
    background:transparent url(img/portal/cloud4.png) 0 0 no-repeat;
    -webkit-animation-name: cloud4;
    -webkit-animation-duration: 75s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: cloud4;
    -moz-animation-duration: 75s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	 animation-name: cloud4;
     animation-duration: 75s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
	-o-animation-name: cloud4;
    -o-animation-duration: 75s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes cloud4 {
    0% {left:-700px;}
    100% {left:1464px;}
}
@-moz-keyframes cloud4 {
    0% {left:-700px;}
    100% {left:1464px;}
}
@keyframes cloud4 {
    0% {left:-700px;}
    100% {left:1464px;}
}	
@-o-keyframes cloud4 {
    0% {left:-700px;}
    100% {left:1464px;}
}
#cloud5 {
    position:absolute;
    top:40px;
    height:231px;
    width:500px;
    background:transparent url(img/portal/cloud5.png) 0 0 no-repeat;
    -webkit-animation-name: cloud5;
    -webkit-animation-duration: 80s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: cloud5;
    -moz-animation-duration: 80s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	 animation-name: cloud5;
     animation-duration: 80s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
	-o-animation-name: cloud5;
    -o-animation-duration: 80s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes cloud5 {
    0% {left:-900px;}
    100% {left:1464px;}
}
@-moz-keyframes cloud5 {
    0% {left:-900px;}
    100% {left:1464px;}
}
@keyframes cloud5 {
    0% {left:-900px;}
    100% {left:1464px;}
}	
@-o-keyframes cloud5 {
    0% {left:-900px;}
    100% {left:1464px;}
}										
#seagull {
    position:absolute;
    height:100px;
    width:75px;
    background:transparent url(img/portal/seagull.gif) 0 0 no-repeat ;
	opacity:0.8;
    -webkit-animation-name: seagull;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: seagull;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	 animation-name: seagull;
     animation-duration: 15s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
	-o-animation-name: seagull;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes seagull {
    0% {
        left:-30px;
        top:50px;
        -webkit-transform:scale(0.1);
    }
    100% {
        left:1464px;
        top:70px;
        -webkit-transform:scale(0.6);
    }
}
	@-moz-keyframes seagull {
	0% {
        left:-30px;
        top:50px;
       -moz-transform:scale(0.1);
    }
    100% {
        left:1464px;
        top:70px;
       -moz-transform:scale(0.6);
    }
}
@keyframes seagull {
	0% {
        left:-30px;
        top:50px;
       transform:scale(0.1);
    }
    100% {
        left:1464px;
        top:70px;
       transform:scale(0.6);
    }
}
@-o-keyframes seagull {
	0% {
        left:-30px;
        top:50px;
       -o-transform:scale(0.1);
    }
    100% {
        left:1464px;
        top:70px;
       -o-transform:scale(0.6);
    }
}
#seagull2 {
    position:absolute;
    height:100px;
    width:75px;
    background:transparent url(img/portal/seagull2.gif) 0 0 no-repeat;
	opacity:0.8;
    -webkit-animation-name: seagull2;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: seagull2;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	animation-name: seagull2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	-o-animation-name: seagull2;
    -o-animation-duration: 10s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes seagull2 {
    0% {
        left:-30px;
        top:90px;
        -webkit-transform:scale(0.5);
    }
    100% {
        left:1464px;
        top:110px;
        -webkit-transform:scale(0.9);
    }
}
	@-moz-keyframes seagull2 {
	0% {
        left:-30px;
        top:90px;
       -moz-transform:scale(0.5);
    }
    100% {
        left:1464px;
        top:110px;
       -moz-transform:scale(0.9);
    }
}
@keyframes seagull2 {
	0% {
        left:-30px;
        top:90px;
       transform:scale(0.5);
    }
    100% {
        left:1464px;
        top:110px;
       transform:scale(0.9);
    }
}
@-o-keyframes seagull2 {
	0% {
        left:-30px;
        top:90px;
       -o-transform:scale(0.5);
    }
    100% {
        left:1464px;
        top:110px;
       -o-transform:scale(0.9);
    }
}
#seagull3 {
    position:absolute;
    height:100px;
    width:75px;
    background:transparent url(img/portal/seagull3.gif) 0 0 no-repeat;
	opacity:0.8;
    -webkit-animation-name: seagull3;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: seagull3;
    -moz-animation-duration: 20s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	animation-name: seagull3;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	-o-animation-name: seagull3;
    -o-animation-duration: 20s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes seagull3 {
    0% {
        right:-30px;
        top:-30px;
        -webkit-transform:scale(0.1);
    }
    100% {
        right:1464px;
        top:-15px;
        -webkit-transform:scale(0.6);
    }
}
	@-moz-keyframes seagull3 {
	0% {
        right:-30px;
        top:-30px;
       -moz-transform:scale(0.1);
    }
    100% {
        right:1464px;
        top:-15px;
       -moz-transform:scale(0.6);
    }
}

@keyframes seagull3 {
	0% {
        right:-30px;
        top:-30px;
       transform:scale(0.1);
    }
    100% {
        right:1464px;
        top:-15px;
       transform:scale(0.6);
    }
}
@-o-keyframes seagull3 {
	0% {
        right:-30px;
        top:-30px;
       -o-transform:scale(0.1);
    }
    100% {
        right:1464px;
        top:-15px;
       -o-transform:scale(0.6);
    }
}
text {
    position:relative;
    top:50px;
    left:500px;
    width:209px;
    height:178px;
    background:transparent url(img/portal/text.png);
    z-index:80;
}
#chead{
	height: 19px;
	position:relative;
	background: url(img/portal/content_header.png);
	z-index:50;
}

#content{
	position: relative;
	min-height: 511px;
	padding: 0px 10px 30px;
	background: url(img/portal/content2.png);
	z-index:50;
}

#cfoot{
	height: 42px;
	position:relative;
	background: url(img/portal/content_footer.png);
	z-index:40;
}

#undercontent{
    position:relative;
	margin: -60px 60px;
	color: #000000;
	display: none;
    z-index: 51;
}

#leftcont{
	float: left;
	text-align: center;
	width: 204px;
}

#login.box{
	float: right;
	width: 242px;
	height: 157px;
	margin-top: 3px;
	background: url(img/portal/login_box.png);
	margin-right: 8px;
	padding: 20px 18px 20px 14px;
}

#login table{
	width: 100%;
	border: none;
}

#login table th{
	font-weight: normal;
	width: 43%;
	font-size: 14px;
	padding-right: 6px;
	vertical-align: middle;
}

#login table td, #login table th{
	text-align: right;
}

#pwdlink, .small{
	font-size: 11px;
	color: #a08334;
}

h1{
	font-size: 17px;
	color: #bb1320;
	padding: 0px 4px 0px 6px;
	text-align: right;
	margin-right: -4px;
}

#desc{
	text-align: right;
	font-weight: bold;
	font-size: 13px;
	padding: 3px 6px 0px;
	line-height: 20px;
}

div.imagebar{
	margin-top: 6px;
	margin-left: 15px;
}

div.imagebar div{
	background: url(img/portal/image_border.png) #090909;
	padding: 2px;
	height: 78px;
	width: 106px;
	cursor: pointer;
	float: left;
	margin: 0px 1px 0px 2px;
}

div.imagebar div img{
	height: 100%;
	width: 100%;
}

div.imagebar a.more{
	color: #867027;
	display: block;
	width: 100%;
	text-align: center;
	margin: 4px 0px;
}

#quickregister{
	width: 456px;
	margin: 20px 17px 40px;
}

#recentupdates{
	margin: 0px 17px 0px 20px;
}

#recentupdates td img{
	margin: 3px 10px;
}

#view-content h1, #view-content h2{
	text-align: center;
}

#view-content h1{
	padding-top: 80px;
}

#nav{
	bottom: -37px;
	padding: 20px;
	width: 450px;
	padding-bottom: 0px;
	font-weight: bold;
	text-align: center;
	position: absolute;
	color:#2f0000;
}

#nav a{
      color:#cba248;
	  
	  }

#nav span{
	color: #f77;
}

.error{
	text-align: center;
	font-weight: bold;
	/*color: #250100;*/
	color: #772f2a;
	margin-bottom: 9px;
}

#registerform td{
	padding: 1px;
}

#leftcont h1 {
	text-align: center;
}
#leftcont div strong {
	text-align: left;
}

/* v11.1 UX */
button[disabled]{opacity:0.6;cursor:not-allowed}
#loginMsg,#registerMsg{min-height:18px}


/* v11.2 Modern-Portal refinements */
:root{
  --panel-bg: rgba(10,14,20,0.55);
  --panel-brd: rgba(255,255,255,0.10);
  --panel-shadow: 0 10px 30px rgba(0,0,0,0.45);
  --text-soft: rgba(232,238,247,0.85);
}

#content .box, #content .panel, #content .card{
  background: var(--panel-bg);
  border: 1px solid var(--panel-brd);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(6px);
}

#content h2, #content h3{
  letter-spacing: 0.2px;
}

#content input[type="text"], #content input[type="email"], #content input[type="password"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #e8eef7;
  outline: none;
}
#content input:focus{
  border-color: rgba(168,199,255,0.55);
  box-shadow: 0 0 0 4px rgba(168,199,255,0.10);
}

#content button{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #e8eef7;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
#content button:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }
#content button:active{ transform: translateY(1px); }
#content button[disabled]{ opacity: 0.55; cursor: not-allowed; }

#loginMsg, #registerMsg{
  color: var(--text-soft);
}
#loginMsg.bad, #registerMsg.bad{ color: #ffb4b4; }
#loginMsg.ok,  #registerMsg.ok { color: #b8f7c7; }

#statusRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.10);
}

#statusRow .who{
  color: var(--text-soft);
  font-size: 13px;
}

#gotoGameBtn{
  border-color: rgba(168,199,255,0.35);
}
#gotoGameBtn:hover{
  border-color: rgba(168,199,255,0.60);
  box-shadow: 0 0 0 4px rgba(168,199,255,0.10);
}

/* Responsive */
@media (max-width: 900px){
  #content{ transform: none !important; }
}