/* Res-Q Contact Services website CSS file - Copyright 2007 Definition http://www.definitiondesign.co.uk */

/* @group General */
/* reset */
html, body{
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	border-left:0;
} 
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
	color: black;
	background: white;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
em {
	font-style: italic;
}
ol, ul {	list-style: none;}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
/* end reset styles */
/* clearing technique */
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
 /* End hide */
/*........... do not change or amalgamate the above clearfix styles..................*/

ul{list-style:none;}
p,h1,h2,h3,h4,h5,h6,ul {margin-bottom:.7em}
a img,img{border:none;display:block;}
a{cursor:pointer!important;text-decoration:none;font-weight: bold;}
a:link{color:#008aff;}
a:visited{color:#008aff;}
a:hover{color:#ff9a00}
a:active{color:#ff9a00;}
h1,h2,h3,h4{
	color:#3d3c3c;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
h2{
	font-size:148%;
	font-family: "Trebuchet MS", sans-serif;	
}
h2#enquiry-head {
	padding-top: 1em;
	border-top: 1px solid #e0e0e0;
}
body#why .inner-right h2 {
	border-bottom: 1px solid #ddd;
	padding-bottom: .3em;
}
#intro h2 {
	margin-top: .5em;
	font-size: 125%;
}
h3{
	font-size:100%;
	color:#9b9b9b;
}
h4{
	font-size:129%;
	color:#008aff;
}

body{
	color:#8d8d8d; 
	font-size: 13px; 
	text-align:center;/* for ie5.+*/
	background:#fff ;
}
#outer{
	width:68em;
	margin:0 auto 30px;
	text-align:left;
	clear:both;
}
.inner{
	width:883px;
	/* mac hide \*/
	clear:both;
	/* end hide */
}
#home .inner{
	width:859px;
}
div#map {
	width:600px;height:350px;
	background: #E5E3DF;
	border: 1px solid #777;
}
form#directions {
	padding: 5px 10px;
	background-color: #fff7c0;
	border: 1px solid #C9C398;
	width: 580px;
	margin-bottom: .8em;
}
label {
	color: #444;
}
/* @end */

/* @group header and nav styles */

/* the nav is sized in ems as that is the only way to keep the text on the baseline and also ensure that it doesn't wrap. The downside is that the width will expand on text resize and there's nothing much that can be done about this with this type of design. The dimensions are critical and increasing the padding without increasing the width will cause the nav text to wrap to another line and break the effect. */

/* If you want IE to display at the smallest text size from the browser control then you need to set #outer,#nav and p.logo all to 72em width */
#header{
	width:100%;
	background:#ff9a00;
	border-bottom:2px solid #e88d03;
}
#nav{
	width:71em;
	margin:auto;
	text-align:left;
}
p.logo{
	width:68em;
	margin:0 auto;
	text-align:left;
}
p.logo a{
	width:195px;
	height:67px;
	float:left;
	position:relative;
	float:left;
	margin-top:-34px;
}
#nav ul{
	float:left;
	padding-top:41px;
	margin:0 0 0 225px;
	display:inline;
	position:relative;
	top:7px
}
#nav ul li,
#nav li a,
#nav li span{
	float:left;
	text-decoration:none;
	color:#fff;
	text-transform:uppercase;
}
#nav ul li{
	padding-right:1px;
	background:url(../images/nav-divider.jpg) no-repeat 100% 100%;
}
#nav li.last{background:transparent;}
#nav li a,
#nav li span{
	border-bottom:3px solid #fff;
	padding:10px .7em 12px;
	font-weight:bold;
}
#nav li a:hover,
#nav li span, #nav li.current a{
	border-bottom:3px solid #fabf64;
	background:url(../images/nav-fade.jpg) repeat-x left bottom;
}
/* @end */

/* @group Header image and tagline */

/* Home page has a full width image */
.headimage{
	width:655px;
	height:217px;
	border-bottom:15px solid #ff9a00;	
	clear:both;
	position:relative;
}
#home .headimage{
	width:859px;
	height:216px;
	border-bottom:15px solid #ff9a00;	
	clear:both;
	position:relative;
}
#home p.breadcrumb{	padding-right:3px;}
p.breadcrumb{
	float:right;
	font-size:77%;
	margin:-15px 0 0 0;
	padding-bottom:15px;
	text-transform:uppercase;
	padding-right:20px;
	position:relative;
}
p.tagline{
	position:absolute;
	right:15px;
	top:44px;
	font-size:20px;
	color:#fff;
	line-height:1.4em;
	/*left:-999em; Use this if you want the tagline hidden*/
}
/* because the nav is longer than it needs to be the layout doesn't become centred. Therefore the following code offsets the elements to be more central. However this will leave a 20px gutter on the left if the window is closed smaller. However as the footer is wider anyway then there has to be a gutter here. */
#outer,#nav,p.logo{position:relative;left:20px}

