/* STYLE SHEET FOR MPH CONSTRUCTION
Created by Richard Clark
http://richclarkdesign.com

/* ================ TABLE OF CONTENTS ======================

0. MASTER RESET
1. COMMON SITE FRAMEWORK
2. STANDARD TYPOGRAPHY
3. HEADER BLOCK
4. PRIMARY NAVIGATION
5. BODY BLOCK
6. FOOTER BLOCK
7. HOME STYLES
8. CONTENT STYLES
9. COMMON ASIDE
10. FORM STYLES
11. ABOUT US
12. CLIENTS
13. CONTACT US

/* =============== NOTES =======================


/* ====================
COLOUR REFERENCE SHEET
-----------------------
Page Background: #d4c38b;
Primary Font: #50270c;
Secondary Font: #03464a;
Primary Link: #709578;
Primary Link Hover: #03464a;
===================== */

/*=======================
0. MASTER RESET - Modified version of Eric Meyer CSS Reset
=========================*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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,
header, footer, section, aside, article {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
header, section, footer, article, aside {
	display:block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* 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;
}
hr {
    display: block;
    height: 1px;
    border-top: 1px solid #cccccc;
    border-left: 0 none;
    border-right: 0 none;
    border-bottom: 0 none;
    margin: 1em 0;
    padding: 0;
}
input {
	vertical-align:middle;
}

/*=======================
1. COMMON SITE FRAMEWORK
=========================*/

body {
    margin:0 auto;
    background:#3d83c1 url(../img/bkgd-body.png) 0 0 repeat-x;
	font:normal 62.5%/1.5 Arial, Helvetica, sans-seif;
	color:#252525;
}
#skipLink {
	display: block;
	padding: 10px 20px;
	position: absolute;
	top:0;
	left: -999px;
}
#skipLink:focus { 
	left: 0; 
}

.wrapper {
	margin:0 auto;
	width:960px;
}

.section.wrapper {
	position:relative;
	top:-2px;
}
.home .section.wrapper {
	background:url(../img/bkgd-sidebar.png) 0 0 repeat-y;
}
.primary {
	float:left;
	width:100%;
	background:url(../img/bkgd-sidenav.png) 0 0 repeat-y;
}

.home .primary {
	background:url(../img/bkgd-sidebar.png) 0 0 repeat-y;
}

.article-wrap {
	width:720px;
	float:right;
	background:url(../img/bkgd-content.png) 0 250px no-repeat;
}

.primary .article {
	float:left;
	width:460px;
	background:#fff;
	padding:0 20px 20px 20px;
}
.home .primary .article {
	width:280px;
	padding-top:10px;
}
.home .primary .article:first-child {
	background:url(../img/bkgd-sidebar.png) 0 0 repeat-y;
}

.aside {
	float:left;
	width:220px;
	background:#fff;
}

/*=======================
2. STANDARD TYPOGRAPHY
=========================*/

h1, h2, h3, h4, h5, h6 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}

p {
	padding-bottom:10px;
}

ol, ul, dl {
}

blockquote {
}

.cite {
	padding-bottom:0;
	font-style:italic;
	text-align:right;
}

a, a:link {
    text-decoration:none;
	color:#3d83c1;
}

a:hover {
	color:#EB3A06;
}

a:visited {
}

a:active {
}

/*=======================
3. HEADER BLOCK
=========================*/

.header {
    clear:both;
	background:#252525;
	color:#fff;
	border-bottom:2px solid #fff;
	position:relative;
	min-height:130px;
}

.header .wrapper {
	padding:15px 0;
	position:relative;
}

.header h2, .header h3 {
	float:right;
	width:300px;
	text-align:right;
	clear:right;
	margin-right:20px;
}

.header h2 {
	padding-top:40px;
	font-style:italic;
	font-weight:normal;
	font-size:1.8em;
	letter-spacing:1px;
	text-transform:none;
}

.header h3 {
	font-weight:normal;
	font-size:2.4em;
	letter-spacing:1px;
	text-transform:none;	
}

.header img {
	position:absolute;
	top:20px;
	left:525px;
	z-index:1;
}

