@import url(https://fonts.googleapis.com/css?family=Raleway);
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;

	font-size: 100%;

	
}

:focus {
	outline: 0
}

body {
line-height: 1;
min-height: 100vh;
height: 99%;
overflow: auto;
animation-duration: 10s;
-moz-animation-duration: 10s;
-webkit-animation-duration: 10s;  
animation-fill-mode: both;
-moz-animation-fill-mode: both;
-webkit-animation-fill-mode: both; 
margin: 0;
padding: 0;
font-size: 13px;
font-weight: normal;
font-family: 'Raleway'
}

ol,
ul {
	list-style: none
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius:6px;
	box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.8);
	height: 1px;
	margin: 1em 0;
	width: 100%;
	line-height: 120%;	
}

caption,
th,
td {
	text-align: center;
	font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: ""
}

blockquote,
q {
	quotes: "" ""
}

strong {
	font-weight: bold;
	text-shadow: 1px 1px black;
	
}

em {
	font-style: italic
}

em em {
	font-style: normal
}

pre {
	font-family: 'Raleway'
}


h1 {
	height: 45px;
	margin: 0 0 3px;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	text-indent: -9999em;
	border-bottom: 2px solid #000
}

h1 a {
	display: block;
	text-decoration: none;
	height: 100%
}

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

a:hover {
	text-decoration: none
}

a.help {
	border: 1px solid #777;
	font-weight: bold;
	padding: 0 2px;
	text-decoration: none
}

a.help:hover {
	border: 1px solid #999
}

abbr,
acronym {
	border-bottom: 1px dashed #777;
	cursor: help
}

hr.fancy {
	height: 5px;
	margin: 1em;
	background-color: #999;
	border: 1px solid #777
}

p {
	margin: 1em 0;
	line-height: 1.2
}

fieldset {
	padding: 5px;
	margin: 5px;
	border: 1px solid #777
}

legend {
	font-weight: bold;
	font-size: larger
}

.warning,
.warning * {
	color: #C00;
	font-weight: bold
}

.notice,
.notice * {
	color: #CC0;
	font-weight: bold
}

.highlight,
.highlight * {
	color: #00C;
	font-weight: bold
}

.instruction,
.instruction * {
	color: #AAA
}

.caption {
	margin: 1ex 0;	
    font-size: 14px;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: auto;
    padding: 0 10px;
    border-radius: 6px;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 80%);
}

#date {
	font-size: 10px;
	font-weight: bold;
	white-space: nowrap;
	text-align: right
}

#links {
	float: right;
	margin: 1em;
	font-weight: bold;
	color: #EEE;
}

#links a {
	text-decoration: none;
	padding: 0.3ex 0.75ex;
	border: 1px solid transparent;
	background-color: transparent;
	color: #333
}

#links a:hover {
	border-color: #000;
	background-color: #555;
	color: #EEE
}

*:first-child+html #links {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5
}

#wrapper {
	width:auto;
	height:auto;
	border-radius:6px;
}


#menuholder {
	width: 1px;
	overflow: visible;
	float: left
}

#menuholder div {
	float: left;
	margin: 3px;
	margin-bottom: 2em
}

#menuholder #mygames_title {
	margin: 0;
	padding:5px;
	white-space: nowrap;
	
}

#menu,
#mygames {
	border-radius:6px;
	box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.8);
}

#menu a,
#mygames a {
	text-align: right;
	font-size: 10px;
	padding: 6px 5px;
	width: 160px;
	white-space: nowrap;
	margin: 1px;
	font-weight: bold;
	text-decoration: none;
	display: block;
	color: #333;
	background-color: #EEE;
	border-radius:6px;
	box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.8);
	
}

#menu a:hover,
#mygames a:hover {
	color: #DDD;
	background-color: #2C303A;
	width: 162px;
	
}

#menu a .notice,
#mygames a .notice {
	color: #99F
}

#menu ul,
#mygames ul {
	margin: 0;
	padding: 0
}

#menu li,
#mygames li {
	text-indent: 0;
	margin: 0;
	padding: 0;
	list-style: none outside none
}

#menu li.active a,
#mygames li.active a {
	color: #DDD;
	background-color: #333;
	border-color: #333
}

