/* Table of Contents
	- RESET CSS STYLING TO HELP IMPROVE CROSS-BROWSER SUPPORT
		- HTML5 display-role reset for older browsers		
	- GENERAL STYLING
		- TYPOGRAPHICAL ELEMENTS
			- Headings
			- Paragraphs, lists, anchor links
			- Outline on focussed elements
	- HEADER
		- HEADER BUTTONS
		- BREADCRUMB		
	- NAVIGATION
		- NAVIGATION TOP
			- Search box in top navigation	
		- LEFTHAND NAVIGATION
	- TITLE BAR
		-TITLE BAR BUTTON AREA
			- Save button repositioning on edit pages
		-COPY AND FAVOURITE BUTTONS	
	- SEARCH BARS
		- FOR EDIT PAGES
	- MAIN PAGE LAYOUT	
	- FORMS
		- FORM ELEMENTS
			- Disabled controls (includes checklists)
			- Field highlighting after clicking checklist item
		- FORM LAYOUT		
	- BUTTONS
		- DARK BLUE BUTTONS (PRIMARY)
		- OUTLINE BUTTONS (SECONDARY)
		- ADD NEW PERSON OR ORGANISATION BUTTON IN POP-UP WINDOW
	- TABLES
		- GENERAL TABLES STYLING
		- LIST TABLES
			- Pagination for list tables
		- INLINE AND INLINE FORM SET TABLES
		- SUMMARY TABLE	
	- DIALOG WINDOWS
	- DATE PICKER
	- SLIDER
	- ERROR MESSAGES
		- FORM FIELDS SHOWING A LIST OF ERRORS
		- ERROR BANNER AT TOP OF PAGE CONTAINING ERRORS
		- HIGHLIGHT A TAB WITH AN ERROR		
	- USER ASSISTANCE
	- SKIP LINKS	
	- CLEAR	
	- CONFIRM DELETE WINDOW	
	- HIDE CONTENT	
	- CLEAR FIX
	- BACK TO PREVIOUS PAGES LINKS
	- MEDIA QUERIES	
	- SCROLL ON PERSON/ORGANISATION SELECT FIELD
*/

/******************** RESET CSS STYLING TO HELP IMPROVE CROSS-BROWSER SUPPORT ********************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/******************** HTML5 display-role reset for older browsers ********************/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/********************************* End of resets ***************************************/

/******************** GENERAL STYLING ********************/ 

body { 
	color: #333; 
	font-family: Verdana, sans-serif; 
	background-color: #f8f8f8;
	padding: 0px; 
	margin: 0px; 
}

/* TYPOGRAPHICAL ELEMENTS */

/* Headings */

h1,
h2,
h3 {
	font-family: Helvetica, sans-serif; 
	font-weight: normal; 
}

h1 {
	font-size: 1.5rem; 
	color: #f2670d;
	margin: 10px 10px 10px 0;
	line-height: 2.0rem;
	overflow: auto;
	word-wrap: break-word;
}

/* The following span class has been introduced to deal with headers without html spaces between words */

h1 span.header_no_wrap {
	white-space: nowrap;
}

/* For headings in two parts e.g. participant title plus status */		
h1 span.grey_heading_span {		
	color: #757575 !important;		
}

h2,
h3 {
	color: #267b8c;
}

h2 {
	font-size: 1.2rem; 
}

h3 {
	font-size: 1.1rem; 
	margin: 15px 0px 5px 0px;
}

/* Paragraphs, lists, anchor links */

p, 
li {
	font-size: 0.9rem;
	line-height: 1.5rem;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

a {
	color: #1979c2;
	font-size: 0.9rem;
}

a:hover,
a:focus,
a:active {
	color: #1979c2;
	text-decoration: none; 
}

/* Outline on focussed elements */

a:focus, 
input:focus, 
textarea:focus, 
select:focus, 
ul:focus {
	outline: 1px solid #3e9ba8;
}

/******************** HEADER ********************/

header { 
	margin: -20px 0 0 0; 
	clear: both; 
	padding: 10px 0px 0px 0px; 
	background-color: #fff; 
}

#header-inner {
	max-width: 1300px; 
	min-width: calc(768px - 4%); 
	margin: 0px auto 0px auto; 
	padding: 0px 2%;
	min-height: 70px;
}

#header-hidden {
	max-width: 1300px; 
	min-width: calc(768px - 4%); 
	margin: 0px auto 0px auto; 
	padding: 0 2%;
	height: auto;
	clear: both;
}

#header-inner img#logo {
	margin: 8px 0px 0px 0px; 
	padding: 0; 
	float: left; 
}

#header-inner #environment_name {
	float: left;
	background-color: #c80000;
	margin: 12px 0px 0px 17px;
	padding: 10px 13px;
	border: 3px solid #c80000;
	border-radius: 2px;
	color: #fff;
	text-align: center;
}

#header_bar {
	float: right; 
	width: auto;
	padding: 0px; 
	margin-top: 10px;
	margin-right: 0px;	
}

/* HEADER BUTTONS */

/* Account details button and settings button */

#account_details_button,
#settings_button {
	font-size: 0.9rem;
	width: 50px;
	padding: 4px 8px; 
	color: #222;
	background-color: #c8c8c8;
	border-radius: 3px; 
	border-bottom: 3px solid #bbb;
	float: left;
	cursor: pointer;
	clear: none; 
}

#settings_button {	
	margin-right: 10px;	
}

#account_details_button span {
	position: relative;
	top: -3px;
}

#account_details_button:hover, 
#account_details_button:focus,
#settings_button:hover, 
#settings_button:focus {
	background-color: #ebebeb;
	border-bottom: 3px solid #ebebeb;
}

#account_details_menu,
#settings_menu {
	width: 300px; 
	font-size: 0.9em; 
	padding: 8px 0px 10px 0px;
	border: 1px solid #00778f;
	border-radius: 2px; 
}

#account_details_menu li,
#settings_menu li {
	margin: 0px;
}

