/*

 ,adPPYba,   ,adPPYba,   8b,dPPYba,   ,adPPYba,        ,adPPYba,  ,adPPYba,  ,adPPYba,  
a8"     ""  a8"     "8a  88P'   "Y8  a8P_____88       a8"     ""  I8[    ""  I8[    ""  
8b          8b       d8  88          8PP"""""""       8b           `"Y8ba,    `"Y8ba,   
"8a,   ,aa  "8a,   ,a8"  88          "8b,   ,aa  888  "8a,   ,aa  aa    ]8I  aa    ]8I  
 `"Ybbd8"'   `"YbbdP"'   88           `"Ybbd8"'  888   `"Ybbd8"'  `"YbbdP"'  `"YbbdP"'  

*/

/*  This stylesheet is for browsers other than Internet Explorer.  The differences between
this and the IE version are marked with '### IE ###.' */

/* ==========MASTER COPY================================================================ */
/* ==========DUPLICATE FOR IE.CSS AFTER THIS LINE======================================= */

/* ===================================================================================== */
/* ==========STYLESHEET FOR STATIC PAGES - VERSION 9.4================================ */
/* ===================================================================================== */

/* This stylesheet covers every page except the blog and message board. */

/* ===================================================================================== */
/* ==========CONTENTS REFERENCE========================================================= */
/* ===================================================================================== */

	/* MCSSN - Notes. */
		/* MCSSN1 - List of style-type markers. */
		/* MCSSN2 - To-do list. */
		/* MCSSN3 - Checklist before publishing. */

	/* MCSSA - Acknowledgements. */
	/* MCSS1 - Menu styles, popups. */
	/* MCSS2 - Options panel, help panels. */
	/* MCSS3 - General-use content styles. */
		/* MCSS3A - Text headers. */
		/* MCSS3B - Paragraphs. */
		/* MCSS3C - Links (general). */
		/* MCSS3D - Lists, including links-directory links. */
		/* MCSS3E - Out-of-box content. */

	/* MCSS4 - Graphics tables, including banners. */
	/* MCSS5 - Styles specific to front page. */
	/* MCSS6 - Contact form. */
	/* MCSS7 - Just-in-case formatting solutions, including quote styles and font embedding. */
	/* MCSS8 - Page-specific styles. */
	/* MCSS9 - Styles for standalone pages. */

/* ===================================================================================== */
/* ==========MCSSN - NOTES============================================================== */
/* ===================================================================================== */


	/* MCSSN1 ====List of style-type markers======================================== */

		/* ### IE ### - marks code which is different in the IE version (ie.css). */
		/* ### MARK-SKRIPT ### - used to locate code which is placed in preparation for JavaScript action. */
		/* ### COMPATIBILITY ### - marks code used because it is more broadly supported across platforms. */
		/* ### SPLIT ### - means some code for this selector is in one spot, other code is in another spot. */
		/* ### DESIGN ### - marks code used to fit a specific design principle. */
		/* ### UPDATE ### - anything that needs to be updated. */
		

	/* MCSSN2 ====To-do list========== */

		/*
		
		*/

	/* MCSSN3 ====Checklist before publishing========== */

		/* Validate HTML and CSS. */
		/* Separate production files from upload files. */


	/* MCSSN4 ====Design notes========== */

		/* 
		Macro-header fonts used in this file: 'Univers' and 'Big,' as rendered at http://patorjk.com/software/taag 
		*/

/* ===================================================================================== */
/* ==========MCSSA - ACKNOWLEDGEMENTS=================================================== */
/* ===================================================================================== */

/* This is a list of people whose efforts helped my own. */

/* Eric Meyer - his Boxpunch and Complex Spiral designs were huge influences on my site design (and a few others). 
http://meyerweb.com/eric/css/edge */

/* Patrick Gillespie for his ASCII text-art generator, used to generate the headers in this CSS file. 
http://patorjk.com/software/taag */


/* ===================================================================================== */

body {
	background-image: url("graphics/cloudbkg.jpg");
	background-attachment: fixed;
	background-position: 0 0; background-repeat: no-repeat;
 	border: 0;
 	font-family: Garamond, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
	font-size: 100%;
 	height: 100%; 
	margin: 0;
	max-height: 100%;
	overflow: hidden;  /* The scrollbars you see on my pages are on div.content, not body. */
 	padding: 0;}

* { /* This is to provide 'baseline' margins and padding, to simplify the relationahip
between the style data for an element and what shows up on the screen. */
	margin: 0px;
	padding: 0px;}
	
:focus {
	outline: 0;
}

/* ===================================================================================== */
/*
                            __                                           __                                 
                           /_ |                                         / /                                 
  _ __ ___   ___ ___ ___    | |  ______   _ __ ___   ___ _ __  _   _   / /_ __   ___  _ __  _   _ _ __  ___ 
 | '_ ` _ \ / __/ __/ __|   | | |______| | '_ ` _ \ / _ \ '_ \| | | | / /| '_ \ / _ \| '_ \| | | | '_ \/ __|
 | | | | | | (__\__ \__ \   | |          | | | | | |  __/ | | | |_| |/ / | |_) | (_) | |_) | |_| | |_) \__ \
 |_| |_| |_|\___|___/___/   |_|          |_| |_| |_|\___|_| |_|\__,_/_/  | .__/ \___/| .__/ \__,_| .__/|___/
                                                                         | |         | |         | |        
                                                                         |_|         |_|         |_|        
*/
/* ===================================================================================== */

/* MCSS1 - Begin styles for the main navigation menu on the left, including styles for mouseover popup. */

#menudiv { /* menu container */
	background: none;
	border: 0px dashed red;  /* I leave this here, so that if I need to see the outline of an element while
	                         I'm working on it then I can just change the border width. */
	color: #000000;
	font-size: 1em;
	height: 100%;
	margin: 0px;
	left: 0%; overflow: visible;
	padding: 0px;
	position: fixed;
	top:0%;
	width: 14%;
	z-index: 3;}
	
div.menubkg { /* menu container: menu background scaling */
	border: 0px dotted red;
	color: #ffffff;
	height: 100%;
	left: 0%;
	margin: 0px;
	position: absolute;
	top: 0%;
	width: 400px;
	z-index: 4; /* table.icons above, #menudiv below */}

	div.menubkg img { /* fits image to div.menubkg */
		border-width: 0px;
		height: 100%;
		position: relative;
		width: 100%;}
		