#menu li:last-child a,
#mygames li:last-child a {
	border-bottom: 0
}

*:first-child+html #menu li {
	margin-left: -1.25em
}

#mygames a {
	white-space: normal;
}

#sidebar {
	float: right;
	width: 160px;
	overflow: visible
}

#sidebar #chatbox {
	float: right;
	width: 160px;
	padding: 5px;
	margin: 3px;
	background-color: #EEE;
	border: 1px solid #777
}

#sidebar #chatbox input {
	width: 95%
}

#sidebar #chats {
	height: 300px
}

#sidebar .active {
	position: relative;
	top: 0;
	right: 0;
	width: 500px
}

#notes {
	float: right;
	width: 169px;
	min-height: 300px;
	padding: 4px;
	margin: 3px;
	background-color: #EEE;
	border-radius:6px;
	box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.8);
}

#chatbox input[type=text] {
    width: 99%;
    border-radius: 6px;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
}

h2 {
	font-size: 14px;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: auto;
  padding: 0 10px;
  border-radius:6px;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.8);
}

.type {
	font-size: smaller;
	padding-left: 2em
}

.type .number {
	font-weight: bold;
	margin-right: 2em
}

.type a {
	margin: 0 2em
}

#content {
	margin: 3px 185px;
}

#content.full {
	margin: 5px
}

#content .sidebar {
	float: right;
	width: 300px;
	margin-top: 10px
}

#content form .buttons #delete {
	float: right
}

#content form .buttons .prevnext {
	margin-bottom: 20px
}

#content form .buttons .prevnext span {
	padding: 0 10px
}

#content #recipient_list {
	margin-top: 20px
}

.stats {
	width: 150px;
	float: left;
	margin: 3px
}

#index_page .tableholder {
	max-height: 300px;
	overflow-y: auto
}

#index_page #chatbox {
    padding: 5px;
	border: 1px solid #777;
	border-radius:6px;
	box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.8);
}

#index_page #chatbox input[type=text] {
  display: block;
  margin: auto;
  padding: 2px;
  width: 98%;;
  border-color: transparent;
}

#index_page #chats {
	height: auto;
	max-height: 238px;
}

#index_page #chats dt {
	height: 50px;
	width: 150px;
	float: left;
	border-bottom: 3px solid #777;
	padding: 5px;
	margin: 0 20px 5px 0;
	position: relative;
	text-align: right;
	background: transparent
}

#index_page #chats dd {
	min-height: 50px;
	border-bottom: 1px solid #AAA;
	padding: 5px 5px 6px 5px;
	margin: 0 0 6px 0;
	word-wrap: break-word
}

#index_page #chats span {
	position: absolute;
	bottom: 5px;
	right: 5px
}

h2.subject,
p.message {
	width: 70ex
}

.sender {
	margin-left: 3em;
	font-size: smaller
}

.link_date {
	float: right;
	text-align: right;
	width: 300px
}

.link_date a {
	float: left
}

#recipient_list ul {
	margin: 10px
}

#recipient_list .unread {
	font-weight: bold
}

#recipient_list .deleted {
	text-decoration: line-through
}

.action select {
	float: right
}

@media (max-height: 600px) {
	#footer {
		position: static
	}
}

.notice {
	font-weight: bold
}

.afterthought {
	font-size: 11px;
	font-weight: normal
}

.instruction {
	margin: 0 0 10px 10px;
	font-size: 11px;
	line-height: 11px
}

ul.settings li {
	float: left;
	width: 100%
}

ul.settings label {
	clear: left
}

.clone {
	display: none;
	visibility: hidden
}

div.help {
	padding: 10px
}

div.help ol,
div.help ul {
	text-indent: -1em;
	margin: 0 0 1ex 2em
}

div.help li {
	text-indent: -1em;
	margin-bottom: 1ex
}

div.help li strong {
	color: #F00
}

div.help table {
	width: auto;
	margin: 0 auto
}

#conquer_limits,
#conquer_limit_table,
#custom_trades,
#custom_trades_table {
	display: none
}

h1 a {
	background: transparent url(../images/risk.png) no-repeat scroll 15px center;
	
}

#mygames .dead a {
	color: #999
}

#mygames .placing a {
	color: 	#1A73E8
}

