@charset "utf-8";

/*
Theme Name: HRO'C Search
Theme URI: http://hrocsearch.co.uk
Description: HRO'C Search bespoke template
Version: 1 (WP2.8)
Author: Kevin Rapley
Author URI: http://digikev.co.uk
Tags: hroc, search
*/


/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
   Based on work by Eric Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 border: 0; 
 font-family: inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
}

body {
 background: white;
 color: inherit;
 line-height: 1.5;
 margin: 0;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
 border-collapse: separate;
 border-spacing: 0;
}

caption,
th,
td {
 font-weight: 400;
 text-align: left;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, 
blockquote:after, 
q:before, 
q:after { 
 content: "";
}

blockquote, 
q { 
 quotes: "" "";
}

a img {
 border: none;
}
.container {
 width: 80em /* 960px */;
 margin: 0 auto;
}

/* Columns
---------------------------------------------------------------------------------------------------------------- */
.column, 
div.col-1, 
div.col-2, 
div.col-3 {
/* margin-right: 0.833em;*/
} 

/* The last column in a row needs this class. */
.last, div.last {
 margin: 0;
 padding: 0;
} 

/* Use these classes to set the width of a column. */
.col-1 {
 float: left;
 padding: 0 2em;
 width: 26.666em /* 320px */;
}

.col-2 {
 float: left;
 padding: 0 2em;
 width: 53.333em /* 640px */;
}

.col-3 {
 float: left;
 margin: 0;
 width: 80em /* 960px */;
}

#page-12 .col-2 {
	width: 38.334em /* 480px */;
	padding: 0 1.666em 0 0;
}

/* Misc classes and elements
---------------------------------------------------------------------------------------------------------------- */
/* In case you need to add a gutter above/below an element */
.prepend-top {
 margin-top: 1.5em;
}

.append-bottom {
 margin-bottom: 1.5em;
}

/* Use a .box to create a padded box inside a column.  */
.box {
 background: #e5ecf9;
 margin-bottom: 1.5em;
 padding: 1.5em;
} 

/* Use this to create a horizontal ruler across a column. */
hr {
 background: #ddd;
 border: none;
 clear: both;
 color: #ddd;
 float: none;
 /* setup to not disturb vertical rhythm of type */
 height: 0.0833em /* 1px */;
 margin: 1.483em 0;
 width: 100%;
}

hr.space {
 background: white;
 color: white;
}

/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
 clear: both;
 content: "\0020";
 display: block;
 height: 0;
 overflow: hidden;
 visibility: hidden;
}

.clearfix, .container {
 display: block;
}

/* Regular clearing   
apply to a column that should drop below previous ones. */
.clear {
 clear:both;
}
/* -------------------------------------------------------------- 
   
   forms.css
   
   Usage:
   * For text fields, use class .title or .text
   
-------------------------------------------------------------- */

/* Fieldsets */
fieldset { 
 border: none;
 margin: 0 0 1em 0;
 padding: 0;
}

legend {
 font-size: 1.2em;
 font-weight: bold;
}

/* Text fields */
input.text, 
input.title {
 border: 1px solid #bbb;
 background: #f6f6f6;
 color: inherit;
 margin: 0.5em 0.5em 0.5em 0;
 padding: 5px;
 width: 300px;
}

input.text:focus,
input.title:focus {
 border: 1px solid #999;
 background: white;
 color: inherit;
}

input.title {
 font-size: 1.5em;
}

/* Textareas */
textarea {
 height: 250px;
 margin: 0.5em 0.5em 0.5em 0;
 width: 300px;
}

textarea {
 background:#eee;
 border: 1px solid #bbb;
 color: inherit;
 padding: 5px;
}

textarea:focus {
 border: 1px solid #999;
 background: white;
 color: inherit;
}

/* Select fields */
select {
 background:#f6f6f6;
 border: 1px solid #ccc; 
 color: inherit;
 width: 200px;
}

select:focus {
 background: white;
 border: 1px solid #999;
 color: inherit;
}


