/* CSS Document */

/*--------------------------------------------------------------------------------------- 	
	CSS by Maggie Wolfe Riley
	maggiewolfe@gmail.com
	760-902-4058
	My Very First CSS!
----------------------------------------------------------------------------------------*/

/* Main formatting (in order that it appears on page) */

/*----------------------------------------------------------------------------------------
	=============================Main Section Styles====================================
------------------------------------------------------------------------------------------*/

body {	
	background: #728649 url(images/grass_background225.jpg) repeat fixed;
	/* Free Grass background from 
	http://amazingtextures.com/textures/details.php?image_id=589&sessionid=6f8c53c07b70e139953df8cc31765c2b&sessionid=6f8c53c07b70e139953df8cc31765c2b */
	border: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small; /* for compliant browsers */
	line-height:150%;
	}

* html {font-size: x-small;} /* for IE5/Win */

html>body { /* be nice to Opera */	
	font-size: small;
	}

#top {
	width: 90%;
	margin-left: 50px;
	}
	

/*--------- site header ------------*/
#siteHeader { /* Includes logo, banner (h1), and mainNav */
	background: #384D2E url(images/hedge_bg2.jpg) repeat;
	padding-top: 0;
	margin: 0 0 -5px; /*fixes margin in IE7*/
	width: 100%;
	clear:both;
	float:left;
	}

/* Hides from IE5-mac \*/
* html #siteHeader {height: 1%;}
/* End hide from IE5-mac 
(this hack may not have been necessary, 
since it was the same hack in the pageHeader that fixed the problem)*/ 

#banner { /* logo + h1 */
	width: auto;
	margin-top: 0;
	padding-top: 0;
	}
	
#siteName {float: left; text-align: left; width: auto;}

/*--------- page content ------------*/

#pageHeader { /*the top of the page contents - including h2 (page name) and pageNav (page contents)*/
	background: #BEBD9F url(images/slant1_green2.jpg);
	margin-top: 0; /*makes up for IE7 bottom margin fix in siteHeader*/
	margin-bottom: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	}

/* Holly Hack to fix peekaboo bug in IE6!  Hides from IE5-mac \*/
* html #pageHeader {height: 1%;}
/* End hide from IE5-mac */ 

*+html #pageHeader {height:1%} /*peekaboo bug (?) in IE7?? 
(only on resources page - sounds more like a problem with my CSS than the peekaboo bug)  
hoping this will fix -later- fixed it!*/

#pageContent { /*this includes pageHeader(h2+pageNav)+mainContent+nextNav*/
	width: auto;
	margin-top: 5px;
	padding: 0;
	background-color: #FFE;
	clear:both;
	}
	
#mainContent { /*"article" content, minus h2-pageNav-nextNav */
	background-color: #FFE;
	width: auto;
	margin: 0 30px;
	}

#clear,.clear {clear: both;}

	
/*---------------------------------------------------------------------------------------
	=================================Typography Styles==============================
----------------------------------------------------------------------------------------*/

#mainContent p {
	margin-left: 20px;
	margin-right: 30px;
	line-height: 1.5em;
}

h1 {
	text-align: left;
	font-size: 3em; /* Bulletproof web design suggests using percentage - 
	What is the difference between percentage and em?  They seem the same to me. */
	color: #C8C6AD;
	margin-bottom: 20px;
	/*font-family: "Lucida Handwriting", "Bradley Hand", "Handwriting - Dakota", "Monotype Corsiva", Cursive;*/
	font-family: Georgia, "Times New Roman", Times, Serif;
	font-style: italic;
	padding: 5px 5px 5px 20px;	
/*CSS3 technique for text shadow that only works in Safari:*/ 
	text-shadow: 5px 5px 6px #000; 
/*doesn't validate for CSS2, but looks really cool!!  
And makes a text shadow without using graphics!*/	
	}


h2 {
	text-align: left;
	font-size: 1.7em;
	margin-top: 0;
	margin-bottom: 10px;
	color: #030;
	background: url(images/birdtracks450.gif) no-repeat 11em 0;
	padding: 5px 0 15px 20px;	
/*CSS3 technique that only works in Safari*/ 
	text-shadow: 4px 4px 5px #666; 
/*doesn't validate for CSS2, but looks really cool!!  
And makes a text shadow without using graphics!*/
	}

h3 {
	font-size: 1.4em;
	margin-left: 20px;
	margin-bottom: 1px;
	color: #030;
	}

h4 {
	font-size: 1.2em;
	margin-left: 30px;
	margin-bottom: .5px;
	color: #630;
	}

h5 {
	font-size: 1.1em;
	margin-left: 40px;
	margin-bottom: 0;
	color: #963;
	}

