/*
   New Perspectives on HTML and CSS
   Tutorial 5
   Case Problem 2

   Chamberlain Civic Center Style Sheet

   Filename:         ccc_others.css
   Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg
                     tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg

*/


/*
About this file: ccc_others contains default styling and body styling and header styles, all fairly standard.  Where
			it becomes interesting is where the id attribute selectors come into play.  These selectors cause different sections of styling code to be activated
			or deactivated.  For example, in ccc_others.css, there are two sets of id attribute selectors at play, labeled #ONE and #TWO.  Since the HTML files that 
			employ the ccc_others.css file have two sets of navigation systems, one might reasonably assume that #ONE applies to the first (or main) one and #TWO applies 
			to the second (or secondary) one; such an assumption would be correct.  Within the HTML files, the main navigation system resides within a Div section 
			id'd as ONE and the secondary navigation system lies within a Div section id'd at TWO.  Then using these labels within the css file allows us to target 
			styling for each section that can be (and is) different from the other section.  Consequently, whereas the main navigation system has gray tabs (that turn red
			when activated) hanging off of a red line, which distinguish it as the main nav system, the secondary nav system is a set of embedded links in the page that are
			red and that turn fuchsia when activated.  Thus, the two different systems have different styling and are distinct from each other.
			
The two HTML files which employ the ccc_others.css file are: local_arts.html and website_elements.html.

*/

/* Default Header styles  */


section h1 {      								/* contextual selector: only h1 headings nested w/in section elements have these changes applied */ 
	background-color: white;  				/* white */
	color: gray;  							/* text color of gray */
	font-family: Arial, sans-serif;  		/* preferred fonts to use */
	font-size: 2.0em;    					/* use em as scalable unit; this means font size will be 100% larger than body text*/
	letter-spacing: 0.2em;  				/*  adjust kerning, positive value = more space */
	line-height: 2.2em;						/* line height preferred */
	text-align: center;						/* alignment to use for text */
}

header > h2 {									/* for the first h2 off the header, use this styling */
	background-color: white;				/* bg white */
	color: rgb(155, 77, 155); 				/* text color */
	font-family: Fantasy, Cursive;			/* preferred fonts to use */
	font-style: italic;						/* italic font */
	letter-spacing: 0.2em;  				/*  adjust kerning, positive value = more space */
	line-height: 2.0em;						/* line height preferred */
	font-size: 1.7em;   					/* em is scalable unit; means font size will be 70% larger than body text */
	text-align: center;						/* alignment to use for text */
}

h2 {											/* default h2 (after first one off header, see above) */
	background-color: rgb(155, 77, 155);  	/* bg shade of medium purple */
	color: white;  							/* text color */
	color: rgba(255, 255, 255, 0.8);  		/* making h2 text semi-transparent */
	font-family: Arial, sans-serif;			/* preferred fonts to use */
	letter-spacing: 0.2em;  				/*  adjust kerning, positive value = more space */
	line-height: 2.0em;						/* line height preferred */
	font-size: 1.7em;    					/* em is scalable unit; means font size will be 70% larger than body text */
	text-align: center;						/* alignment to use for text */
}



/* Events Section *********************************** */

#events {
   margin: 0px auto;
}

/* Footer Section *********************************** */
/* the place where address and contact material resides */

footer {
   width: 720px;			/* width of footer is a little smaller than for general body */
}

footer address {				/* use this formatting and styling for the footer material */
   border-top: 1px solid red;
   font-size: 10px;
   font-style: normal;
   text-align: center;
}