/* general formatting for body.  Background behind content is defined here */
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
background:url(images/gradientblack.png) repeat-x;
background-color: #383838; 
}


/* h2 and h3 define styles for these headers.  Do we need an h1, or should we rename these */

h2{
background:url(images/leftcolumnheader_21.gif) center no-repeat;
font-weight:bold;
text-align:center;
font-size:11px;
color:#fff;
margin:0;
padding-top:14px;
padding-bottom:14px;
}


h3{
font-size:17px;
color:#39629F;
font-weight:bold;
text-align:center;
margin:0;
width:100%;
border-bottom:1px solid #ededed;
}


/* This is used to format the header for info/news announcements */
.info{
padding-top:5px;
padding-bottom:5px;
background:url(images/inforepeat_25.gif) repeat-y left;
padding-left:20px;
margin:0;
color:#666;
font-size:10px;
margin-bottom:5px;
}



/****************************************************************************/
/* I was using these to create a shadow effect for the page content.  This seems to be problematic 
when used with widgets and the curvycorners javascript in combination.  */

.shadowbox1 {position: relative;

  width: 920px; 
  background: url(images/50black.png) repeat;
   
   } 
.shadowcontent {
			margin: 0 auto;
      width: 920px; 
      position: relative;
      /* these two define the shadow 'offset'*/
			top: -5px; 
			left: -5px; 
  }

 /**************************************************************************/
 
/* wrapper for page content.  This should not be changed. */
.wrapper { 
 margin:0 auto;
 width: 922px; 
 position: relative;
 padding-top: 20px;
}


 /* This div serves as a container to position widgets */
.widget{
 padding: 5px;
 margin-top:10px;
 
 }


/* This div creates the colors for the page columns.  To change the colors
of the page, the image must be edited.  */
.faux {
 background: url(images/fauxTrans2.png);
 margin-bottom: 0px;
 overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
 width: 100%
}

/* This div creates the colors for the page columns.  To change the colors
of the page, the image must be edited.  */
.calendarFaux {
 background: url(images/CalendarFauxTrans2.png);
 margin-bottom: 0px;
 overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
 width: 100%
}

/* defines the banner element containing the wcys logo.  Should probably be
renamed "header" */

.header{
background-image:url(images/wcysBanner.jpg); 
height:230px;
width:922px;
margin-left: auto;
margin-right: auto;
}


.leftcolumn { 
 display: inline;
 color: #333;
 margin-left: 10px;
 padding: 0px;
 width: 195px;
 float: left;
 }


.content {
	float: left;
	color: #333;
	padding-left:14px;
	width: 460px;
	display: inline;
	position: relative;
}

.rightcolumn { 
 display: inline;
 text-align: right;
 position: relative;
 color: #333;
 margin-right: 10px;
 padding: 0px;
 width: 195px;
 float: right;
}

.footer { 
text-align: center;
width: 922px;
height: 100px;
margin: 0px 0px 0px 0px;
clear: both; 
}

/* needed for column colors to display correctly */
.clear { clear: both; background: none; }


/* gets rid of blue border that otherwise appears around images by default*/
img {
border-style: none;
} 


#button {
	width: 195px;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	Verdana, Lucida, Geneva, Helvetica, 
	Arial, sans-serif;

	}

	#button ul {
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
		}
		
	#button li {
		border-bottom: 1px solid #90bade; 
		margin: 0;
		}
		
	#button li a {
		display: block;
		padding: 1px 4px;
		border-left: 2px outset #B0B0B0;
		border-right: 2px outset #B0B0B0; 
		border-bottom: 2px outset #B0B0B0;
		border-top: 2px outset #B0B0B0;
		background-color: #B0B0B0;
		color: #333;
		text-decoration: none;
		width: 100%;
		}

  /* needed to make buttons display properly in IE */
	html>body #button li a {
		width: auto;
		}

	#button li a:hover {
	  padding: 2px 3px 0px 5px; 
		border-left: 2px inset #333366;
		border-right: 2px inset #333366; 
		border-bottom: 2px inset #333366;
		border-top: 2px inset #333366;
		background-color: #333366;
		color: #fff;
		}
	
  /* Used to tell javascript to round top corners of the header.  All other banner
  formatting options are contained in "header" */
  
  #roundHeader{
  }
  	
  /* div id used by javascript to round bottom corners of page.  Also defines
  background image for footer. */
  #roundFooter{
  background: url(images/footer.png) repeat-x;
    
  }
  
  #roundShadow{

  }