/*
 * You MUST read the readme before editing this stylesheet.
 */
 
/*
 * Colours
 * #1E5494 = main tpp blue
 * #6593C5 = light tpp blue
 * #00246B = dark tpp blue
 * #D7E6F0 = highlight blue 1
 * #C5D3E4 = highlight blue 2
 * #E9F1F9 = focus light blue
 */

/* 
 * Standard Element Formatting
 */
 
html, body {
	text-align: center;
	min-width: 500px;
	background-color: #ffffff;
	font-family: arial, 'sans serif';
	
	/* CKM - 24 Jul 2017 - Remove margin from body to allow for full-width banners and footers */
	margin: 0px;
	/* JEL - Changed to implement sticky footer. */
	/* padding-bottom: 50px; */
	height: 100%;
	width: 100%;
	position: absolute;
}

h1,h2,h3,h4,h5,h6 {
	color: #1E5494;
	border-size: 0;
	padding: 0;
	margin: 0;
}

table {
	border-style: solid;
	border-color: #1E5494;
	border-width: 2px;
	border-collapse: collapse;
	empty-cells: show;
	font-size: 10pt;
}

th,td {
	border-style: solid;
	border-width: 1px;
	padding: 0.2em;
}

th {
	color: white;
	background-color: #1E5494;
	border-color: white;
	border-bottom-color: #1E5494;
}

td {
	border-color: #6593C5;
}

hr {
	color: #1E5494;
}

table form {
	/*Get rid of annoying newline when forms are in tables*/
	margin: 0;
}

a:link {
	color: #1E5494;
}

a:visited {
	color: #1E5494;
}

a:active {
	color: #1E5494;
}

a:hover {
	color: #6593C5;
}

/**
* JEL - Div containing whole page, needed to set location of the sticky footer.
*/
#contents {
	min-height: 100%;
}

/**
 * CKM - 25 Jul 2017 - Add navbar-specific td ID
 */
#tdNavBar {
	/* JEL - Remove border on navbar */
	/* border-color: black */
	border-style: none;
	/* JEL - 31 Jul 2017 - The navbar should only go so small. */
	min-width: 150px;
}

/**
* JEL - 31 Jul 2017 - Edges should fold away when screen is thin.
*/
#tdNavBarEdge {
	border-style: none;
}

/**
 * CKM - 24 Jul 2017 - Add id for links in the footer so they don't blend into the background
 */
#footerLink{
	color: white;
}

input[type=text], input[type=password]
{
	border-color: #888888;
	border-style: solid;
	border-width: 1px;
}

input[type=text]:focus, input[type=password]:focus
{
	background: #E9F1F9;
}

/*
 * wrapper - Used on all pages
 */
#wrapper {
	text-align: left;
	
	/* CKM - 24 Jul 2017 - Better to use percentages instead of px where possible to account for different resolutions */
	/* width: 850px; */
	width: 75%;
	
	/* JEL - Do not let the centre text get too thin or too wide */
	min-width: 600px;
	max-width: 850px;
	
	margin-left: auto;
	margin-right: auto;
	
	/* CKM - 21 Jul 2017 - Added margin to wrapper to prevent text being behind footer */
	margin-bottom: 60px;
}

/*
 * banner
 */
#banner {
	width: 100%;
	border-width: 0;
	/* JEL - Only make the banner so thin */
	min-width: 600px;
	
	/* CKM - 21 Jul 2017 - Add colour to banner */
	background-color: #1E5494;
}

#banner table {
	border-width: 0;
}

#banner td {
	border-width: 0;
	/* JEL - banner links should not wrap */
	min-width: 180px;
}

#banner th {
	border-width: 0;
}
/**
* JEL - Make the images fit their divs.
*/
#banner img {
	max-height: 100%;
}

/*
 * plaintable
 */
#plaintable {
	border-style: solid;
	border-color: white;
	border-width: 0;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}

#plaintable th {
	border-style: solid;
	border-width: 0;
	padding: 5;
}

#plaintable td {
	border-style: solid;
	border-width: 0;
	padding: 5;
}

#plaintable form input {
	width: auto;
}

/*
 * PJM - 03 Jun 2015 - Shaded table row
 */
#plainTableRowShaded  {
	border-style: solid;
	border-width: 0;
	padding: 5;
	background-color: #D7E6F0;
}

