/*  CSS Document */

/* This style sheet documents the styles used on the 
Chelmsford Youth Soccer Association (CYSA) web site. */

/* Author: Bill Dowling */
/* Creation Date: 1 Feb 2004 */
/* Last Updated: 11 March 2004 */

html, body {
	height: 100%;
	margin: 0; 
  	background: white; 
  	color: black;
  	font: small Verdana, Arial, sans-serif;
  	}

.skip {display: none;}
span {display: none;}  /* Hide text inside this element */

/* Basic Styles */

h1 {font-size: 250%; margin: 0;}
h2 {font-size: 180%; margin: 0 0 0.75em;}
h3 {font-size: 135%; margin: 2em 0 0.2em;}
h4 {font-size: 115%; margin: 1.5em 0 0.25em;}
h5 {font-size: 100%; margin: 1em 0 0;}
h6 {font-size: 85%; margin: 0;}
strong {font-weight: bold;}
em {font-style: italic;}
pre, code {font: 1em Courier, "Courier New", monospace; letter-spacing: -0.066em;
  color: #333;}
p {margin: 0.3em 0 1.2em; line-height: 1.25em;}
hr {display: block; clear: both; visibility: hidden;}


/* All the DIVS */

/* The Masthead */

#masthead {
	height: 160px;
	width: 100%;
	background: #999 url(OnePiece.png) no-repeat top left;
	/* background: #999999 url(masthead8_plain.png) repeat-x top left; */
	border-bottom: 2px solid #000000;
  }
  
#soccerball {
	height: 160px;
	background: transparent url("soccerball_clean.png") no-repeat;
	}
	
#patch {
	position: relative;
	top: -435px;
	background: transparent url("cysaPatch_clean.gif") no-repeat top right;
	height: 160px;
	}
  
#masthead h1 {
	position: relative;
	top: -160px;
	font: bold 1200%/0.9em Times, serif;
  	margin: 0 0 0 200px; 
  	padding: 10px 0 0 0;
  	color: #990033;
  	}
  
#tag {
	position: relative;
	top: -250px;      /* Move tag line up into the h1 and overlay text */
	margin: 0 0 0 275px; 
	padding: 0 15px 1em 0;
  	font-size: 325%; 
  	font-weight: bold; 
  	line-height: 1em; 
  	width: 500px;
  	text-align: center; 
  	color: #FFFFFF; 
  	}

    
/* The Navigation Bar Below the Masthead */

#navbar {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
  	margin: -4px 0 0;
  	padding: 0.2em 0 0.12em 17px;
  	border: 1px solid #000000;
  	border-left: #FFF;
  	border-width: 0px 2px 1px 0px;
 	background: #FFFFFF;
 	white-space: nowrap;
 	}
 	
	
#navbar label {				/* used to identify type of links in navbar */
	width: 179px  ;
	border-right: 1px solid #000000;
	padding: 0.2em 0.5em 0.12em 0;
  	/*text-align: right; */
  	font-weight: bold;
  	color: #990033;
  	}
	
#navbar a {
	border-right: 1px solid #000000;
	padding: 0.2em 0.5em 0.12em 0.5em;
  	text-decoration: none;
  	font-weight: bold;
  	color: #990033;
  	}
	
#navbar a#home {
	border-left: 1px solid #000000;
	padding-left: 0.5em;
	}
	
#navbar a:hover {
	background: #990033;
	padding: 0.2em 0.5em 0.12em 0.5em;
	color: #FFFFFF;
	}
	
#navbar b {
	display: none !important;
	}
	
.home #navbar #home {
	color: #CCA;
	background: transparent;
	}

/* Main Body */
/* The main body is made up up a sidebar menu on the left, a newsbar for announcements on the far right
   and a content area for feature articles in the middle
 */

#main {
	position: relative; 
	padding: 2em 0 1em 0; 
	margin: 1px 2px 0 0;
	min-height: 100%;
	height: 4500px;
	width: 1000px;
  	background: url("mainbg.gif") top left repeat-y; 		/* Striping down left side of page */
  	border-top: 3px double #990033; 	/* Pinstriping behind navigation bar and along right side */ 
  	border-right: 3px double #990033;	/* Pinstriping behind navigation bar and along right side */
  	border-bottom: 3px double #990033;  /* Pinstriping top of footer */ 
  	}
	
