body {
	background-image: url(https://fdotwww.blob.core.windows.net/sitefinity/images/default-source/content1/maintenance/images/texture_bg.png);
	background-size: cover;
	background-position: center;
}

#title {
	font-weight: bold;
	font-size: 75px;
}

.curOpscontainer {  display: grid;
	grid-template-columns: 2fr;
	grid-template-rows: .3fr .3fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .25fr .1fr;
	//gap: 2px 2px;
	grid-auto-flow: row;
	//outline: 1px dashed magenta;
	grid-template-areas: 
		"curOper"
		"operGap"
		"saDumpOper"
		"oper1"
		"taDumpOper"
		"oper2"
		"moGradOper"
		"oper3"
		"ttLowOper"
		"oper4"
		"trMowEOper"
		"oper5"
		"trMowWOper"
		"oper6"
		"baHoeOper"
		"oper7"
		"skSteerOper"
		"oper8"
		"operGap2"
	}
	
.fullRosterContainer1 {  display: grid;
	grid-template-columns: 1fr 1fr
	grid-template-rows: .3fr .175fr .175fr .175fr .175fr .175fr .175fr;
	//gap: 2px 2px;
	//outline: 1px dashed magenta;
	grid-template-areas: 
		"saDump taDump"
		"saDumpRost taDumpRost"
		"saDumpRost taDumpRost"
		"saDumpRost taDumpRost"
		"saDumpRost taDumpRost"
		"saDumpRost taDumpRost"
		"saDumpRost taDumpRost"		
	}	
	
.fullRosterContainer2 {  display: grid;
	grid-template-columns: 1fr 1fr
	grid-template-rows: .3fr .175fr .175fr .175fr .175fr .175fr .175fr .15fr .15fr .175fr .175fr .175fr .175fr .175fr .175fr;
	//gap: 2px 2px;
	//outline: 1px dashed magenta;
	grid-template-areas: 
		"moGrader ttLowboy"
		"moGradRost ttLowRost"
		"moGradRost ttLowRost"
		"moGradRost ttLowRost"
		"moGradRost ttLowRost"
		"moGradRost ttLowRost"
		"moGradRost ttLowRost"
	}

.fullRosterContainer3 {  display: grid;
	grid-template-columns: 1fr 1fr
	grid-template-rows: .3fr .175fr .175fr .175fr .175fr .175fr .175fr;
	//gap: 2px 2px;
	//outline: 1px dashed magenta;
	grid-template-areas:
		"trMowerE trMowerW"
		"trMowERost trMowWRost"
		"trMowERost trMowWRost"
		"trMowERost trMowWRost"
		"trMowERost trMowWRost"
		"trMowERost trMowWRost"
		"trMowERost trMowWRost"
	}

.fullRosterContainer4 {  display: grid;
	grid-template-columns: 1fr 1fr
	grid-template-rows: .3fr .175fr .175fr .175fr .175fr .175fr .175fr;
	//gap: 2px 2px;
	//outline: 1px dashed magenta;
	grid-template-areas:
		"baHoe skSteer"
		"baHoeRost skSteerRost"
		"baHoeRost skSteerRost"
		"baHoeRost skSteerRost"
		"baHoeRost skSteerRost"
		"baHoeRost skSteerRost"
		"baHoeRost skSteerRost"
	}

.curOper { 
	grid-area: curOper;
	outline: 1px solid black;
	align-content: center;
	justify-content: center;
	text-align: center;
	font-weight: bold;
	font-size: 55px;
	background: rgba(255,255,255,1);
	border-radius: 20px 20px 0px 0px;
}

.operGap { 
	grid-area: operGap;
	//outline: 1px dashed magenta;
}

.operGap2 { 
	grid-area: operGap;
	//outline: 1px dashed magenta;
}

.summitTitle {
	align-content: center;
	justify-content: center;
	background-position: center;
	background-repeat: no-repeat;
}

.summitTitle .img {
	padding-top: 10px;
	max-width: 35%;
	max-height: 35%;
	//border-radius: 25% !important;
}

