/* styles.css */

/******************************************************
			Basic Formatting
******************************************************/
* {
	font-family				:verdana,sans-serif;
	/* font-size				:10pt; */
}

body {
	/* define the overall width of the full content */
	width					:850px;
	margin					:10px auto;
	background				:#f8f8f8;
	border					:2px solid #888;
}

html {
	background				:#bbb;
}

img {
	border					:1px solid black;
	margin-right			:15px;
	-moz-box-shadow			:2px 2px 2px #888;
	-webkit-box-shadow		:2px 2px 2px #888;
	box-shadow				:2px 2px 2px #888;
}

li a, .button {
	text-decoration			:none;
}

li a:hover, .button:hover {
	color					:green;
}
 
.appname {
	text-align				:center;
	/* background				:#eb8; */
	background				:#0d9;
	color					:#40d;
	font-family				:verdana;
	padding					:4px;
}

.fieldname {
	float					:left;
	width					:120px;
}

.main {
	/* define tab line margins, change when new items are added */
	margin-left				:30px;
	margin-right			:29px;
}

.info {
	background				:#0d9;
	color					:#40d;
	border					:1px solid green;
	padding					:5px 10px;
	margin-left				:40px;
}

.menu li, .button {
	display					:inline;
	padding					:4px 6px;
	border					:1px solid #777;
	background				:#ddd;
	color					:#d04;
	margin-right			:8px;
	border-radius			:5px;
	-moz-box-shadow			:2px 2px 2px #888;
	-webkit-box-shadow		:2px 2px 2px #888;
	box-shadow				:2px 2px 2px #888;
}

.subhead {
	font-weight				:bold;
}

.taken, .error {
	color					:red;
}

.available {
	color					:green;
}

.whisper {
  font-style				:italic;
  color						:#006600;
}

.hidedata {
	display					:inline-block;
	visibility				:hidden;
}

.app-button {
	font-size				:10pt;
}

#logo {
  font-family				:Georgia;
  font-weight				:bold;
  font-style				:italic;
  font-size					:97px;
}

#selectedco {
	display					:inline-block;
}

#gameround {
	display					:inline-block;
	float					:right;
}

/******************************************************
			Tabs formatting
******************************************************/
ul.tab {
    list-style-type			:none;
    margin					:0;
    padding					:0;
    overflow				:hidden;
    border					:1px solid #ccc;
    background-color		:#f1f1f1;
}

/* Float the list items side by side */
ul.tab li  {
	float					:left;
}

/* Style the links inside the list items */
ul.tab li a {
    display					:inline-block;
    text-align				:center;
    padding					:14px 16px;
    text-decoration			:none;
    transition				:0.3s;
    font-size				:12px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
	color					:blue;
    background-color		:#ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color		:#000;
	color					:#fff;
}

/* Style the tab content */
.tabcontent {
	font-size				:10pt;
    display					:none;
    padding					:6px 12px;
    border					:1px solid #ccc;
    border-top				:none;
}

/* Style the tab content */
.tabtexthead {
	font-size				:10pt;
	font-weight				:bold;
	padding-top				:8px;
}

/******************************************************
			Data tables formatting
******************************************************/
.data-table {
    border-collapse			:collapse;
    border-spacing			:0;
    width					:100%;
    border					:1px solid #ddd;
}

.data-table th, td {
	font-size				:10px;
    border					:none;
    text-align				:left;
    padding					:8px;
}

.data-table tr:nth-child(odd){
	background-color		:#aaa;
}

.data-table tr:nth-child(even){
	background-color		:#ddd;
}

.tcHideID {
	display					:none;
}

.tcNumberRight {
	text-align				:right;
}

.tcNumberCenter {
	text-align				:center;
}

.tcTextLeft {
	text-align				:left;
}

.tcTotal {
	font-weight				:bold;
}

.tcHeaderRight {
	text-align				:right;
}

.in-table-info {
	display					:inline-block;
	font-size				:10px;
}

.in-table-field {
	font-size				:10px;
	text-align				:right;
	border-radius			:6px;
}

.in-table-field:focus {
	border					:2px solid blue;
	background-color		:#e6f7ff;
}

.trClickabe:hover {
	color					:blue;
	font-size				:12px;
	font-weight				:bold;
}

/******************************************************
			Assets/Functions table formatting
******************************************************/
.tcLevel {
	text-align				:center;
}

.tcUpgrade {
	text-align				:center;
}

td.tcUpgrade:hover {
	color					:blue;
	font-size				:10px;
	font-weight				:bold;
	border-style			:solid;
	border-width			:1px;
}

.tcDowngrade {
	text-align				:center;
}

td.tcDowngrade:hover {
	color					:blue;
	font-size				:10px;
	font-weight				:bold;
	border-style			:solid;
	border-width			:1px;
}

.tcPart {
	border-left				:2px solid #eee;
}

