body {
    background: #fff;
    font-family: Arial, Helvetica;
    font-size: 14px;
    margin: 0;
	padding-top: 50px;
}
a:link, a:visited {
	color: #0f7e0f;
}
a:hover {
	color: #999;
}
a.btnlink {
	border:1px solid #999;
	border-radius:10px;
	display:inline-block;
	margin:4px;
	padding:4px 8px;
}
a.btnlink.sel {
	background:#0f7e0f;
	color:#fff;
}

/* All purpose CSS */
.noshow {
	display: none;
}
.clear {
	clear:both;
}
a:link {
	text-decoration:none;
}
.loadimage {
	margin:20px auto;
	text-align:center;
}
.loadimage img {
	height: 50px;
	width: 50px;
}

/* Form CSS */
form {
	font-size:1.2em;
}
label.fieldlabel {
	display: block;
	font-size:1.4em;
	font-weight: bold;
	margin-top:25px;
}
textarea.post_text {
	width:80%;
	height:100px;
}

/* Top Bar CSS */
header#topbar {
    background: #E8E8E8;
	border-bottom: 1px solid #ddd;
	height:50px;
	padding:2px 0;
	position: fixed;
	top: 0;
	transition: top 0.2s ease-in-out;
	width: 100%;
	z-index: 10;
}
header#topbar.nav-up {
	top: -70px;
}
header#topbar img#logo {
	display: block;
    margin: 2px auto -25px auto;
	width: 65px;
}
header#topbar img#icon_menu {
	float:left;
	opacity:0.5;
	padding:10px;
	height: 30px;
}
header#topbar img#icon_blank {
	float:right;
	opacity:0.5;
	padding:10px;
	height: 30px;
}
header#topbar img#icon_user {
	border-radius:100%;
	float:right;
	padding:10px;
	height: 30px;
}

/* Menu Slide CSS */
div#menuslide {
	background: rgba(255, 255, 255, 1);
	font-size: 16px;
	font-weight: bold;
	height: 100%;
	left: 0;
	line-height: 30px;
	position: fixed;
	top: 0;
	transition: left 0.2s ease-in-out;
	width: 75%;
	z-index: 20;
}
div#menuslide.nav-in {
	left: -75%;
}
div#menuslide header#menuhead {
	border-bottom:1px solid #999;
	font-size:1.2em;
	font-stretch:narrower;
	margin-bottom:10px;
	padding: 15px;
}
div#menuslide header#menuhead span.small {
	color: #999;
	font-size:0.7em;
}

div#menuslide a {
	color:#000;
}
div#menuslide ul {
	list-style:none;
	margin:0;
	padding:0;
}
div#menuslide ul li a {
	display:block;
	padding:5px 15px;
}
div#menuslide div#menuclose {
	display:block;
	text-align:right;
	padding:10px 15px;
}
/* Menu Shade CSS */
div#menushade {
	background: rgba(0, 0, 0);
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	visibility: hidden;
	width: 100%;
	z-index: 10;
}
div#menushade.transition {
	transition: visibility 0.2s, opacity 0.2s ease-in-out;
}
div#menushade.nav-out {
	visibility: visible;
	opacity: 0.5;
}



/* Content CSS */
div#content {
	margin:40px 15px;
}


/* Post Tags */
div.posttag {
	background:#555;
	border-radius:14px;
	color:#fff;
	float:left;
	font-size:12px;
	margin:2px 2px 2px 0;
	padding:5px 8px;
}


