/* 

STYLE SHEET FOR MERECHATS WEB SITE
Created by Rob Harland - RHA Ltd


ToC

		1. defaults
		2. structure
		3. links and navigation
		4. fonts
		5. images
		6. hacks
		7. decor

Notes

*/



/* --------- 1. defaults  --------- */

* {
		margin: 0;
		padding: 0;
		}

body {
		background: #888 url(../images/bg.jpg);
		font: normal 300 0.85em/1.1 verdana, helvetica, arial, sans-serif;
		}
		
/*  --------- 2. structure  --------- */

#wrapper {
		position: relative;		/*datum*/
		top: 10px;
		margin-left: auto;
		margin-right: auto;
		width:  976px;
		background: #fff url(../images/ds_lhs-rhs.jpg) repeat-y;
		}

#masthead {
		position:  relative;
		text-align:  left;
		height:  164px;   
		width: 955px;
		padding:  10px 0 0 0px;
		margin:  0 8px 0 8px;  /*for shad*/
		background:  url(../images/hd_grad_h2.jpg) repeat-y;  
		z-index: 999;
		}
#logo {
		position: absolute;
		top: 10px;
		left: 10px;
		width: 160px;
		height: 150px;
		/*text-align: right;*/
		margin: 0px ;
		/*padding: 5px 5px 0px 0px;
		background:  #eff5f5 url(../images/logo.gif) 0% 0% no-repeat;
		opacity:  0.80;
		filter: alpha(opacity=80);
		border: 5px dashed #fb6;*/
		border-top:  2px solid #dbe9d8;		
		border-right:  2px solid #a0b29a; 
		border-bottom:  2px solid #a0b29a; 	
		border-left: 2px solid #dbe9d8;
		-moz-border-radius: 6px;
		}
#logo span  {
		background:   url(../images/logomerechats.jpg) 0% 0% no-repeat;  /*#c3dbe9*/
		position: absolute;
		top: 0px;
		left: 0px;
		width: 160px;
		height: 150px;
		
		}
#hdimg	{
		position: absolute;
		top: 0px;
		left: 720px;
		width: 234px;
		height: 175px;
		background:  url(../images/smiling_girl12.jpg) 0% 0% no-repeat;  
		}		
#strap	{
		width:  760px;
		height: 112px;
		margin:  0 0 0 200px;
		padding:  10px 0px;
		}
#navi {						
		width:  750px;
		margin:  0 0 0 208px;
		position: relative; 
		}
#content {
		margin:  10px 180px 0px 199px;
		text-align:  left;
		width: 582px;
		height: 980px;/**/
		position: relative;	/*datum for corner*/
		}
#lhs  {
		width:  170px;
		height:  800px;
		margin:  0 0 0 8px ;
		padding:  15px 5px 5px;
		position: absolute;
		top: 182px;
		left: 0px;
		text-align: left;
		background:  url(../images/hd_grad_v2.jpg) repeat-x;
		}
#rhs  {
		width:  170px;
		padding: 5px;
		position: absolute;
		top: 188px;
		left: 785px;
		text-align: left;
		}		
.box, .box2, .box3  	{
		padding: 10px;
		margin: 0 0px 20px 0;
		background:  #fdfdfd;  
		border-top:  1px solid #dbe9d8;		
		border-right:  1px solid #a0b29a; 
		border-bottom:  1px solid #a0b29a; 	
		border-left: 1px solid #dbe9d8;
		}
.leftbox  {
		border-top:  1px solid #dbe9d8;		
		border-right:  1px solid #a0b29a; 
		border-bottom:  1px solid #a0b29a; 	
		border-left: 1px solid #dbe9d8;
		padding: 5px;
		margin: 0 0px 5px 0;
		}
.boxout, .boxoutlb, .boxoutor, .boxoutbg, .boxoutfu	{
		border: 3px dashed #ccc;
		background-color: #fff;
		width: 180px;
		height: 110px;
		float: left;
		margin: 0 8px 20px 0px;
		opacity:  0.80;
		filter: alpha(opacity=80);
		-moz-border-radius: 20px;
		}
.boxoutlb  {
		border: 3px dashed #acceff;
		}		
.boxoutor  {
		border: 3px dashed #fb6;
		}
.boxoutbg  {
		border: 3px dashed #9cb8c3;
		}
.boxoutfu  {
		border: 3px dashed #f35a90;
		}
