/* Shared look for the staff pages that load into the main page (index.html).
 *
 * These rules used to be copied into each page's own <style> block (roster, datapages,
 * attendancedash, usradmin, atrisk, lowscore, manageusers, address). A page can still
 * override one: its own <style> comes after this file, so it wins.
 *
 * Apart from the site font, only uniquely named classes live here. Generic rules some pages
 * also set (.select2, .dataTable) stay in those pages, so other pages are unaffected.
 * The Student Browser (browser2.php) uses these too; studentbrowser/browser.css only adds its own bits.
 * Pages opened on their own (appextreq, docam, levylookup) keep their own styles but link css/fonts/swlfont.css.
 */

/* ---- Font: one family for the whole site, including the menu and jQuery UI widgets ---- */
/* The widget rules start with "body" so they beat the jQuery UI theme CSS that most pages load after this file.
 * "SWL Sans" (css/fonts/swlfont.css) is a Verdana-style font we host ourselves, so every computer shows the same one. */
body,
#cssmenu ul li a,
body .ui-widget,
body .ui-widget input,
body .ui-widget select,
body .ui-widget textarea,
body .ui-widget button {
	font-family: "SWL Sans", Tahoma, sans-serif;
}
/* The top menu needs about 1075px for one row in SWL Sans (more if a computer falls back to Tahoma).
 * It collapses into the phone menu at 1100px; just above that, trim the gap before each item to leave room to spare. */
@media (min-width: 1101px) and (max-width: 1200px) {
	#cssmenu > ul > li > a {
		padding-left: 14px;
	}
}

/* ---- Page frame ---- */
.mainContanier {
	margin-left: 25px;
	margin-right: 25px;
}
.mydataTable {
	background-color: #363636;
	color: #FFFFFF;
	padding-left: 2px;
	padding-right: 2px;
	border: 1px solid black;
	box-shadow: 0px 0px 5px #550000;
	border-radius: 6px;
}

/* ---- Data tables: grey labels, white values, dark grey for blanks (white text, for contrast) ---- */
.demoTable {
	width: 100%;
	border: 0px solid black;
	border-radius: 6px;
	border-collapse: collapse;
}
.demoTable_label {
	width: 12.5%;
	background-color: #d9d9d9;
	color: #000000;
	border: 2px solid black;
	font-weight: bold;
	text-align: center;
}
.demoTable_data {
	width: 12.5%;
	background-color: #FFFFFF;
	color: #000000;
	border: 2px solid black;
	font-weight: bold;
	text-align: center;
}
/* Alternate shade for banded rows */
.demoTable_data2 {
	width: 12.5%;
	background-color: #BFBFBF;
	color: #000000;
	border: 2px solid black;
	font-weight: bold;
	text-align: center;
}
.demoTable_empty {
	width: 12.5%;
	background-color: #686868;
	color: #FFFFFF;
	border: 2px solid black;
	font-weight: bold;
	text-align: center;
}

/* ---- Text ---- */
.textTitle {
	font-weight: bold;
	font-size: 150%;
	background-color: #FFCD00;
	color: #000000;
	display: inline-block;
	width: 100%;
	border: 0px solid black;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.fancyText {
	text-shadow: 0 0 3px #DAA520, 0 0 5px #DAA520;
	font-size: 200%;
}
.pleaseChoose {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 200%;
}

/* ---- Buttons ---- */
.myButton {
	cursor: pointer;
	font-weight: bold;
	font-size: 120%;
	border: 1px solid black;
	box-shadow: 0px 0px 5px #000000;
	border-radius: 6px;
	background-color: #363636;
	color: #FFFFFF;
	height: 35px;
	padding-top: 2px;
	margin-right: 15px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 4px;
	position: relative;
}
.myButton:hover {
	color: #FF0000;
	box-shadow: 0px 0px 5px #550000;
}