/*
Author: Natalie Downe
Date: 28/09/2005
Description: Main styles to over-ride main.css called in a conditional comment for IE only 
	(must be kept synchronised for cascade and maintainabilityreasons)
	
	NOTE: any problems with IE please do not put hacks in here, use ie.css to over-ride
*/

/* -------------- Debug ---------------- */
/* Uncomment to show up possible legacy markup that needs replacing with css 
body:hover *[style], font, center {
	outline: 4px dashed red;
}


/* -------------- General -------------- */

html, body {
	height: 100%;	
}

body {
	background-color: white;
	color: black;
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 0.9em;
	font-weight: lighter;
}

a:link,
a:visited,
a:hover,
a:active {
	color: #698AB7;
	background-color: inherit;
}

a:hover,
a:active {
	color: #000066;
	background-color: inherit;
}

a:link img,
a:visited img,
a:hover img,
a:active img {
	border: none;
	text-decoration: none;
}

div.link {
	margin: 1em 0 1em 0;
	background-image: url(https://demo.blockoptions.io/images/icons/frontLinkArrow_6.png);
	background-position: 0 4px;
	background-repeat: no-repeat;
	padding-left: 20px;
}

/* -------------- Header -------------- */
div#header {
	position: relative;
	border-top: 10px solid #000066;
	border-bottom: 1px solid #000066;
	overflow: hidden;
}

img.logoForPrintingOnly, .printOnly {
	display: none;	
}

/*
h1, h2 {
	font-family: "Trebuchet MS", Sans-serif;
}
*/
div#header h1,
div#headerBanner h1 {
	display: none;
}

div#header img.bannerFullWidth {
	width: 100%;
}

div#globalSearch {
	position:absolute;
	top:40px;
	right: 3em;
}

div#globalSearch form,
div#globalSearch form div,
div#globalSearch form input[type=submit],
div#globalSearch form input[type=text]{
	margin:0;
}

div#globalSearch form input[type=text]{
	width:15em;
	font-size:1.1em;
	vertical-align: middle;
}

form input[type=text].helptext {
	color: #8A8A8A;
}

div#globalSearch form input.fastFindSubmit,
div#leftNav form input.fastFindSubmit{
	border:none;
	font-size:0.8em;
	text-decoration: none;
	border: 1px solid black;
	background-position: top left;
	background-repeat: no-repeat;
	font-weight: normal;
	font-size: 0.85em;
}

div#header img.banner {
	max-height: 200px;
}

h2#pageHeader {
	text-transform: uppercase;
	font-weight: lighter;
	width: 80%;
	font-size: 18pt;
	margin-top:0;
	padding-top:0;
	color: inherit;
	background-color: inherit;
}

p.tagLine {
	position: relative;
	top: -20px;
	font-size: 0.9em;
	padding: 0.25em 0;
	margin: 0 0 0 30px;
	color: #8A8A8A;
	background-color: inherit;
}
h2.pageSecondHeader + p.tagLine {
	margin:0;
}
div.displayTagContainer + h2.pageSecondHeader{
	margin-top:1em;
}
div.addNew {
	margin: 1em 0 0 1em;
	color: #8A8A8A;
	background-color: inherit;
}

p.noFormType {
	margin: 0 0 0 0;
}

h2 span.buyHeader {
	text-decoration: underline;
}
h2.subHeader {
	font-weight: lighter;
	width: 80%;
	font-size: 16pt;
	margin-top:-15pt;
	padding-top:0;
	color: inherit;
	background-color: inherit;
}

/* -------------- Navigation (Nav) -------------- */
div#nav {
	position: absolute;
	top: 20px;
	right:3em;
	font-size: 0.85em;
}

div#nav ul {
	margin: 0 0 0 0;
	padding: 0;
	list-style-type: none;
}

div#nav ul li {
	display: inline;
	margin-left: 1.3em;
}

div#nav ul li#diaryLink a:link,
div#nav ul li#diaryLink a:visited,
div#nav ul li#diaryLink a:hover,
div#nav ul li#diaryLink a:active,
div#nav ul li#jobHistoryLink a:link,
div#nav ul li#jobHistoryLink a:visited,
div#nav ul li#jobHistoryLink a:hover,
div#nav ul li#jobHistoryLink a:active {

	display: block;
	float: left;
	width: 8em;
	margin-top: -5px;
	padding: 0.5em 0 0 3em;
	height: 24px;
	position: relative;
	left: 15px;
}

div#nav ul li#jobHistoryLink a:link,
div#nav ul li#jobHistoryLink a:visited,
div#nav ul li#jobHistoryLink a:hover,
div#nav ul li#jobHistoryLink a:active {
	background-image: url(https://demo.blockoptions.io/images/icons/jobhistory_24.gif);
	background-repeat: no-repeat;
	background-position: left center;
	width: 9.8em;
}

div#nav ul li#diaryLink a:link,
div#nav ul li#diaryLink a:visited,
div#nav ul li#diaryLink a:hover,
div#nav ul li#diaryLink a:active {
	background-image: url(https://demo.blockoptions.io/images/icons/calendar_24.png);
	background-repeat: no-repeat;
	background-position: left center;
	width: 5em;
}

div#nav ul li#jobHistoryLink,
div#nav ul li#diaryLink,
div#nav ul li#myBuyersLink {
	padding: 0;
}

/* -------------- Essential (Nav) -------------- */

div#essentials {
	position: absolute;
	top: 110px;
	right: 3em;
	text-transform: uppercase;
	font-weight: bold;
	font-family: "Trebuchet MS", Sans-serif;
}

div#essentials ul {
	position: relative;
	top:-1em;
	margin: 0 0.95em 0 0;
	padding: 0;
	width: 100%;
}

div#essentials ul li {
	float: right;
	margin-left: 1.2em;
	padding-left: 0;
	list-style-type: none;
}

div#essentials a:link,
div#essentials a:visited,
div#essentials a:hover,
div#essentials a:active {
	text-decoration: none;
	color: #000066;
	background-color: inherit;
	margin-left: 0;
	padding-left: 0.7em;
	background-image: url(https://demo.blockoptions.io/images/icons/navArrowGrey_10.gif);
	background-repeat: no-repeat;
	background-position: 0 3px;
}