blockquote {
	margin-top: -5px;
	margin-left: 60px;
	font-style: italic;
	width: 70%;
	}

.note {
font-size: 1.1em;
font-family: "Bradley Hand ITC TT-Bold", "Bradley Hand ITC TT", "Bradley Hand ITC", "Bradley Hand",
"Handwriting - Dakota", "Lucida Handwriting", "Monotype Corsiva", Cursive;
font-weight: normal;
}

/*----------------------------------------------------------------------------------------
	=================================Navigation Styles=================================
------------------------------------------------------------------------------------------*/

/*-------Skip Navigation (makes it not appear except for screen readers or if tabbed into)-----*/
/*--- from WebAIM article: "Skip Navigation Links" http://webaim.org/techniques/skipnav/#focus ---*/

 #skipNav a, #skipNav a:hover, #skipNav a:visited
{
position:absolute;
left:0;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

#skipNav a:active, #skipNav a:focus
{
position:static;
width:auto;
height:auto;
background-color:#FF9;
}

/*Note: fixed the IE7 bug of the content getting "pulled up" when the skip to content link 
was tabbed into - I just put the div before the content - it's the first div after body, 
and is not nested inside any other div.*/


/*------- Main Navigation styles ---------*/


#mainNav /*this is the id for the ul*/{
	margin: 0;
	padding: 0 0 5px 0;
	width: auto;
	clear: both;
	list-style-type: none;
	}
	
#navContainer {	float: left; width: 100%; clear: both; margin: 0;}

#mainNav a {
	background-color: #908F7A;
	background-image: url(images/slant1_green1.jpg);
	display: block;
	list-style: none;
	border-bottom: solid 1px #908F7A;
	border-right: solid 1px #605C47;
	padding: 4px;
	font-weight: bold;
	margin: 0;
	color: #ffc;
	width: auto;
	text-align: center;
	}

#home #mainNav .home a,
#attractingbirds #mainNav .attractingbirds a,
#identifyingbirds #mainNav .identifyingbirds a,
#birdingethics #mainNav .birdingethics a,
#lookingbeyond #mainNav .lookingbeyond a,
#resourcespage #mainNav .resourcespage a,
#calendar #mainNav .calendar a,
#feedbackpage #mainNav .feedbackpage a,
#outline #mainNav .outline a,
#aboutus #mainNav .aboutus a {
	background: #BEBD9F url(images/slant1_green2.jpg);
	border-bottom: solid 1px #BEBD9F;
	cursor: default;
	color: #000;
	font-weight: bold;
	}

#home #mainNav .home a:active,
#attractingbirds #mainNav .attractingbirds a:active,
#identifyingbirds #mainNav .identifyingbirds a:active,
#birdingethics #mainNav .birdingethics a:active,
#lookingbeyond #mainNav .lookingbeyond a:active,
#resourcespage #mainNav .resourcespage a:active,
#calendar #mainNav .calendar a:active,
#feedbackpage #mainNav .feedbackpage a:active,
#outline #mainNav .outline a:active,
#aboutus #mainNav .aboutus a:active {
	text-decoration: none; 
	color:#000; 
	font-weight:bold;
	cursor: default;
	}

#mainNav li {
	display:block; 
	float:left; 
	margin: 0; 
	list-style: none; 
	}

#mainNav a:link,
#mainNav a:visited {
	text-decoration: none;
	color: #ffc;
	font-weight: normal;
	}
	
#mainNav a:hover,
#mainNav a:focus {
	text-decoration: none;
	color: #360;
	background-color: #E9E0D7;
	background-image: url(images/slant1_ivory1.jpg);
	}

#mainNav a:active {
	text-decoration: underline;
	color: #603;
	background-color: #FFC;
	background-image: url(images/slant1_ivory1.jpg);
	}	
	

/* =================Page Navigation styles=================== */



/* pageNav box + link styles */

/*=======Nifty round corners without images: http://www.html.it/articoli/nifty/index.html======*/

.rtop, .rbottom{display:block; 	background:  #F4E8D2 url(images/slant1_green2.jpg);}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: #F4E8D2  
url(images/slant1_yellow2.jpg);}
.r1{margin: 0 5px;}
.r2{margin: 0 3px;}
.r3{margin: 0 2px;}
.r4{margin: 0 1px; height: 2px;}
#container { margin: 15px 40px;background: #F4E8D2 url(images/slant1_yellow2.jpg); 
width: 400px; padding: 0;
	/*CSS3 box shadow (works in Safari!!) - DOESN'T VALIDATE FOR CSS2 - */
		-webkit-box-shadow: 4px 4px 8px #222;
		-moz-box-shadow: 4px 4px 8px #222;
		box-shadow: 4px 4px 8px #222; 
	/*Doesn't validate in CSS2, but looks really cool!!*/
}

