ÿþ/*
=========================================

Project Name: Capcon
Creation date: 18 May 2010
Last modified: 9 June 2010
Description: 
Version: 1.0
Author: Jon MacKinnon | jon@moresoda.co.uk
Company: moresoda design ltd
Company URI: http: //www.moresoda.co.uk

===========[TABLE OF CONTENTS]===========

1. BASE
-1.1. CSS Reset [RES]
-1.2. Global Settings [GLO]
-1.3. Common Formatting [COM]
-1.4. Links [LIN]
-1.5. Forms [FOR]
-1.6. Tables [TAB]
-1.7. Global Classes [GLC]
-----
2. CONTENT
-2.1. Wrapper [WRA]
-2.2. Header [HEA]
-2.3. Nav [NAV]
-2.4. Content [CON]
-2.5. Footer [FOO]
-2.6. Classes [CLA]

=========================================
*/

/* =[RES]= CSS Reset - derivative of YUI Reset CSS - http://developer.yahoo.com/yui/reset/#code ===== */
html,body,div,pre,form,fieldset,input,h1,h2,h3,h4,h5,h6,p,textarea,ul,ol,li,dl,dt,dd,blockquote,th,td,em,strong
/* HTML 5 elements */ abbr,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code { font-style: normal; font-weight: normal; }
ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; line-height: 1em; }
q:before,q:after { content: ''; }
abbr,acronym { border: 0; }
i,em { font-style: oblique; }
/* =[GLO]= Global Settings ===== */
html {
	overflow: 0!important;
	font-size: 125%;
	background: #3a565f url(../images/html.png) repeat-x top left;
}
body {
	font: 50% Arial, Helvetica, sans-serif; /* base font size 1em (10px)*/
	background: url(../images/body.png) top center no-repeat;
	_background: none;
	color: #4c4c4c;
}
/* =[COM] Common Formatting ===== */
h1 {
	font-size: 2.4em;
}
h2 {
	font-size: 1.8em;
	padding: 0 0 5px
}
h5 {
	font-size: 1.4em;
}
p {
	margin: 0;
	padding: 0 0 10px;
	font-size: 1.3em;
	line-height: 1.4em;
}
ul,ol {
	margin: 0;
	padding: 0;
	font-size: 1.3em;
}
li {
	padding: 0;
	margin: 0 0 2px;
}
blockquote {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
	display: block;
}
sup {
	position: relative;
	bottom: .3em;
	vertical-align: baseline;
}
sub {
	position: relative;
	bottom: -.2em;
	vertical-align: baseline;
}

/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Typodermic
 * License URL: http://www.fontspring.com/fflicense/typodermic
 *
 *
 */

@font-face {
	font-family: 'GGX88LtRegular';
	src: url('../fonts/ggx88_lt-webfont.eot');
	src: local(':&'), 
						url('../fonts/ggx88_lt-webfont.woff') format('woff'), 
						url('../fonts/ggx88_lt-webfont.ttf') format('truetype'), 
						url('../fonts/ggx88_lt-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}



/* =[LIN]= Links ===== */
a,
a:visited {
	color: #20A7C9;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: #e86510;
}
/* =[FOR]= Forms ===== */
form {
	margin: 0;
	padding: 0;
	display: inline;
}
input,select,textarea {
	float: left;
}
label {
	cursor: pointer;
	display: block;
	float: left;
	width: 125px;
}
/* =[TAB]= Tables ===== */
table {
	border: 0;
	margin: 0;
	padding: 0;
}
table tr td {
	padding: 4px;
}
/* =[GLC]= Global Classes ===== */
.clear { display: block; height: 0; line-height: 0; font-size: 0; clear: both; overflow:hidden; }
.float-left { float: left!important; }
.float-right { float: right!important; }
.float-right-icon { padding:20px; float: right!important; }
.align-left { text-align: left!important; }
.align-center { text-align: center!important; }
.align-right { text-align: right!important; }
.align-justify { text-align: justify!important; }
.align-bottom { vertical-align: bottom!important; }
.error { color: #FF0000; }
.highlight{	color: #ffff00; }
.lowlight{ color: #666; }




/* =[WRA]= Wrapper ===== */

#wrapper {
	width:924px;
	margin:0 auto;
	background: #fff;
	padding: 40px 25px 0;
}


/* =[HEA]= Header ===== */

#header {
	width:924px;
	height: 137px;
}

#logo {
	width: 222px;
	height: 50px;
	float: left;
	display: block;
	background: url(../images/logo.png) no-repeat top left;
	text-indent: -9999px;
	margin: 0 0 4px;
}

#header .slogan {
	float: right;
	text-align: right;
}

#header .slogan h1 {
	color: #20a7c9;
	font-size: 2.6em;
	margin: 0 0 2px;
}
#header .slogan h2 {
	color: #000;
}

