html { overflow: scroll; }
body {
font-family:Verdana,Geneva,sans-serif;
background-image:url(images/gradient2.jpg);
color:#0e0e0e;
margin:0;
padding:0
}

#header {
width:100%;
min-width:1000px;
background: #8b0000 url(images/topheaderbg4.png);
color:#fff;
border-top:4px solid #c20404;
border-bottom:1px solid #fff
}

#pageSurround {
width:960px;
line-height:22px;
margin:0 auto;
padding:0
}

#topHeader {
text-align:right;
height:85px;
width:928px;
margin:0 auto;
}

.topcontacts {
font-size:25px;
color:#fff;
float:right
}

#display {
height:300px;
width:960px
}

#bar {
text-align:center;
min-width:1000px;
height:35px;
background:#8B0000;
color:#fff;
padding-top:10px
}

#nav {
margin:0 auto
}
.navbar {
font-size:15px;
font-weight:700;
color:#fff;
text-decoration:none;
padding-top:5px
}

a.navbar {
font-size:15px;
font-weight:700;
color:#fff;
text-decoration:none;
padding-top:5px
}

a.navbar:hover {
text-decoration:underline;
color:#fff
}

.special {
text-align:center;
font-weight:700;
font-size:20px;
color:#f30
}

#boxes {
text-align:center;
height:250px;
background:#000;
border-top:4px solid #00f;
border-bottom:4px solid #00f;
margin:0 auto;
}
.example {
display: block;
float: left;
height: auto;
width: 925px;
margin-bottom: 20px;
border-bottom: 1px solid #dfdfdf;
}
.example-pic {
float:left;
width: 49%;
margin-right: 1%;
height: auto;
}
.example-text {
float:left;
width: 49%;
height: 310px;
margin-left: 1%;
margin-top: -30px;
}
a.chooseImage {
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	border: 1px solid #dfdfdf;
	background-color: #028bcb;
	color: #fff;
	padding: 5px 10px;
	behavior: url(/PIE.htc);
	position: relative;
	text-decoration: none;
}
a.chooseImage:hover {
background-color: #8b0000;
color: #fff;
cursor: pointer;
}
#lml-1a, #lml-2a {
background-color: #8b0000;
color: #fff;
}
#jeckells-1a, #jeckells-2a {
background-color: #8b0000;
color: #fff;
}
#mistys-1a, #mistys-2a {
background-color: #8b0000;
color: #fff;
}
#frisky-1a, #frisky-2a {
background-color: #8b0000;
color: #fff;
}
#pressure-1a, #pressure-2a {
background-color: #8b0000;
color: #fff;
}
#art-1a, #art-2a {
background-color: #8b0000;
color: #fff;
}
#danny-1a, #danny-2a {
background-color: #8b0000;
color: #fff;
}
#cleanasawhistle-1a, #cleanasawhistle-2a {
background-color: #8b0000;
color: #fff;
}


ul {
list-style: none outside none;
}
.skills {
float: left;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 border: 1px solid #dfdfdf;
 color: #545454;
 margin: 5px 5px 0 0;
line-height: 130%;
outline: medium none;
padding: 5px 15px 5px 30px;
width: auto;
behavior: url(/PIE.htc);
position: relative;
}
li.photoshop-skill {
background: url(images/media.png) no-repeat scroll 4px -422px #ffffff;
list-style: none outside none;
}
li.css-skill {
background: url(images/media.png) no-repeat scroll 4px -47px #ffffff;
list-style: none outside none;
}
li.php-skill {
background: url(images/media.png) no-repeat scroll 4px -482px #ffffff;
list-style: none outside none;
}
li.logo-skill {
background: url(images/media.png) no-repeat scroll 4px -260px #ffffff;
list-style: none outside none;
}
li.seo-skill {
background: url(images/media.png) no-repeat scroll 4px -870px #ffffff;
list-style: none outside none;
}
li.html-skill {
background: url(images/media.png) no-repeat scroll 4px -933px #ffffff;
list-style: none outside none;
}
li.ecommerce-skill {
background: url(images/media.png) no-repeat scroll 4px -968px #ffffff;
list-style: none outside none;
}




