/*--------------------------------------------------*/
/* Drop logo                                        */

	#pNames #pageFooter,
	#pNames #pageTitle,
	#pNamesSet #pageFooter,
	#pNamesSet #pageTitle,
	#pNamesPreview #pageTitle,
	#pNamesPreview #pageFooter {
		display: none;
	}

	#pNames #pageContent,
	#pNamesSet #pageContent,
	#pNamesPreview #pageContent {
		padding-top: 0;
	}

/*--------------------------------------------------*/
/* Main page                                        */

	#pNames h2 {
		font-weight: bold;
	}

	#pNames form {
		margin: 0 0 20px 0;
	}

	#pNames form .row.submit {
		padding: 0 0 20px 20px;
	}

	#pNames .final_approval {
		margin: 10px 130px 40px 20px;
		border: 3px solid #D00;
		padding: 10px 10px 0 10px;
	}

	#pNames .tableWrapper {
		white-space: nowrap;
		overflow: auto;
		margin: 10px 0 30px 0;
	}

		@media only screen and (max-width: 990px) {
			body.responsive#pNames .tableWrapper {
				margin-right: -10px;
			}
		}

	#pNames h2 + .tableWrapper {
		margin-left: 20px;
	}

	#pNames table {
		color: inherit;
		background: #FFF;
		border-top: 1px solid #191D58;
		border-right: 0;
		border-bottom: 0;
		border-left: 1px solid #191D58;
	}

	#pNames table th {
		color: #000;
		background: #ABAFC5;
	}

	#pNames table th,
	#pNames table td {
		padding: 4px 6px;
		border-top: 0;
		border-right: 1px solid #191D58;
		border-bottom: 1px solid #191D58;
		border-left: 0;
	}

	#pNames table tr.even {
		background: #EFF0F5;
	}

	#pNames table td.no_results {
		text-align: center;
		padding: 20px;
	}

	#pNames table .names {
		text-align: right;
	}

	#pNames table .notes {
		width: 30em;
		white-space: normal;
	}

	#pNames table .notes input {
		width: 29em;
	}

/*--------------------------------------------------*/
/* Set                                              */

	#pNamesSet p.error {
		padding-bottom: 1em;
	}

	#pNamesSet div.submit {
		margin: 2em 0;
	}

/*--------------------------------------------------*/
/* Image                                            */

	#namesImage {
		height: 300px;
		width: 958px; /* Set for JS */
		overflow: auto;
		margin: 0 0 10px 0;
		position: relative;
		border: 1px solid #191D58;
		outline: 0; /* On OSX this causes a flickering outline between image focus and face markers */
	}

		#namesImage::-webkit-scrollbar {
			-webkit-appearance: none;
		}

		#namesImage::-webkit-scrollbar:vertical {
			width: 11px;
		}

		#namesImage::-webkit-scrollbar:horizontal {
			height: 11px;
		}

		#namesImage::-webkit-scrollbar-thumb {
			border-radius: 8px;
			border: 2px solid white; /* should match background, can't be transparent */
			background-color: rgba(0, 0, 0, .5);
		}

	#pAdminNamesJobFaceNameSet #namesImage,
	#pAdminNamesJobFaceNameVerify #namesImage,
	#pAdminNamesJobFaceNameGrid #namesImage,
	#pAdminNamesJobFaceNameText #namesImage,
	#pAdminNamesJobFaceMark #namesImage,
	#pAdminNamesJobFaceNameVerifyDetails #namesImage {
		width: 936px; /* (938 - (1*2)) ... different in admin (tabs) */
	}

	@media screen and (min-width: 1500px), print {
		#pAdminNamesJobFaceNameSet #namesImage,
		#pAdminNamesJobFaceNameGrid #namesImage,
		#pAdminNamesJobFaceNameText #namesImage,
		#pAdminNamesJobFaceMark #namesImage {
			width: 100%; /* Now page width is variable, this means that the dot focus is not going to be centred in names-set.js */
			box-sizing: border-box;
		}
	}

	#pAdminNamesJobFaceMark #namesImage {
		height: 600px;
	}

		@keyframes flash {
			0%, 100% {
				opacity: 1;
			}
			50% {
				opacity: 0.5;
			}
		}

	#pAdminNamesJobFaceMark #namesImage.flash {
		animation-duration: 0.1s;
		animation-name: flash;
	}

	#pAdminNamesJobFaceMark #namesImage img {
		user-select: none;
		-moz-user-select: none; /* Stop FireFox selecting the image on click */
	}

	#namesImage img {
		display: block;
	}

		#namesImage.js_names_active img,
		#namesImage.js_names_active .nameMarker {
			cursor: pointer;
		}

		#pNamesSet #namesImage.noNames,
		#pNamesPreview #namesImage {
			height: auto;
		}

		#pNamesSet #namesImage.noNames img,
		#pNamesPreview #namesImage img {
			max-height: 400px;
			max-width: 900px;
			margin: 10px auto;
		}

	#namesImage span.nameMarker {
		width: 10px;
		height: 10px;
		background: red;
		position: absolute;
	}

		#namesImage span.nameMarker_1 {
			background: blue;
		}

	#namesImage .nameMarkerCircle {
		width: 20px;
		height: 20px;
		border: 3px solid #F00;
		border-radius: 20px;
		position: absolute;
		text-align: center;
		text-decoration: none;
		color: #E00;
		color: rgba(238, 0, 0, 0);
		opacity: 0;
		outline: 0; /* Handled better below */
	}

	#namesImage .nameMarkerMatched {
		border-color: #0F4;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0.4;
	}

	#namesImage .nameMarkerMatched:hover,
	#namesImage .nameMarkerMatched:active,
	#namesImage .nameMarkerMatched:focus,
	#namesImage .nameMarkerMatched.nameMarkerFocus {
		border-color: #F00;
		background: none;
	}

	#namesImage .nameMarkerCircle:hover,
	#namesImage .nameMarkerCircle:active,
	#namesImage .nameMarkerCircle:focus {
		opacity: 1;
	}

	#namesImage .nameMarkerCircle.nameMarkerFocus {
		opacity: 1;
		background: #F00;
	}

	#namesImage .nameMarkerCircle.nameMarkerSubmitted {
		opacity: 1;
		border-color: #00F;
		background: rgba(0, 0, 255, 0.3);
	}

	#namesImage span.nameMarker.withName {
		background: green;
	}