#pageNav {
	/*margin-left: 15px;
	padding: 5px 0;*/
	width: 360px;
	margin-left: 20px;
	margin-bottom: 1px;
	padding-bottom: 1px;
	background: #F4E8D2 url(images/slant1_yellow2.jpg);	
	}


#pageNav h3 {
	margin-top: 0;
	padding-top: 5px;
	font-size: 1.2em;
	}


#pageNav ol {
	list-style-type: square;
	}
	
#pageNav li {
	margin-left: 20px;	
	}

	
#pageNav a:link {
	text-decoration: none;
	color: #030;
	font-weight: normal;
	}

#pageNav a:visited {
	text-decoration: none;
	color: #660;	
	}
	
#pageNav a:hover,
#pageNav a:focus {
	text-decoration: underline;
	color: #300;
	font-weight: bold;
	}
	
#pageNav a:active {
	text-decoration: underline;
	color: #603;
	font-weight: bold;
	}

#pageNav ol.smallindent {margin-left: -10px; /*_margin-left: 15px;*/}
/*underscore hack invalidates CSS*/

* html #pageNav ol.smallindent {margin-left: 15px;}

#pageNav ol.smallindent li {margin-left: -10px; /*_margin-left: 5px;*/}

* html #pageNav ol.smallindent li {margin-left: 5px;}

/*IE7 filter:*/ 
*+html #pageNav ol.smallindent { margin-left: 25px; }

/* See Footer Styles for "Next Navigation" styles */

/*---------------------------------------------------------------------------------------
	==================================Link Styles====================================
----------------------------------------------------------------------------------------*/

/*----default link styles----*/
a:link {
	text-decoration: underline;
	color: #360;
	}

a:visited {
	text-decoration: underline;
	color: #693;
	}
	
a:hover,
a:focus {
	text-decoration: underline;
	color: #030;
	background-color: #FFC;
	}
	
a:active {
	text-decoration: underline;
	color: #603;
	background-color: #FFC;
	}
	
	
/*----other "link" styles----*/
acronym,
abbr {
	border-bottom: 1px dotted #666;
	cursor: help;
	}

/* Simple Accessible External Links from MaxDesign:
http://www.maxdesign.com.au/presentation/external/ */

a[href^="http:"] span,
a[href^="https:"] span,
a[href^="http://feeds.technorati.com"] span {
position: absolute;
left: -5000px;
width: 4000px;
	}


a[href^="http:"],
a[href^="https:"] {
	padding: 0 20px 5px 0;
	background: url(images/external_link.gif) no-repeat 100% 0;
	}

#footer #hcard a[href^="http://feeds.technorati.com"] {
	padding-right: 32px; 
	padding-bottom: 2px;
	background: url(images/icn-dl-vcard.png) no-repeat 100% 0;
	}	

#calendar a[href^="http://feeds.technorati.com/events/"] {
	padding-right: 35px; 
	padding-bottom: 5px;
	background: url(images/icn-dl-vcalendar.png) no-repeat 100% 0;
	}	 

#footer a[href^="http://my395.com"],
a[href^="http://my395.com/backyardbirding/"]:link,
a[href^="http://my395.com/backyardbirding/"]:visited,
a[href^="http://my395.com/backyardbirding/"]:hover,
a[href^="http://my395.com/backyardbirding/"]:active,
a[href^="http://my395.com/backyardbirding/"]:focus,
a[href^="http://www.my395.com"],
#share .share-tools li a[href^="http:"] {
	padding-right: 0; 
	background-image: none;
	}


a[href^="http:"]:link,
a[href^="https:"]:link {
	padding: 0 20px 5px 0;
	background: url(images/external_link.gif) no-repeat 100% 0;
	}

a[href^="http:"]:visited,
a[href^="https:"]:visited {
	padding: 0 20px 5px 0;
	background: url(images/external_link.gif) no-repeat 100% -100px;
	}

a[href^="http:"]:hover,
a[href^="https:"]:hover,
a[href^="http:"]:focus,
a[href^="https:"]:focus {
	padding: 0 20px 5px 0;
	background: #FFC url(images/external_link.gif) no-repeat 100% -200px;
	}

/*---removing external link icon from linked images----*/

#imageStellars a[href^="http:"],
#imageWarbler a[href^="http:"], 
#calendar a[href^="http://microformats.org/wiki/hcalendar"] {
	padding-right: 0; 
	background-image: none;
	}

/*---putting external link icon back into image captions!----*/

#pageContent #mainContent p.caption a[href^="http:"]:link {
	padding-right: 25px; 
	padding-bottom: 5px;
	background: url(images/external_link.gif) no-repeat 100% 0;
	}