.txttest {
font-family:"Courier New";
float: left;
width: 100%;
margin-top: -10px;
}
#s3slider {
position: relative;
border: 1px solid #fff;
margin: 0 auto;
width: 802px;
height: 257px;
-webkit-box-shadow: #000 0px 4px 11px;
-moz-box-shadow: #000 0px 4px 11px;
box-shadow: #000 0px 4px 11px;
behavior: url(/PIE.htc);
}
.s3sliderContent {
border: 1px solid #000;
background: url(http://www.dpbcreations.co.uk/screenshots/website-design.jpg);
width: 800px;
height: 255px;
margin-left: 0;
top: 0;
}
.mainpoint {
 }
a.mainpoint {
text-decoration: none;
font-weight: bold;
font-size: 135%;
display: block;
position: absolute;
bottom: 15px;
left: 150px;
padding-top: 20px;
border: 1px solid #8b0000;
text-align: center;
 width: 500px;
 height: 50px;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -webkit-box-shadow: #000 0px 4px 11px;
 -moz-box-shadow: #000 0px 4px 11px;
 box-shadow: #000 0px 4px 11px;
 background: #E3E4E2;
 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E3E4E2), to(#9C9C96));
 background: -moz-linear-gradient(#E3E4E2, #9C9C96);
 -pie-background: linear-gradient(#E3E4E2, #9C9C96);
 behavior: url(/PIE.htc);
 margin: 0 auto;

}
a.mainpoint:hover {
text-decoration: underline;
border: 1px solid #fff;

}
.front {
border:0;
margin:12px 25px
}

.title {
font-weight:700
}

.imgRight {
float:right;
width:200px;
height:150px;
padding-right:25px
}

.colMid {
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight: bold;
color:#0e0e0e;
text-align:left;
margin-bottom:0;
position:relative;
float:left;
padding:10px 15px 0
}

.colMidprivacy {
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight: bold;

color:#0e0e0e;
text-align:left;
margin-bottom:0;
position:relative;
float:left;
padding:10px 15px 0
}

.colMidcontact {
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight: bold;

color:#0e0e0e;
text-align:left;
padding-left:130px;
padding-right:50px;
padding-bottom:0;
margin-bottom:0;
position:relative;
float:left
}

.colMidlinks {
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight: bold;

color:#0e0e0e;
text-align:center;
padding-left:15px;
padding-right:15px;
padding-bottom:0;
margin-bottom:0;
position:relative;
float:left
}

.colMidmem {
width:940px;
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight: bold;

color:#0e0e0e;
text-align:center;
padding-left:15px;
padding-right:15px;
padding-bottom:0;
position:relative;
float:left;
margin:0 auto
}

.colMidexamples {
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight: bold;

color:#0e0e0e;
text-align:justify;
width:700px;
padding-right:5px;
padding-bottom:0;
margin-bottom:0;
position:relative;
float:left
}

.colRight {
text-align:left;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;
font-weight: bold;

color:#0e0e0e;
position:relative;
width:210px;
padding-left:5px;
float:right
}

.picture2 {
border:2px solid #fff;
background-color:#000;
padding:2px
-webkit-box-shadow: #000 0px 4px 11px;
-moz-box-shadow: #000 0px 4px 11px;
box-shadow: #000 0px 4px 11px;
behavior: url(/PIE.htc);
position:relative;
}

.award {
text-align:center;
padding:5px
}

.SiteDocs {
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight:700;
color:#0e0e0e;
text-align:center;
margin-top:10px
}

#footer {
width:100%;
min-width:1000px;
border-top:4px solid #8B0000;
border-bottom:4px solid #8B0000;
clear:both;
margin:0;
padding:0
}

#footermain {
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight:700;
color:#0e0e0e;
width:960px;
height:115px;
position:relative;
padding-top:0;
margin:0 auto
}

.txtcopyright,a.txtcopyright {
text-align:center;
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight:700;
color:#0e0e0e;
padding-top:5px
}

.LogoPicture {
border:1px solid #fff
}

#valid {
position:absolute;
top:83px;
left:740px;
border:0
}

