/* TABS SECTION */
/*! jQuery UI - v1.12.1 - 2017-06-29
* http://jqueryui.com
* Includes: core.css, tabs.css, theme.css
* To view and modify this theme, visit 
* http://jqueryui.com/themeroller/?scope=%23tabs&folderName=tabs&cornerRadiusShadow=8px&offsetLeftShadow=-7px&offsetTopShadow=-7px&thicknessShadow=7px&opacityShadow=60&bgImgOpacityShadow=30&bgTextureShadow=flat&bgColorShadow=cccccc&opacityOverlay=80&bgImgOpacityOverlay=50&bgTextureOverlay=flat&bgColorOverlay=5c5c5c&iconColorError=ffe180&fcError=ffffff&borderColorError=ffb73d&bgImgOpacityError=20&bgTextureError=diagonals_medium&bgColorError=d34d17&iconColorHighlight=ed9f26&fcHighlight=1f1f1f&borderColorHighlight=eeb420&bgImgOpacityHighlight=90&bgTextureHighlight=gloss_wave&bgColorHighlight=fff9e5&iconColorActive=eb990f&fcActive=0074c7&borderColorActive=655e4e&bgImgOpacityActive=30&bgTextureActive=inset_soft&bgColorActive=ffffff&iconColorHover=bd7b00&fcHover=381f00&borderColorHover=a45b13&bgImgOpacityHover=70&bgTextureHover=gloss_wave&bgColorHover=ffdd57&iconColorDefault=3d3d3d&fcDefault=4c3000&borderColorDefault=d19405&bgImgOpacityDefault=60&bgTextureDefault=gloss_wave&bgColorDefault=fece2f&iconColorContent=d19405&fcContent=383838&borderColorContent=8e846b&bgImgOpacityContent=100&bgTextureContent=highlight_soft&bgColorContent=feeebd&iconColorHeader=fadc7a&fcHeader=ffffff&borderColorHeader=494437&bgImgOpacityHeader=45&bgTextureHeader=gloss_wave&bgColorHeader=817865&cornerRadius=8px&fsDefault=1.1em&fwDefault=bold&ffDefault=Segoe%20UI%2CArial%2Csans-serif
* Copyright jQuery Foundation and other contributors; Licensed MIT */


:root {
	--Black: #333333;
	--LtBlue: #2B6CB0;
	--DkBlue: #6A7D8E;
	--Tan: #C6C696;
	--Yellow: #feeebd;
	--Gray: #e4e4e4;
	--Green: #c1cc89;
	--panelLayout: 50px 50px repeat(8, 100px) 50px 50px;
}

abbr {
	transition-delay: 0s !important;
}

div#CharSheetContainer {
	overflow: clip;
	text-indent: 0px;
	display: grid;
	grid-row-gap: 30px;
	grid-template-rows: 80px 90px 100px auto;
	grid-template-columns: 50px repeat(10, 100px) 50px;
	grid-template-areas: 
		". name name name name name name name . picBox picBox ."
		". . . pointsLeft pointsLeft pointsLeft . . . . . ."
		". hp hp hp . mf mf mf  . luck luck ."
		". tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs .";
}

/* Grid Areas */
.Name {
	grid-area: name;
	text-align: center;
	font-weight: bolder;
	padding-top: 3em;
}

div#tabs {	grid-area: tabs; margin-bottom: 15px;}


#picBox { grid-area: picBox; }

.hp { 
	grid-area: hp; 
	border: 0.5px solid var(--DkBlue);
	font-size: 12pt !important;
	background-color: var(--Yellow);
	border-radius: 8px;
}

.mf { 
	grid-area: mf; 
	border: 0.5px solid var(--DkBlue);
	font-size: 12pt;
	background-color: var(--Yellow);
	border-radius: 8px;
}

.luckRect {
	grid-area: luck;
	border: 0.5px solid var(--DkBlue);
	font-size: 12pt;
	background-color: var(--Yellow);
	border-radius: 8px;
	padding: 15px 30px 15px 30px;
}

div#CharSheetContainer img {
	border: 0px solid transparent;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}


div#CharSheetContainer table {
	padding: 2px;
}