.boxoutrs_fu	{
		/*border: 3px dashed #ccc;
		background-color: #fff;*/
		background:  url(../images/ds_box150x167_fu.jpg) no-repeat 0 0;
		width: 140px;
		height: 167px;
		float: left;
		margin: 0 8px 20px 0px;
		opacity:  0.80;
		filter: alpha(opacity=80);
		/*-moz-border-radius: 20px;*/
		}
.boxoutmid_tools, .boxoutmid_chat, .boxoutmid_journal	{
		/*border: 3px dashed #ccc;
		background-color: #fff;*/
		background:  url(../images/ds_box180_tools.jpg) no-repeat 0 0;
		width: 180px;
		height: 180px;
		float: left;
		margin: 0 8px 20px 0px;
		/*padding: 70px, 10px, 5px;  not showing*/
		/*opacity:  0.80;
		filter: alpha(opacity=80);
		-moz-border-radius: 20px;*/
		}
.boxoutmid_chat		{
		background:  url(../images/ds_box180_chat.jpg) no-repeat 0 0;
		} 
.boxoutmid_journal  {
		background:  url(../images/ds_box180_journal.jpg) no-repeat 0 0;
		}
.boxoutsmall  {
		background:  url(../images/ds_box140blank.jpg) no-repeat 0 0;
		width: 140px;
		height: 140px;
		float: left;
		margin: 0 4px 20px 0px;
		position:  relative;  /*to get h5 oondf*/
		}								
.boxout2  {
		width: 180px;
		height: 350px;/**/
		float: left;
		margin: 12px 0 10px 9px;
		background: url(../images/ds_box180x350r.jpg) 0 0 no-repeat;
		}
#journal  {
		background:  url(../images/journal_547.jpg)  0 0 no-repeat;
		width: 560px;
		height:  440px;
		margin: 0px;
		position: relative;
		z-index: 15;
		clear: left;
		}
#toon	{
		position:  absolute;
		height: 220px;
		width:	250px;
		top: 850px;
		left: 700px;
		background:  url(../images/wheel.gif);
		/*z-index: 10;*/
		}		
#footer {
		margin:  10px 140px 5px 105px;
		width: 755px;
		}
.separator {
		clear: both;
		height: 0;
		}
.left  {
		margin: 10px 20px;
		float:  left;
		}
.right  {
		margin: 10px 20px;
		float:  right;
		}		
.blog  {
		margin: 0 42px 10px 0;
		min-height: 100px;
		padding: 5px;
		border-top:  1px solid #a0b29a;		
		border-right:  1px solid #dbe9d8; 
		border-bottom:  1px solid #dbe9d8; 	
		border-left: 1px solid #a0b29a;
		}
#wall  {
		background: url(../images/wall.jpg) 0 0 repeat;
		width: 574px;
		padding: 3px;
		}
.poster	{
		background: url(../images/post_top.jpg) 0 0 repeat-y;
		width: 170px;
		margin: 7px;
		padding: 3px 3px 0 3px;
		float: left;
		}	
#wall1  {
		background: url(../images/wall.jpg) 0 0 repeat;
		width: 752px;
		padding: 3px;
		}
.poster1 {
		background: url(../images/post_top.jpg) 0 0 repeat;
		width: 720px;
		margin: 7px;
		padding: 0px 3px 0 3px;
		float: left;
		}		
#filter, .filter  {
		background: #e5eeed ;
		height: 26px;
		width: 518px;
		/*border-top:  1px solid #a0b29a;		
		border-right:  1px solid #dbe9d8; 
		border-bottom:  1px solid #dbe9d8; 	
		border-left: 1px solid #a0b29a;*/
		border-top:  1px solid #dbe9d8;		
		border-right:  1px solid #a0b29a; 
		border-bottom:  1px solid #a0b29a; 	
		border-left: 1px solid #dbe9d8;
		margin-top: 2px;
		}

#filterwide, .filterwide  {
		background: #e5eeed ;
		height: 26px;
		width: 582px;
		/*border-top:  1px solid #a0b29a;		
		border-right:  1px solid #dbe9d8; 
		border-bottom:  1px solid #dbe9d8; 	
		border-left: 1px solid #a0b29a;*/
		border-top:  1px solid #dbe9d8;		
		border-right:  1px solid #a0b29a; 
		border-bottom:  1px solid #a0b29a; 	
		border-left: 1px solid #dbe9d8;
		margin-top: 2px;
		}

/* ---------- 3. links and navigation ---------- */

