/*

	css/gridlayout.css

*/
* {
    font-family: Verdana, sans-serif;
	line-height: 2vh;
	font-size: 1.8vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ****************************************************************************** */

.container {
	height: 100vh;
    display: grid;
    grid-template-columns: 1fr 620px 1fr;
    grid-template-rows: 3vh 10vh 66vh 3vh 15vh 3vh;
}
/* ****************************************************************************** */

.loginPane {
    grid-column: 1 / end;
    grid-row: 1 / 2;  
}
.headingPane {
    grid-column: 1 / end;
    grid-row: 2 / 3;  
}

/* ****************************************************************************** */

.layoutA .leftPane {
    grid-column: 1 / 2;
    grid-row: 3 / 6;  
}
.layoutA .mainPane {
    grid-column: 2/ 3;
    grid-row: 3 / 6;  
}
.layoutA .rightPane {
    grid-column: 3 / end;
    grid-row: 3 / 6;
}

/* ****************************************************************************** */

.layoutB .leftPane {
    grid-column: 1 / 2;
    grid-row: 3 / 6;  
}
.layoutB .mainPane {
    grid-column: 2/ 3;
    grid-row: 3 / 4;  
}
.layoutB .searchPane {
    grid-column: 2/ 3;
    grid-row: 4 / 5;  
}
.layoutB .labelPane {
    grid-column: 2/ 3;
    grid-row: 5 / 6;  
}
.layoutB .rightPane {
    grid-column: 3 / end;
    grid-row: 3 / 6;
}

/* ****************************************************************************** */

.layoutC .mainPane {
    grid-column: 1/ 3;
    grid-row: 3 / 6;  
}
.layoutC .rightPane {
    grid-column: 3 / end;
    grid-row: 3 / 6;
}

/* ****************************************************************************** */

.layoutD .mainPane {
	grid-column: 1 / end;
	grid-row: 3 / 6;
}

/* ****************************************************************************** */

.footingPane {
    grid-column: 1 / end;
    grid-row: 6 / end;  
}

/* ****************************************************************************** */

.item {
    padding: .1em;
    text-align: center;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

/* ****************************************************************************** */

.loginPane {
	color: white;
    background-color: crimson;
}
.headingPane {
	color: white;
    background-color: indigo;
}
.footingPane {
	color: black;
    background-color: white;
}

/* ****************************************************************************** */

@media print {
    body {
		color: black;
		background-color: white;
    }
	.loginPane, .leftPane, .rightPane, .footingPane {
		display: none;
	}
}

/* ****************************************************************************** */

#Heading {
	text-align: center;
	font-size: 2em;
	padding: 2vh 0;
	line-height: 5vh;
}