@charset "UTF-8";

/*

		CSS file for AARF 2098 Q2 newsletter 
		September 17 2009 mb 
		
		based on 
		
		http://blog.html.it/layoutgala/LayoutGala26.html
		
		html is organized this way in the .html file:
		
		<div id="globalcontainer">
		
		  <div id="header">
			  ...headerstuff
		  </div>
		  
		  <div id="contentwrapper">
		  
			  <div id="content">
				  ...contentstuff (all newsletter text and pictures
			  </div>
			
		  </div>
		  
		  <div id="navigation">
			  ...navigationstuff (TOC bascially)
		  </div>
		  
		  <div id="footer">
		  </div>
		  
		</div> 


Notes:
 Class selectors are used when, say, you want 3 different kinds of <p> tags. They start with a bullet. Use them when you want to use a given style several times on oen page
 
		 Example:
			in the css file, define
				 p.quipauthor {
					color: #666666;
				}
		 
			In the HTML, use it so:
				<p class="quipauthor">--Anonymous

 Descendant selectors are used when you want a different bahavior depending on a specific class. 
 
		Example: 
			in the css file, define
				p.intro a {color: yellow; } 
		
		makes <a> links yellow in any paragraphs that are of class "intro" 

/* 

-------------------------------------------------------------------------------------------------------
Define the layouts for the section divisions: header, content wrapper, content, navigation 
--------------------------------------------------------------------------------------------------------

*/
div#header {
	float:left;
	width:133%; /** was 100% */
}

div#contentwrapper {
	float:right;
	width:100%;
	margin-right: -33%; /* needed to  push content to the right of the nav section, btt that pushes the nav/content to the right of the header and footer widths */
}

div#content {
	float:left;
	width:100%;
	margin-right:10%
}

div#navigation {
	float:left;
	clear:left;
	width:32.9%
}

div#footer {
	clear:both;
	width:133%;
}


/* 

-------------------------------------------------------------------------------------------------------
Global to everything 
--------------------------------------------------------------------------------------------------------

*/

/* tag selectors redefine a tag's characteristics for every such tag on a page */

html, body {
	margin:0;
	padding:0
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-size: 76%;
}

p {
	margin:0 10px 10px
}

/* bullets in list items get a cute pawprint instead of a corky dot */
.bullet {
	list-style-image: url(logosandgraphics/pawprintyellow.png);
}

.logo {
	float: right;
	border-style: solid;
	border-width: 1px;
	width: 160px;
	height: 129px;
	border-color: #0066FF;
	margin-top: 10px;
	margin-right: 10px;
}

/* 
any img tag (an image) that is inside a tag having class "photo", gets this treatment
*/
.photo img {
	border: 1px solid #666;
	background-color: #fff;
	padding: 4px;
}

.figurefloatedleft {
	float: left;
	width: 210px;
	margin: 0 10px 10px 10px;
}

.figurefloatedright {
	float: right;
	width: 224px;
	margin: 0 10px 10px 10px;
	border: 2px solid #666;
	padding: 10px;
	clear: right;
}

/* 
any paragraph that is in a tag having class "figure", gets this treatment
*/
.figure p {
	font:  1em/normal Verdana, Arial, Hevetica, sans-serif;
	color: #666666;
	text-align: center;
	margin: 10px 0 0 0;
}

/* 
any img tag in a tag having class "fullsize", (i.e. the image you get when you click on a thumbnail) has these properties
*/
img.fullsize {
	float: left;
	color: #333;
	text-align: center;
	background-color: #FFFFFF;
	border: 5px solid #666;
	margin: 10px 40px 10px 10px; /* Top Left Bottom Right */
	padding: 15px;
}

/* 
any paragraph that is in a tag having class "quip", gets this treatment
*/
p.quipauthor {
	color: #666666;
	font-style: italic;
	font-size: 80%; /* inherited or subset Size will be 80% of whatever the font size was coming in*/
	margin-top: 10px;
	margin-right: 10px;
	/*margin-bottom: 10px;*/
	margin-left: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
}

body#fullsize {
	background-color: #cccccc;
}

br.clear {
	clear: both;
}

a:link {
	color:#0000FF
}     /* this rule shosw a hypertext link that has NOT YET been clicked on */

a:visited {
	color:#0099FF
}  /* this of a the link after it's been clicked on */

a:hover {
	color:#33CCFF
}  /* this shows the link during the time that the user does a mouse over */

a:active {
	color:#FFFF00
}  /* active is the color that the link becomes right at the moment that someone clicks on it */

/* ID selectors should be used for sections that occus only once per page. These specify styles for a certain section. They start with a pound sign. */


/* 

-------------------------------------------------------------------------------------------------------
Header div specifics 
--------------------------------------------------------------------------------------------------------

*/

div#header {
	font-family: Verdana, Arial, Helvetica, sans-serif;  /* background shading; note that the headers' h1,h2,h3 can override this if desired */
	color: #000;      									 /* font text color; note that the headers' h1,h2,h3 override this */
	background-color: #99CCFF;
}

div#header h1 {
	height: 2em;
	font-size: 2em;
	margin:0;
	padding-left:10px;
	vertical-align: top;
	text-align: left;
	font-size: 2em;
}

div#header h2 {
	height: 1.5em;
	font-size: 1.5em;
	margin:0;
	padding-left:10px;
	vertical-align: top;
	text-align: left;
	font-size: 1.5em;
}

div#header h3 {
	height: 1.25em;
	font-size: 1.25em;
	margin:0;
	padding-left:10px;
	vertical-align: top;
	text-align: left;
}

div#header blockquote {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	background-color: #EEEEEE; /* override the header's bg color so the blockquote box has a different bg shading */
	text-align: left;
	text-indent: 12pt;
	max-width: 800px;
	margin-right: auto;
	margin-left: 24px;
	padding: 12px 24px;
	border: solid 1px #060606;
}

div#header p {
	margin: 0;
	text-indent:1.5em;
}


/* 

-------------------------------------------------------------------------------------------------------
Content div specifics 
--------------------------------------------------------------------------------------------------------

*/

div#content p {
	line-height:1.4
}

div#content h1 {
	height: 2.25em;
	font-size: 2.25em;
	margin:0;
	padding-left:10px;
	background: #FFF;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	vertical-align: top;
	text-align: left;
	border-top-color: #00FF00;
}

div#content h2 {
	height: 1.75em;
	font-size: 1.75em;
	margin:0;
	padding-left:10px;
	background: #FFF;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	vertical-align: top;
	text-align: left;
	border-top-color: #00FF00;
}

div#content h3 {
	height: 1.25em;
	font-size: 1.25em;
	margin:0;
	padding-left:10px;
	background: #FFF;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	vertical-align: top;
	text-align: left;
	border-top-color: #00FF00;
}

div#content blockquote {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	background-color: #EEEEEE; /* override the header's bg color so the blockquote box has a different bg shading */
	text-align: left;
	max-width: 600px;
	margin-right: auto;
	margin-left: 20px;
	padding: 12px 20px;
	border: solid 1px #060606;
}

/* 

-------------------------------------------------------------------------------------------------------
Navigation div specifics 
--------------------------------------------------------------------------------------------------------

*/

div#navigation {
	background-color: #CCCCCC;
}

/* 

-------------------------------------------------------------------------------------------------------
Footerdiv  specifics 
--------------------------------------------------------------------------------------------------------

*/

div#footer {
	background: #333;
	color: #FFF
}

div#footer p {
	margin:0;
	padding:5px 10px;
	color: #FFFFFF;
	background-color: #99CCFF;
}