@charset "utf-8";
/*
 * Donovan Marrison site theme: the one stylesheet every public page loads.
 *
 *   1. Reset
 *   2. Layout variables
 *   3. Base: fonts, headings, paragraphs
 *   4. Layout: wrapper, top bar, header, content, sidebar, footer
 *   5. Components: header search, urgent vacancies ticker, search form,
 *      vacancy boxes, CV upload form
 *   6. Pages: rules for one page only, under its <body class="page-...">
 *   7. Responsive: breakpoints for small screens (to come)
 *
 * Page rules use :where(.page-x) so the page class adds no specificity: they
 * win and lose against the rest exactly as they did as separate stylesheets.
 */


/* 1. Reset ---------------------------------------------------------------
   http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
   License: none (public domain) */

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


/* 2. Layout variables ----------------------------------------------------
   The fixed desktop layout. Small-screen breakpoints (section 7) override
   these rather than each rule. */

:root {
	--page-width: 1000px;
	--content-width: 760px;
	--sidebar-width: 225px;
}


/* 3. Base ---------------------------------------------------------------- */

*, html, body{
	margin:0;
	font-family: Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#444;
}
h1, h2, h3{
	color:#1A4100;
	letter-spacing: 0.1em;
}
h1{
	font-size: 1.4em;
	font-weight: bold;
	margin: 1.2em 0 1em 0;
}
h2{
	font-size:1.3em;
	font-weight:bold;
	margin:1.2em 0 1em 0;
}
h3{
	font-size:1.2em;
	font-weight:bold;
	margin:1.2em 0 1em 0;
}
p{
	line-height:1.5em;
	margin-bottom:1em;
	color:#333;
}
.urgent, .urgent a:link, .urgent a:visited{
	color: #CC3300 !important;
	font-weight: bold !important;
}

/* Small utilities, in place of the old align/width/height attributes */
.align-center{
	text-align:center;
}
.align-right{
	text-align:right;
}
.align-justify{
	text-align:justify;
}
.full-width{
	width:100%;
}
.h25{
	height:25px;
}
.h10{
	height:10px;
}


/* 4. Layout -------------------------------------------------------------- */

#wrapper{
	width:100%;
	margin-top:0;
}
#top_bar, #header, #footer, #content_wrap{
	margin: 0 auto;
	width:var(--page-width);
}

/* Top bar: permanent / contract links */
#top_bar{
	background-color:#333;
	height:25px;
	margin-bottom:10px;
}
#top_bar ul{
	margin-top:2px;
	float:right;
}
#top_bar ul li{
	float:left;
	margin-left:20px;
}
#top_bar ul li a, #top_bar ul li a:link, #top_bar ul li a:visited{
	font-size:11px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
}
#top_bar ul li a:hover{
	text-decoration:underline;
}

/* Header: logo, search box, main menu */
#header{
	height:100px;
	margin-bottom:30px;
}
#large_logo{
	float:left;
	margin-top:4px;
}
#hdr_search{
	float:right;
	margin-top:20px;
	margin-right:10px;
}
ul#top_menu{
	margin-top:45px;
	display:block;
	list-style:none;
	width:auto;
	float:right;
}
ul#top_menu li{
	display:block;
	float:left;
}
ul#top_menu li a:link, ul#top_menu li a:visited{
	display:block;
	float:left;
	text-decoration:none;
	color:#555;
	margin-left:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	padding-bottom:2px;
}
ul#top_menu li a:hover{
	color:#000;
	border-bottom:2px solid #333;
}

/* Content column and right-hand sidebar */
#content_wrap{
	width: var(--page-width);
	margin: 0 auto;
}
#content{
	float: left;
	width:var(--content-width);
	margin-bottom:20px;
}
#content_rght{
	width: var(--sidebar-width);
	float: right;
	margin-bottom: 25px;
}

