body {
	margin: 0px 2px 2px 2px;
	font-family: Calibri, Arial;
	background-color: #FFFFFF;
	background-image: url('redGradBG.png');
	background-repeat: repeat-x;
    /*width:100%;*/
    display:inline-block;
    min-width:100%;
}

.left {
	float: left;
}

.right {
	float: right;
}

.welcomeText {
	font-size: smaller;
	font-family: Calibri, Arial;
	color: #cccccc;
}

.calendar {
	margin: 2px 2px 2px 2px;
	font-family: Calibri, Arial;
	background-color: #FFFFFF;
}

.contentMain {
	background-image: url('RedGradBG.png');
	background-repeat: repeat-x;
}

.loginPanel {
	background-image: url('loginPanelGradBG.png');
	background-repeat: repeat-x;
}

.contentPanel {
	background-color: #FFFFFF;
	border: solid 1px #cccccc;
	margin: auto;
}

.contentPanelRibbon {
	background-image: url('silverRibbon.png');
	background-repeat: repeat-x;
	font-size: large;
	font-weight: bold;
	font-family: calibri, arial;
	text-align: left;
	color: #808080;
	height: 40px;
	padding: 2px 0px 0px 5px;
}

table.tborder {
	border: 1pt solid #999999;
	background-color: #FFFFFF;
}

table.tborder2 {
	border-style: solid;
	border-width: 1pt;
	background-color: #ffcc99;
	border-color: #990000;
	border-left-color: black;
	border-top-color: black;
	border-right-color: yellow;
	border-bottom-color: yellow;
}

table.tnoborder {
	background-image: url('redGradBG.png');
	background-repeat: repeat-x;
	background-color: #FFFFFF;
}

tr.trnormal {
	background-image: url('silverButtonBG.png');
	background-repeat: repeat-x;
}

.NavButton {
	background-position: left top;
	background-image: url('silverButtonBG.png');
	background-repeat: repeat-x;
	border: 1px solid #CCCCCC;
	height: 27px;
	cursor: pointer;
}

.NavButtonHover {
	background-position: left top;
	background-image: url('silverButtonBGHover.png');
	background-repeat: repeat-x;
	height: 27px;
	border: 1px solid #CCCCCC;
	cursor: pointer;
}

tr.trclockingbuttons {
	background-color: #cccccc;
}

tr.trcorrgray {
	background-color: #cccccc;
}

td.tdnocolor {
	border-width: 0pt;
	background-color: #ffcc99;
}

td.tdcolor {
	color: white;
}

td.tdclockingbuttons {
	background-color: #FFFFFF;
}

td.tdcontents {
	background-color: #f0f0f0;
}

td.tdcontentscolor {
	background-color: #99CCFF;
}

td.tdcorrcomments {
	border-style: solid;
	border-width: 0pt;
	background-color: #FFFFCC;
}

body.bcolor {
	background-color: #990000;
}

font.label {
	text-decoration: none;
	font-size: 10pt;
	font-weight: bold;
	color: #404040;
}

font.flexiperiod {
	text-decoration: none;
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
	color: Black;
}

font.filedesc {
	text-decoration: none;
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
	color: black;
}

font.selected {
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
	color: #990000;
}

font.contentshead {
	font-size: 8pt;
	font-family: Arial;
	font-weight: bold;
	color: #FFFF00;
}

font.contentsdata {
	font-size: 8pt;
	font-family: Arial;
	font-weight: normal;
	color: #990000;
}

font.inactive {
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
	color: #808080;
}

font.heading {
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
	color: #404040;
	text-decoration: underline;
}

font.pagename {
	color: #FFFFFF;
	font-family: Times Roman;
	font-style: italic;
	font-size: xx-large;
}

font.pagename2 {
	color: #FFFFFF;
	font-family: Times Roman;
	font-style: italic;
	font-size: x-large;
}

font.keypad {
	font-size: 12pt;
	font-family: calibri, arial;
	font-weight: bold;
	color: #000000;
}

font.dropdown {
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
	color: white;
	background-color: #990000;
}

font.tabselected {
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
	color: #990000;
}

#HeaderStyle {
	background-color: #606060;
	height: 27px;
	border: dotted 1px #ffffff;
	display: block;
}

.Header {
	background-color: #990000;
	background-image: url('redGradBG.png');
	background-repeat: repeat-x;
}

option.option {
	color: white;
	background-color: #ffcc99;
}

.datecell {
	border: 1px solid #CCCCCC;
	color: #0099FF;
	width: 30px;
	background-image: url('silverButtonBGHover.png');
	background-repeat: repeat-x;
}

.datecell_off {
	color: #808080;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
}

.datecell_on {
	background-image: url('silverButtonBGHover.png');
	background-repeat: repeat-x;
	color: #0099FF;
	background-color: #FFFFFF;
	cursor: pointer;
}

frame.datepicker {
	border-width: 3pt;
	border-color: #ffcc99;
}

