/* This style sheet was written by Paul Dell and was distributed  with the ATTORNEY Template available at http://www.dellwebsites.com 
- This comment should remain intact though you are free to edit the style sheet as you see fit. */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6{  /* set everything to zero for a good  
starting point this selector at the top is like belt and braces,
you can see immediately when desiging if you haven't set margins and padding
to an element as they become all scrunched up together.*/
margin: 0; /* sets the margins to zero on the body */
padding: 0; /* sets the padding to zero on the body */
border: 0; /* deletes any borders */	
}
body {
    background-color: #2C2421; /*sets the body background colour */
    background-image: url(images/background.gif);/*body background image */
	font-family: Arial, Helvetica, sans-serif;/*body font style */
	font-size: 90%; /*Font size*/
	margin: 0 auto; /*sets the page margins to zero */
	min-width: 760px; /*minimum width anything under you get scroll bars this prevents our page becoming smaller than the wrapper */
	padding: 0; /*padding set to zero*/
	text-align: center; /* hack for IE to make sure the layout is centred*/
	}
	/*the wrapper div is our container div, all other divs are wrapped within the wrapper*/
#wrapper {
	background-color: #666; /*sets the wrapper background colour */
	margin: 0 auto; /* centres the wrapper div,  auto determines the left and right margins evenly*/
	text-align: left; /*aligns the text left */
	width: 700px;/*sets the width to 700px */
	background-image: url(images/content-background.jpg); /*this is the background image, we have created a fake left column */
	border-width: 1px 2px;/*sets the border widths */
	border: solid #000;/*sets the border to solid and the colour of the border to black */
}

/*start of navigation The UL element defines an unordered list. The element contains one or more LI elements that define the actual items of the list.*/
#topnav {
	width: 700px;/*sets the nav to a width of 700 pixels */
	height: 30px;/*sets the nav height to 30 px */
	background-image: url(images/navigation-background.jpg);/*nav background image */
	background-color: #302B25;/*sets the background colour of the Nav */
}

#topnav li {
	float: left;/* floats the li left*/
	background-color: #374D41;
	list-style-type: none;	/* removes he bullet style on an individual list item*/
}#topnav ul {
	height: 30px;
	text-align: center;/*aligns the text center */
	background-color: #8AAC9B; /*sets the background colour */
}#topnav ul li a {
	background-image: url(images/navigation-background.jpg);/*background image of our links */
	color: #EDF1F2;/*link text colour */
	display: block;/*  A block element displays as a block, it forces a line break. So think of a block as a brick :)*/
	font-weight: bold;/*sets the set to bold */
	font-size:85%;/*sets the font size */
	height: 30px; /*sets the height of the links */
	padding: 0;/*zeroes the padding*/
	text-decoration: none; /*removes the underline from the links */
	width: 100px; /*sets the link widths to 100px the nav div is 700 pixels wide and we have seven links of 100 pixels, yes you guessed it, that equals 700 */
	margin-top: 5px;/*sets the top margin */
	padding-top: 8px;/*sets the padding to 8pixels */
}

#topnav ul li a:hover,
#topnav ul li a:focus {
	background-image: url(images/navigation-background-hover.jpg);
	color: #C7D8CF;
	display: block;
	margin-top: 5px;
	padding-top: 8px;
	background-color: #2B2320;
}
#topnav a:active {
	color: #FFF;
	display: block;
	background: url(images/navigation-background.jpg);
}
#header {
	background-image: url(images/header3.jpg);/*the header div is 700 pixels wide and we have inserted a background image that is 700 pixels wide by 230 pixels */
	/*note the dimensions here are the same as our image "header.jpg" */
	height: 230px;
	
/*content div which holds the contentleft div and right div*/
}
#content {
}
/*below you notice that our contentleft div and  right div have a global width of 685 pixels, we have floated the contentleft div left and the right div is floated right*/
#content .contentleft {
   float: left;
   width: 485px;
   line-height: 130%;/*sets the line height to 130% as to make the text easier to read*/
   background-image: url(images/p-background.jpg);/*The background-image on this div is made by a repeating .jpg placed on the contentleft div.*/
}
#right {
	width: 200px;
	float: right;
}
#footer {
	text-align: center;/*centers the text in the footer div*/
	background-color: #000;/*sets the background to black*/
	height: 30px;/*sets the height of the footer div*/
}
/*this is our clear div */
.clear {
	clear: both;
	background-repeat: no-repeat;
	height: 25px;
}
/*.toprounded is self explanatory as is .toproundedcornerbottom */
.toproundedcorner {
	background-image: url(images/rounded-background.jpg);
	height: 65px;
	width: 485px;
}	
.toproundedcornerbottom {
	background-image: url(images/rounded-background-bottom.jpg);
	height: 40px;
	width: 485px;
}
/*notice below we have positioned our text within .contentleft*/
#content .contentleft p, h1, h2 {
     margin: 0px 5px 0 20px
    ;font-size: 90%;
}
h1 {font-size: 110%;color: #5E5D4B; /*sets the colour and size of heading one */
}
h2 {font-size: 100%;color: #5E5D4B; /*sets the colour and size of heading two */
}
#right p{
	margin:1px 3px 0 4px;/*sets the p margin to 1px top 3px right 0 px bottom 4px left*/
	font-size: 85%;/*sets size of p element */
	color: #FFF; /*sets the colour to white */
}
/*below is the text setting for the footer div, font is set to 90% size, white and we have added 3px padding to give the text some air */
#footer p {
	font-size: 90%;
	color: #FFF;
	padding-top: 3px;
}

/*We have explained all there is to explain here and we have ommitted some comments which just repeat
themselves please do not contact us for any answers that you are able 
to obtain from here http://www.w3schools.com/css/default.asp  we cannot possibly reply to questions
that are available elsewhere as we do not have the time and in any case Pablo is probably drunk ;)
Here is a link to get you started, remember to read, and then read again.
http://www.w3schools.com/css/default.asp  Have fun and we wish you the best of luck*/