#pageContent #mainContent p.caption a[href^="http:"]:visited {
	padding-right: 25px; 
	padding-bottom: 5px;
	background: url(images/external_link.gif) no-repeat 100% -100px;
	}

#pageContent #mainContent p.caption a[href^="http:"]:hover,
#pageContent #mainContent p.caption a[href^="http:"]:focus {
	padding-right: 25px; 
	padding-bottom: 5px;
	background: #FFC url(images/external_link.gif) no-repeat 100% -200px;
	}

/*------------e-mail links------------*/

a[href^="mailto:"],
a[href^="mailto:"]:link {
	padding-right: 17px; 
	background: url(images/mailto.gif) no-repeat right;
	text-decoration: underline;
	color: #360;
	}

a[href^="mailto:"]:visited {
	padding-right: 17px; 
	background: url(images/mailto.gif) no-repeat right;
	text-decoration: underline;
	color: #693;
	}

a[href^="mailto:"]:hover,
a[href^="mailto:"]:focus {
	padding-right: 17px; 
	background: #FF9 url(images/mailto.gif) no-repeat right;
	text-decoration: underline;
	color: #030;
	}

a[href^="mailto:"]:active {
	padding-right: 17px; 
	background: #FF6 url(images/mailto.gif) no-repeat right;
	text-decoration: underline;
	color: #603;
	}

/*--------------pdf links-------------------*/

a[href$=".pdf"]:link,
a[href$=".pdf"]:visited {
	background: url(images/pdf_16.gif) no-repeat right top;
	padding: 0 20px 5px 0;
	}

a[href$=".pdf"]:hover,
a[href$=".pdf"]:focus {
	background: #FFC url(images/pdf_16.gif) no-repeat right top;
	padding: 0 20px 5px 0;
	}

a[href$=".pdf"]:active {
	background: url(images/pdf_16.gif) no-repeat right top;
	padding: 0 20px 5px 0;
	}

/*------------------CSS Tooltips------------------*/
a.tooltip, a.tooltipLeft {position:relative;}

a.tooltip span, a.tooltipLeft span {display:none; text-decoration: none;}

a.tooltip:hover span {
	display:block;
	position:absolute;
	top:0;
	left:17em;
	padding:0.1em 0.2em;
	border: 1px solid #656565;
	background-color:#C9F150;
	color:#000;
	font-size: 100%; /*fixes bug in IE5.x/Win*/
	text-decoration: none;
	text-align:center;
	font-family: "Bradley Hand ITC TT-Bold", "Bradley Hand ITC TT", "Bradley Hand ITC", 
	"Bradley Hand", "Handwriting - Dakota", "Lucida Handwriting", "Monotype Corsiva", Cursive;
	font-weight: normal;
	font-style: normal;
	}
	
a.tooltipLeft:hover span {
	display:block;
	position:absolute;
	top:0;
	/*left:-16em;*/
	right:12em;	
	padding:0.2em 0.6em;
	border: 1px solid #656565;
	background-color:#C9F150;
	color:#000;
	font-size: 100%; /*fixes bug in IE5.x/Win*/
	text-decoration: none;
	text-align:center;
	font-family: "Bradley Hand ITC TT-Bold", "Bradley Hand ITC TT", "Bradley Hand ITC", 
	"Bradley Hand", "Handwriting - Dakota", "Lucida Handwriting", "Monotype Corsiva", Cursive;
	font-weight: normal;
	font-style: normal;
	}
	

#feedbackpage a[href^="mailto:"].tooltip:hover span,
#aboutus a[href^="mailto:"].tooltip:hover span {
	display:block;
	position:absolute;
	top:1.3em;
	left:1.5em;
	padding:.2em .6em;
	border: 1px solid #963;
	background-color:#CC9;
	color:#000;
	font-size: 100%; /*fixes bug in IE5.x/Win*/
	text-decoration: none;
	}


/*----------------------------------------------------------------------------------------
	===================================List Styles===================================
------------------------------------------------------------------------------------------*/

#mainContent ul, #mainContent dl, #mainContent ol
	{
	line-height: 1.8em;
	margin-left: 50px;
	margin-right: 100px;
	}

#birdingethics blockquote ul {
	line-height: normal;
	margin:0;
	font-style:normal;
	}
#birdingethics blockquote p {
	font-style:normal;
	font-weight:bold;
	}

#mainContent li {
	list-style-type: square;
	}

dl {
	clear: none;
	display: block;
	}

	
dt {
	font-size: 1.1em;
	font-weight: bold;
	padding-left: 5px;
	margin-top: 5px;
	display: block;
	color: #963;
	}