#main p {
	padding: 0.5em 1em; margin: 0;
	}

#content {						/* Content area for feature articles */
	position: absolute;
	top: 25px;
	left: 200px;
	width: 530px;
	height: auto;
	z-index: 7;
	}

#scroller {
	padding: 2px 0.25em 0;
	margin: 0 -2px 0.2em 0;
	font: bold 1em Arial, Verdana, sans-serif;
  	background: #000000;
  	color: #FFFFFF;
  	text-align: center;
  	border: 1px solid #000000;
  	}
  	
#scroller a {
	background: transparent;
	color: #FFFFFF; 
  	}
  		
#story {						/* Content area for feature articles */
	left: 200px;
	width: 530px;
	right: 0;
	border: 1px solid black;
	margin: 0 0 0.75em 0;
	}
	
#story h3 {
	border: solid #000000 1px;
	padding: 0.5em 1em;
	margin: 0;
	background: #990033;
	text-align: left;
	color: #FFFFFF;
	}
	
#story h4 {
	margin: 0 0 0 1em;
	}
	
#story p {						/* Paragraph format for feature article  */
	padding: 0.5em 1em;
	margin: 0;
	}
	
#story p a:hover {
	background: #990033;
	color: #FFFFFF;
	}
	
#byline {						/* Byline for feature article  */
	padding: 0.5em 0.5em;
	text-align: left;
	font-style: italic;
	font-size: 75%;
	color: #999999;
	margin: 0 0 0 1em;
	}
	
#punchportrait {				/* Text box for feature article with portrait photo */
	float: left;
	width: 210px;		/* Size of Picture */
	height: 280px;		/* Size of Picture */
	text-align: center;
	background: #FFFFFF;
	color: #FFFFFF;
	border: solid black 1px;
	border-width: 0 1px 1px 0;
	padding: 0 1px 1px 0;
	margin: -1px 25px 10px -1px;
	}
	
#punchlandscape {				/* Text box for feature article with landscape photo */
	float: right;
	width: 280px;		/* Size of Picture */
	height: 210px;		/* Size of Picture */
	text-align: center;
	background: #FFFFFF;
	color: #FFFFFF;
	border: solid black 1px;
	border-width: 0 0px 1px 1px;
	padding: 0 0px 1px 1px;
	margin: -1px -1px 10px 25px;
	}
	
#content h2 {						/* Title bar for feature article */
	border: solid #000000 1px;
	padding: 0.5em 1em;
	margin: 0;
	background: #990033;
	color: #FFFFFF;
	}

#punchportrait img {			/* feature article with portrait photo in 4:3 format */
	height: 280px;
	width: 210px;
	}
	
#punchlandscape img {			/* feature article with landscape photo in 3:4 format */
	height: 210px;
	width: 280px;
	}
	
#coordinator {				/* Text box for feature article with portrait photo */
	float: left;
	width: 150px;		/* Size of Picture */
	height: 200px;		/* Size of Picture */
	text-align: center;
	background: #FFFFFF;
	color: #FFFFFF;
	border: solid black 1px;
	border-width: 0 1px 1px 0;
	padding: 0 1px 1px 0;
	margin: -1px 25px 10px -1px;
	}

#coordinator img {			/* feature article with portrait photo in 4:3 format */
	height: 200px;
	width: 150px;
	}

#document {						/* Content area for documents like bylaws and constitution */
	left: 200px;
	height: auto;
	width: 750px;
	right: 0;
	border: 1px solid black;
	margin: 0 0 0.5em 0;
	background: #FFFFFF;
	/* overflow: scroll; */
	}
	
#document h2 {						/* Title bar for document */
	border: solid #000000 1px;
	padding: 0.5em 1em;
	margin: 0;
	background: #000000;
	font-size: larger;
	text-align: center;
	color: #FFFFFF;
	}
	

	
#document h3 {						/* Title bar for document */
	text-align: center;
	background: #990033;
	color: #FFFFFF;
	}
	
#document h4 {						/* Title bar for document section or article */
	color: #000;
	font-size: larger;
	text-align: center;
	}
	
#document h5 {						/* Title bar for document section or article */
	margin: 1em 1em 0 1em;
	}
	