/* Success, error & notice boxes for messages and errors. */
.error,
.notice, 
.success {
 border: 2px solid #ddd;
 margin-bottom: 1em;
 padding: .8em;
}

.error { 
 background: #fbe3e4;
 color: #d12f19;
 border-color: #fbc2c4;
}

.notice {
 background: #fff6bf; 
 border-color: #ffd324; 
 color: #817134;
}

.success {
 background: #e6efc2;
 border-color: #c6d880;
 color: #529214;
}

.error a {
 background: inherit;
 color: #d12f19;
}

.notice a {
 background: inherit;
 color: #817134;
}

.success a {
 background: inherit;
 color: #529214;
}
/* -------------------------------------------------------------- 
   
   typography.css
   * Sets up some sensible default typography.
  
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Richard Rutter    [clagnut.com]

   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb

   Read more about composing a vertical rhythm here:
   * 24ways.org/2006/compose-to-a-vertical-rhythm

-------------------------------------------------------------- */

/* Default fonts and colors. 
-------------------------------------------------------------- */

body {
 background: white;
 color: #222; 
 font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; 
 font-size: 75%;
 line-height: 1.5em;
}

html>body {
 font-size: 12px; /* Sets size specifically for modern browsers which allow users to resize text sized in pixels */
}

/* Headings
Typography sizes and styles based on Mark Boulton's 
hierachy in A practical guide to Designing for the Web 
http://www.fivesimplesteps.co.uk/
-------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
 background: inherit;
 color: #111; 
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 font-weight: normal;
 letter-spacing: 0.04165em; /* Renders .5 of a px in Webkit and Mozilla browsers, seriously! */
 text-shadow: #eee;
}

h1 /* 32px */{
	background: inherit;
	color: #768394;
 font-size: 3em;
 line-height: 0.75em;
 margin-bottom: 0.755em;
 text-transform: capitalize;
}

h2 /* 24px */ { 
 font-size: 2em;
 line-height: 1em;
 margin-bottom: 1em;
}

h3 /* 16px */ { 
 font-size: 1.333333em;
 line-height: 1.125em;
 margin-bottom: 0.5625em;
}

h4,
h5,
h6 /* 13px */ { 
 font-size: 1.083333em;
 line-height: 1.384615em;
 margin-bottom: 1.384615em;
}

h5 { 
 text-transform: uppercase;
}

h6 { 
 font-weight: bold;
 text-transform: uppercase;
}

h3+h3 {
 margin-top: 1.1em;
}

h3+h4 {
 margin-top: 1.4em;
}

/* Text elements
-------------------------------------------------------------- */

p /* 12px */{
 font-size: 1em;
 margin: 1.5em 0;
}

p.last {
 margin-bottom: 0;
}

p img { 
 float: left; 
 margin: 1.5em 1.5em 1.5em 0; 
 padding: 0;
}

p img.top { 
 margin-top: 0; 
} /* Use this if the image is at the top of the <p>. */

img { 
 margin: 0 0 1.5em; 
}

ul, ol { 
 margin: 0 1.5em 1.4em 1.5em; 
}

ul { 
 list-style-type: disc;
}

ol { 
 list-style-type: decimal;
}

dl { 
 margin: 0 0 1.5em 0;
}

  dl dt { 
   font-weight: bold; 
  }

  dd {
   margin-left: 1.5em;
  }

abbr, 
acronym { 
 border-bottom: 1px dotted #666; 
}

address     {
 font-style: italic; 
 margin-top: 1.5em;
}

del {
 background: inherit;
 color: #666;
}

a:link {
 background: inherit;
 color: #009;
 text-decoration: underline;
}

a:visited {
 background: inherit;
 color: #009;
 text-decoration: underline;
}

a:focus, 
a:hover {
 background: inherit;
 color: #000;
 outline: none;
}

a:active {
 background: inherit;
 color: #000;
 outline: none;
}

