/* CSS Document */

/* old blue #ff0000*/

body{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#000000;
line-height:33px;
height:100%;
min-height:100%;
overflow-x: hidden;
background-image:url(../images/Water_HR_White_Long.jpg);
background-repeat:no-repeat;
background-position:50% 163px;
margin:0;
padding:0;
}
h1{
font-size:40px;
line-height:32px;
margin-top:0;
margin-bottom:19px;
float:left;
width:100%;
margin-left:5px;
}
h2{
font-size:40px;
line-height:32px;
margin-top:0;
margin-bottom:19px;
float:left;
width:100%;
margin-left:5px;
}
ul{
list-style:none;
margin:0;
padding:0;
float:left;
width:100%;
margin-left:5px;
}
p{
margin-top:0;
margin-bottom:12px;
margin-left:5px;
float:left;
width:900px;
}
a{
text-decoration:none;
font-weight:bold;
color:#000000;
}

#wrapper{
min-height:100%;
width:100%;
}
#inner{
margin-left:auto;
margin-right:auto;
width:1000px;
position:relative;
margin-top:76px;
}
#social{
position:fixed;
top:46px;
right:6px;
width:32px;
z-index:100;
}
#social a{
width:32px;
height:32px;
display:block;
margin-bottom:6px;
float:left;
border:none;
}
#social a img{
border:none;
}
#nav{
position:fixed;
top:0;
left:0;
width:100%;
font-size:17px;
line-height:32px;
height:40px;
z-index:50;
}
#nav-trans{
background-color: #fff;
		filter:alpha(opacity=90); 
   		-moz-opacity: 0.9; 
   		opacity: 0.9; 
		width:100%;
		height:100%;
		position:absolute;
}
#nav-list{
position:relative;
margin-left:auto;
margin-right:auto;
width:1000px;
}
#nav ul{
padding:0;
margin:0;
list-style:none;
}
#nav li{
display:inline;
margin-right:5px;
}
#nav li.telephone{
padding-left:6px;
}
#nav a{
padding-top:10px;
padding-bottom:10px;
padding-left:6px;
padding-right:6px;
text-decoration:none;
font-weight:bold;
}
#nav a:hover{
text-decoration:
}
.section{
margin-bottom:57px;
float:left;
width:100%;
}
#home h1{
margin-top:14px;
font-size:48px;
}
#testimonials{
position:relative;
min-height:740px;
}
#testimonials p{
width:100%;
}
#testimonials ul{

}
#testimonials li{
padding-bottom:0px;
position:relative;
font-size:20px;
line-height:22px;
float:left;
margin-bottom:14px;
}
#testimonials br{
clear:left;
width:100%;
}
.listA{
position:absolute;
top:100px;
width:31%;
margin-left:0;
margin-right:2%;
}
.listB{
position:absolute;
top:100px;
width:31%;
margin-left:33%;
margin-right:2%;
}
.listC{
position:absolute;
top:100px;
width:31%;
margin-left:66%;
}
.col-left{
float:left;
width:500px;
line-height:22px;
font-size:20px;
margin-bottom:30px;
}
.col-left p{
width:auto;
}
.col-right{
float:left;
width:340px;
line-height:36px;
font-size:20px;
margin-top:0;
position:absolute;
top:52px;
left:520px;
}
.col-right p{
width:340px;
}
.col-left-large{
float:left;
width:100%;
line-height:22px;
font-size:20px;
}
form{
width:870px;
float:left;
position:relative;
clear:both;
}
ol{
float:left;
list-style:none;
padding:0;
margin:0;
width:746px;
margin-bottom:16px;
}
ol li{
clear:left;
padding:0;
margin:0;
display:block;
min-height:40px;
}
input{
margin-top:8px;
border:#999999 1px solid;
width:746px;
min-height:21px;
color:#999999;
font-size:18px;
line-height:21px;
padding:5px;
margin-left:5px;
}
.button{
width:90px;
color:#FFFFFF;
font-weight:bold;
min-height:40px;
background-color:#aacade;
border:none;
cursor:pointer;
float:right;
position:absolute;
bottom:16px;
right:0;
font-size:18px;
padding:2px;
margin:0;
}
.button:hover{
width:90px;
color:#aacade;
background-color:#FFF;
border:#aacade 1px solid;
cursor:pointer;
}
textarea{
padding:5px;
margin-top:8px;
border:#999999 1px solid;
width:746px;
min-height:90px;
font-size:18px;
line-height:32px;
font-family:Arial, Helvetica, sans-serif;
color:#999999;
margin-left:5px;
}