/*-----------------------
x. H1 Logo Replacement
-------------------------*/
.logo { 
	letter-spacing : -1000em;
} 

/* Just for Opera, but hide from MacIE */ 
/*\*/html>body .logo { 
	letter-spacing : normal; 
	text-indent : -999em; 
	overflow : hidden;
} 
/* End of hack */ 
h1.logo, h2.logo {
	float:left;
	border:none;
	background:url(../img/logo.png) no-repeat;
	width:240px;
	height:100px;
	margin-left:15px;
	text-align:left;
	padding-top:0;
}

h1.logo a, h2.logo a {
	display:block;
	width:240px; /* replace with your value */
	height:100px; /* replace with your value */
	background:url(../img/logo.png) no-repeat;
	border-bottom:0;
}

/*=======================
4. PRIMARY NAVIGATION
=========================*/

.nav {
    clear:both;
    list-style:none;
	background:url(../img/bkgd-nav.png) 0 100% no-repeat;
	position:relative;
	top:-2px;
	text-transform:uppercase;
	min-height:37px;
	font:1.4em "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing:1px;
	padding:0 0 0 15px;
}

.nav li {
    display:block;
	float:left;
	width:auto;
	margin-right:15px;
}

.nav a {
	color:#fff;
	padding:5px;
	border-bottom:0;
	display:block;
	border-top:2px solid #252525;
}

.nav a:hover, 
.home .nav #home a,
.about .nav #about a,
.projects .nav #projects a,
.clients .nav #clients a,
.contact .nav #contact a {
	color:#eb3a06;
	border-top:2px solid #eb3a06;
}

/*=======================
5. BODY BLOCK
=========================*/

.article {
	font-size:1.2em;
}

.home .primary h2, .article h1 {
	border-top:1px solid #3d83c1;
	padding:5px 0;
	font-size:1.8em;
	font-weight:normal;
	letter-spacing:1px;
	color:#3d83c1;
	text-transform:uppercase;
	margin-bottom:0;
}

.article h1 {
	padding-bottom:0;
}

.article h2 {
	font-size:1.4em;
	text-transform:none;
	color:#252525;
	margin-bottom:5px;
}

.article ul, .article ol {
	margin:0 0 10px 30px;
}

.home .primary .article:first-child {
	color:#fff;
}

.home .primary .article:first-child h2 {
	border-top:1px solid #fff;
	color:#fff;
}

.home .primary .article:first-child h2 a {
	color:#fff;
}

.article h2 a:hover, 
.home .primary .article:first-child h2 a:hover {
	color:#EB3A06;
}

.home .lead-img {
	position:relative;
}

.home .lead-img {
	background:url(../img/bkgd-lead-img.png) 0 100% no-repeat;
}

.lead-img img {
	margin:20px 10px 5px 20px;
	border:2px solid #fff;
}

.home .lead-img img {
	margin:20px 10px 0 10px;
}

/*.lead-img div {
	position:absolute;
	bottom:15px;
	right:-20px;
	z-index:2;
	width:auto;
	padding:5px 95px 5px 10px;
	border:2px solid #fff;
	background:#252525 url(../img/bkgd-pro-feat-link.png) 100% 0 no-repeat;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}*/

.lead-img a:hover {
	color:#3d83c1;
}

.lead-img div h4 {
	font-size:1.4em;
}

.lead-img div h5 {
	font-size:1.2em;
	text-transform:uppercase;
}

.lead-img a {
	color:#fff;
}

.lead-img ul {
	position:absolute;
	top:-12px;
	z-index:1;
	right:40px;
	width:176px;
	padding:7px 15px;
	background: url(../img/bkgd-img-switch.png) no-repeat;
	font-size:1.2em;
	list-style:none;
	text-align:center;
}

.lead-img li {
	display:inline;
	border-left:1px solid #fff;
	padding:0 25px;
}

.lead-img li:first-child {
	border-left:0;
}

#gallery {
	position:relative;
	height:270px
}
#gallery a {
	float:left;
	position:absolute;
}

#gallery a.show {
	z-index:500
}

#gallery .caption {
	z-index:600; 
	position:absolute;
	bottom:2px;
	right:-20px;
	width:343px !important;
	padding:5px 10px 5px 10px;
	border:2px solid #fff;
	background:#252525;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#fff;
}