.PointsLeft {
	grid-area: pointsLeft;
	display: grid;
	grid-template-columns: repeat(9, 30px);
	grid-template-rows: 25px 25px 25px;
	grid-template-areas:
		"hdr hdr hdr hdr hdr hdr hdr hdr cal"
		". . . . pointsDisplay . . . ."
		". ftr ftr ftr ftr ftr ftr ftr .";
	padding: 5px;
	text-align: center;
    border-radius: 3px;
	border: 1px solid var(--Green);
	background: -moz-linear-gradient(-45deg,  #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#updatePoints {	
	grid-area: ftr; 
	width: 200px !important; 
	font-size: 12pt  !important;
	height: 35px !important;
	border: 1px solid var(--Black);
	display: none;
	padding: 5px; 
	position:relative;  
	background-color: rgb(255, 255, 153); 
	z-index: 500;
	border-radius: 10px;
	margin-top: -50px;
}
.updatedWhen { grid-area: cal; }

.PointsLeft p {
	grid-area: hdr;
	font-size: 12pt;
	font-weight: bold;
	margin: 0px !important;
}

#pointsDisplay {
	grid-area: pointsDisplay;
	font-size: 24pt;
	font-weight: bold;
}


.trackerTitle {
	text-align: center;
	padding-top: 20px;
}

.hpbars, .mfbars {
	margin-left: 24px;
}

.trackerSubtitle {
	text-align: center;
	font-size: 16pt;
	font-weight: bold;
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}

div.tracker { 
	width:30px; 
	height: 15px; 
	float:left; 
	line-height: 1; 
	text-align: right; 
	padding-right: 3px;
	vertical-align: top;
}

div.trackerBar {
	float:left; 
	height: 15px; 
	line-height: 1;
	vertical-align: top;
}

div.undamaged {
	float:left; 
	width: 20px;
	line-height: 1;
	text-align: right;
}

div.addDamage { text-align: center; }













div#CharSheetContainer table td:first-child,
div#CharSheetContainer table th:first-child {
	padding-left: 10px;
}
div#CharSheetContainer table td:last-child,
div#CharSheetContainer table th:last-child {
	padding-right: 10px;
}

/*
.ui-tabs.ui-corner-all.ui-widget.ui-widget-content {
*/
#NewSkillForm,
#updateInv,
.ui-tabs-panel,
.hp, .mf, .luckRect,
.trackerTable,
.PointsLeft,
#specWidget,
div[class^="maTable"],
#popup {
	-webkit-box-shadow: 10px 10px 5px 0px rgba(2,61,26,1);
	-moz-box-shadow: 10px 10px 5px 0px rgba(2,61,26,1);
	box-shadow: 10px 10px 5px 0px rgba(2,61,26,1);
	-webkit-border-radius: 15px; 
	-moz-border-radius: 15px; 
	border-radius: 15px;
}

div.derivedStat {
	width: 100px;
	line-height: 1.3;
	float:left;
}

div.thirdSkillRow:hover,
div.otherSkillRow:hover {
	background-color: var(--Tan);
}

.thirdSkillRow {
	border-bottom: 2px solid var(--DkBlue); 
	font-size: 12pt; 
	margin-top: 5px; 
	margin-bottom: 15px;
}

.otherSkillRow {
	font-size: 12pt;
	margin-top: 5px; 

}

#NewSkillForm {
	border: 1pt solid --var(DkBlue);
	background-color: var(--Tan);
	margin: 20px; 
	padding: 5px; 
	display: inline-block;
}


.switch-field {
/*
    display: inline-block;
    overflow: hidden;
    height: 50px;
    */
}

.switch-field input {
    position: absolute !important;
    height: 0px;
    width: 0px;
    border: 0px;
    overflow: hidden;
    appearance: none;
}

.switch-field label {
    display: inline-block;
    background-color: var(--Gray);
    font-size: 14px;
    font-weight: bold;
    height: 30px;
    width: 106px;
    text-align: center;
    margin: 2px 16px;
    padding: 5px 0px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.switch-field label:hover {  cursor: pointer; }

.switch-field input:checked + label {
    /* background-color: #a5dc86; */
    background-color: var(--Green);
    box-shadow: none;
}

.switch-field label:first-of-type { border-radius: 4px 0 0 4px; }
.switch-field label:last-of-type { 	border-radius: 0 4px 4px 0; }


.trackerTable { 
	background-color: var(--Yellow); 
	width: 820px; 
	margin-left: 68px; 
	margin-bottom: 35px;
}

.trackerTable tr,
.trackerTable th,
.trackerTable td,
.trackerTable tr:nth-child(2) { 
	border-top: 1px solid var(--DkBlue);
	background-color: var(--Yellow); 
}

.choiceRect {
	border: 0.5px solid var(--DkBlue);
	font-size: 12pt;
	background-color: var(--Tan);
	border-radius: 8px;
	padding: 15px;
	vertical-align: top;
	z-index: 900;
	display: grid;
	grid-template-columns: repeat(7, 35px);
}

.choice {
	border-radius: 5px;
	border: 1px dashed var(--DkBlue);	
}


/* Layout helpers
----------------------------------*/

#tabs .ui-helper-reset {
	margin: 0;
	padding: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
#tabs .ui-helper-clearfix:before,
#tabs .ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
#tabs .ui-helper-clearfix:after {
	clear: both;
}


