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

html {
	min-height: 100%;
}

body{
	margin:0px;
	padding:0px;	
}
img { border: none; }
p {
	margin:0;
	padding:0;
}
#container{
	width:900px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
}
#content-wide{
	width:900px;
}
#content{
	width:675px;
	float: left;
}
.mainfooter {
	background-image: url(../images/footerimage.png);
	background-repeat: repeat-x;
	background-position: bottom;
	height: 143px;
	width: 100%;
	clear: both;
	position: relative;
	margin-top: 20px;
}
/* body colours */

.green {
	background-image: url(../images/header-green.png);
	background-repeat: repeat-x;
	background-position: top;
	background-color: #bac086;
}
.blue {
	background-color:#8ebcce;
	background-image: url(../images/header-blue.png);
	background-repeat: repeat-x;
	background-position: top;	
}
.orange {
	background-color:#d6934a;
	background-image: url(../images/header-orange.png);
	background-repeat: repeat-x;
	background-position: top;
}
.brown {
	background-color:#b48e62;
	background-image: url(../images/header-brown.png);
	background-repeat: repeat-x;
	background-position: top;
}
/* menu */
.menu a{
	background-position:top;
	text-indent:-2000px;
	display:block;
}
.menu a:hover{
	background-position:bottom;
}

.menu ul{
	list-style-type: none;
	padding-left: 0px;
	margin: 0px;
	padding: 0px;
	
}
.menu li{
	float: left;
	margin-right: 10px;
	margin-top: 10px;
}

.menu .green .home{
	width:57px;
	height:35px;
	background-image:url(../images/home-green.png)
}
.menu .green .about{
	width:94px;
	height:35px;
	background-image:url(../images/about-green.png)
}
.menu .green .services{
	width:117px;
	height:35px;
	background-image:url(../images/services-green.png)
}
.menu .green .contact{
	width:113px;
	height:35px;
	background-image:url(../images/contact-green.png)
}
.menu .blue .home{
	width:57px;
	height:35px;
	background-image:url(../images/home-blue.png)
}
.menu .blue .about{
	width:94px;
	height:35px;
	background-image:url(../images/about-blue.png)
}
.menu .blue .services{
	width:117px;
	height:35px;
	background-image:url(../images/services-blue.png)
}
.menu .blue .contact{
	width:113px;
	height:35px;
	background-image:url(../images/contact-blue.png)
}
.menu .orange .home{
	width:57px;
	height:35px;
	background-image:url(../images/home-orange.png)
}
.menu .orange .about{
	width:94px;
	height:35px;
	background-image:url(../images/about-orange.png)
}
.menu .orange .services{
	width:117px;
	height:35px;
	background-image:url(../images/services-orange.png)
}
.menu .orange .contact{
	width:113px;
	height:35px;
	background-image:url(../images/contact-orange.png)
}
.menu .brown .home{
	width:57px;
	height:35px;
	background-image:url(../images/home-brown.png)
}
.menu .brown .about{
	width:94px;
	height:35px;
	background-image:url(../images/about-brown.png)
}
.menu .brown .services{
	width:117px;
	height:35px;
	background-image:url(../images/services-brown.png)
}
.menu .brown .contact{
	width:113px;
	height:35px;
	background-image:url(../images/contact-brown.png)
}

/* Tags and headers */
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 40px;
	color: #000000;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	font-weight: bold;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 25px;
	color: #000000;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	margin-top: 12px;
	padding-top: 0px;
	margin-bottom: 5px;
}

h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ca7916;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 5px;
}
h5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000000;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 6px;
	padding-bottom: 0px;
}
.copy p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-bottom: 6px;
}

/* header */

#header{
	height:350px;
	background-position: left top;
	overflow: visible;
	background-repeat: no-repeat;
}
#header-short{
	height:150px;
	background-position: left top;
	overflow: visible;
	background-repeat: no-repeat;
}

