@CHARSET "ISO-8859-1";

.rosterInfo{
	grid-area: navigation;
	width: var(--max-width-header);
	background: var(--background);
	display: grid;
	
	grid-template-columns: var(--max-width-header-half) var(--max-width-header-half);
	grid-template-rows: var(--max-height-header-points) calc(var(--max-height-header-limits) * 1.5);
	grid-template-areas: 
		"points buttons"
		"limits limits";
}

.buttons{
	grid-area: buttons;
	border-bottom: var(--border-top);
}

.button{
	display: flex;
	width: calc(var(--max-width-header-half) / 15);
	height: var(--pic-small);
	float: left;
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	margin-top: var(--padding-element-inside);
	margin-left: var(--padding-element-inside);
	z-index: 500;
	padding: var(--padding-element-inside);
}

.limits{
	font-weight:800;
	font-size:var(--font-smaller);
	text-align: center;
	grid-area: limits;
	border-bottom: var(--border-bottom);
	box-shadow: var(--box-shadow);
	display: grid;
	
	grid-template-columns: 
	    calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
	    calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06)
		calc(var(--max-width-header-half) * 0.06) calc(var(--max-width-header-half) * 0.03) calc(var(--max-width-header-half) * 0.06);
	grid-template-rows: calc(var(--max-height-header-limits) * 0.90) calc(var(--max-height-header-limits) * 0.45);
	grid-template-areas: 
        "limit0 limit0 limit0 limit1 limit1 limit1  limit2 limit2 limit2 limit3 limit3 limit3 limit4 limit4 limit4 limit5 limit5 limit5  limit6 limit6 limit6 limit7 limit7 limit7 limit8 limit8 limit8 limit9 limit9 limit9 limit10 limit10 limit10 limit11 limit11 limit11 limit12 limit12 limit12"
        "limit0Value limit0Sign limit0Pattern limit1Value limit1Sign limit1Pattern limit2Value limit2Sign limit2Pattern limit3Value limit3Sign limit3Pattern limit4Value limit4Sign limit4Pattern limit5Value limit5Sign limit5Pattern limit6Value limit6Sign limit6Pattern limit7Value limit7Sign limit7Pattern limit8Value limit8Sign limit8Pattern limit9Value limit9Sign limit9Pattern limit10Value limit10Sign limit10Pattern limit11Value limit11Sign limit11Pattern limit12Value limit12Sign limit12Pattern";
}

.limitRed{
	color: #ff0000;
}

.limitGreen{
	color: #00bf00;
}

.limit {
	text-transform: capitalize;
    font-weight: 400;
    line-height: 0.9;
}

.limitValue{
    padding-top: var(--padding-element-limits);
    text-align: right;
}

.limitSign{
    padding-top: var(--padding-element-limits);
}

.limitPattern{
    padding-top: var(--padding-element-limits);
    text-align: left;
}

.limits>.limit:hover,
.limits>.limitValue:hover,
.limits>.limitPattern:hover {
    cursor: help;
}

.limit0{
	grid-area: limit0;
}
.limit0Value{
	grid-area: limit0Value;
}
.limit0Sign{
    grid-area: limit0Sign;
}
.limit0Pattern{
    grid-area: limit0Pattern;
}

.limit1{
	grid-area: limit1;
}
.limit1Value{
    grid-area: limit1Value;
}
.limit1Sign{
    grid-area: limit1Sign;
}
.limit1Pattern{
    grid-area: limit1Pattern;
}

.limit2{
	grid-area: limit2;
}
.limit2Value{
	grid-area: limit2Value;
}
.limit2Sign{
    grid-area: limit2Sign;
}
.limit2Pattern{
    grid-area: limit2Pattern;
}

.limit3{
	grid-area: limit3;
}
.limit3Value{
	grid-area: limit3Value;
}
.limit3Sign{
    grid-area: limit3Sign;
}
.limit3Pattern{
    grid-area: limit3Pattern;
}

.limit4{
	grid-area: limit4;
}
.limit4Value{
	grid-area: limit4Value;
}
.limit4Sign{
    grid-area: limit4Sign;
}
.limit4Pattern{
    grid-area: limit4Pattern;
}


.limit5{
	grid-area: limit5;
}
.limit5Value{
	grid-area: limit5Value;
}
.limit5Sign{
    grid-area: limit5Sign;
}
.limit5Pattern{
    grid-area: limit5Pattern;
}

.limit6{
	grid-area: limit6;
}
.limit6Value{
	grid-area: limit6Value;
}
.limit6Sign{
    grid-area: limit6Sign;
}
.limit6Pattern{
    grid-area: limit6Pattern;
}

.limit7{
	grid-area: limit7;
}
.limit7Value{
	grid-area: limit7Value;
}
.limit7Sign{
    grid-area: limit7Sign;
}
.limit7Pattern{
    grid-area: limit7Pattern;
}


.limit8{
	grid-area: limit8;
}
.limit8Value{
	grid-area: limit8Value;
}
.limit8Sign{
    grid-area: limit8Sign;
}
.limit8Pattern{
    grid-area: limit8Pattern;
}

.limit9{
	grid-area: limit9;
}
.limit9Value{
	grid-area: limit9Value;
}
.limit9Sign{
    grid-area: limit9Sign;
}
.limit9Pattern{
    grid-area: limit9Pattern;
}

.limit10{
	grid-area: limit10;
}
.limit10Value{
	grid-area: limit10Value;
}
.limit10Sign{
    grid-area: limit10Sign;
}
.limit10Pattern{
    grid-area: limit10Pattern;
}

.limit11{
    grid-area: limit11;
}
.limit11Value{
    grid-area: limit11Value;
}
.limit11Sign{
    grid-area: limit11Sign;
}
.limit11Pattern{
    grid-area: limit11Pattern;
}

.limit12{
    grid-area: limit12;
}
.limit12Value{
    grid-area: limit12Value;
}
.limit12Sign{
    grid-area: limit12Sign;
}
.limit12Pattern{
    grid-area: limit12Pattern;
}

.button:hover{
	transform: scale(1.1, 1.1);
}

.helpContent{
	display: none;
}

.zoomContent{
	display: none;
	width: var(--info-head);
}

.rosterInfo > .buttons > .zoomButton > .zoomButtonText,
.rosterInfo > .buttons > .printPreviewButton > .printPreviewButtonText,
.rosterInfo > .buttons > .printPreviewTailButton > .printPreviewTailButtonText{
	font-size:var(--font-small-07);
	font-weight:800;
	float: right;
    margin-top: auto;
    margin-bottom: auto;
}

.rosterInfo > .buttons > .backButton > .backButtonImg,
.rosterInfo > .buttons > .printPreviewButton > .printPreviewButtonImg,
.rosterInfo > .buttons > .printPreviewTailButton > .printPreviewButtonImg,
.rosterInfo > .buttons > .helpButton > .helpButtonImg,
.rosterInfo > .buttons > .zoomButton > .zoomButtonImg,
.rosterInfo > .buttons > .collapseButton > .collapseButtonImg,
.rosterInfo > .buttons > .expandButton > .expandButtonImg,
.rosterInfo > .buttons > .saveButton > .saveButtonImg,
.rosterInfo > .buttons > .loadButton > .loadButtonImg,
.previewArea > .previewButtons > .printPreviewBackButton > .printPreviewBackButtonImg,
.previewArea > .previewButtons > .printButton > .printButtonImg,
.previewArea > .previewButtons > .printButtonTail > .printButtonImg	 {
	grid-area: points;
	width: var(--pic-small);
	margin: auto;
}