@charset "utf-8";

@font-face {font-family: 'commando';
		 src: url('../fonts/commando/commando.woff2') format('woff2'),
         url('../fonts/commando/commando.woff') format('woff'),
         url('../fonts/commando/commando.ttf') format('truetype'),
         url('../fonts/commando/commando.svg#commandocommando') format('svg');}

@font-face {font-family: 'kremlin';
		 src: url('../fonts/kremlin/kremlin.woff2') format('woff2'),
         url('../fonts/kremlin/kremlin.woff') format('woff'),
         url('../fonts/kremlin/kremlin.ttf') format('truetype'),
         url('../fonts/kremlin/kremlin.svg#kremlinregular') format('svg');}
		 
html, body {margin: 0; padding: 0; overflow-x: hidden; height: 100%; width: 100%;}

html {background: url(../images/bh_bg2.png) repeat fixed #333;
cursor: url(../images/aw_hand.cur), url(images/aw_hand.cur), auto;
overflow: auto;}

#testdiv {background: blue;
width: 100px; height: 100px;}

.tooltip {position: relative; display: inline-block; margin: 0px auto; text-align: center;
z-index: 0; z-index: 10;}

.tooltiptext 
   {width: 210px;
    height: 240px;
    background-color: #333;
    color: #fff;
	display: block;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 10;
    top: -5px;
    right: 110%;
    opacity: 0;
	visibility: hidden;}
	
.tooltiptext:before 
   {content: "";
    position: absolute;
    top: 5%;
    left: 100%;
    margin-top: -7px;
    border: 7px solid;
    border-color: transparent transparent transparent #F00;
	z-index: 10;}	

.tooltiptext:after 
   {content: "";
    position: absolute;
    top: 5%;
    left: 100%;
    margin-top: -5px;
    border: 5px solid;
    border-color: transparent transparent transparent #000;
	z-index: 10;}

.tooltip:hover > .tooltiptext {opacity: 1; visibility: visible;}


#quote-txt, .reg-txt {font: bold 10px tahoma, geneva, sans-serif; color: #FFF; text-align: justify;}
#quote-txt {color: #000; text-align: center;}

.hd-txt, .small-hd-txt {font: 14px kremlin, tahoma, sans-serif;}
.small-hd-txt {font-size: 11px;}

.hidden {display: none;}

.no-margin {margin: 0;}

.shadow {-webkit-box-shadow: 0 0 5px 5px #000; box-shadow: 0 0 5px 5px #000;}

.transition {-webkit-transition: all 0.4s linear; transition: all 0.4s linear;
/*-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;*/}

.transition2 {-webkit-transition: opacity 0.4s ease-in-out; opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;}

.flex {display: -webkit-flex; display: flex; 
-webkit-justify-content: center; justify-content: center; 
-webkit-align-items: center; align-items: center;}

.flex-vertical {display: -webkit-flex; display: flex;
-webkit-flex-direction: column; flex-direction: column;
-webkit-justify-content: space-around; justify-content: space-around; 
-webkit-align-content: space-around; align-content: space-around;
-webkit-align-items: center; align-items: center;}

.flexpic {display: -webkit-flex; display: flex;
-webkit-flex-direction: row; flex-direction: row;
-webkit-flex-wrap: wrap; flex-wrap: wrap;
-webkit-justify-content: center; justify-content: center;
-webkit-align-content: center; align-content: center;
-webkit-align-items: center; align-items: center;}

#profile {display: block;
position: relative; 
margin: 75px auto 0; 
height: 500px; width: 700px;
background: url(../images/skin_bg.png) repeat; 
border: 25px solid #639;
-moz-border-image: url(../images/rounded_corners.png) 25 round; 
-webkit-border-image: url(../images/rounded_corners.png) 25 round; 
-o-border-image: url(../images/rounded_corners.png) 25 round; 
border-image: url(../images/rounded_corners.png) 25 round;
-webkit-border-radius: 25px; border-radius: 25px;
-webkit-box-shadow: 0 0 10px 10px #000; box-shadow: 0 0 10px 10px #000;
text-align: center;}

#main {background: url(../images/metal.png) repeat #333;
margin: 0 auto; 
height: 450px; width: 600px;
overflow: hidden;
margin-top: 10px; 
-webkit-box-shadow: 0 0 3px 3px #444; box-shadow: 0 0 3px 3px #444;}