.monkey-intro{
	background-image: url(../images/monkey-intro.png);
	height: 342px;
	width: 370px;
	position: absolute;
	z-index: 200;
	left: 520px;
	top: -295px;
}
.monkeyweb-logo{
	width:312px;
	height:90px;
	background-image:url(../images/monkeyweb-logo1.png);
	z-index: 200;
	position: relative;
	margin-top: 35px;
	margin-left: 20px;
	float: left;
	clear: left;
	margin-bottom: -10px;
}
	

/* clearfix */

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
	.clearfix {display:block;}
.introtext/* End hide from IE Mac */

/* content *******************************************************/

{
}

.contentheader-wide{
	width:850px;
	background-position: top;
	background-image: url(../images/contentheader-wide.png);
	padding-right: 25px;
	padding-left: 25px;
	padding-top: 20px;
	position: relative;
	padding-bottom: 20px;
}
.contentbody-wide{
	width:870px;
	min-height:500px;
	background-color:#FFFFFF;
	padding-right: 15px;
	padding-left: 15px;
}
.contentfooter-wide{
	width:900px;
	height:30px;
	background-image: url(../images/contentfooter-wide.png);
	background-position: bottom;
	position: relative;
	margin-top: 0px;
	z-index: 100;
}
.contentheader{
	width:625px;
	background-position: top;
	padding-right: 25px;
	padding-left: 25px;
	padding-top: 20px;
	position: relative;
	padding-bottom: 20px;
	background-image: url(../images/contentheader.png);
}
.contentbody{
	width:645px;
	min-height:500px;
	background-color:#FFFFFF;
	padding-right: 15px;
	padding-left: 15px;
	margin-top: 0px;
	padding-top: 20px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
.contentfooter{
	width:675px;
	height:10px;
	background-image: url(../images/contentfooter.png);
	background-position: bottom;
	position: relative;
	margin-top: 0px;
	z-index: 100;
}
.contentfooter-green{
	width:675px;
	height:20px;
	background-image: url(../images/contentfooter-green.png);
	background-position: bottom;
	position: relative;
	margin-top: -10px;
	z-index: 100;
	margin-bottom: 10px;
}
.contentfooter-blue{
	width:675px;
	height:20px;
	background-image: url(../images/contentfooter-blue.png);
	background-position: bottom;
	position: relative;
	margin-top: -10px;
	z-index: 100;
	margin-bottom: 10px;
}
.contentfooter-orange{
	width:675px;
	height:20px;
	background-image: url(../images/contentfooter-orange.png);
	background-position: bottom;
	position: relative;
	margin-top: -10px;
	z-index: 100;
	margin-bottom: 10px;
}
.contentfooter-brown{
	width:675px;
	height:20px;
	background-image: url(../images/contentfooter-brown.png);
	background-position: bottom;
	position: relative;
	margin-top: -10px;
	z-index: 100;
	margin-bottom: 10px;
}
.column{
	width:252px;
	margin-left:9px;
	margin-top:0px;
	position:relative;
	z-index:100;
	float: left;
	margin-right:9px;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 25px;
	margin-bottom: 20px;
}
.title-intro {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
}
.boxtext {
	min-height:220px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.footerblue{
	background-image: url(../images/boxfooter-blue.png);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 262px;
	margin-left: -10px;
	padding-left: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
}
.column img {
	margin-top: 10px;
	border:none;
	margin-left: -7px;
}
.boxblue{
	background-image: url(../images/boxheader-blue.png);
	background-repeat: no-repeat;
	background-position: top;
	min-height: 175px;
}
.footerorange{
	background-image: url(../images/boxfooter-orange.png);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 262px;
	margin-left: -10px;
	padding-left: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
}
.boxorange{
	background-image: url(../images/boxheader-orange.png);
	background-repeat: no-repeat;
	background-position: top;
	min-height: 175px;
}
.footerbrown{
	background-image: url(../images/boxfooter-brown.png);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 262px;
	margin-left: -10px;
	padding-left: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
}
.boxbrown{
	background-image: url(../images/boxheader-brown.png);
	background-repeat: no-repeat;
	background-position: top;
	min-height: 175px;
}
.introtext {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 15px;
}
.boxheadertext {
	font-size: 24px;
}
.readmore{
	display: block;
}
.readmore a {
	color: #000000;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 17px;
	width: 88px;
	display: block;
	padding-left: 5px;
	background-image: url(../images/readmore-white.png);
	padding-top: 1px;
}
.readmore a:hover {
	text-decoration: none;
	background-position: left bottom;
	color: #CC6600;
}
.copy {
	padding-left: 10px;
	padding-right: 10px;
	width: 400px;
	float: left;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.copy-wide {
	padding-left: 10px;
	padding-right: 10px;
	width: 600px;
	float: left;
}
.copy a, .copy-wide a {
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}
.copy a:hover, .copy-wide a:hover {
	color: #ca7916;
	text-decoration: none;
}
.servicelist{
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-type: none;
	padding-left: 10px;
}
.servicelist li{
	margin-bottom:10px;
}
/* highlight *******************************************************/
.highlight {
	margin-left: 30px;
	width: 180px;
	position: relative;
	float: left;
	overflow: visible;
}
.highlight p {
	color: #ca7916;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-bottom: 5px;
}

.highlight img {
	margin-bottom: 10px;
	border: 1px solid #999999;
}
.highlight a {
	color: #ca7916;
	text-decoration: none;
}

/* casestudy *******************************************************/

#casestudy{
	width: 625px;
	margin-left: -25px;
	padding-top: 39px;
	padding-left: 25px;
	padding-bottom: 10px;
	margin-top: 20px;
	padding-right: 25px;
	float: left;
}
.casestudy-green {
	background-color: #daddca;
	background-image: url(../images/casestudheader-green.png);
	background-repeat: no-repeat;
	background-position: top;
}
.casestudy-blue {
	background-color: #d7e7e8;
	background-image: url(../images/casestudheader-blue.png);
	background-repeat: no-repeat;
	background-position: top;
	
}

.casestudy-orange {
	background-color: #f8dfbb;
	background-image: url(../images/casestudheader-orange.png);
	background-repeat: no-repeat;
	background-position: top;
	
}
.casestudy-brown {
	background-color: #dac7b1;
	background-image: url(../images/casestudheader-brown.png);
	background-repeat: no-repeat;
	background-position: top;
	
}
#casestudy img {
	display: inline;
	float: left;
	margin-right: 15px;
	margin-top: -45px;
	margin-left: -15px;
	padding-bottom: 0px;
}
.monkeysmall {
	float: right;
}

/* slideshow *******************************************************/
.ads {
	height: 250px;
	width: 450px;
	position: relative;
	margin-top: 25px;
	clear: left;
	float: left;
	
}
.ads div{
	
	background:transparent !important;
}
.ads div img{
	position:absolute;
	z-index:10;
}
 

/* sliding div *******************************************************/
#scroll {
	height: 325px;
	width: 225px;
	z-index: 300;
	background-image: url(../images/monkeyslide.png);
	background-repeat: no-repeat;
	background-position: top;
	position: absolute;
	margin-left: 633px;
	margin-top: 320px;
}
.slidecontact{
	position:absolute;
	margin-top: 244px;
	margin-left: 98px;
}
.slidecontact a {
	color: #ca7916;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration:none;
}
.slidecontact a:hover{
	text-decoration:underline;
}
/* Quicklinks *******************************************************/
.quicklinks{
	float:left;
	margin-top: 25px;
}
.quicklinks ul{
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 15px;
	list-style-type: none;
}
.quicklinks li{
	margin-bottom:8px;	
}
.quicklinks a{
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
	background-color: #FFFFFF;
	text-decoration: none;
	font-size: 14px;
	margin-bottom: 5px;
	padding-right:10px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	
}
.quicklinks a:hover{
	padding-right: 27px;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: right;
}
.linkstitle{
	margin-left: 15px;
	font-size: 18px;
	margin-bottom: 15px;
}