a:link.button,
a:visited.button,
input.button {
	background: #c2cd23 url('/images/branding/bg/header.png') bottom repeat-x;
	border: solid 2px #616611;
	border-top-color: #e1e691;
	border-right-color: #e1e691;
	color: #232323;
	cursor: hand;
	display: block;
	font-weight: bold;
	padding: 6px 10px;
	text-align: center;
	text-decoration: none;
}

a:hover.button,
a:active.button,
input:hover.button {
	background: #9ba41c;
	border-color: #e1e691;
	border-top-color: #616611;
	border-right-color: #616611;
	color: white;
}
	

blockquote  {
 background: inherit;
 color: #666;
 font-style: italic;
 margin: 1.5em;
}

strong {
 font-weight: bold;
}

em,
dfn { 
 font-style: italic;
}

dfn {
 font-weight: bold;
}

pre,
code { 
 margin: 1.5em 0; 
 white-space: pre;
}

pre,
code,
tt { 
 font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; 
 line-height: 1.5;
}

tt {
 display: block; 
 line-height: 1.5;
 margin: 1.5em 0;
}

/* Tables
-------------------------------------------------------------- */

table {
 margin-bottom: 1.4em;
}

th { 
 border-bottom: 1px solid #ddd; 
 font-weight: bold;
}

td { 
 border-bottom: 1px solid #ddd;
}

th,
td {
 padding: 4px 10px 4px 0;
}

tfoot {
 font-style: italic;
}

caption {
 background: #ffc;
 color: inherit;
}

/* Use this if you use span-x classes on th/td. */
table .last {
 padding-right: 0;
}

/* Default classes
-------------------------------------------------------------- */

.small {
 font-size: .8em;
 line-height: 1.875em;
 margin-bottom: 1.875em;
}

.large {
 font-size: 1.2em;
 line-height: 2.5em;
 margin-bottom: 1.25em;
}

.quiet {
 background: inherit;
 color: #666;
}

.hide {
 display: none;
}

.highlight {
 background: #ff0;
 color: inherit;
}

.added {
 background: inherit;
 color: #060;
}

.removed {
 color: #900;
}

.top {
 margin-top: 0;
 padding-top: 0;
}

.bottom {
 margin-bottom: 0; 
 padding-bottom: 0;
}

.left {
 float: left;
 width: auto;
}

.right {
 float: right;
 padding-left: 10px;
 width: auto;
}
/* -----------------------------------------------------------------

	CSS written by Kevin Rapley [digikev.co.uk]

	SWATCHES

	#000000

	CONTENTS
	Search for any of the below to be transported to that section of the
	document

	=HEADER
	=ACCESS
	=BRANDING
	=MENU
	=SUBMENU
	=CONTENT
	=SIDEBAR
	=TOP-BUTTON
	=FOOTER

=TOP
----------------------------------------------------------------- */

 .page {
  margin: 0 auto;
  width: 80em;
 }

	h1 a,
	h2 a,
	h3 a,
	h4 a,
	h5 a {
		border: none !important;
		text-decoration: none !important;
	}

/* =HEADER
contains the logo and background gradient for the masthead
----------------------------------------------------------------- */

 #header {
  background: white url('/images/branding/bg/header.png') repeat-x;
 }
 
/* =ACCESS
contains all styles attributed to the accessibility panel
----------------------------------------------------------------- */

 #access {
  
 }

/* =BRANDING
Logo, search and telephone number.
----------------------------------------------------------------- */

 #branding {
  background: #c2cd23 url('/images/branding/bg/header.png') bottom repeat-x;
 }

  #branding img {
   float: left;
  }

		#tel {
			background: transparent;
			color: white;
			display: block;
			float: right;
			font-size: 1.5em;
			margin-right: 20px;
		}

