@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 100%;
	color: #666;
	font-size: 12px;
	line-height: 16px;
	font-family: Arial, Helvetica, sans serif;
	background-repeat: repeat-x;
	background-color: #ffffff;
	background-image: url(../passion-images/body-bg.jpg);
}
a:link {
	color: #13b14b;
	font-family: Arial, Helvetica, "sans serif";
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}
a:visited {	font: bold 12px Arial, Helvetica, sans serif;
color: #13b14b;	text-decoration: none;
}
a:hover {
	color: #FFF;
	background-color: #904198;
	font-family: Arial, Helvetica, sans serif;
	font-size: 12px;
	font-weight: bold;
}
a:active {	font: bold 12px Arial, Helvetica, sans serif;
color: #666;
}
p { 
	font: 12px/16px Arial, Helvetica, sans serif; color: #666;
}
h1 {
		padding-top: 3px;
font-size:24px;
	line-height: 25px;
	font-family: Arial, Helvetica, sans serif;
	font-weight: bold;
	color: #ffffff;
}
h2 {
	padding-top: 3px;
	font-size:18px;
	line-height: 25px;
	font-family: Arial, Helvetica, sans serif;
	font-weight: bold;
	color: #666;
}
h3 {
	font-size:14px;
	line-height: 18px;
	font-family: Arial, Helvetica, sans serif;
	font-weight: bold;
	color: #666;
}
h4 {
	font-size:18px;
	line-height: 24px;
	font-family: Arial, Helvetica, sans serif;
	font-weight: bold;
	color: #ffffff;
}
h5 {
		padding-top: 3px;
font-size:33px;
	line-height: 30px;
	font-family: Arial, Helvetica, sans serif;
	font-weight: bold;
	color: #ffffff;
}
h6 {
	padding-top: 3px;
	font-size:48px;
	line-height: 45px;
	font-family: Arial, Helvetica, sans serif;
	font-weight: bold;
	color: #ffffff;
}
#wrapper {
	position:relative;
	left: 50%;
	width: 968px;
	margin-left: -484px;
	min-height: 100%;
	margin-bottom: -160px;
	top: 0px;
	background-image: url(../passion-images/header-bg.jpg);
	background-repeat: no-repeat;
}
#footer {
	position:relative;
	font-size: 12px;
	color: #ffffff;
	background-image: url(../passion-images/footer-bg.jpg);
	background-repeat: repeat-x;
	height: 160px;
	width: 100%;
}
#footer-contents {
	margin-left: -484px;
	position: relative;
	left: 50%;
	top: 0px;
	width: 968px;
	heigth: 102px;
	padding-top: 11px;
	font-family: Arial, Helvetica, sans-serif;
}
#footer P {
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 13px;
}
#footer a:link {
	color: #ffffff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#footer a:visited {
	color: #ffffff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#footer a:hover {
	color: #ffffff;
	background-color:#cadb2d;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#footer a:active {
	color: #ffffff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}

.clearfooter {
height: 160px;
clear: both;
}
#header-area {
	height: 142px;
	width: 100%;
}
#logo {
	float: left;
	margin-top: 26px;
	margin-left: 14px;
	height: 97px;
	width: 161px;
}
#navhorizontal {
	height: 32px;
	width: 760px;
	float: right;
	margin-top: 65px;
	}
