﻿/* ==================================================== Default Body styles across all pages (unless changed by sub-style changes)*/
body {
	/* === TEXT === */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 120%;
	color:#111111;	
	/* === LAYOUT === */
	height: 100%;	
	margin:0;
	padding:0;
	/* === BACKGROUND === */
	background-image:  url(../img/bgs/bgBody_home.gif);
	background-repeat: repeat-x;
}

/* Default Paragraph settings across all pages */
p {
	margin-top:5px;
	padding-bottom:0px;
	margin-bottom:0px;	
}

/* TITLE HEADINGS */
h1 {font-size:18px; line-height:120%;font-weight:normal;margin-top:5px;padding-top:0px;margin-bottom:9px; padding-bottom:0px;clear:both}
h2 {font-size:14px; line-height:120%;font-weight:normal;margin-top:5px;padding-top:0px;margin-bottom:7px; padding-bottom:0px;clear:both}
h3 {font-size:12px; line-height:120%;font-weight:normal;margin-top:5px;padding-top:0px;margin-bottom:6px; padding-bottom:0px;clear:both}
h4 {font-size:11px; line-height:120%;font-weight:normal;margin-top:5px;padding-top:0px;margin-bottom:0px; padding-bottom:0px;clear:both}

/* LISTS */
ul {
	margin-left:15px;
	list-style:none;	
}

ul li {
	background-image:url('../img/epc_bullet.gif');
	background-repeat:no-repeat;
	background-position:left 3px;
	padding-left:15px;
	line-height:140%;
}

ol li {
	padding-left:15px;
	line-height:140%;
}


img {border:0px;}
a:hover, a:active {text-decoration:underline}

hr {
	border-top-width: 1px;
	border-top-style: solid;	
	margin:10px 0px 0px 0px;
}

/*	Highlighted is used just to give text an orange colour (use within a span with a class of Highlighted */
.HighLighted 	{
	color:#E69632;
}

/*	Lowlighted is used just to give text an dim grey colour and smaller in size (use within a span with a class of Lowlighted */
.LowLighted 	{
	color:#999999;
	font-size:9px;
}

/*for client quotes, etc. */
/* This has been adjusted to show quotes before and after the tags, in large black font */
q {
	font-size: 15px;
	line-height: 17px;
	font-weight: normal;
	font-style:italic;
	font-family:"Times New Roman", Times, serif;
	quotes: "\201C" "\201D";
	display:block;
}

q:before{
	font-family:"Times New Roman", Times, serif;
	content: open-quote;
	font-size: 22px;
	font-weight:bold;	
	color:gray;
	vertical-align:bottom;
	padding-right:5px;	
}

q:after {
	font-family:"Times New Roman", Times, serif;
	padding-left:5px;
	content: close-quote;
	font-size: 22px;
	font-weight:bold;
	color:gray;
	vertical-align:bottom;	
}

table.portfolio{
	width:100%;
}


table.portfolio{
	width:100%;
}

table.portfolio td.logo{
	vertical-align:top;
	text-align:center;
	width:110px
}

table.portfolio td.detail{
	vertical-align:top;
	text-align:left;	
}

table.glossary td{
	font-size: 9px;
	color:#666666;
	vertical-align:top;
	min-width:50px;	
}

table.specification {
	border-collapse:collapse;
	text-align:center;
	width:100%;
}

table.specification th{
	/* section colors defined at the bottom of this css script */
	color:#E69632;border-top:1px #E69632 solid;border-bottom:1px #E69632 solid;
}

table.specification td{
	border-bottom:1px #E69632 dotted;
	padding:5px;	
}

table.orangetable td{
	border:1px #E69632 solid;	
}

table.orangetable td.noborder{
	border:0px white solid;
}

.textleft{
	text-align:left;
}

.textright{
	text-align:right;
}

.textcenter{	
	text-align:center;
}