/*
 * logontable
 * AAD - 3 Oct 2013 - Created this table to use on the logon screen with the new SystmOnline Apple App advertisement.
 * Added extra cells in the table for the advertisement itself and spacers to go in between this and the existing username and password fields.
 */
#logontable {
	border-style: solid;
	border-color: white;
	border-width: 0;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	font-size: 12pt;
}

#logontable th {
	border-style: solid;
	border-width: 0;
	padding: 5;
}

#logontable td {
	border-style: solid;
	border-width: 0;
	padding: 5;
}

#logontable form input {
	width: auto;
}
#logontable #T1 {
	border-style: solid;
	border-color: #1E5494;
	border-width: 3px;
	border-bottom: none;
}
#logontable #B1 {
	border-style: solid;
	border-color: #1E5494;
	border-width: 3px;
	border-top: none;
}
#logontable #spacertop {
	width: 3em;
}
#logontable #spacerbottom {
	width: 3em;
}

/**
 * JEL 21 Jul 2017 - Contact ref: 749763 - Changed text-align from left to center.
 */
#patientDetails {
	text-align: center;
	font-weight: bold;
	/* JEL - matching width to the wrapper. */
	/* 	width: 100%; */
	/* margin: 0px; */
	width: 75%;
	margin: 0px auto;
	min-width: 600px;
	
	padding: 0px;
	/* JEL - make edges of border hidden */
	/* border-style: solid */
	border-style: none;
	border-color: #6394C6;
	border-width: 1;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	vertical-align: top;
}

#patientDetails td {
	height: 100%;
	/* JEL - don't show table border */
	/* border-style: solid; */
	border-style: none;
	border-width: 1px;
	border-color: #6394C6;
	padding: 2px;
	vertical-align: top;
	color: #185294;
}

/**
* JEL - Put table lines between the three central columns.
*/
#patientDetails td + td {
	border-left: 1px solid #A1A2A3;
}

/*
* JEL - Note in header on main menu about greyed out text.
*/
/*#greyedOutTextNote {*/
#disabledfeaturesnote {
	text-align: center;
	font-family: arial, 'sans serif';
	font-size: 12pt;
	color: #A1A2A3;
	width: 100%;
	height:100%;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	border-style: none;
	border-width: 1;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	vertical-align: top;
	display: block;
}

#greyedOutTextNote td {
	height: 100%;
	border-style: none;
	border-width: 1;
	padding: 4px;
	vertical-align: bottom;
	color: #A1A2A3;
}

/* CKM - 19 Jul 2017 - No longer needed after NavBar redesign
#navbar{
	background-image: url(images/navbar.gif);
	background-repeat: repeat-x;
	background-position: bottom left;
	text-align: center;
	font-weight: bold;
	width: 100%;
	height: 30px;
	margin: 0px;
	padding: 0px;
	border-style: solid;
	border-color: white;
	border-width: 0;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	vertical-align: middle;
}

#navbar td,#navbarEmpty td {
	height: 100%;
	border-style: solid;
	border-width: 0px;
	border-color: white;
	padding: 0px;
	vertical-align: middle;
}

#navbar a {
	text-align: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #FFFFFF;
}

#navbar a:hover {
	text-align: center;
	color: #1E5494;
	background-color: white;
	filter: alpha(opacity = 75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

#navbar td:hover {
	color: #1E5494;
	background-color: white;
	filter: alpha(opacity = 75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

#navbarbutton {
	text-align: center;
	background-color: transparent;
	border: none;
	width: 100%;
	height: 30px;
	font-family: arial, 'sans serif';
	font-weight: bold;
	color: #FFFFFF;
	padding: 0px;
	border-bottom: none;
	border-top: none;
	border-right: none;
	border-left: none;
}

#navbarbutton:hover {
	color: #1E5494;
	background-color: white;
	filter: alpha(opacity = 75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	cursor: pointer;
}

/*these 2 for non-IE browsers so the text is inverted when the table cells are highlighted...
#navbar td:hover a {
	color: #1E5494;
}

#navbar td:hover a:hover {
	color: #1E5494;
}

#navbar li { /* Get the whole cell to change when hovering... 
	width: 100%;
	height: 100%;
	text-decoration: none;
	vertical-align: middle;
	color: #FFFFFF;
} */


