/* HIGH-LEVEL TAG STYLES */

/* Base for document */

/* * { border: 1px solid gray; } */

body {
	background-image: 	url('../image/bg.png');
	background-repeat:	repeat;
	font-family: 		'Rasa', sans-serif;
	font-size:			2em;
	color:				white;
}

div.well.story {
	background-color:	rgba(0,0,0,.5);
	background-image: none;
	font-size: 14pt;
}

/* Headers make use of different font */
h1, h2, h3 {
	font-family: 'Rasa', sans-serif;
}

/* Body hyperlinks have reversed float behavior. */
p a:link, a:visited, a:active {
	color: #c0f3ea;
	text-decoration: underline;
}
p a:hover {
	color: #c0f3ea;
	text-decoration: none;
}

/* Top-level container enforces page width and centers. */
#container {
	margin: 		auto;
	margin-top: 	32px;
	width: 			80%;
	max-width: 		1100px;
	min-width:		760px;
	position: 		relative;
}

/* Title style */
#title{
	font-family: 	'Cinzel', sans-serif;
	font-size:		40px;
	color:			#c0f3ea;
	text-shadow: 	2px 2px 5px #c0f3ea;
	margin-bottom: 	20px;
}

/* Floating body "sections" disconnected from each other. */
.subcontainer{
	background-color:	rgba(0,32,24,0.8);
	display: block;
	width: 100%;
	border-radius: 5px;
	margin: 0px auto 20px;
	padding: 0.1px 20px;
}

/* Outer frame for kit selector panels. Centers. */
.kit-outer {
	width:	714px;
	margin: 0px auto 10px;
	box-sizing: content-box;
	font-size: 0px;
}

/* A panel of 6 equipment slots */
.equip-panel{
	display: inline-block;
	vertical-align: top;
	width: 240px;
	height: 540px;
	box-sizing: content-box;
}

	.equip-slot{
		display: inline-block;
		position: relative;
		width: 120px;
		height: 180px;
		box-sizing: border-box;
	}

		.equip-slot-text {
			width: 100px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			font-size: 20px;
			margin: 0px auto;
			display: block;
		}

		.equip-slot-text span {
			line-height: normal;
			display: inline-block;
			vertical-align: middle;
			color: white;
		}

		.equip-slot-text.disabled span{
			color: gray;
		}

		.equip-slot-portrait{
			width: 84px;
			height: 108px;
			border-style: double;
			background-color: rgba(0,0,0,0.3);
			display: block;
			margin: 0px auto;
			background-size: 80px 104px;
			background-repeat: no-repeat;
			border-color: white;
			cursor: pointer;
		}

		.equip-slot-portrait.disabled {
			border-color: gray;
			cursor: no-drop;
		}

/* A panel containing the ship selection slot */
.ship-panel{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 200px;
	height: 540px;
	margin: 0px 16px;
	text-align: center;
	box-sizing: content-box;
}

	.ship-slot-text {
		width: 90%;
		line-height: 48px;
		margin: 20px auto 10px auto;
	}

	.ship-slot-text span {
		line-height: normal;
		display: inline-block;
		vertical-align: middle;
		font-size: 24px;
	}

	.ship-slot-portrait{
		width: 200px;
		height: 248px;
		border: none;
		border-radius: 10px;
		background-color: rgba(0,0,20,0.3);
		position: absolute;
		top: 17px;
		left: 0px;
		background-size: 90% auto;
		background-repeat: no-repeat;
		background-position: center center;
		box-sizing: border-box;
	}

/* Big selector buttons for which content to fade in */

.ww-tab-container {
	font-family: 	'Cinzel', sans-serif;
	width: 100%;
	text-align: justify;
	font-size: 0.1px;
	margin: 20px 0px 0px;
}

.ww-tab {
	width: 25%;
	background-color:	rgba(0,0,0,.5);
	background-image: none;
	display: inline-block;
	text-align: center;
	padding: 10px;
	margin: 0px 20px;
	box-sizing: border-box;
}

.ww-tab-container:after {
  content: '';
  width: 100%; /* trick in concert w/ justify*/
  display: inline-block;
}

.ww-tab a:link, a:visited, a:active {
	font-size: 18pt;
	text-decoration: none;
	color: #c0f3ea;
	text-shadow: none;
}

.ww-tab a:hover {
	text-shadow: 2px 2px 5px #c0f3ea;
}

.eq-thumb {
	box-shadow: none;
	opacity: 0.2;
}

.eq-thumb.selected {
	box-shadow: 0px 0px 4px 4px rgba(125, 255, 255, .5);
}

.eq-thumb.enabled {
	opacity: 1.0;
}

/* Analysis tab style */

#analysis-table-div {
	display: inline-block;
	vertical-align: top;
	width: 30%;
	padding-top: 7px;
}

#analysis-bar-div {
	display: inline-block;
	vertical-align: top;
	width: 69%;
	padding: 0px 20px;
}

.stat-bar {
	display: block;
	margin-top: 10px;
}

.stat-bar span, .stat-bar progress{
	display: inline-block;
	vertical-align: top;
}

.red-bar {
	background-image: linear-gradient(to bottom,#d9534f 0,#671715 100%);
	background-repeat: repeat-x;
}

.orange-bar {
	background-image: linear-gradient(to bottom,#e28500 0,#4c2d01 100%);
	background-repeat: repeat-x;
}

.green-bar {
	background-image: linear-gradient(to bottom,#00e23b 0,#064c01 100%);
	background-repeat: repeat-x;
}

.blue-bar {
	background-image: linear-gradient(to bottom,#006fe2 0,#012d4c 100%);
	background-repeat: repeat-x;
}

/* Bootstrap overrides */

.nav>li>a {
	text-decoration: none;
}

.btn, .btn-shipradio:active {
	color: #888888;
	font-size: 18px;
	background-image: linear-gradient(to bottom, #FFFFFF 0, #BBBBBB 100%);
	border-color: #000000;
}

.btn-shipradio.active {
	color: white;
	background-image: linear-gradient(to bottom, rgb(2, 90, 68), rgb(0, 49, 33));
}

.dropdown-menu li {
	display: inline-block;
	color: black;
	white-space: nowrap;
	width: 98%;
	padding: 2px;
	margin: 2px;
	border-style: solid;
	border-width: 1px;
	border-color: white;
}

.dropdown-menu li img {
	height: 40px;
}

.dropdown-menu li:hover {
	border-color: gray;
	cursor: pointer;
}

.progress {
	height: 30px;
	background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.14) 0,rgba(0, 0, 0, 0.25) 100%);
	background-color: initial;
}

.progress-bar {
	font-size: 18px;
	line-height: 30px;
	background-repeat: repeat-x;
}

/* SORTABLE TABLES */

table.tablesorter {
	font-family:arial;
	background-color: #002118;
	margin:10px 0pt 15px;
	font-size: 10pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #000000;
	border: 1px solid #79c2d1;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(../image/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: white;
	padding: 4px;
	background-color: rgba(0,24,18,1.0);;
	vertical-align: middle;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(../image/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(../image/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #1e1e1e;
}
table.tablesorter tbody tr td img {
	height: 40px;
}