/* Regular Rows (no shading) */
.regrow {
	border-top:1px solid #ddd;
	color:#666;
	display: block;
	font-size:1em;
	padding:1.2em 1.6em;
}
.regrow.bottom {
	border-bottom:1px solid #ddd;
}
.regrow label {
	display:block;
	font-weight:bold;
	font-size:1.2em;
}
.regrow label.canedit {
	color:#000;
}
/* Staff CSS */
div.stafflist {
	border-top:4px solid #f3f3f3;
	background:linear-gradient(#f4f4f4, #eee);
	margin:2px 0;
	padding:4px 8px;
}
div.stafflist p {
	padding:2px;
	margin:2px;
}
div.stafflist p.name {
	font-size:16px;
	font-weight:bold;
}
div.stafflist div.actions img {
	float:right;
	padding:5px;
	width:8%;
}
div.stafflist div.actions img.double {
	float:right;
	padding:5px;
	width:16%;
}

/* Posts CSS */
div.post {
	border:1px solid #ccc;
	margin:10px;
	padding: 5px;
	overflow:hidden;
}
div.post p {
	margin:0;
	padding:2px;
}
div.post header {
	padding-bottom: 10px;
}
div.post header img.pinicon {
	float:right;
	padding:2px;
	margin:2px 4px 2px 0;
	width: 5%;
	height: 5%;
}
div.post header img.usericon {
	border:1px solid #eee;
	border-radius:100%;
	float:left;
	padding:2px;
	margin:2px 4px 2px 0;
	width: 12%;
	height: 12%;
}
div.post header p.username {
	font-size:16px;
	font-weight:bold;
}
div.post header p.datetime {
	color:#999;
}
div.post div.postmessage {
	clear:both;
	padding:8px 20px;
	line-height:16px;
}

div.post div.postmessage img {
	display:block;
	margin:6px auto;
	width:100%;
}
div.post div.postmessage a.attachment_link {
	text-align:center;
}
div.post div.postmessage a.attachment_link img {
	border: 1px solid #cec;
	width:50%;
}
div.post div.postactions {
	clear:both;
}
div.post div.postactions img {
	width:7%;
	filter: grayscale(100%);
	opacity: 0.5;
	padding: 8px;
}
div.post div.postactions img.clicked {
	filter: inherit;
}

div.post div.postactions div.postemote img {
	float:right;
}
div.post div.postactions span.commentcount {
	display:inline-block;
	vertical-align:central;
}

/* Calendar CSS */
#caltabtop {
	background:linear-gradient(#fff, #f2f2f2);
	border-bottom:1px solid #ddd;
	width:365px;
	float:right;
	margin-right:-1px;
}
#caltabtop a {
	background:#fff;
	font-weight:bold;
	font-size:14px;
	display:block;
	padding:8px 10px;
	margin:5px 0 -1px 5px;
	border:1px solid #ddd;
	float:right;
}
#caltabtop a:hover {
	background:#eee;
}
#caltabtop a.sel {
	background:#eee;
	border-bottom:1px solid #eee;
	color:#000;
}
.calpanel {
	width:352px;
	padding:6px;
	clear:right;
}
.calpanel .caloplink {
	padding:2px;
	margin:0 0 8px 0;
	text-align:center;
}
.calpanel .caloplink a {
	background-position:0 6px;
	background-repeat:no-repeat;
	display:inline-block;
	padding: 4px 0 4px 20px;
	line-height:20px;
	margin:0 6px;
}
.calpanel .caloplink a .small {
	font-size:8px;
}
button.sm {
	display:none;
}
.calpanel .caloplink a.icon-cal {
	background-image:url('/lib/img/icon-calendar.png');
}
.calpanel .caloplink a.icon-pdf {
	background-image:url('/lib/img/icon-pdf.png');
}
.calpanel .caloplink a.icon-list {
	background-image:url('/lib/img/icon-list.png');
}
.calpanel .caloplink a.icon-ntf {
	background-image:url('/lib/img/icon-notify.png');
	padding-left:16px;
}
.thecalendar {
	background:#eee;
}
ul.thecalendar {
	background:linear-gradient(#eee, #e2e2e2);
	border-bottom:1px solid #ccc;
	margin:0;
	padding:0;
	font-size:12px;
	list-style:none;
	text-align:left;
	margin-bottom:20px;
}
h3.calendardate {
	margin:8px 0 4px 0;
	padding:0;
	font-size:18px;
	font-weight:normal;
	text-align:left;
	font-family:Helvetica,Roboto,"Segoe UI",Calibri,sans-serif;
}
.thecalendar li {
	border-bottom:1px solid #ddd;
	clear:left;
	padding:4px 0;
}
.thecalendar .schoolcolor {
	border-bottom:1px solid #999;
	color:#FFF;
	display:inline-block;
	font-weight:bold;
	float:left;
	margin:1px 5px 1px 0;
	text-align:center;
	width:38px;
	border-radius:3px;
	line-height:32px;
}
.thecalendar .schoolcolor.ehbs, .calitem.hbs {
	background:#555;
}
.thecalendar .schoolcolor.ehs, .calitem.hs {
	background:#090;
}
.thecalendar .schoolcolor.ems, .calitem.ms {
	background:#c60;
}
.thecalendar .schoolcolor.eda, .calitem.da {
	background:#909;
}
.thecalendar .schoolcolor.ett, .calitem.tt {
	background:#ba0;
}
.thecalendar .schoolcolor.ehmx, .calitem.hmx {
	background:#009;
}
.thecalendar .schoolcolor.eath {
	background-color:#bbb;
	line-height:48px;
}
.calitem.ath {
	background-color:inherit;
	border-bottom:1px solid #999;
	color:#000;
}
.calitem.ath:hover {
	background-color:rgba(0,120,0,0.30);
}
.thecalendar .details {
	padding:2px;
}
.thecalendar .activity {
	font-size:14px;
	font-weight:bold;
	overflow:hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space:nowrap;
}
.thecalendar .title {
	font-size:13px;
	overflow:hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space:nowrap;
}
.thecalendar .title.snowdayoff {
	color:#009;
	font-weight:bold;
}
.thecalendar .title.caldayoff {
	color:#333;
	font-weight:bold;
}
.thecalendar .timelocation {
	font-size:11px;
	overflow:hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space:nowrap;
}
.thecalendar .redtext, .redtext {
	color:#d00;
	font-weight:bold;
}
.thecalendar .lighttext {
	opacity:0.4;
}
.thecalendar .lighttext:hover {
	opacity:1;
}
/*************************/
/* New District Calendar */
.calsidebar {
	float:right;
	margin-left:5px;
}
.calbox {
	border:1px solid #aaa;
	border-radius:5px;
	margin:9px 0;
	width: 185px;
}
.calbox h2 {
	background:#eee;
	border-radius:5px 5px 0 0;
	border-bottom: 1px solid #aaa;
	margin:2px;
	padding:3px 8px;
}
.calbox .row {
	padding:3px 12px 3px 3px;
	margin:4px 2px;
	cursor:pointer;
}
.calbox.minical {
    border-collapse: collapse;
    border-spacing: 0;
}
.calbox.minical thead th {
    font-weight: bold;
    text-align: center;
}
.calbox.minical tbody td {
    text-align: center;
}
.calbox.minical tfoot td {
    text-align: right;
}
.calbox.minical th, .calbox.minical td {
    border:1px solid #aaa;
    padding:4px;
    margin:0;
}
.calbox.minical.sidelump {
    float:left;
    margin-right:15px;
}
.calbox td.today {
    background:#ffd;
    outline:1px solid #cc9;
    outline-offset: -1px;
}
.calbox td.caldayoff {
    background-color:#ccc;
}
.calbox td.caldayoff.caldayinservice {
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2) 10px,
        rgba(0, 0, 0, 0.3) 10px,
        rgba(0, 0, 0, 0.3) 20px
    );}
