/*
Main style file used across all layouts
*/

html, body, div, span, applet, object, iframe, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	/*font: inherit;*/
	/*vertical-align: baseline;*/
}


ol, ul {
	list-style: none;
}

.hidden {
	display:none;
}
.li {
	margin:5px 0;
}
.center{
	text-align: center;
}
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: local('Bangers'), local('Bangers-Regular'), url('/css/fonts/Bangers.ttf') format('truetype'), url('/css/fonts/Bangers.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family: 'lucky';
    src: url('/css/fonts/luckiest-guy.regular-webfont.woff2') format('woff2'),
         url('/css/fonts/luckiest-guy.regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.lucky {
    font-family: 'lucky', Verdana !important;
}
.bangers {
    font-family: 'Bangers', Verdana !important;
    letter-spacing: 2px;
}

.success-msg {

	color: green;
	font-weight: bold;
}

.error-msg {
	color: red;
	font-weight: bold;
}
.fright {
	float:right;
}
.fleft {
	float:left;
}
span.count {
	float: right;
    margin-right: 10px;
}
span.count.new {
	font-weight:bold;
}
/* Sidewars stuff*/

.turnsUsed {
	font-size: 9px;
	color: red;
}

.sideBonusNeg {
	color: red;
}

.sideBonusPos {
	color: green;
}

.mapSpot {
	padding: 0px;
	margin: 0px;
}


.gainMsg b{
	color: green;
}

.lossMsg b{
	color: red;
}


ul .tab {
	list-style: none;
	display:inline;
}

li .tab {
	
	margin:0 10px;
	padding:10px 0;

}

div.smenu {
	margin:0;
}

div.smenu ul#tabLinks {
	list-style-type:none;
}
div.smenu ul#tabLinks li{
	display:inline;
}
div.smenu ul#tabLinks li a {
	float:left;
	width:75px;
	/*padding: 0 15px 0 15px;*/
	text-decoration:none;
	height:27px;
	line-height:27px;
	text-align:center;
}
div.smenu ul#tabLinks li a:hover{
	background:#EBEBEB;
	text-decoration:underline;	
}
div.smenu ul#tabLinks li a#alie{

}
div.smenu ul#tabLinks li a#sel{
	background:#EBEBEB;
	font-size:1.1em;
	color:black;
	font-weight:bold;	
}
div.smenu div.spacer {
	height:27px;
}
div.smenu div.content{
	padding:3px;
	border-top:1px solid #ccc;
	top: -1px;
	position: relative;
	text-align:left;
}
div.smenu div.content div.contentv {
	display:none;
}


div.line {
	padding:1px 0 1px 0;
}
div.line span {
	font-weight:bold;
}

.tooDrunk{
	transform: rotate(2deg);
	-ms-transform: rotate(2deg); /* IE 9 */
	-webkit-transform: rotate(2deg); /* Safari and Chrome */
	-o-transform: rotate(2deg); /* Opera */
	-moz-transform: rotate(2deg); /* Firefox */
}

	.tooDrunk div.playerStatsText{
		transform: rotate(3deg);
		-ms-transform: rotate(3deg); /* IE 9 */
		-webkit-transform: rotate(3deg); /* Safari and Chrome */
		-o-transform: rotate(3deg); /* Opera */
		-moz-transform: rotate(3deg); /* Firefox */
		position: relative;
		top: 5px;
		left: 8px;
	}
	
	.tooDrunk div.statBar{
		border-right: 0px;
	}
	
	.tooDrunk div.statBarFill{
		background-color: orange !important;
		width: 110% !important;
	}
	
	