/*--------------------------------------------------*/
/* Names preview                                    */

	#namesPreview .preview {
		margin: 0 0 10px 0;
		border: 1px solid #191D58;
		text-align: center;
		overflow: auto;
	}

	#namesPreview .preview h1,
	#namesPreview .preview h2,
	#namesPreview .preview h3 {
		color: #000;
		margin: 0;
		font-weight: bold;
		font-size: 1.2em;
	}

	#namesPreview .preview table {
		margin: 0 auto;
		white-space: nowrap;
	}

	#namesPreview .preview table strong {
		color: #D00;
	}

	#namesPreview .preview table td.logo_left {
		padding-right: 10px;
	}

	#namesPreview .preview table td.logo_right {
		padding-left: 10px;
	}

	#namesPreview .preview p.footer_absent,
	#namesPreview .preview p.footer_extra_1,
	#namesPreview .preview p.footer_extra_2 {
		margin: 0;
		color: #AAA;
	}

	#namesPreview .preview p:first-child {
		margin-top: 10px;
	}

	#namesPreview .preview p:last-child {
		margin-bottom: 10px;
	}

	#namesPreview .preview_notes {
		margin: 1em 0;
		color: #E00;
	}

	#namesPreview #approveForm {
		margin: 3em 0;
	}

	#namesPreview #approveForm p,
	#namesPreview #approveForm .row.acknowledge {
		margin: 0 0 1em 0;
	}

/*--------------------------------------------------*/
/* Verify                                           */

	#namesVerify {
		clear: both;
		margin: 0 0 10px 0;
		padding: 0.5em;
		border: 1px solid #191D58;
		overflow: auto;
	}

	#namesVerify table {
		border-collapse: collapse;
		margin: 0;
	}

	#namesVerify table th,
	#namesVerify table td {
		border: 1px solid #CCC;
		padding: 2px 5px;
	}

	#namesVerify table th {
		background: #EEE;
		text-align: center;
	}

	#namesVerify table td {
		width: 10em; /* aka min-width */
		white-space: nowrap;
	}

/*--------------------------------------------------*/
/* Verify form                                      */

	#namesVerifyForm {
		border: 1px solid #191D58;
		padding: 0 1em 1em 1em;
		margin: 0 0 10px 0;
	}

	#namesVerifyForm .row {
		margin: 1em 0 0 0;
	}

	#namesVerifyForm .row.changes .input {
		display: block;
		padding: 0.2em 0 0 0;
	}

	#namesVerifyForm .row.confirm .input,
	#namesVerifyForm .row.name .input {
		padding: 0.2em 0 0 1em;
	}

	#namesVerifyForm .row.confirm .input > span {
		margin: 0 1em 0 0;
	}

	#namesVerifyForm .row.confirm .input > span > label {
		padding: 0 0.5em 0 0;
	}

/*--------------------------------------------------*/
/* Verify view                                      */

	#namesVerifications .changed {
		font-weight: bold;
		color: #9400da;
	}

	#namesVerifications .matched {
		font-weight: bold;
		color: #070;
	}

	#namesVerifications .unmatched {
		font-weight: bold;
		color: #700;
	}

	#namesVerifications .verification:target {
		background: #dee3ff;
	}

	#pAdminNamesJobFaceNameVerify #miscChanges + p {
		margin-top: 2em;
	}

