/* mainmain.css

STYLE SHEET FOR the main main on my website 
Created by Teresa Goatham
www.teresastree.co.uk

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	
Notes

*/

/* --------- 1. defaults  --------- */
#page { width: 875px; }

#main,
#maintree { width:670px; margin: 0px; 
			background: #fff url(http://www.goatham.eclipse.co.uk/images/webdesign/vert_bar2_DtoaT.gif) repeat-y 0px 0px; 
		}
#text	{	width:600px; margin: 25px; margin-left: 45px;	} 

#foot	{	background: #fff;	margin-left: 45px;	}
#footer { width:605px; height:200px; background-color: #ffffff; 	 }					 
#side { float: right; }
#header { width:875px; height:150px; background-color: #A52A2A; 	 }

#header h1, #header p {color: white; margin: 5px; margin-top: 2px;	 } 

div#main hr,
div#maintree hr	{ color: #95675e;
				width: 575px; 
				}
div#main h1,
div#maintree h1	{ background-color: #95675e;	
				color: #fff;
				font:  bold 1.5em Georgia, "Lucida handwriting", serif;
				text-align: left;
				margin: 0px 0px 5px 0px;
				padding: 0px 0px;
				text-indent: 0px; 
				}

div#main h2,
div#maintree h2	{	
				color: #95675e;
				font:  1.4em Georgia, "Lucida handwriting", serif;
				text-align: left;
				text-indent: 0.5em; 
				margin-bottom: 5px;
				margin-top: 0px;
			}

div#main h3,
div#maintree h3	{	
				color: #a8746a;
				font:  bold 1.0em Georgia, "Lucida handwriting", serif;
				text-align: left;
				text-indent: 0.5em;
				margin-bottom: 5px;
				margin-top: 3px; 
			}
div#main h4	{	
				color: #000;
				font:  bold 0.9em Georgia, "Lucida handwriting", serif;
				text-align: left;
				text-indent: 0.5em;
				margin-bottom: 8px;
				margin-top: 8px; 
			}


			   
div#main p,
div#maintree p,
div#main td		 {	font: normal 0.75em/1.5em Georgia, "Lucida handwriting", serif; 
					text-align: left;
					text-indent: 0px;
					margin-bottom: 10px;
					margin-top: 0px;
					margin-left: 8px;
					margin-right: 8px; 
			} 


div#main li	{	font: normal 0.75em/1.5em Georgia, "Lucida handwriting", serif;
					text-align: left;
					text-indent: 0px;
					margin-bottom: 10px;
					margin-top: 0px;
					margin-left: 8px;
					margin-right: 8px; 
			}			
		
.emphasis {color: #95675e; font-weight: bold; }


			
div#main p.imageAck  	 {	text-align: right; 
				font: normal 0.58em arial, sans-serif; 
				color: #bebebe; 
				line-height: 0.7em; 
				padding:0; 
				margin:2px 0 0 0;
				float: right;
				clear: right;
				display: block;
			}	
					 				
			  
	/* font: style variant weight size/line-ht family */
		
/*  --------- 2. structure  --------- */
div#side	{	width: 200px; height: 1200px;	}
.clearboth		{	clear: both; 	}
.clearright		{	clear: right; 	}
.clearleft		{	clear: left; 	}

.contact	{border-bottom:   1px solid #FDDDBD;
			width: 555px;
			}  
div#footframe	{ float: right; margin-right: 25px;}			
/* ---------- 3. links and navigation ---------- */
p.imglink {	border-bottom: 0;	}

a.imglink {	border-bottom: 0;	}
a:link.imglink {	border-bottom: 0;	} 
a:visited.imglink {	border-bottom: 0;	}
a:focus.imglink {	border-bottom: 0;	}
a:hover.imglink {	border-bottom: 0;	}					

/* set fields common to all main text links and defaults (color and border-bottom) for where the specific don't work - ie. firefox - till have worked out why */ 
#mainfoot a:link,
#maintree a:link		{	font-family: inherit; 
			font-weight: inherit;
			text-decoration: none;
			color: #80405C;
			border-bottom: 1px solid #80405C;
		}
#mainfoot a:visited,
#maintree a:visited	{	font-family: inherit; 
			font-weight: inherit;
			text-decoration: none;
			color: #80405C;
			border-bottom: 1px solid #ecdedd;
		}
#mainfoot a:focus,
#maintree a:focus	{	font-family: inherit; 
			font-weight: inherit;
			text-decoration: none;
			color: red;
			border-bottom: 2px solid #80405C;
		}
#mainfoot a:hover,
#maintree a:hover	{	font-family: inherit; 
			font-weight: inherit;
			text-decoration: none;
			color: #80405C;
			border-bottom: 2px solid #80405C;	
		} 

/* set fields common to header text link(s) and defaults (color and border-bottom) */ 
#header a:link		{	font-family: inherit; 
			font-weight: inherit;
			text-decoration: none;
			color: #ffffff;
			border-bottom: 1px solid #ffffff;
		}
#header a:visited	{	font-family: inherit; 
			font-weight: inherit;
			text-decoration: none;
			color: #ffffff;
			border-bottom: 1px solid #ffffff;
		}
#header a:focus	{	font-family: inherit; 
			font-weight: bold;
			text-decoration: none;
			color: #ffffff;
			border-bottom: 2px solid #ffffff;
		}
#header a:hover	{	font-family: inherit; 
			font-weight: bold;
			text-decoration: none;
			color: red;
			border-bottom: 2px solid red;	
		} 		

/* prevent dashes underlinging image links */
div#main p.imglink {	border-bottom: 0;	}

div#main a.imglink {	border-bottom: 0;	}
div#main a:link.imglink {	border-bottom: 0;	} 
div#main a:visited.imglink {	border-bottom: 0;	}
div#main a:focus.imglink {	border-bottom: 0;	}
div#main a:hover.imglink {	border-bottom: 0;	}	 

div#main.arrows a:link,	  
		a:visited	{	color: #000000;
					}
div#main.arrows	a:focus,
		a:hover		{	color: red;
					}
					
div.small_tab .rowcol td {background-color: #faf4f3;
			}					
					
a.externalLink {
							background: url(http://www.goatham.eclipse.co.uk/images/webdesign/external-link.gif) 100% 50% no-repeat;
							padding-right: 13px;
		}	

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

a.squarebutton{
background: transparent url('://www.goatham.eclipse.co.uk/images/webdesign/buttons/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('http://www.goatham.eclipse.co.uk/images/webdesign/buttons/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}
/* ---------- end of CSS from Dynamic drive ---------- */


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

div#foot a.ovalbutton{
background: transparent url('http://www.goatham.eclipse.co.uk/images/webdesign/buttons/oval-orange-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Georgia; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

div#foot a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

div#foot a.ovalbutton span{
background: transparent url('http://www.goatham.eclipse.co.uk/images/webdesign/buttons/oval-orange-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

div#foot a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

div#foot a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

div#foot.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
style="float: left;"
}

/* end of Dynamic Drive oval buttons code */

/* ---------- 4. fonts ---------- */
/* ---------- 5. images ---------- */

/* ---------- not sure I will use on my website ??? ---------- */		
div#main .consider  {	background-color: #FFFFCC;
						background-image: url(http://www/images/webdesign/backgrounds/ivory.gif) ; 
					   	margin: 2px; 
						border: 1px solid #95675e; 
						padding:3px; 
						word-spacing: 1pt; 
						font: italic 0.9em Georgia, "Lucida handwriting", serif;
						text-align: left;
						}								
div#main p.consider 			{	color: #95675e;
									 
								}