#account_details_menu li a,
#settings_menu li a {
	text-decoration: underline;
	margin-left: 5px;
	padding-left: 20px;
	background-color: #fff !important;
	background: url("/static/images/pagination_right_arrow.png") no-repeat left 5px;
}

#account_details_menu li a:hover,
#account_details_menu li a:focus,
#account_details_menu li a:active,
#settings_menu li a:hover,
#settings_menu li a:focus,
#settings_menu li a:active {
	color: #1979c2 !important;
	text-decoration: none;
	background-color: #fff !important;
	background: url("/static/images/right_arrow_highlight.png") no-repeat left 5px;
}

#account_details_menu li.user_logged_in {
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 8px;
	margin-bottom: 5px;
	line-height: 1.3em;
	color: #666;
	border-bottom: 1px solid #aaa;
}

/* Contact us */

/* Button */

/* Pop-up window */

.support_contact_details {
	width: 350px;
}

.support_contact_details p {
	font-style: normal !important;
}

.support_contact_details p a {
	outline: none !important;
}

/*  BREADCRUMB */

#breadcrumb-holder {
	width: 99%;
	float: left;
	margin-top: -4px;
	margin-left: 0px;
	margin-bottom: 20px;
	font-size: 0.9rem;
	text-indent: -10px;
	line-height: 1.7rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	clear: right;
}

#breadcrumb-holder a {
	margin: 0px 10px;
	color: #1979c2;
}

/******************** NAVIGATION ********************/

/* NAVIGATION TOP */

#main_top_nav {
	width: 100%; 
	clear: both; 
	height: 44px; 
	background-color: #4b4b4b;
	margin: 0px; 
	padding: 0px; 
	border-top: 1px solid #f8f8f8;
}

#main_top_nav ul {
	list-style:none; 
	background-color: #4b4b4b;
	margin-top: 8px; 
	padding: 0px;
	height: 44px;
	max-width: 1300px;
	min-width: 768px;
	margin: 0px auto 0px auto;
	overflow: hidden;
}

#main_top_nav ul li {
	display: block; 
	float: left; 
	padding: 0px; 
	margin: 0px; 
}

#main_top_nav ul li a {
	display: block; 
	font-size: 1rem;
	height: 31px; 
	padding: 10px 16px 3px 17px; 
	color: #eee;
	text-decoration: none; 	
}

/* To allow for extra top navigation for system administrators */
/*#main_top_nav.main_top_nav_sys_admin ul li a {
	padding: 10px 18px 3px 18px;
}*/

#main_top_nav ul li a.selected_menu_item  {
	color: #4b4b4b;
	background-color: #f8f8f8;
}

#main_top_nav ul li a:focus,
#main_top_nav ul li a:hover {
	color: #fff; 
	background-color: #6c6c6c;
	outline: none;
}

/* For highlighted number next to Confirm recruitment menu item */

#main_top_nav ul li a#confirm_recruitment_menu_item #message_not_accurate {
	font-size: 0.8rem !important;
	padding: 0px 1px 3px 2px;
	color: #fff;
	background-color: #cf1e00;
}

/* Search for participant input in top navigation */

#main_top_nav ul li.nav_search_container {
	margin-top: 6px !important;
	float: right;
}

#main_top_nav ul li.nav_search_container input#menu_search_text {
	height: 26px;
	background-color: #f8f8f8;
	margin: 0px;
	border: none !important;
	float: left;
}

#main_top_nav ul li.nav_search_container button#menu_search_button {
	width: 33px;
	height: 32px;
	overflow: hidden;
	margin: 0px;
	padding: 0px 0px 0px 33px;
	float: left;
	border: none;
	background: #888 url("/static/images/search_icon_white_17x17.png") no-repeat 9px 9px;
	cursor: pointer;
	overflow: hidden;
}

#main_top_nav ul li.nav_search_container button#menu_search_button:hover,
#main_top_nav ul li.nav_search_container button#menu_search_button:focus,
#main_top_nav ul li.nav_search_container button#menu_search_button:active {
	background: #777 url("/static/images/search_icon_white_17x17.png") no-repeat 9px 9px;
}

/* Drop-down list of projects from Search for participant */
#header_menus {
    display: none;
}

#header_menus + ul.ui-autocomplete,
body ul.ui-autocomplete#ui-id-11 {
	min-height: 200px;
	max-height: 400px;
	border: 1px solid #157e8d;
}

.nav_search_selection {
	border-bottom: 1px dotted #157e8d;
}

.nav_search_selection:last-child {
	border-bottom: none;
}

.nav_search_selection a {
	padding-bottom: 10px !important;
	padding-top: 10px !important;
	margin-bottom: 0px !important;
	font-weight: bold !important;
	color: #157e8d !important;
	border: none;
}

.nav_search_selection a:hover,
.nav_search_selection a:focus {
	background-color: #eee !important;
}

.nav_search_selection a:hover {
	cursor: pointer;
}

.nav_search_selection a span {
	display: block;
	margin-top: 5px;
	color: #666666;
	font-weight: normal !important;
}

/** LEFTHAND NAVIGATION **/

nav#tabs {
	width: 15%;
	float: left;
}

nav#tabs .ui-tabs-nav {
	width: 100%;
	margin: 23px 0px 10px 0;
	padding: 10px 0px;
	background-color: #f8f8f8;
	border: 1px dotted #bebebe;
}

nav#tabs .ui-tabs-nav li {
	list-style: none;
	position: relative;
	top: 0;
	display: block; 
	width: 100%;
	padding: 0px;
	font-size: 0.8em; 
	border: none;
	outline: none;
	background-color: #f8f8f8;
	clear: both;
	margin-bottom: -1px;
}

nav#tabs .ui-tabs-nav li.ui-tabs-active {
	width: calc(100% + 30px);
	margin-left: -15px;
}

nav#tabs .ui-tabs-nav li a {
	text-decoration: none;
	display: block; 
	width: calc(100% - 10px);
	text-decoration: none; 
	padding: 12px 5px;
	color: #333333;
	background-color: #f8f8f8;
	border-bottom: 1px dotted #bebebe;
	text-align: center;
	white-space: normal;
}