div#essentials a:hover {
	color: #698AB7;
	background-color: inherit;
	background-image: url(https://demo.blockoptions.io/images/icons/navArrowGreyHover_10.gif);
}


div#essentials a.buyLink:link,
div#essentials a.buyLink:visited,
div#essentials a.buyLink:hover,
div#essentials a.buyLink:active {
	text-decoration: underline;
}

/* -------------- Seller & Buyer Navigation when included in the Agency pages -------------- */

div#sellerNav ul, div#buyerNav ul, div#buyerFooterNav ul, div#sectionNav ul {
	list-style-type: none;
	border: 1px solid #EEEEF5;
	background-color: #F5F5F9;
	padding: 0 5px;
	margin: 0;
	border-radius: 0.8em;
}

div#sellerNav ul li, div#buyerNav ul li, div#sectionNav ul li {
	display: inline;
	padding: 0;
	margin: 0;
}

div#buyerNav ul li, div#buyerFooterNav ul li, div#sectionNav ul li {
	margin-left: 1em;
	padding-left: 10px;
	background-image: url(https://demo.blockoptions.io/images/icons/navArrowGrey_10.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	white-space: nowrap;
}

div#buyerNav ul li:hover, div#sectionNav ul li:hover {
	background-color: inherit;
	background-image: url(https://demo.blockoptions.io/images/icons/navArrowGreyHover_10.gif);
}

div#buyerNav ul li#act, 
div#buyerNav ul li#act:hover,
div#sectionNav ul li.actas,
div#sectionNav ul li.actas:hover {
	background-image: url(https://demo.blockoptions.io/images/icons/go_16.gif);
	padding-left: 18px;
}

div#sellerNav ul li a:link,
div#sellerNav ul li a:visited,
div#sellerNav ul li a:hover,
div#sellerNav ul li a:active {
	font-size: 0.95em;
	padding: 5px 10px 5px 26px;
	line-height: 2.5em;
	background-image: url(https://demo.blockoptions.io/images/icons/confirm_24.png);
	background-repeat: no-repeat;
	background-position: left top;
}

div#buyerNav ul li a:link,
div#buyerNav ul li a:visited,
div#buyerNav ul li a:hover,
div#buyerNav ul li a:active,
div#sectionNav ul li a:link,
div#sectionNav ul li a:visited,
div#sectionNav ul li a:hover,
div#sectionNav ul li a:active {
	font-size: 0.95em;
	padding: 5px 10px 5px 2px;
	line-height: 2.5em;
}

div#buyerNav ul li span,
div#sectionNav ul li span {
	font-size: 2.5em; 
	vertical-align: -13.5%;
	margin-right: 2px;
	font-family: "Trebuchet MS", Sans-serif;
}

div#sellerNav ul li.notSeen a:link,
div#sellerNav ul li.notSeen a:visited,
div#sellerNav ul li.notSeen a:hover,
div#sellerNav ul li.notSeen a:active {
	background-image: url(https://demo.blockoptions.io/images/icons/edit_24.gif);
	background-repeat: no-repeat;
	background-position: 2px top;
}

div#sellerNav ul li.seen a:link,
div#sellerNav ul li.seen a:visited,
div#sellerNav ul li.seen a:hover,
div#sellerNav ul li.seen a:active {
	background-image: url(https://demo.blockoptions.io/images/icons/confirm_24.png);
	background-repeat: no-repeat;
	background-position: left top;
}

div#sellerNav ul li.actas a:link,
div#sellerNav ul li.actas a:visited,
div#sellerNav ul li.actas a:hover,
div#sellerNav ul li.actas a:active {
	background-image: url(https://demo.blockoptions.io/images/icons/go_24.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

/* -------------- Content -------------- */
/*
div#content {
	padding:  55px 10% 0 10%;
	background-image: url(https://demo.blockoptions.io/images/gradient_bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
	min-height: 22em;
}
*/
/* In case of emergencies */
br.clear {
	clear: both;
}

/* -------------- Fast Find -------------- */

div#leftNav + div#mainContent {
	margin-left:19em
}

div#leftNav {
	
	width:17em;
}

div#leftNav form,
div#leftNav form div {
	border-radius:0;
}

div#leftNav h4 {
	color:white;
	padding:0
}

div#leftNav h5 {
	font-size:1em;
	display:inline-block
}

div#leftNav .searchType {
	padding: 0.7em 0 0.7em 2em;
	border-left:0.4em solid transparent;
	margin:0.4em 0;
}

div#leftNav div.leftNavBox > div {
	padding: 0.5em 0.8em;
}

div#leftNav .searchType a {
	text-decoration:none;
	color:black
}

div#leftNav .leftNavBox {
	background-color:#EEEEF5;
	margin-bottom:1em;
	border-radius:0.8em
}

div#leftNav div.leftNavBox div.leftNavTitle {
	color:white;
	padding:0.5em 0.8em
}

div#leftNav .filterSet {
	padding:0.8em;
}

div#leftNav .filterSet.collapsible {
	display:none
}

div#leftNav .filterDropdown{
	margin-top:0.5em;
}

div#leftNav .filter {
	margin-bottom:0.8em;
	padding-bottom:0.8em;
	overflow:hidden;
	border-bottom:1px dotted #888;
}

div#leftNav form input.fastFindSubmit {
	padding:0.5em 0.8em;
	margin:0.5em 0 0 0;
	width:auto;
	border-radius:0.8em
}

div#leftNav .leftNavTitle .filterReset {
	font-size:0.7em;
}

.filterReset:hover,
.collapsibleTrigger {
	cursor:pointer
}

div#leftNav,
div#leftNav .leftNavTitle h4 {
	float:left
}

div#leftNav form input.fastFindSubmit,
div#leftNav .leftNavTitle .filterReset,
div#leftNav .filterInput.filterAll,
div#leftNav form input {
	float:right
}

div#leftNav form input[type*='text'] {
	display:block;
	float:none;
}