#mygames .playing a {
	color: #FF0
}

#mygames .none a {
	color: #FFF
}

#joined {
	width: 140px
}

#joined li {
	text-align: left;
	border: 1px solid #777;
	margin-bottom: 2px;
	padding: 2px 3px;
	font-size: 12px;
	font-weight: bold;
	list-style: none outside none
}

.game_info {
	width: auto;
	max-width: 300px;
	float: right;
	margin: 1px;
	background: #FFF;
	color: #000
}

.game_info th,
.game_info td {
	vertical-align: middle;
	padding: 5px;
	border-bottom: 1px solid #666
}

.game_info th {
	text-align: right
}

#conquer_limits input {
	width: auto
}

#conquer_limits input.skip {
	border: 2px solid red
}

#conquer_limits span.skip,
caption span.skip {
	font-weight: bold;
	color: red
}

.conquer_limits tr.skip td {
	font-weight: bold;
	color: red
}

#conquer_limits input.conquests_per {
	border: 2px solid blue
}

#conquer_limits span.conquests_per,
caption span.conquests_per {
	font-weight: bold;
	color: blue
}

#conquer_limits input.per_number {
	border: 2px solid yellow
}

#conquer_limits span.per_number,
caption span.per_number {
	font-weight: bold;
	color: yellow
}

.conquer_limits tr.group {
	border-top: 1px solid yellow
}

#conquer_limits input.start_at {
	border: 2px solid green
}

#conquer_limits span.start_at,
caption span.start_at {
	font-weight: bold;
	color: green
}

.conquer_limits,
.custom_trades {
	float: left;
	width: 300px;
	margin: 10px
}

.conquer_limits td,
.custom_trades td {
	text-align: right
}

.custom_trades {
	width: 100px
}

.conquer_limits tr.skip td+td {
	font-weight: normal;
	color: inherit
}

.conquer_limits tr.max td+td {
	font-weight: bold;
	color: cyan
}

.conquer_limits tr.min td+td {
	font-weight: bold;
	color: cyan
}

#fancybox-content {
	background-color: #000 !important
}


th {
	font-weight: bold;
	text-align: center;
	vertical-align: bottom;
	border-bottom: 2px solid #000;
	border-right: 1px dashed #777;
	padding: 2px 1ex 1px;
	white-space: nowrap
}

tr:hover>td,
tr.alt:hover>td {
	background-color: #444;
	color: #FFF
}

td {
	border-right: 1px dashed #777;
	padding: 1px 1ex 2px;
	text-align: center;
	vertical-align: middle
}

.alt {
	background-color: #DDD
}

td.numeric {
	text-align: right
}

td.date,
td.fortify {
	white-space: nowrap
}

td.join,
td.remove,
td.edit {
	text-align: center;
	vertical-align: middle;
	width: 1px
}

.highlight,
.highlight td {
	font-weight: bold
}

.lowlight,
.lowlight td {
	color: #666
}

th.remove {
	width: 1px
}

caption {
	margin-top: 1em;
	margin: 1ex 0;	
}

thead tr th {
	background-color: #DDD
}

thead tr .header {
	cursor: pointer
}

thead tr .headerSortDown,
thead tr .headerSortUp {
	background-color: #333;
	color: #FFF
}

thead tr .headerSortUp {
	border-top: 2px solid #EEE
}

thead tr .headerSortDown {
	border-bottom: 2px solid #EEE
}

#formdiv hr {
	border: 0;
	border-bottom: 2px solid #AAA;
	width: 90%;
	height: 1px;
	margin: 0 auto
}

.label {
	font-weight: bold
}

label {
	margin-right: 1ex;
	margin-top: 1px;
	font-weight: bold;
	float: left;
	width: 120px
}

label.unlabel,
label.inside,
label.inline {
	float: none;
	width: auto;
	margin: 0
}

label.unlabel {
	font-weight: normal
}

label.error {
	display: none !important;
	border: 0
}

.error {
	border: 1px solid #C00
}

.info {
	color: #999
}

li.info {
	margin-top: 1em;
	color: inherit
}

li.color {
	margin-top: 1em
}

div.info {
	margin: 0 0 0 130px;
	width: 400px
}

