/*
	Description	:	Core Css
	Author		:	Ryan Roberts
	Client		:	
	
	Structure:		GENERAL
					MAIN STRUCTURE
					SUB STRUCTURE
					NAVIGATION
					MISC - float clearing & other stuff
*/
    
/*
	GENERAL
________________________________________________________________________________________ */

body {
	font-family: verdana, arial, sans-serif;
	background: #ccc url(../images/interface/body.gif);
	}

h1, h2, h3,
h4, h5, h6 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 1.8em;
	color: #333;
	margin: 0 0 4px
    }

#aside h1, #aside h2, #aside h3,
#aside h4, #aside h5, #aside h6 {
	font-size: 1.4em;
	padding-top: 14px;
	clear: both;
	border-bottom: 1px dashed #888
    }

#aside p,
#aside ul {
	font-size: 110%;
    }

a,
a:link,
a:active,
a:visited {
    color: #996600
    }
    
a:hover,
a:focus {
	color: #222
    }
    
/*
	MAIN STRUCTURE
	The main (first level) grid structure.
________________________________________________________________________________________ */

#wrapper {
	overflow: hidden;
	position: relative;
	width: 97em;
x	min-height: 62em; /* See the IE CSS for an IE6 specific expression */
	padding: 0 0 0;
	margin: 8px auto 0;
	background: #fff url(../images/interface/shadow-top.gif) repeat-x left top;
	}


#header-wrap {
	position: absolute;
	top: 12px;
	left: 0;
	width: 28.5%;
	height: 100%;
	background: url(../images/interface/content.gif) repeat-y left top;
	border-right: 1px solid #ccc
	}


#header {
	position: relative;
	float: left;
	width: 100%;
	padding: 54px 0 30px 0;
	margin: -12px 0 0;
	background: url(../images/interface/shadow-top.gif) no-repeat;
	}


#right-shadow {
	position: absolute;
	top: 12px;
	right: 0;
	width: 1.1em;
	height: 100%;
	background: url(../images/interface/content-right.gif) repeat-y right top;
	z-index: 1000
}

#right-side {
	position: absolute;
	top: 12px;
	right: 0;
	width: 1.1em;
	height: 100%;
	background: white url(../images/interface/content.gif) repeat-y right top;
	z-index: 1000
}


#content {
	float: right;
	width: 70.3%;
	padding: 12px 11px 12px 1px;
	background: url(../images/interface/shadow-top.gif) no-repeat right top;
	}


#footer {
	position: relative;
	width: 97.0em;
	height: 4.7em;
	margin: 0 auto;
	}

	#print {
		position: relative;
		float: left;
		width: 28.5%;
		height: 4.7em;
		background: url(../images/interface/footer.png) repeat-y left bottom
		}

	#site-info {
		position: relative;
		float: right;
		width: 71.5%;
		height: 4.7em;
		background: url(../images/interface/footer.png) repeat-y right bottom
		}
	
	
/*
	SUB STRUCTURE
	All content held "within" the first level grid structure.
________________________________________________________________________________________ */


/*	HEADER
------------------------------------- */

#header .brand-logo {
	display: block;
	width: 18.3em;
	height: 84px;
	padding: 0 0 40px;
	margin: 0 auto;
	}

#brand-strapline {

	}



/*	MAIN STYLING FOR TEMPLATES
------------------------------------- */

#content .header {
	position: relative;
	width: 100%;
	height: 18.3em;
	background: #2a2f35
	}

	#content .header img {
		display: block;
		width: 100%;
		height: 100%;
		z-index: 50
		}

	#content .header h1 {
		position: absolute;
		bottom: 24px;
		left: 26px;
		width: 13em;
		font-size: 2.6em;
		color: #fff;
		z-index: 100;
		}

#content-primary {
	min-height: 32em;
	padding: 24px 24px 6px;
	background: url(../images/interface/content-primary.gif) repeat-x;
	}

	#inner {
		float: left;
		width: 40em;
		padding-right: 24px;
		border-right: 1px solid #ccc
		}

	#aside {
		float: right;
		width: 19.4em;
		min-height: 32em;
		}



#intro {
	float: left;
	width: 40.0em;
	}


