/* CSS Document */
html {
	height:100%;	
}
body {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size:12px;
	background-color:#111;
	color:white;
	text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
	padding:0;
	margin:0;
	height:100%;
	
}
h1 {
    margin-top:2px;
    font-size:16px;
}
#left {
	margin-right:250px;
	background-color:#999;
	height:100%;
}

#right {
	width:245px;
	float:right;
	height:100%;
	box-shadow: 0 0 5rem rgba(0, 0, 0, 0.5) inset;
	overflow-y: scroll;
	overflow-x: hidden; 
}

#player1 {
	background-color:#333;
}
#player2 {
	background-color:#333;
}
#player3 {
	background-color:#333;
}
#player4 {
	background-color:#333;
}

.player {
	width:50%;
	height:50%;	
	box-shadow: 0 0 5rem rgba(0, 0, 0, 0.5) inset;
	display:inline-block;
	position:relative;
}

.player .input {
	position:absolute;
	top:0;
	right:0;
	width:100px;
	background-color:black;
	padding:3px;
	z-index:3;
}

.player .input input {
	background-color:#303;
	color:#66F;
	width:98px;
	border:1px solid #CCC;
}



.player .input input[type='button'] {
	background-color:#666;
	color:#000;
	margin:0 auto;
	margin-top:3px;	
	margin-bottom:6px;	
	border-radius:4px;
}

.player .twitch_screen {
	/*margin-right:100px;*/
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	
}

.player3_screen {
    top:-1px;
}

.player .inventory {
	position:absolute;
	top:114px;
	right:0;
	width:100px;
	background-color:rgba(0, 0, 0, 0.8);
	padding:3px;
	z-index:3;
}

.player .inventory input {
	background-color:#303;
	color:#66F;
	width:98px;
	border:1px solid #CCC;
}

.player .inventory .itemcon {
    background-color:black;
    border:1px solid #333;
    box-shadow: 0 0 5rem rgba(51, 51, 51, 0.5) inset;
    display:inline-block;
    text-align:center;
}

.item {
    margin:0 auto;
}

.player .inventory .bigger-item {
    width:30px;
    height:40px;
}

.player .inventory .big-item {
    width:30px;
    height:30px;
}

.player .inventory .small-item {
    width:20px;
    height:20px;
}

.player .inventory .hhalf-item {
    width:30px;
    height:20px;
    
}

.player .inventory .vhalf-item {
    width:15px;
    height:30px;
}

.player .inventory .Helm {
    margin-left:34px;
}

.player .inventory .Amulet {
    margin-left:2px;
}

.player .inventory .Weapon {
    margin-left:0px;
}

.player .inventory .BodyArmour {
    margin-left:2px;
}

.player .inventory .Offhand {
    margin-left:2px;
}

.player .inventory .Ring {
    margin-left:10px;
}

.player .inventory .Belt {
    margin-left:2px;
}

.player .inventory .Ring2 {
    margin-left:2px;
}

.player .inventory .Gloves {
    margin-left:0px;
}

.player .inventory .Boots {
    margin-left:36px;
}

.player .inventory .Flask0 {
    margin-left:4px;
}

.player .inventory .Flask1 {
    margin-left:2px;
}

.player .inventory .Flask2 {
    margin-left:2px;
}

.player .inventory .Flask3 {
    margin-left:2px;
}

.player .inventory .Flask4 {
    margin-left:2px;
}

.item-container {
	border:1px solid #111;
	background-color:black;
	display:none;
	position:absolute;
	z-index:1000;
	top:20px;
	left:-250px;
	width:240px;
	font-size:12px;
	padding:5px;
}

.frameType0 {
    border:1px solid white;
}

.frameType1 {
    border:1px solid blue;
}

.frameType2 {
    border:1px solid yellow;
}

.frameType3 {
    border:1px solid brown;
}

.item-slots {
	border:1px solid transparent;
	width:100%;
}

.linked-slots {
    text-align:left;
}

.linker {
    margin-top:-3px;
    margin-bottom:0;
    height:5px;
    margin-left:8px;
    border-left:4px solid white;
}

.linker:last-child {
    display:none;
}

.gem {
    color:white;
    background-color:#333;
    position:relative;
    top:-4px;
    margin-left:4px;
}

.item-mods .typeLine {
    font-weight:bold;
    font-size:110%;
}

.item-mods .name {
    font-weight:bold;
    font-size:110%;
}

.item-mods .implicitMods {
    font-weight:bold;
    color:#888;
}

.slots {
    display:inline-block;
    min-width:20px;
    min-height:20px;
    border-radius:10px;
}

.slots.colorS {
    background-color:red;
}
.slots.colorD {
    background-color:green;
}
.slots.colorI {
    background-color:blue;
}
.slots.colorG {
    background-color:white;
}

a:link, a:visited {
    color:#b77bf7;   
}
a:hover, a:active {
    color:#f7c57b;   
}

.player .inventory .level {
    font-size:24px;
    font-weight:bold;
    text-align:center;
	border:1px solid #666;
}

.player .inventory .level small {
    font-size:10px;
    font-weight:bold;
    display:block;
}

strong.winners {
    color:#ffc249;   
}

.player .option_toggle {
    position:absolute;
    display:inline-block;
	top:50px;
	right:105px;
	width:35px;
	background-color:black;
	padding:3px;
	z-index:3;
	border-radius:4px;
}

.player .option_toggle.hidden {
    right:3px;
}

.player .stats {
    position:absolute;
    display:inline-block;
	top:100px;
	right:107px;
	width:24px;
	font-size:18px;
	font-weight:bold;
	background-color:#303;
	padding:3px;
	z-index:3;
	border-radius:14px;
	text-align:center;
}

.player .stats.hidden {
    right:3px;
}

.stat-values {
	border:1px solid transparent;
	background-color:#303;
	position:absolute;
	z-index:1000;
	min-width:400px;
    right:30px;
    top:-80px;
	font-size:12px;
	padding:5px;
	display:none;
	text-align:left;
	
}
.tomaximumLife {
    color:red;
}
.tomaximumEnergyShield {
    color:teal;
}
.toFireResistance, .AddstoFireDamage, .AddstoFireDamagetoAttacks, .AddstoFireDamagetoSpells {
    color:orange;
}
.toColdResistance, .AddstoColdDamage, .AddstoColdDamagetoAttacks, .AddstoColdDamagetoSpells {
    color:#76a9fc;
}
.toLightningResistance, .AddstoLightningDamage, .AddstoLightningDamagetoAttacks, .AddstoLightningDamagetoSpells {
    color:yellow;
}
.toChaosResistance, .AddstoChaosDamage, .AddstoChaosDamagetoAttacks, .AddstoChaosDamagetoSpells {
    color:green;
}