#document p {						/* Paragraph format for document  */
	padding: 0.5em 1em;
	margin: 0 2em 0 2em;
	text-align: justify;
	}
	
#document a {
  	/* text-decoration: none; */
  	color: #000;
  	}
	
#document p a:hover {
	background: #990033;
	color: #FFFFFF;
	}

#document ol,ul {						/* formating of ordered list in document */
	padding: 0.5em 1em;
	margin: 0 4em 0 4em;
	text-align: justify;
	}	
		
/* Menu Bar on Left */

#sidebar {
	position: absolute;
	top: 25px;
	left: 0;
	width: 144px;
	height: auto;
	z-index: 5;
	border-width: 0;
	margin: 0 0 0 35px;
	padding: 0;
	background: transparent;
	}

#sidebar h3 {
	margin: 0;
	padding: 2px 0.25em 0.25em;
	font: bold 1em Arial, Verdana, sans-serif;
  	background: #990033;
  	color: #FFFFFF;
  	text-align: left;
  	/*border-top: 3px solid #750033;
  	border-right: 3px solid #750033; */
  	/*border-top: 2px solid #999;
  	border-right: 2px solid #999;
  	border-bottom: 1px solid #000;*/
  	border-top: 2px outset #750033;
  	border-left: 2px outset #750033;
  	border-right: 2px outset #750033;
  	border-bottom: 2px outset #750033;
  	}
#sidebar h3 a {
	background: transparent; 
	color: #FFFFFF; 
	padding: 2px 0.25em 0.25em;
	text-decoration: none;
	margin-right: 0;
  	text-decoration: none;  	
  	font-weight: bold;
  	}
  	
#sidebar h3 a:hover {
	color: #FFFF33;
	}
	
#sidebar h4 {
	margin: 0 0 0 0;
	padding: 2px 0.25em 0.25em;
	font: bold 1em Arial, Verdana, sans-serif;
  	background: #000000;
  	color: #FFFFFF;
  	text-align: left;
  	border: 3px outset #000000;
  	/*border-width: 2px 1px;
  	border-bottom: none;*/
  	}
  	
#sidebar h5 {
	margin: 0;
	padding: 0 0 0;
	font: bold 1em Arial, Verdana, sans-serif;
  	background: #990033;
  	color: #FFFFFF;
  	text-align: left;
  	border-top: 3px solid #750033;
  	border-right: 3px solid #750033;
  	border-bottom: 1px solid #999999;
  	}
#sidebar h5 a {
	background: transparent; 
	color: #FFFFFF; 
	padding: 2px 0.25em 0.25em;
	text-decoration: none;
	margin-right: 0;
  	text-decoration: none;  	
  	font-weight: bold;
  	}
  	
#sidebar h5 a:hover {
	color: #FFFF33; 
	}
/*	
#sidebar h5 w {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background: url("http://banners.wunderground.com/banner/infobox/US/MA/Chelmsford.gif") #990033 no-repeat top left;
 	/* background-color: #990033 */
 	}
*/
/* Auto highlight the sidebar menu button when on that page */
 	
.home #sidebar #home {
	color: #FFFF33;
	}
	
.about #sidebar #about {
	color: #FFFF33;
	}
	
.admin #sidebar #admin {
	color: #FFFF33;
	}
		
.policy #sidebar #policy {
	color: #FFFF33;
	}
	
.calendar #sidebar #calendar {
	color: #FFFF33;
	}
	
.registration #sidebar #registration {
	color: #FFFF33;
	}
	
.volunteer #sidebar #volunteer {
	color: #FFFF33;
	}
	
.mailinglist #sidebar #mailinglist {
	color: #FFFF33;
	}

.travel #sidebar #travel {
	color: #FFFF33;
	}

.intramural #sidebar #intramural {
	color: #FFFF33;
	}

.clinic #sidebar #clinic {
	color: #FFFF33;
	}

.fields #sidebar #fields {
	color: #FFFF33;
	}
	
.training #sidebar #training {
	color: #FFFF33;
	}
	
.referees #sidebar #referees {
	color: #FFFF33;
	}

.coaches #sidebar #coaches {
	color: #FFFF33;
	}
		
.archives #sidebar #archives {
	color: #FFFF33;
	}
	
.lostandfound #sidebar #lostandfound {
	color: #FFFF33;
	}
	