/* =MENU
Main navigational menu.
----------------------------------------------------------------- */

 ol.menu {
	background: white url('/images/branding/bg/menu.png') bottom repeat-x;
  clear: both;
	height: 43px;
	margin: 0 0 40px 0;
	padding-left: 20px;
 }

   .menu li {
		 display: block;
		 float: left;
		 font-size: 1.2em;
		 list-style: none;
		 margin: 0;
   }

   .menu a:link, .menu a:visited {
     background: inherit;
		 color: #768394;
		 display: block;
		 height: 23px;
		 padding: 10px 20px;
		 text-decoration: none;
   }

   .menu a:hover, .menu a:active {
		background: #232323;
		border-bottom: solid #c2cd23 3px;
		color: white;
		padding-bottom: 7px;
   }

	#page-3 .menu #page-home a,
	#page-2 .menu #page-services a,
	#page-8 .menu #page-what-we-do a,
	#page-10 .menu #page-who-we-are a,
	#page-12 .menu #page-our-clients a,
	#blog .menu #page-blog a,
	#page-16 .menu #page-contact a {
		background: #c2cd23 url('/images/branding/bg/header.png') bottom repeat-x;
		border-bottom-color: #232323;
		color: white;
	}

	#page-22 .menu #page-services a,
	#page-24 .menu #page-services a,
	#page-26 .menu #page-services a,
	#page-28 .menu #page-services a {
		background: #c2cd23 url('/images/branding/bg/header.png') bottom repeat-x;
		border-bottom-color: #232323;
		color: white;
	}
/* =SUBMENU
Secondary menu.
----------------------------------------------------------------- */

	#submenu .menu {
		background: #c2cd23;
		border-top: solid 1px white;
		color: white;
		margin-top: 0;
	}

		#submenu .menu li {
			margin: 0;
		}

		#submenu .menu a:link,
		#submenu .menu a:visited {
			background: #c2cd23;
			border-left: solid 1px white;
			color: white;
		}

		#submenu .menu #sem a {
			border-right: solid 1px white;
		}

		#submenu .menu a:hover,
		#submenu .menu a:active {
			background: #232323;
			color: #c2cd23;
		}

	#page-22 #submenu .menu #ppc a,
	#page-24 #submenu .menu #seo a,
	#page-26 #submenu .menu #aff a,
	#page-28 #submenu .menu #sem a {
		background: #232323;
		color: white;
	}

/* =INTRO
----------------------------------------------------------------- */

 #intro {
	 background: white url('/images/branding/bg/intro.png') bottom repeat-x;
	 min-height: 312px;
 }

 #page-3 #intro {
	 min-height: 312px;
 }

	#intro .col-2 {
		width: 480px;
	}
	
	#intro .col-2.last img {
		float: right;
	}

	#page-3 #intro .col-1.last {
		height: 300px;
		width: 480px;
	}

