@charset "UTF-8";
/* Jigsaw Internet Solutins v3.0

Shaun Barnes
shaun@jigsawinternet.com
http://www.boltonwebdesign.co.uk

[01/06/08]

------------------

Colours 

Logo blue: #007FAA
Logo Grey: #A8A9AB

Light blue: #8CB1BB
Dark Blue: #114477

RED: #AA3F00

Light Grey: #F9F9F9


-----------------

Global Reset 

*/



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td{margin:0;padding:0;}
table{border-collapse:collapse;}
fieldset,img,abbr{border:0;}
address,caption,cite,code,dfn,h1,h2,h3,h4,h5,h6,th,var{font-style:normal;font-weight:normal;}
ul,li {list-style-type:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:1.0em;}
a{text-decoration:none;}

/* Scroll bar */

html {

	height:100%;
	margin-bottom:1px; }
.clear {
	clear: both;
	margin: 0;
	padding: 0; }
body {
	font: 62.5%/1.5 Gotham-Light,Helvetica,Tahoma,"Lucida Grande","Lucida Sans Unicode",geneva,Arial,sans-serif;
	/*font: 62.5%/1.5 Helvetica,Tahoma,"Lucida Grande","Lucida Sans Unicode",geneva,Arial,sans-serif;*/
	background-color: #fff;
	color: #222; }


/* BASIC LAYOUT */

#header {
	width: 100%;
	height: 90px;
	background: url(img/bg-header.png) top center no-repeat; }
#nav-div {
	width: 950px;
	margin: 0 auto;
	text-align: right; }
#content-top-wrap {
	background: #A8A9AB url(img/bg-mast.png) bottom left repeat-x;
	height: 189px; }
#content-top {
	width: 950px;
	margin: 0 auto;
	padding-top: 10px;
	height: 189px;
	}	
.blog #content-top-wrap {
	height:  89px; 
	background: #A8A9AB url(img/bg-mast-blog.png) bottom left repeat-x;}
.blog #content-top { 
	height: 89px;
	text-align: right; }	
	
#contentwrap {
	background: #fff; }
#content {
	width: 945px;
	margin: 0 auto;
	text-align: left;
	padding: 10px 0 10px 50px; }	
.portfolio #content {width: 1000px; padding: 10px 0 10px 40px; }	
	
/* INDEX */	
	
#col1 {
	float: left;
	width: 290px;
	margin-right: 35px;}
#col2 {
	float: left;
	width: 290px;
	margin-right: 35px; }

#col3 {
	float: left;
	width: 270px; }
	
/* SIDEBAR PAGES */	
#sidebar {
	width: 290px;
	float: left; 
	
}
	
#main { 
	width: 595px;
	float: right;
	margin-right: 20px;
}

.portfolio #main
	{width: 1000px; margin-right: 0;}	
	

/* TEXT */

p {
	font-size: 1.3em;
	margin: 0.75em 0;
	line-height: 1.6em; }
h1,h2,h3,h4,h5,h6 { 
	color: #007FAA; 
	font-weight: bold; 
	margin-bottom: 0.25em;
	font-family: Gotham-Medium,Helvetica,"Lucida Grande","Lucida Sans Unicode",geneva,Arial,sans-serif;}
	/*font-family: Helvetica,"Lucida Grande","Lucida Sans Unicode",geneva,Arial,sans-serif;}*/

#main h1,#main h2,#main h3,#main h4,#main h5,#main h6 {letter-spacing: -1px; 
	line-height: 1.1em; 
}

h1 { font-size: 3.2em; }
h2 { font-size: 2.6em; }
h3 { font-size: 2.1em; }
h4 { font-size: 1.8em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.3em; }	

#content #main ul, #col1 ul, #col2 ul, #col3 ul, #main ol, #col1 ol, #col2 ol, #col3 ol {
	font-size: 1.3em;
	margin-bottom: 1em; }
	
#col1 li,ul.content li  { background: url(img/bullet-list.gif) no-repeat;     padding-left:20px;     background-position:0 4px;	
}

