CSS CODE
/*width 100% which would force the content to the left and right edges of the viewport 
to centre the div in the viewport, we apply "auto" margins to left and right. To move the div away from the top and bottom of the viewport we use a margin of 10px. Combined into one: "margin: 10px auto". This will apply a margin of 10px to the top and bottom and auto margins to the left and right. 

*/

/* =universals 
These rules are applied to all elements unless otherwise specified below. */



/* is this a good idea? */
  * {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	PADDING-BOTTOM: 0px;	MARGIN: 0px;	PADDING-TOP: 0px} 

/*This next step is the most important of the entire process. The "leftnav" div has been floated, so text from the "content" div will flow down its left edge and then wrap around under it. To make the text appear as it is in a new column, we apply margin-left to the "content" div, making sure that the width is greater than the overall width of the "leftnav" div. In this case, we will use "margin-left: 200px", which will give us 40px margin between the leftnav and the main content. The same is done to the right side. */


#site {

	
	top:185px;
	width:800px;
	z-index:2000;
	padding-top:30px;
}


#menu A:link, A:visited {BORDER-BOTTOM: none; text-decoration:none;}

#menu {padding:0; width:740px; margin:0; list-style:none; height:28px; position:relative; z-index:500; font-family:arial, 
verdana, sans-serif; background:#003340; border-bottom:1px solid #ada089; padding-left:80px;}
#menu li.top {display:block; float:left;}

#menu li a.top_link {display:block; height:25px; float:left; line-height:22px; font-size:13px; font-weight:bold; padding:0 20px 0 10px; color:#fff; text-decoration:none; border-top:3px solid #003340;}

#menu li a.top_link:hover {color:#fff; border-color:#003340;}

#menu li:hover > a.top_link {color:#fff; border-color:#003340;}

#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu a:hover {visibility:visible; position:relative; z-index:200;}
#menu li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#menu ul, 
#menu :hover ul ul, 
#menu :hover ul :hover ul ul,
#menu :hover ul :hover ul :hover ul ul,
#menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; height:0; margin:0; padding:0; list-style:none;}

#menu :hover ul.sub {left:0; top:25px; white-space:nowrap; width:120px; height:auto; z-index:300; padding-top:5px; background:url(trans.gif);}
#menu :hover ul.sub li {display:block; float:left; width:100%; height:25px;}
#menu :hover ul.sub li span {display:block; height:25px; float:left; width:90px; font-weight:normal;}
#menu :hover ul.sub li b {display:block; height:25px; float:left; width:30px; font-weight:normal;}
#menu :hover ul.sub li a {display:block; position:relative; font-size:13px; height:25px; width:120px; margin-right:-30px; line-height:25px; text-indent:10px; color:#ffffff; font-weight:bold; text-decoration:none; background:url(trans.gif);}

#menu :hover ul.sub li span a:hover { text-decoration:underline;}

#menu :hover ul.sub li:hover > span a {text-decoration:underline;}

#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:120px; top:0; white-space:nowrap; width:200px; z-index:400; height:auto;}

/* Third level flyout drops off screen so shunt second level, then third level is OK to start at top:0 */
/* menu offsets to make them run up the page */

/* Buying menu */
#menu :hover ul :hover ul.checklists
{left:165px; top:-75px; white-space:nowrap; width:200px; z-index:400; height:auto;}

#menu :hover ul :hover ul.limiting
{left:165px; top:-125px; white-space:nowrap; width:200px; z-index:400; height:auto;}

#menu :hover ul :hover ul.bespoke
{left:165px; top:-75px; white-space:nowrap; width:200px; z-index:400; height:auto;}

/* Court menu */
/* third level menu 'limits' */
#menu :hover ul :hover ul :hover ul.limits
{left:165px; top:-150px; white-space:nowrap; width:200px; z-index:400; height:auto;}

#menu :hover ul :hover ul.costsclaims
{left:165px; top:-300px; white-space:nowrap; width:200px; z-index:400; height:auto;}

#menu :hover ul :hover ul.hearings
{left:165px; top:-225px; white-space:nowrap; width:200px; z-index:400; height:auto;}