.tooDrunk2{
	transform: rotate(-2deg);
	-ms-transform: rotate(-2deg); /* IE 9 */
	-webkit-transform: rotate(-2deg); /* Safari and Chrome */
	-o-transform: rotate(-2deg); /* Opera */
	-moz-transform: rotate(-2deg); /* Firefox */
}

	.tooDrunk2 div.playerStatsText{
		transform: rotate(6deg);
		-ms-transform: rotate(6deg); /* IE 9 */
		-webkit-transform: rotate(6deg); /* Safari and Chrome */
		-o-transform: rotate(6deg); /* Opera */
		-moz-transform: rotate(6deg); /* Firefox */
		position: relative;
		top: 5px;
		left: 8px;
	}
	
	.tooDrunk2 div.statBar{
		border-left: 0px;
	}
	
	.tooDrunk2 div.statBarFill{
		background-color: orange !important;
		width: 20% !important;
		position: relative;
		left: -8px;
		
		transform: rotate(-2deg);
		-ms-transform: rotate(-2deg); /* IE 9 */
		-webkit-transform: rotate(-2deg); /* Safari and Chrome */
		-o-transform: rotate(-2deg); /* Opera */
		-moz-transform: rotate(-2deg); /* Firefox */
	}
	
/* apply to an element to flip it horizontally*/
.flipped {
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	transform: scale(-1, 1);
	filter: FlipH;
}





/* RAT STUFF*/
.rat-opts{
	list-style:none;
}

.rat-opts li{
	padding-bottom: 2px;
}

.ratImg2{
	position: absolute;
	top: -5px;
	left: -17px;
	width: 34px;
	height: 24px;
	border-radius: 40px;
	border: 1px solid black;
	overflow: hidden;
	padding-top: 5px;
	padding-left: 15px;
	background: whitesmoke;
}


.ratimg{
	position:relative; 
}

.mainimg{
	position: relative;
	left: 6px;
	top: 8px;
}

.ratcell{
	width: 120px; 
	overflow: hidden;
	background-color: white;
}

.upgImg{
	width: 18px;
	height: 18px;
}

.upg-imgs{
	position: absolute;
	bottom: 0px;
	z-index: 2;
}

.upg-imgs2{
	position: absolute;
	bottom: -3px;
}

.upg_inf:hover{
	cursor: help;
}

.desaturated{
	 filter: grayscale(100%);
	 -webkit-filter: grayscale(100%);
}




input[type="button"], input[type="submit"], .btn {
-webkit-font-smoothing: antialiased;
    color: #636363;
    background: #ddd;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 16px;
    border-radius: 3px;
    border: 0;
    cursor: pointer;
	margin:3px 2px;
	-webkit-appearance: none;
	display:inline-block;
}
a.btn {
	line-height: 1em;
}
input[type="button"]:hover, input[type="submit"]:hover, .btn:hover {
	color:#fff;
	background:#1b9eff;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
    animation: pulse 1.5s infinite;	
}

input[type="button"].no-pulse, input[type="submit"].no-pulse, .no-pulse.btn {
	animation:none;
}
input[type="button"].hover-green:hover, input[type="submit"].hover-green:hover, .btn.hover-green:hover {
	color:#fff;
	background:#4caf50;
}

input[type="button"].primary, input[type="submit"].primary, .primary.btn {
    color: #fff;
    background: #ff6631;
}
input[type="button"].green, input[type="submit"].green, .green.btn {
    color: #fff;
    background: #4caf50;
}
input[type="button"].red, input[type="submit"].red, .red.btn {
    color: #fff;
    background: red;
}
input[type="button"].light-blue, input[type="submit"].light-blue, .light-blue.btn {
	color: #005ea5;
    background: #bde3ff;
}
input[type="button"].light-blue:hover, input[type="submit"].light-blue:hover, .light-blue.btn:hover {
background: #74acd4;
    color: #fff;
}
input[type="button"].medium, input[type="submit"].medium, .medium.btn {
	    padding: 8px 20px;
}
input[type="button"].large, input[type="submit"].large, .large.btn {
	    padding: 10px 26px;
}

h2 {
font-family: bangers;
    font-size: 3em;
    line-height: 0.8em;
    letter-spacing: 1px;
}

center font[size="2"] b, center b font[size="2"] {
	font-family: bangers;
    font-size: 3em;
    line-height: 0.8em;
    letter-spacing: 1px;
}
center font[size="3"] b {
	font-family: bangers;
    font-size: 3em;
    line-height: 0.8em;
    letter-spacing: 1px;
}

.gwar-txt center font[size="2"] b, center b font[size="2"] {
	display:block;
	margin:5px 0;
	font-size: 2em;
}