nav#tabs .ui-tabs-nav li:last-child a {
	border-bottom: none;
}

nav#tabs .ui-tabs-nav li:first-child a {
	border-top: 1px dotted #f8f8f8;
}
nav#tabs .ui-tabs-nav li.ui-tabs-active {
	border: none;
}
nav#tabs .ui-tabs-nav li.ui-state-hover {
	background-color: #ffffff;
}
nav#tabs .ui-tabs-nav li.ui-state-hover a {
	background-color: #ffffff; 
	color: #000000;
	outline: none; 
}
nav#tabs .ui-tabs-nav li.ui-state-focus a {
	outline: 1px dotted #999999 !important;
}

nav#tabs .ui-tabs-nav li:first-child.ui-state-hover a {
	border-top: 1px dotted #bebebe;
}

nav#tabs .ui-tabs-nav li:last-child.ui-state-hover a {
	border-bottom: 1px dotted #bebebe;
}

nav#tabs .ui-tabs-nav li:first-child.ui-tabs-active a {
	border-top: none;
}

nav#tabs .ui-tabs-nav li.ui-tabs-active a {
	background-color: #6c6c6c;
	border: none;
	color: #ffffff; 
	outline: none !important;
}

@media screen and (max-width:1000px) {

	nav#tabs .ui-tabs-nav li.ui-tabs-active {
		width: calc(100% + 18px);
		margin-left: -9px;
	}
	nav#tabs .ui-tabs-nav {
		padding: 5px 0px;
	}
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
	cursor: text;
}

/******************** TITLE BAR ********************/

#title_bar {
	clear: both; 
	margin: 20px 0px 10px 0px; 
}

#title_bar h1 {
	margin: 0;
	clear: both;
}

#title_bar .item_reference {
	padding-top: 4px;
	max-width: 28%;
	float: left;
	clear: right;
	white-space: nowrap;
}

/* TITLE BAR BUTTON AREA */

#title_bar #title_bar_button_area {
	width: 20%; 
	float: right;
}

#title_bar #title_bar_button_area input,
#title_bar #title_bar_button_area button,
#title_bar #title_bar_button_area a {
	float: right;
	text-align: center;
}

#title_bar #title_bar_button_area input:focus,
#title_bar #title_bar_button_area button:focus {
	outline: none !important;
}

/* Save button repositioning on edit pages - puts button in bottom right of screen */

form #title_bar #title_bar_button_area {
	width: 100%;
	height: 45px;
	z-index: 1;
	position: fixed;
	bottom: 0px;
	right: 0px;
	background-color: #fff;
	background-image: url("/static/images/dotted-line.png") ;
	background-repeat: repeat-x;
	padding-top: 17px;
	padding-bottom: 0px;
}

form #title_bar #title_bar_button_area input {
	float: left;
	width: 95px;
	margin-left: calc(50% + 535px);
}

/* COPY AND FAVOURITE BUTTONS */

#title_bar .item_reference #copy_button {
	width: 20px;
	height: 20px;
	margin-bottom: 0px !important;
	margin-left: 5px;
	border-bottom: none;
	background: none;
	background: url("/static/images/copy-documents-20x20.png") no-repeat left 0px;
}

#title_bar .item_reference #copy_button:hover,
#title_bar .item_reference #copy_button:focus {
	background: url("/static/images/copy-documents-20x20-hover.png") no-repeat left 0px;
}

#title_bar .item_reference button#favourite_button {
	width: 20px;
	height: 20px;
	margin-bottom: 0px !important;
	margin-left: 5px;
	border-bottom: 0px !important;
	background-color: #fff;
}

#title_bar .item_reference button.favourite_false {
	background: url("/static/images/favourite-star-hollow-16x16.png") no-repeat left 4px !important;
}

#title_bar .item_reference button.favourite_false:hover,
#title_bar .item_reference button.favourite_false:focus {
	background: url("/static/images/favourite-star-hollow-16x16-focus.png") no-repeat left 4px !important;
}

#title_bar .item_reference button.favourite_true {
	background: url("/static/images/favourite-star-filled-16x16.png") no-repeat left 4px !important;
}

#title_bar .item_reference button.favourite_true:hover,
#title_bar .item_reference button.favourite_true:focus {
	background: url("/static/images/favourite-star-filled-16x16-focus.png") no-repeat left 4px !important;
}

@-moz-document url-prefix() {
	#title_bar .item_reference button.favourite_true,
	#title_bar .item_reference button.favourite_false,
	#title_bar .item_reference button.favourite_true:hover,
	#title_bar .item_reference button.favourite_false:hover,
	#title_bar .item_reference button.favourite_true:focus,
	#title_bar .item_reference button.favourite_false:focus	{
		background-position: left 0px !important;
	}
}

/* For Firefox! */

@-moz-document url-prefix() {
	#title_bar .item_reference {
		padding-top: 8px;
	}
	#title_bar .item_reference button {
		height: 30px;
	}
}

/******************** SEARCH BARS ********************/

#search_bar {
	width: 100%;
	margin-bottom: 10px;
	float: left;
	clear: both;	
}

#search_bar h3 {
	font-size: 1rem;
	margin-top: 5px;
}

#search_bar input[type="text"] {
	width: 450px;
	margin: 0px; 
	border: 1px solid #aaa;
	float: left; 
}

#search_bar #search_button {
	width: 33px;
	height: 33px;
	padding: 0px 0px 0px 33px;
	margin: 0px 8px 3px 0px;
	border: none;
	background: #757575 url("/static/images/search_icon_white_17x17.png") no-repeat 9px 9px;
	float: left;
	cursor: pointer;
	overflow: hidden;
}

#search_bar #search_button:hover,
#search_bar #search_button:focus,
#search_bar #search_button:active {
	background-color: #555;
}