.scriptfont {color:#000000; font-family: "Courier New", Courier, monospace}
.scriptblue {color: #000066}
.scriptgreen {color:#006600}

.DivHomeSectionTitle_whatwedo {background-color:#0066FF;min-height:16px;color:white;padding:2px 10px 2px 10px;font-size:16px;background-image:url(../img/bgs/bgArrow_white.gif);background-repeat:no-repeat;background-position:right}
.DivHomeSectionTitle_solutions {background-color:#CB320B;min-height:16px;color:white;padding:2px 10px 2px 10px;font-size:16px;background-image:url(../img/bgs/bgArrow_white.gif);background-repeat:no-repeat;background-position:right}
.DivHomeSectionTitle_services {background-color:#3399CC;min-height:16px;color:white;padding:2px 10px 2px 10px;font-size:16px;background-image:url(../img/bgs/bgArrow_white.gif);background-repeat:no-repeat;background-position:right}
.DivHomeSectionTitle_casestudies {background-color:#6EB927;min-height:16px;color:white;padding:2px 10px 2px 10px;font-size:16px;background-image:url(../img/bgs/bgArrow_white.gif);background-repeat:no-repeat;background-position:right}
.DivHomeSectionTitle_contact {background-color:#000000;min-height:16px;color:white;padding:2px 10px 2px 10px;font-size:16px;background-image:url(../img/bgs/bgArrow_white.gif);background-repeat:no-repeat;background-position:right}
.DivHomeSectionTitle_faq {background-color:#897979;min-height:16px;color:white;padding:2px 10px 2px 10px;font-size:16px;background-image:url(../img/bgs/bgArrow_white.gif);background-repeat:no-repeat;background-position:right}
.DivHomeSectionTitle_news {background-color:#4201BA;min-height:16px;color:white;padding:2px 10px 2px 10px;font-size:16px;background-image:url(../img/bgs/bgArrow_white.gif);background-repeat:no-repeat;background-position:right}



/* ==================================================== #DivWrapper contains all divs, and has the background watermark image */
#DivWrapper {
	/* === LAYOUT === */
	height: 768px;
	/*width: 1004px;*/
	/* the width of 1004 is implied, to allow the background to flow beyond limits */
	top:0px;
	/* === BACKGROUND === */
	background-repeat: no-repeat;
	background-position: 900px 191px;
	background-image:  url(../img/bgs/bgWrapper_home.gif);
}


/* ==================================================== DivNav / the left colum */
/* --- DivNav a and link style in navigation css --- */
#DivNav {
	/* === LAYOUT === */
	width: 90px;
	height:768px;
	padding: 0px;
	margin: 0px;
	clear: none;
	top:0px;
	border-right:1px #FFEDC8 solid;
}


/* ==================================================== #DivContent = the content (containing the header, main and footer divs*/
#DivContentWrapper {
	/* === LAYOUT === */
    width: 913px; 
	padding: 0px;
	margin: 0px 0px 0px 91px;
	min-height:668px;
	position: absolute;
	top: 0px;
	clear:both;
}

/* ==================================================== #DivHeader has the background icons in */
#DivHeader {
	/* === LAYOUT === */	
	width: 820px;
	height: 75px;
	padding: 0px 80px 0px 15px;
	vertical-align:middle;
	background-image:url(../img/bgs/bgArrow_large_white.gif);
	background-repeat:no-repeat;
	background-position:top right;	
	/* === TEXT === */	
	font-size: 16px;
	color: #FFFFFF;
	line-height:120%;
}

body.home #DivHeader h1{
	/* === TEXT === */	
	font-size: 16px;
	color: #FFFFFF;
	line-height:120%;
}


#DivContact {
	position:absolute;
	top:75px;
	right:0px;
	width:600px;
	height:18px;
	font-size:9px;	
	text-align:right;
	color:white;
	background-color:#E69632;
	border-bottom:2px white solid;
}

#DivContact input {
	width:100px;
	border: 0px solid #E69632;
	font-size:9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;		
}

#DivContact textarea {
	border: 0px solid #E69632;
	font-size:9px;
	padding:0px;	
	width:421px;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
}

#DivContact button {
	width:50px;
	height:16px;
	font-size:9px;
	background-color:#E69632;
	border: 1px solid white;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding:0px;
	vertical-align:top;	
	font-weight:bold;
	color:white;
	border-style:dotted;
}

/* ==================================================== #DivMain = the main text content*/
#DivMainWrapper {
	/* === LAYOUT === */
	/*width: 934px;*/
	width: 913px;
	min-height:500px;
	padding-left:0px;
	margin-top: 10px;
}

/* ==================================================== #DivMainTitle = the title that appears under the banner on each page*/
.DivMainTitle {
	/* === LAYOUT === */
	width: 820px;
	padding-top: 5px;
	min-height:30px;	
	/* === TEXT === */	
	font-size: medium;
	line-height: 120%;	
}

/* ==================================================== #DivSecLev1_SmallFloat = Used for Section Level 1 Small Floaters*/
.DivSecLev1_SmallFloat {
	/* === LAYOUT === */
	width: 428px;
	padding: 0px 0px 10px;
	margin: 5px 5px 5px 20px;
	float: left;
	clear: none;
	min-height: 75px;
}

/* ==================================================== #DivSecLev1_WideFloat = Used for Section Level 1 Wide Floaters*/
.DivSecLev1_WideFloat {
	/* === LAYOUT === */
	width: 892px;
	padding: 0px 0px 11px;
	margin: 5px 5px 5px 20px;
	float: left;
	clear: none;
	min-height: 40px;
}

/* ==================================================== #DivSecLev2_Index = Used for Section Level 2 Index list */
.DivSecLev2_Index {
	/* === LAYOUT === */	
	width: 150px;
	padding: 0px;
	float:left;
	clear:none;
	border-right:1px #FFEDC8 solid;	
}