h1 {
font-family: Harabara,Verdana,Geneva,sans-serif;

float:left;
font-size:60px;
margin:0;
padding:0
}

h2 {
font-family:Verdana,Geneva,sans-serif;
font-size:25px;
padding-top:10px;
line-height: 35px;
}
.contactus {
font-family:Verdana,Geneva,sans-serif;
font-size:25px;
padding-top:10px
}
#intro {
font-size:18px;
padding-bottom:10px
}

h5 {
font-size:12px
}

h6 {
display:none
}

.amp {
font-family:Verdana,Geneva,sans-serif
}

a {
text-decoration:underline;
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
font-weight:700;
color:#8b0000
}

a:hover {
text-decoration:none;
color:#4d4d4d;
cursor: pointer;
}

li {
list-style-position:outside;
list-style-type: disc;
margin-left:30px;
padding:5px;
}

.txtDesigner,a.txtDesigner {
text-align:center;
font-size:16px;
padding-top:5px;
color:#00F;
text-decoration:none
}

.studies {
float:left;
border:1px solid #000;
margin:5px 5px 5px 90px
}

.studies2 {
float:right;
border:1px solid #000;
margin:5px 90px 5px 5px
}

a.secondary {
margin-left:30px;
text-decoration:underline
}
#contactform {
font-family:verdana;
width:600px
}

#contactform h1 {
font-size:130%
}

#contactform .errors {
color:red
}

#contactform .correct {
color:#000
}

#contactform legend {
font-size:120%;
font-weight:700
}

#contactform .title {
color:#000;
font-weight:700;
font-size:90%;
margin-top:2px;
margin-bottom:5px
}

#contactform .field {
color:#000;
font-size:90%;
margin-bottom:7px
}

#contactform .small {
font-size:100%
}

#contactform .thanks {
margin-top:15px;
color:green;
font-size:105%;
margin-bottom:15px
}

img,.awardimage,.picture,#contactform img {
border:0
}

#subSurround,form,ol,ul {
margin:0;
padding:0
}

.clear,div.clear {
clear:both
}

a.SiteDocs,a.primary:hover,a.secondary:hover {
text-decoration:none
}

a.SiteDocs:hover,a.txtcopyright:hover,a.txtDesigner:hover,a.primary {
text-decoration:underline
}
.partnerships-footer {
text-align: center;
background-color: #fff;
}
.sussex,.examples,#caseimages,.accredit {
text-align:center
}

h3,h4 {
font-size:20px;
font-family:Verdana,Geneva,sans-serif
}
@font-face {
	font-family: 'Harabara';
	src: url('http://www.dpbcreations.co.uk/harabara-webfont.eot');
	src: local('?'),
	 url('http://www.dpbcreations.co.uk/harabara-webfont.woff') format('woff'),
	 url('http://www.dpbcreations.co.uk/harabara-webfont.ttf') format('truetype'),
	 url('http://www.dpbcreations.co.uk/harabara-webfont.svg#harabara-webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
.testCSS3 {
 background: #E3E4E2;
 background: -moz-linear-gradient(bottom, #8b0000, #028bcb  10%, #00f 11%);
 -pie-background: linear-gradient(#E3E4E2, #9C9C96);
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(10%,#00ff00), to(#0000ff));
width: 200px;
height: 250px;
behaviour: url(/PIE.htc);
position: relative;
}
.trolley {
position: relative;
float: right;
}
/* lightbox */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; border: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 100%; height:100%; 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-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink{ background: url(http://www.dpbcreations.co.uk/images/prevlabel.gif) left 15% no-repeat; }
#nextLink{ background: url(http://www.dpbcreations.co.uk/images/nextlabel.gif) right 15% no-repeat; }

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

#imageData{	padding:0 10px; color: #666; }
#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; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100%; background-color: #000; }

a.lightbox {color: #000000; text-decoration: none; }
a.lightbox:hover { text-decoration: underline;}