#search_bar #search_results {
	font-size: 0.9rem;
	display: block;
	/*width: 25%;*/
	color: #333;
	margin-top: 7px;
	float: left;
	white-space: nowrap;
}

/* FOR EDIT PAGES */

.form_section #search_bar {
	margin-top: 5px;	
	margin-bottom: 0px;
}

/******************** MAIN PAGE LAYOUT ********************/

.form_section {
	width: 100%; 
	padding: 0px; 
	margin: 10px 0px;
}

#page_content {
    display: none;
	max-width: 1300px; 
	min-width: calc(768px - 4%);
	height: 100%;
	min-height: 500px;
	padding: 5px 2% 20px 2%;
	margin: 20px auto 30px auto; 
	border: 1px solid #f8eee7;
	background-color: #fff; 
}

#main_content {
	width: 82%; 
	padding: 0px 0px; 
	margin: 10px 0; 
	background-color: #fff; 
	border: none; 
	float: right; 
}

#main_content_no_tabs {
	padding: 0px 0px;
	margin: 10px 0;
	background-color: #fff;
	border: none;
}

.edit_page {
	padding: 0px;
	border: none !important;
}

/* page_section replaces .form_section followed by fieldset on non-form pages */

.page_section {
	width: calc(100% - 22px);
	padding: 10px 10px 20px 10px; 
	margin: 8px 20px 40px 0; 
	background-color: #fff; 
	border: 1px solid #bebebe;
	clear: both;
}

.page_section h2 {
	display: inline-block;
	padding: 0px 15px; 
	margin: 0px;
	background-color: #fff;
	position: relative;
	top: -20px;
}

.page_section h2 {
	font-size: 1.3rem;
}

/******************** FORMS ********************/

/* FORM ELEMENTS */

form {
	padding: 0px;
	border: none !important;
}

fieldset {
	padding: 10px 10px 10px 10px; 
	margin: 0px 0 30px 0; 
	background-color: #fff; 
	border: 1px solid #bebebe;
}

legend {
	font-family: Helvetica, sans-serif; 
	font-size: 1.3rem; 
	padding: 0px 15px; 
	margin: 0px;
	color: #00778f;
}

label {
	font-size: 0.9rem; 
	display: block;
	margin-top: 6px;
	margin-right: 8px; 
	color: #000;
	float: left; 
	text-align: right; 
	line-height: 1.4rem; 
	clear: none; 
}

input,
select,
textarea,
button,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button{
	font-family: Verdana,Arial,sans-serif; 
	font-size: 0.9rem !important; 
	line-height: 1.4rem; 
	margin: 0px 0px 20px 0px; 
	color: #000;
	background-color: #f4f4f4;
	border: 1px solid #ccc;
}

select option {
	margin-top: 5px; /* only works in Firefox not Chrome or IE */
}

textarea {
	min-height: 27px;
	padding: 8px 3px 8px 8px;
}

select {
	min-height: 33px;
	padding: 3px 0 3px 3px;
	cursor: pointer;
}

input {
	min-height: 25px;
	padding: 3px 3px 3px 8px;
}

input[type="checkbox"] {
	max-width: 17px;
	min-height: 17px;
	height:17px; 
	float: left;
}

/* Disabled controls (includes checklists) */

input[disabled], 
textarea[disabled], 
select[disabled] {
	color: #666;
	background-color: #fff;
	border: 1px solid #e8e8e8;
}

select[disabled] {
    -webkit-appearance: none; /* hide select down arrow */
    -moz-appearance: none; /* hide select down arrow */
	cursor: default;
}

select[disabled]::-ms-expand {
    display: none; /* hide select down arrow in IE10 */
}

a[disabled] {
	color: #666 !important;
	text-decoration: none;
	outline: none;
}

a[disabled]:hover {
	cursor: default;
}

/* FORM LAYOUT */

.form_section {
	padding: 0px; 
	margin: 15px 0px 0px 0px; 
}

.form_section div {
	padding: 0px; 
	margin: 5px 0px; 
}

.form_section p {
	margin-right: 10px;
}

/******************** BUTTONS ********************/

/* DARK BLUE BUTTONS (PRIMARY) */

/* NB. Styles marked !important to stop ipad using it's own styling */

.dark_blue_button {
	font-size: 0.8rem !important;
	text-align: center; 
	text-decoration: none; 
	color: #fff !important;
	background-color: #226d7c !important;
	padding: 10px 30px !important;
	border: 1px solid #226d7c !important;
	border-radius: 3px;
	white-space: nowrap !important; 
	cursor: pointer !important;
	text-transform: uppercase;
}

.form_section .dark_blue_button {
		margin-top: 10px;
}

#title_bar_button_area .dark_blue_button {
	margin-bottom: 0px;
}

.dark_blue_button:focus,
.dark_blue_button:hover,
.dark_blue_button:active {
	background-color: #1b5864 !important;
	outline: none !important;
}

.dark_blue_button[disabled] {
	background-color: #eee !important;
	color: #666 !important;
	cursor: default !important;
	text-transform: uppercase !important;
	border-color: #ddd !important;
}

a.dark_blue_button {
	display: inline-block;
	font-size: 0.8rem;
}

input.dark_blue_button,
button.dark_blue_button {
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 6px 30px 6px 30px !important;
}

.add_button {
	display: inline-block;
	padding: 4px 20px 4px 20px !important;
	float: left;
}


/* OUTLINE BUTTONS (SECONDARY) */

.secondary_button {
	font-size: 0.8rem !important;
	text-align: center; 
	text-decoration: none; 
	color: #226d7c !important;
	background-color: #fff !important;
	padding: 10px 30px !important;
	border: 1px solid #226d7c !important;
	border-radius: 3px;
	white-space: nowrap !important; 
	cursor: pointer !important;
	text-transform: uppercase
}

.secondary_button:focus,
.secondary_button:hover,
.secondary_button:active {
	background-color: #fff !important;
	color: #000 !important;
	border: 1px solid #000 !important;
	outline: none !important;
}