.link {
	text-align:right;
	padding-top:20px;
	font-weight:bold;
}

.link a {
	color:#004485;
}

.link a:hover {
	color:#EB3A06;
}

.sidebar {
	width:220px;
	padding:10px;
	float:left;
	background:#78a8d4;
}

/*=======================
6. FOOTER BLOCK
=========================*/

.footer {
    clear:both;
	background:#252525;
	color:#fff;
	border-top:2px solid #fff;
	position:relative;
	top:-3px;
	font-size:1.1em;
}

.footer p {
	clear:both;
	padding-left:10px;
}

p.copy  {
	float:right;
	width:200px;
	text-align:right;
	padding-top:15px;
	clear:none;
	margin-right:20px;
}

.footer .nav {
	background:none;
	font:1em Arial, Helvetica, sans-serif;
	text-transform:none;
	float:left;
	width:600px;
	padding-top:10px;
}

.footer .nav a {
	border-top:0;
}

.footer .nav li {
	margin-right:10px;
}

.footer .nav a:hover, 
.home .footer .nav #home a,
.about .footer .nav #about a,
.projects .footer .nav #projects a,
.clients .footer .nav #clients a,
.contact .footer .nav #contact a {
	border-top:0;
}

/*=======================
7. HOME STYLES
=========================*/

.home {
}

/*=======================
8. CONTENT STYLES
=========================*/

.more-info {
	background:#c5daeb;
	padding:5px 10px;
}

.more-info a:hover {
	color:#eb3c07;
}

/*=======================
9. COMMON ASIDE
=========================*/

.sidebar h2 {
	border-top:0;
	color:#fff;
	padding:5px 10px;
	font-size:1.8em;
	font-weight:normal;
}

.sidebar ul {
	list-style:none;
	border-top:1px solid #3875b4;
	border-bottom:1px solid #d6e4f1;
	font-size:1.2em;
}

.sidebar li {
	border-top:1px solid #d6e4f1;
	border-bottom:1px solid #3875b4;
}

.sidebar a {
	display:block;
	color:#fff;
	padding:5px 10px;
}

.sidebar a:hover,
.cp .sidebar #castle-park a,
.tm .sidebar #tia-morfa a,
.fr .sidebar #flintshire-railway a,
.ca .sidebar #combermere a,
.ys .sidebar #yorke-st a {
	background:#a1c2e1;
	color:#eb3a04;
}

.aside div {
	background:#c5daed;
	border-top:1px solid #3d83c1;
	margin-bottom:20px;
	padding:10px;
}

.aside h2 {
	color:#252525;
	margin-bottom:5px;
	border-top:1px solid #252525;
	padding:5px 10px 0 10px;
	font-size:1.8em;
	font-weight:normal;
}

.aside h3 {
	font-size:1.4em;
	color:#3d83c1;
	margin-bottom:5px;
}

.aside p, .aside ul {
	font-size:1.1em;
}

.aside ul {
	list-style:square;
	margin:0 0 0 13px;
}

.aside ul a:hover {
	text-decoration:underline;
}

/*=======================
10. FORM STYLES
=========================*/

form {
}

input {
}

textarea {
}

button {
}

/*=======================
11. ABOUT US
=========================*/

.cliff {
	display:block;
	width:150px;
	height:300px;
	position:absolute;
	top:30px;
	left:300px;
	background:transparent;
}

.gareth {
	display:block;
	width:150px;
	height:220px;
	position:absolute;
	top:100px;
	left:600px;
	background:transparent;	
}

.geoff {
	display:block;
	width:150px;
	height:250px;
	position:absolute;
	top:60px;
	left:770px;
	background:transparent;	
}

/*=======================
12. CLIENTS
=========================*/

.clients #gallery {
	margin-left:-250px;
	height:345px;
}

.clients #gallery a {
	cursor:default;
}

.clients #gallery .caption{
	bottom:23px;
}

/*=======================
13. CONTACT
=========================*/

.lead-img #map {
	margin:10px 0 20px 20px;
	height:300px;
	width:685px;
	border:2px solid #fff;
	background:#fff;
}