.forminfo {
	width: 400px;
	color: #444;
	margin-bottom: 1em
}

.input,
input,
textarea,
select {
	margin: 1px;
	background-color:white;
	color:black;
}

.input {
	line-height: 2;
	font-weight: bold
}

.input,
input,
select {
	vertical-align: middle
}

input[type="checkbox"],
input[type="radio"] {
	margin: 3px 3px 3px 4px
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
	border: 2px solid #848B97
}

input[type="text"].error:focus,
input[type="password"].error:focus,
textarea.error:focus {
	border-color: #C00
}

.req:before {
	content: '*';
	font-size: larger;
	color: #C00;
	font-weight: bold;
	padding-right: 2px;
	vertical-align: middle
}

#formdiv .submit {
	border-top: 1px solid #AAA;
	text-align: center;
	padding: 10px
}

#formdiv .errors {
	border-top: 1px solid #AAA;
	border-bottom: 1px dashed #AAA;
	display: none;
	color: #C00;
	font-weight: bold;
	font-size: 14px;
	padding: 10px;
	text-align: center
}

.test img {
	vertical-align: middle
}

table.form {
	width: auto
}

.overlabel-apply {
	position: absolute;
	top: 1px;
	left: 5px;
	z-index: 5;
	color: #AAA
}

.overlabel-float {
	float: left;
	margin: 2px;
	position: relative
}

.nav>.nav-header>.nav-title {
	display: inline-block;
	font-size: 24px;
	color: #2788CF;
	text-shadow: 1px 1px black;
	padding: 1px 1px 1px 1px;
}
#avatar {	position: absolute;
  top:0px;
  left: 0%;
}
.avatar {

	background: url('images/sword.png');
}
.avatar:hover {
    background: url('images/drows.png');
}

.dropbtn {
    font-size: 14px;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: auto;
    padding: 0 10px;
    border-radius: 6px;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 80%);
}
/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #777; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FFDD40; 
}
.thumb {
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
   border-radius: 6px;
}


.thumb:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  box-shadow: 0 5px 5px rgb(0 0 0 / 20%), 0 5px 5px rgb(0 0 0 / 20%);
}
.indexthumb {
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
   border-radius: 6px;
}
.indexthumb:hover {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  box-shadow: 0 5px 5px rgb(0 0 0 / 20%), 0 5px 5px rgb(0 0 0 / 20%);
}
/*contains game stuff*/
#game_info {
  display: none;
}
.occupy {
  position: absolute;
  top: -68px;
  left: -55px;
  width: 117px;
  height: 95px;
  z-index: 999;
}
.map_wrapper {
  position: relative;
  height: auto;
  width: auto;
  overflow: hidden;
  cursor: cell;
}
/*CURSOR-D*/
#cursor-d {
  position: fixed;
  /*box-shadow:0 0 5px rgba(100,100,100, 0.5);*/
  /*background-color:rgba(113,180,110,0.5); */
  /* R: 113 G: 180 B: 110 */
  border: 6px solid rgba(255, 255, 255, 0.1);
  opacity: 0.1;
  pointer-events: none;
  /*animation: pulse 2s infinite;*/
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: 6002;
  margin-top: -16px;
  margin-left: -16px;
  transition: all 0.05s ease;
  background: white;
  overflow:visible;
}
#cursor-d.xhover {
  animation: pulse 2s infinite;
  opacity: 0.1;
  height: 8em;
  width: 8em;
  margin-top: -5em;
  margin-left: -5em;
}
@keyframes pulse {
  0% {
    height: 6em;
    width: 6em;
    margin-top: -3.5em;
    margin-left: -3.5em;
  }
  50% {
    height: 8em;
    width: 8em;
    margin-top: -4.5em;
    margin-left: -4.5em;
  }
  100% {
    height: 6em;
    width: 6em;
    margin-top: -3.5em;
    margin-left: -3.5em;
  }
}
#controls hr {
  line-height: 26px;
}
#controls .review .steps {
  text-align: center;
  font-size: large;
}
#controls .review span {
  padding: 2px 5px 1px;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