#errorText {
	color: red;
	font-weight: bold;
	font-size: 100%;
}

/* CKM - 20 Jul 2017 - Changed text-align to float to better accommodate new Help button */
#helpLink {
	font-size: 10pt;
	/* text-align: right; */
	float: right;
	padding-right: 8px;
}

/**
 * CKM - 21 Jul 2017 - Like helpLink but for language buttons
 */
#languageLink {
	font-size: 10pt;
	float: left;
	padding-left: 8px;
}
/**
* JEL - divs for the logos in the banner.
*/
#systmOnlineLogo {
	max-width: 100%;
	float: left;
}
#tppLogo {
	height: 70px;
	float: right;
}

#footer {
	/* CKM - 21 Jul 2017 */
	/* text-align: center; */
	text-align: left;
	/* margin-top: 50px; */
	border: 0px;
	/* CKM - 21 Jul 2017 */
	/* font-size: 8pt; */
	font-size: 10pt;
	/* CKM - 21 Jul 2017 */
	position: relative;
	height: 50px;
	width: 100%;
	background-color: #1E5494;
	color: white;
	/* JEL - 31 Jul 2017 - Do not wrap the footer text, it does not fit well*/
	min-width: 700px;
	/* JEL - Changed to implement sticky footer. */
	/* bottom: 0 */
	bottom: 50px;
}

.spacer {
	height: 50px;
}

#footer img {
	border: 0px;
}

#footerText ol {
	list-style-type: lower-roman;
	margin-top: 5px;
}

#footerContents {
	position: absolute;
	bottom: 8px;
	left: 8px;
	
	/* PaC 18 Dec 2019 - Contact ref: 1012036 - recordal number needs to be centered so let's just center align the full thing */
	right: 8px;
	text-align: center;
}

/**
 * PaC 18 Dec 2019 - Contact ref: 1012036 - ALL links inside the footer should be white
 */
#footerContents a
{
	color: white;
}

#recordLabel {
	color: #000070;
}

#recordLabelFirst {
	color: #0000AA;
}

#bloodPressure {
	color: #FF0000;
}

#allergy {
	color: #6F6F00;
}

#readCode {
	color: #008000;
}

#pageInstructions {
	/* nothing special yet */
}

/** Questionnaire validation error message **/
#error {
	text-align: left;
	background-color: #FFDDDD;
	width: 100%;
	height: 30px;
	margin: 0px;
	padding: 0px;
	border-style: solid;
	border-color: #FF0000;
	border-width: 2;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	vertical-align: middle;
	horizontal-align: middle;
}

#error td {
	border-style: solid;
	border-color: #FF0000;
	border-width: 0;
	vertical-align: middle;
	horizontal-align: middle;
}

/** Information Bar **/
#info {
	text-align: left;
	background-color: #FFFFE1;
	/* JEL - matching width to the wrapper. */
	/* 	width: 100%; */
	/* margin: 0px; */
	width: 75%;
	margin: 0px auto;
	min-width: 600px;
	
	padding: 0px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	vertical-align: middle;
	horizontal-align: middle;
}

#info td {
	border-style: solid;
	border-color: #FF0000;
	border-width: 0;
	vertical-align: middle;
	horizontal-align: middle;
}

/* 
 * Patient Record
 */
#patientRecord {
	text-align: left;
	vertical-align: top;
	width: 100%;
	height: 20px;
	margin: 0px;
	padding: 0px;
	border-style: solid;
	border-color: #00246B;
	border-width: 2px;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}

#patientRecord td {
	height: 100%;
	padding: 6px;
	vertical-align: top;
	color: #00246B;
	border-style: none;
	border-top: solid #6593C5 1px;
	border-bottom: solid #6593C5 1px;
}

#patientRecordCon {
	color: white;
	background-color: #C5D3E4;
	border-top: solid #1E5494 1px;
	border-bottom: solid #1E5494 1px;
}

#patientOverviewShaded {
	color: black;
	background-color: #E9F1F9;
	border-top: solid #1E5494 1px;
	border-bottom: solid #1E5494 1px;
}


#htmlbut {
	border-bottom: none;
	border-top: none;
	border-right: none;
	border-left: none;
	background-color: #ffffff;
	text-align: left;
	font-family: arial, 'sans serif';
	font-size: 12pt;
	color: #1E5494;
	padding: 0px;
	height: 20px;
	outline: none;
}

