@import url('https://fonts.googleapis.com/css?family=Rubik');
* {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html,body {margin: 0; padding: 0; font-family: 'Rubik', sans-serif;}
body {background: #f5f5f5;}
table {border-collapse: collapse; border: 0; padding: 0; margin: 0;}
div,td {font-size: 16px; color: #212121; letter-spacing: 0; line-height: 16px;}
p {padding: 5px 0; margin: 0;}
a:link, a:visited {color: #111; text-decoration: underline;}
a:hover {color: #000;}
h1 {padding: 2px 0; font-size: 24px; font-weight: normal; line-height: 24px; letter-spacing: 0; color: #d32f2f; margin: 0;}

#defender {max-width: 1210px; margin: 0 auto;}
.extreme {height: 78px; background: url('pattern/extreme.jpg') repeat-x; border-bottom: 1px solid #eee; box-shadow: 0 2px 4px rgba(0,0,0,.45);}
.invent {max-width: 1210px; margin: 0 auto; display: table; width: 100%;}
.citizen {display: table-cell; width: 445px;}

.imperialistic {display: table-cell; text-shadow: 1px 1px #0b2004; text-align: right; vertical-align: middle;}
.imperialistic a {display: inline-block; font: bold 17px 'Rubik'; text-decoration: none; color: #eee; background: rgba(0,0,0,.5); padding: 6px 4px; margin: 0 2px 2px; border-radius: 1px;}
.imperialistic a:hover {color: #ffee58; background: rgba(0,0,0,.6);}

.imaginary {width: 100%;}
.influence {padding: 5px 1px 10px; text-align: justify; line-height: 18px;}

.prominent {height: 70px; background: url('pattern/extreme.jpg') repeat; box-shadow: 0 5px 10px rgba(0,0,0,.6) inset;}
.prodefender {display: table; margin: 0 auto; position: relative; top: 19px;}
.prodefender div {display: inline-block; float: left; padding: 1px 0 0; margin-right: 3px;}


.distinct {background: url('pattern/distinct.jpg') no-repeat 0 25%; padding: 6px 8px; margin-bottom: 10px; box-shadow: 0 2px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2) inset; border-bottom: 1px solid #eee;}
.version {padding: 6px 0 6px 0; font-size: 20px; font-weight: bold; color: #fff; margin: 0; letter-spacing: -0.1pt; text-shadow: 1px 1px #212121;}
.wholly {margin: 4px 0; text-align: left; background: rgba(255,255,255,.75); display: inline-block; padding: 4px; border-radius: 2px;}
.wholly a {display: inline-block; background-color: #263238; text-decoration: none; padding: 3px; color: #fff; border-radius: 2px; margin: 2px 1px;}
.wholly a:hover {background-color: #d32f2f;}
.plaster a {background-color: #d32f2f;}

.rating_yellow, .rating_red, .rating_blue, .rating_white {background: #e6ee9c; text-align: justify; padding: 6px 8px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.3); text-shadow: 1px 1px rgba(255,255,255,.6);}
.rating_red {background: #f8bbd0;}
.rating_blue {background: #b2ebf2;}
.rating_white {background: #fff;}

.rating_yellow div, .rating_red div, .rating_blue div, .rating_white div {display: inline-block;}
.rating_yellow:after, .rating_red:after, .rating_blue:after, .rating_white:after {display: inline-block; content: ""; width: 100%;}

.interview {font-size: 26px; color: #424242; vertical-align: top; width: 3%;}
.grammar {font-size: 22px; font-weight: bold; line-height: 22px; text-align: left; vertical-align: top; width: 39%;}
.grammar a {text-decoration: none; color: #37474f;}
.grammar a:hover {color: #263238;}
.extraordinary, .spokesman, .position {margin: 0; padding: 0 0 0 17px; font-size: 15px; background: url('pattern/extraordinary.png') no-repeat 0 center;}
.extraordinary {vertical-align: top; width: 6%;}
.spokesman {background: url('pattern/spokesman.png') no-repeat 0 center; padding: 0 0 0 20px; vertical-align: top; width: 12%;}
.position {background: url('pattern/position.png') no-repeat 0 30%; padding: 0 0 0 20px; vertical-align: top; width: 6%;}
.regime, .regime_no {font-size: 15px; background: url('pattern/regime.png') no-repeat center 0; width: 6%; height: 43px; text-align: center;}
.regime_no {background: url('pattern/regime_no.png') no-repeat center 0; opacity: .5;}
.involve {margin: 15px 0 0 0; background: #fff; font-weight: bold; border-radius: 2px; color: #000;}

.geopolitic {font-size: 15px; vertical-align: top; width: 23%;}
.geopolitic img {margin-right: 3px; vertical-align: middle;}

.play {margin: 6px 0; text-align: left; clear: both;}
.play ul {list-style: none; margin: 0; padding: 0;}
.play li {display: inline-block; font-size: 15px; background: #eee; text-decoration: none; padding: 4px; border-radius: 1px; margin: 4px 1px; box-shadow: 0px 0 2px #9e9e9e;}

.correspondence {
	margin: 25px auto 10px;
	font-size: 18px;
	font-weight: bold;
	display: table;
	text-shadow: 1px 1px rgba(0,0,0,.5);
}

.correspondence a {
  text-decoration: underline;
  padding: 7px 12px;
  background: linear-gradient(to bottom, #43a047, #33691e);
  border: 1px solid #1b5e20;
  border-radius: 2px;
  margin: 2px;
  color: #fff;
  float: left;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}

.correspondence a:hover {
    opacity: .9;
    text-decoration: none;
}

.correspondence span {
  text-decoration: none;
  padding: 7px 12px;
  background: linear-gradient(to bottom, #ef5350, #c62828);
  border: 1px solid #b71c1c;
  border-radius: 2px;
  margin: 2px;
  color: #fff;
  float: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;
}

.correspondence .spare {
	color: #616161;
	border: none;
	background: none;
	text-shadow: none;
	box-shadow: none;
	padding: 10px 5px 0;
	margin: 0;
	float: left;
}

.leisure, .scene {padding: 6px 8px; margin: 10px 0; box-shadow: 0 2px 1px rgba(0,0,0,.2); background: #fff; border-radius: 2px; line-height: 18px;}
.scene {line-height: 26px; letter-spacing: 0.01em;}

.exclamation {padding: 3px; font-size: 21px; line-height: 21px; letter-spacing: 0; color: #fff; margin: 5px 0; background: #33691e; border-radius: 2px; display: inline-block; text-shadow: 1px 1px rgba(0,0,0,.2);}

.endurance, .certificate, .buy_diamonds, .buy_highlight {display: inline-block; font-weight: bold; font-size: 15px;}

.endurance {margin: 3px 0;}

.endurance a {
	display: inline-block;
	padding: 8px 14px 8px 28px;
	position: relative;
	background: #feda71;
	background: url('pattern/endurance.png') no-repeat 5px center, linear-gradient(#feda71, #febe4d);
	background-size: 8%;
	border: solid 1px #eab551;
	border-bottom: solid 3px #b98a37;
	box-shadow: inset 0 0 0 1px #fee9aa, 0 1px 2px rgba(0,0,0,.3);
	border-radius: 2px;
	color: #563a1e;
	text-shadow: 0 1px 0 #fedd9b;
	text-decoration: none;
}

.endurance a:hover {filter: brightness(.97);}

.certificate, .buy_diamonds, .buy_highlight {margin-left: 7px;}

.certificate button {
	font-weight: bold; font-size: 15px;
	display: inline-block;
	padding: 1px 10px 1px 25px;
	position: relative;
	background: #f3e5f5;
	background: url('pattern/certificate.png') no-repeat 5px center, linear-gradient(#f3e5f5, #ce93d8);
	background-size: 8%;
	border: solid 1px #ba68c8;
	border-bottom: solid 3px #ab47bc;
	box-shadow: inset 0 0 0 1px #f3e5f5, 0 1px 2px rgba(0,0,0,.3);
	border-radius: 2px;
	color: #212121;
	text-shadow: 0 1px 0 rgba(255,255,255,.7);
	text-decoration: none;
}

.certificate button:hover {filter: hue-rotate(30deg);}

.allocate {
	background: #f0f4c3;
	border: 1px solid #c0ca33;
	padding: 2px 8px;
	border-radius: 2px;
}

.buy_diamonds a, .buy_highlight a {
	display: inline-block;
	padding: 1px 12px;
	position: relative;
	background: #fff9c4;
	background: linear-gradient(#fff9c4, #fbc02d);
	border: solid 1px #f9a825;
	border-bottom: solid 2px #f57f17;
	box-shadow: inset 0 0 0 1px #f5f5f5, 0 1px 2px rgba(0,0,0,.3);
	border-radius: 2px;
	color: #212121;
	text-shadow: 0 1px 0 rgba(255,255,255,.7);
	text-decoration: none;
}

.buy_highlight a {
	background: linear-gradient(#e0f7fa, #4dd0e1);
	border: solid 1px #00bcd4;
	border-bottom: solid 2px #00acc1;
}

.buy_diamonds a:hover, .buy_highlight a:hover {filter: opacity(85%);}

.buy_no {text-decoration:underline; cursor:no-drop;}

.registration, .forgot_pass, .enter {display: block; font-size: 18px; margin: 5px 0;}

.registration a, .forgot_pass a, .enter a, .enter button, .forgot_pass button, .forgot_pass input {
	display: inline-block;
	padding: 8px 16px;
	position: relative;
	background: #feda71;
	background: linear-gradient(#feda71, #febe4d);
	border: solid 1px #eab551;
	border-bottom: solid 2px #b98a37;
	box-shadow: inset 0 0 0 1px #fee9aa, 0 1px 2px rgba(0,0,0,.3);
	border-radius: 2px;
	color: #563a1e;
	text-shadow: 0 1px 0 #fedd9b;
	text-decoration: none;
}

.enter button, .forgot_pass button, .forgot_pass input, .registration button {font-size: 18px;}

.registration a, .registration button {
	background: #eceff1;
	background: linear-gradient(#ffebee, #ef9a9a);
	border: solid 1px #f44336;
	border-bottom: solid 2px #c62828;
	box-shadow: inset 0 0 0 1px #f5f5f5, 0 1px 2px rgba(0,0,0,.3);
	color: #000;
	text-shadow: 0 1px 0 #ffebee;
}

.forgot_pass a, .forgot_pass button, .forgot_pass input {
	background: #eceff1;
	background: linear-gradient(#eceff1, #cfd8dc);
	border: solid 1px #90a4ae;
	border-bottom: solid 2px #607d8b;
	box-shadow: inset 0 0 0 1px #f5f5f5, 0 1px 2px rgba(0,0,0,.3);
	color: #263238;
	text-shadow: 0 1px 0 #eceff1;
}

input:disabled, button:disabled {filter: opacity(30%);}

@media screen and (max-width: 700px) {
.prominent {height: auto; padding: 10px;}
.prodefender {display: table; margin: 0 auto; position: static; top: auto;}
.prodefender div {display: inline-block; float: left; padding: 1px 0 0; margin: 0 3px 3px 0;}
}

@media screen and (max-width: 640px) {
#defender {max-width: none;}
.extreme {height: auto; background: url('pattern/extreme.jpg');}
.invent {max-width: none;}
.citizen {display: block; width: 100%; text-align: center;}
.citizen img {width: 240px; height: auto;}
.imperialistic {display: block; text-align: center;}
.influence {text-align: left;}
.distinct {background-size: cover;}
.grammar {width: 100%;}
.prominent {height: auto; padding: 10px;}
.prodefender {display: table; margin: 0 auto; position: static; top: auto;}
.prodefender div {display: inline-block; float: left; padding: 1px 0 0; margin: 0 3px 3px 0;}
}