.ui-tabs-panel {
	min-height: 350px;
}

#tabs .ui-widget-content {
	background: var(--Yellow) 50% top repeat-x;
	color: var(--DkBlue);
}
#tabs .ui-widget-header {
	color: var(--DkBlue);
	font-weight: bold;
}



#tabs a:hover {
	color: --var(DkBlue) !important;
}

#tabs .ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

#tabs .ui-state-active,
#tabs .ui-widget-content .ui-state-active,
#tabs .ui-widget-header .ui-state-active,
a#tabs .ui-button:active,
#tabs .ui-button:active,
#tabs .ui-button.ui-state-active:hover {
	/* border: 1px solid var(--DkBlue); */
	/* background: #ffffff url("images/ui-bg_inset-soft_30_ffffff_1x100.png") 50% 50% repeat-x; */
	font-weight: bold;
	background-color: var(--Yellow);
}


#tabs .ui-helper-reset {
	margin: 0;
	padding: 0;
	outline: 0;
	line-height: 1.5;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
#tabs .ui-helper-clearfix:before,
#tabs .ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
#tabs .ui-helper-clearfix:after {
	clear: both;
}

/* Component containers
----------------------------------*/
#tabs .ui-widget-content { color: var(--Black); }

#tabs .ui-widget-header {
	color: var(--Black);
	font-weight: bold;
	/* background-color: var(--LtBlue); */
	border-radius: 0px !important;
}

/* Interaction states
----------------------------------*/
#tabs .ui-state-default,
#tabs .ui-widget-content .ui-state-default,
#tabs .ui-widget-header .ui-state-default,
#tabs .ui-button,
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html #tabs .ui-button.ui-state-disabled:hover,
html #tabs .ui-button.ui-state-disabled:active {
	border-top: 1px solid var(--LtBlue);
	border-right: 1px solid var(--LtBlue);
	border-left: 1px solid var(--LtBlue);
	background-color: var(--Tan);
	color: var(--DkBlue);
	width: 167px;
	text-align: center;
	margin:7px 0px -1px 0px;
	float: left;
}

#tabs ul.topTabs.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header {
	margin-left: 30px;
	border: 0px  !important;
	border-radius: 0px  !important;
/*	background-color: var(--LtBlue); */
	-webkit-box-shadow: none  !important;
	-moz-box-shadow: none  !important;
	box-shadow: none  !important;	
}

#tabs .ui-state-default a,
#tabs .ui-state-default a:link,
#tabs .ui-state-default a:visited,
a#tabs .ui-button,
a:link#tabs .ui-button,
a:visited#tabs .ui-button,
#tabs .ui-widget-header a,
#tabs .ui-button {
	color: var(--DkBlue);
	text-decoration: none;
}

#tabs .ui-state-active,
#tabs .ui-state-active a,
#tabs .ui-state-active a:visited,
#tabs .ui-widget-content .ui-state-active,
#tabs .ui-widget-header .ui-state-active,
a#tabs .ui-button:active,
#tabs .ui-button:active,
#tabs .ui-button.ui-state-active:hover {
	font-weight: bolder;
	height: 28px;
	background: var(--Yellow) 50% top repeat-x;
	color: var(--Black) !important;
	margin:1px 0px -1px 0px;
}



/* Misc visuals
----------------------------------*/

