body {
    margin: 0px;
    /* add image to edge if wanted by inserting: background-image: url(gradient-bg.jpg) ; */
    background-color: #99ffcc;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 80%;
   }



#sidebar {
    
    position: absolute;
    top: 2px;
    left: 10px;
    width: 230px;
    margin-top: 0px;
    margin-bottom: 300px;
    margin-right: 50px;
    margin-left: 10px;
    padding-top: 0px;
    border: solid 0px black;
    background-color: #99ffcc;
    font-size: 100%;

    }

#main {
    position: absolute;
    top: 30px;
    left: 270px;
    padding-bottom: 1px;
    background-color: #99ffcc;
    text-align: center;
    width: 640px;

    }


#section-box {
    left: 10px;
    width: 230px;
    margin-top: 0px;
    margin-bottom: 15px;

   }  /* This box surrounds the 'You are in the ...  Section' so that the margins at the top and bottom can be set easily  */


.navlocal a {
    display: block;
    }  /* This turns the box round the text into a link, otherwise only the text is a link */



a:link {
    text-decoration: none;  /* These set the appearance of the links (no underlining etc)*/
    color: #1b593c;
    }
a:hover {
    text-decoration: none;  /* These set the appearance of the links when hovered over*/
    color: black;
    }
a:visited {
    text-decoration: none;  /* These set the appearance of the links after they are clicked*/
    color: #59816e;
    }



.navlocal:hover {
    text-decoration: none;
    color: black;
    background-color: yellow;
    }

.navlocal  {
    padding: 3px;
    margin: 4px 0px;
    border: 2px solid #66cc99;
    background-color: #66cc99;
    border-style: outset;
    text-decoration: none;
    text-align: center;
    }

#c-m-cartoons a {   /* this is added 31.08.09 to create a name title in css, as previously it's been an image on every page for some reason */
    background: url(../design/cartoons-title.gif) center no-repeat; 
    display: block ;
    width: 230px;
    height: 83px;
    margin: 0px 0px;

    }



.copyright-txt  {
    padding-bottom: 1px; 
    font-size: 0.8em;
    }

#copyright a {
    background: url(../design/copyright.gif) center no-repeat; 
    display: block ;
    width: 88px;
    height: 78px;
    margin: 0px 70px;
    }


#copyright a:hover {
    background: url(../design/copyright-hover.gif) center no-repeat;
    } 

#licence a{
          display: block;
          background: url(../design/licence-cartoon-button.png) center no-repeat;
          height: 80px; 
          font-size: 13px;
          text-align: center;
          text-decoration: none;
          vertical-align: middle; 
          }

#licence a:hover {
    background: url(../design/licence-cartoon-hover.png) center no-repeat;
    }


.nav a {
    text-decoration: none;  /*  set the links (no underlining etc) */
    color: #336666;
    padding: 0px 30px;
    margin: 4px 0px;
    border: 2px solid #66cc99;
    background-color: #66cc99;
    border-style: outset;
    }

.nav  {
    float: center;
    }

.nav a:hover {
    text-decoration: none;
    background-color: yellow;
    }





h1 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0px;
    text-align: center;
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    border-bottom: solid 0px #99ffcc;
    }

h2 {
    font-size: 1.0em;
    margin-top: 0px;
    margin-bottom: 10px;

    }

h2, p { margin-left: 0px; }

h3 {
    color: #474B94;
    font-size: 0.8em;
    font-weight: normal;
    text-align: center;
    padding-left: 20px;
    padding-bottom: 0px;
    }




h4 { 
    font-size: 0.8em;
    font-weight: normal;
    margin-bottom: 10px;
    }


h5 {
    color:  black;
    font-size: 0.8em; font-weight: normal;
    margin-bottom: 20px;

    }


h6  { 
    font-size: 0.8em; font-weight: normal;
    margin-bottom: 10px;
    }






.image{	
       /* this is all characteristics of the main image */
        border-style:outset;  /*put class between the image tags< > in the html to make the border stick to the image alone */
	border-color: #666666 #e7e7e7 #e7e7e7 #666666;
	border-width: 2px;
        margin-bottom: 20px;
      }