/*
This will inherit the styles from global ONLY.
Much of it will be undoing global and adding the old desktop centric styles, that the design was originally based on
It will then target browsers that understand media queries from 570 onwards (it doesn't see the other media queries).

INDEX:
cst=Basic Styling/Non-Layout Bits (typography/lists/links/forms/tables/images)
cst=Global Layout - Things that appear on every page
cst=Inner Layout - Things that don't appear on every page
cst=Helper classes and modular aids for layout
cst=Individual page/section layouts and styling
*/
/*cst=Basic Styling/Non-Layout Bits (typography/lists/links/forms/tables/images)#############################################################################################################################################*/
form.generic_form ul li label {
  width: auto;
  float: left;
  color: #fff;
  background: #660099;
}
form.generic_form li input,
form.generic_form li textarea,
form.generic_form li select {
  width: auto;
  float: right;
  min-width: 296px;
  background: url(/img/bg/light_paper.jpg) repeat 0 0;
  margin-left: 10px;
}
form.generic_form li textarea {
  min-width: 294px;
}
form.generic_form li.submit input {
  width: 257px;
  color: #fff;
  background: #5c0288;
}
/*cst=Global Layout - Things that appear on every page#############################################################################################################################################*/
/*main layout styling in current source order*/
/*bg colour is for the footer*/
/*explanation of why logo loaded here below*/
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 0 0px;
  padding: 0;
  min-width: 960px;
  background: #242424 url(/img/bg/logo_screen_off.png) no-repeat -999em -999em;
}
#skiplinks ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: right;
  position: relative;
}
#skiplinks li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
}
#skiplinks a {
  border: none;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Only show skiplinks on focus */
/*hide from IE mac as this half show's \*/
#skiplinks a:active,
#skiplinks a:focus {
  position: absolute;
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  padding: 1px;
  width: auto;
  right: 0;
  background: #fff;
  color: #000 !important;
}
/*this is the faux column and appears behing the next element. as I can't add a width to this (next bt image too wide) I have put it 50% like other bg images. The physysical gif is wider than the min width so never looks odd*/
#container_all {
  /*background:#eaeade url(/img/bg/side_bar_main.gif) repeat-y 50% 0;*/
  background: url(/img/bg/light_paper.jpg) repeat 0 0;
  /*background:#fff url(/img/bg/9px.png) repeat 0 3px;*/
}
/*mainimage - very large but less than 30k*/
#container_pad1 {
  /*background:#fff url(/typo/9px.png) repeat 0 -6px;*/
  background: url(/img/bg/top_repeat.jpg) repeat-x 0 0;
  /*background:none;*/
}
/*see ie5 sheet for margin fix*/
/*bg image is different for inner to front see sheets*/
#container_pad2 {
  width: 960px;
  position: relative;
  margin: 0 auto;
  background: url(/img/bg/paper_col.jpg) repeat-y 595px 0;
  /*background:none;*/
}
/*ie5&6 min-height fix seesheet*/
/*gecko browsers (safari/ opera do some weird margin collapse issue. 1ps padd fixes http://markmail.org/message/pxg6vft6uhqkyh5c  for height reason see below*/
#header {
  position: relative;
  min-height: 397px;
  padding-bottom: 1px;
  background: url(/img/bg/paper_coltop.jpg) no-repeat 595px 0;
}
#header a#logo img {
  border: none;
  margin: 0;
  padding: 0;
}
/*the "home" part of the nav goes over flash splash. I've put the slither part inside the flash movie and alt flash image. there is a gif that contains logo and word "home" for nav thisgoes over top of slither and can be clicked for home*/
#header #logo {
  display: block;
  position: absolute;
  left: 55px;
  top: 15px;
  background: url(/img/bg/logo_screen_off.png) no-repeat left top;
  width: 300px;
  height: 90px;
  overflow: hidden;
  text-indent: -999em;
  border: none;
}
body#homepage #header #logo {
  background: url(/img/bg/logo_screen_on.png) no-repeat left top;
}
#header #logo:hover {
  background: url(/img/bg/logo_screen_on.png) no-repeat left top;
}
#header #contact_header {
  width: 190px;
  height: 50px;
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  left: 605px;
  top: 15px;
  background: url(/img/bg/contact_header.jpg) no-repeat 0 0;
  text-indent: -999em;
  border: none;
}
#header #contact_header:hover {
  cursor: default;
}
/*this does the splashes - has not content inside purely for show - appears above the bg and under the logo - safest to leave off for ie5 see sheet*/
#flashcontent {
  width: 485px;
  height: 291px;
  position: absolute;
  display: block;
}
#alt_splash {
  background: url(/img/bg/splash_alt.gif) no-repeat 0px 0;
  width: 485px;
  height: 291px;
  position: absolute;
}
/*end*/
/*works like usual text replacement - span covers the text - href on outside so it clickable*/
/*image preloads the roll*/
#main_nav {
  list-style: none;
  list-style-image: none;
  width: 590px;
  height: 29px;
  position: absolute;
  right: 0px;
  top: 76px;
  background: url(/img/bg/nav_roll.jpg) no-repeat 0 0;
  margin: 0;
  padding: 0;
  border: none;
}
/*opera needs the width in here, also IE needs the float so the width stops keeps each li following the next (if vert nav)- */
#main_nav li {
  width: 110px;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  height: 29px;
}
/*opera needs the overflow_hidden*/
#main_nav li a {
  display: block;
  height: 29px;
  width: 110px;
  border: none;
  position: relative;
  overflow: hidden;
}
/*this covers the text*/
#main_nav li a span {
  position: absolute;
  top: 0;
  left: 0;
  height: 29px;
  width: 110px;
  background-image: url(/img/bg/nav.jpg);
}
/*this changes the image. IE5&6 need a hover fix see sheets. only works with JS on but link still clickable*/
#main_nav li a span:hover,
#main_nav li.onpage a span {
  cursor: pointer;
  background-image: url(/img/bg/nav_roll.jpg);
}
/*this puts the bg image in the correct place*/
#main_nav li#home_nav,
#main_nav #gototop_nav {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
#main_nav li#who_nav a span {
  background-position: 0px 0;
}
#main_nav li#what_nav a span {
  background-position: -110px 0;
}
#main_nav li#why_nav a span {
  background-position: -220px 0;
}
#main_nav li#journal_nav a span {
  background-position: -330px 0;
}
#main_nav li#contact_nav a span {
  background-position: -440px 0;
}
/*end of nav stuff*/
/*putting a z-index here will always keep this above everything else that doesn't have one - this keeps all inks above footer which has a background image and neg margin. See loungepenguin cib sheets*/
/*neg margin to pull up over header image  - (header is 398px high  - this get pulled up to where the visual header ends (298px) then)
                min-height keeps footer down even with no content
                this will contain all content (top, inner_nav and main)
                */