ul#nav, #nav ul  {			
		padding: 0;
		margin: 0;
		position:  relative;   
		z-index:  10;
		}
#nav li  {
		position: relative;  
		list-style-type: none;
		width:  123px;
		float:  left;
		border-top:  1px solid #dbe9d8;		
		border-right:  1px solid #a0b29a; 
		border-bottom:  1px solid #a0b29a; 	
		border-left: 1px solid #dbe9d8;
		font: normal 600 1.0em/1.0 verdana, helvetica, arial, sans-serif;
		}
#nav a:link, #nav a:visited   {
		padding: 9px 0px;
		text-decoration: none;
		text-align: center;
		display:  block;
		width:  123px;
		height:  12px;
		color: #b01036;
		}
#nav a:hover {
		background-color:  #afbcb2;		
		opacity: 0.60;	
		filter: alpha(opacity=60);
		}		
#nav ul  {
		display: none ;/**/		
		width: 123px;
		position:  absolute;
		padding: 0.2em 0 0 0;
		z-index: 20;  
		}
#nav ul li  {
		float:  none;  
		font: normal 600 0.95em/1.0 verdana, helvetica, arial, sans-serif;
		}
#nav li > ul {
		/*top: auto;
		left: auto;   not necessary? */
		}				
#nav li:hover ul  {
		display:  block;
		background: #ccd2cb;
		opacity: 0.80;
		filter: alpha(opacity=80);
		}
#content a:link, #content a:visited, #footer a:link, #footer a:visited  {
		/* display: block; Removed By Aidan 11/09/07*/ 
		text-decoration:  none;
		color:  #c85980;
		}  
#content a:hover, #content a:active, #footer a:hover, #footer a:active	{
		text-decoration:  underline;
		color:  #c85980;
		opacity: 0.80;					/*fx*/
		filter: alpha(opacity=80);
		}
#content .boxoutmid_tools a:link, #content .boxoutmid_tools a:visited,
#content .boxoutmid_journal a:link, #content .boxoutmid_journal a:visited,
#content .boxoutmid_chat a:link, #content .boxoutmid_chat a:visited  {
		position: relative;
		padding-top: 90px;
		display: block;
		z-index: 10;
		}  
#content .boxoutsmall a:link, #content .boxoutsmall a:visited  {
		/*position: relative;
		padding-top: 0px;
		z-index: 10;*/
		display: block;
		width: 120;
		height: 50;
		color:  #176886;
		}  
#lhs a:link, #rhs a:link, a:visited {
		text-decoration:  none;
		color:  #176886;
		}  
#lhs a:hover, #rhs a:hover, #rhs a:active	{
		text-decoration:  underline;
		color:  #176886;
		background: none;
		opacity: 0.60;					
		filter: alpha(opacity=60);
		}
#lhs ul li{
		margin:  0 0 0 2em;
		padding: 1em 0 1em 0.5em;
		}	
ul#jtabs, ul#jtabs li.tab {
		padding: 0;
		height: 30px;
		margin: 0;
		list-style:  none;
		}
ul#jtabs li.tab  {
		width:  115px;
		float:  left;
		background: url(../images/tab115x33.jpg) no-repeat;
		font-weight: bold;
		text-align: center;
		}
a.linkbutton, a.linkbutton:link, a.linkbutton:visited   {
		padding: 3px;
		margin: 3px 7px 0 0;
		background: #e6efee;
		border-top:  1px solid #dbe9d8;		
		border-right:  1px solid #a0b29a; 
		border-bottom:  1px solid #a0b29a; 	
		border-left: 1px solid #dbe9d8;
		-moz-border-radius: 3px;
		color: #b01036;
		}
a.linkbutton:hover, a.linkbutton:active  {
		border:  1px solid #a0b29a; /*e8f5e6*/
		background: #e6efee;
		opacity: 0.80;					
		filter: alpha(opacity=60);
		}															
/* ---------- 4. fonts ---------- */

p		{
		font: normal 300 0.85em/1.2 verdana, helvetica, arial, sans-serif;
		padding: 0.3em 0em;
		}
#logo p a, #logo h1 a {
		color:  #f94000;
		}
#content p {
		font: normal 300 0.85em/1.3 verdana, helvetica, arial, sans-serif;
		padding: 0.7em 0 0.5em 0;
		}		