#graphic-design li, #web-design li{
float:left;
width:232px;
margin-bottom:18px;
}
#graphic-design li a, #web-design li a{
width:212px;
display:block;
background-color:#fff;
		filter:alpha(opacity=40); 
   		-moz-opacity: 0.4; 
   		opacity: 0.4; 
}
#graphic-design li a:hover, #web-design li a:hover{
		filter:alpha(opacity=100); 
   		-moz-opacity: 1; 
   		opacity: 1;
}
#services{
float:left;
font-size:20px;
line-height:22px;
}
#info-text{
margin:0;
padding:0;
height:550px;
overflow:auto;
padding:18px;
font-size:18px;
width:800px;
overflow-x: hidden;
}
#info-text ul{
list-style:circle;
padding-left:18px;
margin-bottom:12px;
}
#info-text li{
width:90%;
}
#info-text h3 {
width:100%;
clear:both;
margin-top:12px;
margin-bottom:21px;
font-size:40px;
font-weight:bold;
padding-left:18px;
}
#info-text p {
float:left;
margin-bottom:12px;
margin-top:0;
width:95%;
line-height:22px;
font-size:20px;
color:#FFFFFF;
padding-left:18px;
}
#info-text a.web-design:hover {
background-color:#FFF;
color:#aacade;
}
#info-text a.graphic-design:hover {
background-color:#aacade;
color:#FFFFFF;
}
.graphic-info{
background-color:#aacade;
color:#fff;
}
.graphic-info h3{
color:#FFF;
}
.web-info{
background-color:#aacade;
color:#FFF;
}
.web-info h3{
color:#FFF;
}
.contact-info{
background-color:#aacade;
color:#FFFFFF;
}

.list-head{
float:left;
clear:both;
margin-bottom:18px;
width:95%;
color:#FFFFFF;
padding-left:18px;
}
.error{
color:#FF0000;
font-weight:bold;
}
#contact-form-overlay input[type=text]{
width:646px;
}
#contact-form-overlay textarea{
width:646px;
}
#contact-form-overlay ol{
width:646px;
}
#contact-form-overlay {
width:786px;
}
#contact{
position:relative;
}
ul.info-nav {
list-style:none;
padding:0;
margin:0;
padding-left:0;
margin-bottom:18px;
font-size:17px;
font-weight:bold;
width:30%;
}

.info-nav li{
display:inline;
float:left;
width:100%;
white-space: nowrap;
}
.graphic-info a{
display:inline;
width:auto;
margin-right:0px;
background-color:#FFFFFF;
color:#aacade;
}
.web-info a{
margin-right:12px;
color:#FFF;
width:auto;
}
.web-info a:hover{
width:auto;
background-color:#aacade;
color:#FFF;
}
.web-info .info-nav li a{
width:auto;
color:#FFF;
background-color:#aacade;
}
.web-info .info-nav li a:hover{
color:#aacade;
background-color:#FFF;
}

.web-info .info-nav li.active{
display:inline;
color:#aacade;
float:none;
padding-right:100%;
width:auto;
}
.web-info .info-nav li.active span{
background-color:#FFFFFF;
}
.web-info a:hover{
width:auto;
background-color:#FFF;
color:#aacade;
}