/* Corner radius */
#tabs .ui-corner-all,
#tabs .ui-corner-top,
#tabs .ui-corner-left,
#tabs .ui-corner-tl {
	border-top-left-radius: 8px;
}
#tabs .ui-corner-all,
#tabs .ui-corner-top,
#tabs .ui-corner-right,
#tabs .ui-corner-tr {
	border-top-right-radius: 8px;
}
#tabs .ui-corner-all,
#tabs .ui-corner-bottom,
#tabs .ui-corner-left,
#tabs .ui-corner-bl {
	border-bottom-left-radius: 8px;
}
#tabs .ui-corner-all,
#tabs .ui-corner-bottom,
#tabs .ui-corner-right,
#tabs .ui-corner-br {
	border-bottom-right-radius: 8px;
}
/* END TABS Section */
.atttributesRow {
	width: 105px;
}

.progress-bar {
    background-color: #d7d7d7;
    height: 18px;
    width: 100px;
    box-shadow: 0 1px 5px #81AD91 inset, 0 1px 0 #444;           
}

.progress-bar span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;    
}

.green span, .colored span {
      background-color: #a5df41;
      background: linear-gradient(top, #a5df41, #4ca916);  
}   

.red span {
      color: #F1FF1B; 
      background-color:	#852E32; 
}

.hp.left  { width: 40px; 	text-align: right; 	border-radius: 5px 0px 0px 5px; }
.hp.right { width: 160px;  	text-align: left;	border-radius: 0px 5px 5px 0px; }
.mf.left  { width: 100px; 	text-align: right; 	border-radius: 5px 0px 0px 5px; }
.mf.right { width: 100px; 	text-align: left; 	border-radius: 0px 5px 5px 0px; }

#changePic {
	position: relative;
	top: 180px;
	height: 27px;
}

#changePic:hover {
	background-image: url('/WebChar/edit.png');
	background-repeat: no-repeat;
	background-position: 100px 0;
}

th.statHeader {
	font-size: 12pt;
	font-weight: bolder;
	background-color: transparent;
	color: var(--Black);
}

div.statHeader {
	font-size: 12pt;
	font-weight: bolder;
	background-color: transparent;
	color: var(--Black);
	width: 45px;
	float: left;
	margin-left: 35px;
}

div.statValue {
	font-size: 12pt;
	font-weight: normal;
	background-color: transparent;
	color: var(--Black);
	width: 45px;
	float: left;
}

div.statData {
	font-size: 12pt;
	font-weight: normal;
	background-color: transparent;
	color: var(--Black);
	width: 95px;
	float: left;
}


div#fightStatTable table{
	width: 253px;
	font-size: 12pt;
}


.wpnMsg { border: 1px solid var(--Black); padding: 5px; display: none; float: left; 
		background-color: rgb(255, 255, 153); }
.hidable { display: block; }

.CSwidth {
	width: 900px; 
	overflow: hidden; 
	border: 0px solid var(--Black) !important;
	margin-top: 0px !important;
}




th {
	text-align: left;
}

select {width: 55px; line-height: 1.0;}

.clickable {
	cursor:pointer; 
	color: #CC6600;
}


#popupContent {
	margin: 8px;
	width: 530px;  
}

#d_clip_button {
	text-align:center; 
	border:1px solid var(--Black); 
	-moz-border-radius:9px;
	border-radius: 9px;
	background-color: #ccc; 
	margin:10px;
	padding:2px;
	width: 125px;
}
#d_clip_button.zeroclipboard-is-hover { background-color:#eee; }
#d_clip_button.zeroclipboard-is-active  { background-color:#aaa; }



#popup {
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -100px;	
	width: 550px;
	height: auto;
	border: 1px solid var(--Black);    
	border-radius: 5px;
	font-size: 10px;
	font-family: Arial;
	display: none;
	position: fixed;
	z-index: 50;
	background-color:#FFFF99;
}

.rolling { background: url('dice/dice.gif') no-repeat fixed 10px 10px;}

img.pic {
	height: 100px;
	border: 2px solid #FFFBD1;
}


img.close {
	background-color: transparent;
	border: 0px solid var(--Black);
	padding: 5px;
}

div.locked {
	background: url(/WebChar/lock.gif) 
	no-repeat center center;
	height: 32px; width:32px;
	cursor: pointer;
	margin-right: 1px;
	z-index: 200;
}


div.unlocked {
	background: url(/WebChar/unlock.gif) 
	no-repeat center center;
	height: 32px; width:32px;
	cursor: pointer;
	margin-right: 1px;
	z-index: 200;
}



