body {
	color: #ddd;
	background: #000 url("../img/ui/banner_classes.jpg") top no-repeat fixed;
}
ul, ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0;
}
table, tr, td {
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}
hr {
	color: red;
}

.hidden {
	display: none;
}
.brownish {
	color: #d6ad7b;
}

.page-container {
	max-width: 960px;
	margin: 0 auto;
	background: rgba(0,0,0,0.75);
}


/* Site Heading */
.page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 1px solid white;
}
.page-header > * {
	margin: 0px 10px;
}

/* Header: Left */
.site-title {
	font-size: 24px;
	color: white;
	text-shadow: 0px 0px 10px white;
}
.page-title {
	font-size: 24px;
	color: #189ad3;
	text-shadow: 0px 0px 10px #189ad3;
}

/* Header: Center */
.character-info {
	text-align: center;
}

/* Header: Right */
.character-list {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
.character-select-label {

}
.character-select-dropdown {
	margin-left: 3px;
	margin-bottom: 3px;
}


/* Main content area */
.content-body {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20px;
}
.content-left,
.content-right {
	width: 48%;
}
.display-component {
	margin-top: 20px;
}


/* Tessellated containers vertically when portrait ratios */
@media only screen and (max-width: 959px) {
    .content-body {
    	flex-direction: column;
    }
	.content-left, .content-right {
		width: 100%;
	}
}


/* Character Stat List */
.stats-container {
	width: 100%;
	font-family: "arial";
	font-size: 12px;
}
.stats-column {
	display: flex;
	flex-direction: column;
}
.stats-column:first-child {
	margin-right: 20px;
}
.stats-row {
	display: flex;
	justify-content: flex-start;
}
.stats-group {
	margin-bottom: 10px;
}
.stat-title {
	color: #d6ad7b;
	width: 100px;
}
.stat-value {
}



/* Content Tabs */
.tabbed-content-tabs {
	display: flex;
	justify-content: center;
	border-bottom: 2px solid #776d61;
}
.tabbed-content-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 28px;
	color: #aaaaaa;
	text-align: center;
	background: black url("../img/ui/tab_dark_bg.jpg") no-repeat;
	background-size: 100%;
	cursor: pointer;
}
.tabbed-content-tab:hover {
	color: white;
}
.tabbed-content-tab.active {
	color: #d6ad7b;
	background-image: url("../img/ui/tab_light_bg.jpg");
}

.tabbed-content-displays {
	display: flex;
	justify-content: center;}
.tabbed-content-display {
	display: none;
}
.tabbed-content-display.active {
	display: block;
}


/* Character Gear Showcase */
.gear-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.weapon-tabs {
	position: relative;
	width: 290px;
	height: 16px;
}
.weapon-tab {
	position: absolute;
	width: 62px;
	height: 16px;
	background-image: url('../img/ui/weapon_tab1.jpg');
	cursor: pointer;
}
.weapon-tab.right {
	right: 0px;
}
.weapon-tab.secondary {
	background-image: url('../img/ui/weapon_tab2.jpg');
}