img.logo {
	border: none !important; 
	left: 0%; 
	position: absolute; 
	top: 0%; 
	width: 160px; 
	z-index: 4;}
	
	ul.iconlist {
		background-image: url('graphics/pixel.gif');
		background-repeat: repeat;
		border: 0px solid red;	
		bottom: 4%;
		list-style-type: none;
		left: 4%;
		margin: 0px;
		position: absolute;
		width: 100%;
		z-index: 5;}

		ul.iconlist li{
			margin-bottom: .1in;
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px; /* This factors the width of 'visited' tabs out of the alignment so the tags line up. */}

	div.icons a { 
   		border: 0px solid blue;
		height: auto;
		margin: 0px;
		padding: 0px;
		text-decoration: none !important; /* ###COMPABIBILITY### - so Safari doesn't underline the popup 
		                                  for being inside a link. */}

	img.button { /* menu container: button table: button image */
		height: auto;
		margin: 0px; 
		padding: 0px; 
		width: 160px;
		z-index: 6;}

	a:active img.button {
		background-position: -200px 0px;
		background-image: url('graphics/buttonchrome.jpg') !important;
		background-repeat: no-repeat;
		border: 0px solid red;}

	a:link img.button {
		background-position: 0px 0px;
		background-image: url('graphics/buttonchrome.jpg');
		background-repeat: no-repeat;
		border-bottom: 0px solid red;
		border-left: 0px solid red;
		border-right: 0px solid #0d2e4d;
		border-top: 0px solid red;
		}

	a:visited img.button {
		background-position: 0px 0px;
		background-image: url('graphics/buttonchrome.jpg');
		background-repeat: no-repeat;
		border-bottom: 0px solid red;
		border-left: 0px solid red;
		border-right: 6px solid #ffb500;
		border-top: 0px solid red;
		}
		
	a:visited:active img.button {
		background-position: -200px 0px;
		background-image: url('graphics/buttonchrome.jpg') !important;
		background-repeat: no-repeat;
		border-bottom: 0px solid red;
		border-left: 0px solid red;
		border-right: 6px solid #ffb500;
		border-top: 0px solid red;
		}
		
	a:hover img.button {
		background-image: url('graphics/orangepixel.png');
		background-repeat: repeat;}

	a:visited:hover img.button {
		background-image: url('graphics/orangepixel.png');
		background-repeat: repeat;}

#prevsdiv { /* Preview container */
	background: none;
	border: 0px dashed blue;  /* I leave this here, so that if I need to see the outline of an element while
	                         I'm working on it then I can just change the border width. */
	color: #000000;
	display: none; /* ### MARK-SKRIPT ### - preview.js will set display block. */
	font-size: 1em;
	height: 100%;
	margin: 0px;
	left: 180px;
	padding: 0px;
	position: fixed;
	top:0%;
	width: auto;
	z-index: 6;
	}
	
	ul.prevslist {
		border: 0px dotted white;
		bottom: 4%;
		list-style-type: none;
		left: 1%;
		margin: 0px;
		position: absolute;
		width: 100%;
		z-index: 5;}

		ul.prevslist li {
			margin-bottom: .1in;
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			}
		
	img.buttontag { /* menu container: button table: button image */
		height: auto;
		margin: 0px; 
		padding: 0px; 
		width: 640px;
		}
			
	#previntro {
		visibility: hidden;}

	#prevmessageboard {
		visibility: hidden;}

	#prevarticles {
		visibility: hidden;}

	#prevservices {
		visibility: hidden;}

	#prevphotos {
		visibility: hidden;}

	#prevwebdesign {
		visibility: hidden;}

	#prevgraphics {
		visibility: hidden;}
	
	#prevcontact {
		visibility: hidden;}

	#prevsitemap{
		visibility: hidden;}
	
	#prevlinks {
		visibility: hidden;}
	

/* End menu styles. */

/* ===================================================================================== */
/*
                            ___                         _   _                                          _ 
                           |__ \                       | | (_)                                        | |
  _ __ ___   ___ ___ ___      ) |  ______    ___  _ __ | |_ _  ___  _ __  ___   _ __   __ _ _ __   ___| |
 | '_ ` _ \ / __/ __/ __|    / /  |______|  / _ \| '_ \| __| |/ _ \| '_ \/ __| | '_ \ / _` | '_ \ / _ \ |
 | | | | | | (__\__ \__ \   / /_           | (_) | |_) | |_| | (_) | | | \__ \ | |_) | (_| | | | |  __/ |
 |_| |_| |_|\___|___/___/  |____|           \___/| .__/ \__|_|\___/|_| |_|___/ | .__/ \__,_|_| |_|\___|_|
                                                 | |                           | |                       
                                                 |_|                           |_|                       
*/
/* ===================================================================================== */

/* MCSS2 - options panel, including help panels */

#options { /* Container for everything in the options panel, the set of options 
           that remain fixed at the lower right on each page. */
	border: 0px dashed #cccccc;
	bottom: 1.7em; /* ### IE ### bottom 5%? */
	color: #0d2e4d;
	display: block;
  	font-family: "Museo 500", "Book Antiqua", Garamond, "Palatino Linotype", Times, serif;
	font-size: 1em;
	height: auto;
	overflow: hidden;
	position: fixed;
	right: 16px;
	text-align: right;
	width: auto;
	z-index: 4;}


#options h3 { /* Header for options panel. */
	/* ### SPLIT ### - h3 shows up under div.box(MCSS3A), div.headerdiv (MCSS3), 
	#homebody div.box (MCSS5), #options (MCSS2).  */
	background-color: #290600;
	border-left: .08in solid #67a8f6;
	color: #ffffff;
	font-family: "Futura Lt", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
	font-size: 1em;
	font-variant: small-caps;
	letter-spacing: .02em;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 0px;
	padding-bottom: .1em;
	padding-left: .4em;
	padding-right: .1em;
	padding-top: .1em;
	text-indent: 0px;}
	

p.options { /* options panel: paragraphs */
	font-family: "Museo 500", "Book Antiqua", Garamond, "Palatino Linotype", Times, serif;
	margin-bottom: 1em;
	margin-top: .4em;
	margin-right: 8px;
	text-align: right;
	text-indent: 0in;}
	
p.optionsleft { /* options panel: paragraphs */
	font-family: "Museo 500", "Book Antiqua", Garamond, "Palatino Linotype", Times, serif;
	margin-bottom: 1em;
	margin-top: .4em;
	margin-right: 8px;
	text-align: left;
	text-indent: 0in;}



span.button { /* options panel: text-size buttons */
	cursor: pointer;
	display: block; /* Keeps text-size buttons from showing up on the same line. */
	font-family: "Book Antiqua", Garamond, "Palatino Linotype", Times, serif !important;
	line-height: .25in;}
		
	span.button:hover {
	color: #9f6c12 !important;
	}

span.category { /* options panel: category text */
	display: block;
	font-size: 1em;
	font-family: "Museo 700", "Book Antiqua", Garamond, "Palatino Linotype", Times, serif;
	font-weight: bold;
	line-height: 1.3em;
	margin: 0px;}

#options a { /* options panel: category link */
	color: #0d2e4d;
	text-decoration: none;}

#options a:hover { /* options panel: category link */
	color: #9f6c12;
	text-decoration: underline;}

ul.subtopics { 
	font-family: "Museo 500", "Book Antiqua", Garamond, "Palatino Linotype", Times, serif;
	font-weight: normal;
	list-style: inside;
	list-style-type: square;
	margin-left: .5em;
	margin-top: -1em;
	padding-left: 0em;
	text-align: left;
	}


