/* Eric Meyer's Reset Reloaded */
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

html, body, 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, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {line-height: 1;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}


/* =Clearfix (all browsers)--------------------------------*/

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/* IE6 */ 
* html .clearfix {height: 1%;}

/* IE7 */
*:first-child+html .clearfix {min-height: 1px;}


/* Springworks styles start here */
/* ============================= */

html {
	/* cf. http://www.hicksdesign.co.uk/journal/535/ */
	height: 100%;
	margin-bottom: 1px;
	background: #D6D0CB;
	}

body {
background: #fff;
font-family: "Myriad Pro", "Trebuchet MS", Arial, sans-serif;
font-size: 84%;
color: #181818;
text-align: center;
margin: 0;
}

/* Navigation */
/* ========== */

#nav {
text-align: center;
background: #D6D0CB url(/images/nav-bg.gif) top left repeat-x;
border-bottom: 2px solid #0B2768;
}

#nav ul {
width: 944px;
margin: 0 auto;
}

#nav ul li {
display: inline;
}

#nav ul li a {
display: block;
float: left;
padding: 8px 0;
margin-right: 24px;
color: #0B2768;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
}

#nav ul li a:hover {
background: transparent url(/images/nav-bg-hover.gif) bottom left repeat-x;
}

#nav ul li a.here {
background: transparent url(/images/nav-bg-here.gif) bottom left repeat-x;
}



/* Container */
/* ========= */

#container {
width: 944px;
margin: 0 auto 0 auto;
text-align: left;
position: relative;
}


/* Header */
/* ====== */

#header {
height: 69px;
margin: 24px 0;
position: relative;
}

#header h1 {
text-indent: -9999px;
height: 69px;
background: transparent url(/images/sw2.gif) top left no-repeat;
}

#header h2 {
font-weight: 300;
font-size: 44px;
color: #0B2768;
position: absolute;
bottom: 2px;
left: 320px;
}


/* Home Page Services List */
/* ======================= */

#services {
margin: 24px 0;
}

#services h3 {
font-weight: 300;
font-size: 42px;
color: #0B2768;
margin-bottom: 0;
}

#container #services h3 a {
border:none;
}

#services p {
line-height: 1.4;
}

#services-web, #services-graphic, #services-mac {
display: block;
float: left;
margin-right: 16px;
width: 280px;
height: 236px;
padding: 8px 12px;
background: transparent;
}

#services-web {
background: transparent url(/images/services-web.jpg) top left no-repeat;
}

#services-graphic {
background: transparent url(/images/services-graphic.jpg) top left no-repeat;
}

#services-mac {
background: transparent url(/images/services-mac.jpg) top left no-repeat;
color: #fff;
margin-right: 0;
}

#services-mac h3 {
color: #fff;
}


/* Testimonial quote */
/* ================= */

blockquote#testimonial {
float: right;
margin: 0 0 16px 16px;
width: 464px;
padding-bottom: 12px;
background: #D6D0CB url(/images/quote-box-bottom.jpg) bottom left no-repeat;
font-weight: 300;
font-style: italic;
font-size: 1.1em;
}

#web-design blockquote#testimonial {
float: left;
margin: 0 0 16px 0;
}

blockquote#testimonial p {
margin-bottom: 0;
padding: 12px 12px 0 12px;
background: transparent url(/images/quote-box-top.jpg) top left no-repeat;
}

blockquote#testimonial p span {
margin-left: 1em;
font-style: normal;
font-weight: bold;
}


/* Main Content */
/* ============ */

h3 {
margin-top: 0;
font-weight: 300;
font-size: 34px;
color: #0B2768;
margin-bottom: 4px;
}

h4 {
margin-top: 0;
font-weight: 300;
font-size: 22px;
color: #0B2768;
margin-bottom: 4px;
}

h5 {
margin-top: 0;
text-align: center;
line-height: 1.5;
font-weight: 300;
font-size: 18px;
color: #181818;
margin-bottom: 12px;
padding-bottom: 4px;
}

h5 strong {
color: #0B2768;
}

p {
font-size: 1em;
line-height: 1.5;
margin-bottom: 1em;
}

strong {
font-weight: bold;
}

ul li {
font-size: 1em;
line-height: 1.5;
list-style-type: disc;
}

ul {
margin: 0 0 1.5em 1.5em;
}