#navhorizontal ul{
	font: bold 14px Arial, Helvetica, sans-serif;
	list-style:none;
	margin-bottom:0px;
	margin-top:0px;
	margin-left:0px;
	text-align:centre;
}
#navhorizontal li{
	font: bold 14px Arial, Helvetica, sans-serif;
	text-align:centre;
	float:left;
	height: 32px;
}
#navhorizontal ul li a{
	font: bold 14px Arial, Helvetica, sans-serif;
	display:block;
	color: #904198;
	font-weight:normal;
	text-decoration: none;
	padding-top: 2px;
	padding-right: 9px;
	padding-bottom: 2px;
	padding-left: 9px;
}
#navhorizontal  li a:hover{
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:normal;
	background-color: #904198;
}
#main-boxes-top {
	height: 366px;
	width: 940px;
	margin-top: 10px;
	margin-right: 14px;
	margin-left: 14px;
}
#main-boxes-gallery {
	height: 366px;
	width: 940px;
	margin-top: 10px;
	margin-right: 14px;
	margin-left: 14px;
}
#main-boxes-top-content-left {
	float:left;
	width: 431px;
	height: 320px;
	padding-top: 23px;
	padding-left: 23px;
}
#main-boxes-top-content-right {
	float:right;
	width: 431px;
	height: 320px;
	padding-top: 23px;
	padding-right: 23px;
}
.main-box-purple-bg {
	background-image: url(../passion-images/purple-main-box.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-green-bg {
	background-image: url(../passion-images/green-main-box.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-pink-bg {
	background-image: url(../passion-images/pink-main-box.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-red-bg {
	background-image: url(../passion-images/red-main-box.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-blue-bg {
	background-image: url(../passion-images/blue-main-box.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-steve-bg {
	background-image: url(../passion-images/staff/steve.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-trish-bg {
	background-image: url(../passion-images/staff/trish.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-jill-bg {
	background-image: url(../passion-images/staff/jill.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-mags-bg {
	background-image: url(../passion-images/staff/margaret.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-simon-bg {
	background-image: url(../passion-images/staff/simon.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-dan-bg {
	background-image: url(../passion-images/staff/dan.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}
.main-box-careers-bg {
	background-image: url(../passion-images/careers.jpg);
	background-repeat: no-repeat;
	height: 366px;
	width: 940px;
}

/* =classes */
.white-text {
color: #FFF}

.testimonial { width:280px; padding-left:10px; margin:0;  }

.demo-show2 { width:280px; height: 350px; padding-left:10px; margin:0;  }

.proj-item { width:270px; height:180px;}

.proj-jobs { float:left; width:120px; padding-left: 15px; }

.thumbs	{	border:1px dotted #ec2227; padding:4px; float:left;}

.list-indent{ margin-left:15px;}

/* =classes */


#content-area-home {
	background-image: url(../passion-images/content-area-bg.png);
	background-repeat: no-repeat;
	margin-top: 14px;
	width: 968px;
	min-height: 760px;
}

#content-area {
	background-image: url(../passion-images/content-area-bg.png);
	background-repeat: no-repeat;
	min-height: 300px;
	margin-top: 14px;
	width: 968px;
}
#left-column {
	float: left;
	width: 307px;
	padding-top: 22px;
	padding-left: 12px;
}
#left-column-wide {
	float: left;
	width: 614px;
	padding-top: 22px;
	padding-left: 15px;
}
#left-column-wide-text {
	width: 600px;
	padding-left: 10px;
}
#middle-column {
	float: left;
	width: 308px;
	padding-top: 22px;
	padding-left: 8px;
}
#right-column {
	float: left;
	width: 307px;
	padding-top: 22px;
	padding-left: 8px;
}
#half-width1 {
	float: left;
	width: 460px;
	padding-top: 22px;
	padding-left: 15px;
}	
#half-width2 {
	float: left;
	width: 460px;
	padding-top: 22px;
	padding-left: 15px;
}	
#content {
	background-image: url(../passion-images/content-area-bg.png);
	background-repeat: no-repeat;
	width: 968px;
	margin-top: 15px;
	background-color: #FFF;
}
.footer-boxes {
	float: left;
	width: 307px;
	padding-left: 12px;
}
#latest-work {
	height: 550px;
	width: 285px;
	padding-left: 12px;
	overflow: auto;
}
#about-navi {
	font: 11px/16px Arial, Helvetica, sans serif;
	color: #666;
	margin-left: 15px;
	height: 250px;
	background-repeat: no-repeat;
	overflow: auto;
}
#about-navi ul.list {
	font: bold 14px/21px Arial, Helvetica, sans serif;
	color: #ec2227;
	list-style: none;
	margin-right: 1px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;	width: 280px;
text-indent: 10px;
}
#about-navi ul.list a:link {
	font: bold 14px/21px Arial, Helvetica, sans serif;
	color: #666;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	height: 24px;
	display: block;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #ec2227;	width: 280px;
}
#about-navi ul.list a:visited {
	color: #666;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	height: 24px;
	display: block;	font: bold 14px/21px Arial, Helvetica, sans serif;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #ec2227;	
	width: 280px;
}
#about-navi ul.list a:hover {
	font: bold 14px/21px Arial, Helvetica, sans serif;
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding: 0px;
	margin: 0px;
	height: 24px;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #ec2227;
	width: 280px;
	background-color: #ec2227;
}
#about-navi ul.list a:active {	font: bold 14px/21px Arial, Helvetica, sans serif;
color: #666;
	text-decoration: none;
	background: #000000;
	display: block;
	padding: 0px;
	margin: 0px;
	line-height: 21px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #FFFFFF;	
	width: 280px;
}
#about-navi li {
	margin: 0;	width: 280px;
}
#portfolio-navi {
	font: 11px/18px Arial, Helvetica, sans serif;
	color: #666;
	margin-left: 15px;
	height: 200px;
	background-repeat: no-repeat;
	overflow: auto;
	margin-bottom: 30px;
}
#portfolio-navi ul.list {
	font: bold 14px/18px Arial, Helvetica, sans serif;
	color: #ec2227;
	list-style: none;
	margin-right: 1px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;	
	width: 275px;
}
#portfolio-navi ul.list a:link {
	font: bold 14px/18px Arial, Helvetica, sans serif;
	color: #666;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	height: 40px;
	display: block;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #ec2227;	
	width: 275px;
}
#portfolio-navi ul.list a:visited {
	color: #666;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	height: 40px;
	display: block;	font: bold 14px/18px Arial, Helvetica, sans serif;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #ec2227;	
	width: 275px;
}
#portfolio-navi ul.list a:hover {
	font: bold 14px/18px Arial, Helvetica, sans serif;
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding: 0px;
	margin: 0px;
	height: 40px;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #ec2227;
	width: 275px;
	background-color: #ec2227;
}
#portfolio-navi ul.list a:active {	font: bold 14px/21px Arial, Helvetica, sans serif;
color: #666;
	text-decoration: none;
	background: #000000;
	display: block;
	padding: 0px;
	margin: 0px;
	line-height: 18px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #FFFFFF;	
	width: 275px;
}
#portfolio-navi li {
	margin: 0;	width: 275px;
}
h1 {
		padding-top: 3px;
font-size:24px;
	line-height: 25px;
	font-family: Arial, Helvetica, sans serif;
	font-weight: bold;
	color: #ffffff;
}
h1 a:link {
	color: #ffffff;
	font-family: Arial, Helvetica, "sans serif";
	padding-top: 3px;
font-size:24px;
	line-height: 25px;	font-weight: bold;
	text-decoration: none;
}
h1 a:visited {	font: bold Arial, Helvetica, sans serif;
color: #13b14b;	text-decoration: none;
	padding-top: 3px;
font-size:24px;
	line-height: 25px;
}
h1 a:hover {
	color: #FFF;
	background-color: #904198;
	font-family: Arial, Helvetica, sans serif;
	padding-top: 3px;
font-size:24px;
	line-height: 25px;
	font-weight: bold;
}
h1 a:active {	font: bold Arial, Helvetica, sans serif;
color: #666;	padding-top: 3px;
font-size:24px;
	line-height: 25px;
}
div.row {
  clear: both;
  padding-top: 2px;
  }

div.row span.label {
  float: left;
  width: 60px;
  text-align: right;
  padding-top: 4px;
  }

div.row span.formw {
  float: right;
  width: 110px;
  text-align: left;
  } 
  
div.row span.label2 {
  float: left;
  width: 120px;
  text-align: left;
  padding-top: 4px;
  }

div.row span.formw2 {
  float: right;
  width: 210px;
  text-align: left;
  } 
.website-holders {
	width:968px;
	margin-top: 10px;
	margin-left: 10px;
	clear: both;
}
.website-column {
	float: left;
	width: 307px;
	padding-top: 22px;
	padding-left: 12px;
}