/* main css file for bath-heritage.co.uk web site ... */

/*
The 'Forward slash and star' code that 'wraps' this set of paragraphs allows you to
put comments into your stylesheet to remind you how it works when you return to it.
Everything else here is the stylesheet itself.

The stylesheet contains 'Rules' - sets of instructions in a particular format that
control presentation of an HTML element (and possibly its children)

CSS Rules consist of two parts:

The 'Selector' - the HTML element in question

The 'Declaration' - instructions as to the display of the particular element.

Stylesheets are simple, but very particular about syntax - the declaration being 
enclosed in curly brackets, different parts of the declaration separated 
by colons or semicolons. If something's not working and you've worked on the 
stylesheet by hand, check the punctuation ...
*/

/* You can set margins and a background for page elements, including the body of the page.
   ie6 has bugs when dealing with negative margin settings - avoid them. */

body         { 
               color: #666666;
	       background: #ffffff;
	       background-image: url('Media/redbgd_streak3.gif');
               font-family: verdana, arial, sans-serif;
	       font-size: 0.95em;
	       text-align: left;
	       padding-right: 10% 
                }
			   
/* Set specific qualities for links ...                 */
				  
A:link          { color: #0000ff;
                  background: transparent;
                  text-decoration: none   }
				  
A:visited       { color: #0000ff;
                  background: transparent;
                  text-decoration: none     }

A:active        { color: #cc3366;
                  background: transparent;
                  text-decoration: none     }
				  
/* Stylesheets allow you to include effects that otherwise need ponderous programming or worse. 
This one highlights links when your visitors' mouse is over them. It breaks IE6 slightly so is commented out here 
				  
A:hover	        { color: #0000ff;
                  background: #ffdddd;  }

and instead we'll have:				  */
				  
				  
				  
A:hover	        { color: #cc3366;
                  background: transparent;
				  text-decoration: underline  }

				  			  
/* You can instruct that certain paragraphs display in a different way to the rest */
				  
/* Font sizes. You can set these in absolute terms using 'px' (for pixels)
   but it's much better to use relative units such as 'em' (stands for ... em!) */
				  
/* A very pale paragraph used as an end-quote */
				  
p.wash          { color: #BBBBBB;
                  background: transparent;
				  font-style: italic;
                  font-weight: normal;
				  margin-top: 0em; }
				  
p.footermenu    { margin-bottom: 0em;
                  color: #cc3366;
                  background: transparent;
                  text-align: right;}

/* Control the appearance of headings ...
   ... eg H1 has a largish, bold font, using Arial if available or any san serif font
   the margins are set at top, bottom and left, and there is a one pixel wide black border
   The 'padding' is the space surrounding the heading outside the border and this
   is also set explicitly */
                
H1                { font-size: 1.9em;
                    font-family: arial, sans-serif;
                    font-weight: bold;
                    margin-top: 0em;
                    margin-bottom: 0em;
                    margin-left: 5%;
                    color: #cc3366;
					background: transparent;
                    border-width: 1px 1px 0px 1px;
                    border-style:solid;
                    border-color: #000000;
                    padding: 0% 0% 0.072% 0.6%;
                    }

H2  	     	{ color:#FFFFFF;
                  background: transparent;
                  background-color: #cc3366;
                  font-family: arial, sans-serif;                 
                  font-size: 1.05em;                                
                  font-weight: bold; 
                  text-align: left;
                  margin-left: 5%;
                  margin-bottom: 0em;
                  margin-top: 0em;
                  border-width: 1px;
                  border-style: solid;
                  border-color: #000000;
                  padding: 0% 0% 0% 1%;

				      }
                                               
H3  	     	{ color: #cc3366;
                  background: transparent;
                  font-family: arial, sans-serif;
                  font-weight: bold;
                  text-decoration: none;
                  font-size: 1.3em;
                  margin-left: 0%;
                  margin-bottom: -0.7em;  }
				  