#content .boxout p, #content .boxoutor p, #content .boxoutbg p, #content .boxoutfu p, 
#content .boxoutrs_fu p, p.boxout4		{  
		font: normal 300 80%/1.2 verdana, helvetica, arial, sans-serif;
		text-align:  center;
		padding: 5px 5px;
		}/**/
#content .boxoutmid_tools p, #content .boxoutmid_journal p, #content .boxoutmid_chat p,
#content .boxoutsmall p  {
		font: normal 300 80%/1.2 verdana, helvetica, arial, sans-serif;
		text-align:  center;
		padding:  0px 10px 5px 5px;	/*needs div sel to show*/
		}
#content .boxout2 p, #journal p {  
		font: normal 300 80%/1.2 verdana, helvetica, arial, sans-serif;
		text-align:  center;
		padding: 5px 10px;
		}	
#footer p	{
		text-align:  center;
		color:  #c85980;
		}
#poster p  {
		font: normal 300 80%/1.2 "Comic Sans MS", "Trebuchet MS", verdana, helvetica, arial, sans-serif;
		padding:  10px;
		}/**/			
h1 		{
		font: normal 600 1.8em/1.0 verdana, helvetica, arial, sans-serif;
		color:   #f94000 ;	
		}
#strap h1{
		color:  #61a8a8;
		font: normal 600 1.7em/1.2 verdana, helvetica, arial, sans-serif;
		}
h2 		{
		font: normal 600 1.5em/1.5 verdana, helvetica, arial, sans-serif;
		color:  #176886;
		padding: 0.5em 0 0 0;
		}
#journal h2  {
		padding: 50px 0 20px 100px;
		}		
h2.corner	{
		position:  relative;
		z-index:  5;
		padding: 0 0 0 0.5em;
		}
h3 		{
		font: normal 600 1.1em/1.1 verdana, helvetica, arial, sans-serif;
		color:  #176886;
		padding:  0.1em 0;	
		}
h3.side  {
		padding:  0.5em 0;
		color:  #60a8a8;
		}		
#rhs h3 span		{
		font:  normal 900 1.2em/1.1 verdana, helvetica, arial, sans-serif;
		color:  #db3200;		/*free*/	
		}		
.boxout h3, .boxout2 h3	{
		font: normal 600 1.1em/1.3 verdana, helvetica, arial, sans-serif;
		color:  #c85980;
		padding:  5px 10px;	
		}
h4 		{
		font: normal 600 90%/1.2 verdana, helvetica, arial, sans-serif;
		color:  #c85980;
		padding: 3px 10px;	
		}
h5		{
		font: normal 600 80%/1.2 verdana, helvetica, arial, sans-serif;
		padding: 5px 5px;
		}		
.boxoutbg h5, .boxoutfu h5, .boxoutor h5 {		/*experiment - colour var h5 not img*/
		margin: 5px;
		background: #f35a90;
		}
.boxoutsmall h5  {
		width: 126px;
		height: 54px;
		margin: 3px 0 0 5px; 
		float:  left;		/*to allow significant link padding*/
		color:  transparent;  /*for screen readers*/
		display:  inline;
		}
h5.lb  {
		background: url(../images/h5teleclass126.jpg) 0 0 no-repeat;
		}
h5.lg  {
		background: url(../images/h5walltalk126.jpg) 0 0 no-repeat;
		}
h5.or  {
		background: url(../images/h5blog126.jpg) 0 0 no-repeat;
		}
h5.bg  {
		background: url(../images/h5mob126.jpg) 0 0 no-repeat;
		}
h5.sand  {
		background: url(../images/h5consulting126.jpg) 0 0 no-repeat;
		}
h5.mint  {
		background: url(../images/h5coaching126.jpg) 0 0 no-repeat;
		}
h5.dp  {
		background: url(../images/h5workshops126.jpg) 0 0 no-repeat;
		}
h5.lime  {
		background: url(../images/h5communities126.jpg) 0 0 no-repeat;
		}							
#content dl.results dt {
		width:  70px;
		/*height: 50px;  inline like img*/
		}
#content dl.results dt.coaching  {		/*error*/
		background:  url(../images/icon_notes.jpg) no-repeat;
		padding:  20px 0 0 20 px;
		/*display: block;*/
		height:  45px;
		}
#content dl.results dd  {
		/*height:  50px;*/
		padding: 10px 0 0 70px;
		}
#content ul, #content ol 	{
		padding: 5px 10px 0 25px;
		font: normal 300 80%/1.2 verdana, helvetica, arial, sans-serif;
		}
