/* 

JF Prior stylesheet, 30 August 2007
Andy Darley, Carino Communications
+44 (0) 1628 526 005
andyd@carino.co.uk

*/

html
{
height: 100.1%;
}
 
body {
	background: #FFF repeat-x top left;
	margin: 0;
	padding: 0;
	font: 80%/150% Arial, Helvetica, sans-serif;
	color: #444;
	height: 100.1%;
}

/* 

Structural styles

*/

#container {
	width: 768px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	background: transparent url(../img/containerbg.png) repeat-y top right;
}
#plaincontainer {
	width: 768px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	background: transparent url(../img/containerbg-plain.png) repeat-y top right;
}

#navigation {
	color: #CCC;
	padding: 14px 10px 0 10px;
	font-weight: bold;
	text-align: left;
	margin: 0;
	background: #000 url(../img/navbackground.png) repeat-x top left;
	height: 26px;
}

#header {
	height: 140px;
	padding: 0;
	margin: 0;
	background: #FFF url(../img/headerpics/team.jpg) no-repeat top right;
}

#products #header {
	background: #FFF url(../img/headerpics/laptop.jpg) no-repeat top right;
}
/*
Change background image according to industry services
*/
#homepage #header {
	background: #FFF url(../img/headerpics/home.jpg) no-repeat top right;
}
#homepage-za #header {
	background: #FFF url(../img/headerpics/home-za.jpg) no-repeat top right;
}

#transport #header {
	background: #FFF url(../img/headerpics/transport.jpg) no-repeat top right;
}
#facilities #header {
	background: #FFF url(../img/headerpics/facilities.jpg) no-repeat top right;
}
#oilandgas #header {
	background: #FFF url(../img/headerpics/oilandgas.jpg) no-repeat top right;
}
#paper #header {
	background: #FFF url(../img/headerpics/paper.jpg) no-repeat top right;
}
#utilities #header {
	background: #FFF url(../img/headerpics/utilities.jpg) no-repeat top right;
}
#lifesciences #header {
	background: #FFF url(../img/headerpics/lifesciences.jpg) no-repeat top right;
}
#datamanagement #header {
	background: #FFF url(../img/headerpics/datamgt.jpg) no-repeat top right;
}
#consulting #header {
	background: #FFF url(../img/headerpics/consulting.jpg) no-repeat top right;
}
#healthchecks #header {
	background: #FFF url(../img/headerpics/healthcheck.jpg) no-repeat top right;
}
#services #header {
	background: #FFF url(../img/headerpics/consulting.jpg) no-repeat top right;
}
#techservices #header {
	background: #FFF url(../img/headerpics/techservices.jpg) no-repeat top right;
}
#integration #header {
	background: #FFF url(../img/headerpics/integration.jpg) no-repeat top right;
}
#supportservices #header {
	background: #FFF url(../img/headerpics/supportservices.jpg) no-repeat top right;
}
#training #header {
	background: #FFF url(../img/headerpics/training.jpg) no-repeat top right;
}
#events #header {
	background: #FFF url(../img/headerpics/events.jpg) no-repeat top right;
}
#news #header {
	background: #FFF url(../img/headerpics/news.jpg) no-repeat top right;
}
#mobile #header {
	background: #FFF url(../img/headerpics/mobile.jpg) no-repeat top right;
}
#contact #header {
	background: #FFF url(../img/headerpics/contact.jpg) no-repeat top right;
}
#contentarea {
	float: left;
	width: 573px;
	margin: 0;
	padding: 0 0 30px 0;
	background: transparent url(../img/dropshadow.png) no-repeat top left;
}

#homecontentarea {
	float: left;
	width: 768px;
	margin: 0;
	padding: 0 0 130px 0;
	background: transparent url(../img/dropshadow.png) no-repeat top left;
}

div.frontboxnarrow {
	width: 170px;
	height: 100px;
	float: left;
	margin: 0 12px 12px 0;
	position: relative;
}

.firstbox {
	background: #FFF url(../img/frontbox1.jpg) no-repeat top center;
}

.secondbox {
	background: #FFF url(../img/frontbox2.jpg) no-repeat top center;
}

