/* color palette:
	#FCF8E4 : beige
	#A65555 : red
	#663434 : red (dark)
	#FFFAFA : red (light)
	#235930 : green (dark)
	#E6FFEB : green (light)
	#B5AAA3 : gray (dark)
	#EFEDEC : gray (light)
	#C49B50 : gold
*/

/* layout */
#header, #footer, #contentwrapper {
	width: 1000px;					/* width of the whole site */
	margin-left: auto;				/* centering */
	margin-right: auto; }

#contentwrapper { }

#header img {
	display: block;					
	margin-left: auto;
	margin-right: auto;	}

#header img  { border: 0; }

#header {
	height: 166px;					/* matches height of logo image */
	padding: 10px; }
	
#sidebar {
	max-width: 220px;
	min-width: 220px;
	padding: 0;
	margin: 0px; 5px; 5px;  		/* for getting the desired white space around the sidebar */
        float: left;	
        position: fixed;				/* keeps sidebar on the screen as you scroll down */
	top: 194px;						/* to make the sidebar line up with top of content area.  may need to be tweaked if size of header changes. */
	background-color: #FCF8E4;		/* beige */
	border: solid 1px #C49B50; }	/* gold */

#sidebar ul {							/* sidebar menu */
	list-style-type: none;			/* gets rid of bullets that are normally rendered with <ul> */
	border: 0;
	padding: 4px 0px 4px 0px;						/* gets rid of indenting normally rendered with <ul> */
	margin-top: 0;
	margin-bottom: 0; }					

#sidebar li { padding: 4px; }		/* controls space (gaps) between menu item boxes */

#sidebar a {
	text-decoration: none;			/* gets rid of link underline */
	display: block;					
	width: 196px;					/* controls width of menu item box */
	margin-left: auto;
	margin-right: auto;
	background-color: #EFEDEC;		/* light gray */
	padding: .25em;					/* controls space around menu labels (i.e., size of gold box) */
	border: solid 1px #B5AAA3;		/* dark gray */
	border-left: solid 3px #235930; /* the little green stripe */
	}

#content { 
	max-width: 717px;
	min-width: 717px;
	padding: .25em;					/* controls space between contents of the main content box and the border */
	margin: 5px;					/* controls size of white space around main content box */
	margin-top: 0;
	float: right;					/* causes menu sidebar, which follows the content in the html, to float to the left */
	background-color: #FCF8E4;		/* beige*/
	border: solid 1px #235930; }	/* dark green */

#footer {
	clear: both;					/* gets rid of any floating properties from previous divs */
	text-align: right;
	font-style: italic; }

html { overflow-y: scroll; }			/* makes vertical scrollbar appear on every page. prevents page "jumping" when you switch between a page without a scrollbar and one with a scrollbar. */

/* for 2-column layouts: */
#leftcolumn {
	width: 344px;
	border: solid 1px #663434;		/* dark red */
	background-color: #EFEDEC;		/* light gray*/
	margin-left: 4px;
	padding: 3px;
	}
	
#rightcolumn {
	width: 344px;
	float: right;
	border: solid 1px #663434;
	background-color: #EFEDEC;  /* light gray*/
	margin-right: 4px;
	padding: 3px; }


/* links */
#content a:link {
	color: #A65555;					/* makes unclicked links in the content area show as red */
	text-decoration: none; }		/* gets rid of underline */

#content a:hover { text-decoration: underline; }		/* underlines links on mouseover */

#content a:active { color: #C49B50; }				/* links are gold when you click them */

#content a:visited { color: #756E6A; }				/* links are dark gray after you've visited them */

#sidebar a:link { color: #000; }						/* sidebar menu items are black */

#sidebar a:hover { background-color: #C49B50; border-color: black black black #235930; }		/* styling for mouseover behavior on sidebar items */

#sidebar a:visited { color: #000; }



/* typography */
body {
	font-family: Tahoma, Verdana, Arial, sans-serif;		/* Tahoma is a pleasant, widely-available font */
	font-size: 11pt; }

h1, h2, h3 { font-family: Georgia, Serif; }			/* serif font for headings */

h1 {
	font-size: 160%;				/* heading size relative to default text size (defined in the "body" selector) */
	text-align: center;
	padding-top: .25em;				/* white space above/below headings */
	padding-bottom: 1.5em; }

h2 {	font-size: 135%;
	padding-bottom: 0; }

h3 { font-size: 115%; }

h1, h2, h3 {
	margin: 0;
	line-height: 135%; }
	
#content p {
	margin: 0;
	padding: .25em;
	padding-bottom: 1.0em;
	line-height: 135%;				/* controls spacing between paragraph lines; the default (100%) is not very comfortable to read */
	text-align: justify; }			/* causes paragraphs lines to fill up horizontal space, like a book, magazine, or newspaper */

#content ul {							/* unordered lists */
	list-style: square;				/* replaces default round bullets with squares */
	top-margin: .1em;
	left-margin: .25em; }			/* indentation */

#content ul, ol { line-height: 135%; }		/* line spacing for lists, as above with paragraphs */

#footer { font-size: 85%; }



/* "you are here" navigation */
/* the <body> tag of each page on the site has an id attribute unique to that page or section of the site (e.g., <body id="home"> for the main page).
	every link in the sidebar menu also has an id, which is the id of the page with "-link" appended (e.g., "home-link").
	this set of rules styles the menu item that matches the page you're currently on.  e.g., when you are on the "home" page, "home-link" will look different from the other menu items.
	this lets the user know where they are on the site. */
#home #home-link { background-color: #C49B50; border-color: black black black #235930;}					/* gold background with black border and green stripe. */
#board #board-link { background-color: #C49B50; border-color: black black black #235930;}
#meeting #meeting-link { background-color: #C49B50; border-color: black black black #235930;}
#directory #directory-link { background-color: #C49B50; border-color: black black black #235930;}
#join #join-link { background-color: #C49B50; border-color: black black black #235930;}
#scholarship #scholarship-link { background-color: #C49B50; border-color: black black black #235930;}
#newsletter #newsletter-link { background-color: #C49B50; border-color: black black black #235930;}
#bylaws #bylaws-link { background-color: #C49B50; border-color: black black black #235930;}
#atc #atc-link { background-color: #C49B50; border-color: black black black #235930;}
#links #links-link { background-color: #C49B50; border-color: black black black #235930;}
#contact #contact-link { background-color: #C49B50; border-color: black black black #235930;}
#atc-home #atc-home-link { background-color: #C49B50; border-color: black black black #235930;}
#documents-for-trainers #documents-for-trainers-link { background-color: #C49B50; border-color: black black black #235930;}
#committee #committee-link { background-color: #C49B50; border-color: black black black #235930;}
#trainers #trainers-link { background-color: #C49B50; border-color: black black black #235930;}


/* misc */
table, th, td {
	border: 1px solid #235930; }		/* dark green border for tables */

table {
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;			/* collapses borders between the table and its cells, so that adjacent items share borders. */
	margin-bottom: 1.0em;				/* white space to follow a table, same as a paragraph. */
	max-width: 75%; }					/* controls the maximum width of the table relative to its parent div. */

td { padding: .2em; }					/* controls space between the content of a table cell and the cell's border. */

hr {
	height: 1px;						/* styling for horizontal rules */
	width: 50%;							/* width relative to parent div */
	color: #235930;						/* dark green, matches border around #content */
	background-color: #235930;			/* this line and the one above it are redundant, but used for cross-browser compatibility. */
	border: 0;							/* makes the hr a solid line rather than a box */
	margin-top: 1.0em;					/* white space above and below the hr */
	margin-bottom: 1.0em; }