/*Impington Swimming Club (ISC) Style Sheet*/
/*Carl Myhill, August 2003*/
/*Please feel free to copy and reuse any or all of this if you want to*/
/*CSS Validated 13th October 2003*/


/*hides accessibility skip navigation link from people who dont need it*/
.skiplink {display:none} 

/*hack to prevent IE Mac horizontal scrollbar appearing*/
html {	width: 97% }

body {
        margin: 0px 10px 0px 17px;
        font-family: verdana, arial, helvetica, sans-serif, "MS sans serif";
		 padding: 0;
		 }

/*Sets up font sizes for use by P and H elements*/
p {	
		font-size: 80%;
		line-height: 1.5em
	}
	
li {	
		font-size: 80%;
		line-height: 1.5em
	}
h1 {font-size: 190%}
h2 {font-size: 140%}
h3 {font-size: 120%}
h4 {font-size: 100%}
h5 {font-size:80%}

/*sets the emphasis character used with labels, eg the Search label*/
label em {
            font-style: italic;
            font-weight: normal;
              } 

/*Set emphasis style within a*/
a em {
            font-style: italic;
            font-weight: normal;
            text-decoration: underline;
            }

/*Link styles from WAI */
:link 	{ color: #00C; background: transparent }
:visited { color: #609; background: transparent }
a:active { color: #C00; background: transparent }
a[href]:hover { color: inherit; background: #ffa } /*highlight active link*/

/*shows appropriate borders around images you can click on*/
a:visited img {border: 1px solid #609} 
a:active img{ color: #C00; background: transparent }
a:hover img {border: 3px solid #ffa }

/*a class of images that dont want a border*/
img.noborder {border: 0}

/*set standard border for photo images*/
img.photo {border : 1px solid black} 

/*for floating photos left on a gallery type page*/
div.photofloat {float: left;  /*this doesnt work right in IE Mac without a width statement*/
				  margin: .5em;
				  padding: .5em;
				   }
div.photofloat img {border: 0} /*to turn this off for photo gallery as it causes images to jump all over the show*/

div.photofloat p {text-align: center;
					 }


/*Very neat trick from www.alistapart.com/stories/practicalcss which forces a Div which only contains Floats to cater for the size of their content dynamically - well, that's my understanding and it seems to work*/
div.spacer {  clear:both }

/* BOXES START HERE */

#header {		position: relative;
					margin: 0; 
					padding-bottom: 0.25em;
			}

#headerlogo {
					float:left;
					padding: 5px 1em 0px 0px;
				}
				

	
#headerlogo img {
						
						border: 0px;
					}

#headertitle {
						padding: 1.5em 0 0 0;
				}



#headertitle h1 {
				display: inline;
			} 

#headertitle p {
				display: inline;
			} 
			
#header p {font-style: italic}

#navbar  {
				border-top: 1px solid #3333cc; 
				border-bottom: 1px solid #3333cc;
				padding: .3em 0 0.1em 0;
				font-size: 80%;
				
			}

#navbar .breadcrumbs {	float:left;
								text-align: left;
								width: 59%;
								padding: 0.6em 0 0.3em 0;								
								}

#navbar ul { 
				display: inline;
				padding: 0em;
				margin: 0px;
				}
	
#navbar li.first {
					display: inline;
					padding: 0em .75em 0 0em;
					border: none;
					font-size: 100%;
								}
				
#navbar li {		display: inline;
					border-left: 1px dashed #666;
					padding: 0 0.75em 0 0.75em;
					font-size: 100%;
					}

#navbar .search {			float:right;
								text-align: right;
								padding: 0.2em 0 0.3em 0;	
								width: 38%; /*no more than 97%!!! - see body 										width*** */
								margin-left: auto;		
								}
								
#navbar form, input {	
							margin: 0;
							
						}

/*for the main page, 'main' and 'menu' boxes are defined*/ 

#main {
		margin: 2em 0em 1em 16em;
		padding-bottom: .25em;
		}
		
#main h2 em {
            font-style: italic;
            font-weight: normal;
		   }


#menu  {
		float:left;
		margin: 2em 0em 1em 0em;
		width: 16em; /*without this the whole thing is hopeless on IE Mac*/
		
		}
		
#menu ul {
			margin: 0 0 1em 0;
			padding: 0 0 .25em 0;
			text-align: left;
		}

#menu li {
			font-size: 80%;
			list-style: none;
			padding: 0 0 .25em 0;
			}
			
#menuimage {			/*container for the photo*/		
			width: 200px; 
			border: 1px solid #333333;
			color: black;
			background: #CCCCCC;
			text-align: center; /*workaround for ie mac problem with 'auto' ??? see glish.com*/ 
			padding: .5em;
			}

#menuimage p{		
			clear:left;			
			font-size:65%;
			text-align: center;
			margin: 0px; 
			padding: 0.25em 0 0 0; 
			}


/*For other site sections, a 'mainsection' box is used, which uses more width*/
#mainsection {
		margin: 2em 0em 1em 0em;
		padding-bottom: .25em;
		}



#copyright {
				clear: both;
				margin: .25em 0 .25em 0;
				border-top: 1px solid #3333cc;
				border-bottom: 1px solid #3333cc;
				text-align: center;
				padding: 0em;
			}
			
#copyright p {
				text-align:center;
				font-size:65%;
				padding: 0.5em 0 0.5em 0;
				margin: 0;
				}
 
#footer {
				margin: 0.25em 0 .25em 0;
				text-align: center;
				padding:  .25em 0 1.5em 0;
			}


#footer .contact { 
					float:left;
					text-align: left;
					font-size:65%;
					padding: 0;
					width: 35%;
					}


#footer .updateinfo {
					float:right;
					text-align:right;
					font-size:65%;
					padding: 0;
					width: 45%;
					}

.validationlogo { float: left;
					padding: 0 .75em 1em 0;
					 margin: 0px;
					}