/* DEFAULTS
----------------------------------------------------------*/
body {
	background: #b6b7bc;
	font-size: .80em;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
	margin: 0px;
	padding: 0px;
	color: Black;
}

a:link, a:visited {
	color: #034af3;
}

a:hover {
	color: #1d60ff;
	text-decoration: none;
}

a:active {
	color: #034af3;
}

p {
	margin-bottom: 10px;
	line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-size: 1.5em;
	color: #666666;
	font-variant: small-caps;
	text-transform: none;
	font-weight: 200;
	margin-bottom: 0px;
}

h1 {
	font-size: 1.6em;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

h2 {
	font-size: 1.5em;
	font-weight: 600;
}

h3 {
	font-size: 1.2em;
}

h4 {
	font-size: 1.1em;
}

h5, h6 {
	font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
	margin-top: 0px;
}

.tr:nth-child(even) {
	background-color: #000000;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
	/*changed Colin 31/5/18 as part of new look and feel */
	/*the actual page */
	/*width: 960px;*/
	/*width: 1090px;*/
	background-color: #ffe;
	margin: 0px auto 0px auto;
	/*border: 1px solid #496077;*/
}

.header {
	position: relative;
	margin: 0px;
	padding: 0px;
	background: #000000;
	/*background: #4b6c9e;*/
	width: 100%;
}

	.header h1 {
		font-weight: 700;
		margin: 0px;
		padding: 0px 0px 0px 20px;
		color: #f9f9f9;
		border: none;
		line-height: 2em;
		font-size: 2em;
	}

.main {
	padding: 0px 12px;
	margin: 12px 8px 12px 8px; /*Changed from 48 to 12 and fixed the top and bottom to match by Colin.  No idea why it was set to 48.*/
	min-height: 420px;
}

.mainforlogins {
	padding: 0px 12px;
	margin: 12px 8px 12px 8px;
	/*min-height: 280px;  Changed by Colin 10/6/18 to look better with the new dashboards*/
}

.mainforloginmaster {
	padding: 0px 12px;
	margin: 12px 8px 8px 8px;
	/*min-height: 280px;*/
}

.leftCol {
	padding: 6px 0px;
	margin: 12px 8px 8px 8px;
	width: 200px;
	min-height: 200px;
}

.footer {
	color: #4e5766;
	padding: 8px 0px 0px 0px;
	margin: 0px auto;
	text-align: center;
	line-height: normal;
}

.redfooter {
	background-color: Red;
	/*padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;*/
}

/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink {
	/*background-color:#3a4f63;*/
	background-color: Yellow;
	width: 100%;
}

.menubutton, .hilightedmenubutton, .exitDeliverySiteButton {
	border: 1px #4e667d solid;
	font-weight: bold;
	display: block;
	padding: 3px 9px; /*changed Colin 17/6/16 to make room for language dropdown*/
	text-decoration: none;
	white-space: nowrap;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
}

.menubutton, a.menubutton:visited, a.menubutton.inline {
	background-color: Green;
	color: white;
}

	.menubutton.inline {
		display: inline-block;
	}

.aspNetDisabled.menubutton.inline {
	background-color: #bfcbd6;
	color: #465c71;
}

.exitDeliverySiteButton {
	background-color: #FFFF99;
	color: black;
	display: inline-block;
}

.hilightedmenubutton {
	background-color: black;
	color: white;
	font-weight: bold;
}

	.hilightedmenubutton.inline {
		display: inline-block;
		color: white;
	}

	.hilightedmenubutton:hover {
		color: white;
	}

/* There is both a normal and a QA function of the menu. But the only difference is the background colour of the
	menu items and then with a bold text. The rest of it is the same.
*/
div.menu, div.menuQA {
	padding: 4px 0px 4px 8px;
	font-weight: bold;
	z-index: 9999; /* To put menus over the map*/
}

	div.menu ul, div.menuQA ul {
		list-style: none;
		margin: 0px;
		padding: 0px;
		width: auto;
		z-index: 9999; /* To put menus over the map*/
	}

		div.menu ul li a, div.menu ul li a:visited, div.menuQA ul li a, div.menuQA ul li a:visited {
			border: 1px #4e667d solid;
			color: White;
			display: block;
			line-height: 1.35em;
			padding: 4px 12px;
			text-decoration: none;
			white-space: nowrap;
			border: 2px solid #e0e0e0;
			border-radius: 10px;
		}

			div.menu ul li a, div.menu ul li a:visited {
				background-color: Green;
			}

			div.menuQA ul li a, div.menuQA ul li a:visited {
				background-color: lime;
				font-weight: bold;
			}

				div.menu ul li a:hover, div.menuQA ul li a:hover {
					background-color: #bfcbd6;
					color: #465c71;
					text-decoration: none;
				}

				div.menu ul li a:active, div.menuQA ul li a:active {
					background-color: #465c71;
					color: #cfdbe6;
					text-decoration: none;
				}

	div.menu > ul > li {
		display: inline-block;
		list-style: none;
	}

	div.menu ul li ul {
		display: none;
	}
	/*see http://stackoverflow.com/questions/3240873/how-to-get-rid-of-ugly-aspmenu-flickering */

	div.menu .MenuHighlight {
		background-color: Green;
		color: Red;
	}

	div.menuQA .MenuHighlight {
		background-color: lime;
		color: Red;
	}

.MenuHighlight {
	background-color: Green;
	color: Red;
}

div.menu a:hover .MenuHighlight {
	background-color: #bfcbd6;
	color: Red;
}

div.menuQA a:hover .MenuHighlight {
	background-color: #bfcbd6;
	color: Red;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset {
	margin: 1em 0px;
	padding: 1em;
	border: 1px solid #ccc;
}

	fieldset p {
		margin: 2px 12px 10px 10px;
	}

	fieldset.login label, fieldset.register label, fieldset.changePassword label {
		display: block;
	}

	fieldset label.inline {
		display: inline;
	}

legend {
	font-size: 1.1em;
	font-weight: 600;
	padding: 2px 4px 8px 4px;
}

input.textEntry {
	width: 320px;
	border: 1px solid #ccc;
}

input.passwordEntry {
	width: 320px;
	border: 1px solid #ccc;
}

div.accountInfo {
	width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.loading-indicator {
	height: 80px;
	width: 80px;
	background: url( '../pictures/loading.gif' );
	background-repeat: no-repeat;
	background-position: center center;
}

.loading-indicator-overlay {
	background-color: #FFFFFF;
	opacity: 0.6;
	filter: alpha(opacity = 60);
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

.clear {
	clear: both;
}

.title {
	display: block;
	float: left;
	text-align: left;
	width: auto;
}

.loginDisplay {
	font-size: 1.1em;
	display: block;
	text-align: right;
	padding: 10px;
	color: Black;
}

	.loginDisplay a:link {
		color: Black;
	}

	.loginDisplay a:visited {
		color: white;
	}

	.loginDisplay a:hover {
		color: white;
	}

.failureNotification {
	font-size: 1.2em;
	color: Red;
}

.bold {
	font-weight: bold;
}

.PageTitle {
	background-color: #F7F6F3;
	font-weight: bold;
	color: Black;
}

.Validator {
	font-weight: bold;
	color: Red;
}

.Warning {
	font-weight: bold;
	color: orange;
}

.NewFeature {
	background-color: Red;
	color: White
}

.PageNotes {
	background-color: #FFFFFF;
}

.Overdue {
	background: red;
	color: White;
}


.submitButton {
	text-align: right;
	padding-right: 10px;
}

.standardButton {
	display: inline-block;
}

/*.menuQA ul li ul
{
    display: none;
}
*/
/*.menuQA ul li
{
    position: static;
    float:left;
    list-style: none, none, none;
}
.menu ul li
{
    position: static;
    float:left;
    list-style: none, none, none;
}*/


/* Checkboxes Display
-------------------------------------------------*/

.BigCheckBox input {
	width: 20px;
	height: 20px
}

/* Outages
-------------------------------------------------*/

.Outage {
	color: white;
	font-weight: bold;
	margin: 0;
	padding: 4px 10px;
}

	.Outage.Warning {
		background-color: orange;
	}

	.Outage.Alert {
		background-color: red;
	}

	.Outage.Notification {
		background-color: yellow;
		color: black;
	}

/* PSET MIS
----------------------------------------------------------*/

.NoMarginTop {
	margin-top: 0;
}

.MarginTop10 {
	margin-top: 10px;
}

.MarginBottom10 {
	margin-bottom: 10px;
}

.MarginTop15 {
	margin-top: 15px;
}

.MarginBottom15 {
	margin-bottom: 15px;
}

.LineThrough {
	text-decoration: line-through;
}

.PsetPageTitle {
	font-size: 1.5em;
	font-weight: bold;
	color: Black;
	margin-bottom: 15px;
}

.PsetPageGuide {
	max-width: 700px;
}

.ButtonBar {
	margin: 15px 0;
}

	.ButtonBar input[type='submit'] {
		margin-right: 20px;
	}

.SingleDetails table {
	border: 0;
}

.SingleDetails .GridView table {
	border: 1px solid #808080;
}

.SingleDetails.DefaultWidth {
	width: 700px;
}

.SingleDetails.Wider {
	width: 850px;
}

.SingleDetails.MediumWide {
	width: 1000px;
}

.SingleDetails.ExtraWide {
	width: 1100px;
}

.SingleDetails.Fullwidth {
	width: 100%;
}

.SingleDetails td {
	padding: 4px;
	margin: 0;
	vertical-align: text-top;
}

	.SingleDetails td.Label {
		width: 200px;
		font-weight: bold;
		text-align: right;
		padding-right: 10px;
		vertical-align: top;
	}

.SingleDetails td.Label2 {
	width: 150px;
	font-style: italic;
	text-align: left;
	vertical-align: top;
}
.table.Grid {
	border: 1px solid black;
	border-collapse: collapse;
}

table.Grid tr {
	background-color: #E3EAEB;
}

	table.Grid tr.Alternate {
		background-color: White;
	}

table.Grid th {
	background-color: #1C5E55;
	color: white;
	padding: 4px;
}

table.Grid td {
	padding: 4px;
}

table.Grid table.WithColumns th, table.Grid table.WithColumns td {
	border-left: 1px solid #808080;
	border-right: 1px solid #808080;
	border-collapse: collapse;
}

table.Grid table.NoColumns th, table.Grid table.NoColumns td {
	border: 0;
}

.GridView {
}

.GridViewStandardWidth {
	width: 700px;
}

.GridViewWider {
	width: 850px;
}

.GridViewMediumWide {
	width: 1000px;
}

.GridViewExtraWide {
	width: 1100px;
}

.GridViewFullWidth {
	width: 100%;
}

.ArchivedActiveLink {
	float: right;
	width: 150px;
	height: 30px;
	text-align: right;
}

.GridView a.aspNetDisabled, .GridView a.aspNetDisabled:hover {
	color: #999999;
	text-decoration: none;
}

input.xsmall {
	width: 50px
}

select.xsmall {
	width: 58px;
}

input.small {
	width: 100px
}

select.small {
	width: 108px;
}

input.medium {
	width: 150px;
}

select.medium {
	width: 158px;
}

input.large {
	width: 200px;
}

select.large {
	width: 208px;
}

input.xlarge {
	width: 300px;
}

select.xlarge {
	width: 308px;
}

input.xxlarge {
	width: 400px;
}

select.xxlarge {
	width: 408px;
}

input.xxxlarge {
	width: 600px;
}

select.xxxlarge {
	width: 608px;
}

.fullwidth {
	width: 100%;
}

.ValidationSummary {
	/*margin-left: 220px;*/
	font-weight: bold;
	color: Red;
}

.TextRight {
	text-align: right;
}

.TextLeft {
	text-align: left
}

.TextCentre {
	text-align: center;
}

.VerticalMiddle {
	vertical-align: middle;
}

.vemis-ui-state-info {
	background-color: #DFEFFC;
	color: #222222;
	border: 1px solid #5C9CCC;
}

.ButtonSeparation {
	margin-right: 10px;
}

.RadioButtonSeparationLeft {
	margin-left: 20px;
}

.Separation2em {
	width: 2em;
	height: 1px;
}

.Separation5em {
	width: 5em;
	height: 1px;
}

.Separation10em {
	width: 10em;
	height: 1px;
}

.Hidden {
	display: none;
}

.UnsavedData {
	color: #FF0000;
	font-weight: bold;
}

.stepTitle {
	font-size: 1.3em;
	margin: 10px 0;
	font-weight: normal;
	font-style: italic;
	color: #8333FF;
}

span.disabled, label.disabled {
	color: #AAA;
}

.radiobuttonlist {
}

	.radiobuttonlist td {
		padding: 0;
		margin: 0;
		text-align: left;
	}

	.radiobuttonlist label {
		padding-left: 4px;
	}

.highlightProblem {
	color: #FF0000;
	font-weight: bold;
}

.highlightOkay {
	color: #00A000;
	font-weight: bold;
}

/* -----------------------------------------------
	Tabs 
----------------------------------------------- */
.tab {
	overflow: hidden;
	border: none;
	background-color: inherit;
}

.tablinks {
	/* just for selection */
}

.tab button {
	background-color: #008000;
	color: white;
	font-weight: bold;
	font-size: 110%;
	float: left;
	border-top: 2px solid #e0e0e0;
	border-left: 2px solid #e0e0e0;
	border-right: 2px solid #e0e0e0;
	border-bottom: none;
	outline: none;
	cursor: pointer;
	padding: 8px 16px;
	transition: 0.3s;
	margin-right: 6px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

	.tab button:hover {
		background-color: #1A9A1A;
	}

	.tab button.active {
		background-color: black;
		color: white;
	}

	.tab button.disabled {
		background-color: lightgrey;
		color: darkgrey;
	}

.tabcontent {
	display: none;
	padding: 6px 12px 12px 12px;
	border: 1px solid #E0E0E0;
}

	.tab.GridViewStandardWidth, .tabcontent.GridViewStandardWidth {
		width: 724px;
	}

	.tab.GridViewWider {
		width: 874px;
	}

	.tab.GridViewMediumWide, .tabcontent.GridViewMediumWide {
		width: 1024px;
	}

	.tab.GridViewExtraWide, .tabcontent.GridViewExtraWide {
		width: 1124px;
	}

	.tab.GridViewFullWidth, .tabcontent.GridViewFullWidth {
		width: 100%;
	}