@charset "utf-8";
/* CSS Document */

.pageBackground {
	height:100%;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:0;
	background-size:cover;
	opacity:0.5;
}
.page {
	height:100%;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
}
.pageFrame {
	margin:0px;
	left: 50%;
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translate(-50%);
	position: absolute;
}
.pageProper {
	display:block;
	width:1200px;
	min-width:1200px;
	height:auto;
	overflow:hidden;
	outline:none;
}
.menuLogo {
	width:200px;
	height:35px;
	background-repeat:no-repeat;
	background-size:cover;
	display:block;
	float:left;
}
/* TOP LEVEL */
.menuTextDropDown, .menuTextDropDown a {
	float:right;
	text-decoration: none;
	vertical-align: middle;
	width:160px;
	text-align:center;
	z-index:10;
	list-style:none;
	margin:0px;
	cursor:pointer;
	padding-left:0px;
}
/* SECOND LEVEL */
.menuTextDropDown ul, .menuTextDropDown ul a {
	display:none;
	list-style:none;
	margin:0px;
	padding:0px;
	z-index:10;
	position:relative;
}
.menuTextDropDown ul li, .menuTextDropDown ul li a {
	border-radius:0px;
}
.menuTextDropDown:hover ul, .menuTextDropDown:hover ul a {
	display:block;
}
.menuImageDropDownIcon {
	float:right;
	vertical-align:middle;
	text-align:center;
	display: inline-block;
	cursor:pointer;
	margin:0px;
	margin-left:7px;
	width:35px;
}
.menuImageDropDownIcon:hover .menuImageDropDown {
	display:block;
}
.menuImageDropDown {
	display: none;
	position:relative;
	z-index: 10;
	padding-bottom:7px;
	width:200px;
	left:-165px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	text-decoration:none;
}
.menuImageDropDownItem, .menuImageDropDownItem a {
	text-align:center;
	text-decoration:none;
}
.menuImageDropDownItemHighlighted, .menuImageDropDownItemHighlighted a {
	text-decoration:none;
}
.menuTextDropDownAlert {
	padding-right:5px;
	margin-top:3px;
}
.menu {
	width:100%;
	min-width:1150px;
	display:block;
	text-align:center;
	height:35px;
	line-height:35px;
}
.mainPageFeedbackBar {
	width:100%;
	min-height:30px;
	padding-top:10px;
	font-weight:600;
	display:block;
	text-align:center;
	font-size:12px;
}
.menuBottomGap {
	height:15px;
	min-height:15px;
}
/* page layout */
.columnLeft {
	float:left;
	height:auto;
	overflow:hidden;
	width:200px;
	padding:2px;
}
.columnCentre {
	margin-left:20px;
	float:left;
	height:auto;
	overflow:hidden;
}
.columnWidthStandard {
	width:610px;
}
.columnWidthWide {
	width:890px;
}

.columnWidthXWide {
	width:1100px;
}

.columnRight {
	float:right;
	height:auto;
	overflow:hidden;
	width:350px;
}
/* Section */
.sectionFrame, .sectionFrameNarrow {
	width:100%;
	height:auto;
	overflow:hidden;
	display:block;
	border-radius:15px;
	border:#000 1px solid;
}
.sectionFrame {
	margin-bottom:5px;
	margin-top:5px;
	padding-top:4px;
	padding-bottom:4px;
}
.sectionFrameNarrow {
	margin-left:10px;
	margin-right:10px;
	width:auto;
	height:auto;
	padding:0px;
	border-radius:10px;
}
.sectionFrameLeftTab, .sectionFrameLeftTabLarge {
	float:left;
	width:30px;
	border-bottom-left-radius:10px;
	border-top-left-radius:10px;
	vertical-align:middle;
	text-align:center;
	padding:0px;
}
.sectionFrameLeftTab {
	height:30px;
	line-height:30px;
}
.sectionFrameLeftTabLarge {
	height:40px;
	line-height:40px;
}
.sectionFrameCoverTab {
	border-bottom-right-radius:10px;
	border-top-right-radius:10px;
	vertical-align:middle;
	text-align:center;
	padding:0px;
	cursor:pointer;
	padding-top:7px;
	overflow: hidden;
	padding-bottom:8px;
}
.sectionFill {
	float:left;
	width:148px;
}
.sectionDate {
	height:20px;
	line-height:20px;
	border-top-right-radius:10px;
	vertical-align:middle;
	text-align:center;
	padding:0px;
	cursor:pointer;
}
.sectionTitle {
	height:20px;
	line-height:20px;
	border-bottom-right-radius:10px;
	vertical-align:middle;
	text-align:center;
	padding:0px;
	cursor:pointer;
}
.searchIcon {
	cursor:pointer;
	margin-top:4px;
	margin-left:3px;
	float:right;
}
.blockTitle {
	width:100%;
	text-align:center;
	font-weight:600;
}
.blockRow {
	width:100%;
	padding-left:10px;
	float:left;
}
.blockContent {
	float:left;
}
.blockContent input {
	border: none;
	padding: 3px 2px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
	font:inherit;
	font-size:inherit;
	font-weight:600;
	background-color:#fff;
	margin-top:4px;
	margin-left:20px;
}
.blockDivider {
	clear:both;
	display:block;
	height:10px;
}
.link {
	cursor:pointer;
}
.informationPanel {
	float:left;
	clear:both;
	height:auto;
	overflow:hidden;
	padding:0px;
	text-align:center;
	vertical-align:central;
	width:inherit;
	border-radius:10px;
	margin-bottom:10px;
	margin-top:10px;
}