ul.content li { padding:4px 4px 4px 20px; background-position:0 8px;	}

/*
.intro {
	background-color: #F9F9F9;
	border: 1px solid #e5e5e5;
	padding: 10px;
	text-align:center;
	font-family: Georgia, "Times New Roman", serif; 
	margin: 5px 0 20px 0; }
*/
.intro { letter-spacing: -1px; line-height: 1.1em; color: #AA3F00; background-color: #F9F9F9;
	border: 1px solid #e5e5e5;
	padding: 15px;
	text-align:center;margin: 5px 0 20px 0;}
	
#virtual-office #main h2.intro, #website-usability #main h2.intro { clear: both; padding: 15px;}
	
#main h6.intro { letter-spacing: normal; font-size: 1.4em;}

span.intro-small { color: #007FAA; font-size: 0.75em; }

#testimonials p { font-style: Georgia, "Times New Roman", Times, serif; font-style: oblique; }

span.small {  margin-top: 3px; font-size: 0.9em; color: #AA3F00; font-family: "Lucida Grande","Lucida Sans Unicode",geneva,Arial,sans-serif; font-style: normal;}

#content-top h1 { color: #AA3F00; }

.red { color: #AA3F00; }

p.client { margin-top: -3px;}


#sidebar h2.post {
border-bottom:3px solid #A8A9AB;
float:left;
font-size:1.3em;
margin:0pt;
padding:0pt 0pt 0pt 2px;
text-transform:uppercase;
color: #AA3F00;
width:290px;
}
#sidebar h2.post a, #sidebar h2.post a:visited { color: #AA3F00; }
#content #main h2.pagetitle a:hover { color: #007FAA; background-color: #fff;}

#sidebar h2 {
float:left;
height:25px;
margin:0pt 0pt 41px;
padding:0pt;
}

#main h2 {
padding:0pt;
}
h2.pagetitle{
float:left;

border-bottom:3px solid #A8A9AB;
color: #AA3F00;
float:left;
width:100%;
height:25px;
margin:0pt 0pt 21px;
}

h2.pagetitle {
font-size:1.3em;
text-align:right;
text-transform:uppercase;
}

#sidebar {font-size:1.2em;line-height:1.8em;}

.index #content h3 { padding-bottom: 4px; border-bottom:2px solid #A8A9AB; }

.post h1 { letter-spacing: -2px; line-height: 1.2em;}


/* LINKS */
a {
	text-decoration:none; }
#content #main a, .index #content a {
	 color: #007FAA; }
#content #main a:visited,  .index #content a:visited {
	 color: #007FAA; }
#content #main a:hover,  .index #content a:hover {
 color: #AA3F00; border-bottom: 1px solid #007FAA;  }
#content #main a:active,  .index #content a:active {
	background-color: #007FAA;
	color: #fff;
	border: 1px inset #007FAA;
	margin: 0 -3px;
	padding: 0 2px; }

#content #main h1 a:hover	{ margin: 0; padding: 0;}
	
	
/*NAV BAR */
#header #home a {
	width: 56px;
	background: url(img/nav/home.png) top left no-repeat;}
#about a {
	width: 68px;
	background: url(img/nav/about.png) top left no-repeat;}
#services a {
	width: 94px;
	background: url(img/nav/services.png) top left no-repeat;}
#portfolio a {
	width: 109px;
	background: url(img/nav/portfolio.png) top left no-repeat;}
li#contact a {
	width: 94px;
	background: url(img/nav/contact.png) top left no-repeat;}
#header #blog a {
	width: 53px;
	background: url(img/nav/blog.png) top left no-repeat;}
#nav {
	padding: 45px 10px 0 0;
	height: 16px;
	list-style: none;
	display: inline;
	overflow: hidden;
	float: right;}
#nav li {
    list-style: none;
	display: inline;}
#nav a {
	float: left;
	padding: 16px 23px 0 0;
	overflow: hidden;
	height: 0px !important; 
	height /**/:16px; /* for IE5/Win only */}	
#header #nav a:hover, #header #nav a:active {
	background-position: 0 -16px;}