a.secondary_button {
	display: inline-block;
	font-size: 0.8rem;
}

input.secondary_button,
button.secondary_button {
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 6px 30px 6px 30px !important;
}

/* ADD NEW PERSON OR ORGANISATION BUTTON IN POP-UP WINDOW - appears as a link */

p.add_new_inline_button {
	display: block;
	clear: both;
	font-size: 0.9rem;
	color: #555;
}

.add_new_inline_button input {
	display: inline !important;
	background: none !important;
	border-bottom: 0px !important;
	padding: 0px !important;
	width: auto !important;
	color: #0d5982 !important;
	font-size: 1rem;
	text-decoration: underline;
	text-transform: lowercase;
}

@-moz-document url-prefix() {
    .add_new_inline_button input {
    	padding: 5px !important;
		margin-left: 0px !important;
		margin-top: -8px !important;
    }
}

.add_new_inline_button input:hover,
.add_new_inline_button input:focus,
.add_new_inline_button input:active {
	text-decoration: none; 
	color: #555 !important; 
}

/* DELETE BUTTONS */

/* White cross on red background buttons */

a.delete_link {
	width: 22px;
	height: 22px;
	background: url("/static/images/delete-cross-red.png") no-repeat left top;
}

a.delete_link span {
	position: absolute;
	left: -10000px;
}

a.delete_link:hover,
a.delete_link:focus,
a.delete_link:active {
	background: url("/static/images/delete-cross-grey.png") no-repeat left top;
	outline: none;
}

/* Large delete buttons e.g. for deleting projects */

.red_button {
	font-size: 0.8rem !important;
	text-align: center; 
	text-decoration: none; 
	color: #fff !important;
	background-color: #cf1e00 !important;
	padding: 10px 30px !important;
	border: 1px solid #cf1e00 !important;
	border-radius: 3px;
	white-space: nowrap !important; 
	cursor: pointer !important;
	text-transform: uppercase
}

.red_button:focus,
.red_button:hover,
.red_button:active {
	background-color: #555 !important;
	color: #fff !important;
	border: 1px solid #fff !important;
	outline: none !important;
}

a.red_button {
	display: inline-block;
	font-size: 0.8rem;
}

input.red_button,
button.red_button {
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 6px 30px 6px 30px !important;
}

/* BROWSE BUTTONS */

span.file_input_browse_button {
	display: inline-block;
	width: 70px;
	height: 18px;
	font-size: 0.9em;
	color: #333;
	background: #dcecff !important;
	border: 1px solid #dcecff !important;
	cursor: pointer !important;
}


/******************** TABLES ********************/

/* GENERAL TABLES STYLING */

table {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 15px;
	border-collapse: collapse;
	border-left: 1px solid #ddd;	
}

thead tr {
	background-color: #acacac;
}

table a {
	display: block;
/*	text-decoration: none; */
/*	color: #222 !important; */
	width: 100%;
	height: 100%;
}

th {
	font-size: 0.9rem; 
	font-weight: normal; 
	padding: 10px; 
	text-align: left; 
	color: #000; 
	border: none;
	border-right: 1px dotted #fff;
	line-height: 1.4rem; 
}

th.first_heading_cell {
	border-left: 1px solid #acacac;
}

th.last_heading_cell {
	border-right: 1px solid #acacac;
}

td {
	font-size: 0.9rem; 
	padding: 10px;
	line-height: 1.4rem; 
}

/* This style is to wrap organisation and company names that don't automatically wrap in the browser because the spaces between words are in some format that the browser doesn't understand. NB: a fixed css width has to be set for the cell for this to work. */

td span.wrap_name {
	display: block;
	word-wrap: break-word;
}

/* Delete button cells */

th.delete_button_cell {
	background-color: #fff;
	border-right: 1px solid #fff !important;
}

th.delete_button_cell span {
	position: absolute;
	left: -10000px;
}

td.delete_button_cell {
	background-color: #fff;
	width:  32px;
	border: none !important;
	padding: 0px !important;
}

td.delete_button_cell a.delete_link {
	position: relative;
	top: 5px;
	left: 8px;
}

/* LIST TABLES */

.change_list_section tbody tr {
	background-color: #ebebeb;
}

.change_list_section td {
	border-top: 3px solid #fff; 
	border-right: 1px dotted #fff; 
	color: #222;
}

.change_list_section td a {
	text-decoration: none;
	color: #222 !important;
}

.change_list_section p {
	color: #267b8c;
	font-style: normal !important;
	line-height: 1.3rem;
}	

.change_list_section .hover_table_row,
.change_list_section .focus_table_row,
.change_list_section .focus_table_row a {
	background-color: #f8f8f8 !important;
	cursor: pointer;
}

/* Pagination for list tables */

ul.pagination {
	display: block; 
	padding: 0px; 
	margin: 10px 0px 10px 0px; 
	clear: both; 
}

ul.pagination li {
	float: left; 
	clear: none; 
	display: block; 
	margin: 10px 6px 0px 0px; 
	padding: 0px; 
}

ul.pagination li a {
	display: block; 
	background-color: #6e6e6e;
	color: #fff; 
	margin: 0px; 
	padding: 5px; 
}

ul.pagination li a:hover,
ul.pagination li a:focus,
ul.pagination li a:active {
	background-color: #4b4b4b;
	text-decoration: none; 
	outline: none;
}

ul.pagination li.pagination-page {
	padding: 4px; 
	border: 1px solid #bebebe;
}

ul.pagination li.pagination-previous {
	background: url("/static/images/pagination_left_arrow.png") no-repeat left 40%; 
}

ul.pagination li.pagination-previous a {
	padding-left: 0px; 
	margin-left: 18px;
}

ul.pagination li.pagination-next {
	background: url("/static/images/pagination_right_arrow.png") no-repeat right 60%; 
}

ul.pagination li.pagination-next a {
	padding-right: 0px; 
	margin-right: 18px; 
}

ul.pagination li.pagination-previous a, 
ul.pagination li.pagination-next a {
	background-color: #fff; 
	color: #1979c2;
}