#controls .review span:hover {
  border-color: #aaa;
}
#controls .review span.disabled {
  color: #aaa;
  border-color: #333;
  cursor: default;
}
#controls #move_info {
  padding: 10px;
  word-wrap: break-word;
}
#players ul {
  margin-left: 30px;
}
#players li {
  text-align: left;
  border: 1px black;
  margin-bottom: 2px;
  padding: 2px 2px;
  font-size: 12px;
  font-weight: normal;
  list-style: none outside none;
  text-shadow: 1px 1px black;
  width: auto;
}
#players li.host {
  border-color: solid black;
}
#players li.me {
  border-color: #fff;
}
#players li.trading {
  list-style-image: url(../images/turn.gif);
}
#players li.placing {
  list-style-image: url(../images/turn.gif);
}
#players li.attacking {
  list-style-image: url(../images/turn.gif);
}
#players li.occupying {
  list-style-image: url(../images/turn.gif);
}
#players li.fortifying {
  list-style-image: url(../images/turn.gif);
}
#players li.resigned {
  list-style-image: url(../images/resigned.png);
}
#players li.dead {
  list-style-image: url(../images/dead.png);
}
#players span.cards {
  display: inline;
  position: relative;
  z-index: 1;
  border: 0;
  font-weight: bold;
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
  cursor: help;
}
#players span.cards:after {
  content: " - ";
}
#players .red {
  color: #fff;
  background: #e22;
}
#dice img {
  margin: 10px 2px;
}
#dice div {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 25px;
  text-shadow: 1px 1px black;
  font-weight: bold;
  border: 1px solid #999;
}
#dice .attack,
#dice .defend {
  border: 0;
  width: 27px;
  height: auto;
  float: left;
}
#dice .attack-lost,
#dice .defend-lost {
  width: auto;
  height: auto;
}
#action {
  height: 200px;
  overflow: auto;
}
#action p {
  margin: 0;
  text-align: center;
  font-size: 13px;
  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}
