/*  This is my external style sheet. It is a centralized location from which to control styles!  */



/*  THIS DEFINES THE BODY  */

	body		{
			width: 1px solid;

			margin: 10px;

			background: #aaabbb url("images/blue_fade_tile.jpg") repeat-x;

			font-family: Lucida Grande, Verdana, sans-serif;

			text-align: center;
			}


/*  THIS DEFINES THE GENERIC BLOCK TAG STYLES  */

	h1		{padding:		5px 0px 5px 0px;
			margin:			0px;
			text-align:		center;
			font:			Bold 55px 'Arial Black', Tahoma,
						Helvetica, sans-serif;
			letter-spacing:		-2px;
			line-height:		50px;
			color:			#444;
			}

	h1 a		{color:			#444;
			text-decoration:	none;
			}

	h2		{padding:		0px;
			margin:			0px;
			text-align:		center;
			font:			Bold 23px 'Arial Black', Tahoma,
						Helvetica, sans-serif;
			letter-spacing:		-2px;
			line-height:		18px;
			color:			#444;
			}

	h3		{font-family:	verdana, arial, 'sans serif';
			font-size:	20px;
			color:		DarkGoldenRod;
			margin:		10px 10px;
			letter-spacing:	-1px;
			}

	h4		{font-family:	verdana, arial, 'sans serif';
			font-size:	16px;
			color:		DarkGoldenRod;
			margin:		10px 10px;
			letter-spacing:	-1px;
			}

	h5		{font-family: verdana, arial, 'sans serif';
			margin: 5px 10px;
			font-size: 15px;
			color:darkblue;
			margin: 10px 10px;
			}

	h6		{font-family: verdana, arial, 'sans serif';
			margin: 5px 10px;
			font-size: 13px;
			color:black;
			margin: 10px 10px;
			}

	p		{font-family: verdana, arial, 'sans serif';
			font-size: 12px;
			/*text-indent: .5cm;*/
			margin: 3px 15px 3px 15px;
			}

	li,th,td,dd	{font-family: verdana, arial, 'sans serif';

			font-size: 80%;

			margin: 3px 15px 3px 1px;
			}

			/* NOTE: I changed this font size from 90% to 80% because as
			it was the list text was bigger than the paragraph text */

	table		{font-family: verdana, arial, 'sans serif';
			font-size: 12px;
			}


	object		{margin: 10px 15px 5px 15px;}

	div img		{margin: 10px 10px 5px 10px;}

/*  THIS DEFINES THE GENERIC INLINE TAG STYLES  */

	blockquote	{
			margin: 10px 30px 10px 30px;

			font-style: italic;

			color: darkred;
			}

	sup		{vertical-align:35%; font-size:85%; color: darkred;}
	sub		{vertical-align:-35%; font-size:85%; color:darkred;}

	firstletter	{font-family: 'Georgia', Serif;
			font-style: italic;
			font-size: 200%;
			color: darkred;
			}

	unindented	{text-indent: 0px; text-indent: 0px;}




/*  THIS DEFINES LIST STYLES  */

	ul		{list-style: disc;}
	ul.big		{list-style: disc; font-size:125%}
	ol		{list-style: decimal}
	ol.upper-roman	{list-style: upper-roman}
	ol.lower-roman	{list-style: lower-roman}




/*  THIS DEFINES THE DIVISIONS GENERALY  */

/*  I only use these as diagnostics. Turn these on or off to see if borders and elements line up.  */

	div		{
			/*background-color: #FEF4E2;*/

			/*border: 1px solid;*/

	  /*p, li, h1, h2, h3, h4, blockquote {border: 1px solid;*/
			} 



/*  THIS DEFINES THE GENERAL CONTENT STYLE  */

	#content	{
			width:		630px;       /*	Notice that with the padding below the
							total width of the center white column
							is 650px because you have added 10px
							on each side. */
			margin-left:	auto;
			margin-right:	auto;

			padding:	10px 10px 10px 10px;

			position:	relative;

			clear:		both;
			text-align:	left;

			background:	#fff;

			/* border: 2px solid #000000; */
			/* border: 3px solid #5F707A; */
			/* border: 3px solid #993399; */
			}