/* Footer */
#footer{
	clear:both;
	height:35px;
	width:var(--page-width);
	margin-top:30px;
	padding-top:15px;
	padding-bottom:15px;
	color:#fff;
	font-size:11px;
	background-color:#1A4100;
}
#ftr_copy{
	margin-left:20px;
	float:left;
	color:#fff;
}
#ftr_menu{
	float:right;
	margin-right:20px;
}
#ftr_menu a, #ftr_menu a:link, #ftr_menu a:visited{
	text-decoration:none;
	color:#fff;
}


/* 5. Components ---------------------------------------------------------- */

/* Header search box */
#hdr_search_box, #search_area_box{
	border: #1A4100 1px solid;
	width:170px;
	font-size:12px;
	background-color:#eee;
}
#hdr_search_btn, #search_area_btn{
	color:#fff;
	width:60px;
	text-align:center;
	background-color: #1A4100;
	font-size:12px;
	margin-left:10px;
}

/* Urgent vacancies ticker (sidebar) */
#scroller {
	margin-top:30px;
	border: #ff6c00 solid 1px;
}
#scroller .title {
	background-color: #ff6c00;
	color: #fff;
	padding: 4px 0px 6px 0px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
li.scrollervacancy{
	list-style:none;
	margin-top:10px;
}
li.scrollervacancy p{
	color:#000;
}
li.scrollervacancy a, li.scrollervacancy a:link, li.scrollervacancy a:visited{
	text-decoration:none;
	color:#1A4100;
	font-size:1.1em;
	margin-bottom:5px;
	font-weight:bold;
}
li.scrollervacancy a:hover{
	text-decoration:underline;
}
li.scrollervacancy hr{
	text-align:center;
	color:#ff6c00;
	width:50%;
	margin:5px auto;
}
.vacancy_wrap{
	padding:5px 10px 0px 10px;
}

/* Vacancy search form (listing sidebar) */
#search_area{
	width: var(--sidebar-width);
	float: right;
	margin-bottom: 25px;
	background-color:#eee;
	border: #ccc solid 1px;
}
#search_area form{
	margin-left:20px;
}
#search_area fieldset{
	font-size:11px;
	margin-top:20px;
}
#search_area input[type=text], #search_area select{
	margin:5px 0 5px 0;
	font-size:10px;
	width:150px;
}
#search_area input[type=text]{
	background-color:#fff;
}
#search_area input[type=submit]{
	float:right;
	margin:0px 40px 20px;
}

/* Vacancy boxes: listings and vacancy details */
.vacancy_box {
	border: #888 solid 1px;
	width:100%;
	background-color:#eee;
	margin-bottom:30px;
	position:relative;
	height:auto;
}
div.vac_border{
	position:absolute;
	left:13px;
	top:13px;
	height:30px;
	border-top:3px solid #1A4100;
	border-left:3px solid #1A4100;
	width:30px;
}
h1.vac_title{
	position:relative;
	margin-left:30px;
	margin-top:30px;
	/* Standards mode gives the line a strut in the h1's own, larger font,
	   which adds 1.6px below the 18px link. Zero it so the link alone sets
	   the line height. */
	line-height:0;
}
h1.vac_title a, h1.vac_title a:visited, h1.vac_title a:link{
	font-size:18px;
	color:#1A4100;
	text-decoration:none;
	line-height:1;
}
h1.vac_title a:hover{
	text-decoration:underline;
}
div.vac_row{
	display:block;
	position:relative;
	width:700px;
	clear:both;
	margin-left:30px;
}
/* Last row of a box: clears the floats above it. */
div.vac_row.vac_end{
	height:0px;
}
p.vac_label, p.vac_data{
	display:block;
	float:left;
	height:20px;
	margin-bottom:5px;
}
p.vac_data{
	width:300px;
}
p.vac_label{
	color:#1A4100;
	width:200px;
	font-weight:bold;
}
p.vac_data:after{
	clear:both;
	content:".";
	visibility:hidden;
}
div.vac_text{
	margin-bottom:30px;
	margin-top:10px;
	float:left;
	width:530px;
}
.vac_header h1{
	display:block;
	float:left;
}
.vac_button a, .vac_button a:link, .vac_button a:visited{
	float:right;
	margin-top:10px;
	background-color:#1A4100;
	color:#fff;
	padding:4px;
	text-decoration:none;
	border:#fff 1px solid;
}
.vac_header .vac_button a{
	margin-right:30px;
	margin-top:20px;
}
.vac_text_detail{
	width:650px;
	margin-top:10px;
	margin-left:30px;
}
.vac_text_detail ul{
	list-style: disc;
	margin-left:50px;
}
.vac_text_detail li{
	margin-bottom:15px;
}
.vac_text_detail strong{
	font-weight:bold;
}