#htmlbut:hover {
	text-decoration: underline;
	color: #6593C5;
	cursor: pointer;
}

#htmlbut:focus {
	text-decoration: underline;
	color: #6593C5;
	outline: none;
}
/*
* JEL - added greyed out text to main menu.
*/
#htmlbutgreyedout {
	border-bottom: none;
	border-top: none;
	border-right: none;
	border-left: none;
	background-color: #ffffff;
	text-align: left;
	font-family: arial, 'sans serif';
	font-size: 12pt;
	color: #A1A2A3;
	padding: 0px;
	height: 20px;
	outline: none;
}
#htmlbutgreyedout:hover {
	text-decoration: underline;
	color: #B7B8B9;
	cursor: pointer;
}
#htmlbutgreyedout:focus {
	text-decoration: underline;
	color: #B7B8B9;
	outline: none;
}

#inputUserCredentials
{
	width: 12em;
}

#threaddump
{
	width: 100%;
	font-family: courier, 'courier new';
}

#htmlbutsmall:hover {
	text-decoration: underline;
	color: #6593C5;
	cursor: pointer;
}

#htmlbutsmall:focus {
	text-decoration: underline;
	color: #6593C5;
	outline: none;
}

#noWrappingText
{
	white-space:nowrap;
}

#verticalAlignBottom
{
	vertical-align:bottom;
}

/**
 * CKM - 25 Jul 2017 - Add button ID to design buttons
 */
#button {
	background-color: #c22e59;
	border-width: 0;
	border-style: none;
	color: white;
	padding: 8px 16px;
	margin: 5px;
	margin-left: 0;
	white-space: nowrap;
	min-width: 70px;
}

/**
 * CKM - 25 Jul 2017 - Banner buttons have slightly different design
 */
#bannerButton {
	background-color: #c22e59;
	border-width: 0;
	border-style: none;
	color: white;
	padding: 5px; 
	white-space: nowrap;
	min-width:50px;
}

/**
 * CKM - 25 Jul 2017 - Make buttons respond to mouseover
 */
#button:hover, #bannerButton:hover {
    background-color: #7c1d38;
	cursor: pointer;
}

/**
 * CKM - 19 Jul 2017 - Add new classes to allow for hover-over dropdowns and a new navigation bar #
 */
  
/* The container <div> - needed to position the dropdown content */
.container {
    overflow: hidden;
    background-color: #c22e59;
    font-family: Arial;
	height: 38px;
	width: 100%;
	text-align: center;
	/* JEL - 31 Jul 2017 - navbar should still show on thin window when you scroll right. */
	min-width: 650px;
}
/* Contents of the container */
.container a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    text-decoration: none;
}

/**
 * PJM 21 Jan 2020 - Contact ref: 787155
 */
.info-box {
  text-align: center;
  padding: 5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #ffffe1;
  border-color: #c0c0c0;
}
.half_page_left {
	display: inline-block;
	width: 50%;
	text-align: left;
}
.half_page_right {
	display: inline-block;
	width: 50%;
	text-align: right;
}

/* dropdown options */
.dropdown {
	background-color: #c22e59;
    float: left;
    overflow: hidden;
	height: 30px;
	width: 100%;
}

/*dropbutton*/
.dropdown .dropbtn {
    background-color: #c22e59;
    color: white;
    padding: 0px 16px;
	outline: none;
    font-size: 18px;
    border: none;
    cursor: pointer;
	height: 30px;
	width: 100%;
}

/*button inside dropdown from navbar*/
.dropdown .dropdownbtn {
    background-color: #c22e59;
    color: white;
    padding: 6px 0px;
	outline: none;
    font-size: 14px;
    border: none;
    cursor: pointer;
	height: 30px;
	width: 100%;
	text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: #c22e59;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	width: 16.8%;
	padding: 12px 16px;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown .dropdown-content a {
	float: none;
    color: black;
    padding: 12px 6px;
    text-decoration: none;
    display: block;
	height: 30px;
}

/* Change color of dropdown links on hover */
.dropdownbtn:hover {
	background-color: #7c1d38;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.container a:hover, .dropdown:hover .dropbtn {
    background-color: #7c1d38;
}

/*new*/
.dropdown:hover .dropdown-content a {
	font-size: 14;
}