/* Subjects we can help with menu */
#menu :hover ul :hover ul :hover ul.expenses
{left:180px; top:-250px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul :hover ul.food
{left:180px; top:-200px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.consumer
{left:165px; top:-200px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.personal
{left:165px; top:-250px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.established
{left:165px; top:-225px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.leases
{left:165px; top:-100px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.finances
{left:165px; top:-225px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.looking
{left:165px; top:-200px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.wills
{left:165px; top:-225px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.signingdocs
{left:165px; top:-150px; white-space:nowrap; width:200px; z-index:400; height:auto;}
#menu :hover ul :hover ul.foreignstuff
{left:165px; top:-100px; white-space:nowrap; width:200px; z-index:400; height:auto;}

/* using bottomup2 overrides the negative left margin */
#menu :hover ul :hover ul :hover ul.bottomup2
{left:165px; top:-150px; white-space:nowrap; width:200px; z-index:400; height:auto;}




#menu :hover ul.wide {width:150px;}
#menu :hover ul.wide li span {width:120px;}
#menu :hover ul.wide li a {width:150px;}

#menu :hover ul.xwide {width:170px;}
#menu :hover ul.xwide li span {width:140px;}
#menu :hover ul.xwide li a {width:170px;}

#menu :hover ul.xxwide {width:200px;}
#menu :hover ul.xxwide li span {width:155px;}
#menu :hover ul.xxwide li a {width:200px;}


#menu :hover ul.narrow {width:90px;}
#menu :hover ul.narrow li span {width:70px;}
#menu :hover ul.narrow li a {width:90px;}

#menu :hover ul.narrow :hover ul,
#menu :hover ul :hover ul.narrow :hover ul,
#menu :hover ul :hover ul :hover ul.narrow :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul.narrow :hover ul
{left:90px;}

#menu :hover ul.wide :hover ul,
#menu :hover ul :hover ul.xwide :hover ul,
#menu :hover ul :hover ul :hover ul.xwide :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul.xwide :hover ul
{left:145px;}


#menu :hover ul.xwide :hover ul,
#menu :hover ul :hover ul.xwide :hover ul,
#menu :hover ul :hover ul :hover ul.xwide :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul.xwide :hover ul
{left:165px;}

/*Make a menu flyout to the left when we run out of screen space */
#menu :hover ul :hover ul.flyleft
{left:-165px; top:0px; white-space:nowrap; width:200px; z-index:400; height:auto;}

/* Third level menu need small indent */
#menu :hover ul :hover ul :hover ul.flyleftthird
{left:-145px; top:0px; white-space:nowrap; width:200px; z-index:400; height:auto;}


#menu li > span {
background: url(images/tab-midleftb.png);
}
#menu li > b {
background: url(images/tab-midrightb.png);
}
#menu li.fly > b {
background: url(images/tab-midright-subb.png);
}



#menu li.subtop > span,
#menu li.flytop > span { 
background:url(images/tab-topleftb.png);
}
#menu li.subtop > b {
background:url(images/tab-toprightb.png);
}

#menu li.flytop > b {
background:url(images/tab-topright-subb.png);
}

#menu li.subbot > span,
#menu li.flybot > span {
height:35px !important; background:url(images/tab-botleftb.png) no-repeat;
}

#menu li.subbot > b {
height:35px !important; background:url(images/tab-botrightb.png);
}
#menu li.flybot > b {
height:35px !important; background:url(images/tab-botright-sub.png);
}


#content
{
margin-left: 220px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 0em 1em 1em 1em;
max-width: 36em;
min-width:0%;
color: #333333;
min-height: 500px; /*375*/
}
  
