/* <? 00_HTML */

* {
	box-sizing: border-box;
}

body {
	font-family: "Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
	background: #666 url("../im/bg.png") repeat scroll;
	height: 100%;
}

html, body {
   margin:0;
   padding:0;
   height:100%;
}

input[type="number"], input[type="text"], input[type="password"] {
	background-color: #ccc;
	border-color: #bbc;
}

a, a:visited, a:active  {
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}

/* 00_HTML ?> */
/* <? Common */

.hidden {
    display: none;
}

.centeredLayer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}


 .centeredLayer h1 {
    white-space: nowrap;
    margin-bottom: 0;
    padding-top: 0;
 }
 
#messageDiv-highlight.ui-state-disabled {
	opacity: 1 !important;
}

.imgBounty {
	background-image: url('../img/bounty_horn.svg');
	background-size: 12px;
}

.imgMoney[size="28"] {
	background: rgba(0, 0, 0, 0) url("../img/bank19.svg") no-repeat scroll 0 0;
	background-size: 28px;
	display: inline-block;
	width: 28px;
	height: 28px;
}

.user_money-span[size="20"] {
	background: rgba(0, 0, 0, 0) url("../img/bank19.svg") no-repeat scroll 0 0;
	background-size: 20px;
	padding: 2px 10px 2px 24px;
}

#user_waiting-span[size="20"] {
	min-height: 2em;
	min-width: 2em;
	background: rgba(0, 0, 0, 0) url("../im/common_20.png") no-repeat scroll 0 -22px;
	padding: 2px 10px 2px 24px;
}

#in_prison-span[size="20"] {
	min-height: 1.5em;
	background: rgba(0, 0, 0, 0) url("../im/common_20.png") no-repeat scroll 0 -44px;
	margin: 0;
	padding: 2px 10px 2px 13px;
}

#bount-level[size="15"] {
	min-height: 1.5em;
	margin: 0;
	padding: 2px 7px 2px 2px;
}

#bount-level[size="15"] img {
	width: 15px;
}

#main-help {
    display: none;
}

.btn-close-wrapper {
	right: 5px;
	position: absolute;
	top: 5px;
	padding: 8px;
	width: 16px;
	height: 16px;
	box-sizing: content-box;
}

.btn-close {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}

.other-player {
	position: relative;
	cursor: pointer;
}

#user-detail-div {
	position: absolute;
	background-color: #986000;
	line-height: 20px;
	border: 3px solid gold;
	border-radius: 1em;
	padding: 2px 1em;
	z-index: 99;
}

#user-detail-div .user-reputation, #user-detail-div .user-current-location {
	line-height: 10px;
	font-size: 10px;
}

.list-users-large {
	width: 100%;
	overflow: hidden;
	box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}

.list-users-large > li {
	padding: 8px 16px;
	border-bottom: 1px solid #ddd;
	background-color: #fff;
}