/* CV upload form */
#uploadForm{
	width:100%;
}
#uploadForm .col-label{
	width:25%;
}
#uploadForm .col-field{
	width:72%;
}
td > .urgent{
	margin-bottom:15px;
}
.reCapthca{
	margin-top:15px;
	margin-bottom:15px;
}


/* Contact: the map sits alone on its line; top alignment drops the gap
   that standards mode leaves below it for text descenders. */
iframe{
	vertical-align:top;
}

/* Contact: the link under the map */
a.map-link{
	color:#0000FF;
	text-align:left;
}


/* 6. Pages --------------------------------------------------------------- */

/* Home: slider, call-to-action buttons, specialisms */
:where(.page-home) #header{
	margin-bottom:15px;
}
#slider_band {
	width: 100%;
	height: 260px;
	background-color: #eee;
	z-index: 4;
}
#slider_wrap {
	position: relative;
	width: var(--page-width);
	height: 260px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 1;
}
#slider_img {
	position: absolute;
	height: 260px;
	width: var(--page-width);
	background-image: url(/img/slider/offshore.jpg);
	background-repeat: no-repeat;
	z-index: 2;
}
div#button_wrap {
	top: 0px;
	position: absolute;
	display: inline-block;
	margin-top: 20px;
	margin-left: 25px;
	z-index: 1000;
	width: 310px;
}
a#employer_btn, a#candidate_btn {
	display: block;
	border: 0;
	width: 298px;
	height: 100px;
	background-image: url(/img/index/buttons.png);
	background-repeat: no-repeat;
	line-height: 0;
	font-size: 0;
	color: transparent;
}
a#employer_btn {
	background-position: 0px 0px;
}
a#candidate_btn {
	background-position: 0px -100px;
	margin-top: 20px;
}
h1#index_title {
	margin-top: 20px;
	clear: both;
	display: block;
	width: 650px;
	height: 36px;
	background-image: url(/img/index/specialising.png);
	background-repeat: no-repeat;
	line-height: 0;
	font-size: 0;
	color: transparent;
}
#specialisms {
	width: 770px;
	float: left;
}
ul.spec_list {
	margin-top: 25px;
	float: left;
	list-style-image: url(/img/bullet.gif);
	list-style-position: inside;
	display: block;
	width: 235px;
	margin-left:10px;
}
ul.spec_list li {
	margin-bottom: 20px;
}
ul.spec_list li a, ul.spec_list li a:link, ul.spec_list li a:visited {
	font-size: 16px;
	text-decoration: none;
	color: #555;
}
ul.spec_list li a:hover {
	color:#333;
}

/* Privacy notice: every list on the page, including the top bar (which
   gets bullets here) and the ticker, as when this was a <style> block in
   privacy.php after the stylesheets. */
:where(.page-privacy) ul {
	list-style:disc;
	margin-left:5ex;
	line-height:1;
}
:where(.page-privacy) li {
	margin-bottom:8px;
	line-height:1.5em;
}
/* Ticker titles on this page: the li line height (21px) also reaches the
   title link's larger font; in standards mode the line's strut then adds
   height. Zero the strut and give the link its 21px back. */
:where(.page-privacy) .vacancy_wrap {
	line-height:0;
}
:where(.page-privacy) .vacancy_wrap > a {
	line-height:21px;
}


/* 7. Responsive ----------------------------------------------------------
   To come: breakpoints for small screens, e.g.

   @media (max-width: 1000px) {
     :root { --page-width: 100%; ... }
   }

   Pages also need <meta name="viewport" content="width=device-width,
   initial-scale=1"> before phones use these; until then they render the
   1000px desktop layout scaled down. */