/*
    Metacom impersonation CSS
    IMC 16 Oct 2013
*/

body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    color: #333333;
}

.metacomEmbedStyleNoBox
{
position: relative;
z-index: 1;
background-position: 0% 0%;
font-family: Arial;Helvetica;sans-serif;
text-align: left;
padding-bottom: 12px;
margin-bottom: 15px;
padding-top: 0px;
margin-top: 0px;
padding-left: 0px;
margin-left: 0px;
padding-right: 0px;
margin-right: 0px;
font-size: 12px;
}

.metacomEmbedStyleNoBox H4
{

font-size: 14.6667px;
font-weight: 400;
color:#013E7F;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
margin: 0px;
}

.metacomEmbedStyleNoBoxBody
{
  padding-left:10px;
  padding-right:10px;
  margin-bottom: 16px;
  font-size: 12px;
}

.metacomEmbedBox
{
  border-bottom: 1px solid #9999CC;
  position: relative;
  z-index: 1;
  background-position: 0% 0%;
  font-family: Arial;Helvetica;sans-serif;
  text-align: left;
  padding-bottom: 5px;
  margin-bottom: 0px;
  padding-top: 0px;
  margin-top: 0px;
  padding-left: 0px;
  margin-left: 0px;
  padding-right: 0px;
  margin-right: 0px;
  font-size: 12px;
}

.metacomEmbedBox H4
{

font-size: 14.6667px;
font-weight: 400;
color:#013E7F;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
margin: 0px;
}

.metacomEmbedBoxBody
{
  padding-left:5px;
  padding-right:5px;
  margin-bottom: 5px;
  font-size: 12px;
}

.metacomEmbedBoxBodyDates {
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 7px;
	margin-bottom: 7px;
	font-size: 12px;
}

.metacomBoxIndent
{
  padding-left:10px;
  padding-right:10px;
}

.metacomEmbedBoxTable
{
  border-collapse:collapse;
  font-size: 12px;
  font-family: Arial;Helvetica;sans-serif;
}

.metacomEmbedBoxTable, .metacomEmbedBoxTable TH, .metacomEmbedBoxTable TD
{
  border: 1px solid #9999CC;
}

.metacomEmbedBoxTableNoBorder
{
  border-collapse:collapse;
}

.metacomEmbedBoxTableNoBorder, .metacomEmbedBoxTableNoBorder TH, .metacomEmbedBoxTableNoBorder TD
{
  border: 0px;
}

.fixedPageHeader
{
  top: 0;
  width: 100%;
  left: 0;
  padding: 0;
  /*position:fixed;*/
  margin-bottom: 10px;
  z-index:999;
  background-color: #FFFFFF;
}