td.clsH1 {
	font-size: xx-large;
	font-family: Arial;
	font-weight: normal;
	color: #990000;
}

input.servertime {
	border-style: none;
	border-width: 0px;
	background-color: Transparent;
	font-size: 12px;
	font-weight: bold;
	font-family: calibri, arial;
	color: #FFFFFF;
}

input.timeworked {
	color: #006699;
	border: 0px;
	font-weight: bold;
	font-family: calibri, arial;
	font-size: 12px;
}

input.TypeDesc {
	width: 500px;
	color: #FFFF00;
	background-color: #990000;
	border: 0px;
	text-decoration: none;
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
}

td.tabselected {
	border-bottom-style: none;
	border-bottom-color: #ffcc99;
	border-bottom-width: 0pt;
	background-color: #ffcc99;
	border-left-color: yellow;
	border-top-color: yellow;
	border-right-color: yellow;
	font-size: 13pt;
	color: blue;
}

td.tabnotselected {
	border-bottom-style: solid;
	border-bottom-color: #990000;
	border-bottom-width: 1pt;
	background-color: #990000;
	border-left-color: yellow;
	border-top-color: yellow;
	border-right-color: yellow;
	font-size: 13pt;
	color: white;
}

td.keyPadButton {
	border-color: #000000;
	background-image: url('../Images/Button/keyPadButton.png');
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
}

.backButton {
	background-image: url('backButton-Red.png');
	background-repeat: no-repeat;
	height: 35px;
	width: 125px;
	color: #ffffff;
}

.backButtonHover {
	background-image: url('backButtonHover-Red.png');
	background-repeat: no-repeat;
	height: 35px;
	width: 125px;
	color: #ffffff;
}

.panelContent {
	width: 100%;
	padding-right: 10px;
	padding-left: 10px;
}

.toolBarBG {
	background-image: url('silverRibbon.png');
	background-repeat: repeat-x;
	padding: 2px;
}

ul.toolBarBG {
	background-image: url('silverRibbon.png');
	background-repeat: repeat-x;
	padding: 2px;
	margin: 0;
	list-style-type: none;
	}

    ul.toolBarBG > li {
	display: inline; 
}

	ul.toolBarBG > li > .VTImageTextButton {
            display: inline-block;
	}

.ReportViewer {
	margin-bottom: 120px;
}

.modalBackground {
	background-color: #808080; /* for IE */
}

.accordianHeader {
	background-position: left top;
	background-image: url('silverButtonBG.png');
	background-repeat: repeat-x;
	border: 1px solid #CCCCCC;
	height: 27px;
	cursor: pointer;
	padding-left: 10px;
	font-weight: bold;
	color: #606060;
	text-align: left;
}

a.accordianHeader {
	background: none;
	border: none;
	height: 26px;
	padding-left: 0;
	text-decoration: none;
}

	a.accordianHeader > img {
		border: 0;
	}

.accordianHeader span {
	vertical-align: top;
}

.accordianHeaderHover {
	background-position: left top;
	background-image: url('silverButtonBGHover.png');
	background-repeat: repeat-x;
	height: 27px;
	border: 1px solid #CCCCCC;
	cursor: pointer;
	padding-left: 10px;
	text-align: left;
}

.accordianContent {
	background-color: #ffffff;
}

.NavAccordian {
	background-color: #ffffff;
}

.generalFont {
	font-family: Arial;
	font-size: small;
}

.btnBarBackground {
	background-image: url('silverRibbonThin.png');
	background-repeat: repeat-x;
	width: 100%;
	height: 36px;
	padding: 2px;
	margin-right: 2px;
	right: 2px;
}

.btnBarLeft {
	position: absolute;
	top: inherit;
	left: inherit;
	width: 304px;
	height: 32px;
}

.btnBarMiddle {
	position: absolute;
	top: inherit;
	left: inherit;
	width: 100%;
	height: 32px;
	text-align: center;
	padding-top: 6px;
}

.btnBarRight {
	position: absolute;
	top: inherit;
	right: 2px;
	width: 304px;
	height: 32px;
}

.labelTitle {
	font-family: Arial;
	font-weight: bold;
	font-size: small;
}

.datesBlockCorrectionDetails {
	width: 50%;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left;
}
/* -----> Console Centre */
.calLnkAdd {
	/*text-decoration: none;*/
	color: #000000;
	font-weight: bold;
	font-size: small;
	visibility: hidden;
	cursor: pointer;
}

.calLnkCor {
	display: block;
	width: 100%;
	text-decoration: none;
	font-size: smaller;
	border: 1px solid #CCCCCC;
	cursor: pointer;
}

.calLnkCorCanceled {
	text-decoration: line-through;
	background-color: #B8B8B8;
	color: #808080;
}

.EmployeeSearchSelect {
	width: 505px;
	margin-left: auto;
	margin-right: auto;
	background-color: White;
}

.divider_hr {
	clear: both;
	display: block;
	width: 100%;
	margin-bottom: 20px;
	padding-top: 5px;
	border-bottom: 1px solid #f1f5f7;
}