h3#portfolio {
clear: both;
margin: 16px 0 8px 0;
}


img.right {
float: right;
margin: 0 0 18px 24px;
}

img.left {
float: left;
margin: 0 24px 18px 0;
}

img.framed {
border: 1px solid #D6D0CB;
}


div.box-left {
background: #D6D0CB;
float: left;
width: 232px;
height: 120px;
margin-right: 24px;
margin-bottom: 24px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}

div.box-right {
background: #D6D0CB;
float: right;
width: 232px;
height: 120px;
margin-left: 24px;
margin-bottom: 24px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}

.hr {
text-align: center;
margin: 24px 0;
}

.clear-both {
clear: both;
}

p.last {
margin-bottom: 0;
}

#featured {
float: left;
width: 464px;
padding-top: 12px;
margin-bottom: 24px;
background: #D6D0CB url(/images/quote-box-top.jpg) top left no-repeat;
}

#featured p.last {
background: transparent url(/images/quote-box-bottom.jpg) bottom left no-repeat;
padding: 0 12px 12px 12px;
}

#featured h4, #featured p {
padding: 0 12px;
}


/* Links */
/* ========== */

#container a:link, #footer a:link {
color: #0B2768;
text-decoration: none;
border-bottom: 1px dotted #0B2768;
}

#container a:visited, #footer a:visited {
color: #0B2768;
text-decoration: none;
border-bottom: 1px dotted #0B2768;
}

#container a:hover, #footer a:hover {
color: #0B2768;
text-decoration: none;
border-bottom: 1px solid #0B2768;
}

#container a:active, #footer a:active {
color: #0B2768;
text-decoration: none;
border-bottom: 1px solid #0B2768;
}

#container h3 a:link, #container h5 a:link {
border-bottom: none;
}

#container h3 a:visited, #container h5 a:visited {
border-bottom: none;
}

#container h3 a:hover, #container h5 a:hover {
color: #1345AA;
border-bottom: none;
}

#container h3 a:active, #container h5 a:active {
border-bottom: none;
}


/* Add-on box */
/* ========== */

#add-on {
float: right;
width: 464px;
padding-top: 12px;
margin: 0 0 16px 16px;
background: #0D3080 url(/images/add-on-box-top.jpg) top left no-repeat;
}

#add-on p.last {
background: transparent url(/images/add-on-box-bottom.jpg) bottom left no-repeat;
padding: 0 12px 12px 12px;
}

#add-on h4,#add-on p {
color: #fff;
padding: 0 12px;
}

#add-on a:link {
color: #f2f0e5;
text-decoration: none;
border-bottom: 1px dotted #f2f0e5;
}

#add-on a:visited {
color: #f2f0e5;
text-decoration: none;
border-bottom: 1px dotted #f2f0e5;
}

#add-on a:hover {
color: #f2f0e5;
text-decoration: none;
border-bottom: 1px solid #f2f0e5;
}

#add-on a:active {
color: #f2f0e5;
text-decoration: none;
border-bottom: 1px solid #f2f0e5;
}


/* 123-reg.co.uk affiliate box */
/* =========================== */
#domain-reg-box {
width: 210px;
min-height: 60px;
float: right;
margin: 0 12px 12px 16px;
border: 1px solid #ddd9c1;
background: #fff url(/images/123-natgrad.gif) left bottom repeat-x;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

#domain-reg-box h5 {
text-align:left;
color: #6d6b5e;
margin: 8px 8px 0 8px;
font-size: 1.1em;
font-weight:bold;
line-height: 1em;
}

#domain-reg-box h5 a:link {
border: none;
}

#domain-reg-box form {
margin: 0 8px 8px 8px;
}

#domain-reg-box form .input-domain {
float: left;
width: 130px;
margin: 4px 4px 8px 0px;
font-size: 0.8em;
}

#domain-reg-box form .input-searchbut {
float: left;
padding: 0px;
margin: 4px 0px 8px 0px;
font-size: 0.8em;
}

#domain-reg-box form div.link-123 {
font-size: 0.6em;
line-height: 1em;
padding: 0px;
text-align: right;
margin: 4px 0px 8px 0px;
clear: both;
}

#domain-reg-box a:link {
color: #0B2768;
text-decoration: none;
border-bottom: 1px dotted #0B2768;
}

#domain-reg-box a:visited {
color: #0B2768;
text-decoration: none;
border-bottom: 1px dotted #0B2768;
}

