@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: calc(1.2 * var(--max-height-header-points));
	grid-template-areas: 
		"points buttons";
}

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

.button{
	display: flex;
	width: calc(var(--max-width-header-half) / 11);
	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);
}

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

.helpContent{
	display: none;
}

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

.zoomOption{
	padding: var(--padding-name-top);;
}

.rosterInfo > .buttons > .zoomButton > .zoomButtonText,
.rosterInfo > .buttons > .printPreviewButton > .printPreviewButtonText,
.rosterInfo > .buttons > .printPreviewTailButton > .printPreviewTailButtonText{
	font-size:var(--font-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;
}