#search-simple {
	float: right;
	width: 19.4em
	}

	#search-simple label.labelize { 
		font-size: 130%;
		}

	#search-simple #searchquery {
		float: left;
		width: 11.8em;
		margin-right: 8px;
		}

	#search-simple .searchbtn {
		width: 2.8em;
		height: 1.8em;
		background: #fff100
	}

	.enquire {
		font-size: 110%;
		padding: 0 30px 0 0;
		margin: 3px 0 12px;
		background: url(../images/interface/icon-weeman.gif) no-repeat right center
		}

#info-services,
#info-products {
	float: left;
	width: 49.8%;
	padding: 1.8em 0 0 0;
	}
	
#info-services {
	float: right;
	}

	#info-services h3,
	#info-products h3 {
		font-size: 160%;
		line-height: 1;
		padding: 8px 8px 6px;
		background: url(../images/interface/thinstripes.gif);
		}

	#info-services p,
	#info-products p,
	#info-services ul,
	#info-products ul {
		padding: 0 12px 0 108px;
		}

	#info-services ul,
	#info-products ul {
		font-size: 110%;
		}

	#info-services img,
	#info-products img {
		float: left;
		}



#news-ticker {
    position:relative;
	width: 100%;
	float: left;
	overflow: hidden;
	margin: 0 0 12px;
	background: #fff542
	}

	#news-ticker h2, #news-ticker h3,
	#news-ticker h4, #news-ticker h5 {
		float: left;
		width: 7em;
		color: #fff;
		font-size: 120%;
		line-height: 1;
		padding: 4px;
		margin: 0;
		background: #666 url(../images/interface/darkstripes.gif);
		}
	
	.msg a {
		color: #333;
		background: #fff542
		}
		
    .msg {   
        font-family: Arial, Helvetica, sans-serif;
        font-size:1.2em;   
        font-weight:bold;
        line-height:1.8em;
        position:absolute;
        left:95.8em;
        width:500em;
        color: #333;       
    	}

#mini-ads
{
    width: 63.5em;
    clear:both;
    overflow: hidden;
}



.mini-ad01,
.mini-ad02,
.mini-ad03 {
	/* Height for IE6 is set in the IE css file*/
	position: relative;
	float: left;
	font-size: 91%;
	width: 22.4em;
	min-height: 9em;
	background: #fff url(../images/interface/lightfade.jpg) repeat-x 0 28px;
	border: 1px solid #ccc;
	border-top: none
	}

.mini-ad01 p,
.mini-ad02 p,
.mini-ad03 p {
	width: 10.4em;
	line-height: 1.2;
	padding: 0 8px 0 72px;
	}

.mini-ad01 img,
.mini-ad02 img,
.mini-ad03 img {
	position: absolute;
	top: 0;
	left: 0;
	}

.mini-ad02 {
	margin: 0 7px;
	}

	.mini-ad01 h4,
	.mini-ad02 h4,
	.mini-ad03 h4 {
		font-size: 154%;
		line-height: 1;
		padding: 8px 8px 6px 72px;
		background: url(../images/interface/thinstripes.gif);
		}


#case-studies ul {
	padding: 12px;
	margin: 0;
	list-style: none;
	background: url(../images/interface/casestudies.jpg) repeat-x
	}

#case-studies h2,
#case-studies h3,
#case-studies h4 {
	font-size: 150%;
	padding:  4px 0 0 30px;
	margin: 24px 0 4px;
	background: url(../images/interface/casestudiesicon.gif) no-repeat
	}


/* News, Careers & Case Study Style */

.new-entry,
.case-entry {
    padding: 14px 0 0;
    margin: 14px 0 0;
    border-top: 1px dotted #ccc
    }

    .new-entry h2,
    .case-entry h2,
    .career-entry h2 {
        font-size: 145%;
        }

    .career-entry {
        padding-bottom: 27px;
        }

    .career-entry h3 {
        font-size: 130%;
        }
     
     .careers-heading {
        font-size: 145%;
        padding-bottom: 18px;
        }

#news-article h2,
#case-article h2,
#career-listing h2,
.career-entry  h3 { 
    border-bottom: 1px dotted #ccc
    }

    .news-date {
        font-size: 100%;
        color: #888
        }

