/* 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 CONTENT
	- 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	
*/

/******************** 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 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;
}

/******************** 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;
}

/* Styling for Jquery UI autocomplete plugin dropdown list */
.ui-autocomplete {
	max-height: 230px;
	max-width: 550px;
	overflow: scroll;
}

#header_menus {
	display: none;
}

.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 **/

#page_content {
	display: none;
}

#page_content nav#tabs {
	width: 15%; 
	float: left; 
	margin: 18px 0px 10px 0px;
	padding: 10px 0px;
	background-color: #f8f8f8;
	border: 1px dotted #bebebe;
}

#page_content nav#tabs ul {
}

#page_content nav#tabs li {
	list-style: none;
	position: relative;
	top: 0;
	display: block; 
	padding: 0px;
	font-size: 0.9em; 
	border: none;
	outline: none;
	clear: both;
}

#page_content nav#tabs li a {
	text-decoration: none;
	display: block; 
	text-decoration: none; 
	padding: 12px 5px;
	color: #333;
	background-color: #f8f8f8;
	border-bottom: 1px dotted #bebebe;
	border-top: 1px dotted #f8f8f8;
	text-align: center;
	line-height: 1.4em;
}

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

#page_content nav#tabs li a.last_nav_tab {
	border-bottom: none;
}

#page_content nav#tabs li a:hover,
#page_content nav#tabs li a:focus  {
	background-color: #ffffff; 
	color: #000;
	outline: none;
	border-bottom: 1px dotted #bebebe;
}

#page_content nav#tabs li a.selected_tab_item {
	background-color: #6c6c6c;
	border: none;
	color: #fff; 
	margin: -1px -15px 0px -15px;
	outline: none;
	cursor: default;
}

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

#page_content nav#tabs li:first-child a.selected_tab_item:hover {
	border-top: none;
}

@media screen and (max-width:1000px) {
	
	#page_content nav#tabs li a.selected_tab_item {
		margin: -1px -9px 0px -9px;
	}
}

/******************** 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;
	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 0px 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; 
}

.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; 
}

textarea, 
select, 
input, 
button {
	font-family: Verdana, sans-serif; 
	font-size: 0.9rem; 
	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"] {
	width: 17px; 
	min-height: 17px;
	height:17px; 
	float: left;
}

/* Align checkbox with label */
.checkbox_container input[type="checkbox"],
.checkbox_container label {
	position: static !important;
}

.checkbox_container input[type="checkbox"] {
	margin-top: 8px;
}

.checkbox_container label {
	margin-left: 8px;
	margin-right: 0px;
}

.checkbox_container {
	display: block;
	height: 30px;
	clear: none;
}

/* 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.9rem;
}

/* 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 */

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;
}

/******************** 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 - projects list, participants list, people list, resources list */

.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 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_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;
	line-height: 1.4rem;
}

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

.summary_table tr:last-child th {
	border-bottom: 1px solid #acacac;
}

.summary_table tr:last-child td {
	border-bottom: 1px solid #acacac;
}

/* 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 CONTENT ********************/

.dialog_content p {
	max-width: 720px;
}

/******************** 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;
}

.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;
}

#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 ********************/

.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;
}

/******************** 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;
}

/******************** SYSTEM NOTIFICATION DIALOGS ********************/
.system_notification_form {
	width: 700px;
}

/******************** 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;
	}
	
}