div#leftNav .filterInput.filterAll input {
	float:none
}
div#leftNav .filterDropdown,
div#leftNav .filter,
div#leftNav form input.fastFindSubmit,
div#leftNav .filterInput {
	clear:both;
}

div#leftNav .filterDropdown > .filterInput {
	border-top:1px solid #dedede;
	padding:5px 0;
}

div#leftNav .filterDropdown > .filterInput:last-of-type {
	border-top:1px solid #dedede !important;
}

div#leftNav span.checkboxLabel {
	display:inline-block;
	width: 80%
}

div#leftNav .filterSet,
div#leftNav .leftNavTitle,
div#leftNav .leftNavBox {
	overflow:auto;
}

div#leftNav form,
div#leftNav form div,
div#leftNav .leftNavTitle,
div#leftNav h4,
div#leftNav h5
{
	margin:0;
}

div#leftNav .collapsibleArrow,
div#leftNav .expandableArrow {
padding-right:20px;
}

div#leftNav .expandableArrow {
background: url(https://demo.blockoptions.io/images/trans_arrow_right.gif) right no-repeat
}

div#leftNav .collapsibleArrow {
background: url(https://demo.blockoptions.io/images/trans_arrow_down.gif) right no-repeat;
}

/* -------------- Footer -------------- */

div#footer {
	border-top: 5px solid #000066;
	background-image: url(https://demo.blockoptions.io/images/sot_logo.png);
	background-repeat: no-repeat;
	background-position: 99% 8%;
	margin-top: 4%;
	clear: both;
	height: 80px;
	width: 100%;
	position: relative;
}

div#footer p {
	margin: 0;
	padding-left: 5px;
	padding-top: 5px;
	height: 60px;
	font-size: 0.8em;
	width: 55%;
	text-align: right;
	z-index: 2;
}

div#systemLogo {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 10px;
	margin-top: 5px;
	float: left;
	height: 60px;
	display:inline;
	background-image: url(https://demo.blockoptions.io/images/sot_logo.png);
	background-repeat: no-repeat;
	background-position: top right;
	padding-right: 100px;
}
div#poolLogo {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 10px;
	margin-top: 5px;
	float: left;
	height: 60px;
	display:inline;
	background-image: url(https://demo.blockoptions.io/images/poweredby_ultraflexi_logo.png);
	background-repeat: no-repeat;
	background-position: top right;
	padding-right: 235px;
}


/* -------------- FormType -------------- */
h2.add {
	padding-left: 30px;
	background-image: url(https://demo.blockoptions.io/images/icons/arrow-down_24.png);
	background-repeat: no-repeat;
	background-position: 0 4px;
}

h2.search {
	padding-left: 30px;
	background-image: url(https://demo.blockoptions.io/images/icons/search_24.png);
	background-repeat: no-repeat;
	background-position: 0 4px;
}

h2.confirmed {
	padding-left: 30px;
	background-image: url(https://demo.blockoptions.io/images/icons/confirm_24.png);
	background-repeat: no-repeat;
	background-position: 0 4px;
}

/* -------------- Errors and Messages -------------- */
/* as per the instructions on http://www.axentric.com/posts/default/7 
anything .fade - created class error, generally on paragraphs may also 
be on divs or other block level elements */

p.error, p.fade, .fade, .error {
	color: black;
	text-align: left;
	font-style: italic;
	padding: 1em 2em;
	background-color: #FFFFFF;
}

div#content p.headerError, 
div#content p.headerMsg,
div#content p.headerMsgHidden,
div#content p.headerErrorFade,
div#content p.headerMsgFade,
div#content p.headerAlert,
div#content p.headerNotify,
div#content p.headerNotifyFade,
div#content .headerError, 
div#content .headerMsg,
div#content .headerMsgHidden,
div#content .headerErrorFade,
div#content .headerMsgFade,
div#content .headerAlert {
	padding: 10px 0 10px 40px;
	clear: both;
}

div#content p.headerError, div#content .headerError, 
div#content p.headerErrorFade, div#content .headerErrorFade,
div#content p.headerAlert, div#content .headerAlert {
	color: #D82A00;
	background-color: #FCE0DA;
	background-image: url(https://demo.blockoptions.io/images/icons/error_24.png);
	background-position: 8px 50%;
	background-repeat: no-repeat;
	border-radius: 0.8em;
}

div#content p.headerAlert, div#content .headerAlert {
	background-image: url(https://demo.blockoptions.io/images/icons/alert.jpg);
}

div#content p.headerErrorFade, div#content .headerErrorFade {
	color: #D82A00;
	background-color: #FFFFFF; /* fading from #FCE0DA */
}

div#content p.headerMsg,
div#content p.headerMsgFade, 
div#content .headerMsg,
div#content .headerMsgFade,
div#content p.headerNotify,
div#content p.headerNotifyFade 
 {
	color: #6A9600;
	background-color: #E5FFA7;
	background-image: url(https://demo.blockoptions.io/images/icons/confirm_24.png);
	background-position: 8px 50%;
	background-repeat: no-repeat;
	border-radius: 0.8em;
	
}

div#content p.headerMsgFade, div#content .headerMsgFade, div#content p.headerNotifyFade {
	color: #6A9600;
	background-color: #FFFFFF; /* fading from #E5FFA7 */
}

div#content p.headerNotify, div#content p.headerNotifyFade {
	background-image: url(https://demo.blockoptions.io/images/icons/green_star.png);
}

/* for use with fade script */
div#content p.headerMsgHidden {
	color: #6A9600;
	background-color: #FFFFFF;
	background-image: url(https://demo.blockoptions.io/images/icons/confirm_24.png);
	background-position: 8px 50%;
	background-repeat: no-repeat;
	visibility: hidden;
	border-radius: 0.8em;
}

div#content p#noScript, 
div#content p#badBrowser {
	color: #D82A00;
	background-color: #FCE0DA;
}

.notificationBox {
	border: 1px solid #EEEEF5;
	background-color: #F5F5F9;
	color: inherit;
	margin: 0 0 1.5em 0;
	padding: 0.5em;
	border-radius: 0.8em;
}