#header #nav a.last { 	padding-right: 0;}


/* SELECTED */
body.index #nav #home a, body.about #nav #about a,body.portfolio #nav #portfolio a,
body.contact #nav #contact a,body.website-services #nav #services a, body.blog #nav #blog a  {
background-position: 0 -16px;}



#blog-header { text-indent: -9999px; background:url(img/jigsaw-blog.gif) no-repeat; height: 63px; }

#tech-news { text-indent: -9999px; background: url(img/Jigsaw-TechNews.gif) no-repeat; height: 48px; margin-top: 40px; }



#sidebar ul, #sidebar ul ol {float:left;width:290px;}
#sidebar ul li {float:left;width:290px;list-style:none;margin:0;padding:0 0 41px 0;}
#sidebar ul p, #sidebar ul select {margin:5px 0 8px;}
#sidebar ul ul, #sidebar ul ol {float:left;width:290px;margin:0;padding:0;}
#sidebar ul ul ul, #sidebar ul ol {margin: 0 0 0 10px;}
#sidebar ul ol li, ol li {list-style: decimal outside;}
#sidebar ul ul li, #sidebar ul ol li {float:left;width:280px;margin:0;padding:0;}
#sidebar ul ul li a {float:left;width:280px;margin:0;padding:4px 4px 4px 8px;background:#fff;border-bottom:1px solid #e5e5e5;color:#007FAA;}
#sidebar ul ul li a:hover {background:#F9F9F9;text-decoration:none;color: #114477;}


body#web-design #webdesign,body#search-engine-optimisation #seo,body#marketing-and-ppc-advertising #ppc,body#website-hosting #hosting,body#website-usability #usability,body#website-accessibility #accessibility
,body#our-approach #approach,body#virtual-office #office,body#our-philosophy #philosophy,body#blog-design-setup #blogdesign{background:#F9F9F9;}
     

#content .news li { list-style-image:none; list-style-type:none;}

h5.news-item { font-size: 1em; }


ul.news  li {  width: 260px; }

.news li p { font-size: 0.9em; padding:0; margin:0.15em 0 0.15em 0; }