dd {
	font-size: .99em;
	margin-bottom: 15px;
	margin-top: 1px;
	margin-left: 0;
	padding-left: 5px;
	}

#referenceList {clear: left;}
	
/*--------------------------------------------------------------------------------------
	=======================Image and image caption Styles============================ 
----------------------------------------------------------------------------------------*/

/* I think I'm getting the photo placement figured out!  
1. 	Put a div around the whole thing (image plus caption),
2. 	set the width of the div to the image width, (plus 10px for drop shadow)
3. 	set the height, if set, a little higher to include the caption and allow room for text enlargement,
4. 	float div where desired,
5. 	set margins/padding as needed,
6. 	make the caption its own paragraph and use the caption class selector, 
7. 	set font, size, alignment as desired,
8. 	set width to inherit, so it stays with the image.
9. 	If needed, set styles on individual pages for fixing the way lists display 
	next to left-floated images (seems to be an issue).
See the "New CSS for images" section below for example - I'm fixing them a few at a time*/

/*-----------Setting Drop Shadows---------------*/
/*This worked well:
1. trim the drop shadow image to the same dimensions as the photo
2. set it as a background image for the photo div
3. set no repeat
4. position it to be 8-10px each from top and left to offset it (for my drop shadow, it was 9px)
5. set the caption top margin so that it doesn't block the dropshadow
*/

	
img {
	margin: 0;
	border-style: none;
	}

	
/*--------------------------------------------------------------------------------------------
new CSS for images - using a combination of divs and classes - 
I think this will work better!
----------------------------------------------------------------------------------------------*/


#pageContent #mainContent img + p.caption, /*extra selectors override content p styles*/
#pageContent #mainContent a + p.caption,
.caption {
	font-family: Georgia, "Times New Roman", Times, Serif;
	font-size: .9em;
	font-style: italic;
	margin: 1em 0 2em 0;
	padding: 0 0 1em 0;
	width: inherit;
	line-height: 1.5em;
	background:none;
	text-align: center;
	}
/*--I needed greater specificity for all other browsers to override p styles, but...
IE Win 5/6 didn't seem to "see" this, so just .caption fixes text in IE Win 5/6 --*/


/*------------index images----------------*/	

#imageStellars {
	width: 310px;  /*image width is 300px*/
	height: 341px;  /*image height is 331px*/
	float: left;
	margin: 1em 2em 4em 2em; /*5px 20px 35px 20px*/
	background: url(images/300x331_stellarsshadow.png) no-repeat 9px 9px;
	}


#imageWarbler {
	width: 346px;  /*image width is 336px*/
	height: 260px;  /*image height is 250px*/
	float: right;
	margin: 1em 2em 4.5em 2em; /*5px 20px 25px 20px*/
	background: url(images/336x250_warblershadow.png) no-repeat 9px 9px;
	}

#imageStellars a:hover,#imageWarbler a:hover {background: none;}


/*------------attracting birds images----------------*/	
	
#imageHousefinch {
	width: 410px;  /*image width is 400*/
	height: 260px;  /*image height is 250*/
	float: left;
	margin: 0.2em 2em 4em 2em; /*5px 20px 25px 20px*/
	background: url(images/400x250_housefinchshadow.png) no-repeat 9px 9px;
	}



#imageHummer {
	width: 390px; /*image is 380px wide*/
	height: 190px; /*image is 175px*/
	float: right;
	margin: 0.2em 2em 4em 2em; /*5px 20px 25px 20px*/
	background: url(images/380x175_hummershadow.png) no-repeat 9px 9px;
	}

#imageFinchsock {
	width: 253px; /*image width is 243px*/
	height: 410px; /*image height is 400px*/
	float: left;
	margin: 0.2em 2em 4em 2em; /*5px 20px 25px 20px*/
	background: url(images/243x400_finchsockshadow.png) no-repeat 9px 9px;
	}


#imageNutalls {
	width: 310px; /*image width is 300px*/
	height: 277px; /*image height is 267px*/
	float: right;
	margin: 0.2em 2em 4em 2em; /*5px 20px 25px 20px*/
	background: url(images/300x267_nutallsshadow.png) no-repeat 9px 9px;
	}
	


/*------------identifying birds images----------------*/	
	
#imageBinos {
	width: 200px; 
	height: 190px; 
	padding: 2em 2em 4em 2em/*25px 25px 35px 25px*/;
	float: right;
	margin: 0 20px 5px 10px;
	border: solid 1px #CCC;
	border-right: solid 3px #CCC;
	border-bottom: solid 3px #CCC;
	background-color: #FFF;
	}

#imageBinos p {width: 200px; margin: 0; text-align: center;}
/*--Fixes .caption text in IE Win 5/6--*/

