body {
  margin: 0 auto;
  padding: 0;
  border-left-style: none;
  text-align: center;
  background-color: #9999ff;
  background-image: url(../Images/blacktile.gif);
  background-repeat: repeat;
  font-family: Arial;
}

h3 {
    font-size: 0.75em;
}

li {
padding-left: 10px;
background-image: url(../Images/li.jpg);
background-repeat: no-repeat;
background-position: 0 .5em;
font-size: 0.7em;
}


#blue { 
    color: blue;
}

#topBorder {
  font-size: small;
  color: #cccccc;
  text-align: center;
  background-image: url(../images/yellowFade.gif);
  background-repeat: repeat-x;
}

#topBanner {
  font-size: small;
  color: #cccccc;
  /* text-align: center; */
  background-image: url(../Images/treewall1.jpg);
  background-repeat: repeat-none;
  height: 185px;
  width: 750px;
}
#topBanner h1 {
    text-align: left;
    font-size: small;
    margin: 10px;
    text-transform: uppercase;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #ffffff;
    padding-top: 130px;
}

#contactDetails {
    padding-left: 5px;
}

#wrapper {
    margin: 0 auto;
    width: 751px;
    text-align: left;
    position: relative;
    height: inherit;
    background-color: white;
}
#contentArea {
    margin: 20px 5% 5px 5%;
    padding: 15px 0px 5px 45px;
    width: 45%;
    /* clear: left; */
    float: left;
    background-color: #fcf9ee;
    border-radius: 6px;
    border: 1px solid grey;
}

#leftPanel {
  margin: 3px;
  width: 35%;
  background-color: #ffffff;
  float: left;
}

#rightPanel {
    padding: 15px;
    margin: 15px 5px 5px 15px;
    width: 90%;
    float: left;
    background: white;
  
}
#rightPanel h1 {
  font-family: Georgia;
  font-size: medium;
  font-style: italic;
}
#rightPanel p {
  font-family: Verdana;
  font-size: 0.7em;
}
#rightPanel h2 {
  /* font-family: Georgia; */
  font-size: 1.5em;
  font-style: italic;
}

#rightPanel li {
    padding: 0px 0px 0px 5px;
}


#footer {
  width: 750px;
  clear: both;
  background-color: #ffffff;
}

#footer p {
  font-size: small;
  color: #cccccc;
  text-align: center;
}
#photo {
  margin: 100px 100px 100px 0;
  float: left;
}
#contentArea p {
    font-size: small;
    padding: 5px 5px 5px 5px;
}
#contentArea h1 {
  font-family: Arial;
  font-size: large;
  letter-spacing: 1px;
  font-style: italic;
  padding: 5px 5px 5px 5px;
}
#contentArea h2 {
  font-size: 1.2em;
  font-style: italic;
  padding: 5px 5px 5px 5px;
  /* font-family: Georgia; */
}
#contentArea h3 {
  font-size: small;
  font-style: italic;
  /* font-family: Georgia; */
}
#contentArea a {
  text-decoration: none;
}

form {
    color:darkgrey;
}

.datatable {
border: 1px solid #338ba6;
color: #444444;
}

.datatable caption {
text-align:left;
color:#333333;
}

tr, th, td {
font-size: small;
}

.datatable th {
background-color:#777777;
}

@media (max-width: 1600px) { 	/*Below 1600 do this*/

        body {
           font-size: 1em;
        }

	.contents {
	   position: relative;
	}

	#headerArea {
	    width: 100%;
	}

	
	#navigation {
            /*float: left;*/
	    padding: 15px 5px 5px 5px;
	   width: 100%;
	}

	#contentArea {
	    float: left;
	    width: 50%
	}

        #rightPanel {
           float: left;
	   width: auto;
	   border-radius: 6px;
	   border: 1px dashed grey;
	   padding: 5px 5px 5px 5px;
        }

	li {
	    font-size:0.8em;
	}

        #navigation li {
           /* background: grey; */
           /* color: grey; */
           /* display: block; */
           /* border-radius: 46px; */
           /* /\* border: 1px solid orange;*\/ */
	   /* border: 2px solid blue; */
	   /* margin: 5px 5px 5px 5px; */
           /* padding: 5px 5px 5px 5px;  */
           /* width: auto; */
           /* height: 25px;  */
           /* color: red;  */
           text-decoration: none;
        }
        #footer li {
           background: black;
           color: grey;
           display: inline;
           border-radius: 6px;
	   border: 1px solid #73AD21;
           padding-left: 5px; 
           width: auto;
           height: 15px; 
           text-decoration: none;
        }

	ul {
	    /*width: 400px;*/
	}
}


@media (max-width: 1279px) { 

        body {
           font-size: 1em;
        }

	.contents {
	   position: relative;
	}
	#navigation, #headerArea{
           float: left;
	   width: 100%;
	}

        #contentArea {
            width: 50%;
	    float: left;
       }

        #rightPanel {
           float: left;
	   width:90%;
	   padding: 5px 5px 5px 5px;
        }

	#rightPanel ul {
	   

	}

	#rightPanel li {
	    text-decoration: none;
	}

        #footer li {
           background: black;
           display: block;
           border-radius: 3px;
	   border: 1px solid #73AD21;
           padding-left: 5px; 
           width:auto;
           height: auto;  
           color: white;
        }
}

@media (max-width: 600px) { 

    #footer li {
        display: block;
    }
    
    #navigation, #contentArea, #headerArea, #rightPanel{
	clear: left;
        float: left;
	width: 100%;
    }
    
}

@media (max-width: 415px) { 

    #footer li {
        display: block;
    }
    
    #navigation, #contentArea, #headerArea, #rightPanel{
	clear: left;
        float: left;
	width: 90%;
    }
    #navigation li {
        /*background: black;*/
        display: block;
        /* border-radius: 3px; */
	/* border: 1px solid grey; */
        padding-left: 5px; 
        width:100%;
        height: auto;  
        color: blue;
    }
}

@media (max-width: 360px) { /* Below 360 do the following */

        body {
           font-size: 1em;
        }


	#navigation, #contentArea, #headerArea, #rightPanel{
	    clear: left;
            float: left;
	    width: 90%;
	}

        #navigation li {
           /*background: black;*/
           display: block;
           /* border-radius: 3px; */
	   /* border: 1px solid grey; */
           padding-left: 5px; 
           width:100%;
           height: auto;  
           color: blue;
        }

        #footer li {
           background: black;
           display: block;
           /* border-radius: 3px; */
	   /* border: 1px solid #73AD21; */
           padding-left: 5px; 
           width:auto;
           height: auto;  
           color: black;
        }
}