/* Map *******************************************************/
.map {
	width: 625px;
	height: 350px;
	frameborder:0px;
}

#MapBody {
	width: 482px;
	height: 350px;
	padding-top: 10px;
	margin-bottom:25px;
}

/* Form *******************************************************/
form {
  width: 420px;
  }

label {
	display:block;
	
  }

.warning {
  color:#f00;
  font-weight:bold;
  }


.formbox{
	width:200px;
	
}
.box{
	float:left;
	margin-right:15px;
}
.formsection{
	margin-top:15px;
}
/* portfolio ***************************************************/

.hidden
{
display: none;
}

.previous
{
	position: absolute;
	z-index: 120;
	width:41px;
	height:40px;
	margin-top: 175px;
}
.next
{
	position: absolute;
	z-index: 120;
	width:41px;
	height:40px;
	margin-top: 175px;
	margin-left: 580px;
}
.previous_btn{
	background-image: url(../images/previous.png);
	background-position: center bottom;
	width:41px;
	height:40px;
	background-repeat: no-repeat;
	}
.next_btn{
	background-image: url(../images/next.png);
	background-position: center bottom;
	width:41px;
	height:40px;
	background-repeat: no-repeat;
	}
.previous a, .next a{
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
	overflow: hidden;
}
.previous a:hover, .next a:hover{
	background-position: bottom;
}