.calbox td.caldayinservice {
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 180, 0, 0.2),
        rgba(0, 180, 0, 0.2) 10px,
        rgba(0, 0, 0, 0.2) 10px,
        rgba(0, 0, 0, 0.2) 20px
    );
}
.calbox td.halfday {
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 180, 0, 0.2),
        rgba(0, 180, 0, 0.2) 10px,
        rgba(0, 0, 0, 0.0) 10px,
        rgba(0, 0, 0, 0.0) 20px
    );
}
.calbox td.snowdayoff {
    background-color:#d2f3ff;
}
#calcontainer {
	overflow:auto;
}
.calcontent {
}
#viewathletics .calcontent, #viewagenda .calcontent {
	margin-right:0;
}
.calitem {
	border-radius:2px;
	color:#fff;
}
.calitem.disabled {
	cursor:default;
}
.calpopup.calitem {
	font-size:14px;
	font-weight:bold;
	padding:2px 5px;
}
.calevent {
	cursor:pointer;
	display:table;
	margin:2px 0;
	width:100%;
	table-layout:fixed;
}
.calevent strong {
	font-size:10px;
}
.calevent.noshow, .agendalist.noshow, .thecalendar.noshow, .thecalendar.prevevent {
	display:none;
}
.calevent.lighttext {
	text-decoration:line-through;
	opacity:0.4;
}
.calevent > div {
	display: table-cell;
}
.cecontainer {
	overflow: hidden;
	padding:2px 3px;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
	word-wrap: break-word;
}
.callarge {
	border:2px solid #aaa;
	border-collapse:collapse;
	width:100%;
}
.callarge th, .callarge td {
	margin:0;
	padding:4px;
	width:14%;
}
.callarge th, .callarge td {
	border:1px solid #aaa;
}
.callarge th {
	border-bottom:3px double #aaa;
	font-size:14px;
	font-weight:bold;
}
.callarge td {
	height:120px;
	font-size:11px;
	vertical-align:top;
}
.callarge td.calspacing {
	background:#ccc;
}
.callarge td.today {
	background:#ffd;
	border:2px solid #CC9;
}
.callarge td.caldayoff {
	background:#eee;
}
.callarge td.snowdayoff {
	background:#d2f3ff;
}
.callarge td .dateday {
	display:block;
	float:right;
	font-size:14px;
	font-weight:bold;
	text-align:right;
}
.callarge td .schoolday {
	color:#999;
	font-size:11px;
	font-style:italic;
	text-align:center;
}
.viewmonth.noshow, .viewagenda.noshow {
	display:none;
}
table.v180daycal {
	border-collapse:collapse;
	margin:10px auto;
	width:80%;
}
table.v180daycal tr:nth-child(even) {
	background:#eee;
}
table.v180daycal td {
	padding:2px 5px;
}
.calbtns {
	display:flex;
	float:right;
}
.calbtns button {
	background:#eee;
	border:1px solid #aaa;
	cursor:pointer;
	margin-top:-7px;
	padding:8px;
}
.calbtns button.navbtn {
	width:80px;
}
.calbtns button.navbtn.sel {
	background:#fff;
}
.calbtns button.small {
	border-radius:4px;
	width:40px;
}
.calbtns button.left {
	border-right:0;
	border-radius:4px 0 0 4px;
}
.calbtns button.center {
	border-right:0;
	border-radius:0;
}
.calbtns button.right {
	border-radius:0 4px 4px 0;
	margin-right: 6px;
}
.calbtns button.notifications {
	display:none;
	background-image:url('/lib/img/icon-notify.png');
	background-repeat:no-repeat;
	background-position:5px 10px;
	border-radius: 4px;
	padding-left:26px;
}
#calmosel {
	display:none;
}
#calmosel .showcal .ui-datepicker {
	margin:0 auto;
}
#calmosel .showcal .ui-datepicker-calendar a {
	cursor:default;
}
.viewagenda .thecalendar {
	padding:6px 10px;
}
.ath_notes {
	font-size:10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
	word-wrap: break-word;
}
.calselect #checkall {
	background:url('/lib/img/icon-downarrow.png') #ddd no-repeat 4px 4px;
	padding-left:28px;
	
}
.selectnotify {
	border-collapse:collapse;
	width:100%;
}
.selectnotify tr:nth-child(even) {
	background: #e2e2e2;
}
.selectnotify th {
	border-bottom:3px double #000;
	font-weight: bold;
	padding:4px;
}
.selectnotify td {
	padding: 4px;
}
#notifyathletics {
	max-height: 380px;
	overflow:auto;
}
.notificationPageContainer {
	margin:0 auto;
	max-width:800px;
}