/* =[NAV]= Nav ===== */

#nav {
	clear: both;
	height: 33px; /* match li height when styled */
	margin: 30px 0 20px;
	padding: 0;
	font-size: 1.2em;
	line-height: 1em;
	border-top: 1px solid #71d5f2;
	border-bottom: 1px solid #71d5f2;
}

#nav li {
	float: left;
	list-style: none;
	margin: 0;
	height: 14px;
}

#nav li:last-child {
	float: right;
}

#nav li a {
	font-weight: 400;
	text-transform: uppercase;
	color: #000;
	padding: 12px 20px 9px;
	display: block;
}

#nav li a:hover, #nav li a.active {
	color: #20a7c9;
}

#nav li.nav-green a:hover, #nav li.nav-green a.active {
	color: #8acb35;
}

#nav li.nav-orange a:hover, #nav li.nav-orange a.active {
	color: #e86510;
}

#nav li:last-child a {
	color: #e86510;
}


/* =[CON]= Content ===== */

#content {
	width:924px;
}

#content .slideshow {
	background: url(../images/shadow-b.png) bottom center no-repeat;
	height: 250px;
	margin: 0 0 25px;
	position: relative;
}

#content .slideshow .content {
	background: url(../images/slideshow-stocktaking.jpg) top left no-repeat;
	width: 924px;
	height: 231px;
	position: absolute;
	top: 0;
	left: 0;
}

#content .slideshow .content h2 {
	font-size: 2.3em;
	line-height: 1.2em;
	width: 390px;
	position: absolute;
	top: 45px;
	left: 50px;
}

#content .slideshow .content a {
	position: absolute;
	top: 125px;
	left: 50px;
	display: block;
	width: 103px;
	height: 26px;
	font-weight: 400;
	color: #fff;
	text-indent: -9999px;
	background: url(../images/read-more.png) top left no-repeat;
	outline: none;
}

#content .slideshow ul {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 2.1em;
	line-height: 1em;
	height: 39px;
	width: 924px;
	padding: 0;
	margin: 0 0 19px;
}

#content .slideshow li {
	float: left;
	border-right: 1px solid #fff;
	margin: 0;
	height: 39px;
}

#content .slideshow li:last-child {
	border: none;
}

#content .slideshow li a {
	color: #fff;
	font-weight: 100;
	background: url(../images/slideshow-tabs.png) bottom left repeat-x;
	padding: 9px 0 8px;
	_padding: 8px 0;
	height: 22px;
	display: block;
	width: 230px;
	text-align: center;
}

#content .slideshow li a:hover,
#content .slideshow li a.active {
	background-position: top left;
}

#content .slideshow li:last-child a {
	width: 231px;
}

#content .header {
	padding: 23px 10px 27px;
	height: 26px;
}

#content .header h1 {
	color: #20a7c9;
}

.services #content .header h1 {
	color: #8ACB35;
}

.clients #content .header h1 {
	color: #E86510;
}



#content #benefits {
	background: url(../images/header-benefits.jpg) top left no-repeat;
}

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

#content #clients {
	background: url(../images/header-clients.jpg) top left no-repeat;
}

#content #about {
	background: url(../images/header-about.jpg) top left no-repeat;
}

#content #contact {
	background: url(../images/header-contact.jpg) top left no-repeat;
}

#content-left {
	float:left;
	width:190px;
	margin: 0 0 25px;
}