/* General Item Showcase */
.items {
	position: relative;
}
.item-container {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.item-container:hover {
	background: rgba(0,200,0,0.1);
}


/* Socket Overlay Showcase */
.socketable-container {
	position: absolute;
	top: 0;
	left: 0;
}
.socketable-slots {
	display: flex;
	flex-direction: column;
}
.socketable-slot-container {
	position: relative;
}
.socketable-slot-container:hover {
	background: rgba(255,255,255,0.3);
}
.socketable-slot-img {
	display: block;
	width: 14px;
	height: 14px;
}


/* Inventory Showcase */
.inventory-container { }


/* Skills Showcase */
.skills-container {
	display: flex;
	align-items: stretch;
	font-family: "arial";
	font-size: 10px;
}
.skill-pages {
	width: 300px;
	border: 1px solid #777;
	background-color: #100d09;
}
.skill-page {
	display: none;
	padding: 20px;
}
.skill-page.active {
	display: block;
}
.skill-sidebar {
	display: flex;
	flex-direction: column;
	width: 75px;
}
.skill-points {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5px;
	font-size: 12px;
	background-color: black;
	border-right: 1px solid #222;
	border-top: 1px solid #222;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.skill-points-group {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.skill-points-group:first-child {
	margin-bottom: 10px;
}
.skill-points-title {
	color: #d6ad7b;
	text-align: center;
}
.skill-points-number {
	font-size: 18px;
}
.skill-tabs {
	display: flex;
	flex: 3;
	flex-direction: column;
	font-size: 32px;
}
.skill-tab {
	transform: translateX(-1px);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 33%;
	background: #111;
	color: grey;
	cursor: pointer;
	border: 1px solid #333;
	border-left-color: #777;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;

}
.skill-tab:hover {
	color: white;
}
.skill-tab.active {
	background: #100d09;
	color: #d6ad7b;
	border-color: #777;
	border-left: none;
}

.skill-row {
	display: flex;
	justify-content: center;
	height: 90px;
}
.skill-col {
	width: 80px;
}

.skill-display {
	text-align: center;
}
.skill-display .visuals {
	position: relative;
	display: flex;
	justify-content: center;
}
.skill-display img {
	display: block;
	border: 1px dashed white;
	opacity: 0.5;
	margin: 0 auto;
}
.skill-display.active img {
	border: 1px solid white;
	opacity: 1;
	box-shadow: 0 0 10px white;
}
.skill-display .points {
	display: none;
	position: absolute;
	bottom: 1px;
	background-color: #000000d0;
	width: 48px;
	font-weight: bolder;
	font-size: 12px;
}
.skill-display.active .points {
	display: block;
}
.skill-display .label {
	margin-top: 5px;
	color: darkgrey;
}
.skill-display.active .label {
	color: white;
}


/* Hover Tooltip */
.tooltip-trigger {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}
.tooltip-panel { 
	position: absolute;
	display: none;
	z-index: 10;
	color: #fff;
	font-family: Montserrat;
	font-size: 13px;
	background: rgba(0,0,0,0.8);
	border: 1px solid rgba(150,150,150,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	cursor: auto;
    overflow-x: auto;
    overflow-y: auto;
}
.tooltip-panel.active {
	display: block;
}
.tooltip-panel.scroll {
	padding-right: 20px;
}
.tooltip-content {
	position: relative;
	padding: 10px;
	white-space: nowrap;
	text-align: center;
}
.tooltip-close-btn {
	position: absolute;
	top: 5px;
	left: 5px;
	visibility: hidden;
	opacity: 0.65;
	margin: 0px;
	padding: 0px;
	background-color: black;
	cursor: pointer;
}
.tooltip-close-btn.active {
	visibility: visible;
}
.tooltip-close-btn:hover {
	opacity: 1;
}


/* Character Gear Display */
.gear-layout { position: relative; width: 290px; height: 208px; background: url("../img/ui/gear_char_all.gif") no-repeat;}
.gear-layout .c2 { top: 3px; left: 116px; width: 56px; height: 56px; } /* head */
.gear-layout .c3 { top: 32px; left: 188px; width: 28px; height: 28px; } /* amulet */
.gear-layout .c4 { top: 76px; left: 116px; width: 56px; height: 87px; } /* body */
.gear-layout .c5 { top: 2px; left: 3px; width: 56px; height: 112px; } /* hand1 */
.gear-layout .c6 { top: 2px; left: 231px; width: 56px; height: 112px; } /* hand2 */
.gear-layout .c7 { top: 178px; left: 74px; width: 28px; height: 28px; } /* ring1 */
.gear-layout .c8 { top: 178px; left: 188px; width: 28px; height: 28px; } /* ring2 */
.gear-layout .c9 { top: 178px; left: 116px; width: 56px; height: 28px; } /* belt */
.gear-layout .c10 { top: 148px; left: 231px; width: 56px; height: 56px; } /* boots */
.gear-layout .c11 { top: 148px; left: 3px; width: 56px; height: 56px; } /* gloves */
.gear-layout .c12 { top: 2px; left: 3px; width: 56px; height: 112px; display: none; } /* hand3 */
.gear-layout .c13 { top: 2px; left: 231px; width: 56px; height: 112px; display: none; } /* hand4 */


/* Item Grid Display */
/* cell_size = 29, cell_pad = 0,  grid_size = 16 */
.grid-layout { width: 445px; color: #fff; }
.grid-layout.small { height: 302px; background: url("../img/ui/item_grid_small.gif") no-repeat; }
.grid-layout.large { height: 474px; background: url("../img/ui/item_grid_large.gif") no-repeat; }
.grid-layout-offset { position: relative; left: 6px; top: 6px; }
.grid-layout .c1 { left: 0px; } .grid-layout .r1 { top: 0px; }
.grid-layout .c2 { left: 29px; } .grid-layout .r2 { top: 29px; }
.grid-layout .c3 { left: 58px; } .grid-layout .r3 { top: 58px; }
.grid-layout .c4 { left: 87px; } .grid-layout .r4 { top: 87px; }
.grid-layout .c5 { left: 116px; } .grid-layout .r5 { top: 116px; }
.grid-layout .c6 { left: 145px; } .grid-layout .r6 { top: 145px; }
.grid-layout .c7 { left: 174px; } .grid-layout .r7 { top: 174px; }
.grid-layout .c8 { left: 203px; } .grid-layout .r8 { top: 203px; }
.grid-layout .c9 { left: 232px; } .grid-layout .r9 { top: 232px; }
.grid-layout .c10 { left: 261px; } .grid-layout .r10 { top: 261px; }
.grid-layout .c11 { left: 290px; } .grid-layout .r11 { top: 290px; }
.grid-layout .c12 { left: 319px; } .grid-layout .r12 { top: 319px; }
.grid-layout .c13 { left: 348px; } .grid-layout .r13 { top: 348px; }
.grid-layout .c14 { left: 377px; } .grid-layout .r14 { top: 377px; }
.grid-layout .c15 { left: 406px; } .grid-layout .r15 { top: 406px; }
.grid-layout .c16 { left: 435px; } .grid-layout .r16 { top: 435px; }

/*
Grid Positioning Generator (JS)

var results = [], cell_size = 48, cell_pad = 20, grid_size = 5;
for (var i=0; i<grid_size; i++) {
	var slotidx = i+1;
	var offset = i * cell_size + i * cell_pad;
	results.push(`.skills-container .c${slotidx} {left: ${offset}px; } .skills-container .r${slotidx} {top: ${offset}px; } `);
}
console.log(results.join("\n"));
*/

/* Text Color */
.color-white { color: white; }
.color-red { color: red; }
.color-grey { color: grey; }
.color-green { color: green; }
.color-blue { color: #6969ff; }
.color-gold { color: #c7b377; }
.color-dgrey { color: darkgrey; }
.color-tan { color: #aaa078; }
.color-orange { color: #faaa23; }
.color-yellow { color: yellow; }
.color-dgreen { color: #008000; }
.color-purple { color: #965afa; }