#content ul li, #content ol li  {
		
		margin: 0 .3em;
		padding:  0.3em 0em;/**/
		background:  #fff;  /*home page toon*/
		opacity: 0.80;					
		filter: alpha(opacity=80);/**/
		}
#content ul.results, #content ul.results li	{
		list-style: none;
		margin:  0;
		padding: 0;
		font: normal 300 95%/1.3 verdana, helvetica, arial, sans-serif;
		}
#content ul.results li  {
		padding: 10px 0 10px 70px;
		border-bottom: 2px dotted #dfdfdf;
		}		
#content ul.results li.coaching  {
		background:  url(../images/icon_notes.jpg) no-repeat;
		}
#content ul.results li.podcasts  {
		background:  url(../images/icon_audio.jpg) no-repeat;
		}
#content ul.results li.blogs  {
		background:  url(../images/icon_write.jpg) no-repeat;
		}
#content ul.results li.meetthemob  {
		background:  url(../images/research.jpg) no-repeat;
		}
#content ul.results li.teleclasses  {
		background:  url(../images/icon_pda.jpg) no-repeat;
		}
#content ul.results li.walltalk  {
		background:  url(../images/icon_wall.jpg) no-repeat;
		}
#content ul.results li.article  {
		background:  url(../images/policy.jpg) no-repeat;
		}
#content ul.results li.newsletter  {
		background:  url(../images/answer.jpg) no-repeat;
		}
#content ul.results li.link  {
		background:  url(../images/discussion.jpg) no-repeat;
		}		
#jpage ul, #jpage p  {
		margin-right:  40px;
		}
#content ul li ul li ul {
		list-style-type: none;
		}
																			
/* ---------- 5. images ---------- */

a img {
		border: 0;
		}
.boxout img {
		margin:  5px 10px;
		}
.boxout2 img {
		margin: 0 0;
		padding:  5px 0 5px 8px;
		}					
.profileimg {
		width:  160px;
		height:  200px;
		/*border: 1px solid silver;*/
		margin: 13px 50px 10px 0px;
		float: right;
		}
.thumb  {
		margin: 10px 20px;
		height: 300;
		width:  170;
		float:  left;
		text-align:  center;
		font-size:  90%;
		}
		
/* ---------- 6. hacks ---------- */

body	{ /* IE 5 centering bug fix */
		text-align: center;
		}	
#wrapper {
		text-align: left;
		}  
#logo{
		display:  inline;  /* ie double margin bug*/
		}
/* ---------- 7. decor ---------- */

#ds_top	{
		width: 964px;
		height:  8px;
		margin: 0 4px;  /*cheat*/
		background: url(../images/ds_top.jpg);
		}
#ds_rhs	{
		background: url(../images/ds_rhs.jpg);
		}
#ds_bot	{
		width: 964px;
		height:  8px;
		margin: 0 4px;  /*cheat*/
		background: url(../images/ds_bot.jpg);
		}
#ds_rhb	{
		background: url(../images/ds_rhb.jpg);
		}
#ds_lhb	{
		background: url(../images/ds_lhb.jpg);
		}		
#rad  {
		position:  absolute;
		width:  30px;
		height:  30px;
		top:  -10px;
		left: -12px;
		background:  url(../images/rad.png) 0px 0px no-repeat;
		}						
#jpage  {
		background:  url(../images/journal576m.jpg) 0% 0% repeat-y;
		clear: left;  /*stops closing up on ul#jtabs*/
		padding: 0 0 0 20px;/**/
		}
#jpagehd  {
		background:  #fff url(../images/journal576x38t.jpg) 0% 0% no-repeat;	/*why is jpagedd not showing in ie? Change to 27px ul?*/
		/*clear: left;  not needed?*/
		padding: 8px 0 8px 20px;
		margin-left: -20px;
		}
#jpage p.close  {
		background:  #fff url(../images/journal576b.jpg) 0% 100% no-repeat;
		margin: 0 0 0 -20px;  /*resets rt to zero for bottom img*/
		height: 36px;
		width:  576px;
		}
ul#tools  {
		background:  url(../images/iconstack_small.jpg) 0 0 no-repeat;
		height:  120px;
		}
ul#tools li  {
		list-style: none;
		margin-left: 20px;
		height: 18px;
		}						
.postend  {
		background: url(../images/post-bot.jpg) 100% 100% no-repeat;
		}