.thirdbox {
	background: #FFF url(../img/frontbox3.jpg) no-repeat top center;
}

.frontboxnarrow h3 {
	padding: 0;
	margin: 0 0 1em 0;
	font-variant: small-caps;
	font-size: 1em;
	position: absolute;
	top: 0;
	left: 3px;
}

#contentarea .frontboxnarrow p {
	padding: 0;
	margin: 0;
	font-size: 0.9em;
	position: absolute;
	bottom: 3px;
	left: 3px;
	line-height: 100%;
}

div.frontboxwide {
	width: 252px;
	height: 300px;
	float: left;
	margin: 0 12px 12px 0;
	position: relative;
	overflow: auto;
	padding: 5px;
	background-color: #FDEECC;
}

.frontboxwide h3 {
	padding: 0;
	margin: 0 0 12px 0;
	font-variant: small-caps;
	font-size: 1em;
}

.frontboxwide dl {
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	line-height: 110%;
}

.frontboxwide dt {
	margin-bottom: 5px;
}

dd.thedateandsource {
	font-style: italic;
	margin-bottom: 5px;
}

#sidebar {
    float: right;
    width: 193px;
    margin: 0;
    padding: 0 0 10px 0;
    background-color: transparent;
}

div.sidebarpromobox {
	width: 150px;
	height: 100px;
	margin: 0 auto 12px auto;
	position: relative;
}

.sidebarpromobox h3 {
	padding: 0;
	margin: 0 0 1em 0;
	font-variant: small-caps;
	font-size: 1em;
	position: absolute;
	top: 0;
	left: 3px;
}

#sidebar .sidebarpromobox p {
	padding: 0;
	margin: 0;
	font-size: 0.9em;
	position: absolute;
	bottom: 3px;
	left: 3px;
	line-height: 100%;
}

#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: left;
    height: 20px;
    padding: 5px 25px 5px 25px;
    color: #CCC;
    background: #007A86 url(../img/tealfade.png) repeat-x top left;
    border-top: 2px solid #FFF;
}

.frontbox {
	padding-left: 12px;
	margin: 0;
	float: left;
	width: 178px;
}
.textbox {
	background-color: #F0E5CC;
	padding-left: 12px;
	padding-right: 12px;
	margin: 0 50px 10px 0;
	float: left;
	border: 1px solid #000;
}

/* 

Text styles

*/

a:VISITED {
	color: #006A64;
	background-color: transparent;
	text-decoration: underline;
}

a:LINK {
	color: #006A64;
	background-color: transparent;
	text-decoration: underline;
}

a:HOVER {
	color: #FFF;
	background-color: #006A64;
	text-decoration: none;
}

a:ACTIVE {
	color: #F00;
}

blockquote {
background: transparent url(bq_left.gif) left top no-repeat;
margin: 5px 20px 10px 20px;
padding-left: 50px;
}

blockquote p {
background: url(bq_right.gif) right bottom no-repeat;
font-size:130%;
margin: 0;
padding-right: 50px !important;
}
p {
	margin-top: 0;
	margin-bottom: 12px;
}

h3 {
	margin-top: 0;
	margin-bottom: 12px;
}

h2 {
	margin-top: 0;
	margin-bottom: 12px;
}

h1 {
	margin-top: 0;
	margin-bottom: 12px;
}

h3 {
	color: #006A66;
}

h2 {
	color: #006A66;
}

h1 {
	color: #006A66;
}

h1 {
	font-size: 1.6em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1.2em;
}

h1.sectionheader {
	height: 24px;
	color: #CCC;
	font-variant: small-caps;
	font-size: 1.2em;
	padding: 6px 0 0 12px;
}

#homecontentarea h1.sectionheader {
	background: #007A86 url(../img/tealheader.gif) repeat-y top left;
	 padding-top: 6px;
}

#contentarea h1.sectionheader {
	background: #007A86 url(../img/tealheader.gif) repeat-y top left;
}

#sidebar h1.sectionheader {
	background: #444 url(../img/darkheader.gif) repeat-y top right;
}

#homecontentarea h1 {
	padding: 0 12px;
}

#homecontentarea p {
	padding: 0 12px;
}