#UsefulLinks {
	display:block;
	margin-top:20px;
	border-top:1px #FFEDC8 solid;	
}

.DivSecLev2_Index p{
	margin-left:5px;
	padding-left:5px;
	margin-top:5px;
}

.submenuHidden {
	display:none;
}

.submenuVisible {
	margin-left:20px;
	border-left: 1px #E69632 dotted;	
}

.submenuVisible p{
	margin-top:0px;
	margin-bottom:0px;
	padding-left:5px;	
}


/* ==================================================== #DivSecLev2_Main = Used for Section Level 2 Main Content */
.DivSecLev2_Main {
	/* === LAYOUT === */	
	width: 742px;
	margin-left:20px;
	padding:0px;
	float: left;
	clear: none;		
}

/* ==================================================== #DivBreadCrumb = the breadcrumb path of the current page */
#DivBreadCrumb {
	/* === LAYOUT === */
	width: 934px;
	padding: 0px;
	height:16px;
	clear:left;
	float:left;	
}

#DivBreadCrumb a {
	/* turn off the underlines for links in the breadcrumb (just tidier) */
	text-decoration:none;
}

#DivBreadCrumb .ParentPage {
	/* The ParentPage class is used for hierarchial superior pages to the current page - shown in grey in the breadcrumb */
	color:#777777;
}

#DivBreadCrumb .CurrentPage {
	/* The CurrentPage class is used for a link to the current page - shown in orange in the breadcrumb */
	color:#E69632;
}

/* ==================================================== #DivFooter = the footer content*/
#DivFooter {
	/* === LAYOUT === */	
	width: 913px;
	padding: 0px;
	height:38px;
	border-top: #E69632 1px solid;
	padding: 0px;
	clear:left;
	float:left;
	/* === TEXT === */
	text-align:right;
}

#DivFooter a {
	/* Removing the underline from hyperlinks in the footer */
	text-decoration:none;
	/* The footer hyperlinks are ALL orange - regardless of which section they are in */	
	color:#E69632;			
}

#DivFooter td {
	/* Adjust all text withing the footer to be all top aligned so it's as close to the line as possible */
	vertical-align:top;	
}

#iso {
	/* The iso class type is used just for the ISO image plopped in the footer */
	vertical-align:top;	
}

/* ==================================================== SECTION STYLES FOR HOME PAGE */
.DivHomeSectionBlock
{
	float:left;
	clear:none;
	border-right: #E69632 1px solid;
	border-bottom: #E69632 1px solid;
	border-left: #E69632 1px solid;		
	margin-top:4px;
	cursor:pointer;	
}