H4                { color: #cc3366;
                    background: transparent;
                    font-family: arial, sans-serif;
                    font-weight: bold;
                    text-decoration: none;
                    font-size: 1.05em;
                    margin-left: 0%;
                    margin-top: 1.5em;
                    margin-bottom: -0.7em; }
                    


/* Control things like the margins around images       */
                    
IMG             { margin-left: 3em;
                  margin-bottom: 1em;
                  border-width: 0 0 0 0;
                  background: transparent;
                  margin-top: 1em; }

/* Influence the presentation of lists                 */

DL              { margin-left: 5em; }

DT              { color: #cc3366;
                  background: transparent;
                  font-style: italic;
                  font-weight: bold;
                  margin-top: 0.8em }

DD              { font-style: normal;
                  margin-bottom: 0.8em }
				  
ul li            { list-style-type: circle;
                  margin-bottom: 0.4em;
                  margin-top: 0.4em;  }

/* Control the appearance of portions of text using spans */
				  
SPAN.ghost	    { color: #DDDDDD;
                  background: transparent;
	              font-style: italic;   }
				  
SPAN.important   { /* Great emphasis   */ 
                   color: #666666; 
				   background: #ffdddd; }

/* Stylesheet rules may only work in certain places - this one works in IE */
				  
HR              { color: #cc3366;
                  background: transparent; }

/* Influence blocks of text by wrapping them in a 'DIV'. This one creates a
   text box with a thin grey border and a pale background */
				  


DIV.box         { padding: 1% 4% 1% 4%;
                  width: 500px;
				  color: #666666; 
                  background-color: #ff0000;
                  margin: 0% 0% 0% 0%;
                  margin-right: 0%;
                  border-style: solid;
                  border-width: 1px;
                  border-color: #dddddd; }
				  
/* ... and this one a plain box the same width and offset as the page heading ...
   ... it's been used to contain the links.  */
				  
DIV.menubar     { font-size: 0.88em;
                  text-align: left;
                  
                  color: #cc3366;
		  background-color: #ff0000;
                  border-width: 1px 1px 0px 1px;
                  border-style:solid;
                  border-color: #000000;
		  margin-left: 5%;
                  padding-top: 0em;
		  padding-right: 0em;
		  padding-bottom: 0.072em;
		  padding-left: 0.6em;}
				  
P.menubar       { margin-top: -0em;
                  margin-bottom: -0em;
                  }
DIV.menu {
 		  position: fixed;
		  display:block; margin: 0 0.5em;
 		  font-family: arial, sans-serif;                 
                  font-size: 1.05em;
                  text-align: left;
                  color:#FFFFFF;
		  background-color: #ffffff;
                  border-width: 1px 1px 1px 1px;
                  border-style: solid;
                  border-color: #cc3366;
		  padding-top: 0em;
		  padding-right: 0em;
		  padding-bottom: 0.072em;
		  padding-left: 0.6em;
  		  top: 300px;
  		  left: 5%;
  		  width: 9%;      /* Must be less than 10% or the menu may overlap the content */
}

DIV.menu a:link { text-decoration: none; color: #800000 }
DIV.menu a:visited { text-decoration: none; color: #0000FF }
DIV.menu a:hover { background: #cc3366; color: white }


				  
DIV.pagecontent { margin-left: 20%; }
				  
/* Simplify things by setting one style for several page elements - separate the selectors with a comma.
Here, both preformatted and text bracketted by the 'code' tag are set to appear in a green 'typewriter' sort of font */
                  
pre,code     { font-family: monospace; 
               font-size: 1.4em; 
               color: #cc3366;
			   background-color: #ffffff;}
			   
/* Mozilla and Horizantal  rules - Moz treats them like boxes with a fill ... */
			   
hr {height: 3px;
border-style: solid;
color: #cc3366;
background-color: transparent;
}

/* That's the lot. A good starting point for style sheets is to borrow one.
   Feel free to borrow this one, alter the contents, and use it in your work */