.rosterTitle { 
	align-content: center;
	justify-content: center;
	background-position: center;
	background-repeat: no-repeat;
}

.rosterTitle .img {
	max-width: 45%;
	max-height: 45%;
	//border-radius: 25% !important;
}

.saDumpOper { 
	grid-area: taDumpOper;
	border-top: 2px solid black;
	border-left: 2px solid black;
	font-style: italic;
	font-size: 25px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	border-radius: 2px 0px 90px 0px;
	box-shadow:5px 5px 5px gray;
}

.saDump { 
	grid-area: saDump;
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 1rem;
	border: 5px solid rgba(189,223, 254, .75);
	align-content: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 35px 15px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
}

.taDump { 
	grid-area: taDump;
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 1rem;
	border: 5px solid rgba(189,223, 254, .75);
	align-content: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 35px 15px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
}

.moGrader { 
	grid-area: moGrader;
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 1rem;
	border: 5px solid rgba(189,223, 254, .75);
	align-content: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 35px 15px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
}

.ttLowboy { 
	grid-area: ttLowboy;
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 1rem;
	border: 5px solid rgba(189,223, 254, .75);
	align-content: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 35px 15px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
}

#oper1 { 
	grid-area: oper1;
	font-size: 30px;
	font-weight: bold;
	padding-left: 20px;
}

.taDumpOper { 
	grid-area: taDumpOper;
	border-top: 2px solid black;
	border-left: 2px solid black;
	font-style: italic;
	font-size: 25px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	border-radius: 2px 0px 90px 0px;
	box-shadow:5px 5px 5px gray;
}

#oper2 { 
	grid-area: oper2;
	font-size: 30px;
	font-weight: bold;
	padding-left: 20px;
}

.moGradOper { 
	grid-area: moGradOper;
	border-top: 2px solid black;
	border-left: 2px solid black;
	font-style: italic;
	font-size: 25px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	border-radius: 2px 0px 90px 0px;
	box-shadow:5px 5px 5px gray;
}

#oper3 { 
	grid-area: oper3;
	font-size: 30px;
	font-weight: bold;
	padding-left: 20px;
}

.ttLowOper { 
	grid-area: ttLowOper;
	border-top: 2px solid black;
	border-left: 2px solid black;
	font-style: italic;
	font-size: 25px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	border-radius: 2px 0px 90px 0px;
	box-shadow:5px 5px 5px gray;
}

#oper4 { 
	grid-area: oper4;
	font-size: 30px;
	font-weight: bold;
	padding-left: 20px;
}

#saDumpRost { 
	grid-area: saDumpRost;
	border-top: 1px solid black;
	border-left: 1px solid black;
	background-color: rgba(255,255,255,0.5);
	border-radius: 10px 0px 0px 10px;
	font-size: 12px;
}

#taDumpRost { 
	grid-area: taDumpRost;
	border-top: 1px solid black;			
	background-color: rgba(255,255,255,0.5);
	border-radius: 0px 0px 20px 0px;
	font-size: 12px;
}

#moGradRost { 
	grid-area: moGradRost;
	border-top: 1px solid black;
	border-left: 1px solid black;
	background-color: rgba(255,255,255,0.5);
	border-radius: 10px 0px 0px 10px;
	font-size: 12px;
}

#ttLowRost { 
	grid-area: ttLowRost;
	border-top: 1px solid black;			
	background-color: rgba(255,255,255,0.5);
	border-radius: 0px 0px 20px 0px;
	font-size: 12px;
}

.trMowEOper { 
	grid-area: trMowEOper;
	border-top: 2px solid black;
	border-left: 2px solid black;
	font-style: italic;
	font-size: 25px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	border-radius: 2px 0px 90px 0px;
	box-shadow:5px 5px 5px gray;
}

#oper5 { 
	grid-area: oper5;
	font-size: 30px;
	font-weight: bold;
	padding-left: 20px;
}