/* =INTRO
Secondary menu.
----------------------------------------------------------------- */

 #services {
	 background: white;
	 padding: 40px 0;
 }

	#services .page {
		background: white url('/images/branding/separator.gif') repeat-y;
	}

	#services img {
		margin: 0;
	}

	#services h2,
	#services p {
		margin-left: 10px;
		margin-right: 10px;
	}
	
	#services p {
		margin-bottom: 0;
		margin-top: 0;
	}

	#services .button {
		margin-bottom: 20px;
	}

		#services h2 a {
			background: white;
			color: black;
			display: block;
			margin-right: 20px;
		}

	.client {
		float: left;
		margin: 0 20px;
		width: 200px;
	}

	.sidebar {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
		.sidebar li {
			list-style: none;
			float: left;
			margin: 0 10px 0 0;
			padding: 0;
		}

			.sidebar li li {
				float: none;
			}

		.sidebar h2 {
			margin: 0 0 5px 15px;
		}

   .sidebar a:link, .sidebar a:visited {
     background: white;
		 color: #768394;
		 text-decoration: none;
   }

   .sidebar a:hover, .sidebar a:active {
		text-decoration: underline;
   }

/* =BASEMENU
Secondary menu.
----------------------------------------------------------------- */

 #basemenu {
  background: #3e3e3e url('/images/branding/bg/basemenu.png') bottom repeat-x;
	color: white;
	margin-top: 60px;
	padding: 40px 0 60px 0;
 }

	#basemenu h2 {
		background: transparent;
		color: white;
	}

	#basemenu .page {
		position: relative;
	}

		#servicemenu {
			background: #c2cd23 url('/images/branding/bg/servicelist.png') bottom repeat-x;
			color: #3e3e3e;
			padding: 10px;
			position: absolute;
			top: -85px;
			left: 0;
			width: 280px;
		}

		#page-3 #servicemenu,
		#page-22 #servicemenu,
		#page-24 #servicemenu,
		#page-26 #servicemenu,
		#page-28 #servicemenu {
			background: #c2cd23;
			float: right;
			position: relative;
			top: 0;
		}

			#servicemenu h2 {
				background: #c2cd23;
				color: white;
			}

			#servicemenu .menu {
				margin: 0;
			}

				#servicemenu .menu li {
					clear: both;
					display: block;
					height: 40px;
					margin: 0 0 10px 0;
					position: relative;
				}

				#servicemenu a:link, #servicemenu a:visited {
					background: black url('/images/branding/bg/menu.png') bottom repeat-x;
					border-right: solid 1px white;
					border-bottom: solid 1px white;
					display: block;
					left: -20px;
					padding: 10px;
					position: absolute;
					width: 200px;
				}
				
				#page-22 #servicemenu a:link,
				#page-22 #servicemenu a:visited,
				#page-24 #servicemenu a:link,
				#page-24 #servicemenu a:visited,
				#page-26 #servicemenu a:link,
				#page-26 #servicemenu a:visited,
				#page-28 #servicemenu a:link,
				#page-28 #servicemenu a:visited {
					left: 10px;
					width: 240px;
				}
				
				#page-22 #servicemenu #ppc a,
				#page-24 #servicemenu #seo a,
				#page-26 #servicemenu #aff a,
				#page-28 #servicemenu #sem a {
					background: #232323;
					color: white;
				}
				
				#page-22 #servicemenu h2,
				#page-24 #servicemenu h2,
				#page-26 #servicemenu h2,
				#page-28 #servicemenu h2 {
					margin-left: 10px;
				}
				
				#servicemenu a:hover, #servicemenu a:active {
					background: #232323;
					color: white;
					text-decoration: none;
				}

/* =CONTENT
Main content region.
----------------------------------------------------------------- */

 #content {
  
 }

	#content h1 a {
		background: white;
		color: black;
		display: block;
	}
	
		#blogposts {
			margin-right: 20px;
		}

			#blogposts h3 a {
				background: inherit;
				color: white;
			}
			
			#blogposts p {
				margin-bottom: 0;
			}
			
			#blogposts hr {
				border: solid 1px dashed;
				margin: 10px 0 5px 0;
			}

	#clients h3, #clients p {
		margin: 0;
	}
	
	#clients p {
		margin-bottom: 1em;
	}

/* =SIDEBAR
All attributes that relate to the sidebar
----------------------------------------------------------------- */

 #sidebar {
  
 }

	#sidebar .menu {
		margin: 0;
	}

		#sidebar .menu li, #sidebar .menu ul {
			margin: 0;
			padding: 0;
		}

		#sidebar .menu li {
			margin-right: 30px;
		}
		
			#sidebar .menu a:link, #sidebar .menu a:visited {
				margin: 0;
				padding: 0;
			}

			#sidebar .menu a:hover, #sidebar .menu a:active {
				background: white;
				border: none;
				color: black;
				text-decoration: underline;
			}

/* =TOP-BUTTON
Usability/Access feature to bring user to top of HTML document
----------------------------------------------------------------- */

 #top-button {
  
 }

/* =FOOTER
Copyright statement, links to policies, RSS and 3heads link
----------------------------------------------------------------- */

 #footer {
  background: #232323 url('/images/branding/bg/footer.png') bottom repeat-x;
	padding: 30px 0;
 }

	#footer p {
		color: white;
		margin: 0;
	}

		#footer a:link,
		#footer a:visited {
			color: white;
		}

  #footer .menu {
   
  }

   #footer .menu ul {
    
   }

   #footer .menu li {
    
   }

/* =TOP
Search for above to be brought to the top of the document
----------------------------------------------------------------- */