h3 {
  color: #2788cf;
  text-align: center;
  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  background-color: #262426;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}
#action label {
  width: auto;
}
#action #skip {
  float: right;
}
#action .resign {
  display: block;
  font-weight: bold;
  margin: 75px auto 0;
  background-color: #5f7c8a;
  color: #ced7db;
}
#action .resign:hover {
  background-color: #ced7db;
  color: #5f7c8a;
}
#board span {
  display: block;
  position: absolute;
  z-index: 2;
  min-width: 15px;
  width: auto;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  border: 1px solid black;
  text-shadow: 1px 1px black;
}
#board span:hover {
  min-width: 25px;
  width: auto;
  height: 25px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid white;
  animation: rulse 1s 2;
  font-size: 15px;
  text-shadow: 1px 1px black;
  z-index: 100;
}
area {
  cursor: pointer;
}
#pathmarkers div {
  background: transparent url(../images/bomblit.gif) center center no-repeat;
  text-shadow: 1px 1px black;
  color: yellow;
  height: 35px;
  line-height: 47px;
  position: absolute;
  text-align: center;
  display: none;
  width: 35px;
  z-index: 99;
}
.gra {
  background-color: #999 !important;
  color: #fff !important;

}
.red {
  background-color: #e22 !important;
  color: #fff !important;

}
.blu {
  background-color: #36f !important;
  color: #fff !important;
 
}
.bla {
  background-color: #333 !important;
  color: #fff !important;
 
}
.bro {
  background-color: #963 !important;
  color: #fff !important;
 
}
.gre {
  background-color: #090 !important;
  color: #fff !important;
 
}
.yel {
  background-color: #ffcc00 !important;
  color: #fff !important;

}
.pur {
  background-color: #609 !important;
  color: #fff !important;
 
}
.pin {
  background-color: #f9f !important;
  color: #000 !important;

}
.aqu {
  background-color: #0cc !important;
  color: #000 !important;
 
}
.red.res {
  background-color: white !important;
  color: #e22 !important;
}
.blu.res {
  background-color: white !important;
  color: #36f !important;
}
.bla.res {
  background-color: white !important;
  color: #333 !important;
}
.bro.res {
  background-color: white !important;
  color: #963 !important;
}
.gre.res {
  background-color: white !important;
  color: #090 !important;
}
.yel.res {
  background-color: white !important;
  color: #ffcc00 !important;
}
.pur.res {
  background-color: #caa6db !important;
  color: #9b25d6 !important;
}
.pin.res {
  background-color: #ffccff !important;
  color: #f63ef6 !important;
}
.aqu.res {
  background-color: #ccffff !important;
  color: #4ae0e0 !important;
}
.history .gra {
  background-color: transparent !important;
  color: #999 !important;
}
.history .red {
  background-color: transparent !important;
  color: #e22 !important;
}
.history .blu {
  background-color: transparent !important;
  color: #36f !important;
}
.history .bla {
  background-color: transparent !important;
  color: #555 !important;
}
.history .bro {
  background-color: transparent !important;
  color: #963 !important;
}
.history .gre {
  background-color: transparent !important;
  color: #090 !important;
}
.history .yel {
  background-color: transparent !important;
  color: #ffcc00 !important;
}
.history .pur {
  background-color: transparent !important;
  color: #609 !important;
}
.history .pin {
  background-color: transparent !important;
  color: #f9f !important;
}
.history .aqu {
  background-color: transparent !important;
  color: #0cc !important;
}
.history .attack {
  color: #f00;
  font-weight: bold;
}
.history .card {
  color: #0ff;
  font-weight: bold;
}
.history .fortify {
  color: #9f0;
  font-weight: bold;
}
.history .occupy {
  color: #f0f;
  font-weight: bold;
}
.history .place {
  color: #0f0;
  font-weight: bold;
}
.history .reinforce {
  color: #ff0;
  font-weight: bold;
}
.history .trade {
  color: #f90;
  font-weight: bold;
}
.history .outcome {
  color: #900;
  font-weight: bold;
}
.history .defeat {
  color: #900;
  font-weight: bold;
}
.history .roll {
  color: #33c;
  font-weight: bold;
}
.history .value {
  color: #f36;
  font-weight: bold;
}
.history .winner td:first-child {
  color: #000;
  background-color: #0f0;
  font-weight: bold;
}
.history .killed td:first-child {
  color: #000;
  background-color: #f00;
  font-weight: bold;
}
.history .init td:first-child {
  color: #000;
  background-color: #fff;
  font-weight: bold;
}
.history .next td:first-child {
  color: #000;
  background-color: #ddd;
  font-weight: bold;
}
.history .resign td:first-child {
  color: #fff;
  background-color: #50a;
  font-weight: bold;
}
#contents {
  margin: 5px;
}
table.history td {
  padding: 3px 5px;
  font-size: 1.1em;
  line-height: 150%;
  border-bottom: 1px solid #222;
}
table.history td.date {
  width: 1%;
  white-space: nowrap;
}
form#game {
  clear: both;
  text-align: center;
  padding-top: 20px;
}
.container {
  width: 200px;
}
.float {
  position: absolute;
  top: 25px;
  left: 615px;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 10px;
  z-index: 1;
}
@-webkit-keyframes rulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
  }
  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 rulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
  }
  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);
  }
}
@keyframes blinker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.rotate {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  overflow: hidden;
}
.rotate:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}
#refresher {
  position: absolute;
  left: 50%;
  top: 0px;
}
#buttons {
  float: right;
  margin-right: 390px;
}
#buttons li {
  float: left;
  margin-left: 1px;
}
#buttons a {
  display: block;
  padding: 0 1em;
  border: 1px solid #333;
  border-width: 0 1px;
  margin: 0 -1px;
  text-shadow: 1px 1px black;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes masked-animation {
  0% {
    background-position: left bottom;
  }
  100% {
    background-position: right bottom;
  }
}
#start {
  position: absolute;
  margin: auto;
  text-align: center;
  top: 50%;
  margin-top: 260px;
  width: 100%;
}
.blink_me {
  animation: blinker 3s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.3;
  }
}
#wrap {
  margin: 0 auto;
  width: 100%;
  position: relative;
}
#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#viewport .smoke {
  position: absolute;
  width: 250px;
  height: 250px;
  background: url("/images/smoke.png") no-repeat;
  bottom: 150px;
  margin-left: 0px;
}
@-webkit-keyframes masked-animation {
  0% {
    background-position: left bottom;
  }
  100% {
    background-position: right bottom;
  }
}
/* game page related start*/
/* header logo start */
#avatar {
  position: absolute;
  top: 0px;
  left: 0%;
}
.avatar {
  background: url("images/sword.png");
}
.avatar:hover {
  background: url("images/drows.png");
}
h1 a {
  background: transparent url(../images/risk.png) no-repeat scroll 15px center;
  display: block;
  text-decoration: none;
  height: 100%;
}
h1 {
  height: 45px;
  margin: 0 0 3px;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  text-indent: -9999em; /* first line in a text-block. */
  border-bottom: 2px solid #000; /* is line under header */
}
h2 {
  font-size: 14px;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: auto;
  padding: 0 10px;
  border-radius: 6px;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.8);
}
/* header logo end */
/* main links start */
ol,
ul {
  list-style: none;
}
#links {
  float: right;
  margin: 1em;
  font-weight: bold;
  color: #eee;
}
#links a {
  text-decoration: none;
  padding: 0.3ex 0.75ex;
  border: 1px solid transparent;
  background-color: transparent;
  color: #333;
}
#links a:hover {
  border-color: #000;
  background-color: #555;
  color: #eee;
}
*:first-child + html #links {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}
a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a.help {
  border: 1px solid #777;
  font-weight: bold;
  padding: 0 2px;
  text-decoration: none;
}
a.help:hover {
  border: 1px solid #999;
}
/* main links end */