div#warningMessage {
	border: 1px solid #FCE0DA;
	background-color: #F5F5F9;
	color: inherit;
	padding: 1em;
	border-radius: 0.8em;
}

span.note {
	font-size: 0.9em;
	color: #8A8A8A;
	background-color: inherit;
}

/* -------------- Info and expandedInfo -------------- */
/* see toggleVamoose.js */

span.info, .info, span.inlineInfo {
	font-weight: normal;
	font-size: 0.85em;
	vertical-align: top;
	color: #999999;
}

span.info, div.expandedInfo, .expandedInfo {
	display: block;
}

span.expandedInfo, div.expandedInfo, .expandedInfo {
	position: relative;
	display: none;
	border-style: dashed;
	border-color:#B3B3B8; 
	border-width: 1px 0;
	background-color: #EEEEF5; 
	color: black;
	font-weight: normal;
	font-size: 0.9em;
	padding: 0.3em;
	margin-top: 0.8em;
	clear: both;
	margin-bottom:0;
	width: 99%;
}

div#content span.expandedInfo a:link,
div#content span.expandedInfo a:visited,
div#content span.expandedInfo a:hover,
div#content span.expandedInfo a:active,
div#content div.expandedInfo a:link,
div#content div.expandedInfo a:visited,
div#content div.expandedInfo a:hover,
div#content div.expandedInfo a:active,
div#content .expandedInfo a:link,
div#content .expandedInfo a:visited,
div#content .expandedInfo a:hover,
div#content .expandedInfo a:active {
	position: absolute;
	right: 0.4em;
	bottom: 0.4em;
	font-size: 1em;
	color: #999999;
	background-color: inherit;
}

div#content .info a:link,
div#content .info a:visited,
div#content .info a:hover,
div#content .info a:active {
	color: #999999;
	background-color: inherit;
}

/* applies to any links that arent the hide link */
div#content span.expandedInfo a.infoLink:link,
div#content span.expandedInfo a.infoLink:visited,
div#content span.expandedInfo a.infoLink:hover,
div#content span.expandedInfo a.infoLink:active,
div#content div.expandedInfo a.infoLink:link,
div#content div.expandedInfo a.infoLink:visited,
div#content div.expandedInfo a.infoLink:hover,
div#content div.expandedInfo a.infoLink:active,
div#content .expandedInfo a.infoLink:link,
div#content .expandedInfo a.infoLink:visited,
div#content .expandedInfo a.infoLink:hover,
div#content .expandedInfo a.infoLink:active {
	position: static;
	display: inline;
	right: 0;
	bottom: 0;
	color: black;
	background-color: inherit;
}

/* -------------- Page Specific -------------- */

/* items list */
ul.items {
	list-style-image: url("https://demo.blockoptions.io/images/icons/frontLinkArrow_6.png");
	margin-top: 0;
}

ul.items li {
	margin-bottom: 0.3em;
}

/* blockFill with grey and have grey border */
div.blockFill {
	border: 1px solid #EEEEF5;
	background-color: #F5F5F9;
	color: inherit;
	padding: 0 0 0 1em;
}

form div.blockFill {
	padding: 1em 0 1em 4em;
}

.explain {
	color: #999999;
	background-color: inherit;
}

/* job table */
div.displayTagContiner,
div.displayTagContainer {
	padding: 0;
	text-align: left;
	width: 100%;
	border-radius: 0.8em;
}

div.displayTagContiner table,
div.displayTagContainer table {
	width: 100%;
	margin: 0;
}

div.displayTagContiner,
div.displayTagContainer {
	position: relative;
	margin: 2em 1px 0 2px;
	padding-bottom: 2em;
	background-color: #A8A9C6;
	color: white;
}

table.displayTag {
	border-bottom: 1px solid #000066;
	background-color: white;
	color: black;
	width: 100%;
}

table.displayTag caption {
	background-color: #000066;
	color: white;
	padding: 5px;
	text-align: left;
	font-weight: bold;
	border-right: 2px solid white;
	border-left: 2px solid white;
	border-radius: 0.8em 0.8em 0 0;
}

span.pagebanner, 
span.pagelinks {
	font-size: 0.8em;
	padding: 0.4em 0.2em;
}

span.pagebanner {
	position: absolute;
	padding-left: 1em;
	text-align: left;
}

span.pagelinks {
	position: absolute;
	right: 1em;
	text-align: right;
}

span.pagelinks a:link, 
span.pagelinks a:visited, 
span.pagelinks a:hover, 
span.pagelinks a:active {
	color: white;
	background-color: #A8A9C6;
}

div.displayTagContiner table.displayTag th,
div.displayTagContainer table.displayTag th {	
	border: 1px solid #D8D8D8;
	/*border-bottom: 1px dashed #000066;*/
	background-color:  #EEEEF5;
	color: inherit;
	padding: 0.2em;
	height: 2em;
	text-align: left;
}

div.displayTagContiner table.displayTag td,
div.displayTagContainer table.displayTag td {
	padding: 0.2em;
	height: 2em;
	border: 1px solid #EEEEF5;
	background-color: #F5F5F9;
	color: inherit;
}

div.exportlinks {
	font-size: 0.8em;
	height: 0;
	padding: 2em 0 0 1em;
	margin-bottom: 0;
	font-weight: bold;
	position: relative;
	width: 40%;
}

div.exportlinks {
	z-index: 2;
}

div.exportlinks a:link, 
div.exportlinks a:visited, 
div.exportlinks a:hover, 
div.exportlinks a:active {
	color: white;
	text-decoration: none;
}

div.exportlinks a:hover {
	text-decoration: underline;
}

div.displayTagContiner p#emptyMessage,
div.displayTagContainer p#emptyMessage {
	padding: 1em 0 0 1em;
}


div#sellerCV {
	overflow: auto;
	height: 30em;
	border: 1px solid black;
	padding: 0.5em;
}