/* =a */
a:link { color : #000000; text-decoration : none; }
a:hover { color : #666666; }
:-moz-any-link:focus {
  outline: none;
}

a:active, a:focus, a:visited  { color: #000000; text-decoration : none; }
  A {	TEXT-DECORATION: none} 
  A:link, A:visited {	COLOR: #000000;	BORDER-BOTTOM: #555 1px solid}
  
#menu  A:link, A:visited {  BORDER-BOTTOM: none}  
blockquote A:link, A:visited {  BORDER-BOTTOM: none}  
#imagetagline A:link, A:visited {  BORDER-BOTTOM: none}  
#quicklinksbody A:link, A:visited {  BORDER-BOTTOM: none}  
/* =body  text-align center is a hack for IE5 down*/
/* body { font : 76%/160% Tahoma, Verdana, Arial, sans-serif;  color : #5a1c46; text-align : center; } */



 UL {	LIST-STYLE-TYPE: none;
 margin-left: 0px;
 }  
 ul li a:visited {BORDER-BOTTOM: #555 1px solid;}
  #menu  ul li a:visited {BORDER-BOTTOM: none;}

  
 
  /* above a:link did not include a:visited */
 
/* =body */
body { font : Tahoma, Verdana, Arial, sans-serif;
}


#container
{
width: 800px;  /*85%*/
margin: 2px auto;
background-color: #fff;
color: #000;
border: 0px solid gray;
line-height: 130%;
text-align:left;
font : 76%/160% Tahoma, Verdana, Arial, sans-serif;  color : #000000;
}

#masthead
{
	padding: 0.5em;
	background-color: #fff;
	text-indent:-9999px; 
	background : url(images/logo6.gif) no-repeat;
	height:100px;
	border-bottom-width: 1px;
	border-bottom-style: none;
	border-bottom-color: gray;
	width:600px;

}

#masthead h1 {

}

#masthead a
{    position: absolute; 
	  top: 0px;    
	  left: 50px; 
	  width:400px; 
	  height:100px; 
	  border-bottom:none;
	  text-align:right;
	  }
	   


/* For H1 tag in banner, we want the words to sit .5em in from the top and left edge of the div. Browsers add different amounts of padding above an H1, it is easiest to remove all padding and margin from this H1 and let the div provide the padding */
#masthead h1
{
padding: 0;
margin: 0;
display: none;
}

#logo {
	/*background:url(images/crownlogo4.gif) 95% 100% no-repeat;
	height:65px;*/
}

  #googlesearch {

	position:relative;
	left:567px;
	margin:0px;
	padding:0px;
	width:230px;
	margin-top:50px;
	text-indent:0px;
		}

#blog a {position: absolute; 
	  top: 0px;    
	  left: 0px; 
	  width:130px; 
	  height:40px;
}
	
	 #contactme {
	background:url(images/contactme.gif) 95% 100% no-repeat;
	height:40px;
	width:180px;
	position:relative;
	color:#ffffff;
	top:50px; /*use 10px to put blog or another item back in above*/
	left:610px;
	}
	
#contactme h3{

text-indent:-300px;
/*background:url(images/crownlogo4.gif) 100% 100% no-repeat;
*/}

#login 
{	
RIGHT: 50%;	
WIDTH: auto;	MARGIN-RIGHT: -370px;	
position:absolute;
TOP: 17px;
text-decoration : none;
text-align:right;
background:url(images/crownlogo4.gif) 95% 100% no-repeat;
	height:65px;

}


#maintitlecontent
{
/*background-color: #ada089;*/
background: url(images/topbrownbar.gif)  no-repeat;
}

#homemaintitlecontent
{
background: url(images/topbrownbar.gif)  no-repeat;
margin-bottom:40px;
z-index: 3000;
}

#homemaintitlecontent h3
{
margin-left:60px; /*90*/
}
#homemaintitlecontent  A:link, A:visited {  BORDER-BOTTOM: none}  

.newsContainer {
		padding-bottom: 1em;
		/*border-bottom: 1px solid gray;*/
		margin-bottom: 2em;
		margin-top: 1em;
		}		
		
.newsContainer h3 {
	color:#52657b;
}		


	
		h3 {
		font: bold 1.1em/1.54545454em Verdana, Arial, sans-serif;
		margin-bottom: 1px;
		margin-top: 1.2em;
		}
		
		
#articles  li {
  color:#000000;
  }
	
	#articles ul {
  margin:1em 0 1.5em;
  padding:0;
  font-size:110%;
  list-style:none;
  display:inline;
  }
  #articles ul li {
  margin:0 0 0em;
  padding:0 0 0 0px;
  line-height:1.5em;
  }
  

#articles  {
  /*background: url(images/170bttms.gif) no-repeat  -680px bottom;*/
  margin-left: -15px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  width: 170px;
  }
  
  #quicklinks  {
  margin-left: -15px;
  width: 170px; 
  }
	
	#articles h3, #quicklinks h3 {
  background: url(images/topbrownbar170.gif) no-repeat top; 