/* @end */

/* @group Main column */

#home #right{width:646px;background-position:0 0;}
#right{
	width:655px;
	float:right;
	display:inline;
	background:url(../images/mainidivider-fade.gif) no-repeat 0 216px;
	position:relative;
	left:-12px;
}
#home #right{margin-bottom:.5em}
#right h1{
	font: "Times New Roman", Times, serif;
	padding:34px 0 0 0; 
	margin-bottom:0.5em;
	text-transform: uppercase;
}
#home #right h1 {
	width: 340px;
}
#right h1 p#moreheading{
	display:block;
	font-family: "Century Gothic", sans-serif;
	font-style: italic;	
	font-size:16px;
	text-transform: none;
}
.inner-right{
	margin-left:34px;
	min-height:0;
}
.inner-right p, .inner-right ul{
	color:#666;
	font-size:100%;
	line-height:1.4em;
	margin-bottom:1.3em;
}
#home .inner-right p {
	margin-bottom: 1em;
}
.inner-right img {
	float: left;
	border: 1px solid #ccc;
	padding: 2px;
	margin: 0 15px 5px 0;
}
#right p.img {
	margin: 0;
	float: left;
	padding-right: 10px;
}
#right p.img img {
	border: 1px solid #ddd;
	padding: 2px;
}
ul#news-list, ul#about-block {
	list-style: none;
	margin-top: 2em;
	border-top: 1px solid #e0e0e0;
	padding-top: 2em;
	width: 95%;
}
#right ul#news-list, #right ul#about-block {
	margin-left: 0;
}
#right ul#news-list li, #right ul#about-block li {
	float: left;
	margin-bottom: 2em;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: .5em;
	width: 100%;
	background: none;
	padding-left: 0;
}
.inner-right ul#about-block li p {
	margin-bottom: 1em;
}
ul#news-list li h2, ul#about-block li h2 {
	margin-top: 0;
}
#intro {
	width: 350px;
}
body#home #right blockquote{
	position: absolute;
	top: -5px;
	right: -10px;
	width:261px;
	height:250px;
	background:url(../images/quote1.jpg) no-repeat 0 0;
}
body#home #right blockquote p{
	position:absolute;
	left:-9999em;
}
p.ar {text-align:right;}

#right p.read-more{
	text-transform:uppercase;
	line-height:1.2em;
	padding-right:30px;
	font-size: 90%;
}
p.read-more a{
	color:#008aff;
	text-decoration:none;
}
p.read-more a:hover{
	color:#ff9a00;
}
p#moreheading {
	margin: -15px 0 1em 0;
}
body#home p#moreheading {
	width: 340px;
}
/* two column section on main page in main column */
.two-col{
	width:608px;
	padding:50px 0 40px 0;
	background:url(../images/hoz-div.jpg) no-repeat center top;
}
.col1{
	width:296px;
	float:left;
	border-right:1px solid #e3e3e3;
}
#right .col1 p,#right .col1 h2,#right .col-1 h3{padding-right:10px;}
#right .col1 p,#right .col2 p {font-size:93%;line-height:1.5em;padding-right:5px}
.two-col p.read-more {font-weight:bold}
.col2{
	width:310px;
	float:left;
	border-left:1px solid #e3e3e3;
	position:relative;
	left:-1px;/* shift border on top of col1 border*/
}
.two-col h2{margin:0;}
.two-col h3{margin:0 0 1.5em 0;padding:4px 0 0 0}
.bpoint ul{
	font-weight:bold;
	margin:1em 0 2em;
	font-size:107%;
}
#right .bpoint ul li{
	background:url(../images/bullet1.gif) no-repeat 0 0; 
	margin:1.1em 0;
	padding:2px 0 2px 28px;
	color:#4c4c4c;
}
.pl{padding-left:28px;}
.col2 p,.col2 h2,.col2 h3,.col2 h4{margin-left:25px;}
p.case{
	height:65px;
	padding:0!important
}
p.case img{margin:3px; float: left;}
.col2 h4{margin-top:1.5em;}

