body
{
background-color: #FFFFFF;
margin: 0;
padding: 0
}

div#header
{
height: 74px
}

div#header img
{
position: relative;
top: 16px
}

div#topmenu
{
position: relative;
top: 24px;
text-align: right
}

div#hdr1, div#hdr2
{
height: 74px;
margin-left: 2%;
float: left
}

div#hdr1
{
display: inline;
margin-left: 3%;
width: 40%
}

div#hdr2
{
height: 32px;
width: 50%
}

div#banner
{
width: 100%;
position: relative;
left: 0;
top: 0;
height: 112px;
background: #56a7e5;
margin-bottom: 24px;
background-image: url('images/banner1.jpg');
background-position: center right;
background-repeat: no-repeat;
overflow: hidden
}

div#banner h2
{
font-size: 3.3em;
color: #FFFFFF;
font-weight: normal;
line-height: 0.9em;
letter-spacing: -0.05em;
position: relative;
top: -30px;
left: 20px
}

/*
html>body div#banner h2
{
letter-spacing: -0.05em;
position: relative;
top: -30px;
//top: 16px;
}

top: 20px;
*/

div#col1
{
float: left;
width: 21%;
margin-left: 3%;
margin-bottom: 32px;
display: inline;
background-image: url('images/col1_fade.gif');
background-position: top left;
background-repeat: repeat-x
}

div#col1 h3
{
padding: 4px;
font-size: 1.4em;
margin: 0
}

div#col1 h3, div#col1 h3 a
{
background: #56a7e5;
color: #FFFFFF;
font-weight: normal
}



div#col2
{
float: left;
width: 46%;
margin-left: 3%
}

div#col2 h1
{
color: #56a7e5;
font-weight: normal;
font-size: 3.4em;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
letter-spacing: -0.08em;
}

/*
html>body div#col2 h1
{

//
}
*/

div#col3
{
float: left;
width: 21%;
margin-left: 3%
}

div#col3 h3
{
color: #3d9ae1;
font-weight: normal;
font-size: 1.4em;
text-align: left;
margin-top: 0;
margin-bottom: 0;
line-height: normal
}

div.col3_box
{
border-bottom: 4px solid #3d9ae1;
margin-bottom: 16px
}

div.col3_box_featured
{
border-bottom: 4px solid #3d9ae1;
margin-bottom: 16px;
background-color: #F6F6F6;
padding-top: 8px
}


p, h1, h2, h3, h4, div#col1 a, div#casestudy, div#col2 form
{
margin-left: 8px;
margin-right: 8px
}

div#casestudy h2
{
margin: 0px;
color: #5D5D5D;
font-size: 1.5em;
background: #F5F5F5;
padding: 0.2em
}

div#casestudy h2 span
{
color: #3D9AE1;
font-size: 0.7em
}

div#footer
{
clear: both;
height: 24px;
background-color: #3d9ae1;
color: #FFFFFF;
text-align: right;
font-size: 0.8em;
letter-spacing: normal
}

div#footer a
{
color: #FFFFFF;
font-weight: bold
}

div#footer p
{
margin-right: 3%;
}

div#bottom_nav
{
clear: both;
height: 24px;
margin-top: 24px;
text-align: right;
font-size: 0.8em;
letter-spacing: normal;
background: #EEEEEE;
position: relative;
top: 12px;
}

/*
html>body div#bottom_nav
{
position: relative;
top: 12px;
//top: 0px
}
*/




div#bottom_nav a
{
color: #8a8a8a;
margin-right: 2%
}

div#bottom_nav a:hover
{
color: #BBBBBB
}

div#topmenu a
{
border-bottom: 4px solid #FFFFFF;
font-size: 1.1em;
color: #8a8a8a;
margin-right: 0.6em
}

div#topmenu a.selected, div#topmenu a:hover
{
border-bottom: 4px solid #56A7E5;
color: #4d4d4d
}

div#topmenu a.selected:hover
{
border-bottom: 4px solid #99D3FF
}



div#sidemenu a
{
display: block;
width: 100%;
color: #3f3f3f;
font-size: 0.9em;
margin-top: 0.2em;
background-image: url('images/menu_bullet.gif');
background-repeat: no-repeat;
background-position: center left;
padding-left: 16px;
line-height: 1.4em
}

div#sidemenu a:hover
{
color: #56A7E5;
background-image: url('images/menu_bullet_hover.gif');
}

div#sidemenu a.sub, div#sidemenu a.sub:hover
{
font-size: 0.8em;
background: transparent
}

div#sidemenu a.sub:hover
{
color: #56A7E5;
}

div#sidemenu a.sub
{
color: #818181;

}

div#sidemenu
{
margin-top: 8px;
margin-left: 2px;
text-align: left;
border-bottom: 4px solid #3d9ae1;
padding-bottom: 16px
}

div#casestudy
{
border: 1px dashed #EEEEEE;
padding: 8px;
margin-bottom: 16px;
margin-top: 16px
}

h1 span
{
font-size: 0.6em;
display: block;
margin-bottom: -0.5em
}

div#ss_wrapper
{
padding: 8px;
margin-top: 16px
}

div.ss
{
float: left;
margin-right: 8px;
margin-bottom: 8px;
background-image: url('images/loader.gif');
background-repeat: no-repeat;
background-position: center center
}

div.ss a
{
border: 4px solid #F3F3F3;
display: block;
width: 128px;
height: 96px
}

div.ss a:hover
{
border: 4px solid #3D9AE1
}

div.spacer0
{
width: auto;
clear: both;
height: 0
}

div#side_contact
{
font-size: 0.9em;
border: 4px solid #F3F3F3;
padding: 8px;
margin-top: 48px
}







#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
/*
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
*/
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
	
	
	
/*Callback Styles Added 15-06-09 Onwards*/	

#callback
{
background-color: #56a7e5;
width: auto;
border: 5px solid #2d8dd6;
padding: 12px 12px 12px 12px;
color: #FFF
}

#callback img
{
float: left;
margin: 0 16px 0 0
}

#callback h2
{
margin: 0px;
font-size: 2em
}


#callback p
{
font-size: 1.1em
}

#callback a
{
font-weight: bold;
color: #DFF1FF
}

#callback a:hover
{
color: #FFF
}

input, select, textarea
{
color: #5d5d5d;
font-family: arial, sans-serif;	
}

#callback input, #callback select
{
color: #747474;
width: 27%
}

#callback button
{
width: 52px;
text-align: center;
}

button
{
color: #454545;
font-family: arial, sans-serif;	
font-weight: bold;
font-size: 1.05em;
cursor: pointer;
}

button:hover
{
color: #2D8DD6	
}

#callback form
{
text-align: left	
}