.DivHomeSectionTitle
{background-color:#E69632;min-height:16px;color:white;padding:2px 10px 2px 10px;font-size:16px;background-image:url(../img/bgs/bgArrow_white.gif);background-repeat:no-repeat;background-position:right}

.DivHomeSectionText
{
	padding:5px 15px 5px 15px;
}

/* ==================================================== SECTION STYLES FOR BACKGROUND IMAGES */
/* --- wrapper for each page --- */
body.home #DivWrapper {background-image:  url(../img/bgs/bgWrapper_whatwedo.gif);}
body.whatwedo #DivWrapper {background-image:  url(../img/bgs/bgWrapper_whatwedo.gif);}
body.solutions #DivWrapper {background-image:  url(../img/bgs/bgWrapper_solutions.gif);}
body.services #DivWrapper {background-image:  url(../img/bgs/bgWrapper_services.gif);}
body.casestudies #DivWrapper {background-image:  url(../img/bgs/bgWrapper_casestudies.gif);}
body.contact #DivWrapper {background-image:  url(../img/bgs/bgWrapper_contact.gif);}
body.faq #DivWrapper {background-image:  url(../img/bgs/bgWrapper_faq.gif);}
body.news #DivWrapper {background-image:  url(../img/bgs/bgWrapper_news.gif);}

body {background-image:  url(../img/bgs/bgBody_home.gif);}
body.whatwedo{background-image:  url(../img/bgs/bgBody_whatwedo.gif);}
body.solutions{background-image:  url(../img/bgs/bgBody_solutions.gif);}
body.services{background-image:  url(../img/bgs/bgBody_services.gif);}
body.casestudies{background-image:  url(../img/bgs/bgBody_casestudies.gif);}
body.contact{background-image:  url(../img/bgs/bgBody_contact.gif);}
body.faq{background-image:  url(../img/bgs/bgBody_faq.gif);}
body.news{background-image:  url(../img/bgs/bgBody_news.gif);}

/* ==================================================== SECTION STYLES FOR COLOURS */
/* === DEFAULT === (ORANGE) === */
h1, h2, h3, h4,a:active, a:hover, hr
	{color:#E69632;border-top-color:#E69632;} 
a {text-decoration:underline; color:#E69632; border:0px;}	
a.selected {background-color:#FFF0D1 ;text-decoration:none;}
a.menu {text-decoration:none;}

body.solutions a.menu,
body.whatwedo a.menu,
body.services a.menu,
body.solutions a.menu,
body.casestudies a.menu,
body.solutions a.menu,
body.contact a.menu,
body.faq a.menu,
body.news a.menu
{
	text-decoration:none; color:#E69632; border:0px;
}

/* === SOLUTIONS === (RED) === */
body.solutions h1, 
body.solutions h2, 
body.solutions h3,
body.solutions h4,
body.solutions hr,
body.solutions a.selected,
body.solutions q,
body.solutions span.HighLighted,
body.solutions a 
	{color:#CB320B;border-top-color:#CB320B;}
body.solutions #DivFooter {border-top:#CB320B 2px solid;}
body.solutions table.specification th{color:#CB320B;border-top:1px #CB320B solid;border-bottom:1px #CB320B solid;}
body.solutions #DivContact, body.solutions #DivContact button {background-color:#CB320B;}

/* === WHATWEDO === (PASTEL BLUE) === */
body.whatwedo h1, 
body.whatwedo h2, 
body.whatwedo h3,
body.whatwedo h4,
body.whatwedo hr,
body.whatwedo a.selected,
body.whatwedo q,
body.whatwedo span.HighLighted,
body.whatwedo a
	{color:#0066FF;border-top-color:#0066FF;}
body.whatwedo #DivFooter {border-top:#0066FF 2px solid;}	
body.whatwedo table.specification th{color:#0066FF;border-top:1px #0066FF solid;border-bottom:1px #0066FF solid;}
body.whatwedo #DivContact, body.whatwedo #DivContact button {background-color:#0066FF;}


/* === SERVICES === (BLUE) === */
body.services h1, 
body.services h2, 
body.services h3,
body.services h4,
body.services hr,
body.services a.selected,
body.services q,
body.services span.HighLighted,
body.services a
	{color:#3399CC;border-top-color:#3399CC;}
body.services #DivFooter {border-top:#3399CC 2px solid;}	
body.services table.specification th{color:#3399CC;border-top:1px #3399CC solid;border-bottom:1px #3399CC solid;}
body.services #DivContact, body.services #DivContact button {background-color:#3399CC;}


/* === CASESTUDIES === (GREEN) === */
body.casestudies h1, 
body.casestudies h2, 
body.casestudies h3,
body.casestudies h4,
body.casestudies hr,
body.casestudies a.selected,
body.casestudies q,
body.casestudies span.HighLighted,
body.casestudies a
	{color:#6EB927;border-top-color:#6EB927;}
body.casestudies #DivFooter {border-top:#6EB927 2px solid;}	
body.casestudies table.specification th{color:#6EB927;border-top:1px #6EB927 solid;border-bottom:1px #6EB927 solid;}
body.casestudies #DivContact, body.casestudies #DivContact button {background-color:#6EB927;}


/* === CONTACT === (BLACK) === */
body.contact h1, 
body.contact h2, 
body.contact h3,
body.contact h4,
body.contact hr,
body.contact a.selected,
body.contact q,
body.contact span.HighLighted,
body.contact a 
	{color:#000000;border-top-color:#000000;}
body.contact #DivFooter {border-top:#000000 2px solid;}
body.contact table.specification th{color:#000000;border-top:1px #000000 solid;border-bottom:1px #000000 solid;}
body.contact #DivContact, body.contact #DivContact button {background-color:#000000;}

/* === FAQ === (DARK BLUE) === */
/*#897979*/
body.faq h1, 
body.faq h2, 
body.faq h3,
body.faq h4,
body.faq hr,
body.faq a.selected,
body.faq q,
body.faq span.HighLighted,
body.faq a  
	{color:#0018ff;border-top-color:#0018ff;}
body.faq #DivFooter {border-top:#0018ff 2px solid;}	
body.faq table.specification th{color:#0018ff;border-top:1px #0018ff solid;border-bottom:1px #0018ff solid;}
body.faq #DivContact, body.faq #DivContact button {background-color:#0018ff;}

	
/* === NEWS === (PURPLE) === */ 
body.news h1, 
body.news h2, 
body.news h3,
body.news h4,
body.news hr,
body.news a.selected,
body.news q,
body.news span.HighLighted,
body.news a
	{color:#4201BA;border-top-color:#4201BA;}
body.news #DivFooter {border-top:#4201BA 2px solid;}	
body.news table.specification th{color:#4201BA;border-top:1px #4201BA solid;border-bottom:1px #4201BA solid;}
body.news #DivContact, body.news #DivContact button {background-color:#4201BA;}
