/*********/
/* TABLE */
/*********/

* 		{box-sizing:border-box; margin:0; padding:0; outline:none}
html	{font-size:11px}
body	{font-family:Verdana, Arial, sans-serif; background:white url("pic/fond-aidedd.jpg") repeat; overflow:hidden}

h1		{margin:5px 0 25px 0; font-size:24px}
p		{margin:10px 0; font-size:13px}
.colErr1 {display:inline-block; max-width:50%; padding:15px}
	.colErr1 a {color:#B80000; text-decoration:none; font-weight:bold}
	.colErr1 img {margin:10px auto; border:4px solid #AAA; border-radius:10px}
.colErr2 {display:inline-block; width:50%; padding:70px 0 0 50px; vertical-align:top}

div	 	{display:inline-block; vertical-align:top}
i 		{-webkit-user-select:none; user-select:none; cursor:pointer}
.header {background-color:black; color:white; width:100%; height:25px; padding:4px; font-size:11px; cursor:move}
.close	{float:right; cursor:pointer}
.content {width:100%; padding:4px}

#menuH {width:100%; height:50px; padding:3px 3px 0 3px; background-color:black; color:white; overflow:hidden}

	.iconMenu {width:7%; font-size:34px; color:white; text-align:center}
	#playersList {width:86%}
	.player img {float:left; width:44px; height:44px; border:3px #CCC solid; margin:0 3px 3px 0; cursor:pointer}
	.player h2 {font-size:12px; margin:0 0 4px 0; font-weight:bold}
	.player h3 {font-size:10px; margin:0 0 4px 0; font-weight:normal}
	.player img.online	{border-color:#B80000}

#tracker {position:absolute; top:55px; left:5px; width:400px; height:75vh; padding-bottom:20px; overflow:hidden; font-size:10px; background:white url("pic/fond-dmg.jpg") repeat; border:2px black solid; border-radius:8px; z-index:40}

	#tracker button		{margin:5px   0 5px 5px; width:50px; text-align:center; padding:6px 0; background-color:#B80000; color:white; border-style:none; border-radius:4px; font-size:13px; cursor:pointer}
	#choseToken button	{margin:5px 4px 5px 4px; width:68px; text-align:center; padding:6px 0; background-color:#B80000; color:white; border-style:none; border-radius:4px; font-size:13px; cursor:pointer}
	#choseToken button#tokenReset {width:35px}
	#choseToken button.biblio {background-color:white; color:#B80000}
	#forall {position:relative; top:3px; margin-right:10px}
	#round {width:38px; position:relative; top:2px; padding:3px; font-size:13px; text-align:center; font-family:Verdana, Arial, sans-serif; font-weight:bold}

	.pion, .pionLegende {width:100%; padding:3px 6px; border-bottom:1px #CCC solid}
	.pionLegende {font-weight:bold}
	.pion input {padding:2px; background-color:#eafaea; font-size:10px; text-align:center; border-style:none; font-family:Verdana, Arial, sans-serif}

	div[name='status']	{min-width:3%}
		.toplay {background-color:#d6f5d6}
	div[name='namePJ']	{width:28%; overflow-x:hidden}
	div[name='name']	{width:35%; overflow-x:hidden}
		input.alias		{width:82%; padding:2px; text-align:left}
		input.clean		{width:82%; padding:2px; text-align:left; background-color:#ccc}
			.ui-front{z-index:100}
			.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}
			.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:0}
			.ui-menu .ui-menu{position:absolute}
			.ui-menu .ui-menu-item{margin:0;cursor:pointer;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}
			.ui-menu .ui-menu-item-wrapper{position:relative;padding:1px 1em 1px .5em}
			.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}
			.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em;border:1px solid #DDD}
			.ui-state-active{border:1px solid #ccc;background:#ccc;font-weight:normal}
			.ui-helper-hidden-accessible {display:none}
		i.fa-user-edit	{margin-right:6px}
	div[name='CA'] 		{width:6%}
		input.CA {width:24px}
	div[name='init'] 	{width:15%}
		input.dex, input.init {width:24px}
	div[name='pv'] 		{width:21%; text-align:center}
		input.pv, input.pvmax {width:24px}
		.fa-minus-square, .fa-plus-square {font-size:13px}
		input.noedit {background-color:#d8d8d8}
	div[name='board'] 	{width:26%}
		div[name='board'] i {font-size:14px; margin-left:4px}
		.pending		{color:#B80000}
		.inactive		{color:#AAA}
		.fas.fa-male	{padding:0 4px}
	#listePNJ			{overflow-y:auto}	/* voir addPJ pour le height de listePNJ */

	#tracker i.fa-pause {cursor:default}
	#tracker button#showPCdata {margin-left:5px}
	#tracker button#sharePJ {margin-left:5px}
	#tracker button#sharePNJ {margin-left:118px}

.srd		{position:absolute; width:360px; background:white url("pic/fond-ph.jpg") repeat; padding:5px 5px 15px 5px; border:2px black solid; border-radius:8px; overflow-y:auto}
	#srdC		{top:85px;  left:355px; max-height:88%; z-index:50}
	#srdS		{top:115px; left:380px; max-height:84%; z-index:60}
	#srdC .nom, #srdS .nom {cursor:move}
	#srdC .fa-dice-six, #srdS img {cursor:pointer}

#choseToken {position:absolute; top:85px; left:335px; width:560px; background-color:white; border:2px black solid; border-radius:8px; z-index:65}
	#choseToken .content {padding:4px; max-height:600px; background:white url("pic/fond-aidedd.jpg") repeat; border-radius:8px; overflow-y:auto}
	#choseToken .content img {cursor:pointer; padding:1px}
	.sonAvatar {background-color:#B80000}

#choseCondit {position:absolute; top:240px; left:372px; width:220px; background-color:white; border:2px black solid; border-radius:8px; z-index:70}
	#choseCondit .content {padding:4px; background:white url("pic/fond-aidedd.jpg") repeat; border-radius:8px; overflow-y:auto}
	#choseCondit input {position:relative; top:2px; margin:2px 4px}

#image {position:absolute; top:10%; left:25%; overflow:hidden; width:310px; min-width:310px; max-width:90%; min-height:70px; max-height:90%; background-color:white; border:2px black solid; border-radius:8px; z-index:20}
		#image i {font-size:20px; position:relative; top:3px; color:#888}
		#url {width:66%; min-width:180px; height:26px; padding:3px; margin:3px; border:1px #CCC solid; border-radius:4px; font-size:11px}
	#image .content {text-align:center}
	#zoneImage {display:block}
	#zoneImage img {max-width:100%; max-height:100%}

#notes {position:absolute; top:35%; left:62%; width:310px; height:300px; min-width:200px; max-width:41%; min-height:200px; max-height:88%; background-color:white; border:2px black solid; border-radius:8px; z-index:30}
		#notes .fa-save {position:relative; left:30px; font-size:18px}
		.alerte {color:#B80000; animation:highlight 2s}
	#notes .content {font-size:14px; height:88%}
	#zoneNote {overflow-y:auto; resize:none; font-family:Verdana, Arial, sans-serif; font-size:12px; width:100%; height:100%; padding:4px; border-style:none}

	.ui-resizable {position:relative}
	.ui-resizable-handle {position:absolute;font-size:0.1px;z-index:99999; display:block}
	.ui-resizable-s {cursor:s-resize; height:7px; width:100%; bottom:-5px; left:0}
	.ui-resizable-e {cursor:e-resize; width:7px; right:-5px; top:0; height:100%}
	.ui-resizable-se {cursor:se-resize; width:14px; height:14px; right:-5px; bottom:-5px}

#menuV 	{position:absolute; top:113px; width:38px; text-align:center; background:white url("pic/fond-aidedd.jpg") repeat; border:1px #888 solid; border-style:solid solid solid none; z-index:10}
	#menuV i {margin:2px 2px 0 2px; padding:4px; font-size:20px}
	#menuV img {margin:3px 2px 0 2px; padding:1px; cursor:pointer}
	.sel {background-color:#B80000}

#imageBack {position:absolute; top:113px; left:37px; background-color:#eafaea; border:1px black solid; padding:4px; z-index:14}
	#urlBack {width:173px; padding:3px; font-size:11px}
	#imageBack i {font-size:20px; padding:8px 5px 4px 5px}
	#imageBack .fa-times {position:relative; top:3px; font-size:20px; padding:0 4px; color:#888}
#choseDecor {position:absolute; top:153px; left:37px; width:455px; background-color:#eafaea; border:1px black solid; padding:0px; z-index:17}
	#choseDecor img {cursor:pointer; padding:1px}
#choseMask {position:absolute; top:195px; left:37px; background-color:#eafaea; border:1px black solid; padding:4px; z-index:13}
	#choseMask img {padding:2px; cursor:pointer}
#palette {position:absolute; top:294px; left:37px; background-color:#eafaea; border:1px black solid; padding:4px; z-index:16}
	#palette i {font-size:20px}
	#palette img {cursor:pointer; padding:3px}
#textinput {position:absolute; top:50px; left:0px; z-index:18}
#textinput input {padding:4px; font-size:11px}

#battlemap {width:82%; height:100%; background-color:#F8F8F8; overflow:auto}

#map {background-repeat:no-repeat; background-position:50px 50px}

#slider {position:absolute; top:62px; right:20%; height:100px; z-index:12}
	.ui-slider .ui-slider-handle {position:absolute; width:16px; height:16px; -ms-touch-action:none; touch-action:none}
	.ui-slider-vertical {width:8px}
	.ui-slider-vertical .ui-slider-handle {margin-left:-5px; margin-bottom:-8px; border-radius:4px}
	.ui-widget-content {border:1px solid #CCC;	background:#EEE; border-radius:4px}
	.ui-state-default {border:1px solid #CCC; background:#E8E8E8}

#chat {width:18%}

	.col30 {width:100%}
		.col30 i {padding:4px 2px; font-size:21px; width:16.6%; text-align:center}

	.col311 {width:62%; text-align:center}
		.col311 i {padding:4px 2px; font-size:18px}
		.col311 i.fa-minus-square, .col311 i.fa-plus-square {position:relative; top:1px; padding:0px; font-size:15px}
		input.mypv {width:28px; padding:2px 2px; background-color:#eafaea; font-size:11px; text-align:center; border-style:none; font-family:Verdana, Arial, sans-serif}
	.col312 {width:38%; text-align:center}
		.col312 i {padding:4px 2px; font-size:18px}
		input.myinit {width:21px; padding:2px 2px; background-color:#eafaea; font-size:11px; text-align:center; border-style:none; font-family:Verdana, Arial, sans-serif}

	.col32 {width:100%}
		#rollSecret {position:relative; top:2px; margin:4px 4px 8px 10px}

	.col33 {width:100%}
		button.texte 	{margin:5px 1% 0 0; width:19%; text-align:center; padding:6px 0; background-color:#B80000; border-style:none; color:white; border-radius:4px; font-size:10px; cursor:pointer}
		button.dice 	{margin:5px 1% 0 0; width:19%; text-align:center; padding:6px 0; background-color:black;   border-style:none; color:white; border-radius:4px; font-size:12px; cursor:pointer}
		input#custom1, input#custom2, input#custom3, input#custom4, input#custom5 {margin:5px 1% 0 0; width:19%; height:25px; padding:2px; font-size:11px; text-align:center}
		input#message {width:88%; height:26px; padding:3px; margin:5px 0 5px 5px; border:1px #CCC solid; border-radius:4px; font-size:11px}
		#chat i.fa-times {font-size:20px; position:relative; top:3px; color:#888}

	.col34 {width:100%; overflow-y:auto}
		ul			{margin:2px 4px 2px 4px; list-style:none}
		li			{padding:4px; margin-top:2px; border-radius:4px}
		li.sender	{font-size:10px}
		li.message	{background-color:#eafaea; font-size:12px}
		li.my		{text-align:right}
		li.message.my 		{background-color:#FFF}
		li.message.secret 	{background-color:#d6f5d6}
		li.message.nosecret	{background-color:#d6f5d6}
		li.message.my.nosecret	{background-color:#f0f0f0}
		li.alert	{color:#B80000}
		li.update	{color:#9900ff}

/***********/
/* MONSTRE */
/***********/

.srd div 			{display:block}
.srd .bloc			{font-size:0.9rem; font-family:verdana, arial, sans-serif}
.srd .bloc p		{font-size:0.9rem; padding:0; margin:5px 0 5px 0}
.srd .nom			{padding:0; text-transform:uppercase; letter-spacing:1px; color:#802040; font-size:1.4rem; font-weight:bold; font-family:Georgia, "Times New Roman", serif}
.srd .nom:first-letter {font-size:1.8rem}
.srd .niveau		{padding:2px 0 8px 0}
.srd .type			{padding:2px 0 2px 0}
.srd .red			{color:#802040}
.srd .carac			{float:left; margin:0 7px 0 7px; text-align:center}
.srd .description	{padding:8px 0 0 0; text-align:justify}
.srd div svg		{width:100%; height:5px; margin-top:3px}
.srd .rub			{color:#802040; margin:10px 0 5px 0; border-bottom:1px solid #802040; font-size:1.2rem; text-transform:uppercase; font-weight:bold}
.srd .rub:first-letter{font-size:1.6rem}
.srd div img.sep-monster {margin:3px 0 3px 0}
.srd div .variant	{background-color:#DBE2C2; border-top:4px solid #404040; border-bottom:4px solid #404040; padding:10px; margin:10px 0 0 0}
.srd i				{font-size:1.0rem; color:#802040}

.srd #sort a		{color:black}
.srd .sort 			{color:#B80000}
.srd .sort:hover	{cursor:pointer}

.srd .source		{font-size:0.9rem; font-family:verdana, arial, sans-serif; padding-top:10px; text-align:right}

@media only screen and (max-width:999px) {
	.iconMenu	{display:none}
	#playersList{width:100%}
	.player h2, .player h3 {display:none}
	#battlemap	{width:100%; display:none}
	#chat		{width:100%}
}