/*
<div class="gwar-txt"><center> <font color="#339900" size=3>Pieman</font> <font size=3><b>vs</b></font>  <font color="#0066CC" size=3>Morning Wood</font></center>
*/

.gwar-txt center font[size="3"] {
	font-family: bangers;
    font-size: 3em;
    line-height: 0.8em;
    letter-spacing: 1px;
	display:block;
}
.gwar-txt center font[size="3"] b {
	font-family: Verdana;
    font-size: 0.5em;
    line-height: 0.5em;
    letter-spacing: 1px;
	font-weight:normal;
    display: block;
    margin: 5px 0 10px;	
}
.bp-itm {
	position:relative;
}
.bp-itm  .bp-amnt {
    position: absolute;

    bottom: -2px;
    right: 10px;
    background: #ddd;
    padding: 2px 4px;
    border-radius: 4px;	
	min-width: 14px;
}
.bp-itm:hover .bp-amnt {
    color: #fff;
    background: #ff6631;	
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
   animation: bounce 1s infinite;
}

@-webkit-keyframes pulse {
  0% {    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);  }
  70% {      -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);  }
  100% {      -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.pulse {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
    animation: pulse 1.5s infinite;
}

@-webkit-keyframes pulsebg {
    0% { -webkit-transform: scale(0.9); opacity: 0.7; }
    50% { -webkit-transform: scale(1.1); opacity: 1; }
    100% { -webkit-transform: scale(0.9); opacity: 0.7; }
}

@keyframes pulsebg {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.pulsebg {
    animation: pulsebg 1.5s infinite;
}
.hover-pulsebg:hover {
    animation: pulsebg 1.5s infinite;
}

.loading-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
}
.loading-ring:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-color: #ccc transparent #ccc transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.pavatar {
	display:inline-block;
	margin:4px;
	position:relative;
}
.pavatar .avatar-special {
	position:absolute;
  /*z-index: -1;*/
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #ccc;
  border-radius:50%;	
}
.pavatar .avatar-circle {
	border-radius:50%;
	border:2px solid #fff;
	position:relative;
	background-size: cover;
}
.pavatar .avatar-circle .avatar-active{
    position: absolute;
bottom: -2px;
    right: -2px;
    width: 20%;
    height: 20%;
    border: 2px solid #fff;
    border-radius: 50%;
	background-color:#ccc;
}
.pavatar .avatar-circle .avatar-active.active {
	background-color:#00e426;
}
.pavatar .avatar-circle .avatar-active.recently {
	background-color:#8fec8f;
}
.pavatar .avatar-circle .avatar-active.hour {
	background-color:#ff8300;
}
/*
.pavatar .avatar-circle.spec:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #ccc;
  border-radius:50%;
}
*/
.pavatar .avatar-special.gov {  border-color:#1c7bf1; }
.pavatar .avatar-special.min {  border-color:#d30000; }
.pavatar .avatar-special.vm {  border-color:#000099; }
.pavatar .avatar-special.sec {  border-color:#009904; }
.pavatar .avatar-special.don { border-color:#ff8630; }

.overlay, .blackout, .whiteout {
  display: flex;
  justify-content: center;
  align-items: center;
    position: fixed;
    z-index:1000;
    top:0;
    left:0;
	right:0;
	bottom:0;
    height:100%;
    width:100%;
	/*background: rgb(255,255,255);
    background: rgba(10, 221, 0, 1); /*rgba(255,255,255, .9);*/
	background: radial-gradient(ellipse at center, #005804 0%, #025300 67%, #012b00 100%);
}
.blackout {
	background: rgba(0,0,0,0.6); /*rgba(255,255,255, .9);*/
}
.radial-blackout {
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 67%, rgba(0,0,0,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,0.5)), color-stop(67%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 67%, rgba(0,0,0,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 67%, rgba(0,0,0,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 67%, rgba(0,0,0,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 67%, rgba(0,0,0,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* ie6-9 */
}
.specMsg {
  display: flex;
  justify-content: center;
  align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
z-index:1000;
cursor:pointer;
}
.specMsg .specContent {
    z-index: 1010;
    color: #fff;
    width: 650px;
    max-width: 95%;
    line-height: 1.5;
    font-size: 1.4em;
}
.specMsg .specContent .specHeading {
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
}