#domain-reg-box a:hover {
color: #0B2768;
text-decoration: none;
border-bottom: 1px solid #0B2768;
}

#domain-reg-box a:active {
color: #0B2768;
text-decoration: none;
border-bottom: 1px solid #0B2768;
}


/* Portfolio list */
/* ============== */

ul#portfolio-items {
margin: 0;
}

ul#portfolio-items li {
display: block;
float: left;
font-size: 1em;
line-height: 1;
width: 198px;
height: 190px;
border: 1px solid #D6D0CB;
margin: 0 16px 16px 0;
padding: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-webkit-box-shadow: 2px 2px 4px #ddd;
-moz-box-shadow: 2px 2px 4px #ddd;
}

ul#portfolio-items li.last {
margin-right: 0;
}

ul#portfolio-items h6 {
font-size: 1.1em;
color: #0B2768;
font-weight: normal;
}

ul#portfolio-items p {
text-transform: uppercase;
font-size: 0.8em;
line-height: 1;
color: #0B2768;
letter-spacing: 0.2em;
text-align: right;
font-weight: bold;
margin-bottom: 0;
}

ul#portfolio-items img {
margin: 6px 0;
}

#container ul#portfolio-items a {
border-bottom: none;
}

#container ul#portfolio-items h6 a:hover, #container ul#portfolio-items p a:hover {
color: #1345AA;
}

#container ul#portfolio-items a:hover img, #portfolio-main a:hover img {
border: 1px solid #aca7a3;
}


/* Portfolio */
/* ========= */

#portfolio-main {
border: 1px solid #D6D0CB;
padding: 12px;
margin-bottom: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-webkit-box-shadow: 3px 3px 6px #bbb;
-moz-box-shadow: 3px 3px 6px #bbb;
}

#portfolio-main h3 {
border-bottom: 1px solid #D6D0CB;
margin-bottom: 6px;
padding-bottom: 6px;
}

#portfolio-main h5 {
font-size: 0.9em;
letter-spacing: 0.2em;
text-align: right;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
color: #0B2768;
margin-bottom: 24px;
}

#portfolio-main strong {
color: #0B2768;
}

#portfolio-main p {
margin-right: 480px;
}

#portfolio-main img {
margin-top: 0.2em;
margin-bottom: 36px;
}

#portfolio-main blockquote {
margin-right: 720px;
margin-bottom: 1.5em;
padding: 12px;
background: #D6D0CB;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}

#portfolio-main blockquote p {
margin: 0;
font-style: italic;
}

ul.pagination {
list-style: none;
height: 36px;
width: 72px;
position: absolute;
right: 0px;
}

ul.pagination li {
list-style: none;
float: right;
margin: 0;
}

#portfolio ul.pagination li a {
text-indent: -9999px;
display: block;
height: 36px;
width: 36px;
margin: 0;
border: none;
}

ul.pagination li.prev a {
background: #fff url(/images/prev.jpg) 0 0 no-repeat;
}

ul.pagination li.prev a:hover {
background-position: 0 -50px;
}

ul.pagination li.prev a:active {
background-position: 0 -100px;
}

ul.pagination li.next a {
background: #fff url(/images/next.jpg) 0 0 no-repeat;
}

ul.pagination li.next a:hover {
background-position: 0 -50px;
}

ul.pagination li.next a:active {
background-position: 0 -100px;
}


/* Contact Page */
/* ============ */

#contact_details {
float: right;
text-align: center;
margin: 0 0 16px 16px;
width: 464px;
padding-bottom: 12px;
background: #D6D0CB url(/images/quote-box-bottom.jpg) bottom left no-repeat;
}

#contact_details h3 {
margin-bottom: 0;
padding: 12px 12px 0 12px;
background: transparent url(/images/quote-box-top.jpg) top left no-repeat;
}

#contact_details p {
padding: 0 12px;
margin-bottom: 0;
}

form label {
color: #0B2768;
}

.zemTextarea {
width: 400px;
}



/* Footer */
/* ====== */

#footer {
clear: both;
margin-top: 96px;
background: #D6D0CB;
text-align: center;
}

#footer-content {
text-align: left;
margin: 0 auto;
width: 944px;
padding: 16px 0 96px 0;
}

#footer p {
font-size: 0.9em;
}

#footer p.right {
float: right;
text-align: right;
}