/* Welcome to the Baldwin Academy CSS file! Most of the CSS code is written by Anne Dorko for Baldwin Academy. BaldwinAcademy.com was first fully converted from tables to CSS positioning in January 2007. */ 

/* There are a lot of friendly notes throughout to remind myself of what each section of CSS does as well as give anybody else who needs to work on it an easy way to find, edit, or add to whichever section needs it. */

/* Index of sections (NOT actually numbered in this document): 
01. CSS positioning (website layout, excluding navigation)
02. Special content (wide pages) structure
03. Sub(side)content structure and image swapping
04. Non-navigational list styles
05. Font styles
06. Link styles (includes Home rollover and footer text)
07. Style H tags
08. Style regular page images
09. Style the table on the Fees page
10. Style the subnav on the Programs pages 
11. Style the top navigational buttons */

body {
	background-color: #C9ECF0;
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 150%;
	padding: 0px;
	margin: 0px;
}
#wrapper {
	background-color: #D0EB7C;
	background-image: url(images/c_bg.gif);
	background-repeat: repeat;
	width: 630px;
	margin-right: auto;
	margin-left: auto;
}
#banner {
	background-image: url(images/banner.gif);
	background-repeat: no-repeat;
	width: 630px;
	height: 216px;
}
#contentwrap {
	width: 630px;
	display: block;
}
#maincontent {
	width: 400px;
	float: left;
}
#footer {
	background-image: url(images/footer.gif);
	width: 630px;
	height: 19px;
	font-size: 10px;
	text-align: right;
	color: #FFFFFF;
	font-weight: bold;
	clear: both;
}
/* This is the special content style, a wide layout that applies for the Fees and News pages */
#specialcontent {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
}
/* Styles the sub (side) content which lives nested in the content wrapper of normal pages */
#subcontent {
	float: left;
}
/* This CSS should handle the sub (side) image swaps for the non-navigational side content of most normal pages */
#subcontent {
	width: 200px;
	height: 340px;
	float: left;
	display: block;
	background-repeat: no-repeat;
}
#subcontent.home {
	background-image: url(images/sidenav.jpg);
}
#subcontent.staffside {
	background-image: url(images/side_staff.jpg);
}
#subcontent.policiesside {
	background-image: url(images/side_policies.jpg);
}
#subcontent.contactside {
	background-image: url(images/side_contact.jpg);
}
/* This CSS handles all of your lists that are not directly navigational */
ul {
	margin: 0px;
	padding: 0px;
}
#topnav, #banner ul {
	display: block;
}
#topnav ul, #banner ul {
	list-style-type: none;
}
#wrapper #topnav li {
	display: inline;
}
.programslist {
	position: relative;
	left: 25px;
	top: 20px;
}
.policieslist li {
	margin-bottom: 20px;
}
.canarieslist {
	position: relative;
	left: 50px;
	margin-top: 20px;
	margin-bottom: 20px;
	list-style-type: circle;
}
/* CSS styles the various font classes used throughout the site */
.bold {
	font-weight: bold;
}
.content { 
	margin: 25px 30px 20px 50px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:left;
	line-height:18px;
}
.fine {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	line-height: 14px;
	margin: 25px 30px 25px 50px;
	color:#666666;
	text-align:left;
}
.pdfdownload {
	font-size: 11px;
	vertical-align: super;
}
.hidden {
	display: none;
}
/* Here the CSS hands the regular links that show up on most pages */
a:link {
	color: #669900;
	text-decoration: none;
}
a:visited {
	color: #669900;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
a:active {
	color: #FFCC33;
	text-decoration: none;
}
/* This is the "Home" rollover link in the upper right hand corner of every page except for the index page */
.navhome a {
	background-image: url(images/nav_home.gif);
	background-repeat: no-repeat;
	width: 130px;
	height: 91px;
	float: right;
}
.navhome a:hover {
	background-image: url(images/nav_home_over.gif);
	background-repeat: no-repeat;
}
/* This styles the footer text at the bottom of every page */
#footer a {
	color: #78A807;
	text-decoration: none;
}
#footer a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
/* Styles the h tags, you probably don't need to mess with these much */
h1, h2, h3, h4, h5, h6, p {
	padding-left: 30px;
}
h1 {
	font-size: 24px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #0096E1;
	line-height: 100%;
}
h2 {
	font-size: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #0096E1;
	line-height: 100%;
	font-weight: normal;
}
/* This section handles any CSS applied to images placed onto a page, most images outside of the gallery (which should be handled by a seperate source) will probably be placed within the Programs sections */
img {
	border: 3px double #A3C92D;
}
.floatleft {
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 5px;
}
.floatright {
	float: right;
	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 5px;
}
.pdfdownload {
	width: 45px;
	height: 45px;
	border: none;
}
/* This styles the table found on the Fees page. Hopefully it isn't too difficult to decipher... toggling between the CSS file and the table gives a much greater understanding of its structure. */
.feeTable {
	width:550px;
	border:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:left;
	padding: 0px;
	margin-left: 25px;
}
.feeAlternate {
	background-color:#DBF09B;
}
.feeBottom {
	background-color:#B1DC2B;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
}
.feeBIndent {
	padding-right: 0px;
	padding-left: 4px;
}
.feeRow {
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 3px;
	padding-left: 5px;
}
.feetabletoptop {
	background-image: url(images/fees_toptop.gif);
	background-repeat: no-repeat;
	background-color: #ff9933;
	width: 575px;
	height: 25px;
}
.feeheader {
	font-size: 10px;
	background-image: url(images/feesyellow.gif);
	background-repeat: no-repeat;
	background-color: #ffcc33;
	margin: 0px;
	padding: 0px;
	height: 35px;
}
.feeheadero {
	background-image: url(images/feesorange.gif);
	background-repeat: no-repeat;
	background-color: #ff9933;
	margin: 0px;
	padding: 0px;
	height: 25px;
}
.feetabletopbottom {
	background-image: url(images/fees_topbottom.gif);
	background-repeat: no-repeat;
	background-color: #ffcc33;
	width: 575px;
	height: 35px;
}
.feetablebottomtop {
	background-image: url(images/fees_bottomtop.gif);
	background-repeat: no-repeat;
	background-color: #ff9933;
	width: 575px;
	height: 25px;
}
.feeBox {
	background-color:#DBF09B;
	padding:25px;
	width:525px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
/* Styles the Program sub-navigation, this CSS is only used on the Programs page with the sub-navigation on the left, here I have the link followed by its hover style because it was easier to write the CSS that way. The "Current" states are underneath in another section */
.pnav {
	width: 200px;
	height: 340px;
}
.pnav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.pnav li {
	display: inline;
}
.pnav .pnavtop {
	background-image: url(images/Navbar/nbreg/top.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 30px;
	float:left;
}
.pnav .ecp a {
	background-image: url(images/Navbar/nbreg/ecpreg.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 80px;
	float:left;
}
.pnav .ecp a:hover {
	background-image: url(images/Navbar/nbmo/ecpmo.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 80px;
	float:left;
}

.pnav .bluebirds a {
	background-image: url(images/Navbar/nbreg/bluebirdsreg.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .bluebirds a:hover {
	background-image: url(images/Navbar/nbmo/bluebirdsmo.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .onbluebirds {
	background-image: url(images/Navbar/nbcurr/bluebirdscurr.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .parakeets a {
	background-image: url(images/Navbar/nbreg/parakeetsreg.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .parakeets a:hover {
	background-image: url(images/Navbar/nbmo/parakeetsmo.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .canaries a {
	background-image: url(images/Navbar/nbreg/canariesreg.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .canaries a:hover {
	background-image: url(images/Navbar/nbmo/canariesmo.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .robins a {
	background-image: url(images/Navbar/nbreg/robinsreg.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .robins a:hover {
	background-image: url(images/Navbar/nbmo/robinsmo.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .bignest a {
	background-image: url(images/Navbar/nbreg/bignestreg.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .bignest a:hover {
	background-image: url(images/Navbar/nbmo/bignestmo.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .parrots a {
	background-image: url(images/Navbar/nbreg/parrotsreg.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .parrots a:hover {
	background-image: url(images/Navbar/nbmo/parrotsmo.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .pnavbottom {
	background-image: url(images/Navbar/nbreg/bottom.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 81px;
	float:left;
}
/* Finally, here you have the Current states for your Programs sub-navigation */
.pnav .bluebirdscurrent {
	background-image: url(images/Navbar/nbcurr/bluebirdscurr.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .parakeetscurrent {
	background-image: url(images/Navbar/nbcurr/parakeetscurr.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .canariescurrent {
	background-image: url(images/Navbar/nbcurr/canariescurr.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .robinscurrent {
	background-image: url(images/Navbar/nbcurr/robinscurr.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .bignestcurrent {
	background-image: url(images/Navbar/nbcurr/bignestcurr.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .parrotscurrent {
	background-image: url(images/Navbar/nbcurr/parrotscurr.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 50px;
	float:left;
}
.pnav .ecpcurrent {
	background-image: url(images/Navbar/nbcurr/ecpcurr.gif);
	background-repeat: no-repeat;
	width: 200px;
	height: 80px;
	float:left;
}
/* I put the CSS navigational rollovers for the top navigation all the way down here because it's the longest part of this CSS document and it's what you probably won't need to change much. First are the regular link states, then the hover, and then the current. */
.programs a {
	background-image: url(images/programs.gif);
	background-repeat: no-repeat;
	width: 124px;
	height: 72px;
	float: left;
}
.gallery a {
	background-image: url(images/gallery.gif);
	background-repeat: no-repeat;
	width: 82px;
	height: 72px;
	float: left;
}
.staff a {
	background-image: url(images/staff.gif);
	background-repeat: no-repeat;
	width: 67px;
	height: 72px;
	float: left;
}
.fees a {
	background-image: url(images/fees.gif);
	background-repeat: no-repeat;
	width: 65px;
	height: 72px;
	float: left;
}
.testimonials a {
	background-image: url(images/testimonials.gif);
	background-repeat: no-repeat;
	width: 88px;
	height: 72px;
	float: left;
}
.news a {
	background-image: url(images/news.gif);
	background-repeat: no-repeat;
	width: 74px;
	height: 72px;
	float: left;
}
.contact a {
	background-image: url(images/contact.gif);
	background-repeat: no-repeat;
	width: 130px;
	height: 72px;
	float: left;
}
/* These are the hover states of the top navigation */
.programs a:hover {
	background-image: url(images/programs_over.gif);
	background-repeat: no-repeat;
	width: 124px;
	height: 72px;
	float: left;
}
.gallery a:hover {
	background-image: url(images/gallery_over.gif);
	background-repeat: no-repeat;
	width: 82px;
	height: 72px;
	float: left;
}
.staff a:hover {
	background-image: url(images/staff_over.gif);
	background-repeat: no-repeat;
	width: 67px;
	height: 72px;
	float: left;
}
.fees a:hover {
	background-image: url(images/fees_over.gif);
	background-repeat: no-repeat;
	width: 65px;
	height: 72px;
	float: left;
}
.testimonials a:hover {
	background-image: url(images/testimonials_over.gif);
	background-repeat: no-repeat;
	width: 88px;
	height: 72px;
	float: left;
}
.news a:hover {
	background-image: url(images/news_over.gif);
	background-repeat: no-repeat;
	width: 74px;
	height: 72px;
	float: left;
}
.contact a:hover {
	background-image: url(images/contact_over.gif);
	background-repeat: no-repeat;
	width: 130px;
	height: 72px;
	float: left;
}
/* These are the Current states for the top navigation */
.onprograms {
	background-image: url(images/programs_current.gif);
	background-repeat: no-repeat;
	width: 124px;
	height: 72px;
	float: left;
}
.ongallery {
	background-image: url(images/gallery_current.gif);
	background-repeat: no-repeat;
	width: 82px;
	height: 72px;
	float: left;
}
.onstaff {
	background-image: url(images/staff_current.gif);
	background-repeat: no-repeat;
	width: 67px;
	height: 72px;
	float: left;
}
.onfees {
	background-image: url(images/fees_current.gif);
	background-repeat: no-repeat;
	width: 65px;
	height: 72px;
	float: left;
}
.ontestimonials {
	background-image: url(images/testimonials_current.gif);
	background-repeat: no-repeat;
	width: 88px;
	height: 72px;
	float: left;
}
.onnews {
	background-image: url(images/news_current.gif);
	background-repeat: no-repeat;
	width: 74px;
	height: 72px;
	float: left;
}
.oncontact {
	background-image: url(images/contact_current.gif);
	background-repeat: no-repeat;
	width: 130px;
	height: 72px;
	float: left;
}
#contentwrap {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #maincontent {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #maincontent h1 {
	font-family: Comic Sans MS, cursive;
}
#wrapper {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #maincontent div {
	font-family: Comic Sans MS, cursive;
}
#contentwrap h1 {
	font-family: Comic Sans MS, cursive;
}
#wrapper {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #specialcontent .feeTable tbody tr td {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #specialcontent .feeTable tbody tr td p {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #specialcontent .feeBox .bold {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #specialcontent p strong {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #specialcontent .content {
	font-family: Comic Sans MS, cursive;
}
#wrapper #contentwrap #specialcontent .feeBox {
	font-family: Comic Sans MS, cursive;
}