.list-users-large .mygroup {
	background: linear-gradient(30deg, transparent 90%, #c1cedb 0)-10px 0, linear-gradient(45deg, transparent 90%, #b6c1dd 0)-10px 0, linear-gradient(135deg, #c1c5ce 50%, transparent 10%) 0 0, linear-gradient(45deg, #a7adb3 90%, #bdb3b2 0) 0 0 #cad0d4;
    background-size: 10px 10px;
}

.list-users-large .friend--3 {
	background-color: #bce7c5;
	background-image: repeating-linear-gradient(-25deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);
}

.list-users-large .friend--1 {
	background-color: #bce7c5;
	background-image: repeating-linear-gradient(25deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);
}

.list-users-large .friend-1 {
	background-color: #bce7c5;
	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
	background-size: 10px 10px;
}

.list-users-large .its-me {
	background:
	radial-gradient(hsl(53, 100%, 27.1%) 4%, hsl(59.3, 87.1%, 36.5%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(55.2, 100%, 27.1%) 4%, hsl(61.3, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(52.9, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(59.2, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsl(59.2, 90%, 31.4%) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsl(55.3, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(57.2, 95.5%, 34.9%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(55.3, 100%, 15.1%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
	background-color: #300; 
	background-size: 150px 80px;
}

.user-reputation::before {
	content: '';
	background-image: url('../im/stars_reputation.svg');
	background-size: 24px;
	display: inline-block;
	width: 24px;
	height: 10px;
	background-repeat: no-repeat;
	margin-right: 4px;
}

.user-bounty::before {
	content: '';
	background-image: url('../img/bounty_horn.svg');
	background-size: 35px;
	background-repeat: no-repeat;
	display: inline-block;
	width: 35px;
	height: 35px;
}

.user-interact, .user-interact-link {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-size: 40px;
	cursor: pointer;
	border: 1px solid green;
}

.user-interact.interact-enabled, .user-interact-link.interact-enabled {
	border-radius: 3px;
	background-color: green;
	border-color: green;
}

.user-interact.interact-disabled, .user-interact-link.interact-disabled, .interact-on-hold {
	border-radius: 3px;
	background-color: grey;
	border-color: grey;
}

.user-interact.interact-on-hold {
	background-color: blue;
	border-color: blue;
}

.user-help {
	background-image: url('../img/finger_up.svg');
}

.user-follow {
	background-image: url('../img/eye.svg');
}

.user-donate {
	background-image: url('../img/dontemoney.svg');
}

.add-friend {
	background-image: url('../img/add-friend.svg');
}

.remove-friend {
	background-image: url('../img/remove-friend.svg');
}

.user-punish {
	background-image: url('../img/finger_down.svg');
}

.user-attack {
	background-image: url('../img/gun-shooting-target.svg');
}

/* Common ?> */

/* <? principle */
.principle {
    
}

.sp-principle {
    font-weight: bold;
    margin-top: 1em;
}

.ul-principle {
    margin-block-start: 0;
    margin-block-end: 0;
}

.ul-principle.hasChild {
    list-style-type: none;
}

/* principle  ?> */

/* <? user avatar */
.list-users-large li {
    clear: both;
    height: auto;
    height: 50px;
}

.list-users-large .avatar, .list-users-large .usr-details {
    float: left;
    display: block;
}
.avatar {
    background-color: #ccc;
    background-color: #ccccccb3;
    border-radius: 5px;
    
}

.avatar-small {
    padding: 5px;
    margin: 0 2px;
}
.avatar-small img {
    width: 25px;
    height: 25px;
}
/* user avatar ?> */

/* <? Company */
.company-no-logo {
	filter: invert(30%);
}

.company-logo[size="150"], .company-no-logo[size="150"] {
    max-width: 150px;
    max-height: 150px;
}

.company-logo[size="50"], .company-no-logo[size="50"] {
    max-width: 50px;
    max-height: 50px;
}

.company-logo[size="30"], .company-no-logo[size="30"] {
    max-width: 30px;
    max-height: 30px;
}

.company.selected {
    border: 3px solid green;
}
/* Company ?> */

input.cbox, input.rdo {
	opacity: 0;
}

input.cbox + label, input.rdo + label {
	margin: 0 5px 0 -20px;
	padding: 0 5px 0 1px;
	cursor: pointer;
}

input.cbox + label:before, input.rdo + label:before {
	height: 25px;
	margin-right: 2px;
    line-height: 24px;
	color: #fff;
	opacity: 1;
	cursor: pointer;
    display: inline-block;
}

input.cbox + label:before {
	content:"☐";
}
input.cbox:checked + label:before {
	content:"☑";
}

input.rdo + label:before {
	content:"⭕";
}
input.rdo:checked + label:before {
	content:"🔘";
}

.cty-name-building {
	height: 12px;
}

.city-details {
	font-size: 0.9em;
	text-align: left;
}

.tbl-city-details {
	width: 100%;
}

.city-details .shop {
	width: 100%;
	margin: 0;
	padding: 0;
}

.item {
	font-size: 1.7em;
	display: inline-block;
    margin: 0 0 40px 25px;
    z-index: 1;
	max-width: 18.6em;
}

img.shop-item {
	width: 28px;
}

.item .item-name, .item .item-head, .item .item-price, .item .item-buy, .item .item-amount, .item .item-img {
	text-align: center;
    white-space: nowrap;
	margin: 0;
}

.item .item-head {
	font-size: 1em;
	color: #800000;
	font-family: "Segoe UI",Tahoma,sans-serif;
	padding-bottom: 4px;
}

.item .item-name, .item .item-name select, .item .item-name input {
	font-size: .8em;
	color: #800000;
	font-family: "Segoe UI",Tahoma,sans-serif;
	padding-bottom: 4px;
}

.item .item-desc {
	font-size: .6em;
	color: #030045;
	padding-bottom: 4px;
	text-align: center;
	margin: 0;
}

.item .item-price {
	font-size: .8em;
	color: #030045;
	padding-bottom: 4px;
}

.item .item-amount {
	font-size: .8em;
	color: #1F1919;
	padding-bottom: 4px;
}

.item .item-buy button {
	margin: auto;
	padding: 2px;
}

.item .item-accretion {
	padding-right: 5px;
}

#map-city-shop {
	display: none;
	min-width: 35em;
	max-width: 95%;
	top: 0;
	left: 20%;
	position: absolute;
	font-size: 1.5em;
	background: #666 url("../img/linen_header.jpg") repeat scroll 0 0;
	z-index: 15;
	border-radius: 0.3em;
	padding: .5em;
}

#map-city-shop table td {
	vertical-align: middle;
}

#map-city-shop .price {
	text-align: right;
}

#map-city-shop h1 {
	padding-top: 0;
	font-size: 1.5em;
	margin-bottom: 0;
}

#map-city-shop table {
	width: 100%;
	padding: 0 1em;
	table-layout:fixed;
}

#map-city-shop button {
	margin: auto;
	padding: 0;
}

#map-city-shop ul.own-ui-tabs {
	margin: 0;
}

.imgRdo {
	background-color: #ccc;
	border-radius: 3px;
	padding: 4px;
}

.imgRdo.selected {
	background-color: #63000A;
}

.imgRdo span {
	margin: auto;
	vertical-align: middle;
}

.vehicle[size="28"] {
	width: 28px;
	height: 28px;
	display: inline-block;
	background: rgba(0, 0, 0, 0) url("../img/vehicles_28.png") no-repeat scroll;
}

.vehicle-car[size="28"] {
	background-position: 0 -56px;
}

.vehicle-truck[size="28"] {
	background-position: 0 -28px;
}

.vehicle-plane[size="28"] {
	background-position: 0 0;
}

.btnImg {
	background: rgba(0, 0, 0, 0) url("../img/buttons.png") no-repeat scroll;
	padding-left: 30px;
}

.btnChange {
	width: 1.8em !important;
	height: 1.8em !important;
}

.btnChange.disabled::after {
	color: grey;
}

.btnUpdate::after {
	content: '🔧';
}

.btnGetNew::after {
	content: '＋';
}

.btnTrain::after {
	content: '🚶';
}

.btnDead::after {
	content: '☠';
}

a.button-logout {
	background: rgba(0, 0, 0, 0) url("../im/buttons.png") no-repeat scroll 0 -236px;
    color: #fff;
    display: inline-block;
    padding: 2px 10px 2px 20px;
}

.city-with-details {
	background-color: #666;
	min-width: 10em;
	border-radius: 0.3em;
	z-index: 11;
}

table.dg-table {
	min-width: 65em;
	border-spacing: 0;
}

table.dg-table th {
	text-align: left;
}

.dg-table tr {
	line-height: 24px;
}

.dg-table tbody tr:hover {
	background-color: #655;
}

.user-mail .unread:hover, .user-mail .read:hover {
	background-color: #655;
}

.user-mail .unread {
	font-weight: bold;
	cursor: pointer;
}

.user-mail .read {
	cursor: pointer;
}

#global-container {
	min-height:100%;
	position:relative;
}

#header {
	width: 100%;
	left: 0;
	top: 0;
}