.informationPanelSpacer {
	height:25px;
	width:100%;
	display:block;
	clear:both;
}

.informationPanelHeader {
	width:100%;
	height:auto;
	display:block;
	float:left;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	padding-top:5px;
	padding-bottom:5px;
}
.informationPanelFooter {
	width:100%;
	height:auto;
	display:block;
	float:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	padding-top:5px;
	padding-bottom:5px;
	min-height:10px;
}
.informationPanelNewRow {
	clear:both;
	float:left;
	padding-left:10px;
	width:100%;
	text-align:left;
}
.informationPanelNewRow textarea, .informationPanelNewRow input[type="text"] {
	width:80%;
	border-radius:5px;
	clear:both;
	padding:3px;
	padding-left:7px;
	padding-right:7px;
}
.hiddenInformationFrame {
	display:none;
	border-radius:10px;
	border:#aaa 1px solid;
}
.thumbnailPhoto {
	width:90px;
	height:144px;
	border-radius:10px;
}
.photoThumbnailLocation {
	padding-top:10px;
	padding-left:10px;
	margin-bottom:20px;
	float:left;
}
.detailsSection {
	float:left;
	padding-top:6px;
	padding-left:3px;
	padding-bottom:10px;
	width:237px;
	margin-right:6px;
}
.detailsSectionIndicators {
	width:90px;
	height:45px;
	margin-top:20px;
}
.detailsSectionIndicator {
	margin-right:5px;
}
.detailsSectionRoll {
	clear:both;
	width:90px;
	height:20px;
	line-height:20px;
	border-radius:5px;
	margin-top:10px;
	margin-left:10px;
	display:block;
	text-align:center;
	vertical-align:central;
	font-weight:700;
}
.detailsSectionRemoveFromRoll {
	cursor:pointer;
	float:left;
	padding:0px;
	float:right;
	padding-top:2px;
	padding-right:5px;
}
.detailsSectionSID {
	width:90px;
	height:20px;
	line-height:20px;
	border-radius:5px;
	display:block;
	text-align:center;
	vertical-align:central;
	font-weight:700;
}
.informationPanel .fill {
	width: 100%;
	margin: 0 auto;
}
.detailsItem {
	padding-top:3px;
	padding-bottom:2px;
	padding-left:5px;
	padding-right:5px;
	margin-top:6px;
	margin-bottom:2px;
	border-radius:5px;
	display:block;
	min-height:15px;
	height:15px;
}
.detailsItemLarge {
	height:45px;
}
.detailsItemXLarge {
	height:90px;
}
.detailsItemXXLarge {
	height:300px;
}
.detailsItemHeading {
	float:left;
	width:90px;
}
.detailsItemValue {
	float:left;
	font-weight:700;
	padding-right:10px;
	white-space: nowrap;
	overflow:hidden;
}
.detailsItemValue td {
}
.detailsItemClassName {
	float:left;
	font-weight:700;
}
.detailsItemClassItemWeek {
	float:left;
	width:40px;
	padding-right:10px;
}
.detailsItemClassItemDay {
	float:left;
	width:40px;
}
.detailsItemClassItemPeriod {
	float:left;
	width:25px;
}
.detailsItemDeleteClass {
	padding-left:4px;
	padding-right:4px;
	width:30px;
	float:left;
}