#sidebar h2 {
	padding: 0 12px;
}

#contentarea h2 {
	padding: 0 12px;
}
#contentarea h3 {
	padding: 0 12px;
}
#sidebar p {
	padding: 0 12px;
}

#contentarea p {
	padding: 0 12px;
}

dt {
	font-weight: bold;
}

dd {
	margin-left: 5px;
	margin-bottom: 12px;
}

ol {
	margin: 0;
	padding: 0 0 18px 30px;
}

ul {
	margin: 0;
	padding: 0 0 18px 30px;
}

ul li {
	list-style-type: square;
}

/*

Main navigation bar styles

*/

#navigation ul {
	margin: 0;
	padding: 0;
}

#navigation li
{
	display: inline;
	list-style-type: none;
	padding-right: 19px;
	font-size: 0.95em;
}

#navigation li.last {
	padding-right: 0;
}

#navigation a:VISITED {
	text-decoration: none;
	font-weight: normal;
	color: #CCC;
	padding: 3px 14px;
	background-color: transparent;
}

#navigation a {
	text-decoration: none;
	font-weight: normal;
	color: #CCC;
	padding: 3px 14px;
	background-color: transparent;
}

#navigation a.current:HOVER {
	background-color: #CCC;
	color: #800000;
	padding: 2px 13px;
	border-top: 1px solid #333;
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	border-left: 1px solid #333;
}

#navigation a.current:VISITED {
	background-color: #CCC;
	color: #800000;
	padding: 2px 13px;
	border-top: 1px solid #333;
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	border-left: 1px solid #333;
}

#navigation a.current {
	background-color: #CCC;
	color: #800000;
	padding: 2px 13px;
	border-top: 1px solid #333;
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	border-left: 1px solid #333;
}

#navigation a:HOVER {
	background-color: #CCC;
	color: #800000;
	padding: 2px 13px;
	border-top: 1px solid #333;
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	border-left: 1px solid #333;
}

/* 

Styles for sidebar subnav

*/

#sidebar ul
{
	padding-left: 0;
	margin-left: 10px;
	width: 180px;
}

#sidebar li
{
	list-style: none;
	margin: 0;
	padding: 0.25em;
}

#sidebar li a {
	text-decoration: none;
	color: #444;
	background-color: #F0E5CC;
	display: block;
	width: 169px;
	padding: 3px;
}

#sidebar li a.current {
	color: #800000;
	background: #F0E5CC url(../img/sidebarlink.png) repeat-y top left;
}

#sidebar li a:HOVER {
	color: #800000;
	background: #F0E5CC url(../img/sidebarlink.png) repeat-y top left;
}
.img-centre {
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 1em;
	background-color: #ffffff;
}
.txt-centre
/*
Styles for side panel
*/
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
div#nifty{ margin: 0 10%;background: #9BD1FA}
 

/*

Footer styles

*/

#footer div {
	float: left;
	width: 225px;
	margin-right: 15px;
	border-right: 1px solid #CCC;
	padding-right: 5px;
}

#footer h3 {
	color: #CCC;
	margin-bottom: 5px;
	font-variant: small-caps;
}

#footer li {
	line-height: normal;
	margin: 0;
	padding: 0;
	font-size: 0.8em;
}

#footer p {
	line-height: normal;
	margin: 0;
	padding: 0;
	font-size: 0.8em;
}

#footer ul
{
	padding: 0;
	margin: 0;
}

#footer li {
	list-style-type: none;
	margin-bottom: 2px;
}

#footer a:VISITED {
	color: #FFF;
	background-color: transparent;
	text-decoration: none;
}

#footer a {
	color: #FFF;
	background-color: transparent;
	text-decoration: none;
}

#footer a:ACTIVE {
	color: #CCC;
	background-color: transparent;
	text-decoration: underline;
}

#footer a:HOVER {
	color: #CCC;
	background-color: transparent;
	text-decoration: underline;
}

/*

misc styles

*/

br.clearing {
	height: 1px;
	overflow: hidden;
	clear: both;
}

.img-left 		{
	float: left;
	display:block;
	margin: 0 12px 5px 5px;
}