ul.pagination li.pagination-previous a:hover, 
ul.pagination li.pagination-next a:hover {
	text-decoration: none; 
}

/* INLINE AND INLINE FORM SET TABLES */

.inline_table tbody tr,
.inline_formset_table tbody tr {
	background-color: #fff;
}

.inline_table td,
.inline_formset_table td {
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	padding: 10px;
	margin: 0px;
}

.inline_table td input,
.inline_table td select,
.inline_table td textarea,
.inline_formset_table td input,
.inline_formset_table td select,
.inline_formset_table td textarea {
	padding: 5px;
	margin: 0px;
}

.inline_table td input,
.inline_formset_table td input {
	width: 90%;
}

.inline_table td textarea,
.inline_formset_table td textarea {
	width: 95%;
}

.inline_table td select,
.inline_formset_table td select {
	width: 99%;
}

.inline_table td textarea,
.inline_formset_table td textarea {
	height: 50px;
	margin-bottom: -9px;
}

.inline_table .hover_table_row,
.inline_formset_table .hover_table_row {
	background-color: #eee;
}

.inline_table tfoot th,
.inline_formset_table tfoot th {
	text-align: right;
	padding: 20px;
}

.inline_table th.activity_status,
.inline_formset_table th.activity_status {
	border-right: 1px solid #acacac;
}

.inline_formset_table td a {
	outline: none;
}

.inline_table td a,
.inline_formset_table td a {
	text-decoration: none;
	color: #222 !important;
}

.inline_formset_table td a:focus,
.inline_formset_table td a:active {
	background-color: #eee;
}


/* SUMMARY TABLE */

.summary_table {
	border: 1px solid #acacac;
	margin: 15px 0px 25px 0px;
}

.summary_table th {
	width: 20%;
	font-weight: normal;
	color: #000;
	background-color: #acacac;
	border: none;
	border-bottom: 1px solid #fff;
	border-left: 1px dotted #fff;
	line-height: 1.4rem;
}

.summary_table th:first-child {
	border-left: 1px solid #acacac;
}

.summary_table td {
	font-weight: normal;
	color: #333;
	border: none;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	line-height: 1.4rem;
}

.summary_table td:last-child {
	border-right: 1px solid #ddd;
}

/* temporary measure to stop orange border around table entries - need to work out a way of producing hover styling, i.e. different background, on focus */

.inline_formset_table table a:active,
.inline_formset_table table a:focus {
	outline: none;
	background-color: #eee;
}

.change_list_section table a:active, 
.change_list_section table a:focus {
	outline: none;
	background-color: #fff;
}

#confirm_delete_window {
	height: 300px; 
}

/******************** DIALOG WINDOWS ********************/

.ui-dialog {
	padding: 0px;
	border-radius: 25px;
}

.ui-corner-all {
	border-radius: 2px;
}

.ui-dialog .ui-dialog-title {
	font-size: 1.5em;
	font-family: Helvetica, sans-serif; 
	margin: 7px 0px;
	color: #157e8d;
	line-height: 1.2em;
	font-weight: normal;
	white-space: normal !important;
	overflow: visible;
}

.ui-dialog .ui-widget-header {
	margin-bottom: 15px;
	border: none;
	border-bottom: 1px dotted #ccc;
	background: #fff;
}

/* close icon in title bar of dialog windows */

.ui-dialog-titlebar .ui-icon {
	width: 18px;
	height: 18px;
	background-position: left top;
}

.ui-dialog-titlebar .ui-icon,
.ui-dialog-titlebar .ui-widget-content .ui-icon,
.ui-dialog-titlebar .ui-widget-header .ui-icon,
.ui-dialog-titlebar .ui-state-default .ui-icon {
	background-image: none !important;
	border: none !important;
	outline: none !important;
}

.ui-dialog-titlebar button {
	border-bottom: none !important;
	border: none !important;
	outline: none !important;
	background-image: url("/static/images/pop-up-delete.png");
	background-color: #fff !important;
	width: 18px !important;
}

.ui-dialog-titlebar button.ui-button-icon-only {
	position: absolute !important;
	top: 30px !important;
	right: 23px !important;
}

.ui-dialog-titlebar button:hover,
.ui-dialog-titlebar button:focus,
.ui-dialog-titlebar button:active {
	background-image: url("/static/images/pop-up-delete-light.png");
	border: none !important;
	outline: none !important;
}

.ui-dialog .dialog_content label,
.ui-dialog .dialog_content select,
.ui-dialog .dialog_content input,
.ui-dialog .dialog_content textarea {
	font-size: 0.8em;
}

.ui-dialog .dialog_content p {
	font-size: 0.8em !important;
	font-style: italic;
}

.ui-dialog .dialog_content p input {
	font-size: 1em;
}

.ui-dialog ul.ui-menu {
	padding: 5px;
}

.ui-dialog li.ui-menu-item {
	font-size: 0.8em;
	line-height: 1.2em;
}

.ui-dialog .ui-dialog-buttonpane {
	margin-top: 0px;
	border-top: 1px dotted #ccc;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button {
	font-size: 0.8em;
	padding: 9px 30px 7px 30px;
	background: #00778f;
	border-bottom: 3px solid #006d82;
	border-radius: 3px; 
	color: #fff;
	white-space: normal;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button:focus,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button:active {
	padding: 9px 30px 7px 30px;
	border-bottom: 3px solid #005469;
	background-color: #005469;
	color: #fff;
	outline: none;
}

/** PERSON NON-USER CREATE DIALOG **/

#person_non_user_create_form {
	width: 700px;
}

#person_non_user_create_form label {
	width: 120px;
}

#person_non_user_create_form input {
	width: 180px;
	margin-bottom: 15px;
}

#person_non_user_create_form select {
	width: 192px;
	margin-bottom: 15px;
}

#person_non_user_create_form #person_name_section div:nth-of-type(2),
#person_non_user_create_form #person_name_section div:nth-of-type(3) {
	float: left;
}