.photos #sidebar #photos {
	color: #FFFF33;
	}
	
.sponsors #sidebar #sponsors {
	color: #FFFF33;
	}
	
/* Announcement Area on Right */

#newsbox {								/* the area where announcements are posted */
	position: absolute;
	top: 0;
	left: 0;
	width: 220px;
	height: auto;
	z-index: 9;
	margin: 0 0 0 750px;
	padding: 0;
	}
	
#newsbox h3 {							/* used for the newsbox title area */
	padding: 2px 0.25em 0.25em;
	font: bold 1em Arial, Verdana, sans-serif;
  	background: #000000;
  	color: #FFFFFF;
  	text-align: center;
  	border: 1px solid #000000;
  	}

#newsitem {								/*  defines the area for an individual announcement */
 	background: transparent;
	border: 1px solid #000000;
	margin: 0 0 0.5em 0;
	}
	
#newsitem h3 {							/*  title area for an individual announcement */
	margin: 0;
	padding: 0.25em;
	font: bold 1em Arial, Verdana, sans-serif;
  	background: #000000;
  	color: #FFFFFF;
  	text-align: center;
  	border: 1px solid #000000;
  	}
  	
 #newsitem h4 {							/*  body for an individual announcement */
	margin: 0;
	padding: 0.25em;
	font: bold 1em Arial, Verdana, sans-serif;
  	background: #990033;
  	color: #FFFFFF;
  	text-align: left;
  	border: 1px solid #000000;
  	}
	
#newsitem p {							/*  paragraph spacing for an individual announcement */
	padding: 0.5em 1em;
	font-size: 75%;
	margin: 0;
	background: #FFFFFF;
	}

#newsitem p a:hover {
	background: #990033;
	color: #FFFFFF;
	}

/* Footer */

#footer {
	
  	background: transparent;
  	font-size: smaller;
  	clear: both;
  	}
  	
#footer p {
	padding: 0.75em 1.5em 0.75em 1.5em;
	text-align: center;
	color: #990033; 
	}


/* beg Kimler Photo-Caption Zoom */

.Zright { float:right; margin:5px 0px 2px 10px; } 
.Zleft { float: left; margin:5px 10px 2px 0px; }

.Zoom img { border: 1px solid #369; } 
.Zoom.t100 img { width:100px; } 
.Zoom.t150 img { width:150px; } 
.Zoom.t200 img { width:200px; } 
.Zoom.t250 img { width:250px; } 
.Zoom.t300 img { width:300px; } 
.Zoom.t350 img { width:350px; } 
.Zoom.t400 img { width:400px; } 
.Zoom t450 img { width:450px; } 
.Zoom.t500 img { width:500px; } 
.Zoom.t550 img { width:550px; } 
.Zoom.t600 img { width:600px; }

.Zoom .caption { display:none; }

.Zoom a { padding:0; } 
.Zoom a:hover { padding:0; border:none; 
     margin:0; } /* IE picky here */ 
.Zoom a:visited { padding:0px; 
     text-deocoration:none; }

.w100 a:hover img,.w100 a:hover .caption {width:100px} 
.w150 a:hover img,.w150 a:hover .caption {width:150px} 
.w200 a:hover img,.w200 a:hover .caption {width:200px} 
.w250 a:hover img,.w250 a:hover .caption {width:250px} 
.w300 a:hover img,.w300 a:hover .caption {width:300px} 
.w350 a:hover img,.w350 a:hover .caption {width:350px} 
.w400 a:hover img,.w400 a:hover .caption {width:400px} 
.w450 a:hover img,.w450 a:hover .caption {width:450px} 
.w500 a:hover img,.w500 a:hover .caption {width:500px} 
.w550 a:hover img,.w550 a:hover .caption {width:550px} 
.w600 a:hover img,.w600 a:hover .caption {width:600px} 
.Zoom a:hover img { margin-bottom:5px;}

.Zoom a:hover .caption { 
     display:block; 
     background:#eef; 
     border:1px solid #339; 
     font-family:verdana,sans-serif; 
     text-decoration:none; 
     text-align:justify; 
     font-size:10pt; 
     color:#339; }

.Zoom a:hover .inner { 
     display:block; 
     padding:5px 8px; } 
     /* no IEboxModelHack */

/* end Kimler Photo-Caption Zoom */