.petville{
	width:495px;
	height:950px;
	position: relative;
}
.newspaces2{
	width:495px;
	height: 950px;
}
.clintplan{
	width:495px;
	height:950px;
}
.macpac{
	width:495px;
	height:950px;
}
.alphasash{
	width:495px;
	height:950px;
}
.isitart{
	width:495px;
	height:950px;
}
.aspod{
	width:495px;
	height:950px;
}
.image{
	width:454px;
	height:285px;
	padding-left: 0px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 15px;
}
#slides {
	position: relative;
	left: 65px;
	top: 65px;
}
.screen{
	width:621px;
	height:429px;
	background-image: url(../images/portfolio-screen2.png);
	position: absolute;
	z-index: 100;
	margin-top:50px;
}
.description{
	margin-top:135px;
	width: 495px;
	position: relative;
	z-index: 500;
	}
.googleresult{
	display: inline;
	z-index: 400;
	float: right;
	margin-top: -55px;
}
.portfolio-logo{
}
.portfolio-header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	display: block;
	margin-bottom: 3px;
	margin-top: 5px;
}
.portfolio-click{
	width:450px;
	height:285px;
	position: absolute;
	z-index: 400;
	margin-top:-300px;
	margin-left: 15px;
	filter:alpha(opacity=0);
 -moz-opacity:.0;
 opacity:.0;
}
.portfolio-click a{
	width:450px;
	height:285px;
	display:block;
	position: absolute;
	z-index: 500;
}
.description a {
	color: #CC6600;
	text-decoration: none;
}
.description a:hover {
	color: #CC6600;
	text-decoration: underline;
}
.ads .ad1 {
	height: 250px;
	width: 450px;
	
}
.ads .ad1 p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	padding-left: 27px;
	position:relative;
	z-index:20;
	padding-top:200px;
}
.ads .ad2 {
	height: 250px;
	width: 450px;
	background-image:url(../images/ad2.png);
}
	
.ads .ad2 p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	padding-left: 27px;
	padding-top:160px;
	width:330px;
	position:relative;
	z-index:20;
}
.ads .ad2 a, .ads .ad1 a, .ads .ad3 a{
	color: #333333;
	text-decoration: none;
	font-weight: bold;
}
.ads .ad2 a:hover, .ads .ad1 a:hover, .ads .ad3 a:hover{
	text-decoration: underline;
}
.ads .ad3 {
	height: 250px;
	width: 450px;
	
}
.ads .ad3 p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	padding-left: 138px;
	padding-top:165px;
	position:relative;
	z-index:20;
	
	
}
.featured {
	background-image: url(../images/website-design-warwick-leamington.png);
	background-repeat: no-repeat;
	background-position: left top;
	float:left;
	width:550px;
	height:297px;
	pading-top:50px;
	padding-left:310px;
}
.featured img {
	float: left;
}
.featured p{
	
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-bottom:5px;
}
.footerlinks{
	padding-top:10px;
	padding-left: 25px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	}
.footerlinks a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	text-decoration: none;
	font-weight: normal;
}
.footerlinks a:hover {
	text-decoration: underline;
}