/************************************************************************

	Site:		thegreenshed.co.uk
	Author:		richard hawkins

	Order:
	==============

	1 - Universal
	2 - Structure/Layout
	3 - Main Navigation
	4 - Sub Navigation
	5 - Colour Coding
	6 - Page Elements
	7 - Forms

************************************************************************/


/***********************************************************************
	1 - UNIVERSAL STYLES
************************************************************************/

html, body, form, fieldset {margin:0;padding:0;}
html {font-size:100.01%;}
body {font: 0.9em/1.4em Helvetica, Arial, sans-serif;background:#33A02C url(../images/bg3.jpg) fixed no-repeat left 40%;}
form label {cursor:pointer;}
fieldset {border:none;}
input, select, textarea {font-size:100%;}
h1, h2, h3, h4, h5, h6 {font-family:Helvetica, Arial, sans-serif;letter-spacing:-0.03em}
h1 {font-size:2.5em;font-weight:normal;margin:0 0 .9em -2px;padding-top:13px;}
h2 {font-size:1.7em;font-weight:normal;margin:1.5em 0 .6em -2px;}
h2 a {text-decoration:none;color:#000;}
h3 {font-size:1.4em;font-weight:normal;}
img {border:0;}
img, div {behavior: url(iepngfix.htc) }
li {margin:0.2em 0 0.1em;}
p {margin:0 0 1em;}
input, textarea {padding:5px;margin-right:10px;background-color:#FFF;border:2px solid #999;}
input:focus, textarea:focus {background-color:#FFFFFF;border-color:#CC0000;background-color:#FFF;}
label {font-family: Arial, Helvetica, sans-serif; font-size:1.3em;}
textarea {font-family: Arial, Helvetica, sans-serif;}
acronym {border-bottom:1px dashed black;cursor:help;}
abbr {border-bottom:1px dashed black;cursor:help;}
blockquote {width:80%;font-size:1.3em;line-height:140%;margin:1.5em auto 1.5em auto;padding:12px;border:12px solid #EEE; font-family: Arial, Helvetica, sans-serif;text-align:center;}
ul {margin:0 0 1em 1em;}

cite {}
address {}
dfn {border-bottom:1px dashed #999;cursor:help;/*use for pop-up definitions???*/}
a {}
a:link {}
a:hover {text-decoration:none;color:#FF9900;}
a:visited {}

/***********************************************************************
	2 - STRUCTURE AND LAYOUT
************************************************************************/

.wrapper {margin:40px}
.header {width:260px;margin-left:780px;position:fixed;padding:30px 0;float:left;background:url(../images/navtop.png) no-repeat right top;}
.logo {margin-left:7px;}
div.header2 {height:375px;width:260px;background:#FFF;}
.header3 {height:30px;clear:both;background:url(../images/navbot.png) no-repeat left bottom}
.footer {width:700px;float:left;clear:both;margin:30px 0 0 20px;text-align:center;font-size:0.8em;color:#FFF;}
.content {padding:0 40px 0 40px;background-color:#FFF;margin:0}
.bottom {margin-top:-1.2em;}

div.rounded {float:left;width:700px;}
div.rounded div.top {background:url(../images/tl.png) no-repeat bottom left;padding:0px;width:100%;}
div.rounded div.top div.right {background:url(../images/tr.png) no-repeat bottom right;height:30px;margin-left:30px;}
div.rounded div.bottom {background:url(../images/bl.png) no-repeat top left;clear:both;padding:0px;width:100%;}
div.rounded div.bottom div.right {background:url(../images/br.png) no-repeat top right;height:30px;margin-left:30px;}

/***********************************************************************
	3 - MAIN NAVIGATION
************************************************************************/

ul.nav {margin:20px 20px 20px 25px;padding:0;font-size:21px;}
ul.nav li {float:right;list-style-type:none;line-height:1.1em;}
ul.nav li a {width:211px;color:#000;text-align:right;text-decoration:none;display:block;padding:5px 7px;}
ul.nav li a:link {}
ul.nav li a:hover {background-color:#000;color:#FFF;}
ul.nav li a:visited {}

a#index:hover {background-color:#096BCE;}
a#about:hover {background-color:#FF9900;}
a#services:hover {background-color:#CC0000;}
a#prices:hover {background-color:#00CCCC;}
a#portfolio:hover {background-color:#7E3E16;}
a#links:hover {background-color:#8212FE;}
a#contact:hover {background-color:#666666;}


/***********************************************************************
	4 - SUB NAVIGATION
************************************************************************/


/***********************************************************************
	5 - COLOUR CODING
************************************************************************/

.nav a:hover {}

body.index ul.nav a#index, 
body.about ul.nav a#about, 
body.services ul.nav a#services,  
body.prices ul.nav a#prices, 
body.portfolio ul.nav a#portfolio,  
body.links ul.nav a#links, 
body.contact ul.nav a#contact 
{}

body.index a#index, body.index div.footer a#index {background-color:#096BCE;color:#FFF;} 
body.about a#about, body.about div.footer a#about {background-color:#FF9900;color:#FFF;} 
body.services a#services, body.services div.footer a#services {background-color:#CC0000;color:#FFF;} 
body.prices a#prices, body.prices div.footer a#prices {background-color:#00CCCC;color:#FFF;} 
body.portfolio a#portfolio, body.portfolio div.footer a#portfolio {background-color:#7E3E16;color:#FFF;} 
body.links a#links, body.links div.footer a#links {background-color:#8212FE;color:#FFF;}
body.contact a#contact, body.contact div.footer a#contact {background-color:#666666;color:#FFF;}

body.webdesign a#services, 
body.ecommerce a#services, 
body.marketing a#services, 
body.ppc a#services, 
body.seo a#services, 
body.usability a#services, 
body.accessibility a#services, 
body.advertising a#services, 
body.consultancy a#services 
{background-color:#FF7D7D;color:#FFF;}

body.webdesign a#webdesign, 
body.ecommerce a#ecommerce, 
body.marketing a#marketing, 
body.ppc a#ppc, 
body.seo a#seo, 
body.usability a#usability, 
body.accessibility a#accessibility, 
body.advertising a#advertising, 
body.consultancy a#consultancy 
{border:2px solid #FF9900;color:#000;text-decoration:none;}

/***********************************************************************
	6 - PAGE ELEMENTS
************************************************************************/

.tag {font: 2.5em/1.4em Helvetica, Arial, sans-serif;margin:0 0 20px;letter-spacing:-0.05em;}
p span {padding:4px 5px 3px;background:#ffff33;font-weight:bold;}
span.style1 {color:#FFF;}

/***********************************************************************
	7 - FORMS
************************************************************************/


/***********************************************************************
	8 - ICONS
************************************************************************/

.pdf {padding-right:18px;background:transparent url(icon_pdf.gif) no-repeat center right;}
.zip {}
.newwindow {}
.mp3 {}

/***********************************************************************
	9 - MISC
************************************************************************/

ul.services li {line-height:150%;}
ul.servicessub li {line-height:135%;}
ul.services li li, ul.servicessub li li {list-style-type:none;margin:0;padding:0 0 0 15px;}
ul.servicessub a {padding:2px;text-decoration:none;}
.serviceimage {width:96%;height:160px;margin:0 1%;padding:1%;background-color:#FFF;}
.portfolio2 {width:100%;margin:1px;padding:16px;float:left;}
div.portfolio2 img {margin-bottom:0px;}
div.portfolio2 a img {border:12px solid #EEE;}
div.portfolio2 a:hover img {border-color:#CCC;}
.portfolio2 h2 {margin:8px 0 0 0;font-size:24px;}
.portfolio2 p {font-size:13px;margin:8px 0 8px 0;border-bottom:0px solid #EEE;}
.linkslist {}
.linkslist li {list-style-type:none;float:left;}
.linkslist li a {font-size:36px;text-decoration:none;line-height:1.8em;margin:18px;padding:5px;background-color:#216DAB;color:#FFFFFF;}
.linkslist li a:link {}
.linkslist li a:hover {background-color:#FF9900;}
li.colour1 a:hover {}
li.colour2 a:hover {background-color:#FF0000;}
li.colour3 a:hover {background-color:#33FF33;}
li.colour4 a:hover {background-color:#FF00FF;}
li.colour5 a:hover {background-color:#CC00FF;}
li.colour6 a:hover {background-color:#33FFFF;}
li.colour7 a:hover {background-color:#FFFF00;}
li.colour8 a:hover {background-color:#66CCFF;}
.bottomlinks {clear:both;margin-bottom:85px;}
.bottomcontact {margin-bottom:420px;}
div.footer p {color:#FFF;margin-bottom:10em;}
div.footer ul {margin:0 auto;text-align:center;}
div.footer ul li {list-style-type:none;display:inline;}
div.footer ul li a {font-size:1.5em;line-height:2.2em;text-decoration:none;color:#CCFFCC;margin:3px;padding:5px 7px;background-image:none;}
div.footer ul li a:hover {background-color:#000;color:#FFF;}
.contactform {margin-bottom:30px;}
.free {font-size:1.2em;font-weight:bold;color:#FF0000;}
.button {background-color:#FF9900;padding:5px;font-weight:bold;font-size:1.2em;color:#FFF;border:0;cursor:pointer;}
.button:hover {color:#000;}
body.portfolio h1 {margin-bottom:.5em;}