/*
 * ArborSquare.com stylesheet
 * (c) Arbor Square Ltd, 2007
 * Author: Lylo Ltd
 * www.lylo.co.uk
 * ----------------------------------------
 *
 * Document colours
 *
 * #66669A : Arbor purple
 * #565656 : Arbor grey text
 * #8B8B8B : Footer text colour
 * #97CAFB : Arbor cyan
 * #F7F7F7 : Log In box background
 * #DDD    : Log In box border
 * #7A7A7A : Log In box label
 * #333    : Body colour (off-black)
 * ---------------------------------------- 
 */
 
.scrollbox { height: 450px; width: 800px; overflow: scroll; }

html, body { height: 100%; }
body { color: #333; font: normal 76%/1.6em Helvetica, Arial, Verdana, Tahoma, sans-serif; background: url(../image/hline.gif) repeat-x top left; margin: 0; padding: 0; }

#wrapper { width: 655px; margin: 0 auto; position: relative; background: url(../image/1px.gif) repeat-y top left; padding-left: 10px;   text-align: left; height: 100%; }
#wrapper div.change { background-image: url(../image/content-box.jpg); }
#wrapper div.change-short { background-image: url(../image/content-box-short.jpg); }
#wrapper div.change-compass { background-image: url(../image/content-box-compass.jpg); }

html>body #wrapper { min-height: 100%; height: auto; }  /* for IE */

#header { height: 80px; }
#header img { float: right; position: relative; top: 25px; border: none; }

#content { background-image: url(../image/contentbox.jpg); margin: 0; padding: 0 0 10px 0; }
#content-copy { padding: 1px 10px 0px 10px; }
#content-bottom { background: url(../image/content-box-bottom.jpg) no-repeat bottom right; height: 49px; }

#footer { color: #8B8B8B; font-size: 0.90em; }
#footer span.designer {   float: right;   display: none; }

.right { text-align: right; }

a:active { outline: none; }           /* remove dotted border from links */
a:focus { -moz-outline-style: none; }

#more { display: none;}
p#read-more {padding: 1em 0 0 0;}

/*
 * Log in (home page)
 * ----------------------------------------*/

form { margin: 0; padding: 0; }

#sidebar {   float: right;   width: 200px; padding-top: 1.5em;}
#sidebar a {text-align: right; display: block; }
#sidebar a img {border: 2px solid #fff; margin-bottom: 10px;}
#sidebar a:hover img {border: 2px solid #66669A;}

#home-copy {margin-right: 200px;}

#login { width: 165px; border: 1px solid #DDD; background-color: #F7F7F7; margin: 1em 0 1em auto; }
#login h4 { background-color: #66669A; font-size: 1.1em; text-align: right; margin: 0; padding: 1px 10px; color: #FFF; font-weight: normal; }
#login fieldset { margin: 0; padding: 10px; border: none; text-align: right; color: #7A7A7A; }
#login input, #login a { text-align: right; color: #7A7A7A; margin-bottom: 5px; border: 1px solid #DDD; text-decoration: none;}
#login .text { width: 140px; color: #66669A; padding: 2px 1px; font-size: 0.9em; }
#login .submit { text-align: center; font-size: 1.1em; padding: 4px; background-color: #f3dfb0;}


/*
 * Arbor insights
 * ----------------------------------------*/

#arbor-insights-heading { margin: 10px 0 7px 0; padding: 0; height: 210px; position: relative;}
a.arbor-insights { background-image: url(../image/arbor-insights.gif); width: 200px; height: 44px; display: block; text-indent: -5000px; overflow: hidden; }
a.arbor-insights:hover { background-position: -200px 0; }
blockquote { color: #555; background: url(../image/quotes.png) no-repeat top left; padding-left: 25px; padding-top: 10px; margin-right: 100px;}
p.quote-source { text-align: right; font-style: italic; color: #555;margin-right: 150px; margin-bottom: 10px;}
a.insights-home { background-image: url(../image/back-insights.gif); background-position: 2px 3px;  background-repeat: no-repeat; padding: 0 0 0 18px; position: absolute; top: 10px; left: 10px; color: white; text-decoration: none; display18 block;}
a.insights-home:hover {text-decoration: underline;}

/**
 * Case studies
 */
div#case-study { padding: 10px; }
div#case-study p, div#case-study blockquote, div#case-study li { font-size: 0.95em;}
div#case-study h2 { text-align: left; font-size: 1.2em; color: #fff; background-color: #003466; padding: 4px;}
div#case-study h3 { font-size: 1.2em; color: #565656;}
div#case-study #case-study-heading {background-color: #66669A; background-image: url(../image/arbor-insights-heading.png); height: 61px; }
div#case-study a {color:#66669A}

div.case-study-heading span.label {width: 90px; display: block; float: left; font-weight: bold; }
div.case-study-heading span.detail {margin-left: 90px; display: block;}
div.case-study-heading p {margin: 0 0 3px 0;}
div.case-study-heading {padding: 10px; margin-bottom: 20px; border-bottom: 1px solid #CCC; font-size: 1.2em;color: #565656; background-color: #ecedf2;}

/*
 * Nav 
 * ----------------------------------------*/

#nav { background-color: #66669A; height: 30px; padding: 0; margin: 10px 0 0 0; }
#nav ul { padding: 0; margin: 0; list-style: none; list-style-type: none; }
#nav ul li { float: left; color: white; /*	margin-right: 1px;*/ }
#nav ul li a { display: block; text-indent: -5000px; overflow: hidden; }

ul#subnav { font-size: 0.9em; background-color: #97CAFB; margin: 0; padding: 0; list-style-type: none; }
ul#subnav li { display: inline; margin-left: 1em; }
ul#subnav a { color: #333; text-decoration: none; }
ul#subnav a:hover, ul#subnav a.selected { color: #333; text-decoration: underline; }

a.home { background-image: url(../image/home.png); width: 80px; height: 30px; }
a.about { background-image: url(../image/about-us.png); width: 90px; height: 30px; }
a.how-we-can-help { background-image: url(../image/how-we-can-help.png); width: 140px; height: 30px; }
a.how-we-work { background-image: url(../image/how-we-work.png); width: 120px; height: 30px; }
a.our-perspective { background-image: url(../image/our-perspective.png); width: 120px; height: 30px; }
a.contact { background-image: url(../image/contact.png); width: 105px; height: 30px; }

a.home:hover, a.home-hv { background-position: -80px 0; }
a.about:hover, a.about-hv { background-position: -90px 0; }
a.how-we-can-help:hover, a.how-we-can-help-hv { background-position: -140px 0; }
a.how-we-work:hover, a.how-we-work-hv { background-position: -120px 0; }
a.our-perspective:hover, a.our-perspective-hv { background-position: -120px 0; }
a.contact:hover, a.contact-hv { background-position: -105px 0; }

/*
 * Main content
 * ----------------------------------------*/

h1 { font-family: "Franklin Gothic Book", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-size: 1.8em; line-height: 1em; color: #66669A; letter-spacing: -1px; margin: 1em auto 1.2em auto; }
h2 { font-family: "Franklin Gothic Book", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-size: 1.8em; line-height: 1em; color: #66669A; letter-spacing: -1px; margin-top: 1em; }
/*h1 { font-family: "Franklin Gothic Demi", "Franklin Gothic Book", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-size: 2.2em; line-height: 1em; font-weight: bold; width: 100%; color: #565656; margin: 0.8em auto 1em auto; letter-spacing: -1px; text-align: center; }*/
h3 { font-size: 1.2em; color: #565656;}

div.min { min-height: 450px;}
* html div.min { height: 450px; }  /* for Internet Explorer */
#content-copy h1 img {border :0; }
.first { margin-top: 1.5em; }
p { margin-top: 0.5em; font-size: 1.1em; }
#content-copy p.diagram, #content-copy p.graphic {text-align: center;}
#content-copy p.diagram img {border: 2px solid #ccc;}
#content-copy p.graphic img {border: none;}
#content-copy p.diagram a:hover, #content-copy p.graphic a:hover {background-color: transparent; }

#content-copy ul {margin:0 0 0 20px;}
#content-copy ul.more {margin:0 0 20px 20px;}
#content-copy ul li {font-size: 1.1em; margin-bottom: 5px; }
#content-copy p a, .vcard a, #content-copy li a { color: #66669A; text-indent: 0; margin: 0; padding: 2px;}
#content-copy ul#team li a.name {padding: 0;}
#content-copy p a:hover, .vcard a:hover, #content-copy ul li a:hover { color: white; background-color: #66669A; text-decoration: none; }
#content-copy p a.back { background-image: url(../image/back.gif); background-position: 0 25%;  background-repeat: no-repeat; padding-left: 20px; }
#content-copy p a.back:hover, #content-copy p a.fwd:hover { color: #66669A; background-color: transparent;}
#content-copy p a.fwd { background-image: url(../image/fwd.gif); background-position: 100% 25%; background-repeat: no-repeat; padding-right: 18px; float: right;}
#content-copy p.questions {margin-left: 20px; line-height: 1.8em; font-style: italic; font-size: 1.2em;}
#content-copy img.diagram, #content-copy img.graphic { margin-top: 10px; }
#content-copy img.button { border: 0; }

ol.nonums { list-style-type: none; }

/*
 * About
 * ----------------------------------------*/

#content-copy img.portrait {   border: 3px solid #fff;   float: left; }
#content-copy div#about-team-member {   width: 450px;   margin-left: 175px; }
#content-copy div#about-team-member span.contact-label {   width: 6em;   display: block;   float :left; }

/*
 * Case Studies
 * ----------------------------------------*/

ul.casestudies { list-style: none; padding: 0; margin: 0 0 0 20px; }
ul.casestudies li { width: 570px; margin-bottom: 20px; }
div.study { border: 1px solid #ddd; background: #fafafa url(../image/case-study-background.gif) no-repeat top left; background-position: 0 30px; }
div.study p { padding: 0 10px; }
div.study h3 { background-color: #66669A; color: white; padding: 2px 10px; }
span.download { background: url(../image/download-icon.gif) no-repeat top right;     padding-right: 16px; }
.clear { clear: both; height: 20px; }

/*
 * Team
 * ----------------------------------------*/

ul#team img {border: none;}
ul#team { list-style-type: none; padding: 0; margin: 0; }
ul#team li { float: left;   width: 110px;   margin-right: 10px; }
ul#team li a.portrait {   padding: 2px;   display: block;   height: 106px; }
ul#team li a.name {   padding-left: 4px; text-align: center; display: block }
a#haz:hover, ul#team li a:hover {   padding: 0;   border: 2px solid #66669A; }


/*
 * Contact
 * ----------------------------------------*/

#map { width: 400px; margin-left: 200px; border: 4px solid #fff ;}
.left { float: left; }
p.registered-address {   position: relative;   top: 15px;   color: #8B8B8B;   font-size: 0.9em;   margin: 0;   line-height: 1.2em;   margin-left: 10px; }
#map img {border: 4px solid #fff ;}

ul#method-steps {list-style-type: none; padding: 0; margin: 2em 0 0 50px;}
#content-copy ul#method-steps li.step1 { background: url(../image/step1.gif) top left no-repeat; display: block; height: 225px;}
#content-copy ul#method-steps li.step2 { background: url(../image/step2.gif) top left no-repeat; display: block; }
#content-copy ul#method-steps li.step3 { background: url(../image/step3.gif) top left no-repeat; display: block; }
#content-copy ul#method-steps li.step4 { background: url(../image/step4.gif) top left no-repeat; display: block; height: auto; padding-bottom: 10px;}
#content-copy ul#method-steps li { margin: 0; padding: 0; height: 190px}
#content-copy ul#method-steps li h4 {padding-bottom: 5px;}
#content-copy ul#method-steps li p, #content-copy ul#method-steps li h4 { margin: 0 0 0 100px; }
#content-copy ul#method-steps li p { font-size: 0.9em; margin-bottom: 5px;}
#content-copy ul#method-steps li ul { list-style-type: disc; margin: 0 0 10px 150px; padding: 0; font-size: 0.8em;}
#content-copy ul#method-steps li ul li { height: auto; padding: 0; margin: 0;}