/*************************/
/* School Contact Tables */
.schoolcontacts {
	border-top:4px solid #f3f3f3;
	background:linear-gradient(#eee, #e2e2e2);
}
.homepanel .schoolcontacts {
	border-top:0;
	background:inherit;
}
.schoolcontacts h2 {
	margin:0;
	padding:5px 0;
	font-weight:normal;
}
.schoolcontacts .row {
	padding:8px 16px;
	margin:2px 1%;
	border-bottom:1px solid #ddd;
}
.homepanel .schoolcontacts .row {
	border-bottom:1px solid #eee;
}
.schoolcontacts .row .cell {
	display:inline-block;
}
.schoolcontacts .row .cell.name {
	font-weight:bold;
	width:35%;
}
.schoolcontacts .row .cell.title {
	display:none;
}
.schoolcontacts .row .cell.phone {
	display:65%;
}

/*********************/
/* Staff Access Page */
.staffaccess_columns {
	display:flex;
	align-items:flex-start;
	flex-wrap:wrap;
}
.servicebuttons {
	display:flex;
	flex-wrap:wrap;
	margin-bottom:25px;
	min-width:255px;
	width:calc(100% - 475px);
}
.servicebuttons h2 {
	text-align:left;
}
.servicebuttons .link {
	background:#f4f4f4;
	border-bottom:1px solid #ddd;
	padding:10px 12px;
	position:relative;
	margin:3px;
	width:225px;
}
.servicebuttons .link img {
	border:0;
	border-bottom:1px solid #bbb;
}

.servicebuttons .link:hover {
	background:#dfd;
}
.servicebuttons .link:hover img {
	opacity:1;
}
.servicebuttons .link .key-icon {
	position:absolute;
	left:220px;
	top:42px;
}
.servicebuttons .link .key-icon img {
	border:0;
	width:24px;
	height:24px;
}
.sapanels {
	width:450px;
}
#myinfopanel {
	background: #FFD;
	border:1px solid #960;
	border-radius:4px;
	color:#960;
	padding:10px 20px 10px 20px;
	margin:0 0 15px 0;
	font-size:15px;
	width:428px;
}
#resourcepanel {
	border-radius:0;
	width: 470px;
	margin-bottom:10px;
}
#resourcepanel .ui-accordion-header {
	font-weight:bold;
	font-size:16px;
}
#resourcepanel .support {
	background: #E1F2FD;
}
#resourcepanel .supportfacilities {
	background: #FFD3A8;
}
#resourcepanel .adminaccess {
	background: #C4FFC4;
}
#resourcepanel .business {
	background: #FCC;
}
#resourcepanel .forms {
	background: #EEE;
}
#resourcepanel .halfbutton {
	border:1px solid #aaa;
	border-radius:5px;
	float:left;
	font-size:12px;
	font-weight:bold;
	padding:12px;
	position:relative;
	text-align:center;
	margin:5px 11px 5px 0;
	width:96px;
}
#resourcepanel .halfbutton.freshdesk {
	background:#057c59;
	width:106px;
}
#resourcepanel .halfbutton.businessoffice {
	background:#7c0505;
}
#resourcepanel a:link .halfbutton, #resourcepanel a:visited .halfbutton {
	color:#eff0ef;
}
#resourcepanel .halfbutton img {
	border:0;
}
#resourcepanel ul.withbutton {
	margin:2px 0 0 116px;
}
#resourcepanel ul li {
	padding:3px 0;
}