/*--------------------------------------------------*/
/* Form                                             */

	#namesForm {
		margin: 0 0 10px 0;
	}

	#namesForm .row {
		overflow: auto;
	}

	#namesForm #namesWrapper {
		clear: both;
		margin: 0 0 10px 0;
		padding: 0.5em 0 1em 0;
		border: 1px solid #191D58;
		overflow: auto;
	}

	#namesForm .row + #namesWrapper {
		margin-top: 18px; /* (10+5+3) */
	}

	#namesForm #namesWrapper ul,
	#namesForm #namesWrapper ol {
		list-style: none;
		margin: 0;
		white-space: nowrap;
	}

	#namesForm #namesWrapper ul li.names_row {
		padding-top: 5px;
	}

	#namesForm #namesWrapper ol,
	#namesForm #namesWrapper ol li,
	#namesForm #namesWrapper p {
		padding: 0;
		display: inline;
	}

	#namesForm #namesWrapper p {
		width: 1.3em;
		display: inline-block;
		margin: 0;
		padding: 2px 0 2px 0.5em;
		position: absolute;
		background: #FFF;
		text-align: left;
	}

	#namesForm #namesWrapper li.cols_row p {
		color: #FFF; /* Kind of hidden */
	}

	#namesForm #namesWrapper ol {
		padding: 0 0.5em 0 2em;
	}

	#namesForm #namesWrapper li.cols_row ol li span,
	#namesForm #namesWrapper li.names_row ol li input {
		width: 13em;
		border: 1px solid #AAA;
	}

	#namesForm #namesWrapper li.cols_row ol li span {
		display: inline-block;
		border-color: #FFF;
		text-align: center;
	}

	#namesForm #namesWrapper li.names_row ol li input.highlight {
		color: #D00;
		font-weight: bold;
	}

	#namesForm #namesWrapper li.names_row ol li input.extra {
		background: #EEE;
	}

	#namesForm #namesWrapper li.names_row ol li input.extra.used {
		background: #FDD;
	}

	#namesForm p.shortcuts {
		padding: 10px 0; /* Client view has this last, where margin will collapse */
		margin: 0;
	}

	#namesForm p.shortcuts strong {
		display: inline-block;
		min-width: 7em;
	}

	#namesForm p.formatting span {
		color: #AAA;
	}

	#namesForm .preview_notes {
		margin: 1.5em 0 0 0;
		color: #E00;
	}

	#namesForm .client_notes {
		margin: 1.5em 0 0 0;
	}

	#namesForm .client_notes .label {
		display: block;
		padding: 0 0 0.2em 0;
	}

	.ui-autocomplete.ui-widget {
		text-align: left;
		font-size: 1em;
		font-family: inherit;
		width: 300px;
		height: auto !important;
		height: 7em; /* IE6 */
		max-height: 7em;
		overflow: hidden;
	}

	.ui-autocomplete.ui-widget .ui-menu-item a {
		line-height: normal;
		padding: 2px 3px;
	}

	.ui-autocomplete.ui-widget .ui-menu-item a.ui-state-focus {
		border: 0;
		background: #DADADA;
	}

	.ui-autocomplete.ui-widget .ui-menu-item a em {
		font-size: 0.7em;
		font-style: normal;
	}

/*--------------------------------------------------*/
/* Names grid form                                  */

	#namesGridForm table {
		margin-bottom: 10px;
	}

	#namesGridForm .error_list {
		color: #D00;
		background: inherit;
		font-weight: bold;
	}

	#namesGridForm .row.submit {
		padding: 10px 0;
	}

/*--------------------------------------------------*/
/* Name text form                                   */

	#nameTextForm fieldset {
		border: 0;
	}

	#nameTextForm .error_list {
		color: #D00;
		background: inherit;
		font-weight: bold;
	}

	#nameTextForm .row.textarea .label {
		position: absolute;
		left: -5000px;
	}

	#nameTextForm .row.textarea textarea {
		width: 930px; /* 938 - ((3+1)*2) */
		border: 1px solid #191D58;
		padding: 3px;
	}

	#nameTextForm .row.submit {
		padding: 10px 0;
	}

/*--------------------------------------------------*/
/* Lock override field                              */

	#pageContent .row.textarea + .row.lock_override {
		margin-top: 1em;
	}

	#pageContent .row.lock_override {
		padding-left: 0;
	}

	#pageContent .row.lock_override .input,
	#pageContent .row.lock_override .label {
		float: none;
		display: inline;
		width: auto;
		margin-left: 0;
	}