div.btn-small {
	height: 20px;  
	font-family: Arial; 
	background-color: #A8937B; 
	text-align: center; 
	vertical-align: middle; 
	float: left; 
	cursor: pointer; 
	font-weight: bold;
	border-color: #C6B096 #574D41 #574D41 #C6B096; 
	border-style:solid; 
	border-width:2px;
	width: 20px;
}
div.loading {
	background: url(/WebChar/ajax-loader.gif) 
	no-repeat center center;
	height: 32px;
	width: 32px;
}
div.done {
	height: 1px;
	width: 1px;
}
tr.alt td { border-bottom: 2px solid hsla(56, 66%, 76%, .3); }

div.saveBtn {
	height: 20px;
	font-family: Arial; 
	background-color: #A8937B; 
	text-align: center; 
	vertical-align: middle; 
	float: left; 
	cursor: pointer; 
	font-weight: bold;
	border-color: #C6B096 #574D41 #574D41 #C6B096; 
	border-style:solid; 
	border-width:2px;
	width: 44px;
}


#backgroundPopup{  
	display:none;  
	position:fixed;  
	_position:absolute; /* hack for internet explorer 6*/  
	height:100%;  
	width:100%;  
	top:0;  
	left:0;  
	background:#000000;  
	border:1px solid #cecece;  
	z-index:100;  
}

div.formPopup {
	border: 1px solid var(--Black);
	display: none;
	padding: 5px; 
	position:relative;  
	background-color: rgb(255, 255, 153); 
	width: 667px;
	z-index: 500;
}

td, th, th.noborder {border:0px solid transparent;}
img.pic {height: 170px; }

.attPanelDetail {
	display: grid;
	grid-template-columns: var(--panelLayout);
	grid-template-rows: 20px 40px 90px auto;
	grid-template-areas: 
		". . . . .      . . . . .    . ."
		". attLock leftStat leftStat leftStat . . . rightStat rightStat rightStat ."
		". statForm statForm statForm statForm statForm . . skillRect skillRect skillRect ."
		". costDetail costDetail costDetail costDetail . . . . . . . "
		". attSavemsg attSavemsg attSavemsg attSavemsg attSavemsg attSavemsg attSavemsg attSavemsg attSavemsg attSavemsg ."
}

.leftStat 	{ grid-area: leftStat;  }
.rightStat 	{ grid-area: rightStat; }
#attsLock 	{ grid-area: attLock; }
.attTable	{ grid-area: attTable;  }
.statForm 	{ grid-area: statForm;  }
#AttSaveMsg { grid-area: attSavemsg;  }
.skillRect {
	grid-area: skillRect;
	border: 0.5px solid var(--DkBlue);
	font-size: 12pt;
	background-color: var(--Tan);
	border-radius: 8px;
	padding: 15px;
	vertical-align: top;
	box-shadow: inset 3px 3px 8px #000;
}
#costDetail { grid-area: costDetail;  }

h3.maHdr,
h4.maSubhdr,
.magicBonus h3,
.maTitle h3,
.invTitle h3,
.Spec-s-1 h4,
.Spec-b-1 h4,
.Spec-p-1 h4,
.Spec-s-2 h4,
.Spec-b-2 h4,
.Spec-p-2 h4,
.newSpecPanel h4,
.leftStat h2,
.rightStat h2,
.abName h2,
.skillName h2 {
	margin: 0px;
}
#statTable {width: 804px; }
#statTable th,
#statTable td {border:0px;}

.abPanelDetail {
	display: grid;
	grid-template-columns:  var(--panelLayout);
	grid-template-rows: 40px auto;
	grid-template-areas: 
		". abLock abName . . . . . . . . ."
		". abilityList abilityList abilityList abilityList abilityList abilityList updateAds updateAds updateAds updateAds ."
		". . . . . . . . . . . .";
}

.abName 		{ grid-area: abName;  }
#abLock 		{ grid-area: abLock; }
#abilityList 	{ grid-area: abilityList; }
#abTable 		{ width: unset; }
#updateAds		{ grid-area: updateAds; width: unset; height: 120px;}
#abilityName	{
	border: 1px solid var(--DkBlue);
	background: transparent;
	text-align: center;
	font-weight: bolder;
	padding-bottom: 12pt;
	font-size: 16pt;
	width: 320px
}

.skillPanel {
	display: grid;
	grid-template-columns:  var(--panelLayout);
	grid-template-rows: 40px 40px auto;
	grid-row-gap: 5px;
	grid-template-areas: 
		". . . . . . . . . . . ."
		". skillLock skillName . . . . . . . . ."
		". . specWidget specWidget specWidget specWidget specWidget specWidget . . . ."
		". skillSet skillSet skillSet skillSet skillSet skillSet skillSet skillSet skillSet skillSet .";
}