.datepicker-img img {
	position: absolute;
	display: inline;
	margin-top: 3px;
}

.datepicker-img {
	position: relative;
	vertical-align: bottom;
}

.lnk-button-back {
	margin-right: 10px;
}

.date-picker-clock {
	position: relative;
}

	.date-picker-clock > .ui-datepicker-trigger {
		position: absolute;
		margin-left: 5px;
		margin-top: 3px;
	}

.CSOTabs-Container {
	padding-top: 10px;
	margin-left: 30%;
	width: 400px;
}

	.CSOTabs-Container .CSOTab_body > input {
		margin-left: 100px;
	}

	.CSOTabs-Container .CSOTab_body > div {
		padding-left: 100px;
	}

		.CSOTabs-Container .CSOTab_body > div > table {
			width: 150px;
		}

	.CSOTabs-Container .CSOTab_body .popupCSO {
		visibility: hidden;
		border: 1px outset #f1f1f1;
		padding: 2px;
		background-color: #fff;
	}

.contentPanel div#cso > table td {
	text-align: left;
}

	.contentPanel div#cso > table td input#CSO_Percentage {
		width: 70px;
		text-align: right;
	}

.Cclass {
	color: Red;
}

.cc-modal-report-btn {
	margin-top: 3px;
}

/*Report Viewer hack for IE11 on 7 mode*/

#ctl00_ContentPlaceHolder1_ReportViewer1_ctl05 > div > div,
#ctl00_ContentPlaceHolder1_ReportViewer1_ctl05 > div > table {
	display: inline-block !important;
	zoom: 1 !important;
	*display: inline !important;
}

/*------AnnualLeaveCalandar------*/

.full-calendar {
	margin: 40px auto;
	width: 900px;
	background-color: #fff;
}

.fc-icon-ie7 {
	font-size: 1em !important;
}

.fc-event {
	border-color: #C80000;
	background-color: #C80000;
}

.fc-sat, .fc-sun {
	background-color: #E0F3FE;
}

.fc-select-month {
	font-size: 1em;
}

.alc-aside, .alc-body {
    display: inline-block;
}

.alc-aside {
width: 200px;
    position: relative;
    height: 716px;
}
		
    .alc-aside > select {
        position: absolute;
        top: 0;
        width: 180px;
        height: 200px;
	}

/* 48 Hours report options panel*/

.cnt-48-rep {
	width: 800px;
}

.cnt-48-rep-set {
	clear: both;
	width: 500px;
	vertical-align: top;
	background-color: #D8D8D8;
}

	.cnt-48-rep-set > span {
		display: block;
	}

.cnt-48-rep-c1 {
	display: inline-block !important;
	zoom: 1 !important;
	*display: inline !important;
	width: 250px;
}

.cnt-48-rep-c2 {
	display: inline-block !important;
	zoom: 1 !important;
	*display: inline !important;
	width: 250px;
}

.cnt-48-rep-validator {
	display: block;
}

.cnt-48-rep-set > span {
	font-weight: bold;
}

.alc-aside {
    display: inline-block;
    padding-left: 10px;
    padding-top: 40px;
}

/*Loading screen blocker*/

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba( 255, 255, 255, .8 ) url('ajax-loader.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
	overflow: hidden;
}

	/* Anytime the body has the loading class, our
   modal element will be visible */
	body.loading .modal {
		display: block;
	}
	/*Staf centre Reports*/
ul.report-selectection {
	padding: 0px;
	margin: 0;
	list-style-type: none;
}

    ul.report-selectection > li {
        display: inline;
        clear: both;
    }

        ul.report-selectection > li > div {
            float: left;
            padding-left: 40px;
            padding-bottom: 20px;
            display: inline-block;
            text-align: left;
        }

            ul.report-selectection > li > div > label {
                font-weight: bold;
                display: block;
            }
	
            ul.report-selectection > li > div > select {
                display: block;
}
	
table.list {
    border-collapse: collapse;
    empty-cells: show;
    padding: 2px;
}

th.list {
    border: 1px solid lightgray;
    background-color: silver;
    font-size: 12pt;
    text-decoration: none;
    font-size: 10pt;
    font-weight: bold;
    color: black;
}

td.list {
    border: 1px solid lightgray;
    font-size: 10pt;
}

.delete {
    font-family: Arial;
    font-size: 8pt;
    color: red;
}
	
.changepin_custom {
    background: buttonface url(../../Images/Panels/database_up.png) no-repeat 15px !important;
    padding: 8px 10px 18px 40px !important;
    margin-right: 10px;
	}

.backpin_custom {
    background: buttonface url(../../Images/Panels/previous.png) no-repeat 15px !important;
    padding: 8px 10px 18px 40px !important;
		}

    .backpin_custom:hover {
        background-color: #FFD133 !important;
		}

.changepin_custom:hover {
    background-color: #FFD133 !important;
}