/*  background: url(images/170tops.gif) no-repeat -680px top; */
  padding-right: 10px;
  padding-left: 10px;
  color: #fff;
  margin-top: 0px;
  }

  #articlesbody {
	
	padding:10px 5px 10px 15px;
	line-height:1.5em;
	text-align:justify;
	background-image: url(images/170bttms.gif); /*was 170white.gif */
	background-repeat: no-repeat;
	background-position: 0px bottom; 

   }

	#quicklinksbody {
	line-height:1.5em;
	text-align:justify;
	background-repeat: no-repeat;
	text-align:left;
	
	padding:10px 5px 5px 5px;
	background-image: url(images/170bttms.gif);
	background-position: -340px bottom;

	}
  
/*  #articles a:link, #linkList a:visited #lselect {display:block;}  */	
 #articles a:link,  a:visited  {display:inline;}

/* use a div to create a line */
#myline {
padding: 0;
margin: 0;
	background-color: #000000;
	float: right;
	height: 20px;
	width: 100%;
}

/* To float the left nav, we need to use the rule: "#leftnav {float: left;}". When a div is set to float, a width must also be included, so we can add another declaration: "width: 160px;". 
Next, we set the margin to "0", add 1em of padding (which will move the text away from the edges of the div). */

#rightnav
{
float: left;
width: 210px;
margin: 0;
margin-left:-20px;
padding: 0em 0em 0em;
}

#imagetagline
{

bottom: 0;
left: 0;
height: 50px;
width: 200px;
background-image: url('images/transparent.png');

}

#lefttnav
{
width: 155px; /* width: 160px; */
margin: 0;
padding: 0em 0em 0em 1em;
float: right;
}





/* To style the footer, we first need to set it to "clear: both". This is critical, as it will force the footer below any floated elements above */

#footer
{
clear: both;
margin: 0px;
/*padding: .5em;*/
color: #FFF;
text-align:center;
background-color: #003340; /*#853514*/
border-top: 1px solid gray;
vertical-align:middle;
}

 
#footer a:link{
	color : #FFFFFF;
	text-decoration : none;
	display:inline;
 
}
#footer a:visited {
	color : #FFFFFF;
	display:inline;
}

 #footer  A:HOVER {color:#cccccc;}
/* To remove the space above content in the "lefnav", "rightnav" and "content" divs, use the following rules: "#leftnav p, #rightnav p { margin: 0 0 1em 0; }" and "#content h2 { margin: 0 0 .5em 0; }". 

Browsers use different amounts of margin above paragraphs and headings. It is safe to remove all top margins, as long as there are bottom margins to keep the paragaphs and headings seperate from elements below them. */


#leftnav p, #rightnav p { margin: 0 0 1em -2em; }
#childsplay{
margin-top:0px; 
padding-left:60px;
padding-bottom:25px;} /*35*/
#rightnav p {text-indent:-9999px;
background : url(images/boy-mobile-phone.jpg) no-repeat;
height: 350px; /*380x228*/
width: 224px;
}

/*#content h2 { margin: 0 0 .5em 0; }*/
#content h3 {
MARGIN-TOP: 0px;	
PADDING-LEFT: 4px;	
FONT-SIZE: 110%;	
MARGIN-BOTTOM: 5px;	
PADDING-BOTTOM: 1px;	
COLOR: #ffffff;	
PADDING-TOP: 0px; 
}

#addresses a:link, a:visited {
			display:inline;
						}
						
blockquote {

/*  background: url(images/close-quote.gif) no-repeat right;*/
width:165px;
margin-left:20px;
font : Tahoma, Verdana, Arial, sans-serif;
}

blockquote:first-letter {
  background: url(images/open-quote.gif) no-repeat left top;
/*font:  1.8em Georgia, "Times New Roman", Times, serif;*/
	font : 1.2em/1.6em Tahoma, Verdana, Arial, sans-serif;
  padding-left: 18px;
/*  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;*/
}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
/*	background-color: #eee; fafaf1*/
	background-color: #fff;
	padding: 5px;
	opacity: 0.85;
	font : Tahoma, Verdana, Arial, sans-serif;
	font-size:10px;
	-moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
}

#tooltip div { margin: 0;}
 
 #tooltip h3 {
 margin:0;
font-size:8pt;
font-weight:normal;
}


#tenpoints { }