#imageFieldmarks {
	width: 550px; 
	height: 370px; 
	padding: 2em 2em 4em 2em;
	margin: auto;
	text-align: center;
	clear: both;
	border: solid 1px #CCC;
	border-right: solid 3px #CCC;
	border-bottom: solid 3px #CCC;
	background-color: #FFF;
	}



#imageGoldfinch {
	width: 410px;  /*image width is 400px*/
	height: 275px;  /*image height is 258*/
	float: left;
	margin: 10px 20px 35px 20px;
	background: url(images/400x258_goldfinchshadow.png) no-repeat 9px 9px;
	}




/*------------beyond the backyard images----------------*/	
	
#imageOriole {
	width: 310px;  /*image width is 300px*/
	height: 160px;  /*image height is 150px*/
	float: right;
	margin: 5px 20px 25px 20px; 
	background: url(images/300x150_orioleshadow.png) no-repeat 9px 9px;
	}


#imageGrosbeak {
	width: 270px;  /*image width is 260px*/
	height: 260px;  /*image height is 250*/
	float: left;
	margin: 10px 20px 25px 20px;
	background: url(images/260x250_grosbeakshadow.png) no-repeat 9px 9px;
	}



#imageCoffee {
	width: 160px; /*image is 150px wide*/
	height: 190px; /*image is 180px high*/
	float: right;
	margin: 20px 75px 5px 5px;
	padding: 2em 2em 4em 2em;
	background-color: #DDB;
	border: solid 1px #CCC;
	border-right: solid 3px #CCC;
	border-bottom: solid 3px #CCC;
	}

#imageCoffee p {width: 160px; margin: 0; text-align: center; background-color: #DDB;}
/*--Fixes .caption text in IE Win 5/6--*/

/*-----------About Us Images-------------------*/

#imageMaggie {
	width: 410px;  /*image width is 400px*/
	height: 275px;  /*image height is 258*/
	float: right;
	clear:right;
	margin: 10px 20px 35px 20px;
	background: url(images/400x258_goldfinchshadow.png) no-repeat 9px 9px;
	}



/*----------------------------------------------------------------------------------------
	=======================Table Styles (Table id="resources")========================
------------------------------------------------------------------------------------------*/

#resources {border-collapse: collapse;}

table {
	border-collapse: collapse; /*does IE not recognize this declaration???!!*/
	margin: 0 20px 0 40px;
	width: 90%;
	border: solid 1px #690;
	}

caption {
	caption-side: top;
	text-align: left;
	font-size: 1.4em;
	font-weight: bold;
	padding: 20px;
	margin-left: 20px;
	color: #630;
	}

#resources caption .sub {
	font-size: 95%;
	font-weight: normal;
	font-style: italic;
	}


thead tr {background-color: #DDB;}
	
th {
	text-align: left;
	padding: 5px;
	background-color: #DDB;
	border: 1px solid #690;
	}

.tracks {background: #DDB url(images/birdprints.gif) no-repeat 15px 25px;}

	
tfoot th {text-align: center;}

td {
	padding: 5px 10px 5px 10px; /*WTF!!??  Now Safari doesn't seem to "get" padding!!  GRRRRR*/
	vertical-align: top;
	border-bottom: 1px solid #690;
	border-right: 1px dotted #690; /*this only seems to display properly in Safari*/
	}

/*I had to give the table an id to have the link styles override #mainContent link styles*/

#resources a:link {
	text-decoration: underline;
	color: #360;
	}

#resources a:visited {
	text-decoration: underline;
	color: #693;
	}

#resources a:hover {
	text-decoration: underline;
	color: #030;
	font-weight: inherit;
	background-color: #FF9; 
	}

#resources a:active {
	text-decoration: underline;
	color: #F00;
	font-weight: normal;
	}

table tr.even {background-color: #FFD;}
	
table tr:hover {background-color: #EEC;}

#resources input:focus {background: #FF6;}

#resources abbr {border:0; cursor:default;}

/*----------------------------------------------------------------------------------------
	====================================Form Styles=====================================
------------------------------------------------------------------------------------------*/

form {
	background-color: #FFC;
	border: 1px solid;
	width: 90%;
	margin: 20px 20px 20px 40px;
	padding: 10px 5px 5px 10px;
	}
	
#birdingfeedback div {margin: 5px 0 10px 20px;}
	
	

/*-------Labels----------*/

#birdingfeedback label {font-size: 1.1em;}

#birdingfeedback #nameField label, 
#emailField label, 
#birdingLevel label, 
#siteEval label, 
#feedbackType label, 
#feedbackField label, 
#uploadField label {
	font-weight: bold;
	}

#uploadField label {margin-left:0;}

#birdingfeedback input.checkbox + label,
#birdingfeedback input.radio + label {
	margin: 0 2px 0 0;
	font-size: 1em;
}