/*  THIS DEFINES THE "RIGHT SIDE DESCRIPTION" STYLE  */

	#description	{
			position:	relative;
			}

	#description div	{
			position:	absolute;
			left:		650px;
			top:		-10px;
			width:		150px;

			text-align:	left;

			color:		#666;
		background-color:		#fff;

			border:		1px solid; color:black;
			}



/*  THIS DEFINES "LEFT SIDE CONTENT" STYLE  */

	.post	{
		position:		relative;
		margin-bottom:    	40px;
		}


	.post div.labels	{
		position:		absolute;
		right:			650px;
		text-align:		right;
		width:			150px;
		background-color:	#fff;
		line-height:		20px;
		border:			1px solid; color:black;
		}

	.post table	{background-color: #eee;
			}


/*  THIS DEFINES THE TOP-NAVIGATION STYLE & ATTRIBUTES  */

	div#topnavigation p	{font-size: 10px;}


/*  THIS DEFINES THE FOOTER STYLE & ATTRIBUTES  */

	div#footer	{
			clear: both;
			margin: 10px;
                	background-color: #eee;
			border: 1px solid;
			}

	div#footer p	{font-size: 6px;}




/*  THIS DEFINES QUOTE CLASSES  */

	q		{quotes: "\2018" "\2019" "\201C" "\201D"; }
	q:before	{content: open-quote }
	q:after		{content: close-quote }



/*  THIS DEFINES ALTERNATE STYLE CLASSES  */

	.center		{text-align: center}
	.indented	{text-indent: 0px; text-indent: 30px;}
	.unindented	{text-indent: 0px; text-indent: 0px;}


/*  THIS DEFINES LINK COLORS (Psedo Classes)  */

	a:link		{color:darkblue}
	a:visited	{color:darkred}
	a:active	{color:darkred}

	a:inactive	{color:red, display: none}

	a:hover		{color:green}




/*  go to http://www.somacon.com/p141.php for css generator  */

/*  This is another list style  */

ul.sample {
	list-style-type: inherit;
	list-style-image: inherit;
	list-style-position: inside;
}
ol.sample {
	list-style-type: decimal;
	list-style-position: inside;
}
ol.sample ol {
	list-style-type: lower-roman;
}

ul.sample li { font-style: italic; }
ol.sample li { font-style: italic; }
ol.sample ol { font-style: normal; }



/*  This is another paragrap style

p.quote {
	font-family: sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: medium;
	line-height: 100%;
	word-spacing: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-align: left;
	text-indent: 5ex;
}

p.sample {
	font-family: sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: medium;
	line-height: 100%;
	word-spacing: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-align: left;
	text-indent: 5ex;
}

*/




/*  This is another table style  

table.sample {
	border-width: 1px 1px 1px 1px;
	border-spacing: 2px;
	border-style: outset outset outset outset;
	border-color: gray gray gray gray;
	border-collapse: separate;
	background-color: white;
}

table.sample th {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: inset inset inset inset;
	border-color: gray gray gray gray;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}

table.sample td {
	border-width: 2px 2px 2px 2px;
	padding: 2px 2px 2px 2px;
	border-style: inset inset inset inset;
	border-color: gray gray gray gray;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}

*/












div.clearfloats {clear:both;}


/* TOP SECRET ASLETT CLEARING METHOD!! */


/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */

.clearfix:after	{
		content: ".";		/* the period is placed on the page as the last thing before the div closes */
		display: block;		/* inline elements don't respond to the clear property */ 
		height: 0;			/* ensure the period is not visible */
		clear: both;		/* make the container clear the period */
		visibility: hidden;		/* further ensures the period is not visible */
		}

.clearfix		{display: inline-block;}	/* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*
/* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */