@charset "utf-8";
/* Main styles for the Datadial website. Originally created by Rachel Radford December 2009. */
@font-face { 
	font-family: "Graublau Web Regular";
	src: url("/fonts/GraublauWeb.eot");
	src: local("Graublau Web Regular"), local("GraublauWeb-Regular"),
		 url("/fonts/GraublauWeb.woff") format("woff"),
		 url("/fonts/GraublauWeb.otf") format("opentype"),
		 url("/fonts/GraublauWeb.svg#GraublauWeb-Regular") format("svg");
}
/*
local('Graublau Web Regular'), local('Graublau Web'), local('GraublauWeb-Regular'),
*/ 

/* Mini reset */
html, body, h1, h2, h3, h4, h5, p, #masthead ul, #footer ul, #casestudies ul, #team ol, #blogfeed ol, blockquote, #sectorlink, fieldset {
	margin:0;
	padding:0;
}
#masthead ul, #footer ul, #casestudies ul, #blogfeed ol, #team ol{
	list-style:none;	
}   
  
/* HTML tags */
html {
	overflow-y:scroll; /* always show scroll so pages dont jump in FF */
	background:#443931 url(/img/bg-noise.png);
}
body{
	background:url(/img/bg.png) repeat-x fixed top;
	text-align:center;
	font-family:Helvetica, Arial, sans-serif;
}
h1, .client-name{
	font-family: "Graublau Web Regular", "Arial Narrow", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 36px;
	line-height: 42px;
	color: #454545;
	text-shadow: 1px 1px 0 #ccc;	
/*	width:324px;*/
	margin-bottom:33px;
}
h1 strong, .client-name{
	font-weight:normal;
	color:#df5a18;
}
.client-name {
	position:absolute; 
	top:36px; 
	right:35px; 
	width:520px; 
	display:block; 
	height:42px; 
	text-align:right;
} 

h2, .calltoaction {
	font-family: "Graublau Web Regular", "Arial Narrow", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 24px;
	color: #696260;
	padding:12px 0;
	clear:both;
}
h2+h2{
	padding-top:0;	
}
h3{
	font-family: "Graublau Web Regular", "Arial Narrow", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 14px;
	line-height: 18px;
	color: #696260;
	padding:12px 0 18px 0;
}
p, li, label, input, textarea, #nav li li, td, th{
	font-size:12px;
	line-height:18px;
	color:#383735;
	font-family:Helvetica, Arial, sans-serif;
}
p{
	padding-bottom:7px;	
}
a{
	color:#333;
	/*color:#df5a18;*/
	text-decoration:none;
	background:#dfd6c7;
	border-bottom:1px solid #dfd6c7;
}
a.arrow, a.arrow:hover{
	color:#fff;
	text-decoration:none;
	background:#969086;
	/*padding: 5px 25px 5px 5px;
	border:1px solid #ccc;
	background-image:url(/img/arrow-01-sm.png);
	background-position: center right;
	background-repeat:no-repeat;*/
	padding:5px 10px;
	border:1px solid #ca5b34;
	background: rgba(222, 86, 38, 0.9);
	background-image:url(../img/button01-bkg.png);
} 
a.arrow:hover{	
	background-color: rgba(222, 86, 38, 1);
	border:1px solid #fff;}

a:hover{
	border-bottom:1px solid #777;
	background:#e3d2b7;
}
a img{
	border:2px solid #dfd6c7;	
}
a:hover img{
	border-color:#e3d2b7;	
}
a.blank, a.blank img {border:none; background-color:transparent;}
blockquote{
	font-style:italic;	
	padding:16px 0 17px 0;
}
cite, .detail{
	font-style:normal;
	font-size:11px;
	color:#7f7876;
	font-family:Helvetica, Arial, sans-serif;
}
cite:before{
	content: "~ ";	
}
legend{
	display:none;
}
fieldset{
	border:none;	
}
label{
	display:block;
	line-height:24px;
	font-weight:bold;
} 

input[type="text"], input[type="password"], input[type="file"], label select{
	width:204px;
	left:10.5em;
	position:absolute;
}
textarea{
	width:358px;
	height:108px;
	display:block;
}
td, th{
	padding:6px;
	text-align:left;
}
th, table{
	border-bottom:1px solid #C7C7C7;	
}
table{
	margin-bottom:36px;	
}
/* Container */
#container{
	width:913px;
	margin:0 auto;
	text-align:left;
	position:relative;
}
/* Masthead */
#logo{
	margin-bottom:24px;
}
#logo a{
	display:block;
	height:60px;
	width:136px;
	border:none;
	text-indent:-999em;
	background:#e84c26 url(/img/logo_screen.gif) no-repeat top left;
	-moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);	
	-webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
#logo img{
	border:none;
}
#nav{
	position:absolute;
	top:0;
	right:0;
}
#nav li{
	float:left;	
	font-family: "Graublau Web Regular", Helvetica, Arial, sans-serif;
	font-size: 18px;
	padding:0 12px 22px 12px;
	/*padding:0 0 22px;*/
	/*width:100px;*/
	text-align:center;
	text-transform:lowercase;
	overflow:visible;
	position:relative;
}
#nav a{
	color: #ddd;
	display:block;
	padding:36px 0 6px 0;
	background:none;
	border:none;
}
#nav li:hover{
	background:rgba(0, 0, 0, 0.4);	
}
#nav li:hover a{
	color:#FFF;	
	border-bottom:none;
}
#nav .selected a, #nav .selected:hover a{
	color:#FFF;
	border-bottom:2px solid #df5a18;
}

#nav li div.nav-drop {
	position:absolute;
	top:80px;
	overflow:visible;
	right:-40px;
	background:url(/img/bg_nav.png) left top repeat;
	z-index:2000;
	white-space:nowrap;
	padding:22px 0 0 0;
	text-align:left;
	display:none;
	min-width:200px;
	border:1px solid #77726e;
	border-top:none;
	-moz-box-shadow: 2px 2px 4px #000;
	-webkit-box-shadow: 2px 2px 4px #000;

}
#nav li:hover div.nav-drop {
	display:block;
}
#nav li div.nav-drop div.nav-dropInner {
	background:url(/img/bg_nav-top.png) right top no-repeat;
	padding-top:20px;
	margin-top:-36px;
	position:relative;
}
#nav div.nav-drop span {
	padding:12px 32px;
	display:inline-block;
	vertical-align:top;
}
#nav div.nav-drop span li {
	width:auto;
	text-align:left;
}
#nav div.nav-drop #tools{
	display:block;	
	background:#000;
	padding-bottom:2em;
}
#nav div.nav-drop #tools li{
	float:left;
	width:47%;
}

#nav li li{
	float:none;	
	padding:0;
	text-transform:none;
}
#nav li li a{
	padding:0;
	color:#FFF;
	border:none!important;
	line-height:2;
}
#nav h5{
	color:#968a86;	
	text-transform:none;
	padding-bottom:6px;
	font-weight:normal;
}

#social{
	position:absolute;
	left:-21px;
	top:300px;
}
#social li{
	/*background:#181818; IE doesn't understand RGBA, will need to use flat colour and IE transparency */
	background:rgba(0, 0, 0, 0.5);
}
#social a{
	display:block;	
	width:36px;
	height:65px;
	margin:0 0 12px -15px;
	text-indent:-999em;
	background: url(/img/bg-socialmedia.png) no-repeat 0 0;
	border:none;
}
#social li:hover{
	padding:0 0 0 1000px;	
	margin-left:-1018px;
}
#social li:hover a{
	width:39px;
	background-position:-111px 0;
	margin-left:0;
	border:none!important;
}
#social #twitter a{
	background-position:0 -70px;	
}
#social #twitter:hover a{
	background-position:-111px -70px;	
}
#social #email a{
	background-position:0 -140px;	
}
#social #email:hover a{
	background-position:-111px -140px;
}
/* Content */
#content{
	background:rgba(255, 255, 255, 0.9) url(/img/bg_content.png) repeat-x top;
	padding:36px 36px 82px 36px;
	-moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);	
	-webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	position:relative;
	min-height:22em;
}
#extra{/*Additional content holder.  In this design it appears below the main content and can hold 2 columns of content*/
	margin-top:48px;	
	clear:both;
}
#extra div{
	float:left;
}
#casestudies{
	border-right:1px dotted #c7c7c7;
}
#casestudies ul{
	margin-left:-20px;	
}
#casestudies li{
	float:left;	
	width:149px;
	padding:12px 0 0 20px;
	line-height:1.2;
	font-size:10px;
	color:#696260;
}
#casestudies li a{
	font-size:11px;
	color:#333333;
	min-height:116px;
	padding:3px;
}
#casestudies li img{
	margin:-3px -3px 0 -3px;
}
#casestudies a, #team a{
	display:block;	 
}
#team li{
	clear:both;
	margin-bottom:6px;
	width:300px;
}
#team a{height:36px;}
#team img{
	float:left;	
	margin-right:6px;
}
#blogfeed li{
	padding-bottom:6px;	
}

/* Footer */
#footer{
	background:rgba(0, 0, 0, 0.1);
	padding:36px 36px 52px 36px;
	position:relative;
}
#footer h5{
	text-transform:uppercase;
	font-weight:normal;
	font-size:11px;
	color:#969696;
}
#footer li, #footer p{
	font-size:11px;	
	color:#969696;
}
#footer a{
	color:#969696;	
	background:none;
	border:none;
}
#footer .vcard{
	position:absolute;
	right:36px;
	top:36px;
}
#dd_credentials  {width:300px; position:absolute; top:35px; right:190px;} 
#dd_credentials ul{}  
#dd_credentials ul li{ background-color:transparent; width:130px; margin:0 8px 0px 0px; height:70px; float:left; overflow:hidden; background-image:none; background-position:0 0; background-repeat:no-repeat;}
#dd_credentials ul li a{display:block; height:1px; padding-top:69px;}
#dd_credentials li.nominet{background-image:url(/img/icon_nominet.png);}
#dd_credentials li.google{background-image:url(/img/icon_google.png);}
#dd_credentials li.magento{background-image:url(/img/icon_magento.png);}
#dd_credentials li.sagepay{background-image:url(/img/icon_sagepay.png);}
#dd_credentials li.bronto{background-image:url(/img/icon_bronto.png); height:60px; background-position:0 -10px;}
#dd_credentials li.telecity{background-image:url(/img/icon_telecity.png); height:60px; background-position:0 -10px;}

/* Classes */
.hidden{
	position:absolute;
	left:-999em;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.calltoaction a, .calltoaction a:hover{
	display:block;
	color:#FFF;
	padding:12px 12px 12px 12px;
	margin-top:12px;
	border:1px solid #ca5b34;
	background: rgba(222, 86, 38, 0.9);
	background-image:url(../img/button01-bkg.png);
	background-position: 0 0;
	/*background-repeat:no-repeat;*/
	
	-moz-box-shadow: 0px 2px 5px #acacac;
	-webkit-box-shadow: 2px 0px 5px #acacac;
	box-shadow: 0px 2px 5px #acacac;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#acacac')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#acacac');
}
.calltoaction a:hover{
	background-color: rgba(222, 86, 38, 1);
	border:1px solid #fff;

	
}
.shadow {
	-moz-box-shadow: 0px 0px 5px #777;
	-webkit-box-shadow: 0px 0px 5px #777;
	box-shadow: 0px 0px 5px #777;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#777777')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#777777');
}
/* The additional pretty graphic on the services page.  When multiple backgrounds are more widely supported, these could be background images on the content div. */
.graphic{
	position:absolute;
	top:0;
	right:0;
}
/* 2 columns of text */
.textcolumns{
	-moz-column-count: 2;
	-moz-column-gap: 84px;
	-webkit-column-count: 2;
	-webkit-column-gap: 84px;
	column-count: 2;
	column-gap: 84px;
	padding-right:84px;
}
.textcolumns p+ul{
	margin-top:0;	
}
/*These classes refer to the underlying grid of the design, based on the golden mean and a 12px base. */
.grid-small{/*column being the smaller proportion of the golden mean width of the page*/
	/*padding-right:510px;*/
	width:340px;
}
.grid-large{/*column being the larger proportion of the golden mean width of the page*/
	width:471px;
}
/*grids within extra also accomodate for margins and gutters in proportion */
#extra .grid-small{
	padding-left:24px;
	width:300px;
}
#extra .grid-large{
	width:488px;
	padding-right:24px;
}
#extra .grid-full{
	width:825px;
	padding-right:24px;
}

/* meta is the group of tags applied to a case study*/
.meta{
	border-top:1px dotted #cecac7;
	border-bottom:1px dotted #cecac7;
	padding:12px 0 12px 36px;
	margin-left:-36px;
}
.meta p{
	font-family: "Graublau Web Regular", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #383735;	
	padding:6px 0;
}
/* Right-aligned content and links*/
.right{
	text-align:right;	
}
#sectorlink, #moreCaseStudiesLink{
	margin-top:-30px;	
	float:right;
}
/* Case study graphics and screenshots */
.gallery, .imagery{ /*This positioning could be a problem with overlapping the blog feed.  When implementing javascript gallery let's look at alternatives using floats.*/
	position:absolute;
	top:90px;
	right:32px;
	width:468px;
}
.gallery p, .imagery p{
	text-align:center;	
	clear:both;
	padding-top:12px;
}
.gallery p{
	font-size:18px;	
}
.gallery a, .gallery a img{
	background:none;
	border:none!important;
}
.gallery .image{
	-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
	box-shadow:  1px 1px 5px rgba(0, 0, 0, 0.6);
	float:right;
}
.screenshot{
	position:absolute;
	top:35px;
	left:1px;
}
.screenshotNav {
	position:relative;
	top:462px;
}
.imagery{
	top:15%;
}
.imagery img{
	float:right;
}
.error {
	color:#900;
	font-weight:bold;
}
.good{
	color:#060;
	font-weight:bold;
	background: #d0e5bd;
}
.bad{
	background:#e6b9b8;	
}
.neutral{
	background: #dce4ff;
}
/*popup for read more area*/ 
#simplemodal-container{
	text-align:left;
	background:#EEE;
}   
 
/* -- CSS3 Stuff (http://net.tutsplus.com/tutorials/html-css-techniques/design-a-prettier-web-form-with-css-3/) -- */
#contact label input, #contact textarea {
	border: solid 1px #E5E5E5;   
	outline: 0;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;				
}
#contact label input:hover, #contact textarea:hover,
#contact label input:focus, #contact textarea:focus {
	border-color: #C9C9C9;
}
#contact .form label {
	color: #999999;
} 
#contact .submit input {
	background: #617798;
	border: 0;
	color: #FFFFFF;			
}