#content {
  position: relative;
  z-index: 2;
  min-height: 550px;
  width: 880px;
  margin: -288px 0px 0 40px;
  padding: 0;
}
/*min height here pushes the bottom content down. see ie5&6 fixes*/
#top_content {
  min-height: 288px;
}
/* width / padding and bg different on inner and front see sheets*/
#main_content {
  float: left;
}
#side_bar {
  float: right;
  width: 320px;
  margin-right: 5px;
}
#footer {
  position: absolute;
  text-align: right;
  width: 100%;
  background: url(/img/bg/splash_bottom_new.gif) no-repeat 576px 0;
  padding: 130px 0 0 0;
  margin-top: -109px;
  padding-bottom: 36px;
}
#footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  list-style-image: none;
  margin: 0 10px 0 0;
  color: #999;
  margin-right: 55px;
}
#footer ul li {
  display: inline;
}
#footer ul li a {
  border-right: 1px solid #999;
  padding-right: 5px;
  color: #999;
}
/*end general layout*/
/*cst=Inner Layout - Things that don't appear on every page#############################################################################################################################################*/
/*this is different on front*/
#top_content {
  background: url(/img/bg/inner_headers/table_football.jpg) no-repeat 5px 5px;
  position: relative;
}
#content {
  background: url(/img/bg/header_bg.gif) no-repeat 555px 5px;
}
body#about #top_content {
  background: url(/img/bg/inner_headers/table_football.jpg) no-repeat 5px 5px;
}
body#what #top_content {
  background: url(/img/bg/inner_headers/cables.jpg) no-repeat 5px 5px;
}
body#why #top_content {
  background: url(/img/bg/inner_headers/darts.jpg) no-repeat 5px 5px;
}
body#journal #top_content {
  background: url(/img/bg/inner_headers/pencils.jpg) no-repeat 5px 5px;
}
body#contact #top_content {
  background: url(/img/bg/inner_headers/brighton.jpg) no-repeat 5px 5px;
}
/*don't use margintop here - messess firefox*/
#the_quote {
  width: 307px;
  height: 111px;
  position: absolute;
  display: block;
  top: 50px;
  background: url(/img/bg/quotes/inner_quote_1.png) no-repeat 0 0;
  text-indent: -999em;
  overflow: hidden;
}
#the_quote blockquote {
  padding: 0;
  margin: 0;
  background: none;
}
#about #the_quote {
  width: 307px;
  height: 139px;
  background: url(/img/bg/quotes/inner_quote_2.png) no-repeat 0 0;
}
#what #the_quote {
  width: 302px;
  height: 139px;
  background: url(/img/bg/quotes/inner_quote_3.png) no-repeat 0 0;
}
#why #the_quote {
  width: 258px;
  height: 139px;
  background: url(/img/bg/quotes/inner_quote_4.png) no-repeat 0 0;
}
#contact #the_quote {
  width: 278px;
  height: 139px;
  background: url(/img/bg/quotes/inner_quote_5.png) no-repeat 0 0;
}
h1 {
  /*used to have a wdth on it*/
  position: absolute;
  margin-top: -76px;
  left: 5px;
  background: #660099;
  padding: 0 15px;
  color: #fff;
  display: block;
  float: left;
  font-size: 3.6923076923076923076923076923077em;
  /*48px / 13*/
  line-height: 72px;
  letter-spacing: -2px;
  border: none;
}
/*h1 span{
                font-size:1.7em;
                background:#660099;
                padding:.1em 15px;
                color:#fff;
                display:block;
                float:left;
                font-size:48px;
                line-height:72px;
                letter-spacing: -2px;

                }

                */