.metacomEmbedNav
{
  width: 100%;
  float: left;
  left: 0;
  top: 84px;
  padding-left: 100px;
  padding-right: 100px;
  position:fixed;
  margin-bottom: 10px;
  z-index:999;
}
.metacomEmbedNav ul
{
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.metacomEmbedNav li
{
  float: left;
}
.metacomEmbedNav li a
{
  display: block;
  padding-top: 6px;
  padding-bottom: 1px;
  padding-left: 5px;
  padding-right: 20px;
  text-decoration: none;
  color: white;
  font-size: 12px;
  font-family: Arial;Helvetica;sans-serif;
  border-bottom: 5px solid black;
}

.metacomEmbedNav  ul li ul
{
  width:auto;
  display: none;
  float: none;
  position: absolute;
  top: 29px;
  left 0px;
  z-index:99999;
}
.metacomEmbedNav ul li:hover ul
{
  width:auto;
  display: block; /* display the dropdown */
  float: none;
}

.metacomEmbedNav ul li:hover ul li
{
  width:auto;
  display: block; /* display the dropdown */
  float: none;
}

.metacomEmbedNav  ul li ul li
{
  width:auto;
  display: none;
  float: none;
  z-index:99999;

}

.metacomEmbedNav input
{
  text-decoration: none;
  font-weight: 700;
  color: #333333;
  font-size: 11px;
  font-family: Arial;Helvetica;sans-serif;
}
.metacomEmbedNav li a:hover
{
  color: white;
}

.metacomEmbedSubNav
{
  width: 100%;
  float: left;
  padding: 0;
  background-color: #cccccc;
  margin-bottom: 10px;
}
.metacomEmbedSubNav ul
{
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.metacomEmbedSubNav li
{
  float: left;
  width: 100px;
}
.metacomEmbedSubNav li a
{
  display: block;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
  font-weight: 400;
  color: #333333;
  font-size: 11px;
  font-family: Arial;Helvetica;sans-serif;
}
.metacomEmbedSubNav li a:hover, .metacomEmbedSubNavSelected
{
  color: #d4470f;
  background-color: white;
}
.fixedwidth li
{
  width: 100px;
}

.metacomEmbedFooter
{
font-family: Arial;Helvetica;sans-serif;
font-size: 12px;
}

.metacomEmbedBanner
{
font-family: Arial;Helvetica;sans-serif;
font-size: 12px;
background: yellow;
}

.metacomEmbedBoxTable td, .metacomEmbedBoxTable th
{
  padding-left: 5px;
  padding-right: 5px;
}
.metacomEmbedBoxTable th
{
  padding-top: 2px;
  padding-bottom: 2px;
}
.metacomEmbedBoxTable td
{
  padding-top: 1px;
  padding-bottom: 1px;
}

.metacomEmbedBoxTable .admin
{
  background-color: #CCCCE6;
}

.metacomEmbedTopHeader
{
  width: 100%;
  float: left;
  left: 0;
  top:113px;
  padding-left: 100px;
  padding-right: 100px;
  position:fixed;
  background-color: white;
  margin-bottom: 5px;
  z-index:999;
  border-bottom: 1px solid #9999CC;
  /* position:fixed; /* IMC added */
}

.metacomEmbedTopHeader H1
{
  font-size: 18px;
  font-weight: 200;
  color: #013E7F;
  font-family: Arial;
  margin: 2px;
  margin-bottom: 5px;
  display:inline-block;
}

.metacomEmbedTopHeader .pageControls
{
  display:inline-block;
  float: right;
  margin-top: 5px;
  margin-right: 20px;
}

.metacomEmbedHeader
{
  width: 100%;
  float: left;
  left: 0;
  top: 153px;
  padding-left: 100px;
  padding-right: 100px;
  background-color: white;
  margin-bottom: 10px;
  z-index:999;
  border-bottom: 1px solid #9999CC;
}

.metacomEmbedHeader H1
{
  font-size: 18px;
  font-weight: 200;
  color: #013E7F;
  font-family: Arial;
  margin: 2px;
  display:inline-block;
}

.metacomEmbedHeader H2
{
  font-size: 16px;
  font-weight: 200;
  color: #013E7F;
  font-family: Arial;
  margin: 2px;
  display:inline-block;
}

.metacomEmbedHeader H3
{
  font-size: 15px;
  font-weight: 200;
  color: #013E7F;
  font-family: Arial;
  margin: 2px;
  display:inline-block;
  margin-top:10px;
}

.loginInfo
{
  display: block;
  float: right;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 15px;
  padding-right: 15px;
  font-weight: 200;
  color: White;
  font-size: 11px;
  font-family: Arial;Helvetica;sans-serif;
}

.testSystem
{
  color:Black;
  padding: 1px 1px 1px 1px;
  font-weight: 700;
  background-color: Yellow;
  border: 2px solid black;
}

/* Whereabouts specific styles */

.metacomEmbedBoxTableSmall
{
  border-collapse:collapse;
  font-size: 12px;
  font-family: Arial;Helvetica;sans-serif;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.metacomEmbedBoxTableSmall, .metacomEmbedBoxTableSmall TH, .metacomEmbedBoxTableSmall TD
{
  border: 1px solid #9999CC;
}

.metacomEmbedBoxTableSmall td, .metacomEmbedBoxTableSmall th
{
  padding-left: 0px;
  padding-right: 0px;
}
.metacomEmbedBoxTableSmall th
{
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #E0E0F0 ;
}
.metacomEmbedBoxTableSmall td
{
  padding-top: 0px;
  padding-bottom: 0px;
}

.metacomEmbedBoxTableSmall input, p
{
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.metacomEmbedBoxTableSmall .admin
{
  background-color: #CCCCE6;
}

body
{
  margin: 0;
  padding: 0;
}


#body
{
  margin-top: 133px;
  padding-left: 100px;
  padding-right: 100px;
}

.highlightBanner {

  border:1px solid black;
  background-color: Yellow;
  font-size:larger;
  padding:5px;
  margin-top:5px;
}

.error
{
  color: red;
}

.error INPUT
{
  color:Red;
}

DIV.error
{
  margin: 3px;
  border: 2px solid red;
  padding: 3px;
}

.stateIN
{

}

/* Split (am/pm) day cells: each half fills its side of the cell so both
   state colours are shown edge to edge (and top to bottom) instead of only
   behind the text. The inner flex div (not the td itself) does the layout so
   the table cell keeps its normal sizing. */
td.splitDayCell
{
  padding: 0;
  height: 1px; /* lets the child div resolve height:100% to the cell height */
}

td.splitDayCell > .splitDay
{
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.splitDay > .amHalf,
.splitDay > .pmHalf
{
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 3px 5px;
}

.stateHOME
{
  background-color: #ccffff;
}
.stateALAMEDA,
.stateCHESTER,
.stateCOVENTRY,
.stateEDINBURGH,
.stateENFIELD,
.stateCAMBRIDGE,
.stateOSLO,
.statePALOALTO,
.stateRESTON,
.stateRICHARDSON,
.stateSF,
.stateBOCA,
.stateDALLAS,
.stateDENVER,
.stateHIGHGATE,
.stateLATE-SHIFT,
.stateES, 
.stateBELFAST, 
.stateLOSALTOS, 
.stateMEXICOCTY, 
.stateWELLINGTON,
.stateKUALALUM
{
  background-color: #99ffff;
}

.stateLATE-SFT,
.stateEARLY-SFT 
{
  background-color: #fffdd0;
}

.stateCOURSE,
.stateCUSTOMER,
.stateCONFRNCE,
.stateTRAVEL
{
  background-color: #ffdd88;
}

.stateMORALE,
.stateSICK,
.stateBANKHOL,
.stateHOLIDAY,
.stateHOLIDAYNZ,
.stateOFF-PT,
.stateS12,
.stateOFF-SHF,
.stateOFF-SFT,
.stateOUT,
.stateJURY,
.stateCARE-BFT {
    background-color: #ffbbbb;
}

.stateSABBATCL,
.stateMATERNITY 
{
  background-color: #ff7777;
}

.statePATERNTY
{
  background-color: #ffbbbb;
}

.noBorder
{
  border-style:none !important;
  border:0px;
}

.amCol
{
        border-left-width: 2px;
}
.pmCol
{
        border-right-width: 2px;
}

.endOfWeek
{

        border-right: solid 3px #9999CC !Important;
}

.tblControls td
{
  vertical-align:middle;
  padding-right:30px;
}

.tblControls td label
{
  vertical-align:middle;
}

#calControls DIV
{
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  display: inline-block;
}

#controlToday,
#controlPrev,
#controlNext,
#controlPrevDay,
#controlNextDay,
#controlDateRange,
#controlPrev2,
#controlNext2,
#controlDateRange2,
#controlWeekMonth,
#controlDate,
#divWeekOuter,
#divMonthOuter,
#divThreeMonthOuter,
#upcoming2Months,
#upcoming6Months,
#upcoming12Months,
#upcomingDateRange,
#editUsual,
#editDateRange,
#editSpecificWeek
{
  display:inline;
  border-color: red;
  border-style: solid;
  padding: 7px 7px 7px 7px;
}

#controlDateRange,
#controlDateRange2,
#upcomingDateRange
{
  color: White;
}

#controlToday,
#controlDateRange,
#controlWeekMonth,
#controlDate,
#divWeekOuter,
#divMonthOuter,
#divThreeMonthOuter,
#divWeekOuter,
#divMonthOuter,
#divThreeMonthOuter,
#upcomingTitle,
#upcoming2Months,
#upcomingDateRange,
#editUsual
{
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
  border-top-width: 1px;
}

#controlWeekMonth,
#controlDate,
#controlDateRange,
#controlDateRange2,
#divWeekOuter,
#upcomingDateRange
{
  margin-left: 10px;
}


#controlPrev,
#controlPrev2
{
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
  border-top-width: 1px;
  margin-left: 10px;
}

#controlNext,
#controlPrevDay,
#controlNextDay,
#controlNext2,
#upcoming6Months,
#upcoming12Months,
#editDateRange,
#editSpecificWeek
{
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-left-width: 0px;
  border-top-width: 1px;
}

#divWeekOuter.selected A,
#divMonthOuter.selected A,
#divThreeMonthOuter.selected A,
#upcoming2Months.selected A,
#upcoming6Months.selected A,
#upcoming12Months.selected A,
#upcomingDateRange.selected A,
#editUsual.selected A,
#editDateRange.selected A,
#editSpecificWeek.selected A
{
  text-decoration: none;
  color: White;
}

#divWeekOuter A,
#divMonthOuter A,
#divThreeMonthOuter A,
#upcoming2Months A,
#upcoming6Months A,
#upcoming12Months A,
#upcomingDateRange A,
#editUsual A,
#editDateRange A,
#editSpecificWeek A
{
  text-decoration: none;
  color: Gray;
}

#divSummaryTable {
  margin-top: 20px;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: visible;
  padding: 0px;
}

table.simpleTable
{
  border: 1px solid black;
  color: black;
}

.simpleTable th
{
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-top-width: 0;
  border-bottom-width: 0;
  background: white;
  padding: 1px 3px 1px 3px;
}

.simpleTable td
{
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-top-width: 0;
  border-bottom-width: 0;
  padding: 1px 3px 1px 3px;
}

#upcomingControls
{
  margin-top: 5px;
}
#upcomingChanges
{
  margin-top: 15px;
}
#upcomingBankHols
{
  margin-top: 10px;
}
#editControls
{
  padding-top: 10px;
  margin-bottom: 15px;
}

#topRightIcons
{
  float: right;
  padding-right: 15px;
  cursor: pointer;
}

.pageControls .glyphicon
{
  color: Black;
}

#lookupInitials
{
  padding-top: 4px;

}

#lookupInitials A
{
  display: inline;
  padding-left: 0px;
}

.paraEndMargin
{
  margin-bottom:10px;
}

.datePartSelect
{
  display: inline-block;
}

.datePartSelect DIV
{
  display: inline;
  float:left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.datePartSelect DIV
{
  padding: 3px 3px 3px 3px;
  border-style: solid;
  border-color: black;
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-left-width: 0px;
  border-right-width: 1px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  color: Gray;
}

.datePartSelect .first
{
  border-left-width: 1px;
}

.datePartSelect .selected
{
  color: White;
}

#tblSetDateRangeChange TD INPUT
{
  position:relative;
  top: -5px;
}

#tblSetDateRangeChange TD INPUT,
#tblSetDateRangeChange TD SELECT
{
  margin-left: 3px;
}

#tblSetDateRangeChange TD .datePartSelect
{
  position:relative;
  top: +4px;
  margin-right: 7px;
}

@media print
{
  .fixedPageHeader, .dailyWhereaboutsControls
  {
    display: none;
  }

  a:link:after
  {
    content: "";
  }

  #body
  {
    margin-top: 0px;
  }

}
/*
.highlight
{
  background: #b3cde3;
}*/

.relationChange {
  border-top: solid 3px #FFCCBC !important;
}

.noWrap
{
  white-space:nowrap;
}

.errorMessage {
  background: #FFFF00;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* The individual-days navigation lays prev/next out with a flex gap, so they are
   no longer adjacent. Restore the left border on the next control that the shared
   rule removes for the flush prev/next pairing used elsewhere. */
#dayControls #controlNext
{
  border-left-width: 1px;
}