ul.subtopics li { /* plain-text lists */
	border: 0px solid green;
	margin-left: 0em;
	margin-right: .4em;
	text-decoration: none;
	text-indent: 0in;}

/* - end styles for options panel */

/* - begin styles for help panels */

#helpbutton {
	border-bottom: .04in solid #290600;
	border-left: .08in solid #290600;
	border-right: .04in solid #290600;
	border-top: .04in solid #290600;
	color: #0d2e4d;
	cursor: help;
	font-family: "Museo 700" !important;
	font-size: 1.4em;
	font-weight: bold;
	margin-right: -7px;
	padding: 6px;}
	
	#helpbutton:hover {
	border-bottom: .04in solid #ffb500;
	border-left: .08in solid #ffb500;
	border-right: .04in solid #ffb500;
	border-top: .04in solid #ffb500;
	}

#helpnavigation {
	background-color: #ffffff;
		border-bottom: 2px dotted #febb38;
		border-left: 8px solid #febb30;
		border-right: 8px solid #febb30;
		border-top: 2px dotted #febb38;
	bottom: 40%;
	color: #000000;
	display: none; /* ### MARK-SKRIPT ### - mouseover on #helpbutton element uses js/help.js to set display block */
	left: 17%;
	-moz-border-radius: 12px;
	padding: 0em;
	position: fixed;
	width: 40%;
	z-index: 6;
	}

#helpoptions {
	background-color: #ffffff;
		border-bottom: 2px dotted #febb38;
		border-left: 8px solid #febb30;
		border-right: 8px solid #febb30;
		border-top: 2px dotted #febb38;
	bottom: 7%;
	color: #000000;
	display: none; /* ### MARK-SKRIPT ### - mouseover on #helpbutton element uses js/help.js to set display block */
	-moz-border-radius: 12px;
	padding: 0em;
	position: fixed;
	right: 12%;
	width: 35%;
	z-index: 6;
	}
	
	h6.helphead{
		background-color: #febb38;
		font-family: "Museo 500", "Futura Md", "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
		font-size: 1em;
		font-variant: small-caps;
		letter-spacing: .05em;
		margin-bottom: 1em;
		margin-left: 0em;
		margin-right: 0em;
		margin-top: 1.5em;
		text-indent: 0em;}
	
	p.helppara {
		margin-bottom: 1em;
		margin-left: 1.5em;
		margin-right: 1.5em;
		margin-top: .5em;
		text-indent: 5em;
	}
	
	ul.helplist {
		margin-bottom: 1em;
		margin-left: 1.5em;
		margin-right: 1.5em;
		text-indent: 0px;
	}
	
		.helplist li {
			margin-left: 0px;
			margin-right: 0px;
			text-indent: 0px;
		}

/* - end styles for help panels */

/* ===================================================================================== */
/*
                            ____                         _                      _              _   
                           |___ \                       | |                    | |            | |  
  _ __ ___   ___ ___ ___     __) |  ______    __ _ _ __ | |     ___  ___  _ __ | |_  ___ _ __ | |_ 
 | '_ ` _ \ / __/ __/ __|   |__ <  |______|  / _` | '_ \| |    / __|/ _ \| '_ \| __|/ _ \ '_ \| __|
 | | | | | | (__\__ \__ \   ___) |          | (_| | | | | |_  | (__| (_) | | | | |_|  __/ | | | |_ 
 |_| |_| |_|\___|___/___/  |____/            \__, |_| |_|_(_)  \___|\___/|_| |_|\__|\___|_| |_|\__|
                                              __/ |                                                
                                             |___/    
*/
/* ===================================================================================== */

/* MCSS3 - Begin general-use content styles. */


#contentdiv { /* Container for the page's content other than menu and options panel. */
	background-image: url('graphics/pixel.gif');
	border: 0px dotted yellow;
	font-family: Garamond, "Palatino Linotype", "Book Antiqua", Times, serif;
	font-size: 1.1em;
	height: 96%; 
	overflow: auto; /* ### COMPATIBILITY ### - used this instead of -x and -y because Opera supports this. */
	padding: 0px;
	position: fixed; 
	left: 0%;
	top: 0%;
	width: 100%; 
	z-index: 2;}

#locatordiv { /* Container for the locator text. */
	background-color: #290600;
	border: 0px dotted yellow;
	bottom: 0%;
	color: #ffffff;
	font-family: "Museo 300", "Century Gothic", "Futura Md", "Trebuchet MS", Verdana, sans-serif;
	/* ### DESIGN ### - I used Century Gothic first because its width and spacing make it more legible at small sizes. */
	font-size: 1em;
	height: 4%; 
	left: 0%;
	overflow: hidden;
	padding-top: .2em;
	position: fixed; 
	text-shadow: 0px 0px 3px #ffffff;
	width: 100%; 
	z-index: 2;}
	
	p.location {
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: .2in;
		margin-top: 2px;
		padding: 0px;
		position: absolute;
		right: 0px;
		text-align: right;
		top: 0px;}		

div.headerdiv { /* Styles the main page header. */
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg-warped-header.jpg");
	background-position: 0 0; background-repeat: no-repeat;
	margin-bottom: 3em;
	margin-top: 1em;
	-moz-border-radius: 1.4em;
	left: 18.5%;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 65%;}