/*---------Inputs-----------*/
#birdingfeedback input {margin: 0;}


#birdingfeedback #newsletter,
#birdingfeedback #referral,
#birdingfeedback #region {
	margin:inherit;
	}

input, 
textarea {
	width:90%; 
	background-color:#FFF; 
	margin-right: 5px; 
	padding-right: 15px;
	}


#birdingfeedback input.radio, 
#birdingfeedback input.checkbox, 
#birdingfeedback input.submit, 
#birdingfeedback input.reset {
	width: auto;
	}

#birdingfeedback input.radio, 
#birdingfeedback input.checkbox {
	margin-right:0.1em;
	background-color: #FFD;
	}

input:focus, 
select:focus,
textarea:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
input[type="file"]:focus, /*nothing seems to work on this field in FF (this works in Safari)*/
input[type="radio"]:focus+label, /*these ~don't~ work in Safari but ~does~ in FF*/
input[type="checkbox"]:focus+label {
background: #FF9;
color:#000;
}
/*Doesn't override Google Toolbar's Autofill highlighting :(
and NONE of this works for IE7 :(*/

input[type="text"], 
input[type="file"], 
#birdingfeedback input #upload, 
textarea {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	}
/*nothing seems to work on the file upload field in FF*/

input#submit, input#reset {
	background-color: #CC9;
	cursor: pointer;
	}

#submit:hover, #submit:focus {background-color:#393; color: #FFC;}
#reset:hover, #reset:focus {background-color: #C30; color: #FF9;}

#submit:active,#reset:active {background-color:#A63; color: #FF9;}

/*----------Fieldsets and Legends------------*/
fieldset {margin: 10px 10px 10px 15px; width: 92%; background-color: #FFD;}

fieldset legend {
	font-weight: bold;
	font-size: 1.4em;
	background-color: #CC9;

	}
fieldset fieldset {
	margin-left: 20px;
	margin-right: 10px;
	width: 90%;
	padding: 5px;	
	}
	
fieldset fieldset legend {
	font-size: 1.1em;
	background-color: #FFD;
	}

/*---------Divs, ID selectors, and Classes-----------*/

 #feedbackpage #mainContent #birdingfeedback .checkboxLabel {
	margin: 0;
	display: block;
	float: left;
	width: 210px;
	padding: 2px 2px 4px 2px;
	}

#tracks {
	background-image: url(images/bird_tracks.gif);
	background-repeat: no-repeat;
	background-position: 95% top;
	}
	
#birdingLevel, 
#siteEval,
#feedbackType {
	padding: 10px 0;
	}


#birdingfeedback .note {
	background-color: #FFD;
	font-style: normal; 
	font-weight: normal;
	}
  
.topReturn a:hover,
.topReturn a:focus {
	text-decoration: underline;
	color: #030;
	background: #FF9;
 }
 
.topReturn a:active {
	text-decoration: underline;
	color: #603;
	background-color: #FF6;
	}


/*------------Floats and Clears------------------*/

#birdingfeedback #submitButton,
#birdingfeedback #resetButton {
	float: left;
	width: 200px;
	}

/*-----------page styles----------*/


	#feedbackpage #top 	{
	background-image: url(images/birdseed_bg.jpg);
	}

	#feedbackpage #pageContent {
	background-image: url(images/birdseed_bg.jpg);
	}
	
	#feedbackpage #mainContent {
	background-image: url(images/birdseed_bg.jpg);
	}
	


/*----------------------------------------------------------------------------------------
	================================Footer Styles======================================
------------------------------------------------------------------------------------------*/

/*--------------------------- =NextNav ----------------------------*/

#nextNav {
	text-align: right;
	font-size: 1.4em;
	font-weight: bold;
	margin: 40px 0 0 0;
	padding: 0.5px 20px 1px 0;
	background: #BEBD9F url(images/slant1_green2.jpg);
	}

#nextNav p {
	text-align: right;
	background: url(images/bird_tracks2.gif) no-repeat 40px 2px;
	padding: 20px 20px 20px 10px;
	margin: 0;
	}
	
#nextNav a:link {	
	text-decoration: none;
	color: #030;
	}

#nextNav a:visited {
	text-decoration: none;
	color: #693;
	}
	
#nextNav a:hover,
#nextNav a:focus {
	text-decoration: underline;
	color: #360;
	background-color: #FFC;
	}
	
/*--------------------------- =Footer --------------------------*/