#chatbox input[type="text"] {
  width: 90%;
  border-radius: 6px;
  padding-top: 2px;
  padding-right: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
}
#chats {
  height: 200px;
  overflow: auto;
}

#chats dt {
	background: transparent;
	color: #000;
	padding: 0 3px
}

#chats dt span {
  float: right;
  font-size: 80%;
}
#chats dd {
  padding: 0 3px;
  border-bottom: 1px solid #000;
  word-wrap: break-word;
}
#chats img {
  float: left;
}
#footerspacer {
  height: 10px;
  clear: both;
}
#footer {
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  clear: both;
  padding: 0 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid #bbb;
}
#footer span {
  margin: 0 2em;
}
#footer p {
  margin: 0;
  padding: 0;
  line-height: 130%;
}
/* game page related end*/
hg {
	vertical-align: middle;
	text-align: center;
}

hg > pan {
	display: inline-block;
	position: relative;
	width: 7px;
	height: 7px;
	animation-duration: 4s;
	animation-iteration-count: 15;
	animation-name: spin;
	animation-timing-function: linear;
}

pan pan {
	position: absolute;
	top: 0;
	left: 0; 
	width: 100%;
	height: 100%;
	background: #e0efff;
	overflow: hidden;
	-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
	clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
}

pan pan:first-of-type {
	transform: translateY(-50%);
}

pan pan:last-of-type {
	transform: translateY(50%) rotate(180deg);
}

pan pan::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: tan;
	animation-duration: 4s;
	animation-iteration-count: 15;
	animation-name: slide;
	animation-timing-function: linear;
}

pan pan:last-of-type::before {
	animation-delay: -2s;
}

@keyframes slide {
	0% {
		transform: translateY(0%);
	}
	
	25% {
		transform: translateY(100%);
	}
	
	50% {
		transform: translateY(100%);
	}
	
	75% {
		transform: translateY(0%);		
	}
	
	100% {
		transform: translateY(0%);		
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	
	25% {
		transform: rotate(0deg);
	}
	
	50% {
		transform: rotate(180deg);
	}
	
	75% {
		transform: rotate(180deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}
#nudge {
  float: right; 
  animation: blinker 2s cubic-bezier(.5, 0, 1, 1) infinite alternate;}
@keyframes blinker {  
  from { opacity: .5; }
  to { opacity: 0; }
}
#counter{text-shadow: 1px 1px black;
    font-weight: bold;
}
#armies
{text-shadow: 1px 1px black;
    font-weight: bold;
}
blitz {
  font-size: 14px;
  color: white;
  text-shadow: 1px 1px black;
  font-weight: bold;
  text-align: center;
  margin: 4px 2px;
  cursor: auto;
}
day {
  font-size: 14px;
  color: white;
  text-shadow: 1px 1px black;
  font-weight: bold;
  text-align: center;
  margin: 4px 2px;
  cursor: auto;
}
small {  font-size: 14px;}