div.headerdiv div.highlights {
  	background-attachment: fixed;
	background-image: url('graphics/cloudbkg-fade.jpg'); 
	background-position: 0 0; background-repeat: no-repeat; 
	/* background-color: white; ### IE ### - also, REMOVE BACKGROUND IMAGE CODE! */
	display: block;
	margin-bottom: .4in;
	margin-left: 0in;
	margin-top: 0px;
	padding-bottom: .1in;
	padding-top: .4em;
	text-align: center;
	text-indent: 0in;}
		
  h4.highlights { /* based on div.box h3 */
		background-image: none;
		border: 0px solid red;
		color: #290600;
		margin-bottom: -.5em;
		margin-left: 1.8in;
		margin-right: 1.8in;
		margin-top: -2em;
		font-family: "Century Gothic", "Futura Md", "Trebuchet MS", Arial, sans-serif;
		/* ### DESIGN ### - I used Century Gothic first because its width and spacing make it more legible at small sizes. */
		font-size: 1.6em;
		font-weight: 500;
		padding: 0px;
		text-align: center;
		text-indent: 0in;
		text-shadow: 1px 1px 3px #0d2e4d;}

	div.headerdiv li { 
		margin: 0px;
		padding: 0px;
		text-indent: 0in;}

div.box { /* Container for an individual section of a page's content. */
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg-fade.jpg");
	background-position: 0 0; background-repeat: no-repeat;
	border-color: #000000;
	border-style: solid;
	border-width: 0px;
	left: 18.5%;
	margin-bottom: 3em;
	margin-left: 0em;
	margin-right: 0em;
	margin-top: 0em;
	-moz-border-radius: 1.6em;
	padding-bottom: 2em;
	padding-top: 1.8em;
	position: relative;
	text-align: left;
	width: 65%;
	z-index: 3;}

hr { /* General-use horizontal rule. */
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg-warped.jpg");
	background-position: 0 0; background-repeat: no-repeat;
	border: .03in groove #290600;
	height: .08in; 
	margin-left: 25%; /* ### IE ### replace with text-align center */
	margin-top: .6in;
	width: 50%;}


div.pictureleft { /* Left-floated thumbnail cutout. */
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg.jpg");
	background-position: 0 0; background-repeat: no-repeat;
	border: 0px dotted red;
	display: block;
	float: left; 
	font-size: 1.4em; 
	left: -5px;
	margin-bottom: .2in;
	margin-left: 0in;
	margin-right: .2in;
	margin-top: 0in;
	padding: 1em;
	position: relative;
	text-align: center; 
	text-indent: 0em; 
	width: auto;}


div.pictureright { /* Right-floated thumbnail cutout. */
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg.jpg");
	background-position: 0 0; background-repeat: no-repeat;
	border: 0px dotted red;
	display: block;
	float: right; 
	font-size: 1.4em; 
	margin-bottom: 1em;
	margin-left: 2em;
	margin-right: 0in;
	margin-top: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	padding-right: 5px;
	padding-top: 1em; 
	position: relative;
	right: -5px;
	text-align: right; 
	text-indent: 0em; 
	width: auto;}
	
	div.pictureright a:hover {
		text-decoration: none;}

img.thumbnail {
	border-bottom: .06in solid #290600;
	border-left: .06in solid #290600;
	border-right: .16in solid #290600;
	border-top: .06in solid #290600;
	margin: 0px;}

	a:link img.thumbnail {
		border-bottom: .06in solid #290600;
		border-left: .06in solid #290600;
		border-right: .16in solid #290600;
		border-top: .06in solid #290600;
		margin: 0px;}
		
	a:hover img.thumbnail {
		border-bottom: .06in solid #ffb500;
		border-left: .06in solid #ffb500;
		border-right: .16in solid #ffb500;
		border-top: .06in solid #ffb500;
		margin: 0px;}

	a:visited img.thumbnail {
		border-bottom: .06in solid #290600;
		border-left: .06in solid #290600;
		border-right: .16in solid #290600;
		border-top: .06in solid #290600;
		margin: 0px;}

	a:visited:hover img.thumbnail {
		border-bottom: .06in solid #ffb500;
		border-left: .06in solid #ffb500;
		border-right: .16in solid #ffb500;
		border-top: .06in solid #ffb500;
		margin: 0px;}


/* ===================================================================================== */
/*
   ____               _                    _               
  |___ \             | |                  | |              
    __) | __ _ ______| |__   ___  __ _  __| | ___ _ __ ___ 
   |__ < / _` |______| '_ \ / _ \/ _` |/ _` |/ _ \ '__/ __|
   ___) | (_| |      | | | |  __/ (_| | (_| |  __/ |  \__ \
  |____/ \__,_|      |_| |_|\___|\__,_|\__,_|\___|_|  |___/
*/
/* ===================================================================================== */

/* MCSS3A - text headers */

h1.header4page { /* Styles the text in the page header. */
	color: #000000;
	font-family: "Futura Md", "Century Gothic", "Trebuchet MS", "Palatino Linotype", serif;
	font-size: 2em;
	line-height: .5em;
	letter-spacing: .1em;
	margin-bottom: .2in;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: .2in;
	padding: .4em;
	text-align: center;
	text-indent: 0in;}
	
	.header4page img {
    	left: 12%;
    	width: 76%;}

h2.header4content { /* The second-class headers that start each section of a page. */
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg-warped.jpg");
	background-position: 0 0; background-repeat: no-repeat;
	border-left: .16in solid #290600;
	border-right: .16in solid #290600;
	color: #290600;
	font-family: "Futura Md", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
	font-size: 2.4em;
	font-variant: small-caps;
	font-weight: 400;
	height: .9em;
	letter-spacing: .01em;
	margin-bottom: 1em;
	padding-left: 2em;
	text-align: left;
	text-shadow: 1px 2px 3px #0d2e4d;}

  .header4content span { border: 0px dotted red;
  	background-image: url('graphics/cloudbkg-fade.jpg');
	background-attachment: fixed;
	background-position: 0 0;
	display: inline-block;
	margin-top: -.4em;
	padding-left: .2em;
	padding-right: .2em;
	padding-top: .4em;}

	div.box h3 { /* text box: in-text header after box header */
  		/* ### SPLIT ### */
		background-image: none;
		border: 0px solid red;
		color: #290600;
		margin-bottom: .1in;
		margin-left: 1.8in;
		margin-right: 1.8in;
		margin-top: 2em;
		font-family: "Museo 500", "Century Gothic", "Futura Md", "Trebuchet MS", Arial, sans-serif;
		/* ### DESIGN ### - I used Century Gothic first because its width and spacing make it more legible at small sizes. */
		font-size: 1.4em;
		font-weight: 500;
		padding: 0px;
		text-align: center;
		text-indent: 0in;
		text-shadow: 1px 1px 3px #0d2e4d;}

/* ###SPLIT### - h4.highlights is under general-use content styles (MCSS3), since it's for the highlights div. */

h4.buttonheader { /* headers for the sitemap, using the menu button images */
	margin-bottom: 0in;
	margin-top: 2em;
	padding: .1in;
	text-align: center;
	text-indent: 0in;}


/* ===================================================================================== */
/*
   ____  _                                                       _         
  |___ \| |                                                     | |        
    __) | |__ ______ _ __   __ _ _ __ __ _  __ _ _ __ __ _ _ __ | |__  ___ 
   |__ <| '_ \______| '_ \ / _` | '__/ _` |/ _` | '__/ _` | '_ \| '_ \/ __|
   ___) | |_) |     | |_) | (_| | | | (_| | (_| | | | (_| | |_) | | | \__ \
  |____/|_.__/      | .__/ \__,_|_|  \__,_|\__, |_|  \__,_| .__/|_| |_|___/
                    | |                     __/ |         | |              
                    |_|                    |___/          |_|              
*/
/* ===================================================================================== */

/* MCSS3B - paragraphs */

p.center {
	padding-top: 1em;
	text-align: center;
	text-indent: 0in;}

	div.box p.center {
		margin-left: 8em;
		margin-right: 8em;}

p.indented {
	line-height: 1.4em;
	margin-left: 6em; /* DESIGN - These margins add a lovely bit of implied whitespace and symmetry. */
	margin-right: 6em;
	padding-top: 1em;
	text-indent: 2em; }


p.noindent {
	line-height: 1.4em;
	margin-left: 8em; 
	margin-right: 8em;
	padding-top: 1em;
	text-indent: 0in;}


p.bottom { /* Style for the copyright notices at the bottom of each page. */
	font-family: "Futura Md", "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	font-variant: small-caps;
	font-weight: bold;
	margin-left: 2in;
	margin-right: 16.75%;
	margin-top: 1in;
	text-align: right;
	text-indent: 0in;
	padding-bottom: .4in;
	padding-right: 0px;}


pre.small { /* pre-formatted area for small amounts of code */
	background-color: #cccccc;
	border: 3px dashed #666666;
	font-size: 0.85em;
	font-weight: bold;
	height: auto;
	margin-left: 8em;
	margin-right: 8em;
	opacity: 0.7;
	overflow: auto;
		padding-bottom: 1em;
		padding-left: 1.5em;
		padding-right: 1.5em;
		padding-top: 1em;
	white-space: pre-wrap;}


	/* - begin styles for colored code - */

	.small .hot 		{ color: red; }

pre.reg { /* pre-formatted area for general use */
	background-color: #cccccc;
	border: 3px dashed #666666;
	font-size: 0.85em;
	font-weight: bold;
	height: auto;
	margin-left: 8em;
	margin-right: 8em;
	opacity: 0.7;
	overflow: auto;
		padding-bottom: 1em;
		padding-left: 1.5em;
		padding-right: 1.5em;
		padding-top: 1em;
	white-space: pre-wrap;}


	/* - begin styles for colored code - */

	.reg .hot 		{ color: red; }

	/* - end styles for colored code - */


pre.code { /* pre-formatted area for code display, such as the PGP keys on the front page */
	background-color: #cccccc;
	border: 3px dashed #666666;
	font-size: 0.85em;
	height: 4em; /* ### MARK-SKRIPT ### - The visitor can open these displays to full height using the 'click to expand' buttons above them. */
	margin-left: 8em;
	margin-right: 8em;
	opacity: 0.5;
	overflow: auto;
	padding: 1.5em;
	white-space: pre-wrap;}

	/* - begin styles for colored code - */

	.code .hot 		{ color: red; }

	/* - end styles for colored code - */

div.pretop { /* container for code display label and button */
	font-size: 1.1em;
	margin-right: 5em; /* right-side padding on display, plus display's right margin */
	margin-top: .3in;
	text-align: right;}

span.prelabel { /* label for code display */
	font-style: italic;}


span.prebutton { /* link for expanding code display */
	cursor: pointer;
	font-weight: bold;
	padding: 6px;
	text-shadow: 1px 1px 2px #0000ff;}
	
	.prebutton:hover {
		color: #ffb500;
		text-shadow: 1px 1px 2px #000000;}
	

/* ===================================================================================== */
/*
  ____              _ _       _        
 |___ \            | (_)     | |       
   __) | ___ ______| |_ _ __ | | _____ 
  |__ < / __|______| | | '_ \| |/ / __|
  ___) | (__       | | | | | |   <\__ \
 |____/ \___|      |_|_|_| |_|_|\_\___/
*/
/* ===================================================================================== */

/* MCSS3C - links */


a:link {
	color: #0d2e4d;
	font-weight: bold;
	text-decoration: underline;}

a:hover {
	color: #ffb500;
	text-decoration: underline;}

a:visited {
	color: #9f6c12;
	text-decoration: underline;}

a:visited:hover {
	color: #ffb500;
	text-decoration: underline;}



/* ===================================================================================== */
/*
  ____      _        _ _     _       
 |___ \    | |      | (_)   | |      
   __) | __| |______| |_ ___| |_ ___ 
  |__ < / _` |______| | / __| __/ __|
  ___) | (_| |      | | \__ \ |_\__ \
 |____/ \__,_|      |_|_|___/\__|___/
*/
/* ===================================================================================== */

/* MCSS3D - lists */

ul.text {
	list-style-type: none;
	margin-left: 4em;
	margin-top: 1em;
	/* You can't use a right-side margin here because it will interfere with image cutouts.
	The margin being used is instead placed on the 'li' list-item element. */
	padding-left: .4in;}


ul.text li { /* plain-text lists */
	background-image: url('graphics/plainbullet.png'); 
	/* Assigning the bullet as a background image avoid's IE's problem with custom bullets. */
	background-repeat: no-repeat;
	background-position: 0em -.6em;

	/* Adjusting margin should work normally, and should not affect the alignment of the bullet and text. */

	margin-bottom: .8em;
	margin-left: -.1in;
	margin-right: 7em;
	padding-bottom: 0px;
	padding-left: 45px;
	padding-top: 0px;
	text-decoration: none;
	text-indent: 0in;}
	
	ul.text li strong {
		text-shadow: 1px 1px 2px #0d2e4d;}


ul.links {
	list-style-type: none;
	margin-left: 4em;
	margin-top: 2em;
	/* You can't use a right-side margin here because it will interfere with image cutouts.
	The margin being used is instead placed on the 'li' list-item element. */
	padding-left: .4in;}


ul.links li { /* plain-text lists */

	/* Adjusting margin should work normally, and should not affect the alignment of the bullet and text. */

	margin-bottom: 1.5em;
	margin-left: -.1in;
	margin-right: 7em;
	padding-bottom: 0px;
	padding-left: 45px;
	padding-top: 0px;
	text-decoration: none;
	text-indent: 0in;}

span.linky { /* links page: links list: container for the URL and name of each link */
	display: block;
	font-family: "Museo 500", Garamond, "Trebuchet MS", Verdana, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.05em;}
		
	span.linky a:link { /* links page: links list: regular link. */
		background-image: url('graphics/linkbullet.gif'); /* ### IE ### background-image none important ### */
		background-repeat: no-repeat;
		background-position: 0em .1em;
		color: blue;
		font-family: "Museo 500", "Trebuchet MS", Verdana, Arial, sans-serif;
		font-size: 0.85em;
	
		/* Distances for padding-left and margin-left must be the same, but margin must be negative. 
		This keeps the box in place relative to the link. */
	
		margin-left: -.5in;
		padding-bottom: .1in;
		padding-left: .5in;
		padding-top: .1in;
		text-decoration: underline;
		text-shadow: 1px 1px 2px #006699;}

	span.linky a:visited { /* links page: links list: visited link. */
		background-image: url('graphics/linkbulletchecked.gif'); /* ### IE: background-image none important ### */
		background-repeat: no-repeat;
		background-position: 0em .1em;
		color: #9e7022;
		font-family: "Museo 500", "Trebuchet MS", Verdana, Arial, sans-serif;
		font-size: 0.85em;
	
		/* Distances for padding-left and margin-left must be the same, but margin must be negative. 
		This keeps the box in place relative to the link. */
	
		margin-left: -.5in;
		padding-bottom: .1in;
		padding-left: .5in;
		padding-top: .1in;
		text-decoration: none;
		text-indent: .8in;
		text-shadow: 0px 0px 5px #9e7022;}
	
	span.linky a:hover { /* links page: links list: hovered link. */
		color: #ffb500;
		text-shadow: 0px 0px 2px #febb38;}

	span.linky a:visited:hover {
		color: #ffb500;
		text-decoration: underline;
		text-shadow: 1px 2px 2px #000000;}


/* ===================================================================================== */
/*
  ____              _                 _                                 _              _   
 |___ \            | |               | |                               | |            | |  
   __) | ___ ______| |__   ___ __  __| | ___ ___ ___    ___  ___  _ __ | |_  ___ _ __ | |_ 
  |__ < / _ \______| '_ \ / _ \\ \/ /| |/ _ | __/ __|  / __|/ _ \| '_ \| __|/ _ \ '_ \| __|
  ___) |  __/      | |_) | (_) |>  < | |  __|__ \__ \ | (__| (_) | | | | |_ | __/ | | | |_ 
 |____/ \___|      |_.__/ \___//_/\_\|_|\___|___/___/  \___|\___/|_| |_|\__|\___|_| |_|\__|
*/
/* ===================================================================================== */

/* MCSS3E - Out-of-box content. */

div.pic { /* a plain image, centered in the content DIV. */
	left: 10%;
	margin-bottom: 3em;
	margin-left: 0em;
	margin-right: 0em;
	margin-top: 0em;
	padding-bottom: .2in;
	padding-top: 1.8em;
	position: relative;
	text-align: center;
	width: 80%;
	z-index: 1;}	

/* End out-of box content styles. */

/* ===================================================================================== */
/*
                         _  _                                    _     _            _         _     _          
                        | || |                                  | |   (_)          | |       | |   | |         
  _ __ ___   ___ ___ ___| || |_   ______    __ _ _ __ __ _ _ __ | |__  _  ___ ___  | |_  __ _| |__ | | ___ ___ 
 | '_ ` _ \ / __/ __/ __|__   _| |______|  / _` | '__/ _` | '_ \| '_ \| |/ __/ __| | __|/ _` | '_ \| |/ _ | __|
 | | | | | | (__\__ \__ \  | |            | (_| | | | (_| | |_) | | | | | (__\__ \ | |_| (_| | |_) | |  __|__ \
 |_| |_| |_|\___|___/___/  |_|             \__, |_|  \__,_| .__/|_| |_|_|\___|___/  \__|\__,_|_.__/|_|\___|___/
                                            __/ |         | |                                                  
                                           |___/          |_|                                                  
*/
/* ===================================================================================== */

/* MCSS4 - Begin styles for graphics tables, including banners. */

table.graphicstable {
	border-spacing: 1em;
	margin-left:auto; margin-right:auto; /* setting left and right margins to auto centers the table, for some reason! */
	/* margin-top: 1em;   ### IE ### */
	position: relative;
	text-align: center;
	width: 80%;}
	
	.graphicstable a {
		line-height: 0em;
		text-decoration: none;}
		
	.graphicstable a:hover {
		text-decoration: none;}
		
	.graphicstable .thumblabel {
		/* bottom: 0em; ### IE ### */
		display: table; /* ### IE ### - display block */
		margin-top: -1.4em;
		/* left: 1em; ### IE ### */
		position: inherit;
		/* text-align: left; ### IE ### */}


table.graphicstable tr {
	width: 100%;}

a.graphic {
	border: 0px solid red;
	display: block;
	margin-left: 1.2in;
	margin-right: 1.2in;
	padding: 0px;
	text-decoration: none;}
	
img.graphics {
	border: .06in solid #0d2e4d;
	display: block;
	margin-left: auto; margin-right: auto;
	}

	span.thumblabel {
		border: 0px solid red;
		bottom: 2.5em;
		font-family: "Century Gothic", "Futura Lt", "Trebuchet MS", Verdana, sans-serif;
		font-size: 2em;
		font-weight: 400;
		height: auto;
		margin: 0px;
		left: -180px;
		position: relative;
		text-shadow: 0px 0px 4px #ffb500;
		visibility: hidden;
		}
		
		a:hover span.thumblabel {
			color: #ffb500;
			visibility: visible;}
	
		a:visited:hover span.thumblabel {
			color: #ffb500;
			visibility: visible;}
			

a:hover img.graphics {
	border: .06in solid #ffb500;}
	
a:visited img.graphics {
	border: .06in solid #9f6c12;
	opacity: 0.5;}

a:visited:hover img.graphics {
	border: .06in solid #ffb500;
	opacity: 1.0;}

p.tblpara { /* not in use */
	margin-left: .4in;
	text-align: left;
	text-indent: .4in;}

p.widethumb {
	padding-top: 1em;
	line-height: .5em;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	text-align: center;
	text-indent: 0in;}
	
	p.widethumb a:hover {text-decoration: none;}
	p.widethumb a:visited:hover {text-decoration: none;}

/* - End styles for graphics tables, including banners. */

/* ===================================================================================== */
/*
                         _____             __                 _                            
                        | ____|           / _|               | |                           
  _ __ ___   ___ ___ ___| |__    ______  | |_ _ __ ___  _ __ | |_   _ __   __ _  __ _  ___ 
 | '_ ` _ \ / __/ __/ __|___ \  |______| |  _| '__/ _ \| '_ \| __| | '_ \ / _` |/ _` |/ _ \
 | | | | | | (__\__ \__ \___) |          | | | | | (_) | | | | |_  | |_) | (_| | (_| |  __/
 |_| |_| |_|\___|___/___/____/           |_| |_|  \___/|_| |_|\__| | .__/ \__,_|\__, |\___|
                                                                   | |           __/ |     
                                                                   |_|          |___/      
*/
/* ===================================================================================== */


/* MCSS5 - Begin styles specific to front page. */


#homebody {
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg.jpg");
	background-position: 0 0; background-repeat: no-repeat;}

#homebody div.headerdiv {
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg-warped-intro-header.jpg");
	background-position: 0 0; background-repeat: no-repeat;
  	text-align: center;}
	
	table.teasertable{
		left: 15%; /* ### IE ### left 0% */
		background-attachment: fixed;
		background-image: url("graphics/cloudbkg-warped-intro.jpg");
		background-position: 0 0; background-repeat: no-repeat;
		border-spacing: 0px;
		padding: .3em;
		position: relative;
		width: 70%;}
		
	.teasertable tr {
		background-attachment: fixed;
		background-image: url("graphics/cloudbkg-fade-intro.jpg");
		background-position: 0 0; background-repeat: no-repeat;}
	
	  .teasertable a:link {
			font-family: "Futura Md", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
			font-size: 1.1em;
			font-weight: bold;
			font-variant: small-caps;
			text-shadow: 1px 1px 2px #0000ff;}

	  .teasertable a:hover {
			text-shadow: 1px 1px 2px #000000;}
	
	  .teasertable a:visited {
			font-family: "Futura Md", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
			font-size: 1.2em;
			font-weight: bold;
			font-variant: small-caps;
			text-decoration: none;
			text-shadow: 0px 0px 5px #9e7022;}
	
	  .teasertable a:visited:hover {
			text-decoration: underline;
			text-shadow: 1px 1px 2px #000000;}
	
	  .teasertable a:link img {
			border-width: 0px;}
	
	  .teasertable a:visited img {
			border-width: 0px;}
	
	  .teasertable a:hover img {
			border-width: 0px;}
    
	#homebody div.bigadvert {
		left: 25%; /*### IE ### 0% */
		margin-bottom: .2in;
		position: relative;
		width: 50%;
		z-index: 5;}

		img.bigadvertimg {
			border: .06in solid #0d2e4d;
			width: 100%;}
		
		a:hover img.bigadvertimg {
			border: .06in solid #ffb500;}
			
		a:visited img.bigadvertimg {
			border: .06in solid #9f6c12;
			opacity: 0.8;}
		
		a:visited:hover img.bigadvertimg {
			border: .06in solid #ffb500;
			opacity: 1.0;}

	#homebody div.headerdiv div.highlights {
		background-attachment: fixed;
		background-image: url("graphics/cloudbkg-fade-intro.jpg");
		background-position: 0 0; background-repeat: no-repeat;
		/* background-color: white; ### IE ### - also COMMENT OUT BACKGROUND IMAGE */
    	margin-left: .4in;
  	 	margin-right: .4in;
		margin-top: -.8in;
		-moz-border-radius: .8em;
    	padding-top: .6in;}
		
		h2.highlightsintrohead { 
			color: #290600;
			margin-bottom: -.5em; /* ### IE ### margin-bottom .1em; */
			margin-left: .2in;
			margin-right: .2in;
			margin-top: 1em;
			font-family: "Museo 500", "Century Gothic", "Futura Md", "Trebuchet MS", Arial, sans-serif;
			/* ### DESIGN ### - I used Century Gothic first because its width and spacing make it more legible at small sizes. */
			font-size: 1.4em;
			font-weight: 500;
			padding: 0px;
			text-align: center;
			text-indent: 0in;
			text-shadow: 1px 1px 3px #0d2e4d;}
	
		#iepara { /* Suggests to IE users that they should use another browser. */
			display: none; 		/* ### IE ### display block */
			font-size: 0.9em;
			font-weight: bold;}

#homebody h2.header4content {
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg-warped-intro.jpg");
	background-position: 0 0; background-repeat: no-repeat;}

#homebody  .header4content span {
  	background-image: url('graphics/cloudbkg-fade-intro.jpg');
	background-attachment: fixed;
	background-position: 0 0;
	padding-left: .2em;
	padding-right: .2em;}

#homebody div.box {
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg-fade-intro.jpg");
	background-position: 0 0; background-repeat: no-repeat;}

#homebody hr { /* General-use horizontal rule. */
	background-attachment: fixed;
	background-image: url("graphics/cloudbkg-warped-intro.jpg");
	background-position: 0 0; background-repeat: no-repeat;
	border: .03in groove #474747;
	height: .08in; 
	left: 25%;
	margin-top: .6in;
	width: 50%;}

#homebody #helpbutton {
	background-image: url('graphics/helpbkg.png');
	background-repeat: no-repeat;}

/* End styles specific to front page. */


/* ===================================================================================== */
/*
                           __                              _              _      __                     
                          / /                             | |            | |    / _|                    
  _ __ ___   ___ ___ ___ / /_    ______    ___  ___  _ __ | |_  __ _  ___| |_  | |_ ___  _ __ _ __ ___  
 | '_ ` _ \ / __/ __/ __| '_ \  |______|  / __|/ _ \| '_ \| __|/ _` |/ __| __| |  _/ _ \| '__| '_ ` _ \ 
 | | | | | | (__\__ \__ \ (_) |          | (__| (_) | | | | |_| (_| | (__| |_  | || (_) | |  | | | | | |
 |_| |_| |_|\___|___/___/\___/            \___|\___/|_| |_|\__|\__,_|\___|\__| |_| \___/|_|  |_| |_| |_|

*/
/* ===================================================================================== */

/* MCSS6 - contact form */

form.emailform {
	background-image: url('graphics/cloudbkg.jpg');
	background-attachment: fixed;
	background-position: 0 0; background-repeat: no-repeat;
	border: 4px groove #290600;
	font-weight: bold;
	margin-bottom: .4in;
	margin-left: .8in;
	margin-right: .8in;
	margin-top: 3em;
	text-align: center;}

input.info {
	background-color: #07071d;
		border-bottom: 4px solid #290600;
		border-left: 4px solid #290600;
		border-right: .2in solid #290600;
		border-top: 4px solid #290600;
	color: #ffffff;
 	font-family: "Book Antiqua", Garamond, "Palatino Linotype", Times, serif;
	font-size: 1.1em;
	font-weight: bold;
	padding: .5em;}
	
	.info:focus {
		border-bottom: 4px solid #ffb500;
		border-left: 4px solid #ffb500;
		border-right: .2in solid #ffb500;
		border-top: 4px solid #ffb500;}
		
textarea {
	background-color: #07071d;
		border-bottom: 4px solid #290600;
		border-left: 4px solid #290600;
		border-right: .2in solid #290600;
		border-top: 4px solid #290600;
	color: #ffffff;
	display: inline;
 	font-family: "Book Antiqua", Garamond, "Palatino Linotype", Times, serif;
	font-size: 1.1em;
	font-weight: bold;
	height: 10em;
	margin: 0px;
	padding: .5em;
	width: 80%;}

	textarea:focus {
		border-bottom: 4px solid #ffb500;
		border-left: 4px solid #ffb500;
		border-right: .2in solid #ffb500;
		border-top: 4px solid #ffb500;}

.adrc { visibility: hidden; } /* reverse-captcha fields */

.buttonborder {
  	background-image: url('graphics/cloudbkg-warped.jpg');
	background-attachment: fixed;
	background-position: 0 0;
	display: inline-block;
	padding-bottom: .6em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: .6em;}

/* - end contact form styles */


/* ===================================================================================== */
/*
                        ______             __                           _               _       _   _                 
                       |____  |           / _|                         | |             | |     | | (_)                
  _ __ ___   ___ ___ ___   / /   ______  | |_ ___  _ __ _ __ ___   __ _| |_   ___  ___ | |_   _| |_ _  ___  _ __  ___ 
 | '_ ` _ \ / __/ __/ __| / /   |______| |  _/ _ \| '__| '_ ` _ \ / _` | __| / __|/ _ \| | | | | __| |/ _ \| '_ \/ __|
 | | | | | | (__\__ \__ \/ /             | || (_) | |  | | | | | | (_| | |_  \__ \ (_) | | |_| | |_| | (_) | | | \__ \
 |_| |_| |_|\___|___/___/_/              |_| \___/|_|  |_| |_| |_|\__,_|\__| |___/\___/|_|\__,_|\__|_|\___/|_| |_|___/

*/
/* ===================================================================================== */


/* MCSS7 - Begin just-in-case formatting solutions, including quote styles and font embedding. */

/* Also see: MCSS4 p.tblpara for paragraphs in tables. */


blockquote.big {
	color: #666666;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	margin-left: 1.5in; 
	margin-right: 1.5in;
	text-align: right;
	text-indent: -.7em;}
	
	blockquote.big em {
		display: block;
		font-size: 1.3em;
		font-style: italic;
		text-align: left;
		text-shadow: 0px 1px 2px #000000;}
		
blockquote.little {
	color: #666666;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	margin-left: 1.5in; 
	margin-right: 1.5in;
	text-align: right;
	text-indent: -.7em;}
	
	blockquote.little em {
		display: block;
		font-size: 1.15em;
		font-style: italic;
		text-align: left;
		text-shadow: 0px 1px 2px #000000;}

blockquote.link {
	color: #333333;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 0.8em;
	font-style: italic;
	font-weight: bold;
	margin: 1em;
	text-align: left;
	text-indent: -.5em;
	}

	blockquote.link em {
		display: inline;
		font-size: 1em;
		font-style: normal;
		text-shadow: none;}


/* ### UPDATE ### */
/* for IE when fixed. Need WEFT. @font-face {
  font-family: Museo 500;
  src: url(museo500.eot);
} */

/* Font definition for other browsers */
@font-face {
  font-family: "Museo 300";
  src: url(fonts/museo300-regular.otf) format("opentype");
}

/* Font definition for other browsers */
@font-face {
  font-family: "Museo 500";
  src: url(fonts/museo500-regular.otf) format("opentype");
}

/* Font definition for other browsers */
@font-face {
  font-family: "Museo 700";
  src: url(fonts/museo700-regular.otf) format("opentype");
}

/* - end formatting solutions */

/* ===================================================================================== */
/*
                          ___                                                          _  __ _      
                         / _ \                                                        (_)/ _(_)     
  _ __ ___   ___ ___ ___| (_) |  ______   _ __   __ _  __ _  ___   ___ _ __   ___  ___ _| |_ _  ___ 
 | '_ ` _ \ / __/ __/ __|> _ <  |______| | '_ \ / _` |/ _` |/ _ \ / __| '_ \ / _ \/ __| |  _| |/ __|
 | | | | | | (__\__ \__ \ (_) |          | |_) | (_| | (_| |  __/ \__ \ |_) |  __/ (__| | | | | (__ 
 |_| |_| |_|\___|___/___/\___/           | .__/ \__,_|\__, |\___| |___/ .__/ \___|\___|_|_| |_|\___|
                                         | |           __/ |          | |                           
                                         |_|          |___/           |_|                           

*/
/* ===================================================================================== */


/* MCSS8 - Begin page-specific styles. */


/*  Begin styles for links page. */
#linksbody span.category { /* LINKS PAGE: options panel: category text */
	/* Since there are so many categories on the links page. */
	font-size: 0.9em;
	line-height: 1.1em;}
	
#linksbody ul.subtopics {
	font-size: 0.9em;
	}
	
h2.header4contentimg { /* links directory box header, with logo background */
	background-attachment: fixed;
	background-position: 0 0; background-repeat: no-repeat;
	border-left: .16in solid #290600;
	border-right: .16in solid #290600;
	color: #290600;
	font-family: "Futura Md", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
	font-size: 3.6em;
	font-variant: small-caps;
	font-weight: 400;
	height: 2.2em;
	letter-spacing: .01em;
	margin-bottom: .5em;
	padding-left: .2in;
	text-align: left;
	text-shadow: 1px 2px 3px #0d2e4d;}

	.header4contentimg span {
		padding-bottom: 1em;
		padding-left: .2em;
		padding-right: .2em;}



/* ===================================================================================== */
/*      
                          ___                 _                   _       _                      
                         / _ \               | |                 | |     | |                     
  _ __ ___   ___ ___ ___| (_) |  ______   ___| |_  __ _ _ __   __| | __ _| | ___  _ __   ___ ___ 
 | '_ ` _ \ / __/ __/ __|\__, | |______| / __| __|/ _` | '_ \ / _` |/ _` | |/ _ \| '_ \ / _ | __|
 | | | | | | (__\__ \__ \  / /           \__ \ |_| (_| | | | | (_| | (_| | | (_) | | | |  __|__ \
 |_| |_| |_|\___|___/___/ /_/            |___/\__|\__,_|_| |_|\__,_|\__,_|_|\___/|_| |_|\___|___/

*/
/* ===================================================================================== */


/* MCSS9 - Begin styles for standalone pages. */


body.standalone div.headerdiv {
	border: 0px solid #767676;}
	
	h1.header4pagesmall { /* Styles the text in the page header, on subsection pages. */
		color: #292929;
		font-family: "Futura Md", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
		font-size: 2.4em;
		font-variant: small-caps;
		line-height: .5em;
		margin: 0in;
		padding-bottom: 1em;
		padding-right: .1in;
		padding-top: 1em;
		position: relative;
		text-align: center;
		text-indent: 0in;
		text-shadow: 1px 1px 2px #000000;
		z-index: 6;}

	body.standalone div.headerdiv div.highlights {
		background-attachment: fixed;
		background-image: url("graphics/cloudbkg-fade.jpg");
		background-position: 0 0; background-repeat: no-repeat;
		margin-top: .1em;
		padding-top: 0px;}
		
body.standalone div.box {
	border: 0px solid #767676;
	padding-top: .2in;}

	body.standalone h2.header4content {
		background-attachment: fixed;
		background-image: url("graphics/cloudbkg-warped.jpg");
		background-position: 0 0; background-repeat: no-repeat;
		border-left: .06in solid #767676;
		border-right: .06in solid #767676;
		color: #292929;
		font-family: "Futura Md", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
		font-size: 2em;
		font-variant: small-caps;
		font-weight: 400;
		height: .9em;
		letter-spacing: .01em;
		margin-bottom: .3em;
		margin-top: 0px;
		padding-left: 1.1in;
		text-align: left;
		text-shadow: none;}
		
		body.standalone h2.header4content span {
			background-image: url('graphics/cloudbkg-fade.jpg');
			background-attachment: fixed;
			background-position: 0 0;
			color: #292929;
			font-variant: normal;
			font-weight: normal;
			padding-left: .6em;
			padding-right: .6em;}

	body.standalone div.box h3 {
		color: #292929;}

			
body.standalone #options h3 { /* Header for options panel. */
	/* ### SPLIT ### - h3 shows up under div.box(MCSS3A), div.headerdiv (MCSS3), 
	#homebody div.box (MCSS5), #options (MCSS2).  */
	background-color: #292929;
	border-left: .08in solid #6da0b1;}
	
body.standalone #helpbutton {
	border-bottom: .04in solid #292929;
	border-left: .08in solid #292929;
	border-right: .04in solid #292929;
	border-top: .04in solid #292929;
	color: #0d2e4d;
	cursor: help;
	font-size: 1.4em;
	font-weight: bold;
	margin-right: -7px;
	padding: 6px;
	text-shadow: 1px 2px 3px #1e83ff;}
	
	body.standalone #helpbutton:hover {
		border-bottom: .04in solid #ffb500;
		border-left: .08in solid #ffb500;
		border-right: .04in solid #ffb500;
		border-top: .04in solid #ffb500;
		}

body.standalone #locatordiv { /* Container for the locator text. */
	background-color: #292929;}

	body.standalone p.location {
			bottom: 4px;
			color: #ffffff;
			font-weight: bold;
			margin-bottom: 0px;
			margin-left: 0px;
			margin-right: .2in;
			margin-top: 0px;
			padding: 0px;
			position: absolute;
			right: 0px;
			text-align: right;}


/* ===================================================================================== */