/* Google Translate Adjustments */
.goog-te-gadget {
  font-family: Roboto, 'Open Sans', sans-serif!important;
  text-transform: uppercase;
}
.goog-te-gadget-simple  {
  background-color: rgba(255,255,255,1)!important;
  border: 0 !important;
  padding: 4px!important;
  font-size: 1rem!important;
  line-height:2rem!important;
  display: inline-block;
  cursor: pointer;
  zoom: 1;
}
.goog-te-menu2 {
  max-width: 100%;
}
.goog-te-menu-value {
  color: #000 !important;
}

.goog-te-menu-value span:nth-child(5) {
  display:none;
}
.goog-te-menu-value span:nth-child(3) {
  display:none;
}

.goog-te-gadget-icon {
    background-image: url(/lib/img/icon_gtranslate.png)!important;
    background-position: 0px!important;
	background-repeat:no-repeat;
    height: 32px!important;
    width: 36px!important;
    margin-right: 8px!important;
}

.goog-te-banner-frame.skiptranslate {display: none!important;} 
body {top: 0px!important;}

.goog-te-menu-frame td { 
    float:none !important; 
    display:block !important; 
} 

@media (max-width: 667px) {
	#google_translate_element {
		bottom: calc(100% - 50% - 53px);
		left: 16px!important;
		width: 100%!important;
		goog-te-gadget {
			width:100%!important;
		}
		.skiptranslate {
			width:100%!important;			
		}
		.goog-te-gadget-simple {
			width: calc(100% - 32px)!important;
			text-align: center;
		}	
	}
}

@media (max-width: 1064px) {
	.servicebuttons .link {
		width:175px;
	}
	.servicebuttons .link img {
		width:175px;
	}
	.servicebuttons .link .key-icon {
		position:absolute;
		left:170px;
		top:32px;
	}
}
@media (max-width: 963px) {
	.staffaccess_columns {
		display:block;
	}
	.servicebuttons {
		width:100%;
	}
	.sapanels {
		width:100%;
	}
	#myinfopanel {
		width:calc(100% - 40px);
	}
	#resourcepanel {
		width:100%;
	}
}
@media (max-width: 732px) {
	.necessarybottom iframe {
		display:none;
	}
	.servicebuttons .link {
		width:150px;
	}
	.servicebuttons .link img {
		width:150px;
	}
	.servicebuttons .link .key-icon {
		position:absolute;
		left:145px;
		top:26px;
	}
}

