/* -------------------------------------------
project:	The Independent / London
date:		2006/12/14
------------------------------------------- */

/* RESET
------------------------------------------- */
* {
	margin: 0;
	padding: 0;
	color: #8b898a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5em;
	}
a, span {font-size: 1em;}
span {color: inherit;}

/* Layout
------------------------------------------- */
html {background: #fff;  min-height: 100%; margin-bottom: 1px;}
  body {background: #fff url(../images/back.jpg) center top repeat-y;}
  #root {width: 793px; margin: 0 auto; background: transparent url(../images/top.jpg) center top no-repeat;}
    #header {position: relative; height: 120px;}
      a#logo {display: block; position: absolute; top: 0; left: 0; overflow: hidden; width: 360px; height: 45px; text-indent: -500px;}
    #content {width: 740px; margin: 0 auto; padding-bottom: 10px;}
    #footer {height: 50px; background: #fff url(../images/footer.jpg) center top no-repeat;}

a, a:visited {color: #B81E40; text-decoration: none;}
a:hover {color: #000; text-decoration: underline;}

h1 {margin: 10px 0 7px 0; font-size: 1.5em; font-weight: bold; }
h2 {margin: 10px 0 7px 0; color: #B81E40; font-size: 0.95em; font-weight: bold; text-transform: uppercase;}
p {margin: 10px 0 10px 0;}
ul {margin: 10px 0 10px 0;}
  ul li {margin: 5px 0 5px 25px;}

/* Classes
------------------------------------------- */
.clear {overflow: hidden; clear: both; height: 0; font-size: 1px;}

/* specific cases stuff */
.case {width: 410px; padding: 3px 0 3px 0; border-bottom: 1px solid #e4e4e4;}
  .case-header {padding: 5px; border-left: 4px solid #fff; background: #fff; font-size: 0.95em; font-weight: bold;}
  .case-header.hover {border-left: 4px solid #B81E40; background: #f0f0f0;}
  	.case-header a {display: block; overflow: hidden; float: left; width: 13px; height: 14px; text-indent: -200px;}
    a.case-hide, a.case-hide:visited {margin: 0 3px 0 0; background: transparent url(../images/icons/hide_off.gif) center center no-repeat;}
    a.case-hide:hover {background: transparent url(../images/icons/hide_on.gif) center center no-repeat;}
    a.case-show, a.case-show:visited {margin: 0 25px 0 0; background: transparent url(../images/icons/show_off.gif) center center no-repeat;}
    a.case-show:hover {background: transparent url(../images/icons/show_on.gif) center center no-repeat;}
  .case-content {padding-left: 50px; font-weight: normal;}
    .case-content ul li {font-size: 0.95em;}
  
/* testimonials page */
#clients img {float: left; margin: 0; border: 0;}
.client-text {clear: both; margin-top: 20x; width: 50%;}
  .client-text h2 {overflow: hidden; margin-top: 20px; width: 600px; height: 43px; text-indent: -800px;}
  
p.go-top {margin: 5px 0 15px 0; text-align: right;}
  .go-top a {font-size: 0.8em;}

p.no-js {margin: 0 0 15px 0; font-size: 0.95em; font-weight: bold;}

/* hCard */
#footer span {color: #fff;}
.type, .fn {display: none;}

/* IDs
------------------------------------------- */
#map {height: 400px; border: 1px solid #e4e4e4;}

#overview {clear: both; margin-top: 20x; width: 50%;}
  #overview h1 {overflow: hidden; margin-top: 20px; width: 133px; height: 14px; background: #fff url(../images/testimonials-headings/testimonials.jpg) left top no-repeat; text-indent: -500px;}

/* testimonial headings */
#client01-text h2 {background: #fff url(../images/testimonials-headings/01.jpg) left top no-repeat;}
#client02-text h2 {background: #fff url(../images/testimonials-headings/02.jpg) left top no-repeat;}
#client03-text h2 {background: #fff url(../images/testimonials-headings/03.jpg) left top no-repeat;}
#client04-text h2 {background: #fff url(../images/testimonials-headings/04.jpg) left top no-repeat;}
#client05-text h2 {background: #fff url(../images/testimonials-headings/05.jpg) left top no-repeat;}
#client06-text h2 {background: #fff url(../images/testimonials-headings/06.jpg) left top no-repeat;}
#client07-text h2 {background: #fff url(../images/testimonials-headings/07.jpg) left top no-repeat;}
#client08-text h2 {background: #fff url(../images/testimonials-headings/08.jpg) left top no-repeat;}
#client09-text h2 {background: #fff url(../images/testimonials-headings/09.jpg) left top no-repeat;}
#client10-text h2 {background: #fff url(../images/testimonials-headings/10.jpg) left top no-repeat;}
#client11-text h2 {background: #fff url(../images/testimonials-headings/11.jpg) left top no-repeat;}
#client12-text h2 {background: #fff url(../images/testimonials-headings/12.jpg) left top no-repeat;}
#client13-text h2 {background: #fff url(../images/testimonials-headings/13.jpg) left top no-repeat;}
#client14-text h2 {background: #fff url(../images/testimonials-headings/14.jpg) left top no-repeat;}
#client15-text h2 {background: #fff url(../images/testimonials-headings/15.jpg) left top no-repeat;}
#client16-text h2 {background: #fff url(../images/testimonials-headings/16.jpg) left top no-repeat;}

/* main menu */

ul#mainmenu {position: absolute; overflow: visible; left: 20px; top: 67px; margin: 0;}
  #mainmenu li {position: relative; overflow: visible; float: left; list-style: none; margin: 0;}
    a.main, a.main:visited {display: block; overflow: hidden; height: 32px; background-color: transparent; background-position: left top; background-repeat: no-repeat; line-height: 32px; text-indent: -500px;}
	  #mm-home, #mm-home:visited {width: 55px; background-image: url(../images/menu/home.jpg);}
    #mm-about, #mm-about:visited {width: 57px; background-image: url(../images/menu/about.jpg);}
    #mm-services, #mm-services:visited {width: 67px; background-image: url(../images/menu/services.jpg);}
    #mm-clients, #mm-clients:visited {width: 60px; background-image: url(../images/menu/clients.jpg);}
    #mm-contact, #mm-contact:visited {width: 65px; background-image: url(../images/menu/contact.jpg);}
		a.selected {background-position: left bottom;}
    #mm-about.selected, #mm-services.selected, #mm-clients.selected, #mm-contact.selected, #mm-home.selected {background-position: left bottom;}

    ul.sub {display: none; position: absolute; top: 32px; left: 0;	margin: 0; height: 52px;}
    #sub-about {width: 126px; background: transparent	url(../images/menu/sub_about.png) left top no-repeat;}
    #sub-about a {width: 126px;}

    #sub-services {width: 134px; background: transparent	url(../images/menu/sub_services.png) left top no-repeat; height: 163px; }
	#sub-services a {width: 126px;}

	#sub-clients {width: 98px; background: transparent	url(../images/menu/sub_clients.png) left top no-repeat;}
    #sub-clients a {width: 126px;}

    ul.sub li {display: block; float: none;}
    ul.sub li a, ul.sub li a:visited {display: block; overflow: hidden;	height: 22px; margin: 0 0 0 2px; background: transparent; line-height: 22px; text-indent: -500px;}
    ul.sub li a:hover {background: transparent url(../images/menu_arrow.gif) left center no-repeat;}

/* footer */
#footer p {margin: 0 0 0 0; padding: 0 10px 0 30px; text-align: right;}
#footer span.left { float:left; font-size: 0.95em; color:#8b898a;}
  #footer a, #footer a:visited {color: #595959; font-weight: bold; font-size: 0.95em; text-decoration: none;}
  #footer a:hover {color: #B81E40;}
p#footer-contact {padding: 8px 10px 0 30px; height: 32px; color: #fff; text-align: left;}
 
/* sidebar */
#sidebar {float: left; width: 217px; padding-bottom: 100px; background: transparent url(../images/red-slogan.jpg) left bottom no-repeat;}
#home-sidebar {float: left; width: 270px; padding-top: 225px; background: url(../images/headers/advice.jpg); background-repeat: no-repeat;}
  #home-sidebar h2, #home-sidebar p, #sidebar h2, #sidebar p, h2.h2abovelist {margin-left: 15px;}

     ul#articles, ul.articles {margin: 0 0 10px 0; width: 180px; }
    #articles li, .articles li {list-style: none; margin: 0 0 0 0; padding: 0 0 0 16px; border-bottom: 1px solid #fff;}
    #articles li.over, .articles li.over {background:  transparent url(../images/articles_arrow.gif) left center no-repeat;}
      #articles li a, #articles li a:visited, .articles li a, .articles li a:visited {display: block; padding: 3px 3px 3px 3px; border-bottom: 1px solid #e4e3e4; background: #fff; color: #595959; font-size: 0.95em;}
      #articles li a:hover, .articles li a:hover {background: #f0f0f0; text-decoration: none;}

/* main content */
#main-content {float: right; width: 470px; padding:0 30px 0 0px;}
#main-content img.imgright{float:right; margin:5px 0 10px 10px}

/* main content on home page */
#home-main-content {float: right; width: 468px;}
  #home-image {margin-bottom: 20px; height: 233px; background: transparent url(../images/headers/home.jpg) left top no-repeat;}
  #welcome {float: left; width: 230px;}
  #testimonials { clear: right; float: right; margin-bottom: 20px; width: 217px; background: transparent url(../images/testimonials_middle.jpg) center top repeat-y;}
    #testimonials-wrapper {padding: 20px 20px 0 20px; background: transparent url(../images/testimonials_top.jpg) center top no-repeat;}
	  #testimonials h1 {margin: 0; padding-left: 25px; background: transparent url(../images/arrowbox.gif) left center no-repeat; font-size: 1.3em; font-weight: bold;}
	  #testimonials p {margin: 0; padding: 8px 0 8px 0; border-bottom: 1px dashed #d8d8d8; font-size: 0.95em;}
	    a.more, a.more:visited {padding: 0 8px 0 0; background: transparent url(../images/icons/more.jpg) right center no-repeat; color: #595959; font-weight: bold; text-decoration: none;}
	    a.more:hover {color: #B81E40;}
    #testimonials-bottom {position: relative; top: -1px; margin-bottom: -1px; height: 21px; background: #fff url(../images/testimonials_bottom.jpg) center top no-repeat;}
    
/* terms and conditions */
body#tc {padding: 0 20px 0 20px; width: 300px; text-align: center;}
  body#tc a {font-size: 1.2em; font-weight: bold;}
		
		
.r { float: right; width: 217px; }