/* secondary column styling */
#home #left{width:213px;}
#left{
	/*width:226px;*/
	width: 216px;
	float:left;
	/*margin-left:-10px;*/
	position:relative;
}
#home #left{padding-top:36px; margin-left: -10px;}
/* note as I have set #left p then you will need to make sure other styles for p tags have the equivalent weight. */
#left h2,
#left h3,
#left p{
	padding-left:13px;
}
#left h2{
	font-size:159%;
	margin-bottom:.4em;
	margin-top: 1.5em;
	line-height:1.1em;
}
body#home #left h2 {
	margin-top: 0;
}
ul.contact{
	font-size:132%;
	color:#7a7a7a;
	margin:.4em 0 0 10px;
	width:180px;
}
ul.contact li{
	margin:0;
	padding:10px 0 10px 30px;
	border-bottom:1px solid #e3e3e3;
}
ul.contact li a{
	text-decoration:none;
	font-size:80%;
	font-weight:bold;
}
ul.contact li.mail{
	border-bottom:none;
	background:url(../images/mail.gif) no-repeat 0 9px; 
}
ul.contact li.tel{
	background:url(../images/tel.gif) no-repeat 0 9px; 
}
#home .news{	padding:28px 0 0 0;}
.news{
	width:100%;
	background:url(../images/small-div.gif) no-repeat left top; 
	padding:1px 0 0 0;
	margin:1em 0;
}
.news h3{
	text-transform:uppercase;
	margin-top:1.3em;
	font-size:85%;
	color:#7a7a7a;
}
.news h3 a:link, .news h3 a:visited,
.news h3 a:hover {
	color:#7a7a7a;
}
.news h3 a:hover {
	text-decoration: underline;
}
.news p{
	font-size:85%;
	padding-right:25px;
	line-height:1.3em;
	color:#7a7a7a;
}
.news p a.read-rest{
	display:block;
	margin:.5em 0 2em 0;
	text-align:right;
	font-weight:bold;
	border-bottom: 1px solid #eee;
	padding-bottom: 1em;
}
p.cutting{
	width:172px;
	height:63px;
	border:1px solid #e3e3e3;
	margin:1.7em 0 .7em 13px;
	padding:0!important;
}
p.cutting img{margin:2px}
p.view-all {
	border-top: 1px solid #ddd;
	padding-top: 1em;
}
/* @end */

/* @group Footer */
#footer{
	clear:both;
	width:879px;
	padding:65px 0 25px 0;
	background:url(../images/footer.jpg) no-repeat center top; 
	font-size:85%;
	color:#848181;
	margin:auto;
}
#footer a{color:#848181;padding-right:3px;font-weight: bold;}
#footer a:hover{color:#ff9a00}
#footer ul{
	margin:0 0 0 30px;
	width:825px;
	text-align:left;
}
#footer li{display:inline;position:relative;padding:0 0 3px 0}
#footer li.copy{float:right; margin-right: 5px;}
#footer li.copy a{padding:0 3px}

/* about us page styles follow */
h2{margin:1.5em 0 .6em 0}
h2#news-head {
	margin-bottom: 1em;
	padding-bottom: .3em;
	border-bottom: 1px solid #ddd;
}
#right p, #right ul{
	padding-right:15px;
	font-size:100%;
}
#right ul#news-list {
	font-size: 100%;
}
#right ul {
	margin-left: 1em;
}
#right ul li {
	padding-left: 15px;
	padding-bottom: .6em;
	background: url(../images/dot.gif) 0 5px no-repeat;
}
#right ul#contact-form {
	margin-left: 0;
}
#right ul#contact-form li {
	padding-left: 10px;
	background-image: none;
}
p.latest{
	width:172px;
	height:84px;
	border:1px solid #e3e3e3;
	margin:.8em 0 .7em 13px;
	padding:0!important;
}
p.latest img{margin:2px}

/* @end */

