/*
	090806 as of today, there are no variables natively supported by css. there are php workarounds, but that's lame.
	110122 same deal still. this site shows a good php way to dynamically generate your .css file : http://davidwalsh.name/css-variables-php-dynamic
		we were trying to add a variable in the ioHomePageCustomizer.js to allow her to update the color of 3rd nav links, but (see below) evidently
		updating .css link schemes is problematic. tried to do it using .css method in jquery, able to update all a elements' color, but not individual states (even when following the special sequence you evidently need to)

*/


	/* turn off borders for all images (this gets rid of the annoying link focus borders) */
	img {ΚΚ
		border-style: none;
		border: 0;
	}






/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 		*/
/* CLASSES ++++++++++++++++++++++++++++++ */

	.homePageCell{
	}

	.alignCenter {
		text-align: center;
	}
	
	.alignLeft {
		text-align: left;
	}
	
	.underlined {
		text-decoration: underline;
	}
	
	/* 090807 apparently when trying to vertically center text, it must be 
	   in a table cell (untested) or in a block element (e.g. p) with display: table-cell 
	   within a block element (e.g. div) with display: table
	*/
	.alignVerticalMiddle {
		vertical-align: middle;
	}
	
	.displayTable {
		display: table;
	}
	
	.displayTableCell {
		display: table-cell;
	}
	
	.displayTableRow {
		display: table-row;
	}
	

	.fontWeightBold {
		font-weight: bold;
	}
	
	.fontSize24px {
		font-size: 24px;
	}
	
	.font500percent {
		font-size: 5.0em;
	}
	
	.font300percent {
		font-size: 3.0em;
	}
	
	.font200percent {
		font-size: 2.0em;
	}
	
	.font150percent {
		font-size: 1.5em;
	}
	
	.font125percent {
		font-size: 1.25em;
	}
	
	.font100percent {
		font-size: 1.0em;
	}
	
	.font80percent {
		font-size: 0.8em;
	}
	
	.colorWhite {
		color: #ffffff;
	}
	
	.colorRed01 {
		color: #ff0000;
	}
	
	/* you may use these in <span> etc to simulate tabs or just create whitespace on left */
	.marginLeft50px {
		margin-left: 50px;
	}

	.marginLeft20px {
		margin-left: 20px;
	}


	/*
		090807 Transparency is one of those weird things that is treated completely differently in
		all browsers. To cover all your bases, you need four separate CSS statements
	*/
	.transparent_25percent {
		filter:alpha(opacity=25);
		-moz-opacity:0.25;
		-khtml-opacity: 0.25;
		opacity: 0.25;
	}

	.transparent_50percent {
		filter:alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}

	.transparent_80percent {
		filter:alpha(opacity=80);
		-moz-opacity:0.8;
		-khtml-opacity: 0.8;
		opacity: 0.8;
	}

	.transparent_100percent {
		filter:alpha(opacity=100);
		-moz-opacity:1.0;
		-khtml-opacity: 1.0;
		opacity: 1.0;
	}




	/* 	
		CREATING A "LINK STATE" CLASS
		090806
		NOTE: gotta follow the "link-visited-hover-active" sequence or it breaks
		
		apparently there is the only way you may define a "link state class"
		tried doing it in one go as in:
			
			.blowmamma{
			a:link {color: red; }
			a:visited {color: yellow; }
			a:hover {color: purple; }
			a:active {color: white; }
			}
		
		but no browser liked it.
		also, i couldn't just add the various "a:link" etc. within a class with other "pieces" e.g.:
		
			.someclass{
				color: #000000;
				a:link {color:red;}
			}
			
		also, doing it the following way requires you specify the class "blowme" for each <a> element = tedious:
		
			a.blowme:link {color: red; }
			a.blowme:visited {color: yellow; }
			a.blowme:hover {color: green; }
			a.blowme:active {color: white; }
	
		defining a class the following way seems to work, and allows you to apply the "class" to any element (thereby applying it to all contained <a> elements):
	
	
		.blowyou a:link {color: red; }
		.blowyou a:visited {color: yellow; }
		.blowyou a:hover {color: green; }
		.blowyou a:active {color: white; }
	
		
		finally, this following approach will apply link attributes to all <a> elements in the element with id "homePageContentContainer"
		that's cool, but means we need to define link states for each unique id
		
			#homePageContentContainer a:link {
				color: #592E28;
				text-decoration:none;
			}		
			#homePageContentContainer a:hover {
				color: #222222;
				background-color: #FFFFFF;
				text-decoration:none;
			}
			
		090808 great. applying these link schemes are additive. so if you apply one to "body" and another to
		some contained element, the styles from both schemes are applied (i.e. one does not replace the other, but adds to it)
		so...either develop link schemes that completely override each other, or only apply schemes at lower levels to specific elements
	*/

	
	/* 090806 basic link scheme */
	.ioClass-linkScheme-basic a:link {color: white; }
	.ioClass-linkScheme-basic a:visited {color: yellow; }
	.ioClass-linkScheme-basic a:hover {color: black; background: white; border: 5px solid red;}
	.ioClass-linkScheme-basic a:active {color: green; }

	/* 090806 stealth link scheme */
	.ioClass-linkScheme-stealth a:link { color: black; border: 0px;}
	.ioClass-linkScheme-stealth a:visited { color: black; border: 0px;}
	.ioClass-linkScheme-stealth a:hover { color: black; border: 0px;}
	.ioClass-linkScheme-stealth a:active { color: black; border: 0px;}

	/* 090813 link scheme for global nav*/
	.ioClass-linkScheme-globalNav a:link {color:#281010; text-decoration:none;}
	.ioClass-linkScheme-globalNav a:visited {color:#281010; text-decoration:none;}
	.ioClass-linkScheme-globalNav a:hover {color:#bbbbbb; text-decoration:none;}
	.ioClass-linkScheme-globalNav a:active {color:#281010; text-decoration:none;}

	/* 090813 link scheme for third nav*/
	.ioClass-linkScheme-thirdNav a:link {color:#000000; text-decoration:none;}
	.ioClass-linkScheme-thirdNav a:visited {color:#000000; text-decoration:none;}
	.ioClass-linkScheme-thirdNav a:hover {color:#bbbbbb; text-decoration:none;}
	.ioClass-linkScheme-thirdNav a:active {color:#000000; text-decoration:none;}

	/* jcaption link scheme*/
	.ioClass-linkScheme-globalNav a:link {color:#281010; text-decoration:none;}
	.ioClass-linkScheme-globalNav a:visited {color:#281010; text-decoration:none;}
	.ioClass-linkScheme-globalNav a:hover {color:#bbbbbb; text-decoration:none;}
	.ioClass-linkScheme-globalNav a:active {color:#281010; text-decoration:none;}


	/* 031121 */
	.ioClass-page-home{ 
		color: 					#000000;
		font-weight: 			normal;
		font-size: 				12px;
		font-family: 			arial, sans-serif;
		background-image:		url(http://www.iomoi.com/images/homePageRandomImages/homecells/background.png);
		background-repeat: 		repeat;
		background-color: 		#040048;
	}

	.poo{
		background-color: #ff0000;
	}
	
	.pee{
		background-color: #0000ff;
	}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 		*/
/* IDs - i.e. styles for elements with the following unique IDs (i.e. can only use once PER PAGE)  	*/

	#homePageContentContainer{
		position:					absolute;
		top:						50%;
		left:						50%;
		margin-left:				-400px;
		margin-top:					-280px;
		width:						810px;
		height:						570px;
		background-color:			transparent;
		text-align:					center;
		font-size: 					10px;
		font-family: 				verdana, arial, sans-serif;
		
	}
	
	#homePageGlobalNav{
		position:					absolute;
		top:						50%;
		left:						50%;
		margin-left:				-405px;
		margin-top:					-285px;
		width:						810px;
		height:						70px;
		background-color:			white;
		text-align:					center;
		z-index:					1;
	}
	
	
	#homePageGlobalNav-branding{
		position:					absolute;
		top:						10px;
		left:						60px;
		margin-left:				0px;
		margin-top:					0px;
		width:						50;
		height:						50;
		background-color:			transparent;
		text-align:					center;
	}
	
	#globalNavHolderLower{
		position:					absolute;
		top:						50px;
		left:						160px;
		padding:					0px;
		width:						640px;
		height:						15px;
		background-color:			transparent;
		text-align:					center;
		font-size:					11px;
		font-weight:				normal;
		color:						#281010;

	}

	#globalNavHolderMiddle{
		position:					absolute;
		top:						35px;
		left:						160px;
		padding:					0px;
		width:						640px;
		height:						15px;
		background-color:			transparent;
		text-align:					center;
		font-size:					11px;
		font-weight:				normal;
		color:						#281010;

	}


	
	#globalNavHolderUpper{
		position:					absolute;
		top:						10px;
		left:						160px;
		padding:					0px;
		width:						640px;
		height:						15px;
		background-color:			transparent;
		text-align:					center;
		font-size:					9px;
		font-weight:				normal;
		color:						#281010;

	}
	
	
	#homePage2ndNav{
		position:					absolute;
		top:						50%;
		left:						50%;
		margin-left:				-405px;
		margin-top:					-215px;
		width:						160px;
		height:						490px;
		background-color:			white;
		text-align:					left;
		font-size:					10px;
	}
	
	#accordionHolder{
		position:					absolute;
		top:						0px;
		left:						12px;
		width:						148px;
		height:						480px;
		background-color:			transparent;
		text-align:					left;
		font-size:					10px;
	}
	
	#homePageMainContent{
		position:					absolute;
		top:						50%;
		left:						50%;
		margin-left:				-245px;
		margin-top:					-215px;
		width:						650px;
		height:						490px;
		background-color:			white;
		text-align:					center;
	}


	#homePage3rdNav{
		position:					absolute;
		top:						50%;
		left:						50%;
		margin-left:				-405px;
		margin-top:					275px;
		width:						810px;
		height:						15px;
		background-color:			white;
		text-align:					center;
		color:						#000000;
		font-weight:				lighter;
		font-size: 					10px; /* 090809 (unverified) apparently if you specify in px anti-aliasing is turned off. not so with pts */
	}

	#homePageCell-01{
		position:					absolute;
		top:						0px;
		left:						0px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-02{
		position:					absolute;
		top:						0px;
		left:						160px;
		margin-left:				0px;
		margin-top:					0px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-03{
		position:					absolute;
		top:						0px;
		left:						320px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-04{
		position:					absolute;
		top:						0px;
		left:						480px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-05{
		position:					absolute;
		top:						160px;
		left:						0px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}
	#homePageCell-06{
		position:					absolute;
		top:						160px;
		left:						160px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-07{
		position:					absolute;
		top:						160px;
		left:						320px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-08{
		position:					absolute;
		top:						160px;
		left:						480px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-09{
		position:					absolute;
		top:						320px;
		left:						0px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-10{
		position:					absolute;
		top:						320px;
		left:						160px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-11{
		position:					absolute;
		top:						320px;
		left:						320px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}

	#homePageCell-12{
		position:					absolute;
		top:						320px;
		left:						480px;
		margin-left:				0px;
		margin-top:					0px;
		width:						160px;
		height:						160px;
		background-color:			transparent;
		text-align:					center;
	}