#header  #topline {
	background: #666 url("../img/linen_header.jpg") repeat scroll 0 0;
    border-bottom: 1px solid #4f4f4f;
    color: #aaa;
    height: 25px;
    padding: 2px 0 2px 2px;
    text-align: center;
}

#header .topright {
	float: right;
}

#header .topleft, #header .topleft span, #header .topleft div {
	float: left;
}

#content {
    margin: 0 10px;
	position: relative;
	font-size: 1.2em;
	padding-bottom:18px;
}

#in_prison-span {
	display: none;
	position: relative;
	white-space: nowrap;
}

#in_prison-layer {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	pointer-events: none;
	background-color: #000;
	opacity: 0.2;
}

#user_waiting-span {
	display: block;
	margin: 0;
	white-space: nowrap;
}

#user_waiting {
	background: #666 url("../img/linen_header.jpg") repeat scroll 0 0;
	padding: 0 1em 4px 1em;
	border-radius : .3em;
	margin: 0;
	min-height: 1.5em;
	min-width: 2em;
	position: absolute;
	z-index: 20;
}

ul#user_waiting {
	text-align: left;
}

#user_waiting li {
	list-style-type: none;
}

#footer {
	background: #666 url("../img/linen_header.jpg") repeat scroll 0 0;
    border-bottom: 1px solid #4f4f4f;
    color: #aaa;
    height: 18px;
    text-align: center;
	width: 100%;
	left: 0;
	bottom: 0;
	position: absolute;
	font-size: 11px;
}

#footer li{
	float: left;
    list-style-type: disc;
	padding-right: 1.2em;
}

ul.noul {
	margin: 0 5px;
	padding: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

ul.noul > li {
    list-style-type: none;
}

ul.nolist > li {
    float: left;
    padding: 12px 10px 0 6px;
}

.user-invent, .main-obj-tbl {
	font-size: 1.7em;
	float: left;
}

.user-invent select, .user-invent input[type="text"], .user-invent input[type="password"] {
	font-size: 1.1em;
}

.user-invent td, .main-obj-tbl {
	height: 33px;
}

img.invent-item {
	width: 28px;
}

#main-data, .main-data {
	margin: auto;
	display: inline-block;
	text-align: left;
}