/* Reference colours*/
.home{
color:#aacade;
}
#Home-Link.active{
background-color:#aacade;
color:#FFFFFF;
}
.about{
color:#aacade;
}
#About-Link.active{
background-color:#aacade;
color:#FFFFFF;
}
/*00CC33*/
.graphic-design{
color:#aacade;
}
#Graphic-Design-Link.active{
background-color:#aacade;
color:#FFFFFF;
}
.web-design{
color:#aacade;
}
.web-design-light{
color:#aacade;
}
#Web-Design-Link.active{
background-color:#aacade;
color:#FFFFFF;
}
.testimonials{
color:#aacade;
}
#Testimonials-Link.active{
background-color:#aacade;
color:#FFFFFF;
}
.contact{
color:#aacade;
}
.blog{
color:#aacade;
}

#Contact-Link.active{
background-color:#aacade;
color:#FFFFFF;
}

#Blog-Link.active{
background-color:#aacade;
color:#FFFFFF;
}


.grey{
color:#999999;
}
.large-heading{
padding:0;
margin:0;
background-image:url(../images/logos/Pure-Aug.png);
background-repeat:no-repeat;
width:950px;
height:322px;
margin-bottom:0px;
overflow:hidden;
}
#home h1{
text-indent:-9999em;
}
#home a{
}
#rar{
position:absolute;
right:70px;
top:15px;
}
.logo{
width:991px;
background-image:url(../images/logos/pure-blue-large.png);
background-repeat:no-repeat;
height:395px;
text-indent:-1000em;
}
.logoB{
width:790px;
background-image:url(../images/logos/pure-blue-column.png);
background-repeat:no-repeat;
height:330px;
text-indent:-1000em;
}
.quote{
font-weight:bold;
background-color:#aacade;
color:#FFFFFF;
padding-left:3px;
line-height:24px;
}
/*Logos*/
#info-text ul.logo-bullet{
list-style:none;
padding-left:0px;
}
.wordpress{
		background-image:url(../images/logos/wordpress_32.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-left:40px;
		}
		.magento{
		background-image:url(../images/logos/magento_32.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-left:40px;
		}
		.facebook{
		background-image:url(../images/logos/facebook_32.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-left:40px;
		}
		.joomla{
		background-image:url(../images/logos/joomla_32.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-left:40px;
		}
		.virtuemart{
		background-image:url(../images/logos/virtuemart_32.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-left:40px;
		}
		.actinic{
		background-image:url(../images/logos/actinic_32.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-left:40px;
		}
		.above-margin{
		margin-top:30px;
		}
		.halfpara{
		width:50%;
		}
		#fb{
		float:left;
		width:100%;
		margin-left:6px;
		margin-top:5px;
		margin-right:45px;
		}
		.maplink{
		z-index:100;
		}
		.behindlink{
		z-index:1;
		}

 /* Scrollable */
 
 .scrollable{width:890px; height:520px; margin-bottom:10px;position:relative;	overflow:hidden; padding-right:20px; float:left; padding-top:45px;}

.scrollable .items {
	/* this cannot be too large */
	width:1900px;
	position:absolute;
}	
.scrollable p.introp {
position:absolute;
top:0;
left:0;
}	
.items div {
	float:left;
	width:232px;
  margin-bottom:18px;
}


.items div a{
width:212px;
display:block;
background-color:#fff;
		filter:alpha(opacity=40); 
   		-moz-opacity: 0.4; 
   		opacity: 0.4; 
}
.items div a:hover{
		filter:alpha(opacity=100); 
   		-moz-opacity: 1; 
   		opacity: 1;
}	

a.next{background-image: url(../images/layout/arrow-next.png); background-repeat: no-repeat; width:30px; height:31px; position:absolute; right:0; top:0; cursor:pointer;}
a.prev{background-image: url(../images/layout/arrow-prev.png); background-repeat: no-repeat; width:30px; height:31px; position:absolute; right:45px; top:0; cursor:pointer; z-index:100;}
a.next:hover,a.prev:hover{filter:alpha(opacity=80); 
   		-moz-opacity: 0.8; 
   		opacity: 0.8;}
   		
a.disabled {
visibility: hidden !important;
}

:focus {
outline: none;
  -moz-outline-style: none;
}