#person_non_user_create_form #person_name_section div:nth-of-type(2) {
	width: 51%
}

#person_non_user_create_form #person_name_section div:nth-of-type(3) {
	width: 49%
}

#person_non_user_create_form #contact_details_section input#id_email_address {
	width: 300px;
}

#person_non_user_create_form #contact_details_section div:nth-of-type(2),
#person_non_user_create_form #contact_details_section div:nth-of-type(3) {
	float: left;
}

#person_non_user_create_form #contact_details_section div:nth-of-type(2) {
	width: 51%;
}

#person_non_user_create_form #contact_details_section div:nth-of-type(3) {
	width: 49%;
}

#person_non_user_create_form #contact_details_section input[id*="id_address_line_"] {
	width: 300px;
}

/******************** DATE PICKER ********************/

.ui-datepicker {
	padding: 0px !important;
	border: 1px solid #267b8c !important;
}

.ui-datepicker .ui-datepicker-header {
	font-size: 0.9em;
	font-weight: normal;
	background: #fff;
	border: none;
}

.ui-datepicker .ui-datepicker-calendar {
	border: none !important;
}

.ui-datepicker .ui-datepicker-calendar th {
	border-right: 1px dotted #fff;
}

.ui-datepicker .ui-datepicker-calendar th:last-of-type {
	border-right: none;
}

.ui-datepicker td a {
	background: none !important;
	border: 1px solid #fff !important;
}

.ui-datepicker td a:hover,
.ui-datepicker td a:focus,
.ui-datepicker td a:active,
.ui-datepicker td.ui-datepicker-current-day a {
	border: 1px solid #aaa !important;
	border-radius: 2px;
}

.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}

.ui-datepicker table {
	margin: 0px 0px 10px 0px;
}

.ui-datepicker th {
	border: 0;
}

.ui-datepicker td span,
.ui-datepicker td a {
	padding: .2em .8em .2em .2em;
	margin: 0px;
	width: 70%;
}

/******************** SLIDER ********************/

/** Slider on project status diagram **/

#timeline_pan_container {
	height: 30px;
}

#timeline_pan_container .ui-slider span.ui-slider-handle {
	height: 21px;
	border-radius: 2px;
	outline: none !important;
}

#timeline_pan_container .ui-slider span.ui-slider-handle.ui-state-focus,
#timeline_pan_container .ui-slider span.ui-slider-handle.ui-state-active {
	border: 1px solid #267b8c !important;
	background: #dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;
}

#timeline_pan_container .ui-slider span.ui-icon-grip-dotted-vertical {
		left: 48%;
		top: 2px;
}

/******************** ERROR MESSAGES ********************/

/* FORM FIELDS SHOWING A LIST OF ERRORS */

.errorlist {
	width: 100%;
	display: block;
    background-color: #cf1e00;
    color: #fff;
	padding: 0px;
	clear: both;	
}

.errorlist li {
	font-size: 0.9rem;
	padding: 1px 10px 1px 10px;
	line-height: 1.3rem;
}

.dialog_content .errorlist {
	position: static !important;
	margin-bottom: 5px;
} 

/* ERROR MESSAGES AT TOP OF DIAGLOGUE BOXES */

.dialog_content .error_notification {
	margin-bottom: 10px;
	padding-bottom: 5px;
	font-size: 0.8em;
}

.dialog_content .error_notification a {
	color: #fff;
}

/* ERROR BANNER AT TOP OF PAGE CONTAINING ERRORS */

.error_notification {
    background-color: #cf1e00;
    color: #fff;
	padding: 5px 0px 0px 10px;
}

/* HIGHLIGHT A TAB WITH AN ERROR */

.error_tab {
    background-color: #cf1e00 !important;
    color: #fff !important;
}

/******************** USER ASSISTANCE ********************/

/* User system assistance text */

.user_system_assistance {
	background-color: #daf1f5;
	padding: 8px 10px 1px 12px !important;
	margin-bottom: 20px !important;
	border: 1px solid #ddd;
}

.user_system_assistance p,
.user_system_assistance li {
	margin-bottom: 7px;
	color: #666;
	font-style: italic;
	line-height: 1.3rem;
}

.user_system_assistance a {
	outline: none;
}

.user_system_assistance a:focus {
	text-decoration: underline;
}

.user_system_assistance a:hover {
	text-decoration: none;
}

/* User results assistance text e.g. under Recruitment input method select */

.user_results_assistance p,
.user_results_assistance li,
p.user_results_assistance,
p.empty_table_message  {
	color: #267b8c;
	font-style: normal !important;
	line-height: 1.3rem;
}

p.empty_table_message  {
	margin-bottom: 10px;
}

#search_results.user_results_assistance {
	color: #267b8c !important;
	font-style: normal !important;
	line-height: 1.3rem;
}

/* User alert text */

.user_alert_assistance {
	display: block;
	font-size: 0.8rem;
	line-height: 1.2rem;
	color: #cf1e00;
	border: 1px solid #cf1e00;
	padding: 3px 8px;
}

/******************** SKIP LINKS ********************/

.skip_to_link {
	position: absolute;
	top: -1000px;
	left: -1000px;
	height: 1px;
	width: 1px;
	text-align: left;
	overflow: hidden;
}

a.skip_to_link:active, 
a.skip_to_link:focus, 
a.skip_to_link:hover {
	left: 0; 
	top: 0;
	color: #555;
	width: auto; 
	height: auto; 
	overflow: visible; 
	padding: 5px;
	background-color: white;
	outline: none !important;
}

/******************** CLEAR ********************/

.clear {
	width: 100%; 
	height: 2px;
	margin: 0px; 
	clear: both; 
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/******************** CONFIRM DELETE WINDOW ********************/

.dialog_content p {
	font-size: 1rem; 
}

.delete_object {
	max-width: 600px;
	margin-top: -12px !important;
}

.delete_object span.object_to_delete {
	font-style: normal !important;
	color: #267b8c;
}

/* Delete windows for departments and sub-departments (appear in several places) */

.dialog_content  #delete_sub_department_form .error_notification,
.dialog_content  #delete_department_form .error_notification {
    background-color: #fff;
    color: #cf1e00;
}