#content-left .nav {
	font-size: 1.4em;
}

#content-left .nav li {
	border-bottom: 1px solid #71d5f2;
}

.services #content-left .nav li {
	border-color: #8ACB35; 
}

.clients #content-left .nav li {
	border-color: #E86510; 
}

#content-left .nav li a {
	font-weight: 400;
	color: #202020;
	display: block;
	padding: 10px 10px 2px;
}

#content-left .nav li a:hover,
#content-left .nav li a.active {
	color: #20a7c9;
}

.services #content-left .nav li a:hover,
.services #content-left .nav li a.active {
	color: #8ACB35;
}

.clients #content-left .nav li a:hover,
.clients #content-left .nav li a.active {
	color: #E86510;
}


#content-right {
	float:right;
	width:695px;
	margin: 0 0 40px;
}

#content-right .left {
	width: 435px;
	padding: 0 0 0 10px;
	float: left;
}

#content-right .left .client-list {
	padding: 0 0 15px;
}

#content-right .left h5 {
	margin: 0 0 5px;
}

#content-right .left .story{
	font-size: 1.3em;
	padding:15px;
	margin:10px 0;
	border: 1px solid #E86510;
}


#content-right .right {
	width: 205px;
	padding: 0 10px 0 0;
	float: right;
	position: relative;
}

#content-right div.clients {
	padding: 130px 10px 0 0;
}

#content-right .right img.clients {
	position: absolute;
	top: -120px;
}

#content-right .right h2 {
	color: #e66410;
	margin: 0 0 5px;
}

#content-right .right h2 a {
	color: #e86510;
	font-weight:normal;
}

#content-right .right h2 a:hover {
	color: #a14a12;
}

#content-right .right p a {
	color: #e66410;
}

#content-right .right .services {
	font-size: 1em;
}

#content-right .right .services li {
	padding: 10px 10px 10px 0;
	border-bottom: 1px solid #e7e7e7;
}

#content-right .right .services li img {
	float: right;
}

#content-right .right .services li h2 {
	color: #8acb35;
	margin: 0;
	*margin: -15px 0 0;
	*position: relative;
}

#content-right .right .services li h2 a {
	color: #8acb35;
	font-weight: 400;
}

#content-right .right .services li h2 a:hover {
	color: #35a9cb;
}

#content-right .right .services li p {
	width: 120px;
	font-size: 1.1em;
	padding: 0;
}

#content-right .right .services li p a {
	color: #8acb35;
}

#content-right .right .services li p a:hover {
	text-decoration: underline;
}

#content-right .right .logo-list {
	margin:0 0 10px 21px;
	padding: 0 0 10px;
	border-bottom: 1px solid #999;
}

#content-right .right .logo-active {
	padding:41px 21px;
	border-bottom: 1px solid #999;
	border-top: 1px solid #999;
}

.index #content-left {
	width: 430px;
	padding: 0 10px;
}

.index #content-right {
	width: 450px;
}

.case-studies {
	margin: 0 -25px;
	position: relative;
	background: url(../images/case-studies.png) top center no-repeat;
	height: 177px;
	width: 904px;
	padding: 30px 35px 0;
}

.case-studies h1 {
	color: #a14a12;
}

.case-studies ul {
	margin: 10px 0 0;
	font-size: 1em;
}

.case-studies li {
	float: left;
	width: 400px;
	padding: 0 50px 0 0;
	border-right: 1px solid #999;
}

.case-studies li:last-child {
	margin: 0 0 0 50px;
	border: 0;
	padding: 0;
}

.case-studies li h5 {
	color: #e86510;
	margin: 0 0 5px;
}

.case-studies li h5 a {
	color: #e86510;
	font-weight:normal;
}

.case-studies li h5 a:hover {
	color: #a14a12;
}


.case-studies li p {
	font-size: 1.2em;
	line-height: 1.5em;
}

.case-studies li p a {
	color: #e86510;
}

.case-studies li p a:hover {
	color: #a14a12;
}

.case-studies li img {
	float: right;
	margin: 0 0 0 25px;
}