.img-right 		{
	float: right;
	margin: 12px 5px 5px 12px;
}
.img2-right 		{
	float: right;
	margin: -40px 0 0 12px;
}

/* 

Styles for tabbed view
From http://www.dhtmlgoodies.com
*/
/* CSS Document */
	.dhtmlgoodies_tabPane{
		height:21px;	/* Height of tabs */
		border-bottom:1px solid #919b9c;
	}
	.dhtmlgoodies_aTab{
		border-left:1px solid #919b9c;
		border-right:1px solid #919b9c;
		border-bottom:1px solid #919b9c;
		font: 90%/150% Arial, Helvetica, sans-serif;
		padding:5px;	
		overflow:auto;	
		
	}
	.dhtmlgoodies_tabPane DIV{
		float:left;
		height:100%;	/* Height of tabs */
		padding-left:3px;
		vertical-align:middle;
		background-repeat:no-repeat;
		background-position:bottom left;
		cursor:pointer;
		position:relative;
		bottom:-1px;
		margin-left:0px;
		margin-right:0px;
	}
	.dhtmlgoodies_tabPane .tabActive{
		background-image:url('../img/tabs/tab_left_active.gif');
		margin-left:0px;
		margin-right:0px;	
		z-index:10;	
	}
	.dhtmlgoodies_tabPane .tabInactive{
		background-image:url('../img/tabs/tab_left_inactive.gif');
		margin-left:0px;
		margin-right:0px;
		z-index:1;
	}

	.dhtmlgoodies_tabPane .inactiveTabOver{
		background-image:url('../img/tabs/tab_left_over.gif');
		margin-left:0px;
		margin-right:0px;
	}
	.dhtmlgoodies_tabPane span{
		font-family: Arial, Helvetica, sans-serif;
		vertical-align:top;
		font-size:12px;
		padding-left:3px;
		padding-right:3px;		
		line-height:21px;
		float:left;
	}
	.dhtmlgoodies_tabPane .tabActive span{
		padding-bottom:1px;
		line-height:20px; 
	}
	
	.dhtmlgoodies_tabPane img{
		float:left;
	}
/* "popup" links */
/* see http://meyerweb.com/eric/css/edge/popups/demo.html */
div#csspopup a span {display: none;}

div#csspopup a:hover span {display: block;
   position: absolute; top: 270px; left:0px; width: 190px;
   padding: 5px; margin: 10px; z-index: 100;
   border:1px solid #919b9c; 
   color: #000; background: white;
   font: 10px Arial, Helvertica sans-serif; text-align: left;}


/* Syles for enquiry / Support form */

.supportform input
{
	font-size: 85%;
	width: 200px;
	border: 1px solid #006A64;
  background: #ffc;
}
.supportform textarea
{
	
  font:85%/1 sans-serif;
	width: 200px;
	border: 1px solid #006A64;
  background: #ffc;
}
.supportform fieldset {
	padding: 1em;
  font:90%/1 sans-serif;
  border:1px solid #006A64;
  margin-top: 1em;
  margin-left: 2em;
  margin-right: 2em;
  }
  
.supportform label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }

.supportform legend {
  padding: 0.2em 0.5em;
  border:1px solid #006A64;
  color:#006A64;
  font-size:90%;
  text-align:right;
  margin-top:1em;
}
/* Tooltip styles from http://www.fijiwebdesign.com/fiji-web-design-blog/css-tooltips-floating-html-elements.html */
a span {
	display: none;
}

a:hover {
	position: relative;
}

a:hover span {
	display: block;
   	position: absolute;
   	width: 10em;
   	padding: 5px;
   	cursor: help;
}

a:hover span {
	top: 50px; left: 200px;
	background-color: white;
	font-size: 0.8em;
	line-height: 1em;
	border: 1px solid #cccccc;
	color: #000000;
}
#ticker {
float: left;
}
#ticker a:VISITED {
	color: #000000;
	background-color: transparent;
	text-decoration: underline;
}

#ticker a:LINK {
	color: #006A64;
	background-color: transparent;
	text-decoration: underline;
}

#ticker a:HOVER {
	color: #FFF;
	background-color: transparent;
	text-decoration: none;
}