/* CSS Document */

/* Element formatting */
		
  
    body { 
      color: midnightblue;
      background-color: beige;
      background-image: url(../images/body_bg.gif);
			background-repeat: repeat;
    }
    
    h2, h3 {
    margin: 0.6em 0 0.2em 0;
    }

    p {
    margin: 0 0 0.5em 0;
    }
        
    .accent {
    color: darkkhaki;
    }
    
    .mobile {
    background-image: url(../images/mobile.gif);
		background-repeat: no-repeat;
		background-position: 2px left;
		font-weight: bold;
    }
	
    .phone {
    background-image: url(../images/phone.gif);
		background-repeat: no-repeat;
		background-position: 3px left;
 		font-weight: bold;
    }
	
  		#container {
			background-color: beige;
			border: 1px solid darkkhaki;
		}	
    	
		#header {
			border: 3px solid ivory;
      background-image: url(../images/HeaderImage3.jpg);
			background-repeat: no-repeat;
      }
		
		#navbar {
    border: 0px solid red;
    }
    
    #navbar ul {
    text-align: center;
    margin: 0;
    padding: 0.2em;
    list-style-type: none;
    }
		
		#navbar ul li {
    display: inline;
    }

    #navbar ul li a {
        text-decoration: underline;
        color: midnightblue;
        padding: 0.2em 1.5em;
        background-color: ivory;
        border-width: 1px;
        border-color: #ffe #aaab9c #ccc #fff;
        border-style: solid;
    }

    #navbar ul li a:hover {
        color: midnightblue;
        text-decoration: none;
        padding: 0.2em 1.5em;
        background-color: beige;
        border-width: 1px;
        border-color: #aaab9c #fff #fff #ccc;
        border-style: solid;
    }

		
		#sidebarwrapper {
			border: 0px dashed blue;
			background-image: url(../images/sb_bg.jpg);
			background-repeat: no-repeat;
		}
		
    .sidecontent {
      border: 0px solid blue;
      padding: 1.2em;
    }
    
/* formatting images in sidebar */

.sidecontent img{
    border: 1px solid darkkhaki;
    margin-bottom: 0.2em;
    }

/* Formatting up the div ID sidebarnav  */
/* definition list for hover effect */ 

 #sidebarnav {
      padding: 1.2em;
    }
 #sidebarnav ul
  {
    margin-right: 1em;
    border-bottom: 1px solid gray;
   }
  
 #sidebarnav li
  {
    list-style: none;
    border-top: 1px solid gray;
    text-align: left;
  }

 #sidebarnav li a
  {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.75em;
    border-left: 0.5em solid beige;
    background: beige;
    text-decoration: none;
  }  

 #sidebarnav li a:link { color: #448; }
 #sidebarnav li a:visited { color: #667; }

 #sidebarnav li a:hover
  {
    border-color: midnightblue;
    color: midnightblue;
    background: palegoldenrod;
  }

/* Formatting the main content with */
/* column shadow background image */   	

		#content {
			background-image: url(../images/content_bg.jpg);
			background-repeat: no-repeat;
			line-height: 1.6em;
		}
		
#content img {
    border: 2px solid white;
    }
		
		#content ul {
        margin: 0 0 0.5em 2em;
    }

/* Formatting the footer */
			
		#footer {
			border: 1px solid darkkhaki;
			font-size: 0.9em;
			background-color: beige;
      background-image: url(../images/body_bg.gif);
			background-repeat: repeat;
		}
		
		#footer ul {
    text-align: center;
    margin: 0;
    padding: 0.2em;
    list-style-type: none;
    }
		
		#footer ul li {
    display: inline;
    }

    #footer ul li a {
        text-decoration: underline;
        color: midnightblue;
        padding: 0.2em 1em;
    }

    #footer ul li a:hover {
        color: midnightblue;
        text-decoration: none;
        padding: 0.2em 1em;
    }
		
		cite {
		  font-family: Times, serif;
      font-style: italic;
      font-size: 0.9em;
      padding: 0.1em;
    }
    
    blockquote {
	background-image: url(../images/quotes.gif);
	background-position: 1em 0.5em;
	background-repeat: no-repeat;
	border: 2px solid darkkhaki;
}

.unquote {
	font-style: italic;
	background-image: url(../images/unquotes.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.signature {
margin-left: -36px;
font-weight: bold;
font-size: 90%;
font-style: normal;
}
		
/* Navigation element formatting by page             */
/* creates a rule that only takes effect e.g. when   */ 
/* class="home" is contained within id="home"        */
/* and so on.  ID is set on the body tag for the page*/

		 #home .home, #sports .sports, #squash .squash, #personal .personal, #facilities .facilities
    {
      text-decoration: none;
      font-weight: bold;
      color: midnightblue;
      background-color: beige;
      border-width: 1px;
      border-color: #aaab9c #fff #fff #ccc;
      border-style: solid;
    }
    
    
/* Formatting up the definition list */
/* to layour photos with annotation */ 
   dl.photo {
    border: 1px solid #000;
    background-color: palegoldenrod;
    width: 8em;
    text-align: center;
    padding: 1em;
    float: left;
    margin-right: 1em;
    font-size: 0.8em;
  }

  .photo dt { font-weight: bold; }

  .photo dt img
  {
    border: 1px solid #000;
    width: 7em;
    height: 9em;
  }

  .photo dd
  {
    margin: 0;
    padding: 0;
  }
    
/* Formatting up the contact form */
/* to ensure site colors are used.*/ 

label
{
width: 8em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

.submit input
{
margin-left: 8.5em;
}

input
{
color: midnightblue;
background: beige;
border: 1px solid darkkhaki;
}

.submit input
{
color: midnightblue;
background: beige;
border: 2px outset darkkhaki;
}
fieldset
{
padding:1em;
border: 1px solid darkkhaki;
width: 30em;
}
textarea
{
float: left;
border: 1px solid darkkhaki;
background: beige;
width: 20em;
font-family: "Trebuchet MS", helvetica, tahoma, geneva, arial, sans-serif;
font-size: 90%;
color: midnightblue;
}

legend
{
color: midnightblue;
background: darkkhaki;
border: 1px solid midnightblue;
padding: 2px 6px;
}