.go-back {
    font-size: 100%;
    }


/* DOWNLOADS */

#loggedIn {
    font-size: 95%;
    padding: 6px;
    background: #dedede
    }

.download-cat {
    font-size: 120%;
    color: #888;
    padding: 0 0 4px;
    margin: 27px 0 18px;
    border-bottom: 1px dotted #ccc
    }

.download-items {
    padding: 6px;
    margin-bottom: 36px;
    border: 1px dotted #ccc;
    }

.downloadPageTemplate h3 {
    font-size: 155%;
    }
    
    

/* SITEMAP */

body ul#sitemap-list li,
body ul#sitemap-list li ul li {
    color: #bbb;
    list-style-type: disc
    }

#sitemap-list>li>a {
    font-weight: bold;
    }

#sitemap-list>li {
    padding: 9px 0 0!important
    }
 
 

/* LANG PANEL */

#utils {
/**/Overflow: hidden;
	padding: 6px;
	background: #FFF100
	}

	#utils * {
		margin: 0;
		}


#lang-panel {
	width: 100%;
	overflow: hidden;
	padding: 0 0 0;
	background: #fff49c;
	border-top: 1px solid #222
	}

	#utils a,
	#lang-panel a {
		color: #663300
		}

	#utils a:hover,
	#lang-panel a:hover {
		color: #000;
		}
	
#text-size-select {
	width: 50%;
	float: left;
	font-size: 110%;
	}	

#toggle-lang {
	width: 40%;
	float: right;
	text-align: right;
	margin: 0;
	padding: 1px 0px 1px 0;
	/*background: url(../images/flags/gb-small.gif) no-repeat right center*/
	}

	#toggle-lang .mainLangSelectFlag {
		float: right;
		/* also see fixes for IE7 in the ie.css */
	}

/*
hide the language select and move text size thingy to the right

#text-size-select {
    float: right !important;
    text-align: right !important;
}

#toggle-lang { 
    display:none !important; 
    float:left !important;
}
*/

.lang-option {
	float: left;
	width: 22.7em;
	padding: 0 0 0.5em;
	}
	
	.lang-item
	{
	    padding: 0 0 0 0 !important;
	    background-repeat: no-repeat;
	    background-position: 0  0px;
	}
	
	.lang-item img
	{
	    float:left;
	}

	.gb {
		padding: 4px 0 4px 30px!important;
		background: url(../images/flags/gb.gif) no-repeat left center
		}

	.euro {
		padding: 4px 0 4px 30px!important;
		background: url(../images/flags/euro.gif) no-repeat left center
		}

	.usa {
		padding: 4px 0 4px 30px!important;
		background: url(../images/flags/usa.gif) no-repeat left center
		}

	.group02 {
		width: 22.5em;
		height:13.3em;
		border-left: 1px solid #222;
		border-right: 1px solid #222;
		}
		
	.group03 {
		/*border-left: 1px solid #222;*/
		}		

	#region-uk,
	#region-europe,
	#region-usa {
		/* Height for IE6 is set in the IE css file*/
		min-height: 60px;
		padding: 12px 12px 0 12px;
		background: #fff49c;
		}
		
	#region-uk p,
	#region-europe p,
	#region-usa p{
	
		font-size:11px !important;
	
	}
		

	.lang-select {
		padding: 0px 12px 5px 12px;
		}
		
	.lang-select h4 {
		font-size:1.4em;
		}		

	.lang-select li {
		padding: 4px 0;
		list-style: none;
		text-transform: uppercase;
		display:inline;
		}

	.lang-select .gb {
		padding-left: 24px!important;
		background: url(../images/flags/gb-small.gif) no-repeat left center
		}

	.lang-select .fr {
		padding-left: 24px!important;
		background: url(../images/flags/fr-small.gif) no-repeat left center
		}

	.lang-select .de {
		padding-left: 24px!important;
		background: url(../images/flags/de-small.gif) no-repeat left center
		}

	.lang-select .us {
		padding-left: 24px!important;
		background: url(../images/flags/us-small.gif) no-repeat left center
		}

	.lang-select .es {
		padding-left: 24px!important;
		background: url(../images/flags/es-small.gif) no-repeat left center
		}



