/* main ss for tangram site, started March 09

other files required (and called earlier in all xhtml pages): 
/blueprint/condensed.css
or
/blueprint/screen.css
/blueprint/print.css
CW :: 0903, still alpha, version 0.1

set for page width of 950px

tangram01.css

*/
	body {
	  margin: 0;
	  padding: 0;
	  text-align: center;

	  background: #ccc; /* grey */
	  color: #000; /*was: 545b59 */
	}
	
	#wrapper {
	/*height: 100%;*/
  	margin:auto;
  	margin-top:2em;
  	text-align: left;
	/*background: #fff;*/
  	width: 950px;
	}
	
	.container {
	  	height: 100%;
	  	margin: 0 auto;
	  	text-align: left;
	}

	#content { 
		clear:both;
	  	float: left;
	  	width: 800px;
	  	height: 100%;
	  	min-height: 100%; 
	}
	
	/******
	DEFAULTS
	********/
	h1,h2 {color:#94bf77;margin:1.6em 0 0.5em 1em;}
	h1 {font-weight:bold;font-size:1em;}
		a {color:#008ac3;}
	h2 {font-weight:normal;font-size:1em;margin:1.6em 0 0.5em 1em;}	
	sup {font-size:0.75em;}
		
	/************
	   HEADER
	 ************/

/* Forces hasLayout for IE and so makes header the height of its contents \*/
	* html #header {
	  height: 1%;
	}
	/* End hide from IE-mac */
	
	#header {border-bottom:12px solid #ab8e2b;padding-top:2em;}/* brown bar */
	#navbar {background:#56783a; /* green bar */
		border-bottom:15px solid #67aace;/* blue bar */
		}
	#breadcrumbsbar {
		border-top:14px solid #fff;/* white bar */
		background:#006e4a;
		color:#fff;}
	#breadcrumbsbar p {font-size: 0.8em;line-height: 0.5em;margin-top:0.4em;margin-bottom:0.4em;margin-left:4.5em;}	
	a {text-decoration: none;}
	a:hover {text-decoration: underline;}
	
		/**************
		   TOP NAVBAR
		 **************/

		ul#top_menu {
		  width: 496px;/*was:900*/
		  margin: 0 auto; 
		  margin-left:1.5em; /* goes together with width */
		  padding: 0 !important;
		  padding: 0 0 0 10px; 
		line-height:0.8em; 
		}

		ul#top_menu li {
		  display: inline;
		  list-style: none;
		  margin-right: 15px;
		  padding: 0;
		}

		ul#top_menu li a {
		  float: left;  
		  padding: 0 0 0 0;
			width: 124px; /* goes together with margin-left (above) was:9.2% */
		  font: 0.9em "Century Gothic",lucida,helvetica,verdana,sans-serif;
		  text-align: center;
		  text-decoration: none;
		  color: #fff;
		  /*border-bottom: 1px solid #D3F1B6;*/
		}

	/*	ul#menu li a:visited {
		  background-color: #FFF;
		}*/

		ul#top_menu li a:hover {
		  color: #fff;/*was: 082966*/
		}

			/**************
			   BOTTOM NAVBAR
			 **************/

			ul#bottom_menu {
			  width: 900px;/*was:1100*/
			  margin: 0 auto; 
			  margin-left:1.5em; /* goes together with width */
			  padding: 0 !important;
			  padding: 0 0 0 10px; 
			line-height:0.8em; 
			}

			ul#bottom_menu li {
			  display: inline;
			  list-style: none;
			  margin-right: 15px;
			  padding: 0;
			}

			ul#bottom_menu li a {
			  float: left;  
			  padding: 0 0 0 0;
				width: 9.2%; /* goes together with margin-left (above) */
			  font: 0.9em lucida,helvetica,verdana,sans-serif;
			  text-align: center;
			  text-decoration: none;
			  color: #fff;
			  /*border-bottom: 1px solid #D3F1B6;*/
			}

		/*	ul#bottom_menu li a:visited {
			  background-color: #FFF;
			}*/

			ul#bottom_menu li a:hover {
			  color: #000;/*was: 082966*/
			  background: url(./img/bg/menu.gif) repeat-x bottom left;
			}






	p.strap {margin-left:3.5em;}

	p {margin:1em;}	

		/* this bit of magic styles the onstate of individual pages by reading which page we are on from the 
	body's id attribute - body_welc, etc. - and combining that with the nav list's li id attribute - nav_welc, etc. 
	Could have used php, but this seems neater and faster, also works for multiple pages within a section, 
	which is better than methods that need filenames to be specified and checked for using if else clauses
	#body_aboutus #nav_aboutus a, 
	#body_product #nav_product a,
	#body_didyouknow #nav_didyouknow a, 
	#body_casestudies #nav_casestudies a {   text-decoration:none;color:#000;} */   /*the lack of a comma after the last a is very important!! */
	/*#menu a:hover {text-decoration:none; color:#000;}

	#body_contact a#nav_contact,
	#body_sitemap a#nav_sitemap,
	#body_home a#nav_home {font-weight:bold;text-decoration:none;}

	.headcontactinfo a {text-decoration:none;color: #1e417c;}*/
	
	/***  TWEAKS  ***/
	/* Centre Column's navigation */
	ul#centrenav {list-style:none;margin:1.8em 0 0 1em;}
	#centrenav a {color: #545b59;}
	ul#centrenav li.active a {font-weight:bold;color:#006e4a;}
	/* Centre Column's copy */
	.centrecolcopy{color:#0084bb;margin-right:6em;}
	h2.centrecolcopy{font-weight:bold;margin-left:1em;}
	
	
	#maincopy {font-size:1.2em;}
	p.strap, p.headcontactinfo {letter-spacing:2px;}
	p.headcontactinfo a {color:#008ac3;}
	p.nher {padding-left:15px;}
	p.sava {padding-left:17px;}

	p.centrecopy {margin-top:0;font-weight:bold;}
	p.centrecopy a {color:#545b59;}
	h2.headingstrap {margin-top:0.2em;}
	
	p.backtotoplink {margin-left:4em;}
	
	/***** FOOTER *****/
	#footer {font-size:0.9em;}
	
	
	/* ********* Tweaks for test pages ************ */
	
	body {font-size:75%;font-family:"Century Gothic","Helvetica Neue", Arial, Helvetica, sans-serif;}
	#wrapper {background:url(../gfx/page_bkgrnd_950x756.jpg) no-repeat;}/*  */
	/* #wrapper {background:url(../gfx/home_mockup_950x756.jpg) no-repeat;}*/
	#wrapper {border:solid #e92123 2px;}
	.spacer1, .spacer2 {float:left;}
	.mainlogo {margin:10.5em 0 0 1.9em;}
	#topnavbar {margin:4em 0 3em -0.2em;text-transform:uppercase;}
	ul#top_menu {margin-top:1.1em;}
	ul#top_menu li a {
	  float: left;  
	  padding: 3px 0;
		width: 124px; /* goes together with margin-left (above) was:9.2% */
	  font: 0.9em "Century Gothic",lucida,helvetica,verdana,sans-serif;
	  text-align: center;
	  text-decoration: none;
	  color: #fff;
	  /*border-bottom: 1px solid #D3F1B6;*/
	}

			/**** top menu ****/

	ul#top_menu li a:hover {
	  color: #fff;/*was: 082966*/
	}
	/*about us*/
	#nav_aboutus a {text-decoration:none;color:#fff;font-size:3em;
		background:#906265;}
	#body_aboutus #nav_aboutus a {background:#60181b;}
	ul#top_menu #nav_aboutus a:hover {background:#60181b;color:#fff;}
	/*product*/
	#nav_product a {text-decoration:none;color:#fff;font-size:3em;
		background:#b69fbe;}
	#body_product #nav_product a {background:#a479ac;}
	ul#top_menu #nav_product a:hover {background:#a479ac;color:#fff;}
	/*did you know*/
	#nav_didyouknow a {text-decoration:none;color:#fff;font-size:3em;
		background:#bccba0;}
	#body_didyouknow #nav_didyouknow a {background:#9ec277;}
	ul#top_menu #nav_didyouknow a:hover {background:#9ec277;color:#fff;}
	/*case studies*/
	#nav_casestudies a {text-decoration:none;color:#fff;font-size:3em;
		background:#e6d495;}
	#body_casestudies #nav_casestudies a {background:#e1d055;}
	ul#top_menu #nav_casestudies a:hover {background:#e1d055;color:#fff;}



	#body_product #nav_product a,
	#body_didyouknow #nav_didyouknow a, 
	#body_casestudies #nav_casestudies a {/*font-weight:bold;*/text-decoration:none;color:#fff;} /* was: 1e417c */   /*the lack of a comma after the last a is very important!! */
	#top_menu a:hover {text-decoration:none; color:#fff; /*padding-bottom:2px; border-bottom: 2px solid black;*/}

	#body_contact #nav_contact a,
	#body_openweekend #nav_openweekend a,
	#body_testimonials #nav_testimonials a,
	#body_sitemap #nav_sitemap a,
	#body_home #nav_home  a {color:#fff;font-weight:bold;text-decoration:none;}
	ul#bottom_menu li a:hover {font-weight:bold;color:#fff;}

				/****  staff navigation WITHOUT SOFA ****/

#menu_staff_pages2 {margin: -2em 0 0 10em; font-size:1.5em;}
#menu_staff_pages2 .selected {
				  font-weight: bold;
				}

				/****  staff navigation USING SOFA ****/

				#menu_staff_pages {
				list-style: none;
				padding: 0;
				margin:-6em 0 0 2em;
				width: 394px;
				height: 193px;
				background: url(../gfx/staff/staff_all_off_394x193.gif) no-repeat;
				position: relative;}
				#menu_staff_pages span {
				  display: none;
				  position: absolute;
				}

				#menu_staff_pages a {
				  display: block;
				  text-indent: -900%;
				  position: absolute;
				  outline: none;
				}

				#menu_staff_pages a:hover {
				  background-position: left bottom;
				}

				#menu_staff_pages a.selected {
				  background-position: left bottom;
				}



				#menu_staff_pages a:hover span {
				  display: block;
				}

				#menu_staff_pages .LorraineDaw {
				  width: 110px;
				  height: 193px;
				  background: url(../gfx/staff/ld_on_with_capbtn_110x386.gif) no-repeat;
				  left: 17px;
				  top: 0px;
				}

				#menu_staff_pages .SarahRamsay {
				  width: 110px;
				  height: 193px;
				  background: url(../gfx/staff/sr_on_with_capbtn_110x386.gif) no-repeat;
				  left: 55px;
				  top: 0px;
				}

				#menu_staff_pages .JulianDarwellStone {
				  width: 110px;
				  height: 193px;
				  background: url(../gfx/staff/jds_on_with_capbtn_110x386.gif) no-repeat;
				  left: 111px;
				  top: 0px;
				}

				#menu_staff_pages .SheilaKeighren {
				  width: 110px;
				  height: 193px;
				  background: url(../gfx/staff/sk_on_with_capbtn_110x386.gif) no-repeat;
				  left: 161px;
				  top: 0px;
				}

				#menu_staff_pages .JoanneGolden {
				  width: 110px;
				  height: 193px;
				  background: url(../gfx/staff/jg_on_with_capbtn_110x386.gif) no-repeat;
				  left: 213px;
				  top: 0px;
				}

				#menu_staff_pages .MatthewMolony {
				  width: 110px;
				  height: 193px;
				  background: url(../gfx/staff/mm_on_with_capbtn_110x386.gif) no-repeat;
				  left: 265px;
				  top: 0px;
				}

				/* unused:
				#menu .JoanneGolden span {
				  width: 86px;
				  height: 14px;
				  background: url(images/jg_info.gif) no-repeat;
				  left: 28px;
				  top: -20px;
				}

				etc.
				See http://www.webdesignerwall.com/tutorials/advanced-css-menu/
				for the way it could be used
				*/



		/* main content layout */

	#page {margin:-0.95em 0 0 1.5em;}
	#centreblock {margin:0 -0.2em -0.5em 0; background:#eeeaeb;
		width:146px;
		font-size:75%;
		}/* was: #f0f0f0 then: url('../gfx/faux_col_1x553.gif') repeat-x */
	#footer p {margin:-0.9em 0 0 0.1em;}
	#footer a {color:#000;}
	#bottomnavbar ul {margin:-1.3em 0 2em 11em;text-transform:uppercase;font-size:125%;}

	ul#bottom_menu li a {
	  float: left;  
	  padding: 0 0 0 0;
		width: 105px; /* goes together with margin-left (above) was:9.2% */
	  padding:5px 0;	
	  font: 0.95em "Century Gothic",lucida,helvetica,verdana,sans-serif;
	  text-align: center;
	  text-decoration: none;
	  color: #fff;
	display: inline;
	  /*border-bottom: 1px solid #D3F1B6;*/
	}

	p.grid {margin-top:0;}
h2.centrecolcopy, h2.centrecolcopyfirst {color:#94bf77;font-size:1.3em;margin:1.2em 0 0 0.8em;}
h2.centrecolcopyfirst {margin-top:3em;font-weight:bold;}