.classItemTeachers {
	float:left;
	width:160px;
}

.classItemClass {
	float:left;
	font-weight:700;
	width:80px;
}

.classItemAttendance {
	float:left;
	font-weight:700;
}

.classRow {
	padding-left:5px;
	padding-right:15px;
	padding-bottom:5px;
	float:left;
	width:330px;
}
/* Data Grid Elements */

/* Data Grid */
.dataGridTitle {
	float:left;
	clear:both;
	height:auto;
	overflow:hidden;
	padding:0px;
	text-align:center;
	vertical-align:central;
	width:100%;
	padding-top:3px;
	padding-bottom:3px;
}
.gridFrame {
	width:100%;
}
.gridScroll {
	overflow-y:scroll;
	overflow-x:none;
	width:inherit;
}
.gridHeight {
	height:400px;
}
.gridItem {
	line-height:20px;
	float:left;
}

.wrapping {
  word-wrap:  break-word;
  overflow:hidden;
  height:auto;
  line-height:auto !important;
  text-align:left;
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}

.button {
	margin-top:2px;
	margin-bottom:2px;
	padding-top:3px;
	padding-bottom:1px;
	padding-left:6px;
	padding-right:6px;
	border-radius:5px;
	float:left;
	cursor:pointer;
	margin-left:10px;
}

.multiInput {
	width:300px;
	margin-left:20px;
	margin-bottom:10px;
}

.infoNewRow {
	clear:both !important;	

}

.detailsSection .button {
	margin:auto;
}
.dropDown {
	margin-top:3px;
	border: none;
	padding: 1px 8px 2px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
}
.textBox {
	margin-top:3px;
	border: none;
	padding: 1px 8px 2px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
}