table.plainList {
	width: 99.2%;
	margin-left: 5px;
	border: 1px solid #D8D8D8;
	padding: 0.8em 1em 1em 1em;
	background-color: #F5F5F9
}
table.plainList td {
	padding-top: 0.2em;
}
table.plainList td.label {
	width: 23%;
	font-weight: bold;
	vertical-align: top;
}
table.plainList tr.topPad td {
	padding-top: 1.2em;
}
table.plainList td.wrap {
	white-space: pre-wrap;
	border: 1px solid #D8D8D8;
	padding: 0.5em;	
}

table.longerLabel td.label {
	width: 45%
}

/*-- Special Links --*/
a.actionLink:link,
a.actionLink:visited,
a.actionLink:hover,
a.actionLink:active {
	padding-left: 18px;
	background-image: url(https://demo.blockoptions.io/images/icons/edit_16.gif);
	min-height: 16px;
	background-position: left center;
	background-repeat: no-repeat;
}

a.actionLinkSpacing {
	margin-left: 1em;
}

a#directoriesLink {
	background-image: url(https://demo.blockoptions.io/images/icons/group_16.gif);
}
a#directoriesSellerLink {
	background-image: url(https://demo.blockoptions.io/images/icons/icon_seller_16.gif);
}
a.searchLink:link,
a.searchLink:visited,
a.searchLink:hover,
a.searchLink:active,
a.detailsLink:link,
a.detailsLink:visited,
a.detailsLink:hover,
a.detailsLink:active {
	padding-left: 18px;
	background-image: url(https://demo.blockoptions.io/images/icons/search_16.png);
	min-height: 16px;
	background-position: 0 0;
	background-repeat: no-repeat;
}

a.actAsLink:link,
a.actAsLink:visited,
a.actAsLink:hover,
a.actAsLink:active {
	padding-left: 18px;
	background-image: url(https://demo.blockoptions.io/images/icons/go_16.png);
	min-height: 16px;
	background-position: left center;
	background-repeat: no-repeat;
}

a.addNew:link,
a.addNew:visited,
a.addNew:hover,
a.addNew:active {
	padding-left: 18px;
	background-image: url(https://demo.blockoptions.io/images/icons/add_15.gif);
	min-height: 16px !important;
	background-position: left bottom;
	background-repeat: no-repeat;
}

a.deleteLink:link,
a.deleteLink:visited,
a.deleteLink:hover,
a.deleteLink:active {
	padding-left: 18px;
	background-image: url(https://demo.blockoptions.io/images/icons/no_16.gif);
	min-height: 16px;
	background-position: left center;
	background-repeat: no-repeat;
}

a.moveLink:link,
a.moveLink:visited,
a.moveLink:hover,
a.moveLink:active {
	padding-left: 18px;
	background-image: url(https://demo.blockoptions.io/images/icons/redo_16.gif);
	min-height: 16px !important;
	background-position: left bottom;
	background-repeat: no-repeat;
}

a.starLink:link,
a.starLink:visited,
a.starLink:hover,
a.starLink:active {
	padding-left: 12px;
	background-image: url(https://demo.blockoptions.io/images/icons/star.gif);
	min-height: 16px !important;
	background-position: left center;
	background-repeat: no-repeat;
}

a.furtherDetailLink:link, 
a.furtherDetailLink:visited, 
a.furtherDetailLink:hover, 
a.furtherDetailLink:active {
	padding-left: 10px;
	background-image: url(https://demo.blockoptions.io/images/icons/frontLinkArrow_6.png);
	background-repeat: no-repeat;
	background-position: 0 65%;
}

a.backLink:link, 
a.backLink:visited, 
a.backLink:hover, 
a.backLink:active {
	padding-left: 10px;
	background-image: url(https://demo.blockoptions.io/images/icons/backLinkArrow_6.png);
	background-repeat: no-repeat;
	background-position: 0 65%;
}

a.mailLink:link,
a.mailLink:visited,
a.mailLink:hover,
a.mailLink:active {
	padding-left: 18px;
	background-image: url(https://demo.blockoptions.io/images/icons/mail_16.gif);
	min-height: 16px !important;
	background-position: left bottom;
	background-repeat: no-repeat;
}

/* Statuses ------------------------------------------------------------------*/

/* GENERAL */
div.displayTagContainer table.displayTag td.status {
	padding: 0 !important;
	min-height: 100%;
	height: 100%;
}

span.status {
	padding-left: 6px;
	padding-right: 6px;
	color: white;
	font-weight: bold;
	margin: 0;
	display: block;
	text-transform: uppercase;
	vertical-align: middle;
	min-height: 100%;
	height: 100%;
}

a.status:link, 
a.status:visited, 
a.status:hover, 
a.status:active,
span.status a:link,
span.status a:visited,
span.status a:hover,
span.status a:active {
	background-image: url(https://demo.blockoptions.io/images/icons/arrow_status.gif);
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 17px;
	color: white;
}

/* 
	LIFECYCLE (same colours for everyone)
	* Not yet approved		red
	* Approved				green
	* Withdrawn				blue
*/ 

/* Not yet approved */
div.displayTagContiner table.user td span.status10,
div.displayTagContainer table.user td span.status10,
span.lifecycleStatus10,
.lifecycleStatus10 {
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

/* Approved*/
div.displayTagContiner table.user td span.status20,
div.displayTagContainer table.user td span.status20,
span.lifecycleStatus20,
.lifecycleStatus20 {
	background-color: #A0C745;
	border: 1px solid #A0C745;
	color: white;
}

/* Withdrawn user */
div.displayTagContiner table.user td span.status30,
div.displayTagContainer table.user td span.status30,
span.lifecycleStatus30,
.lifecycleStatus30 {
	background-color: #8DB8E3;
	border: 1px solid #8DB8E3;
	color: white;
}


/* 
	BOOKING 					To Seller		To Buyer		To Agency / BO
	
	* 10 waiting 					red				pale grey		pale grey
	* 20 confirmed	 				amber			-				-
	* 30 cancelled 					black			-				-
	* 40 sellerRejectedJob 			black			red				red
	* 50 sellerNoResponseInTime 	black			red				red
	* sellerNoResponse 				?black			?red			?red
	* 60 amended 					blue			-				-
	* 70 active / LIVE 				green			-				-
	* 80 passed / DONE				blue			-				-
*/

/* 10 waiting 					red				pale grey		pale grey */
span.jobStatus10,
.jobStatus10,
div.displayTagContiner table.displayTag a.status10:link,
div.displayTagContiner table.displayTag a.status10:visited,
div.displayTagContiner table.displayTag a.status10:hover,
div.displayTagContiner table.displayTag a.status10:active,
div.displayTagContainer table.displayTag a.status10:link,
div.displayTagContainer table.displayTag a.status10:visited,
div.displayTagContainer table.displayTag a.status10:hover,
div.displayTagContainer table.displayTag a.status10:active {	
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

div.buyer span.jobStatus10,
div.buyer .jobStatus10, 
div.agency span.jobStatus10,
div.agency .jobStatus10, 
div.bo span.jobStatus10,
div.bo .jobStatus10 {
	background-color: #EEEEF5;
	border: 1px solid #EEEEF5;
	color: black;
}

/* 20 confirmed	 				amber			-				- */
span.jobStatus20,
.jobStatus20,
div.displayTagContiner table.displayTag a.status20:link,
div.displayTagContiner table.displayTag a.status20:visited,
div.displayTagContiner table.displayTag a.status20:hover,
div.displayTagContiner table.displayTag a.status20:active,
div.displayTagContainer table.displayTag a.status20:link,
div.displayTagContainer table.displayTag a.status20:visited,
div.displayTagContainer table.displayTag a.status20:hover,
div.displayTagContainer table.displayTag a.status20:active {	
	background-color: #FFB400;
	border: 1px solid #FFB400;
	color: white;
}

/* 30 cancelled 				black			-				- */
span.jobStatus30,
.jobStatus30,
div.displayTagContiner table.displayTag a.status30:link,
div.displayTagContiner table.displayTag a.status30:visited,
div.displayTagContiner table.displayTag a.status30:hover,
div.displayTagContiner table.displayTag a.status30:active,
div.displayTagContainer table.displayTag a.status30:link,
div.displayTagContainer table.displayTag a.status30:visited,
div.displayTagContainer table.displayTag a.status30:hover,
div.displayTagContainer table.displayTag a.status30:active {	
	background-color: black;
	border: 1px solid black;
	color: white;
}

/* 40 sellerRejectedJob 		black			red				red */
span.jobStatus40,
.jobStatus40,
div.displayTagContiner table.displayTag a.status40:link,
div.displayTagContiner table.displayTag a.status40:visited,
div.displayTagContiner table.displayTag a.status40:hover,
div.displayTagContiner table.displayTag a.status40:active,
div.displayTagContainer table.displayTag a.status40:link,
div.displayTagContainer table.displayTag a.status40:visited,
div.displayTagContainer table.displayTag a.status40:hover,
div.displayTagContainer table.displayTag a.status40:active {	
	background-color: black;
	border: 1px solid black;
	color: white;
}

div.buyer span.jobStatus40,
div.buyer .jobStatus40, 
div.agency span.jobStatus40,
div.agency .jobStatus40, 
div.bo span.jobStatus40,
div.bo .jobStatus40 {
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

/* 50 sellerNoResponseInTime 	black			red				red */
span.jobStatus90,
.jobStatus90,
span.jobStatus50,
.jobStatus50,
div.displayTagContiner table.displayTag a.status50:link,
div.displayTagContiner table.displayTag a.status50:visited,
div.displayTagContiner table.displayTag a.status50:hover,
div.displayTagContiner table.displayTag a.status50:active,
div.displayTagContainer table.displayTag a.status50:link,
div.displayTagContainer table.displayTag a.status50:visited,
div.displayTagContainer table.displayTag a.status50:hover,
div.displayTagContainer table.displayTag a.status50:active {	
	background-color: black;
	border: 1px solid black;
	color: white;
}

div.buyer span.jobStatus90,
div.buyer .jobStatus90, 
div.agency span.jobStatus90,
div.agency .jobStatus90, 
div.bo span.jobStatus90,
div.bo .jobStatus90,
div.buyer span.jobStatus50,
div.buyer .jobStatus50, 
div.agency span.jobStatus50,
div.agency .jobStatus50, 
div.bo span.jobStatus50,
div.bo .jobStatus50 {	
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

/* 60 amended 					blue			-				- */
span.jobStatus60,
.jobStatus60,
div.displayTagContiner table.displayTag a.status60:link,
div.displayTagContiner table.displayTag a.status60:visited,
div.displayTagContiner table.displayTag a.status60:hover,
div.displayTagContiner table.displayTag a.status60:active,
div.displayTagContainer table.displayTag a.status60:link,
div.displayTagContainer table.displayTag a.status60:visited,
div.displayTagContainer table.displayTag a.status60:hover,
div.displayTagContainer table.displayTag a.status60:active {	
	background-color: #8DB8E3;
	border: 1px solid #8DB8E3;
	color: white;
}

/* 70 active / LIVE 			green			-				- */
span.jobStatus70,
.jobStatus70,
div.displayTagContiner table.displayTag a.status70:link,
div.displayTagContiner table.displayTag a.status70:visited,
div.displayTagContiner table.displayTag a.status70:hover,
div.displayTagContiner table.displayTag a.status70:active,
div.displayTagContainer table.displayTag a.status70:link,
div.displayTagContainer table.displayTag a.status70:visited,
div.displayTagContainer table.displayTag a.status70:hover,
div.displayTagContainer table.displayTag a.status70:active {	
	background-color: #A0C745;
	border: 1px solid #A0C745;
	color: white;
}

/* 80 passed / DONE				blue			-				- */
span.jobStatus80,
.jobStatus80,div.displayTagContiner table.displayTag a.status80:link,
div.displayTagContiner table.displayTag a.status80:visited,
div.displayTagContiner table.displayTag a.status80:hover,
div.displayTagContiner table.displayTag a.status80:active, 
div.displayTagContainer table.displayTag a.status80:link,
div.displayTagContainer table.displayTag a.status80:visited,
div.displayTagContainer table.displayTag a.status80:hover,
div.displayTagContainer table.displayTag a.status80:active {
	background-color: #8DB8E3;
	border: 1px solid #8DB8E3;
	color: white;
}

/* 
	TIMESHEET 								To Seller		To Buyer		To Agency / BO 
	
	* FUTURE								pale grey		-				-
	* ACTIVE								green			-				-
	* ACTIVE_BUYER_SIGNED					red				pale green		pale green
	* ACTIVE_SELLER_SIGNED					pale green 		red				pale green
	* OVERDUE								red				-				-
	* COMPLETE								green			green			red
	* ACCEPTED								green			green			red
	* BUYER_AGENCY_SENT_FOR_PROCESSING		blue			blue			blue
	* SELLER_AGENCY_SENT_FOR_PROCESSING		blue			blue			blue
	* PROCESSED								?blue			?blue			?blue
	
	Note - on the timesheet details page, when seeing who performed
	        the actions when, the colours are slightly different
	       These tweaked rules make it clearer who needs do some
	        action, and are set in showTimesheet.css
*/

div#timesheetContainer span.statusUnknown {
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	color: black;
}

/* FUTURE								pale grey		-				-			*/
span.timesheetStatusFUTURE,
.timesheetStatusFUTURE,
div#timesheetContainer span.future {
	background-color: #EEEEF5;
	border: 1px solid #EEEEF5;
	color: black;
}

/* ACTIVE								green			-				-			*/
span.timesheetStatusACTIVE,
.timesheetStatusACTIVE,
div#timesheetContainer span.active {
	background-color: #A0C745;
	border: 1px solid #A0C745;
	color: white;
}

/* ACTIVE_BUYER_SIGNED					red				pale green		pale green	*/
span.timesheetStatusACTIVE_BUYER_SIGNED,
.timesheetStatusACTIVE_BUYER_SIGNED,
div#timesheetStatus p#signedByBuyer span.statusDesc, 
div#timesheetStatus p#signedByBuyer span.statusDate,
div#timesheetContainer span.signedByBuyer {
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

div.buyer span.timesheetStatusACTIVE_BUYER_SIGNED,
div.buyer .timesheetStatusACTIVE_BUYER_SIGNED, 
div.buyer div#timesheetStatus p#signedByBuyer span.statusDesc, 
div.buyer div#timesheetStatus p#signedByBuyer span.statusDate,
div.buyer div#timesheetContainer span.signedByBuyer, 
div.agency span.timesheetStatusACTIVE_BUYER_SIGNED,
div.agency .timesheetStatusACTIVE_BUYER_SIGNED, 
div.agency div#timesheetStatus p#signedByBuyer span.statusDesc, 
div.agency div#timesheetStatus p#signedByBuyer span.statusDate,
div.agency div#timesheetContainer span.signedByBuyer,
div.bo span.timesheetStatusACTIVE_BUYER_SIGNED,
div.bo .timesheetStatusACTIVE_BUYER_SIGNED, 
div.bo div#timesheetStatus p#signedByBuyer span.statusDesc, 
div.bo div#timesheetStatus p#signedByBuyer span.statusDate
div.bo div#timesheetContainer span.signedByBuyer  { 
	background-color: #E5FFA7;
	border: 1px solid #E5FFA7;
	color: black;
}

/* ACTIVE_SELLER_SIGNED					pale green 		red				pale green	*/
span.timesheetStatusACTIVE_SELLER_SIGNED,
.timesheetStatusACTIVE_SELLER_SIGNED,
div#timesheetStatus p#signedBySeller span.statusDesc, 
div#timesheetStatus p#signedBySeller span.statusDate,
div#timesheetContainer span.signedBySeller {
	background-color: #E5FFA7;
	border: 1px solid #E5FFA7;
	color: black;
}

div.buyer span.timesheetStatusACTIVE_SELLER_SIGNED,
div.buyer .timesheetStatusACTIVE_SELLER_SIGNED,
div.buyer div#timesheetStatus p#signedBySeller span.statusDesc, 
div.buyer div#timesheetStatus p#signedBySeller span.statusDate,
div.buyer div#timesheetContainer span.signedBySeller {
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

/* OVERDUE								red				-				-			*/
span.timesheetStatusOVERDUE,
.timesheetStatusOVERDUE,
div#timesheetContainer span.overdue {
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

/* COMPLETE								green			green			red			*/
span.timesheetStatusCOMPLETE,
.timesheetStatusCOMPLETE,
div#timesheetContainer span.complete {
	background-color: #A0C745;
	border: 1px solid #A0C745;
	color: white;
}

div.agency span.timesheetStatusCOMPLETE,
div.agency .timesheetStatusCOMPLETE,
div.agency div#timesheetContainer span.complete, 
div.bo span.timesheetStatusCOMPLETE,
div.bo .timesheetStatusCOMPLETE,
div.bo div#timesheetContainer span.complete { 
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

/* ACCEPTED								green			green			red			*/
span.timesheetStatusACCEPTED,
.timesheetStatusACCEPTED,
div#timesheetContainer span.accepted {
	background-color: #A0C745;
	border: 1px solid #A0C745;
	color: white;
}

div.agency span.timesheetStatusACCEPTED,
div.agency .timesheetStatusACCEPTED, 
div.agency div#timesheetContainer span.accepted,
div.bo span.timesheetStatusACCEPTED,
div.bo .timesheetStatusACCEPTED,
div.bo  div#timesheetContainer span.accepted { 
	background-color: #EE3226;
	border: 1px solid #EE3226;
	color: white;
}

/* BUYER_AGENCY_SENT_FOR_PROCESSING		blue			blue			blue		*/
span.timesheetStatusBUYER_AGENCY_SENT_FOR_PROCESSING,
.timesheetStatusBUYER_AGENCY_SENT_FOR_PROCESSING,
div#timesheetStatus p#acceptedByBuyerAgency span.statusDesc, 
div#timesheetStatus p#acceptedByBuyerAgency span.statusDate, 
div#timesheetStatus p#sentForBuyerAgencyProcessing span.statusDesc, 
div#timesheetStatus p#sentForBuyerAgencyProcessing span.statusDate,
div#timesheetContainer span.buyerAgencySentForProcessing {
	background-color: #8DB8E3;
	border: 1px solid #8DB8E3;
	color: white;
}

/* SELLER_AGENCY_SENT_FOR_PROCESSING	blue			blue			blue		*/
span.timesheetStatusSELLER_AGENCY_SENT_FOR_PROCESSING,
.SELLER_AGENCY_SENT_FOR_PROCESSING,
div#timesheetStatus p#sentForSellerAgencyProcessing span.statusDesc, 
div#timesheetStatus p#sentForSellerAgencyProcessing span.statusDate,
div#timesheetContainer span.sellerAgencySentForProcessing {
	background-color: #8DB8E3;
	border: 1px solid #8DB8E3;
	color: white;
}

/* PROCESSED							?blue			?blue			?blue		*/
span.timesheetStatusPROCESSED,
.timesheetStatusPROCESSED,
div#timesheetContainer span.processed {
	background-color: #8DB8E3;
	border: 1px solid #8DB8E3;
	color: white;
}

/*
	PURCHASE CONTRACT OFFERS (Offer Status Tag)
*/
span.offerStatusPending, span.offerStatusOffered {
	background-color: #FFB400;	
}
span.offerStatusAccepted {
	background-color: #A0C745;	
}
span.offerStatusRejected {
	background-color: #8DB8E3;	
}
span.offerStatusNotInPlace {
	background-color: #EEEEF5;
	color: black;	
}

/*
	BUYER PARTNER AGENCY RELATIONSHIPS (Relationship Status Tag)
*/
span.relationshipStatusRequested {
	background-color: #FFB400;	
}
span.relationshipStatusAccepted {
	background-color: #A0C745;	
}
span.relationshipStatusNotInPlace {
	background-color: #EEEEF5;
	color: black;	
}

/* IE 7 fix  shouldnt break anything else*/
.innerDiv {
width: 100%; 
}

/* -------------- Paging:table tag column customisation -------------- */

.pagingTableCentre,
.pagingTableCenter {
	text-align: center;
}
.pagingTableRight {
	text-align: right;
}

.pagingTableNoWrap {
	white-space: nowrap;
}

.pagingTableWidth10{
	width:10%;
}

.displayTag th.sorted a, th.sortable a {
	background-position: left;
	display: block;
}
.displayTag th.sortable {
	margin-right:5em !important;
}

.displayTag th.sortable a {
	background-image: url(https://demo.blockoptions.io/images/displaytag/arrow_off.png);
	background-repeat: no-repeat;
	padding-left:10px;
	padding-right:5px;
}

.displayTag th.order1 a {
	background-image: url(https://demo.blockoptions.io/images/displaytag/arrow_up.png);
}

.displayTag th.order2 a {
	background-image: url(https://demo.blockoptions.io/images/displaytag/arrow_down.png);
}

/* --------------- PurchaseStatusBar tag CSS ----------------------- */

span.statusBarWaiting,
span.statusBarConfirmed,
span.statusBarRejected,
span.statusBarNotMade {
	float: left;
}
.statusBarWaiting {
	background-color: #8DB8E3;
}
span.statusBarConfirmed {
	background-color: #A0C745;
}
span.statusBarRejected {
	background-color: #EE3226;
}
span.statusBarNotMade {
	background-color: grey;
}

.chart {
margin: 10px;
border: 1px solid gray;
padding: 10px;
}

span.sellerRate {
	margin-top: 2px;
	display: block;
	padding-left: 30px;
	padding-top: 3px;
	min-height: 24px;
	background-position: 0 0;
	background-repeat: no-repeat;	
}

/* --------------- Seller Purchase Rates tag CSS ----------------------- */

span.dynamicRate {
	background-image: url(https://demo.blockoptions.io/images/icons/dynamic-rate_24.png);
}
span.fixedRateBuyer {
	background-image: url(https://demo.blockoptions.io/images/icons/fixed-rate-buyer_24.png);
}
span.fixedRateContract {
	background-image: url(https://demo.blockoptions.io/images/icons/fixed-rate-contract_24.png);
}
span.sellerRateContract {
	background-image: url(https://demo.blockoptions.io/images/icons/dynamic-rate_24.png);
}

label.disabled {
	color: #999999;
}

div#timebankingContainer {
	background-image: url(https://demo.blockoptions.io/images/icons/finance_24.png);
	background-repeat: no-repeat;
    background-position: 10px 0;
    height: 30px;
}

p#timebanking {
	position: relative;
	padding: 4px 0 0 40px;
	margin:0 0 0.25em 0;
}

fieldset {
	border-radius: 0.8em;
}
/*
div, p, a, li, td {
	-webkit-text-size-adjust:100%;
}
*/
form p.searchHelp {
	color: #8A8A8A;
	padding-left: 1.5em;
	padding-top: 1em;
	margin-left: 0;
	margin-top: 0;
}

form.tomForm {
	margin-top: 0;
	float:left;
}

div.tomDisplayTagContainer {
	clear: both;
    margin-top: 0;
}

form div.tomCoreDetails,
form div:last-of-type.tomCoreDetails {
	background-color: #FAFAFC;
    border: 1px solid black !important;
    color: inherit;
}

form input[type="submit"].tomSearchButton {
	width: 8em;
	text-transform: none;
	margin-left: 28.8em;
}

form.tomForm input {
	width: 16em;
}

form.tomForm div {
	clear: left;
}

.tomSearchHelp {
	font-style: italic;	
}

.tomSaveContainer {
	clear: both;
}

form.tomForm label,
form.tomForm p.mockLabel {
	margin-left:0;
	padding-left: 1.5em;
	width: 13em;
	padding-top: 3px;
}

form.tomForm.filterForm label,
form.tomForm.filterForm p.mockLabel {
	padding-top: 0px;
	margin-top: 0px;
	padding-left: 8px;
}


form.tomForm.filterForm div {
	margin-left: 1em;
}

h2 {
	clear: both;
}

#mainContent h2 {
	clear: none;
}