.skillName 		{ grid-area: skillName;  }
#skillLock 		{ grid-area: skillLock;  }
#specWidget		{ 
	grid-area: specWidget;
	border: 1px solid var(--Black); 
	padding: 5px; 
	display: none;
	background-color: var(--Tan); 
}
#SkillSet		{ grid-area: skillSet; line-height: 1.1; }

/*#skillSet {
	padding-left:30px;
	padding-right:30px;
}
*/

#NewSkillForm div.saveBtn { float: right;}

#specForm {
	display: grid;
	grid-template-columns:  50px 120px 60px 60px 10px 120px 60px 60px;	
	grid-template-areas: 
		".      s1           b1            p1           .           s2 			 b2           p2"
		". newSpecPanel newSpecPanel newSpecPanel newSpecPanel newSpecPanel  newSpecPanel newSpecPanel"
		". . . . . .   specSave   specClose";
}

.Spec-s-1 { grid-area: s1; }
.Spec-b-1 { grid-area: b1; }
.Spec-p-1 { grid-area: p1; }
.Spec-s-2 { grid-area: s2; }
.Spec-b-2 { grid-area: b2; }
.Spec-p-2 { grid-area: p2; }
#spec-savebtn 	{ grid-area: specSave;  }
#spec-closebtn 	{ grid-area: specClose; }

.newSpecPanel {
	grid-area: newSpecPanel;
	display: grid;
	grid-template-columns:  120px 60px 60px 10px 120px 60px 60px 10px;
}

.specRecord {
	color: var(--Tan);
	overflow: hidden;
}

input[id^="spec-"] {
	padding-left: 10px;
	height: 20px;
	padding: 0px !important;
    border-radius: 15px;
}

.maPanel {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: 290px 290px 290px;
	align-items: start;
	grid-template-rows: repeat(12, 25px);
	grid-template-areas: 
		"maTitle	init	  .  "
		"punch	 	kick	grapple"
		"punch	 	kick	grapple"
		"punch	 	kick	."
		"punch 		kick	special"
		"punch 		kick	special"
		"punch 		kick	special"
		".			kick	special"
		"throw	 	.		special"
		"throw	 	lock	special"
		".		 	lock	special";
}

div[class^="maTable"] {
	display: grid;
	grid-template-columns: 170px 50px 32px;
	border: 1px solid var(--DkBlue);
	background-color: var(--Tan);
	padding: 10px;
}

.maTitle			{ grid-area: maTitle; }
.init 	  			{ grid-area: init;    }
.maHdr 	  			{ grid-column: 1/4;   }
.maTable-Grapple	{ grid-area: grapple; }
.maTable-Kick		{ grid-area: kick;    }
.maTable-Lock		{ grid-area: lock; 	  }
.maTable-Punch		{ grid-area: punch;   }
.maTable-Special	{ grid-area: special; }
.maTable-Throw		{ grid-area: throw;   }
#martialarts 		{ padding: 15px;	  }


/* 	--panelLayout: 50px 50px repeat(8, 100px) 50px 50px; */
#inventoryPanel {
	/*padding: 15px; */
	grid-row-gap: 25px;
	display: grid;
	grid-template-columns:  var(--panelLayout);
	grid-template-areas: 
		". invLock invTitle invTitle . . . . . . . ."
		". updateInv updateInv updateInv updateInv updateInv updateInv updateInv updateInv updateInv . ."
		". invTable invTable invTable invTable invTable invTable invTable invTable invTable invTable ."
		". . . newBtn newBtn newBtn newBtn newBtn newBtn . . .";
}

.invTitle		{ grid-area: invTitle; }
#invLock		{ grid-area: invLock;  }
#inventoryList	{ grid-area: invTable; }
#newItem		{ grid-area: newBtn;   width: 300px;}


#updateInv		{
	grid-area: updateInv;
	grid-row-gap: 10px;
	display: grid;
	padding-top: 15px;
	background-color: var(--Tan);
	border-radius: 15px;
	grid-template-columns: 10px 50px 300px 70px 55px 50px 50px 250px;
	grid-template-rows: 36px 40px 32px 1px 1px;
	grid-template-areas: 
		". itemLabel itemInput . itemEquip equipCheck . magicBonus"	
		". notesLabel invNotes invNotes invNotes invNotes invSelects invSelects"
		".       .     .    .  .      .    closeInv   saveInv"
		"invIdx invIdx invIdx invIdx invIdx invIdx invIdx invIdx"
		"invMsg invMsg invMsg invMsg invMsg invMsg invMsg invMsg";
}