/* Current Configuration */
.content, #first {position: absolute;
overflow: auto;
opacity: 0;
width: 600px; height: 450px;}

.content:target {opacity: 1; z-index: 1;}

#first {opacity: 1;}

@keyframes spin {100% { transform:rotate(360deg);}}
@-webkit-keyframes spin {100% { -webkit-transform: rotate(360deg);}}

#spin {-webkit-animation: spin 20.0s linear infinite;
animation: spin 20.0s linear infinite;}

#header {position: relative; 
margin: -70px auto 0; 
display: inline-block; 
width: 592px; height: 92px; 
padding: 0; 
background-color: #000;
text-align: center; 
-webkit-box-shadow: 0 0 0 4px #000; box-shadow: 0 0 0 4px #000;
-webkit-border-radius: 50px / 100px; border-radius: 50px / 100px;}

#name-title {text-align: center; display: block; margin: 0 auto; font: 95px commando, impact, sans-serif; color: #FFF;
text-shadow: 
-3px -3px 0 #639,  
3px -3px 0 #639,
-3px 3px 0 #639,
3px 3px 0 #639;
line-height: 101%;}

#nickname {text-align: center; display: block; font: bold italic 11px sans-serif; color: #FFF; margin-top: -16px;
text-shadow: 
-1px -1px 0 #639,  
1px -1px 0 #639,
-1px 1px 0 #639,
1px 1px 0 #639;}

#banner-left, #banner-right {display: block; height: 157px; width: 113px; background: url(../images/adder_banner.png) no-repeat; margin-top: -13px; position: relative; z-index: 2;}
#banner-left {float: left; margin-left: 30px;}
#banner-right {float: right; margin-right: 30px;}

#aw_logo {position: relative; margin: 8px auto 0; display: block;}

#copose {position: absolute;
left: 657px; top: 0; bottom: 0; right: 0;
margin: auto;
height: 342px; width: 114px;
cursor: pointer;}

.outfit {background: url(../images/adder_outfits.png) no-repeat -1px -1px;
display: block;
height: inherit; width: inherit; 
position: inherit;
opacity: 1;}

#cociv {background-position: -116px -1px;
opacity: 0;}

#copose:hover .outfit {opacity: 0;}
#copose:hover #cociv {opacity: 1;}

.bars, .bars2 {position: absolute;
border: solid 2px #000;
background-color: #000;}

.bars2 {left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
-webkit-border-radius: 50px / 100px; border-radius: 100px / 50px;}

#bar-left {left: 3px; bottom: -34px; width: 240px; height: 32px; -webkit-border-radius: 50px / 100px; border-radius: 50px / 100px;}
#bar-right {right: 3px; bottom: -34px; width: 240px; height: 32px; -webkit-border-radius: 50px / 100px; border-radius: 50px / 100px;}

#bar-co {height: 375px; width: 80px; left: 672px;}

.ban-color, .ban-gray {background: url(../images/anon_banner.png) no-repeat;
/*background: url(../images/co_banner.png) no-repeat;*/
display: block;
height: 91px; width: 69px;
position: absolute;
cursor: pointer;}

.ban-color:hover > .ban-gray {opacity: 0;} 

/*#unknown1 {left: 10px; bottom: -83px; background-position: -281px -1px;}
#unknown2 {left: 170px; bottom: -83px; background-position: -421px -1px;}
#unknown3 {right: 170px; bottom: -83px; background-position: -561px -1px;}
#unknown4 {right: 10px; bottom: -83px; background-position: -701px -1px;}

#co1 {background-position: -211px -1px;}
#co2 {background-position: -351px -1px;}
#co3 {background-position: -491px -1px;}
#co4 {background-position: -631px -1px;}*/

#unknown1 {left: 10px; bottom: -83px; background-position: -1px -1px;}
#unknown2 {left: 170px; bottom: -83px; background-position: -1px -1px;}
#unknown3 {right: 170px; bottom: -83px; background-position: -1px -1px;}
#unknown4 {right: 10px; bottom: -83px; background-position: -1px -1px;}

#co1 {background-position: -1px -1px;}
#co2 {background-position: -1px -1px;}
#co3 {background-position: -1px -1px;}
#co4 {background-position: -1px -1px;}

#noindent {list-style-type: none; margin: 0; padding: 5px 2px 5px 2px;}

#nav {top: 0; bottom: 0; right: 0; left: -726px;
height: 375px; width: 64px;}