/*this is different on frontpage see ie6 minheight fix*/
#main_content {
  background: url(/img/bg/main_content_repeat.jpg) repeat-y 5px 0;
  /*background:none;*/
  /*background:#fff url(/typo/9px.png) repeat 0 1px;*/
  padding: 22px 15px 18px 20px;
  width: 520px;
  min-height: 32em;
}
/*not entirely sure where the extra spacing appears around images. whitespace issues? inlinblock means we can add margins*/
#main_content img {
  /*    display:inline-block;
                margin-top:6px;
                margin-bottom:9px;*/
}
#side_bar {
  padding-bottom: 80px;
  /*padding-top:9px;*/
}
#facts {
  margin-top: 9px;
  color: #5c0488;
  padding-left: 10px;
  padding-right: 10px;
  background: url(/img/bg/quotesinnerleft.png) no-repeat 10px 0;
}
#facts p {
  padding-left: 10px;
  padding-right: 10px;
}
#facts p.thefact {
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: normal;
  letter-spacing: -1px !important;
  color: #5c0488;
  font-size: 1.8461538461538461538461538461538em;
  /*24 / 13*/
  line-height: 36px;
  padding-top: 18px;
  padding-left: 0px;
  padding-right: 0px;
  padding-left: 10px;
  background: url(/img/bg/quotesinnerright.png) no-repeat 100% bottom;
  padding-bottom: 17px;
  margin-bottom: -4px;
}
.inner_nav {
  list-style: none;
  margin: 5px 0 -13px 1px;
  padding: 0;
  list-style-image: none;
}
.inner_nav li {
  display: block;
  padding: 0;
  margin: 0;
}
.inner_nav li a {
  display: block;
  border: none;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 20px;
  padding-right: 20px;
}
.inner_nav li a:hover,
.inner_nav li.onpage a {
  background: #660099;
  color: #fff;
  text-decoration: none;
}
.noborder img,
img.noborder,
.noborder,
a.noborder {
  border: none;
  padding: 0;
}
.journalmeta img {
  display: block;
}
#main_content .last {
  background: none;
}
/*lineheight so cst shows bottom border*/
.journal_item h3 a:link,
.journal_item h3 a:visited {
  color: #660099;
  text-decoration: none;
  border-bottom: 1px dotted #a080b2;
  font-weight: normal;
}
.journal_item h3 a:hover,
.journal_item h3 a:active {
  text-decoration: underline;
  color: #ba0000;
  font-weight: normal;
}
#journal_sidebar h2 {
  padding-top: 35px;
  padding-left: 20px;
  padding-right: 20px;
}
#journal_header {
  border-bottom: 1px solid #b9ac96;
  padding-bottom: 17px;
  margin-bottom: 9px;
}
#year .inner_nav li {
  float: left;
  padding: 0;
  margin: 0;
}
/*handmade HTML*/
.flright {
  float: right;
  margin-left: 20px;
}
.flleft {
  float: left;
  margin-right: 20px;
}
.text_align_right {
  text-align: right;
}
/*
                .smallest{
                font-size:.8em;
                }
                .smaller{
                font-size:.9em;
                }

                .bigger{
                font-size:1.3em;
                line-height:1.3em;
                }

                .biggest{
                font-size:1.6em;
                line-height:1.5em;
                }
                */