/* =[FOO]= Footer ===== */
#footer{
	background: #3a565f;
	margin: 0 -25px;
	position: relative;
	padding: 35px;
	height: 230px;
}

#footer p {
	font-size: 1.1em;
	color: #fff;
}

#footer div {
	float: left;
	margin: 0 50px 50px 0;
}

#footer div:last-of-type {
	margin-right: 0;
}

#footer h5 {
	color: #71d5f2;
}

#footer h5 a {
	color: #71d5f2;
	font-weight: 400;
}

#footer div ul {
	margin: 10px 30px 0 0;
	float: left;
	font-size: 1.1em;
}

#footer div ul:last-child {
	margin: 10px 0 0 0;
}


#footer div li {
	background: url(../images/bullet.png) left center no-repeat;
	padding: 0 0 0 12px;
}

#footer div li a {
	font-weight: 400;
	color: #ccc;
	line-height: 1.8em;
}

#footer div li a:hover {
	color: #fff;
}

#enquiry {
	font-family:Arial,Helvetica,sans-serif;
}

/* =[CLA]= Classes ===== */


.replace {
	font-family: GGX88LtRegular, Arial, Helvetica, sans-serif;
}

.replace em {
	font-weight: 100;
}

.replace strong {
	font-weight: 700;
	font-style: oblique;
}

.index #content-left .block {
	margin: 0 -10px;
}

img.banner {
	margin: 1px 0 0;
}

.left img.banner {
	margin: 1px 0 0 -10px;
	position: relative;
}

.block {
	font-size: 2.2em;
	height: 24px;
	padding: 10px;
	position: relative;
	color: #fff;
}

.block.blue {
	background: #35a9cb
}

.block.green {
	background: #8ACB35;
}

.block.orange {
	background: #E86510;
}


.grey {
	color: #898989;
	padding: 10px 0;
}

.left .block {
	margin: 0 0 0 -10px;
	position: relative;
}

.border {
	padding: 10px 0;
	border-bottom: 1px solid;
}

.border.blue {
	height: 23px;
	padding: 10px 0;
	border-bottom: 1px solid #e66410;
	color: #35a9cb; 
}

.border.blue a {
	font-weight:normal;
}

.shadow {
	height: 20px;
	background: url(../images/shadow.jpg) top center no-repeat;
}

.shadow-b {
	height: 35px;
	background: url(../images/shadow-b.png) top center no-repeat;
}

.focus {
	line-height: 1.2em;
}

.left .focus {
	margin: 0 0 20px;
}

blockquote {
	margin: 30px 0 0;
	height: 111px;	
	padding: 20px;
	background: url(../images/bubble.png) top left no-repeat;
	color: #fff;
}

blockquote p {
	padding: 0 15px 15px 0;
	font-size: 1.3em;
	line-height: 1.4em;
}

blockquote h4 {
	font-size: 1.4em;
	font-weight: 700;
}

.benefits {
	font-size: 1em;
}

.benefits li {
	border-bottom: 1px solid #e7e7e7;
	padding: 15px 20px 15px 0;
}

.benefits li h2 {
	font-size: 1.8em;
}

.benefits li h2 a {
	font-weight: 400;
	color: #35a9cb;
}

.benefits li h2 a:hover {
	color: #e86510;
}

.benefits li p {
	padding: 0;
	font-size: 1.3em;
	line-height: 1.3em;
}

label {
	text-align: right;
	font-size: 1.3em;
	margin: 3px 10px 0 0;
	font-weight: 700;
}

input[type=text],
textarea {
	font-size: 1.3em;
	border: 1px solid #ccc;
	width: 250px;
	margin: 0 0 5px;
	padding: 2px 4px;
}

input[type=button] {
	margin: 5px 0 0 135px;
	padding: 7px 10px;
	background: #35A9CB /* 71D5F2 */;
	border: 1px solid #3A565F /* 20A7C9 */;
	border-radius: 10px;
	font-weight: 700;
	color: #fff;
}

p.form {
	margin: 5px 0 0 8px;
}

label span,
.red {
	color: #f00;
	font-weight: 700;
}