#nav a {display: block;
width: 88px;
background-color: #DDD; 
font: bold 15px sans-serif, arial, veranda;
text-transform: uppercase;
text-align: center;
color: #000;
text-decoration: none;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
border: 3px solid #000;
-webkit-border-radius: 50px / 100px; border-radius: 50px / 100px;}

#nav a:hover 
{color: #fff;
display: block;
background-color: #333;
-webkit-box-shadow: 0 0 5px 5px #8047cc; box-shadow: 0 0 5px 5px #8047cc;}

a:link {color: #FFF;}
a:visited {color: #FFF;}
a:hover {color: #F00;}
a:active {color: #F00;}

a[href^="https"] {font: none;}

.header, .uheader {position: relative;
display: block;
margin: 14px auto 18px;
background-color: #333;
width: 250px;
border: solid #639;
border-width: 5px 0;
-webkit-border-radius: 3px; border-radius: 3px;}

.uheader {width: 357px;}

.header-title, .uh-2 {width: 126px;
color: #fff;
text-align: center;
margin: 0 auto;
font: normal 23px kremlin;
text-transform: uppercase;
text-shadow: 
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
display: block;}

.uh-2 {width: 224px;}

.header-title-bg {display: block;
width: 100%;
border: solid #FFF;
border-width: 1px 0;}

#header, .bars, .header-title, .uh-2, .header-title-bg, [id^=tab]:checked + label {background: #555555;
background: -moz-linear-gradient(top,  #555555 0%, #555555 50%, #000000 50%, #222222 100%);
background: -webkit-linear-gradient(top,  #555555 0%,#555555 50%,#000000 50%,#222222 100%);
background: linear-gradient(to bottom,  #555555 0%,#555555 50%,#000000 50%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#222222',GradientType=0 );}

.bars2 {background: #333333;
background: -moz-linear-gradient(left,  #333333 0%, #000000 50%, #555555 50%, #555555 100%);
background: -webkit-linear-gradient(left,  #333333 0%,#000000 50%,#555555 50%,#555555 100%);
background: linear-gradient(to right,  #333333 0%,#000000 50%,#555555 50%,#555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#555555',GradientType=0 );}

h1, h2, label {background: #8047cc;
background: -moz-linear-gradient(top,  #8047cc 50%, #000000 50%);
background: -webkit-linear-gradient(top,  #8047cc 50%,#000000 50%);
background: linear-gradient(to bottom,  #8047cc 50%,#000000 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8047cc', endColorstr='#000000',GradientType=0 );
-webkit-border-radius: 50px / 100px; border-radius: 50px / 100px;
color: #fff; 
border: solid 2px #fff;
text-shadow:
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}

#enemy {background: #e50000;
background: -moz-linear-gradient(top,  #e50000 50%, #4c0000 50%);
background: -webkit-linear-gradient(top,  #e50000 50%,#4c0000 50%);
background: linear-gradient(to bottom,  #e50000 50%,#4c0000 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e50000', endColorstr='#4c0000',GradientType=0 );}

#friend {background: #00e500;
background: -moz-linear-gradient(top,  #00e500 50%, #004c00 50%);
background: -webkit-linear-gradient(top,  #00e500 50%,#004c00 50%);
background: linear-gradient(to bottom,  #00e500 50%,#004c00 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e500', endColorstr='#004c00',GradientType=0 );}

.head-3 {font: bold 11px sans-serif, veranda, arial; text-align: center; color: #F00; margin-bottom: 15px;
background: #000; background: rgba(0,0,0,0.5);
-webkit-box-shadow: 0 3px 3px #000, 0 -3px 3px #000; box-shadow: 0 3px 3px #000, 0 -3px 3px #000;
width: auto;
padding: 3px 0;}
.head-4 {font: bold 11px sans-serif, veranda, arial; text-align: center; color: #F00;}

h1:before, h1:after, .star:before, .star:after {content: url(../images/small-star.png); padding: 3px;}
#cmdchain h1:before, #cmdchain h1:after {display: none;}

.header-stars, .uh-stars {margin: 0 auto;
background:url(../images/bg_stars.png) repeat-x;
width: 100%;
background-position: -1px;
text-align: center;
display: block;}

.uh-stars {background-position: 0;}

#meter {position: absolute;
top: 60px;
left: 20px;
height: auto; width: auto;}

#meter-header {width: 130px; margin: 0 auto;}

#starmeter {margin: 5px auto 0;}

#quotes {display: block; position: relative; margin: 30px auto 0;}
/*#quotes {position: absolute;
top: 80px;
left: 0;
right: 0;}*/
#quotes h1 {width: 100px; margin: 0 auto; margin-top: 0; position: relative; z-index: 2;}
#quotebox {height: 48px; width: 215px;
margin: 0 auto;
display: block;
background: url(../images/dossier/quotebg.png) no-repeat;}

.quotebox-p {margin: 0; 
height: 100%; width: 100%;}
#right {padding-left: 50px; padding-right: 10px;}

/*#quotes h1 {width: 100px; margin: 0 auto; margin-top: 0; position: relative; z-index: 2;}
#quotes {margin-top: 40px;}
#quotebox {width: 215px;
height: 48px;
margin: 0 auto;
display: block;
background: url(../images/dossier/quotebg.png) no-repeat;}
#quotebox p {display: table-cell; height: 48px; width: 163px; padding-left: 50px; vertical-align: middle;}*/

#skill {position: absolute;
height: 240px; width: 215px;
bottom: 20px;
left: 205px;}

#skill p {margin: 0; text-align: justify; font-weight: bold; text-shadow: 
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}

hr {width: 75%; color: #f00; border-color: #f00;}

#skill img {display: block; margin: 0 auto; position: relative;}

#hit, #miss {display: block;
height: 15px; width: 32px;
margin: 0 auto;
background: url(../images/dossier/hit-miss.png) no-repeat;}

#hit {background-position: -1px -1px;}
#miss {background-position: -34px -1px;}

#hit-miss {position: absolute;
width: 140px; 
left: 20px;
top: 140px;}

.hm-txt {font: bold 12px sans-serif, veranda, arial;
color: #fff;
margin-top: 0;}

#links {position: absolute;
top: 60px;
right: 20px;
height: auto;
width: auto;}
#links-header {width: 90px; margin: 0 auto;}
#places {padding: 5px 10px 5px 25px; display: inline-block; margin: 0 auto;}
#playlist {position: relative; margin: 0 auto; display: inline-block; z-index: 1;}
.song, #ask {list-style-image: numeric; color: #F00; text-align: left; padding: 0; font: 14px impact, arial, veranda; text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}

.song:after {content: url(../images/dossier/music.png); padding-left: 2px;}
#ask:after {content: url(../images/dossier/bubble.png); padding-left: 2px;}

#cmdchain {position: absolute; 
height: auto;
width: 120px;
background-color: #000;
bottom: 15px;
right: 20px;
text-align: center;
padding: 0;
border: solid 1px #FFF;}

#bh_logo {height: 16px; width: 29px; position: relative; margin: -3px 0;}

.txt-shadow {text-shadow: 
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}

#attributes {position: absolute; 
height: auto; width: 140px;
background-color: #000;
left: 20px; bottom: 15px;
text-align: center;
padding: 0;
border: solid 1px #FFF;}

#attr-header {width: 152px; margin-left: -8px;}

.info-header {width: 150px;} 
.dos-table {width: 100%; border: none; border-spacing: 0;}
.even {background-color: #666;}
.odd {background-color: #333;}
.dos-td {padding: 0 1px; border: 0;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.red {color: #F00;}

#cmdchain h1 {width: 140px; margin-left: -13px; line-height: 145%;}
#abilities h1, #contacts h1, label {width: 125px; font-size: 14px;}
.unit-head {width: 75px; margin: 0 auto;}
#units .top {margin-top: 10px;}
.cmdsection {display: block; width: 131px; margin-left: -6px; background: #000;}

#ooclist {margin: 0; padding: 5px 10px 5px 25px;}
.point {margin-bottom: -5px; padding: 10px 5px 10px 5px;}

.description {padding: 0 5px;}

.spaced {margin: 15px auto;}

.stripe {width: 100%;
height: auto; 
margin: 10px 0;
padding: 6px 0;
-webkit-box-shadow: 0 3px 3px #000, 0 -3px 3px #000; box-shadow: 0 3px 3px #000, 0 -3px 3px #000;
background-color: #000; background-color: rgba(0,0,0,0.5);}

.stripe2 {padding: 2px 0;}

.pics {width: 75px; height: 75px; margin: 5px 5px 0 5px;}
.pics:hover {width: 75px; height: 75px; background-color: blue; cursor: pointer;}	

.skillgray, .skillcolor {background: url(../images/abilities/skills.png) no-repeat;
height: 40px; width: 40px; 
display: inline-block;
position: relative;
margin: 0 auto;
-webkit-border-radius: 25px; border-radius: 25px;}

.skill {margin: 0 3px;
cursor: pointer;}

 
.skillgray {background-color: #444;
-webkit-box-shadow: 0 0 0 3px #888; box-shadow: 0 0 0 3px #888;}

#spgray {background-position: -6px -6px;}
#apcbgray {background-position: -56px -6px;}
#pdgray {background-position: -108px -6px;}
#pfgray {background-position: -160px -6px;}

.skillcolor {background-color: #000;
-webkit-box-shadow: 0 0 0 3px #F00,
0 0 0 4px #000;
box-shadow: 0 0 0 3px #F00,
0 0 0 4px #000;
opacity: 0;}

#sp {background-position: -210px -6px;}
#apcb {background-position: -260px -6px;}
#pd {background-position: -312px -6px;}
#pf {background-position: -364px -6px;}

.skillcolor:hover {opacity: 1;}

.copwr {background: url(../images/starring.png) repeat 5px 22px;
margin: 10px 5px;
cursor: pointer;
-webkit-box-shadow: 0 0 5px 5px #333; box-shadow: 0 0 5px 5px #333;
display: -webkit-inline-flex; 
display: -webkit-inline-box; 
display: -ms-inline-flexbox; 
display: inline-flex;}

/*.copwr:hover {-webkit-box-shadow: 0 0 5px 5px #FFF;
box-shadow: 0 0 5px 5px #FFF;}*/

.pwr {height: 64px; width: 181px;}

.starpwr {background: url(../images/abilities/cp_powers.png) no-repeat;}

#cpwr {background-position: -1px -1px;}
#scpwr {background-position: -183px -1px;}
#tagpwr {background-position: -365px -1px;}
#tagpwr2 {background-position: -547px -1px;}
#tagpwr3 {background-position: -729px -1px;}
#tagpwr4 {background-position: -911px -1px;}

#cp, #scp, .tag {background: url(../images/abilities/powerbgs.png) repeat #000;
font: 25px impact, arial, san-serif;
color: #fff;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000,
0 0 8px #fff,
0 0 8px #fff,
0 0 8px #fff,
0 0 8px #fff,
0 0 8px #fff,
0 0 8px #fff,
0 0 8px #fff,
0 0 8px #fff,
0 0 8px #fff;
opacity: 0;}

#cp {background-position: 0 0; 
-webkit-animation: cp-tab 0.5s linear infinite, cp-bg 0.3s linear infinite;
animation: cp-tab 0.5s linear infinite, cp-bg 0.3s linear infinite;}
#scp {background-position: 0 -80px;
-webkit-animation: scp-tab 1.0s linear infinite, scp-bg 0.2s steps(3) infinite;
animation: scp-tab 1.0s linear infinite, scp-bg 0.2s steps(3) infinite;}
.tag {background-position: 0 -160px;
-webkit-animation: tag 0.8s linear infinite, tag-bg 0.3s linear infinite;
animation: tag 0.8s linear infinite, tag-bg 0.3s linear infinite;}

#cp:hover, #scp:hover, .tag:hover {opacity: 1;}

@keyframes tag {	
0%, 100% {color: #fff; box-shadow: 0 0 5px 5px #fff;}    
25% {color: #90F; box-shadow: 0 0 5px 5px #90f;}
50% {color: #00f; box-shadow: 0 0 5px 5px #00f;}
75% {color: #f00; box-shadow: 0 0 5px 5px #f00;}}

@-webkit-keyframes tag {	
0%, 100% {color: #fff; -webkit-box-shadow: 0 0 5px 5px #fff;}    
25% {color: #90F; -webkit-box-shadow: 0 0 5px 5px #90f;}
50% {color: #00f; -webkit-box-shadow: 0 0 5px 5px #00f;}
75% {color: #f00; -webkit-box-shadow: 0 0 5px 5px #f00;}}
	
@keyframes cp-bg {0% {background-position: 0 0;} 100% {background-position: 128px 0; }}
@-webkit-keyframes cp-bg {0% {background-position: 0 0;} 100% {background-position: 128px 0; }}
	
@keyframes scp-bg {0% {background-position: 0 240px;} 100% {background-position: -128px 240px;}}
@-webkit-keyframes scp-bg {0% {background-position: 0 240px;} 100% {background-position: -128px 240px;}}
	
@keyframes tag-bg {0% {background-position: 0 -160px;} 100% {background-position: 0 -240px;}}
@-webkit-keyframes tag-bg {0% {background-position: 0 -160px;} 100% {background-position: 0 -240px;}}
	
.phototitle {text-align: center;
font: 11px kremlin, helvetica, sans-serif;
color: white;
width: 120px;
margin: auto;}

.thumbally, .thumbenemy {height: auto; width: 130px;
text-align: center;
background: none;}

.thumbboxally, .thumbboxenemy {height: 90px; width: 120px;}

.thumbboxally  {border: 0px dotted #0F0;} 
.thumbboxenemy {border: 0px dotted #F00;}

.thumbboxally:hover, .thumbboxenemy:hover {border: 0 solid #FFF;}

#placeholder1, #placeholder2 {width: 100%; height: 100%; display: block; background-color: transparent;}

input[type=radio] {display:none;}
	  
.tabs {width: auto;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 10px 10px;}
	  
.tabs li {display: inline-block; margin: 8px 10px;}
	  
.tabs label {display: block;
margin-bottom: 13px;
width: 158px;
cursor: pointer;
position: relative;}

#normal-tab:hover {-webkit-box-shadow: 0 0 5px 5px #fff; box-shadow: 0 0 5px 5px #fff;
color: #fff;}

#cp-tab:hover {-webkit-box-shadow: 0 0 5px 5px #ff0; box-shadow: 0 0 5px 5px #ff0;
color: #ff0;}

#scp-tab:hover {-webkit-box-shadow: 0 0 5px 5px #f00; box-shadow: 0 0 5px 5px #f00;
color: #f00;}

[id^=tab]:checked + #normal-tab {-webkit-animation: normal-tab 1.0s linear infinite;
animation: normal-tab 1.0s linear infinite;
-webkit-box-shadow: 0 0 5px 5px #fff; box-shadow: 0 0 5px 5px #fff;}
       
@keyframes cp-tab {
0%, 100% {color: #ff0; box-shadow: 0 0 5px 5px #ff0;}    
25%, 50% {color: #fa0; box-shadow: 0 0 5px 5px #fa0;}
75% {color: #fff; box-shadow: 0 0 5px 5px #FFF;}}

@-webkit-keyframes cp-tab {
0%, 100% {color: #ff0; -webkit-box-shadow: 0 0 5px 5px #ff0;}    
25%, 50% {color: #fa0; -webkit-box-shadow: 0 0 5px 5px #fa0;}
75% {color: #fff; -webkit-box-shadow: 0 0 5px 5px #fff;}}
	   
[id^=tab]:checked + #cp-tab {-webkit-animation: cp-tab 0.5s linear infinite;
animation: cp-tab 0.5s linear infinite;
-webkit-box-shadow: 0 0 5px 5px #ff0; box-shadow: 0 0 5px 5px #ff0;}

@keyframes scp-tab {
0%, 100% {color: #f00; box-shadow: 0 0 5px 5px #f00;}    
25% {color: #ff0; box-shadow: 0 0 5px 5px #ff0;}
50% {color: #fa0; box-shadow: 0 0 5px 5px #fa0;}
75% {color: #fff; box-shadow: 0 0 5px 5px #fff;}}

@-webkit-keyframes scp-tab {
0%, 100% {color: #f00; -webkit-box-shadow: 0 0 5px 5px #f00;}    
25% {color: #ff0; -webkit-box-shadow: 0 0 5px 5px #ff0;}
50% {color: #fa0; -webkit-box-shadow: 0 0 5px 5px #fa0;}
75% {color: #fff; -webkit-box-shadow: 0 0 5px 5px #fff;}}
	   
[id^=tab]:checked + #scp-tab {-webkit-animation: scp-tab 1.0s linear infinite;
animation: scp-tab 1.0s linear infinite;
-webkit-box-shadow: 0 0 5px 5px #f00; box-shadow: 0 0 5px 5px #f00;}

.tab-content {z-index: 2;
height: 280px; width: 100%;
margin-top: 8px;
display: none;
left: 0;
font-size: 20px;
position: absolute;
box-sizing: border-box;
overflow-y: auto;
-webkit-box-shadow: 0 0 3px 3px #000; box-shadow: 0 0 3px 3px #000;
background-color: #000;
background-color: rgba(0,0,0,0.5);}

[id^=tab]:checked ~ [id^=tab-content] {display: block;}

.unitbox {position: relative; display: inline-block; width: auto; height: auto; padding: 0; margin: 0 2px;}
.unitbox p {display: block; margin: 0; text-align: center; font: 11px arial;}

.unitimg {background: url(../images/units/bh_units.png) no-repeat #639; 
float: left;
height: 18px; width: 18px; 
margin: 15px 0; 
cursor: pointer;
-webkit-box-shadow: 0 0 2px 2px #639; box-shadow: 0 0 2px 2px #639;}

.unitimg a:hover {display: block; width: 100%; height: 100%; opacity: 0;}

#tchop {background-position: -1px -1px;}
#bchop {background-position: -20px -1px;}
#fight {background-position: -39px -1px;}
#bomb {background-position: -58px -1px;}
#sfight {background-position: -77px -1px;}
#bbomb {background-position: -96px -1px;}
#inf {background-position: -115px -1px;}
#mech {background-position: -134px -1px;}
#apc {background-position: -153px -1px;}
#recon {background-position: -172px -1px;}
#arty {background-position: -191px -1px;}
#rock {background-position: -210px -1px;}
#pipe {background-position: -229px -1px;}
#tank {background-position: -248px -1px;}
#mdtank {background-position: -267px -1px;}
#ntank {background-position: -286px -1px;}
#mgtank {background-position: -305px -1px;}
#aair {background-position: -324px -1px;}
#missle {background-position: -343px -1px;}
#ooze {background-position: -362px -1px;}
#bboat {background-position: -381px -1px;}
#land {background-position: -400px -1px;}
#sub {background-position: -419px -1px;}
#cruise {background-position: -438px -1px;}
#bship {background-position: -457px -1px;}
#carri {background-position: -476px -1px;}

.unitimg:hover {background-color: #FFF;
-webkit-box-shadow: 0 0 2px 2px #fff; box-shadow: 0 0 2px 2px #fff;} 

.unitstats {float: right;
height: 50px; width: 0; 
padding: 0;
overflow: hidden;}

.grayscale {-webkit-filter: grayscale(1); filter: grayscale(1);}
.grayscale:hover {-webkit-filter: grayscale(0); filter: grayscale(0);}

#units .stripe {padding: 0;}

.N-PWR {display: block; width: 35px; background-color: #F00; height: 6px; margin: 0 auto; border: 1px solid #fff; -webkit-border-radius: 10px; border-radius: 10px;}
.DEF {display: block; width: 35px; background-color: #0FF; height: 6px; margin: 0 auto; border: 1px solid #fff; -webkit-border-radius: 10px; border-radius: 10px;}

/*.unitbox:hover > .unitstats {width: 50px;}*/
 
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:0 solid #093;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#000;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:auto; line-height:26px; text-align: center;}
#sb-title-inner{font: 20px impact, sans-serif, arial; text-transform: uppercase; color: #FFa800; text-shadow: #000 -1px 0, #000 0 1px, #000 1px 0, #000 0 -1px, #000 0 0 7px; filter: dropshadow(color=#000000, offx=1, offy=1);}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png); margin-top: 5px;}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
/*.sb-counter-current{text-decoration:underline;}*/
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
#sb-info,#sb-info-inner{height: 56px; background: transparent; width: auto; margin-top: -5px;}
#sb-caption {clear: both; font: bold 12px sans-serif, veranda, arial; height:auto;line-height:12px; text-align: left; color:#fff; text-shadow: #000 -1px 0, #000 0 1, #000 1px 0, #000 0 -1px, #000 0 0 7px; filter: dropshadow(color=#000000, offx=1, offy=1);}

#sb-title, #sb-title-inner {display: none;}

.unit-info {display: block; width: 350px; height: 350px; background: #F00; margin: 10px auto;}