#footer {
	font-size: .85em;
	font-style: italic;
	font-weight: normal;
	margin: 0;   /*in IE Win 5/6 the white background showed between 
	#nextNav and #footer instead of the grass background, so I "closed the gap"*/
	padding: 10px;
	width: auto;
	border: none;
	background: #F3E7D1 url(images/slant1_yellow2.jpg);	
	clear: both;
	}
	
#footer p {
	margin: 1px;
	font-weight: normal;
	color: #030;
	text-align: center;
	}

.siteName {font-weight:bold;}

/*
#footer a:link {	
	padding-right: 17px; 
	background: url(images/mailto.gif) no-repeat right center;
	text-decoration: none;
	color: #030;
	}

#footer a:visited {
	padding-right: 17px; 
	background: url(images/mailto.gif) no-repeat right center;
	text-decoration: none;
	color: #693;
	}
	
#footer a:hover,
#footer a:focus {
	padding-right: 17px; 
	background: #FF9 url(images/mailto.gif) no-repeat right center;
	text-decoration: underline;
	color: #360;
	}
*/	

/*--------------------------- =Address ---------------------------*/
	
address {
	font-weight: normal;
	color: #030;
	text-align: center;
	margin:5px;
	padding-bottom:5px;
	}

#download-vcard {padding-bottom:10px; text-align:center; display:block;}

address span.postal-code,
address span.tel {padding-right:0.5em; border-right: solid 1px #360;}


/*------------------------Utility Links-----------------------------*/

#footer #footerNav {
	width: 500px;
	margin:0 0 0 -9.5em; 
	position:relative; 
	left:50%; 
	padding: 10px 0 10px 0;
	}

/* Holly Hack to fix peekaboo bug in IE6!  Hides from IE5-mac \*/
* html #footerNav {height: 1%;}
/* End hide from IE5-mac */ 

#footer ul.utilitylinks {
	list-style: none;
	padding: 5px 0 10px 0;
	margin: 0;
	text-align:center;
	clear:both;
}

#footer ul.utilitylinks li {
	padding: 0 1em;
	border-right: 1px solid #360;
	float: left;
}


#footer ul.utilitylinks .footerLast {
	border: 0px none;
}

p.updated {clear:both;}

/*---------------------- License ---------------------------------*/

#footer #license {
	clear: both;
	padding: 1em 0 1em 14em;
	text-align: center;
	width: 500px;
	margin: auto;
}
#footer #license p {
	margin-top: 0;
	padding-top: 0 !important;
	text-align: left;
	font-size: .95em;
} 
#footer #license img { float: left; margin-right: 5px; padding: 0 0 50px 0;}

/*
#footer #license { clear: both; border-top: 1px solid #ddd; padding-top: 20px; padding-bottom: 1.5em; text-align: left; }
#footer #license p { margin-top: 0; padding-top: 0 !important; } 
#footer #license img { border: none; }
*/
#footer #license img a[href^="http:"],#footer #license a[href^="http:"] {
	padding-right: 0; 
	background-image: none;
	}

/*-----------------Microformat styles: XOXO; hcalendar; xfolk;-----------------------------*/

#outline #siteOutline {padding: 10px 30px;}
#outline #siteOutline h3 {background: url(images/microformat_xoxo.png) no-repeat 15em center;}
#outline .xoxo {font-size: 1.2em; line-height: 2em; }
#outline ol.xoxo { list-style:upper-roman; font-weight:800;}
#outline ol.xoxo ol { list-style:upper-latin; font-weight:700;}
#outline ol.xoxo ol ol {list-style:decimal; font-weight:normal;}
#outline ol.xoxo ol ol ol {list-style:lower-latin; font-weight:normal;}
#outline ol.xoxo ol ol ol ol {list-style:lower-roman; font-weight:normal;}
#outline ol[compact="compact"] { display:none; }
#outline li.compact { list-style-position:outside; list-style-image:url(images/triangle.gif); }
#outline li.expanded { list-style-position:outside; list-style-image:url(images/triangle_down.gif); }

#outline p.toplink {margin: 30px; }

#share ul.share-tools {/*width:100%; float:left; clear:left;*/ list-style:none;}
#share ul.share-tools li {float:left; margin-right:10px; background-image:none; list-style:none;}
#share ul.share-tools li img {margin:0; border:0;}

#aboutus #share ul.share-tools {margin-left: -10px;}

/* Holly Hack to fix peekaboo bug in IE6!  Hides from IE5-mac \*/
* html #share {height: 1%;}
/* End hide from IE5-mac */ 

.vevent abbr{border:0}
.downloadCalendar {line-height: 3em;}
#calendar li {line-height: 2em;}

#calendar h3.vcalendar {background: url(images/microformat_hcalendar.png) no-repeat 19em center;}