/*
--------------------------------------------------------------------------
URL: http://www.fortetrinity.co.uk/
Created by 

Design / Intro: Rik Hopkinson
Code / Flash: Vince Lee 
CSS / XHTML: Paul Ashcroft
Getting it to actually work: Vince Lee
The guy that pulled it all together and finished it all off: Rik Hopkinson
General Monkey Work: Katie Allen, Andy Dyas

email: info@fortetrinity.co.uk
--------------------------------------------------------------------------

CONTENTS

1: SITE MASTER SETUP

2: LAYOUT
	2.1 main form
	2.2 container
	2.3 header
	2.4 content
	2.5 main content
	2.6 page banner
	2.7 left column
	2.8 right column
	2.9 footer
	
3: GLOBAL ELEMENTS
	3.1 main navigation
	3.2 accessibility
	3.3 SIFR
	3.4 image replacement on titles
	3.5 footer links
	3.6 cta buttons
	3.7 solution buttons
	
4: PAGE/AREA SPECIFIC
	
5: USEFUL CLASSES

/* -----------------------------------------------
1. SITE MASTER SETUP
----------------------------------------------- */
html, body {margin:0; padding:0; background:#2d302c url(../images/backgrounds/top.gif) repeat-x; color:#adadad; font-family:Arial, Helvetica, sans-serif; font-size:14px; height:100%; text-align:center;}
p {margin:0; padding:0.6em 0 0.6em 0; line-height:180%; font-size:12px;}
img	{border:0; background:none}

/* forms */
form {margin:0; padding:0}
select, input, textarea {margin:0; padding:0;}
address {font-style:normal}
fieldset {border:0; padding:0; margin:0}

/* lists */
dl, dt, dd {margin:0; padding:0;}
ul, ol {margin:0; padding:0; list-style:none}

/* header tags */
h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-family:Helvetica, Arial, sans-serif;}
h1 {color:#ded049; font-size:30px; letter-spacing:-1px; margin:30px 0 0 36px}
h2 {color:#fae6bf; border-bottom:1px dotted #fff; font-size:22px; padding:10px 0 15px 0; margin:0 0 10px 0; font-weight:normal}
h3 {color:#fae6bf; border-bottom:1px dotted #fff; font-size:22px; padding:10px 0 15px 0; margin:0 0 10px 0; font-weight:normal}
h4 {color:#fff; font-size:16px; padding:10px 0 5px 0; margin:0 0 10px 0;}
h5 {font-size:11px; font-family:Arial, Helvetica, sans-serif; margin:0 0 10px 7px; font-weight:normal}
h6 {color:#dc2423; border-bottom:1px dotted #fff; font-size:28px; padding:4px 0 13px 0; margin:0 0 10px 0; font-weight:bold}

/* links */
a {color:#ded049; text-decoration:underline;}
a:hover {color:#eb352a;}

/* -----------------------------------------------
2. LAYOUT
----------------------------------------------- */

/* 2.1 - main form */
div#form-holder {width:370px;}
div#form-holder legend {margin:0; border:0; padding:0; font-size:18px; color:#ffcc00; font-weight:bold}
div#form-holder fieldset {margin-bottom:20px; border:none; padding:0;}
div#form-holder fieldset.personalDetails {margin-bottom:2px; border:none; padding:0;}
div#form-holder fieldset.submit {border:none; padding:0 20px 0 0; text-align:right; clear:both;}
div#form-holder label {width:140px; float:left; text-align:right; display:block; cursor:pointer; padding:7px 10px 0 0; }
div#form-holder input.text, div#form-holder textarea, div#form-holder select {width:190px; margin:4px 15px 5px 0; padding:3px; font:12px/18px Arial, Verdana, Times, serif; color:#444;}
div#form-holder ol {margin:20px 0 0 0; padding:0}
div#form-holder ol li {list-style:none; padding:5px 0 5px 0; margin:0;}
div#form-holder ol li.last {border:0 none}
div#form-holder ol li input {margin:0 15px 0 0}
div#form-holder ol li.chk label {margin:0 0 0 7px; float:none; padding:0; display:inline}
div#form-holder ol li.chk input {margin:0 0 0 140px; border:0 none}

/* 2.2 - container */
div#site-container {margin:0 auto; text-align:left; width:990px;}

/* 2.3 - header */
div#header {height:281px; background:#b54756 url(../../images/backgrounds/header.gif) repeat-x; text-align:center}
div#header-inner {margin:0 auto; text-align:left; width:990px;}
div#branding {height:237px; color:#f3adb9}
div#navigation {height:43px; background:#000607;}

/* 2.4 - Featured Sites */
div#featured-sites {background:url(../../images/backgrounds/featured-sites.gif) repeat-x; text-align:center}
div#featured-sites-inner {margin:0 auto; text-align:left; width:1002px; height:45px;}
div#featured-sites-inner h2 a {color:#fff; text-decoration:none; font-size:20px; padding:0 0 0 36px}
div#featured-sites-inner h2 a:hover {color:#2d302c}
div#featured-sites-inner h2 { background: url(../../images/featuredsitesarrow.gif) 245px 0px no-repeat; border:none; } 
div#featured-sites-inner-content {margin:0 auto; text-align:left; height:331px; width:990px;}

/* 2.5 - main content */
div#main-content {background:#2d302c url(../../images/backgrounds/main-content.gif) repeat-x; text-align:center; float:left; width:100%; padding-bottom:120px; font-size:12px}
div#main-content-inner {margin:0 auto; text-align:left; width:990px; color:#fff;}

/* 2.6 - page banner */
div#page-banner {}

/* 2.7 - left column */
div.left-column {width:509px; float:left; padding:15px 75px 0 36px}
div.left-column ul, ol {padding:5px 15px 15px 0px;}
div.left-column ul li, ol li {margin:6px 0; padding:0px 4px 0 30px; color:#fae6bf; font-family:Verdana, Arial, Helvetica, sans-serif; background:url(../../images/other/bulletlogo.gif) no-repeat left top; font-size:14px; line-height:180%;}
div.left-column p { font-size:14px;}
#no-bullet-list ul li {padding:0px; list-style:none!important}
div.left-full {width:900px; float:left; padding:15px 75px 0 36px}
div.left-full p {font-size:14px;}

/* 2.8 - right column */
div.right-column {width:342px; float:left; padding:15px 0 0 0}
div.right-column address {line-height:180%;}
div.right-column ul {padding:5px 15px 15px 0px;}
div.right-column ul li {padding:4px 0; color:#fae6bf; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px}
div.right-column p { font-size:14px;}

/* 2.9 - full width column */
div.full-width-column {padding:15px 75px 0 76px;} 
div.full-width-column ul li {padding:18px 0 4px 0; color:#fae6bf; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px}

/* 2.10 - footer */
div#footer {background:#2d302c; border-top:1px solid #a69e47; clear:both; color:#b0b0b0; padding:36px 0; font-size:10px;}
div#footer-inner {margin:0 auto; text-align:left; width:952px; padding: 0 0 0 0px;}


/* -----------------------------------------------
3. GLOBAL ELEMENTS
----------------------------------------------- */

/* 3.1 - main navigation */
body.home-page #main-nav li#nav-home a {background:url("../../images/buttons/home.gif") top left no-repeat; background-position:50% -43px;}
body.profile-page #main-nav li#nav-profile a {background:url("../../images/buttons/profile.gif") top left no-repeat; background-position:50% -43px;}
body.portfolio-page #main-nav li#nav-portfolio a {background:url("../../images/buttons/portfolio.gif") top left no-repeat; background-position:50% -43px;}
body.web-design-page #main-nav li#nav-web-design a {background:url("../../images/buttons/web-design.gif") top left no-repeat; background-position:50% -43px;}
body.search-engine-page #main-nav li#nav-search-engine a {background:url("../../images/buttons/search-engine.gif") top left no-repeat; background-position:50% -43px;}
body.e-com-page #main-nav li#nav-e-com a {background:url("../../images/buttons/ecom.gif") top left no-repeat; background-position:50% -43px;}
body.solutions-page #main-nav li#nav-solutions a {background:url("../../images/buttons/solutions.gif") top left no-repeat; background-position:50% -43px;}
body.contact-page #main-nav li#nav-contact a {background:url("../../images/buttons/contact.gif") top left no-repeat; background-position:50% -43px;}

ul#main-nav {height:43px; list-style:none; display:inline;}
ul#main-nav li {float:left; list-style:none; display:inline; padding:0 0 0 40px}
ul#main_nav a {height:43px; float:left; overflow:hidden;}
ul#main-nav li a:hover {background-position:50% -43px; border-bottom:none}
ul#main-nav li a.currentSection, ul#main-nav li a.currentSection:hover {background-position:50% -43px;}

#nav-intro {width:33px; text-indent:-3000px}
#nav-intro a {width:33px; height:43px; background:url(../../images/buttons/intro.gif) top left no-repeat; display:block}
#nav-home {width:39px; text-indent:-3000px}
#nav-home a {width:39px; height:43px; background:url(../../images/buttons/home.gif) top left no-repeat; display:block}
#nav-profile {width:44px; text-indent:-3000px}	
#nav-profile a {width:44px; height:43px; background:url(../../images/buttons/profile.gif) top left no-repeat; display:block}
#nav-portfolio {width:59px; text-indent:-3000px}
#nav-portfolio a {width:59px; height:43px; background:url(../../images/buttons/portfolio.gif) top left no-repeat; display:block}
#nav-web-design {width:79px; text-indent:-3000px}
#nav-web-design a {width:79px; height:43px; background:url(../../images/buttons/web-design.gif) top left no-repeat; display:block}
#nav-search-engine {width:94px; text-indent:-3000px}
#nav-search-engine a {width:94px; height:43px; background:url(../../images/buttons/search-engine.gif) top left no-repeat; display:block}
#nav-e-com {width:42px; text-indent:-3000px}
#nav-e-com a {width:42px; height:43px; background:url(../../images/buttons/ecom.gif) top left no-repeat; display:block}
#nav-solutions {width:64px; text-indent:-3000px}
#nav-solutions a {width:64px; height:43px; background:url(../../images/buttons/solutions.gif) top left no-repeat; display:block}
#nav-contact {width:52px; text-indent:-3000px}
#nav-contact a {width:52px; height:43px; background:url(../../images/buttons/contact.gif) top left no-repeat; display:block}

/* 3.2 - secondary navigation */
#secondary-nav {margin: 0;	padding:0 0  0;}
#secondary-nav li {display:block; margin:0; padding:4px 4px 4px 0; background:#2e302d; color:#888;}
#secondary-nav li a {text-decoration:none}
#secondary-nav li a:hover {color:#fff;}

/* 3.2 - accessibility */
ul#skiplinks {display:none}
ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited {position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden} 
ul#skiplinks a:active, ul#skiplinks a:focus {position:static; width:auto; height:auto}

/* 3.3 - SIFR */
.sIFR-flash {visibility: visible !important; margin: 0; padding: 0}
.sIFR-replaced {visibility: visible !important}
.sIFR-alternate {position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden}
.sIFR-active h1, .sIFR-active h2, .sIFR-active h3 {visibility: hidden; font-family: Arial; line-height: 1em; font-weight: normal; color: #fff}
.sIFR-active h1 {padding: 0; margin: 0; font-size: 36px}
.sIFR-active h2 {font-size: 30px; padding: 0; margin: 0 0 0 0}
.sIFR-active h3 {font-size: 24px; padding: 0; margin: 0 0 0 0}

/* 3.4 - image replacement on titles */
h1.name-ttl {background:url(../../images/other/logo.gif) no-repeat; width:238px; height:59px; text-indent:-3000px;}
h2.name-ttl {background:url(../../images/other/logo.gif) no-repeat; width:238px; height:59px; text-indent:-3000px;}
h3.name-ttl {background:url(../../images/other/logo.gif) no-repeat; width:238px; height:59px; text-indent:-3000px;}
h4.name-ttl {background:url(../../images/other/logo.gif) no-repeat; width:238px; height:59px; text-indent:-3000px;}
h5.name-ttl {background:url(../../images/other/logo.gif) no-repeat; width:238px; height:59px; text-indent:-3000px;}

/* 3.5 - footer links */
div#footer ul li {display:inline; border-right:1px solid #52555a; padding:0 7px}
div#footer ul li.first {border:0 none; margin:0 20px 0 0; padding:0}
div#footer ul li.last {border:0 none}


/* 3.6 - cta buttons */
a.btn-email {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/email.jpg") top left; text-indent:-3000px}
a.btn-email:hover {background-position:50% -21px;}
a.btn-seo {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/seo.jpg") top left; text-indent:-3000px}
a.btn-seo:hover {background-position:50% -21px;}
a.btn-virtual {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/virtual.jpg") top left; text-indent:-3000px}
a.btn-virtual:hover {background-position:50% -21px;}
a.btn-translations {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/translations.jpg") top left; text-indent:-3000px}
a.btn-translations:hover {background-position:50% -21px;}
a.btn-video {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/video.jpg") top left; text-indent:-3000px}
a.btn-video:hover {background-position:50% -21px;}
a.btn-branding {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/branding.jpg") top left; text-indent:-3000px}
a.btn-branding:hover {background-position:50% -21px;}
a.btn-ecom {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/ecom.jpg") top left; text-indent:-3000px}
a.btn-ecom:hover {background-position:50% -21px;}

a.btn-pay {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/pay.jpg") top left; text-indent:-3000px}
a.btn-pay:hover {background-position:50% -21px;}
a.btn-select {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/select.jpg") top left; text-indent:-3000px}
a.btn-select:hover {background-position:50% -21px;}

a.btn-offices {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/offices.jpg") top left; text-indent:-3000px}
a.btn-offices:hover {background-position:50% -21px;}
a.btn-compliance {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/compliance.jpg") top left; text-indent:-3000px}
a.btn-compliance:hover {background-position:50% -21px;}

a.btn-clientvideo {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/mini/buttons/clientvideo.jpg") top left; text-indent:-3000px}
a.btn-clientvideo:hover {background-position:50% -21px;}


/* 3.7 - solution buttons */
a.btn-domain {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/buttons/solution/domain.jpg") top left; text-indent:-3000px}
a.btn-domain:hover {background-position:50% -21px;}
a.btn-hosting {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/buttons/solution/hosting.jpg") top left; text-indent:-3000px}
a.btn-hosting:hover {background-position:50% -21px;}
a.btn-project {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/buttons/solution/project.jpg") top left; text-indent:-3000px}
a.btn-project:hover {background-position:50% -21px;}
a.btn-database {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/buttons/solution/database.jpg") top left; text-indent:-3000px}
a.btn-database:hover {background-position:50% -21px;}
a.btn-server {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/buttons/solution/server.jpg") top left; text-indent:-3000px}
a.btn-server:hover {background-position:50% -21px;}
a.btn-search {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/buttons/solution/search.jpg") top left; text-indent:-3000px}
a.btn-search:hover {background-position:50% -21px;}
a.btn-support {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/buttons/solution/support.jpg") top left; text-indent:-3000px}
a.btn-support:hover {background-position:50% -21px;}
a.btn-email {display:block; width:342px; height:21px; text-decoration:none; background:url("../../images/buttons/solution/email.jpg") top left; text-indent:-3000px}
a.btn-email:hover {background-position:50% -21px;}



/* -----------------------------------------------
4. PAGE/AREA SPECIFIC
----------------------------------------------- */

/* 4.1 - Banners */
div.home-banner {height:520px; background:url(../../images/banners/home.jpg) no-repeat;}

/* 4.2 - Portfolio */
ul.gallery {width:340px; padding:10px 0 0 4px; margin: 0}

ul.gallery li {padding:0 9px 4px 0; list-style:none; display:inline; float:left; margin:0 10px 10px 0; }
ul.gallery li a {display:block; border:3px solid white;}
ul.gallery li a:hover {border:3px solid #ded049; background:none;}
ul.gallery li a img { margin-bottom: -3px; }

/* old shit that didn't work
.right-column .gallery li {float:left; margin:0 4px 15px 0;}
.right-column .gallery li.portfolio-last {float:left; margin:0;}
.right-column .gallery li img { margin-bottom: -5px; }
.right-column .gallery li a {display:block; border:#fff 3px solid; background:#000; margin:0 7px 0 0;}
.right-column .gallery li a:hover {border:#ded049 3px solid;} */

/* 4.3 - Search Engine Listings */
dl#search-engine-listings {margin:20px 0}
dl#search-engine-listings dt.organisation-title {float:left; width:210px; border-bottom:1px solid #555; padding:3px 0; font:14px Helvetica, Arial, sans-serif;}
dl#search-engine-listings dd.search-term {float:left; width:220px; border-bottom:1px solid #555; padding:3px 0; font:14px Helvetica, Arial, sans-serif;}
dl#search-engine-listings dd.position {float:left; width:69px; border-bottom:1px solid #555; padding:3px 0; font:14px Helvetica, Arial, sans-serif;}

dl#search-engine-listings dt {float:left; width:210px; border-bottom:1px solid #555; padding:3px 0}
dl#search-engine-listings dd {float:left; width:220px; border-bottom:1px solid #555; padding:3px 0}
dl#search-engine-listings dd.search-position {float:left; width:69px; border-bottom:1px solid #555; padding:3px 0; color:#eb352a;}

div#database-content {padding-bottom:50px}
div#maintenance-content {padding-bottom:50px}

/* 4.4 - Directions */
div#map { border: 4px solid #ded049; padding: 5px 5px 3px 5px; }
div#content { margin-top: 20px }

/* 4.5 - Top Award Banner */

div.topright { position: absolute; right: 0; top: 0; display: block; height: 147px; width: 150px; background: url(../../images/backgrounds/cornerbanner-old.gif) no-repeat; text-indent: -9999em }

/* div.topright { } 
div.topright a { position: absolute; right: 0; top: 0; display: block; height: 147px; width: 150px; background: url(../../images/backgrounds/cornerbanner2.gif) no-repeat; text-indent: -999em; text-decoration: none; } 
div.topright a:hover { background-position:50% 100% }

div.topright-lower { float:right; display: block; height: 145px; width: 150px; background: url(../../images/backgrounds/cornerbanner4.gif) no-repeat; text-indent: -9999em; text-decoration: none; }

/* 4.6 - Quotations */
/*blockquote.testimonial { padding: 20px 0px 10px 0px; font-size: 1.6em; width:100%; margin:0 0px;}
blockquote.testimonial p { padding: 0px 25px 0px 0px; font-size: 0.9em; background: url(../../images/backgrounds/bottom-quote.png) 100% 100% no-repeat; color:#cbbf50; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:lighter;}
blockquote.testimonial p span { background: url(../../images/backgrounds/top-quote.png) 0% 0% no-repeat; padding-left:30px; display:block;}
cite { text-align:right; font-size: 0.9em; clear:both; margin-bottom:20px; display:block; padding-right:25px;}
cite a { color:#fae6bf;  text-decoration:none;}  
cite a:hover { color:#cbbf50;} 
cite span { color:#b8342b; font-weight:bold;}*/

/* -----------------------------------------------
5. USEFUL CLASSES
----------------------------------------------- */

.clr { overflow: hidden; clear: both; height: 1px; margin-top: -1px }
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.la { text-align: left }
.ra { text-align: right }
.ca { text-align: center }
.fl { float: left }
.fr { float: right }
.vt { vertical-align: top }
.vm { vertical-align: middle }
.vb { vertical-align: bottom }
.width { width:520px }
.sidebottom { padding-bottom:50px }
.sidetop { padding-top:50px }
.yellow { color:#ded049 }
a.top {color:#ded049; text-decoration:none; float:right; font-size:10px;}
a.top:hover {color:#eb352a;}
.highlight {font-weight:bold; color:#ded049;}

blockquote.testimonial2 { padding: 20px 0px 10px 30px; font-size: 18px; margin:0 0 0 30px; color:#cbbf50; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; text-align:right; background: url(../../images/backgrounds/large-quote.gif) 0% 0% no-repeat;}
cite { text-align:right; font-size: 11px; clear:both; margin-bottom:20px; display:block; padding-right:0px; font-style:normal; }
cite a { color:#fae6bf;  text-decoration:none; display:block; padding-top:5px;}  
cite a:hover { color:#cbbf50;} 
cite span { color:#b8342b; font-weight:bold; }