.trMowWOper { 
	grid-area: trMowWOper;
	border-top: 2px solid black;
	border-left: 2px solid black;
	font-style: italic;
	font-size: 25px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	border-radius: 2px 0px 90px 0px;
	box-shadow:5px 5px 5px gray;
}

.trMowerE { 
	grid-area: trMowerE;
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 1rem;
	border: 5px solid rgba(189,223, 254, .75);
	align-content: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 35px 15px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	}

.trMowerW { 
	grid-area: trMowerW;
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 1rem;
	border: 5px solid rgba(189,223, 254, .75);
	align-content: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 35px 15px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	}

.baHoe { 
	grid-area: baHoe;
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 1rem;
	border: 5px solid rgba(189,223, 254, .75);
	align-content: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 35px 15px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
}

.skSteer { 
	grid-area: skSteer;
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 1rem;
	border: 5px solid rgba(189,223, 254, .75);
	align-content: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 35px 15px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
}

#oper6 { 
	grid-area: oper6;
	font-size: 30px;
	font-weight: bold;
	padding-left: 20px;
}

.baHoeOper { 
	grid-area: baHoeOper;
	border-top: 2px solid black;
	border-left: 2px solid black;
	font-style: italic;
	font-size: 25px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	border-radius: 2px 0px 90px 0px;
	box-shadow:5px 5px 5px gray;
}

#oper7 { 
	grid-area: oper7;
	font-size: 30px;
	font-weight: bold;
	padding-left: 20px;
}

.skSteerOper { 
	grid-area: skSteerOper;
	border-top: 2px solid black;
	border-left: 2px solid black;
	font-style: italic;
	font-size: 25px;
	background-image: linear-gradient(to left , #feda15, #fcfadf);
	border-radius: 2px 0px 90px 0px;
	box-shadow:5px 5px 5px gray;
}

#oper8 { 
	grid-area: oper8;
	font-size: 30px;
	font-weight: bold;
	padding-left: 20px;
}

#trMowERost { 
	grid-area: trMowERost;
	border-top: 1px solid black;
	border-left: 1px solid black;
	background-color: rgba(255,255,255,0.5);
	border-radius: 10px 0px 0px 10px;
	font-size: 12px;
}

#trMowWRost { 
	grid-area: trMowWRost;
	border-top: 1px solid black;			
	background-color: rgba(255,255,255,0.5);
	border-radius: 0px 0px 20px 0px;
	font-size: 12px;
}

#baHoeRost { 
	grid-area: baHoeRost;
	border-top: 1px solid black;
	border-left: 1px solid black;
	background-color: rgba(255,255,255,0.5);
	border-radius: 10px 0px 0px 10px;
	font-size: 12px;
}

#skSteerRost { 
	grid-area: skSteerRost;
	border-top: 1px solid black;			
	background-color: rgba(255,255,255,0.5);
	border-radius: 0px 0px 20px 0px;
	font-size: 12px;
}

.horizGap { 
	grid-area: horizGap;
	//outline: 1px dashed magenta;
}

.highlight {
	background-color: yellow;
}

/*Phone Portrait Viewing*/
@media only screen and (450px <= width <= 1024px) {
	.summitTitle {
		align-content: center;
		justify-content: center;
		background-position: center;
		background-repeat: no-repeat;
	}

	.summitTitle .img {
		padding-top: 10px;
		max-width: 75%;
		max-height: 75%;
		//border-radius: 25% !important;
	}
	
	.curOper { 
		grid-area: curOper;
		outline: 1px solid black;
		align-content: center;
		justify-content: center;
		text-align: center;
		font-weight: bold;
		font-size: 25px;
		background: rgba(255,255,255,1);
		border-radius: 20px 20px 0px 0px;
	}

	.rosterTitle { 
		align-content: center;
		justify-content: center;
		background-position: center;
		background-repeat: no-repeat;
	}

	.rosterTitle .img {
		max-width: 100%;
		max-height: 100%;
		//border-radius: 25% !important;
	}
}