ul.news li {   border-bottom:1px solid #e5e5e5; padding:4px 4px 4px 8px;  }

ul.news li:hover {background:#F9F9F9;text-decoration:none;}

#content #col3 a:hover {background-color:#F9F9F9; color:#114477; margin:0;padding:0;border-bottom: none;}


.news h6 { font-size: 0.8em;  font-weight: normal; }




	
	
li.cat-item a {margin-left: -10px;}



/* BLOG */

div.post { padding: 10px 10px 10px 20px;}	


#content #main .post h1 a,#content #main .post h1 a:visited { color: #AA3F00; }

#content #main .post h1 a:hover,#content #main .post h1 a:active { color: #007FAA; background-color: #fff; border-bottom: none;}


.post .small { font-size: 1.1em; margin-top: -5px; color: #A8A9AB; margin-bottom: 10px;}

#content #main .post .small a { color: #A8A9AB; text-decoration: underline;}

#content #main .post .small a:hover { background: #fff; color: #AA3F00; border-bottom: none;  }

p.postmetadata {background:#F9F9F9; padding: 5px; border: 1px #e5e5e5 solid; clear:both;}

#content #main p.postmetadata a:hover { background:#F9F9F9; text-decoration: underline; color:#114477; border-bottom: none;}

.post h1 { font-size: 3em;}
.post h2 { font-size: 2em;}
.post h3 { font-size: 1.8em;}



#main .post h2 { float:  none;}


.alignleft { float: left;}
.alignright { float: right;}
.alignleft, .alignright { font-size: 1.6em;}


span.pgee-read-more { font-size: 1.3em; display: block; padding: 10px 0; text-align: center;}

#content #main span.pgee-read-more a { color: #007FAA; padding: 1px 3px; }
#content #main span.pgee-read-more a:hover { color: #fff; background-color: #AA3F00; border-bottom: none; }


/* Comments */	

#content #main ul.comment-list { 
	font-size: 1em; 
	list-style-type: none;
		border-top: 3px solid #e5e5e5;
		margin: 20px 0; 
 }

.comment-info { 
	left:10px;
	padding:0 20px 0 0;
	position:absolute;
	top:10px;
	width:130px;
		}

.comment-body { 
	margin:0 0 0 160px;
	min-height:100px;
	padding:0 10px 0 0;
	 }

li.comment { 
	border-bottom: 3px solid #e5e5e5; 
	padding: 10px 0 10px;
	position: relative;
	list-style-type: none; }


h3#comments, h3#respond { font-size: 1.9em; padding: 20px 0 0 10px; }

p.date { font-size: 1.2em; margin-top: -3px; margin-left: 0;}

textarea { 	background-color:#F9F9F9;
	border: 1px solid #e5e5e5;
	padding-left: 5px;
	padding-right: 5px;
	color:#000; }
#commentform textarea {	width: 500px; }

form#commentform { margin-left: 10px;}

input {
	background-color:#F9F9F9;
	border: 1px solid #e5e5e5;
	color:#000;
	height:20px;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: middle; }
		
	#commentform input{ width:250px;
}

	
input:focus, textarea:focus, #commentform textarea:focus {
	border: 1px solid #e5e5e5;
 }	
	
	.floatright {
	float: right; }
	
.floatleft {
	float: left; }
.post img { border: 3px solid #8CB1BB; margin: 10px 0; }


img.floatleft {
	float: left;
	margin: 0 20px 10px 0; }
img.floatright {
	float: right;
	margin: 0 0 10px 20px;
}

/*
CONTACT PAGE
*/


#contact #sidebar h2.post { width: 240px; font-size: 1em; margin-bottom: 15px; }

ul#contact-box h2.post {margin-bottom: 10px;}

#contact #sidebar ul li { width: 240px; }

#contact #main { width: 645px; margin-right: 5px; }

#contact #sidebar { font-size: 1.4em; }

#contact #sidebar ul ul li a, #sidebar ul#contact-box a { padding: 0; border-bottom: none; float: none;}

#contact #sidebar ul ul li a:hover, #sidebar ul#contact-box a:hover { color: #AA3F00; border-bottom: 1px solid #007FAA; background: #fff;}

span.contact-letter { font-weight: bold; color: #114477; padding-right: 5px;}

span.space { padding-right: 8px;}

div.left {
	width: 245px;
	float: left; 
	padding-right: 5px;}
div.right {
	width: 395px;
	margin-top:25px;
	height: auto;
	float: right; }
	
div.left input { width: 200px;}

div.right textarea { width: 355px;}

div.left input.button { width: 100px;}

input:focus, textarea:focus, #commentform textarea:focus {
	border: 1px solid #AA3F00;
 }	

/*
------------------

Colours 

Logo blue: #007FAA
Logo Grey: #A8A9AB

Light blue: #8CB1BB
Dark Blue: #114477

RED: #AA3F00

Light Grey: #F9F9F9


-----------------
*/


/* 
=Footer 
*/
#footer {
background: #8CB1BB url(img/bg-footer.png) top left repeat-x;
	height: 150px; 
	text-align: center;
	color: #007FAA;
	clear: both;
	width: 100%; 
	font-size: 0.75em;}
div.inner {  margin: 0 auto; width: 945px; padding-top: 50px; }



#footer div.seo {
clear:both;
font-size: 0.5em;
padding:10px 12px 0 30px;
text-align: center;
}


#footer div.seo h2 { color: #d9dcdd;
}
#footer div.seo h2 a { color: #d9dcdd; text-decoration: underline;
}

#footer h1 a { background: url(/sitewideimages/jigsaw-logo-tiny.png) no-repeat; display: block; height: 25px;
margin-left: 420px;width:130px;}

.index #content-top h1 { margin: 0 auto; width: 900px; height: 115px;  background:url(img/header-bgs/home-test.png) 70% 1% no-repeat; text-indent: -9999px;}

.about #content-top { background:url(img/header-bgs/about.png) 100% 10% no-repeat; }