#main-data td, .main-data td {
	vertical-align: top;
}

#main-data input[type="number"], .main-data input[type="number"], .main-data input[type="text"], .main-data input[type="password"], .main-data select, .main-data textarea,
#main-data button, .main-data button {
	width: 99%;
}

#main-data button, .main-data button {
	margin: 0;
	padding: 0;
}

#main-data button.freeBtn, .main-data button.freeBtn {
    width: 10em;
}

#main-data table.formTbl, .main-data table.formTbl {
    width: 30em;
    float: left;
}

.select-container .slc-ctn-left {
	left: -0.1em;
}

.select-container .slc-ctn-right {
	right: -0.1em;
}

.select-container .slc-ctn-left, .select-container  .slc-ctn-right{
	margin-top: -3px;
	padding-bottom: 5px;
	cursor: pointer;
	width: 1em;
	font-size: 1.5em;
	height: 100%;
	position: absolute;
}

.select-container {
	background-color: #ccc;
	border-color: #bbc;
	border-width: 2px;
	white-space: nowrap;
	position: relative;
	text-align: center;
	padding-bottom: 4px;
}
.select-container select {
	font-size: 1.5em;
	background: none;
	border: none;
	-moz-appearance: none;
	
	#margin: 0 0.2em;
	padding: 0 24px 0 18px;
}

.infinity {
	cursor: pointer;
}

.price, .numberR {
	white-space: nowrap;
	text-align: right !important;
}

.invent-money:before, .price:before {
	content: '$';
}

input[type="number"].price:before {
	content: '$';
	position: absolute;
	left: 0;
	z-index: 2;
}

input[type="number"].price {
	padding-left: 1em;
}

.input-price {
    position: relative;
}
 
.input-price input {
    padding-left:18px;
}

.input-price:before {
    content: "$";
    font-size: 20px;
    left: 5px;
    position: absolute;
    top: 2px;
}

.influence:after, .inPercent:after {
	content: '%';
}

.building_level:before {
	content: 'Stufe ';
}

.invent-weed:after, .invent-coke:after, .invent-crystal:after, .kg-amount:after {
	content: 'kg';
}

.user-bill {
	margin: 0 0 1.2em 0;
	border-spacing: 0;
	padding: 0;
	width: 51em;
	white-space: nowrap;
}

.user-bill td {
	padding: 5px;
}

.simpleContainer {
	width: 250px;
	display: inline-block;
    margin: 0 0 40px 25px;
    z-index: 1;
	float: left;
	font-size: 1.1em;
}

.simpleContainer .title {
	color: #800000;
    font-family: "Segoe UI",Tahoma,sans-serif;
    overflow: hidden;
    padding-bottom: 4px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.simpleContainer .content {
	color: #333;
	position: relative;
	min-height: 180px;
    text-decoration: none;
	background: #f6f6f6 none repeat scroll 0 0;
	border: 1px solid #ddd;
    border-radius: 0.3125em;
    box-shadow: 0 1px 4px -2px #444;
    padding: 5px 8px 2px;
    z-index: 1;
}

.simpleContainer .footer {
	color: #1f1919;
	position: absolute;
	bottom: 0;
	width: 100%;
	font-size: .9em;
}

.pc-overall {
    display: block;
    width: 200px;
    height: 35px;
    font-size: 25px;
    line-height: 36px;
    box-sizing: border-box;
}

.pc-overall .pc-container {
    display: block;
    height: 35px;
    border: 1px solid #a2b7bd;
    background: #cedee3 none repeat scroll 0 0;
	position: relative;
}

.pc-ttl .process {
    background: #688089 none repeat scroll 0 0;
    color: #212f36;
}

.pc-overall .process {
    width: 0;
    position: absolute;
    z-index: 11;
    -webkit-transition: width 2s;
    transition: width 2s;
}

.pc-overall .label {
    z-index: 12;
    width: 100%;
    text-align: center;
    position: absolute;
}

.pc-overall .process, .pc-overall .label, .pc-container {
    height: 100%;
}

.simpleContainer .pc-overall {
	width: 233px;
}

ul.imprint li {
	list-style-type: none;
	display:table-row;
}

ul.imprint img {
	width: 28px;
	vertical-align: middle;
}

/* <? buildings */

.building[size="28"] {
	display: inline-block;
	width: 28px;
	height: 28px;
}

/* buildings ?> */