body {
    font-family:Segoe UI;
    font-size:small;
}

/* The Standard Desktop Container*/
.desktopContainerDiv {
    background-color:#C4D5E9;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    border-radius: 10px;
    border-collapse: separate;
    margin: 20px auto;
    text-align:center;
    min-height:100px;
    padding:20px;
}

#desktopAttendanceDiv 
{
    width:1200px;
}

#desktopClockInDiv 
{
    width:400px;
}

#desktopWeeklyReportDiv
{
    width:800px;
}

#desktopAlertDiv, #desktopConfirmationDiv, #desktopWhosInDiv
{
    width:600px;
}

#desktopOptionsDiv
{
    width:600px;
}

.standardButton 
{
    width:100px;
    height:35px; 
    margin-left:10px;
}

.layoutTable 
{
    text-align:center;  
    margin-left:auto;
    margin-right:auto;
}

.clockInTable 
{
    text-align:center;  
    width:60%;
    margin: 20px auto;
    height:300px;
}

.allowancePanel {
    background-color: white;
    padding: 10px;
}

.allowanceTable {
    border-collapse: collapse;
    background-color: #EEEEEE;
}

.allowanceButton {
    position: relative;
    left: -542px;
    top: -795px;
    padding: 8px;
}

.allowanceTable td, th {
    padding: 2px;
    border: 1px solid grey;
    font-size: small;
    padding: 5px;
}

    .allowanceTable td:nth-child(1) {
        text-align: right;
        background-color: #EEEEEE;
    }

    .allowanceTable td:nth-child(2) {
        text-align: left;
        background-color: #FFFFE0;
    }

    .allowanceTable td:nth-child(3) {
        text-align: left;
        background-color: white;
    }

    .allowanceTable td:nth-child(4), .allowanceTable td:nth-child(5), .allowanceTable td:nth-child(6) {
        text-align: right;
        background-color: #FFFFE0;
    }

/* General Table Styles*/
.tableDataRow
{
    height:80%;  
    display: table-cell;
    vertical-align:middle;
}

.leftAlignRow
{
    text-align:left;
    vertical-align:middle;
}

.topLeftAlignRow
{
    text-align:left;
    vertical-align:top;
}

.centraliseRow
{
    text-align:center;
    vertical-align:middle;
}

.rightAlignRow
{
    text-align:right;
    vertical-align:middle;
}



/* Default Styles For GridView Controls*/
.gridStyle      
{
    width:100%;
    background-color: #fff;   
    border: solid 1px #525252;   
    border-collapse:collapse;   
}  
.gridStyle td {   
    padding: 2px;   
    border: solid 1px #C1C1C1;   
    cursor:default;
}  

.gridStyle th {   
    padding:  4px 2px;   
    color: #fff;   
    background: #424242;
    border-left: solid 1px #525252;   
    font-size: 0.9em;  
}  
      
.gridSelectedRow {
    color:White;
    background-color:#3399FF;
}

.gridStyle tr.rowHover:hover {
    background-color: #EEEEEE;

}





/* Default Page */
#desktopDefaultDiv 
{
    width:800px;
}

#lblStatusBar {
    text-align:left;
    left:0px !important ;
}

.optionsButton
{
    color:black;
    text-decoration:none;
    border:solid 1px #525252;
    background-color:#EEE;
    margin-right:10px;
    padding-left:5px;
    padding-right:5px;
    border-radius: 4px;
    vertical-align:middle;
}

/* Buttons on the Default Page*/
.toolStripButton {
	width: 68px;
	height: 58px;
	background-color:transparent;
    border:none;
    padding-top:34px;
}

.toolStripWideButton {
	width: 83px;
	height: 58px;
	background-color:transparent;
    border:none;
    padding-top:34px;
}

.reportButton {
	width: 160px;
	height: 30px;
	background-color:transparent;
    border:none;
    margin-top:1px;
    text-align:left;
}

#btnClockIn {
    background: url('/Images/ClockInTriButton.png') bottom;
}

#btnClockOut {
    background: url('/Images/ClockOutTriButton.png') bottom;
}

#btnPayCategory {
    background: url('/Images/PayCatTriButton.png') bottom;
}

#btnJobChange {
    background: url('/Images/JobTriButton.png') bottom;
}

#btnBreak {
    background: url('/Images/BreakTriButton.png') bottom;
}

#btnLunch {
    background: url('/Images/LunchTriButton.png') bottom;
}

#btnReports {
    background: url('/Images/ReportsTriButton.png') bottom;
}

#btnAttendance {
    background: url('/Images/AttendanceTriButton.png') bottom;
}

#btnNew {
    background: url('/Images/NewTriButton.png') bottom;
}

#btnRefresh {
    background: url('/Images/RefreshTriButton.png') bottom;
}

#btnBack {
    background: url('/Images/BackTriButton.png') bottom;
}

#btnPrev {
    background: url('/Images/PrevTriButton.png') bottom;
}

#btnNext {
    background: url('/Images/NextTriButton.png') bottom;
}

#btnClockIn[disabled="disabled"], #btnClockOut[disabled="disabled"], #btnPayCategory[disabled="disabled"], #btnJobChange[disabled="disabled"], #btnBreak[disabled="disabled"], #btnLunch[disabled="disabled"], #btnReports[disabled="disabled"], #btnAttendance[disabled="disabled"], #btnNew[disabled="disabled"], #btnRefresh[disabled="disabled"], #btnBack[disabled="disabled"], #btnPrev[disabled="disabled"], #btnNext[disabled="disabled"] {
	background-position: 0 0 !important; 
	cursor:default !important;
}

#btnClockIn:hover, #btnClockOut:hover, #btnPayCategory:hover , #btnJobChange:hover , #btnBreak:hover , #btnLunch:hover , #btnReports:hover , #btnAttendance:hover , #btnNew:hover , #btnRefresh:hover, #btnBack:hover, #btnPrev:hover, #btnNext:hover {
	background-position: 0 -58px;
    cursor: pointer;
}

#btnWeeklyReport {
    background: url('/Images/ReportTriButton.png') bottom;
}

#btnFlexiSummaryReport {
    background: url('/Images/ReportTriButton.png') bottom;
}

#btnWhosIn {
    background: url('/Images/ReportTriButton.png') bottom;
}

#btnWeeklyReport[disabled="disabled"], #btnFlexiSummaryReport[disabled="disabled"], #btnWhosIn[disabled="disabled"] {
	background-position: 0 0 !important; 
	cursor:default !important;
}

#btnWeeklyReport:hover , #btnFlexiSummaryReport:hover , #btnWhosIn:hover {
	background-position: 0 -30px;
    cursor: pointer;
}





.reportTitle
{
    font-size:large;
}

.flexiSummaryTextBox
{
    width:60px;
    text-align:right;
}




/* Pay Category Selection Page*/
#lstPayCategories
{
    height:150px;
    width:200px;
}

.payCatTable
{
    text-align:center;  
    width:60%;
    margin: 10px auto;
    height:300px;
}


/* Jobs Selection Page */
#desktopJobsDiv
{
    width:500px;
}

.jobTreeView
{
    width: 350px;
    border:solid 1px #888;
    background-color:white;
    min-height:200px;
}

    .leafNode a
    {
        color:black;
    }

.jobSeqEntry
{
    width:100px;
}




/* Date Selection*/
.calendarPicker
{
    border:solid 1px #888;
    background-color:white;
}