.website-services #content-top { background:url(img/header-bgs/services.png) 100% 10% no-repeat; }

.contact #content-top { background:url(img/header-bgs/contact.png) 100% 10% no-repeat; }
.portfolio #content-top { background:url(img/header-bgs/portfolio.png) 100% 10% no-repeat; }


/*
PORTFOLIO

*/


.portfolio-item a {
	text-decoration: none;
	border-bottom: none; }
.portfolio-item dt {
	clear:left;
	float:left;
	color: #333;
	font-size:1.3em;
	font-weight: bold;
	padding-right:0.2em;}
.portfolio-item dd {
	font-size:1.3em;
	margin-bottom:0.6em;}
.portfolio-item dl dd a {
	color: #333;
	border-bottom: #ccc 1px solid; }
.portfolio-item dl dd a:hover {
	border-bottom: #666 1px solid; }
.portfolio-item dl {
	min-height:100px;
	margin: 0 0 0 280px;
	padding:20px 10px 0 0; }


.portfolio-item {
	width: 590px;
	height: 245px;
	margin-bottom: 20px;
	position: relative;
	background-color:#F9F9F9;
	border: 1px solid #e5e5e5;}

.portfolio-item p { margin: 25px 0 0 280px; /*  position: absolute; bottom: 5px; right: 200px; */}



.portfolio-image { 	
	left:20px;
	padding:0 20px 0 0;
	position:absolute;
	top:20px;
	width:250px; }
.portfolio-image img { border: 1px solid #e5e5e5; }


#portfoliocol1, #portfoliocol2 { width: 470px; float: left;}
#portfoliocol1 { margin-right: 20px;}

.portfoliobox {
overflow: auto;
margin-bottom: 20px;
height: 280px;
width: 445px;	background-color:#F9F9F9;
	border: 1px solid #e5e5e5; padding: 10px;}

.portfoliobox ul { float: right; width: 190px; }

.portfoliobox img { margin-left: 10px; border: 1px solid #e5e5e5;}

.portfoliobox ul li {padding-left:20px; background:transparent url(img/bullet-list.gif) no-repeat 0 4px;}
.portfolio small { font-size: 14px;}

.portfoliobox ul li.visitsite, .portfoliobox ul li.viewimage { background: none; padding-left: 0; margin: 15px 0; text-transform: uppercase;}

#content #main .visitsite a,#content #main .viewimage a { background: #AA3F00; color: #fff; font-weight: bold; font-size: 14px; padding: 5px;}
#content #main .visitsite a:hover,#content #main .viewimage a:hover,#content #main a:hover#portfoliomore { background: #007FAA; text-decoration: none; border-bottom: none;}

#content #main a#portfoliomore { background: #AA3F00; color: #fff; font-weight: bold; font-size: 16px; padding: 7px; margin: auto; text-align: center;}

#main .portfoliobox h3 {
font-size: 28px; letter-spacing: 0; margin: 10px 0 10px 10px; }
#main .portfoliobox h4 { font-size: 18px;} 

#morebox { text-align: center;}

dd.comment { font-family: Georgia, "Times New Roman", serif;}

h3.alt { color: #AA3F00;}

div#col3 h4 { line-height: 1em; font-size: 1.5em; padding-top:3px;}

div#col3 small { color:#AA3F00; font-size: 0.7em; }

div#col3 span.pgee-read-more { font-size: 1em; margin: 4px 0; padding: 0; border-bottom:2px solid #A8A9AB;
padding-bottom:6px;}

div#col3 p { line-height: 16px; font-size: 1.1em;}

ul.news h6 { font-size: 1.1em;}

p#newclient { color: #D9DCDD; }

p#newclient a { color: #D9DCDD; }

div#col3 p.customblogdesign { font-size: 1.3em; line-height: 1.6em;}

#footer a { background: none;}


.af-element, .previewLabel, .af-textWrap { float: left;}
.af-element { margin-right: 20px;}
.previewLabel { font-size: 13px;}
.af-form { padding-top: 10px;}