/* @group Subnav */
#subnav{
	margin:1em 0 2.45em -35px;
	position:relative;
	min-height:0;
}
#subnav li{
	border-bottom:1px solid #f4f4f4;
	color:#414141;
	background:url(../images/bullet2-on.jpg) no-repeat 92% 50%; 
	font-size:110%;
	font-weight:bold;
}
#subnav li a{
	display:block;
	padding:8px 30px 8px 40px; 
	color:#414141;
	text-decoration:none;
	background:url(../images/bullet2.jpg) no-repeat 92% 50%; 
}
#subnav li a:hover, #subnav li.current a{color:#ff9a00;background:transparent}
#subnav li.nobdr{border-bottom:none;}
#subnav  h2{
	padding:0 5px 0 40px;
	margin:2px 0 1em 0;
}
/* @end */

/* @group Testimonial */
.post-it{
	padding-top:78px;
	width:100%;
	background: url(../images/postit-top.jpg) no-repeat 10px 0; 
	margin-top:3em;
	font-weight:bold;
}
.post-it blockquote{
	background:url(../images/postit-middle.jpg) repeat-y 10px 0; 
	color:#6a6a6a;
	padding-bottom:20px;
	min-height:0;
}
#left .post-it blockquote p{
	font-size:95%;
}
#left .post-it p{
	padding:0 4px;
	text-align:center;
	width:155px;
	margin:0 0 0 20px;
	font-style: italic;
	letter-spacing:-.05em;
	line-height:1.5em;
}
.testimonial{
	background:url(../images/postit-base.jpg) no-repeat 10px 0; 
	height:73px;
	color:#6a6a6a;
	text-align:left;
}
#left .testimonial p{
	color:#cd1717;
	text-transform:uppercase;
	font-size:77%;
	letter-spacing:-.05em;
	font-style:normal;
}
.testimonial span,
blockquote cite{color:#cd1717}
blockquote cite {
	font-style: italic;
	display: block;
	text-align: right;
	font-size: 95%;
	margin-top: .5em;
}
blockquote cite strong {
	font-style: normal;
	text-transform: uppercase;
	font-size: 95%;
}
#right p.moving{
	width:196px;
	height:145px;
	border:1px solid #e3e3e3;
	margin:0 22px 1em 27px;
	padding:0;
	float:right;
	display:inline;
}
#right p.moving img{margin:2px}
#right p.ar2{text-align:right;}
/* @end */

/* @group Team page */
ul.team li p {
	margin-left: 120px;
}
#right p.contact-details {
	font-size: 90%;
	margin-top: -.5em;
	font-weight: bold;
	color: #3d3c3c;
}
h2 span {
	font-size: 55%;
	text-transform: uppercase;
	color: #999;
	font-weight: bold;
	padding-left: 10px;
	font-family: verdana, arial, sans-serif;
}
body#news h2 span {
	display: block;
	position: relative;
	float: right;
	margin-top: -1.2em;
	font-size: 60%;
	color: #aaa;
}
/* @end */

/* @group Vox Pops */
#left #vox p {
	padding-left: 0;
	margin-bottom: 0;
	font-size: 90%;
}
#vox {
	background:url(../images/small-div.gif) no-repeat left top; 
	margin: 2em 0;
	padding: 45px 10px 0 0;
}
#vox blockquote img {
	position: absolute;
	bottom: 0; left: 0;
	z-index: 0;
}
#vox blockquote {
	font-size: 95%;
	position: relative;
	border-bottom: 1px solid #E6E6E6;
	display: block;
	float: left;
	width: 206px;
	margin-bottom: .3em;
}
#vox blockquote p {
	float: right;
	width: 113px;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 10px;
	color: #777;
}
#vox cite {
	font-style: normal;
	font-weight: bold;
	display: block;
	text-align: left;
	padding-top: .5em;
	text-transform: uppercase;
	color: #CF2727;
	font-size: 90%;
	margin: 0;
	clear: both;
}
#vox cite span {
	display: block;
	color: #8a8a8a;
}
#left #vox p.meet {
	margin-top: .5em;
	font-size: 95%;
}
/* @end */

/* @group Site Map */
body#site ul h2 {
	margin: 0;
}
body#site .inner-right ul li {
	margin-bottom: 1em;
}
body#site .inner-right ul li ul li {
	margin-bottom: 0;
}
body#site .inner-right ul li ul {
	margin: 1em 0 0;
}
body#site .inner-right ul li ul li a {
	color: #444;
	font-weight: normal;
	text-decoration: underline;
}
body#site .inner-right ul li ul li ul li a {
	color: #777;
}
/* @end */

/* @group siFR */
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
	visibility: visible !important;
}
.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}
/* @end */