/*cst=Helper classes and modular aids for layout#############################################################################################################################################*/
/*cst=Individual page/section layouts and styling###################################################################################################################################*/
/*frontpage*/
/*different to inner*/
body#homepage #container_pad2 {
  background: url(/img/bg/paper_col.jpg) repeat-y 595px 0;
  /*background:none;*/
}
body#homepage #main_content {
  width: 555px;
  padding: 0 0 18px 0;
}
/*given tiny font-size to avoid having anything unclickable underneath*/
body#homepage h1 {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
body#homepage #top_content {
  background: none;
}
body#homepage #why {
  float: left;
  width: 545px;
}
body#homepage #why h2 {
  border: none;
  width: 201px;
  height: 63px;
  position: relative;
  display: block;
  font-size: 1em;
  margin: 0;
  padding: 0;
  margin-left: 5px;
  margin-top: 24px;
  background: url(/img/bg/whycst.png) no-repeat 0 0;
  overflow: hidden;
  text-indent: -999em;
}
body#homepage #why ul {
  width: 473px;
  height: 138px;
  display: block;
  font-size: 1em;
  margin: 2px 0 0 5px;
  padding: 0;
  position: relative;
  text-indent: -999em;
  background: url(/img/bg/why_text_new2.png) no-repeat 0 0;
  overflow: hidden;
}
body#homepage #content {
  padding-left: 0;
  padding-right: 0;
  background: none;
}
body#homepage #client_area {
  float: right;
  width: 315px;
  color: #fff;
  margin-left: 10px;
}
body#homepage #client_area blockquote {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 72px 0 0 0;
  padding: 0;
  width: 272px;
}
body#homepage #client_area blockquote#front {
  margin-bottom: -4px;
  height: 90px;
  width: 209px;
  text-indent: -999em;
  overflow: hidden;
  background: url(/img/bg/quotes/khyati.png) no-repeat 0 0;
}
body#homepage #client_area #person {
  color: #faedd8;
  padding: 0;
  margin-left: 10px;
}
body#homepage #client_area img {
  float: left;
  margin-right: 10px;
  margin-top: -8px;
}
body#homepage #client_area img.first {
  margin-left: 10px;
  display: inline;
}
body#homepage #client_area #view_full {
  float: left;
  width: 65px;
  margin-top: -8px;
}
body#homepage #client_area #view_full a {
  color: #faedd8;
}
body#homepage #main_content {
  background: none;
}
body#homepage #main_content h2 {
  background: #660099;
  float: left;
  color: #fef3df;
  margin: 18px 0 4px 5px;
  padding: 9px 20px 9px 20px;
  font-size: 48px;
  line-height: 54px;
  border: none;
}
/*putting image here to save a few kb on the bg image above - I can make this gif and the aboce jpg - inner doesnt need as covered by big image*/
body#homepage #side_bar {
  background: url(/img/bg/bottomofrightcoltop.gif) no-repeat 0 0px;
  margin-top: -28px;
  padding-top: 72px;
  border-top: none;
}
body#homepage #side_bar p {
  padding-left: 20px;
  padding-right: 20px;
}
body#homepage #side_bar h2 {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 24px;
  padding-top: 4px;
  padding-bottom: 12px;
  letter-spacing: -0.8px;
  line-height: 36px;
  border: none;
}
body#homepage #side_bar img {
  margin-left: -10px;
  padding: 0;
  max-width: none;
}
body#homepage .journal_item {
  padding-left: 20px;
  padding-right: 20px;
}
/*end front*/
#address {
  margin: 22px 10px 0 20px;
}
#copyright {
  font-size: 0.76923076923076923076923076923077em;
  /*10px/13*/
  color: #666;
  clear: both;
  padding-top: 18px;
  border-top: 1px solid #666;
}
#cli_cont {
  padding-top: 18px;
}
#cli_cont img {
  margin: -4px 10px 22px 0;
  float: left;
  line-height: 18px;
}
#cli_cont a {
  border: none;
}
#cli_cont img.thirdimg {
  margin-right: 0px;
}
.topclients {
  color: #898072;
  float: right;
  width: 200px;
  margin-left: 20px;
  font-style: italic;
}
#strands {
  width: 320px;
  float: left;
}
/*
                #strands div{
                width:156px;
                float:left;
                margin-right:20px;
                }
                */
#strands h2,
#otherbits h2 {
  font-size: 1.8461538461538461538461538461538em;
  /*24 / 13*/
  padding-top: 9px;
  padding-bottom: 9px;
  letter-spacing: -0.8px;
  line-height: 36px;
}
#strands div#web {
  margin-right: 0px;
}
#otherbits {
  float: right;
  width: 184px;
}
#otherbits h2 {
  font-style: italic;
}
.altasidecolour {
  color: #6c4082;
}
#main_content #logoorigin {
  margin: 4px 15px 0 0;
  float: left;
}
.postintolisted {
  background: url(/img/bg/dotted_border.gif) repeat-x 0 bottom;
  padding-bottom: 18px;
}
.highlight {
  padding: 16px 8px;
  background: #f4eac4;
  border: 1px solid #f2df9b;
  margin-bottom: 18px;
}
#fullquotes {
  padding-top: 18px;
}