/******************************************************
			Modal box formatting
******************************************************/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box from the top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity (how the background window will fade) */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fff;
    margin: auto;
    padding: 100;
    border: 2px solid #fff;			/* determines the modal border */
    width: 700px;						/* determines the overall width of the window */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close-modal {
    color: #000;
    float: right;
	padding-top: 0px;
	padding-right: 6px;
	font-family: verdana;
    font-size: 20px;
    font-weight: bold;
}

.close-modal:hover, .close-modal:focus {
    color: blue;
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
	border-style: solid;
	border-width: 1px;
}

.modal-header {
	font-family: verdana;
	font-size: 12pt;
	font-weight: bold;
    padding: 16px 16px;
    background-color: #ddd;
    color: #000;
}

.modal-body {
	font-family: verdana;
	font-size: 10pt;
	padding: 16px 16px;
}

.modal-footer {
	font-family: verdana;
	font-size: 10pt;
    padding: 2px 16px;
    background-color: #eee;
    color: #000;
}

.game-field-pair {
	clear					:left;
	padding-top				:6px;
}

.game-field-name {
	font-size				:10pt;
	float					:left;
	width					:150px;
}

.game-input-field {
	font-size				:10pt;
	border-radius			:6px;
}

.game-input-field:focus {
	border					:2px solid blue;
	background-color		:#e6f7ff;
//	border-color			:blue;
}

.modal-info {
	font-size				:10pt;
	padding-bottom			:6px;
}

.modal-button {
	font-size				:10pt;
}

.modal-error-status{
	font-size				:10pt;
	color					:red;
	font-weight				:bold;
}

.modal-ok-status{
	font-size				:10pt;
	color					:green;
	font-weight				:bold;
}

option {
	font-size				:10pt;
}

section {
	clear					:left;
}

/******************************************************
			Reports formatting
******************************************************/
.report-title {
	font-size				:12pt;
	font-weight				:bold;
}

.report-table {
    border-collapse			:collapse;
    border-spacing			:0;
    width					:100%;
    border					:1px solid #ddd;
}

.report-table th {
	font-size				:10px;
	font-weight				:bold;
    border					:none;
    padding					:8px;
}

.report-table td {
	font-size				:10px;
    padding					:4px;
}

.report-table tr:nth-child(odd){
	background-color		:#ddd;
}

.report-table tr:nth-child(even){
	background-color		:#fff;
}

.report-subtotal-text {
	font-weight				:bold;
}

.report-subtotal-data {
	font-weight				:bold;
	border-width			:1px;
	border-color			:222;
	border-style			:solid none solid none;
}

.report-total-text {
	font-weight				:bold;
	font-size				:10px;
}

.report-total-data {
	font-weight				:bold;
	font-size				:10px;
	border-width			:2px;
	border-color			:222;
	border-style			:solid none solid none;
}

.report-grandtotal-text {
	font-weight				:bold;
	font-size				:10px;
}

.report-grandtotal-data {
	font-weight				:bold;
	font-size				:10px;
	border-color			:222;
	border-style			:solid none double none;
}

.report-button {
	font-size				:11px;
	color					:white;
	background-color		:black;
}

.report-button:hover {
	color					:yellow;
}

.report-button:focus {
	color					:yellow;
}

/******************************************************
			Tooltips
******************************************************/
.tooltip {
    position				:relative;
    display					:inline-block;
	color					:blue;
}

.tooltip .tooltiptext {
	font-size				:10px;
    visibility				:hidden;
    width					:250px;
    background-color		:#555;
    color					:#fff;
    text-align				:left;
    border-radius			:6px;
    padding					:5px 5px 15px 15px;
    position				:absolute;
    z-index					:1;
    top						:-10%;
    left					:70%;
    margin-left				:25px;
    opacity					:0;
    transition				:opacity 1s;
}

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

.tooltipdivhead {
	font-size				:12px;
	font-weight				:bold;
}

.tooltipdivupinfo {
	font-size				:10px;
	color					:#6cf;
}

.tooltipdivupstatus {
	font-size				:10px;
	color					:#ff5050;
}

.tooltipdivtip {
	font-size				:10px;
}

.tooltipdiv {
	font-size				:10px;
}

/******************************************************
			Alerts
******************************************************/
.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
}

/******************************************************
			Chat box formatting
******************************************************/
.chatbox {
	width					:97%;
	height					:400px;
	margin					:10px auto;
	background				:#f8f8f8;
	border					:1px solid #ccc;
	overflow				:scroll
}

.chatmessage {
	width: 95%;
    border: 2px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 6px;
    padding: 10px;
    margin: 10px auto;
}

.chatdark {
    border-color: #ccc;
    background-color: #ddd;
}

.chatmsgheader {
	padding-left			:8px;
	font-weight				:bold;
}

.chatline {
	padding-left			:2px;
}