#footer p#print-page {
	float: left;
	font-size: 100%;
	padding: 1.2em 0 0 16px;
	margin: 0;
	}

#footer #site-info p {
	text-align: right;
	font-size: 100%;
	padding: 1.2em 16px 0 0;
	margin: 0
	}

/* 
	NAVIGATION
	Main and sub navigation styling 
________________________________________________________________________________________ */

#nav-main ul {
	font: 1.3em/1 helvetica, arial, verdana, sans-serif;
	border-top: 1px dashed #ccc;
	overflow:hidden;
	}

#nav-main li {
	padding: 6px 0 5px;
	border-bottom: 1px dashed #ccc
	}

#nav-main a {
	color: #666;
	display: block
	}

#nav-main a:hover,
#nav-main a:focus {
	text-decoration: underline
	}

#nav-main li.current-page > a {
	color: #222!important;
	font-weight: 700;
	text-decoration: none;
	display: block;
	padding: 0 0 0 12px;
	background: url(../images/interface/arrowyellow.gif) no-repeat left center
	}

/* Sub nav items */

#nav-main {
	padding: 0 44px;
	}

#nav-main li ul {
	font-size: 90%;
	padding: 6px 0 0;
	border: none;
	}

#nav-main li ul li {
	padding: 3px 0 3px 7px;
	border: none
	}

#nav-main li.current-page ul li a:before {
	content: "­- ";
	font-weight: 400!important;
	margin-left: -7px!important;
	}

#nav-main li.current-page ul li a {
	font-weight: 400;
	padding: 0 0 0 14px;
	background: none
	}

	#nav-main li ul li a:focus,
	#nav-main li ul li a:hover {
		text-decoration: underline!important
		}

	#nav-main li ul li.current-page a {
		font-weight: 700
		}


.thirdlevel li {
	padding-left: 8px!important;
}


/* !breadcrumbs */

#breadcrumbs {
	float: left;
	width: 100%;
	padding: 6px 0;
	margin: 0 0 12px;
	background: url(../images/interface/breadcrumb.gif)
	}

	#breadcrumbs ul {
		list-style: none;
		text-transform: lowercase;
		margin: 0;
		padding: 0 24px;
		}

	#breadcrumbs li {
		float: left;
		color: #999;
		font-size: 90%;
		margin: 0 0 0 3px
		}

	#breadcrumbs li.first-crumb {
		margin: 0
		}


/*	MISC - KEEP THIS STUFF AT THE BOTTOM
________________________________________________________________________________________ */


.download {
	display: block;
	padding-left: 28px;
	}

.pdf {
	background: url(../images/pdf.gif) no-repeat left center;
	}

form div { 
	position: relative; 
	}

label.labelize { 
	color: #aaa; 
	position: absolute; 
	top: 5px; 
	left: 5px;
	}


/* FONT SIZER CSS */
.fontResizer a { display: block; float: left; width: 17px; height: 17em; text-align: center; border: 1px solid #ccc; line-height: 15em; color: #666; text-decoration: none; }
.fontResizer a:hover { color: #000; text-decoration: none; }

/* The following control the way the font-resizer links appear only Set the actual size-changes in the function call */
.smallFont { font-size: 10px; }
.medFont { font-size: 12px; }
.largeFont { font-size: 14px; }
.curFont { text-decoration: underline;}

#search-simple label,
#lang-panel {
	display: none;
	}


/*	REMOVE FROM PAGE */

.nav-access {
	position: absolute!important;
	top: -9999em!important;
	left: -9999em!important;
	}


/*	FLOAT CLEARING */

#header:after,
#wrapper:after,
#lang-panel:after,
#content:after,
#content-primary:after,
#content-secondary:after,
#footer:after,
fieldset:after,
form:after,
#search-simple:after,
#breadcrumbs:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}


/* FLOAT CLEARING FOR INTERNET EXPLODER */

#wrapper,
#header,
#lang-panel,
#content,
#content-primary,
#content-secondary,
#footer,
.nav,
fieldset,
form,
#search-simple,
#utils,
#breadcrumbs {
	zoom: 1;
	}