.itemLabel		{	grid-area: itemLabel;	}	
.itemInput		{	grid-area: itemInput;	}	
.itemEquip		{	grid-area: itemEquip;   }	
.equipCheck		{	grid-area: equipCheck;  }
#equipID		{	height: 32px; 
					width: 32px; 
					margin-top: -7px;		}	
.notesLabel		{	grid-area: notesLabel;	}	
.invNotes		{	grid-area: invNotes;	}	
.magicBonus		{	grid-area: magicBonus;	vertical-align: top; }	
.invSelects		{	grid-area: invSelects;	}	
#closeInv		{	grid-area: closeInv;	vertical-align: bottom; }	
#saveInv		{	grid-area: saveInv;		vertical-align: bottom; }	
#invIdx			{	grid-area: invIdx; display: none; }	
#invMsg			{	grid-area: invMsg; display: none; }	

#invTable {
	display: grid;
	grid-column-gap: 50px;
	grid-template-columns: 400px 400px;
	grid-template-areas: 	"equipForm equipForm"
							"unequipForm unequipForm";
}

.Equipped 	{ grid-area: equipForm; }
.Unequipped	{ grid-area: unequipForm; }

.Equipped,
.Unequipped { 
	display: grid;
	grid-gap: 16px;
	grid-template-columns: 400px 400px;
	grid-template-rows: minmax(80px, 80px);
}

.equipTitle  { font-size: 24px; grid-column: 1/3;}
.itemCard {
	padding: 10px;
	background-color: var(--Tan);
	height: 80px;
}

#collapseArea		{ 
	grid-area: collapseArea;
	writing-mode: tb;
	text-align: center;
}
#initTrack {
	display: grid;
	padding-top: 15px;
	grid-gap: 20px;
	grid-template-columns: 350px 600px 50px;
	grid-template-areas:
	"rollDiv roundTracker collapseArea";
}

#rollDIv 		{ grid-area: rollDiv; }
#roundTracker 	{
	grid-area: roundTracker;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 190px 420px;
	grid-template-rows: 50px 50px 50px 50px 50px auto;
	grid-template-areas: 
		"rtHdr rtHdr"
		"fightStatTable roundChoices"
		"fightStatTable	roundChoices"
		"fightStatTable	roundChoices"
		"fightStatTable	roundChoices"
		".				roundChoices"
		".				rerollBtn";
}

.rtHdr			{ grid-area: rtHdr; font-size: 24pt; font-weight: bold;}
.fightStatTable { 
	grid-area: fightStatTable; 
	display: grid;
	grid-template-columns: 120px 50px;
	grid-template-rows: repeat(7, 24px);
	padding: 12px;
	background-color: var(--Yellow); 
}
.roundChoices 	{ grid-area: roundChoices; }
.rerollBtn		{ grid-area: rerollBtn; }
.ar				{ font-size: 16pt; font-weight: bold;}

#dodgeOpp, #fightTrack {
	box-shadow: 20px 20px 20px;
	width: 1050px;
	height: auto;
	border: 1px solid var(--Black);
	border-radius: 15px;
	-moz-border-radius: 9px;
	font-family: Arial;
	display: block;
	position: fixed;
	z-index: -5;
	margin-left: 10px;
	background-color: var(--Tan);
	top: 440px;
	left: 230px;
}

.sitBonuses {
	border: 1px solid var(--Black);
	padding: 15px;
	border-radius: 15px;
	-moz-border-radius: 9px;
	font-family: Arial;
	background-color: var(--Tan);
	display: none;
	width: 660px;
	grid-gap: 10px;
	grid-template-columns: 50px 80px 50px 80px 50px 80px 50px 80px;
}

.bonusTitle { grid-column: 1/9; align-content: center; font-size: 28px; font-weight: bold;}
.spacer		{ grid-column: 1/8; }
#ftContinue { width: 80px; }
#ftwpn,#ftlvl,#ftbonus,#ftpenalty,#ftdam,#ftap,#ftinitiative,#ftready,#ftluck,#ftdodge,#ftwhen { display: none; }