.gridRow {
	float:left;
	clear:both;
	padding-top:5px;
}
.fillWidth {
	width:100%;
}
.dataGridColumn {
	float:left;
	line-height:23px;
	min-height:23px;
	vertical-align:central;
}
.dataGridIndicator {
	padding-left:10px;
	margin-top:8px;
	margin-bottom:-3px;
}
.dataGridRegisterInput {
	padding-top:4px;
	max-width:30px;
}
.dataGridRegisterInput input {
	width:16px;
	border:none;
	outline:none;
	padding-left:6px;
}
.dataGridCheckBox {
}
.Notification {
	border-radius:5px;
	padding:3px;
	padding-left:7px;
	padding-right:7px;
	border:#fff 2px solid;
	margin-top:9px;
}
.indicatorGradeHolder, .indicatorFlagHolder, .registerCheckBox {
	padding-top:5px;
	margin-left:4px;
}
.indicatorFlag {
	line-height:12px;
	text-align:center;
	vertical-align:middle;
	border-radius:4px;
	border:#000 2px solid;
	padding-left:3px;
	padding-right:3px;
	margin-left:3px;
	margin-right:3px;
	margin-bottom:5px;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:5px;
	padding-right:5px;
}
.indicatorGrade {
	height:15px;
	line-height:15px;
	text-align:center;
	vertical-align:middle;
	border-radius:4px;
	border:#000 1px solid;
	padding-left:4px;
	padding-right:4px;
	margin-left:2px;
	margin-right:2px;
}
.dataGridTopRadius {
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.dataGridBottomRadius {
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
.PhotoRow {
	padding-top:10px;
	padding-bottom:10px;
}
.PhotoRow img {
	margin-top:10px;
	margin-left:0px;
}
/* Filter Section and Left Column */



.filterBlock {
	border:#588825 1px solid;
	display:block;
	border-radius:5px;
	float:left;
	clear:both;
	width:100%;
}
.filterBlockTitle {
	width:inherit;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border:none;
	float:left;
	clear:both;
	padding-top:1px;
	padding-bottom:1px;
	text-align:center;
	font-weight:500;
}
.filterBlockAsLink {
	padding-top:10px;
	padding-bottom:10px;
	cursor:pointer;
}
.filterBlockRow {
	float:left;
	clear:both;
	width:100%;
	text-align:left;
}
.filterCheckBoxList {
	margin-left:10px;
	padding-bottom:4px;
	float:left;
}
.filterCheckBox input, .filterCheckBox label {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
}
/* Progress Grid */

.progressGrid {
	width:100%;
	height:auto;
	overflow:hidden;
	float:left;
	font-size:9px;
}
.progressGridNamesColumn {
	width:300px;
	float:left;
	padding-left:10px;
	overflow:hidden;
}
.progressGridNamesHeader {
	width:100%;
	float:left;
	padding-left:10px;
	padding-top:65px;
	line-height:15px;
}
.progressGridRow {
	line-height:20px;
	max-height:20px;
	width:100%;
	float:left;
}
.progressGridAltRow {
}
.progressGridDataSection {
	width:580px;
	float:left;
	overflow-x:auto;
}
.progressGridDataSectionHeader {
	float:left;
}
.progressGridRowHeaderNameColumn {
	width:110px;
	float:left;
}
.progressGridRowHeaderClassColumn {
	width:70px;
	float:left;
}
.progressGridRowHeaderTeacherColumn {
	width:110px;
	float:left;
}
.progressInputSelector, .progressInputSelectorBlank, .progressInputSelectorComplete {
	height:16px;
	margin-top:2px;
	margin-bottom:2px;
	border:none;
	border-radius:3px;
}
.progressReportFeedback {
	float:left;
	padding-left:10px;
	padding-right:10px;
	padding-top:2px;
	padding-bottom:2px;
	background-color:#F90;
	color:#000;
	font-size:12px;
	border-radius:5px;
	border:#000 1px solid;
	margin-left:10px;
	margin-top:4px;
}
.progressLinks {
	position:fixed;
	display:block;
	float:left;
	border:#000 0px solid;
	border-radius:10px;
	width:180px;
	top:115px;
}
.progressLinksLabel {
	width:200px;
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
	height:25px;
	line-height:25px;
	vertical-align:central;
	border:#000 1px solid;
	border-radius:10px;
	cursor:pointer;
}
/* Headers */


.slant {
	height: 80px;
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	position: relative;
	vertical-align: bottom;
	padding: 0;
	font-size: 10px;
	line-height: 0.8;
	text-align:center;
}
.slant > div {
	position: relative;
	top: 0px;
	left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
	height: 100%;
	-ms-transform:skew(-45deg, 0deg);
	-moz-transform:skew(-45deg, 0deg);
	-webkit-transform:skew(-45deg, 0deg);
	-o-transform:skew(-45deg, 0deg);
	transform:skew(-45deg, 0deg);
	overflow: hidden;
}
.slant span {
	-ms-transform:skew(45deg, 0deg) rotate(315deg);
	-moz-transform:skew(45deg, 0deg) rotate(315deg);
	-webkit-transform:skew(45deg, 0deg) rotate(315deg);
	-o-transform:skew(45deg, 0deg) rotate(315deg);
	transform:skew(45deg, 0deg) rotate(315deg);
	position: absolute;
	bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
	left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
	display: inline-block;
 // width: 100%;
	width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
	text-align: left;
 // white-space: nowrap;
}
/* Tutor Register */



.tutorBlankRegister, .tutorRegisterDayHeader {
	width:130px;
}
.tutorRegisterNameColumn {
	width:190px;
	padding-left:10px;
	padding-top:3px;
}
.tutorBlankRegister {
	height:26px;
	float:left;
	margin-top:2px;
	margin-bottom: 2px;
}
.tutorRegisterDayHeader {
	line-height:20px;
	height:20px;
	text-align:center;
	vertical-align:middle;
	height:40px;
	float:left;
	margin-top:2px;
	margin-bottom: 2px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
.tutorRegisterBlock {
	float:left;
	display:block;
	height:26px;
	line-height:26px;
	margin-bottom:2px;
	text-align:center;
	vertical-align:central;
}
.tutorRegisterDayHeaderSpacer {
	width:5px;
	height:15px;
	display:block;
	float:left;
}
.registerChangeMarkInput {
	padding: 3px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
	margin-top:4px;
	width:140px;
	margin-left:5px;
}
.registerInputBlank, .registerInputValidated, .registerInputError, .registerInputLocked {
	padding-left:4px;
	padding-right:3px;
	padding-top:1px;
	padding-bottom:1px;
	border-radius:5px;
	font-size:12px;
	font-weight:600;
	border:1px solid #000;
	float:left;
	width:18px;
	text-align:center;
}
/* Class Information Register Section */
.classRegisterNameCol {
	width:200px;
	float:left;
}
.classRegisterDataCol {
	width:410px;
	float:left;
}
.classRegisterCol {
	width:14%;
	float:left;
}
.classRegisterFrame {
	width:100%;
}
.classRegisterSegment {
	width:100%;
}
.classRegisterRow {
	height:20px;
}
.classRegisterRowPadding {
	padding-left:10px;
}
.classRegisterRowHeader {
	height:20px;
	width:200px;
	line-height:20px;
	text-align:left;
	vertical-align:central;
}
.classRegisterColHeader {
	height:60px;
}
.classRegisterWeekIdent {
	width:100%;
	text-align:center;
}
.classRegisterDate {
	width:100%;
	text-align:center;
}
.classRegisterDay {
	width:100%;
	text-align:center;
}
.classRegisterPeriod {
	width:100%;
	text-align:center;
}
.cell {
	width:100%;
	height:20px;
	line-height:20px;
	text-align:center;
	vertical-align:central;
	cursor:pointer;
}
/* Note Section */


.noteSectionItem, .noteSectionItemRed {
	margin-left:2px;
	width:98%;
	height:auto;
	overflow: auto;
	border-radius:5px;
	margin-top:3px;
	margin-bottom:3px;
	display:none;
}
.noteSectionItemCollapsed, .noteSectionItemCollapsedRed {
	margin-left:2px;
	width:540px;
	height:auto;
	overflow: auto;
	border-radius:5px;
	margin-top:3px;
	margin-bottom:3px;
	display:block;
}
.noteSectionItemTitleHolderCollapsed {
	width:300px;
	height:35px;
	top:0px;
	left:30px;
	position:inherit;
	float:left;
	overflow:auto;
	display:block;
}
.noteSectionIconCollapsed {
	width:520px;
	height:25px;
	margin:2px;
}
.noteSectionItem {
}
.noteSectionSideBar {
	width:30px;
	min-height:auto;
	top:0px;
	left:0px;
	position:inherit;
	float:left;
}
.noteSectionItemRed {
}
.noteSectionItemTitleHolder {
	width:550px;
	min-height:60px;
	top:0px;
	left:30px;
	position:inherit;
	float:left;
	overflow:auto;
}
.noteSectionItemTitle, .noteSectionItemTitleRed {
	border-radius:3px;
	margin:2px;
	margin-left:4px;
	height:25px;
	line-height:25px;
	verticle-align:middle;
	width:500px;
	float:left;
	text-align:center;
}
.noteSectionItemTitleRed, .noteSectionTitleContentRed {
}
.noteSectionItemTitle, .noteSectionTitleContent {
}
.noteSectionTitleContent, .noteSectionTitleContentEdit, .noteSectionTitleContentRed, .noteSectionTitleContentRedEdit {
	margin-top:3px;
	border:none;
	text-align:center;
	outline: none;
	width:450px;
	height:20px;
	border-radius:3px;
}
.noteSectionTitleContentEdit, .noteSectionTitleContentRedEdit, .noteSectionDescriptionContentEdit, .noteSectionDescriptionContentRedEdit {
}
.noteSectionIcon {
	width:25px;
	height:25px;
	margin:2px;
}
.noteSectionActionIcon {
	width:25px;
	height:25px;
	margin:2px;
	cursor:pointer;
}
.noteSectionDescriptionHolder {
	width:490px;
	float:left;
	padding:10px;
}
.noteSectionDescriptionContent, .noteSectionDescriptionContentRed, .noteSectionDescriptionContentEdit, .noteSectionDescriptionContentRedEdit {
	width:485px;
	height:70px;
	font-size:10px;
	border-radius:3px;
	outline: none;
	border:none;
}
.noteSectionDescriptionContentRed {
}
.noteSectionDescriptionContent {
}
.noteSectionFooter {
	width:540px;
	height:15px;
	left:0px;
	float:left;
}
.noteSectionFooterLeft {
	float:left;
	padding-left:10px;
}
.noteSectionFooterRight {
	float:right;
	padding-right:10px;
}
/* Timetable section */


.timetableHeader {
	width:100%;
	text-align:center;
	padding-top:3px;
	padding-bottom:10px;
}
.timetableColumn {
	width:16%;
	float:left;
}
.timetableColumnHeader {
	width:100%;
	height:20px;
	text-align:center;
	padding-top:3px;
	padding-bottom:10px;
}
.timetableRowHeader {
	width:100%;
	height:40px;
	line-height:40px;
	vertical-align:central;
	display:block;
	text-align:center;
	padding-top:5px;
}
.timetableSegment {
	width:100%;
	height:40px;
	display:block;
	overflow:hidden;
	text-align:center;
	padding-top:5px;
}
.timetableSegment .bold {
}
.timetableSegment .site {
}
/* Student Contacts */

.contactsSectionContent {
}
.contactsSection {
	left:210px;
	height:210px;
	display:block;
	position:absolute;
}
.contactSectionHeight {
	height:185px;
}
.contactsSectionHome {
	width:261px;
	padding:0px;
	vertical-align:middle;
	padding-left:10px;
	height:auto;
}
.contactsSectionWork {
	width:252px;
	padding:0px;
	vertical-align:middle;
	padding-left:10px;
	padding-right:10px;
	height:auto;
	padding-bottom:5px;
}
.contactsSectionContent {
	border-radius:5px;
	padding:5px;
	padding-top:2px;
	margin-bottom:5px;
}

/* Student Attendance */

.attendanceGrid td span {
	font-size: 9px;	
}

.attendanceGrid td {
	font-size: 10px;
	border-bottom:#000 1px solid;
	padding-left:2px;
	padding-right:2px;	
	text-align:center;
	cursor:pointer;
}

.attendanceGrid th {
	font-size:9px;
	font-weight:bold;
}

.attendanceGrid table {
	width:300px;
	background-color:#fff;
	border-radius:5px;
	margin-left:20px;
	margin-top:15px;
	
}

/* Overlay Control */

.fadeOverlay {
	z-index:99;
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	display:block;
	background-color:#fff;
	opacity:0.8;
}

.fadeOverlayHolder {
	z-index:99;
	position:absolute;
	top:0px;
	left:0px;
	height:100vh;
	width:100%;
	display:block;
}
.centeredBox {
	margin: 0;
  	position: absolute;
	display:block;	
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius:10px;
		height:auto;
	width:400px;
	border:#000 2px solid;
	

}

.centeredBox .informationPanel {
	margin-top:0px !important;
	margin-bottom: 0px !important;	
}

.detailsItemValue i  {
	font-size:12px;
	padding-top:2px;
	padding-right:3px;

}

/* Roadmap Display */

.taskTable {
	width:100%;	
	color:#000;
	font-size:9px;
}

.taskTable table {
	font-size:9px;
	padding:0px;
	margin:0px;
	border-collapse: collapse; 
	text-align:center;
    table-layout : fixed;
}

.taskTable th {
  height: 80px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 10px;
  line-height: 0.8;
  text-align:center;
}

.taskTable th > div{
   position: relative;
  top: 0px;
  left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  -ms-transform:skew(-45deg,0deg);
  -moz-transform:skew(-45deg,0deg);
  -webkit-transform:skew(-45deg,0deg);
  -o-transform:skew(-45deg,0deg);
  transform:skew(-45deg,0deg);
  overflow: hidden;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}

.taskTable th  span {
   -ms-transform:skew(45deg,0deg) rotate(315deg);
  -moz-transform:skew(45deg,0deg) rotate(315deg);
  -webkit-transform:skew(45deg,0deg) rotate(315deg);
  -o-transform:skew(45deg,0deg) rotate(315deg);
  transform:skew(45deg,0deg) rotate(315deg);
  position: absolute;
  bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
  left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
  // width: 100%;
  width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
  // white-space: nowrap; 
}



.taskTable tr {
	padding:0px;
	margin:0px;
}

.taskTable td {
	font-size:9px;
	border:#dddddd 1px solid;
	padding:0px;
	margin:0px;
	text-align:center;
}

.taskTable .icon td,.taskTable .icon th  {
	width:15px !important;
}

/* fire register */
.fireRegisterCheckBox {
	max-height:10px;
	width:10px;
	height:10px;
	padding:5px;
	border: #000 1px solid; 
	line-height:10px;
	vertical-align:central;
	text-align:center; 
	font-size:14px;
	font-weight:600;	
	margin-left:10px;
	margin-right:17px;
	min-height:0px;

}

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}