.dialog_content  #delete_sub_department_form .error_notification + p,
.dialog_content  #delete_department_form .error_notification + p {
	margin-top: 10px !important;
	margin-bottom: 20px;
}

.dialog_content  #delete_sub_department_form .delete_object,
.dialog_content  #delete_department_form .delete_object {
	padding-left: 10px;
}

.dialog_content  #delete_sub_department_form .error_notification span.object_to_not_delete,
.dialog_content  #delete_department_form .error_notification span.object_to_not_delete {
	font-weight: bold;
	font-style: normal;
}

.dialog_content  #delete_sub_department_form  ul {
	padding: 8px;
	margin-bottom: 20px;
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid #eee;
}
	
.dialog_content  #delete_sub_department_form li {
	padding-left: 15px;
	margin-left: 10px;
	background: url("/static/images/bullet-point.png") no-repeat left 8px;
}

.dialog_content  #delete_sub_department_form li a {
	text-decoration: underline;
	outline: none;
}

.dialog_content  #delete_sub_department_form li a:hover {
	text-decoration: none;
}

/******************** HIDE CONTENT - BUT still visible to screenreaders ********************/

.hide_content {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Hidden skip links at top of each page */

#header-hidden a {
	display: inline;
	clear: none;
	padding: 0px;
	margin: 0px;
	font-size: 0px;
	color: #fff;
}

#header-hidden a:active, 
#header-hidden a:focus {
	padding: 5px;
	margin: 0px !important;
	font-size: 0.9rem;
	color: #333;
}

/******************** COLLAPSIBLE SELECTION ********************/
.collapsible_button {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 10px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
}

.collapsible_button:before {
	content: '+';
	margin-right: 5px;
}

.collapsible_button.active:before {
	content: '-';
}

.collapsible_button:hover {
  background-color: #ccc;
}

.collapsible_content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}


/******************** BACK TO PREVIOUS PAGES LINKS ********************/		

/** Go to previous page link **/

a.back_link  {		
	display: block;		
	font-size: 0.9em;		
	padding: 10px 5px 10px 25px;		
	margin-bottom: 0px;		
	margin-right: 20px;		
	color: #fff;		
	background: #757575 url("/static/images/left-arrow-white.png") no-repeat 6px 12px; 		
	text-align: left;		
	float: left;		
}
		
a:hover.back_link,		
a:focus.back_link {		
	text-decoration: none; 		
	outline: none;		
}

/** Go back to list page **/

.back_to_list a {
	margin-right: 0px;
	padding: 7px 20px 8px 15px;
	border-right: 10px solid #757575;
	color: #fff !important;
	background: #757575 url("/static/images/right-arrow-white.png") no-repeat right 8px;
	float: right;
}

/******************** MEDIA QUERIES ********************/

@media screen and (max-width:1360px) {

	form #title_bar #title_bar_button_area input {
		float: right !important;
		margin-left: 0px;
		margin-right: 40px !important;
	}

	/*#main_top_nav ul li.nav_search_container {
		margin-right: 20px;
	}*/
	
}

@media screen and (max-width:1310px) {

	/*#main_top_nav ul li a {
		font-size: 0.9rem;
		padding: 10px 14px 3px 14px;
	}*/

}

@media screen and (max-width:1160px) {

	/*#main_top_nav ul {
		height: 55px;
	}

	#main_top_nav ul li a {
		font-size: 0.9rem;
		height: 55px;
		padding: 10px 10px 3px 10px; 
	}
	
	#main_top_nav ul li a#recruitment_import_menu_item {
		width: 88px;
		line-height: 1.2rem;
	}
	
	#main_top_nav ul li a#confirm_recruitment_menu_item {
		width: 130px;	
		line-height: 1.2rem;		
	}*/

}

@media screen and (max-width:1070px) {

	form #title_bar #title_bar_button_area input {
		margin-right: 30px !important;
	}
	
}

@media screen and (max-width:1040px) {
	
	#status .two_column_container .status_current_activities {
		width: calc(94% - 180px);
	}
	
}

@media screen and (max-width:1000px) {

	h1 span.header_no_wrap {
		white-space: normal;
	}
	
}

@media screen and (max-width:960px) {
	
	/*#main_top_nav ul {
		height: 52px;
	}
	
	#main_top_nav ul li a {
		line-height: 1.1rem;
		font-size: 0.8rem;
		padding: 10px 8px 13px 9px;
	}	
	
	#main_top_nav ul li input	{
		font-size: 0.8rem;
	}
	
	#main_top_nav ul li a#recruitment_import_menu_item {
		width: 78px;		
	}
	
	#main_top_nav ul li a#confirm_recruitment_menu_item {
		width: 115px;		
	}
	
	#main_top_nav ul li a#confirm_recruitment_menu_item #message_not_accurate {
		font-size: 0.7rem !important;
	}
	
	#main_top_nav ul li.nav_search_container input#menu_search_text {
		width: 160px;
	}*/

}

@media screen and (max-width:850px) {

	/*#main_top_nav ul li a {
		font-size: 0.8rem;
	}

	#main_top_nav ul li {
		border-right: 1px solid #666;
	}
	
	#main_top_nav ul li:last-of-type {
		border-right: none;
	}
	
	#main_top_nav ul li a {
		padding: 10px 5px 13px 5px;
	}*/
	
}

/******** Missing progress bar fix *********/
.ui-progressbar .ui-progressbar-value {
	margin: 0px;
	height: 100%;
	background-color: #157e8d;
	opacity: 0.25;
}

/******************** SCROLL ON PERSON SELECT FIELD ********************/

.ui-dialog div.ui-dialog-buttonpane + ul.ui-autocomplete {
	max-height: 150px;
	max-width: 632px;
	overflow-y: scroll;
	overflow-x: hidden;
}