body {
	background-color: #FFFFFF;
	text-align: center;
	margin: auto;
}
a:link {
	color: #000001;
	text-decoration: none;
}
a:visited {
	color: #000001;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #000001;
}

.Titre1 {
	font-family: 'Bradley Hand ITC', 'Trebuchet MS', Geneva, sans-serif;
	font-size: 32px;
	color: #990033;
	font-weight: bold;
}

.Title2 {
	font-family: 'Trebuchet MS', Geneva, sans-serif;
	font-size: 12px;
	font-weight: 300;
	color: #C0C0C0;
	padding: 0 0 5px 0;
	margin: 0 0 5px 0; 
	}
	
.Titre2a {
	font-family: 'Trebuchet MS', Geneva, sans-serif;
	font-weight: bold;
	color: #990033;
	}

.Title3 {
	font-family: 'Trebuchet MS', Geneva, sans-serif;
	font-size: 12px;
	color: #E0B638;
	padding: 10px;
}

.Title4 {
	font-family: American Typewriter, 'Trebuchet MS', Geneva, sans-serif;
	font-size: 13px;
	font-weight: 100;
	color: #006699;
	z-index: 4;
	
}

.hand {
	position: absolute;
	align: left;
	left: inherit;
	}

.Contact{
	position: relative;
	display: block;
	margin-right: auto;
	right: 20px;
	font-family: 'Trebuchet MS', Geneva, sans-serif;
	font-size: 14px;
	font-weight: 100;
	color: #E0B638;
	padding: 10px;
	}
	

.Intro {
	color: #C0C0C0;
	font-family: 'Trebuchet MS', Geneva, sans-serif;
}

.background1 {
	background-color: #FFFFFF;
}

.background2 {
	background-color: #000000;
	}
	
.PictureText{
	font-family: 'American Typewriter', 'Trebuchet MS', Geneva, sans-serif;
	color: #006699;
	font-size:9px;
}	

.EssayText{
	font-family: Verdana, 'Trebuchet MS', Geneva, sans-serif;
	color: #666666;
	font-size:12px;
	text-align:justify;
}	

.EssayHeader{
	font-family: Verdana, 'Trebuchet MS', Geneva, sans-serif;
	color: #000000;
	font-size:20px;
	text-align: center;
}	

.EssaySubHeader{
	font-family: Verdana, 'Trebuchet MS', Geneva, sans-serif;
	color: #000000;
	font-size:14px;
	text-align: left;
}	


.buttonText{
	font-family: 'Trebuchet MS', Geneva, sans-serif;
	color:#C0C0C0;
	}
	
.thumbnails {
	padding-right: 8px;
	height: 80px;
	width: 80px;
	border: none;
	}
	
.frameless {
	border: none;
}
	
#PaintingName {
	font-size: 20px;
	font-family: 'Trebuchet MS', Geneva, sans-serif;
	color: #C0C0C0;
	font-weight:800;
	position: relative;	
}
	
#container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}	
	
#pageHeader{
	position:relative;
	margin-top: 40px;
	height:40px;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	}
	
#subHeader {
	position: relative;
	list-style-type: none;
	width: 600px;
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;	
	}
	
.Menu {
	font-family: 'Trebuchet MS', Geneva, sans-serif;
	font-size: 16px;
	text-align: center; 
	margin: 5px 0 5px 10px;
	padding: 0 0 5px 0;	
	height: 10px;
	width: auto;
	}

.Menu li{
	float: left;
	list-style: none;
	border-right: outset thin #990033;
	}

.Menu li#listEnd{
	border-right: none;
}
	
.Menu li a{
	display: block;
	margin: 0 2px 0 0;
	font-weight: bold;
	padding: 0 10px 0 10px;
	}
	
.Menu li ul{
	display: none;
	}
	
.Menu li:hover ul{
	display: inline;
	position: absolute;
	}
	
.Menu .subMenu {
	font-size: 14px;
	margin: 0 0 5px 0;
	padding: 0 0 3px 0;
	}

.Menu .subMenu li{
	position: static;
	display: inline-block;
	font-weight: bold;
	color: #990033;
	border-right-style: dotted;
	}
	
.Menu .subMenu li a{
	width: inherit;
	
	}

#buttons{
	position: absolute;
	border: 1px solid #C0C0C0;
	height: 15px;
	width: 50px;
	font: 'Trebuchet MS', Geneva, sans-serif;
	padding: 0 0 2px 0;
	}
	
#CentreSpace {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	width: 640px;
	height: 400px;
	border-color: #C0C0C0;
	border-style: solid;
	border-width: thin; 
	overflow: auto;	
	z-index: 1;
}

#HomeOne {
	position: absolute;
	left: 0;
	z-index: 2;
	}
	
#HomeTwo {
	position: absolute;
	background-image: url(images/Stripes1.jpg);
	left: 0;
	top: 230px;
	width: 640px;
	height: 170px;
	z-index: 3;
}

#HomeThree {
	position: absolute;
	width: inherit;
	top: 170px;
	height: 60px; 
	left: 0;
	}


#TopLeft {
	position: absolute; 
	width: 150px;
	height: 150px;
	top: 40px;
	left: 20%;
}

#TopRight {
	position: absolute; 
	width: 150px;
	height: 150px;
	top: 40px;
	right: 20%;
}

#BottomLeft {
	position: absolute; 
	width: 150px;
	height: 150px;
	bottom: 40px;
    left: 20%;
}

#BottomRight {
	position: absolute; 
	width: 150px;
	height: 150px;
	bottom: 40px;
	right: 20%;
}	

#NewsBox {
	width: 570px;
	height: 150px;
	font-size: 14px;
	border-color: #666666;
	border-width: thin;
	border-style: solid;
	text-align: left;
	background-color: #FFFFFF;
    }

#NewsBlueBox {
	width: 580px;
	height: auto;
	border-color: #666666;
	border-width: thin;
	border-style: solid;
	text-align: justify;
	background-color: #FFFFFF;
    }

#ads {
	position: fixed;
	float: inherit;
	bottom: 10px;
	left: 400px;
	z-index: -1;
	}
	
#blog {
	position: absolute;
	top: 275px;
	right: 125px;
	z-index: 1;
	font-family:'Trebuchet MS', Geneva, sans-serif;
	height: 70px;
	padding: 10px;
	margin: 10px;
	}
	

<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
// <![CDATA[
/**
 *	Whatever:hover - V3.00.081222
 *	------------------------------------------------------------
 *	Author  - Peter Nederlof, http://www.xs4all.nl/~peterned
 *	License - http://creativecommons.org/licenses/LGPL/2.1
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	howto: body { behavior:url("csshover3.htc"); }
 *	------------------------------------------------------------
 */

window.CSSHover = (function(){

	// regular expressions, used and explained later on.
	var REG_INTERACTIVE = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i,
		REG_AFFECTED = /(.*?)\:(hover|active|focus)/i,
		REG_PSEUDO = /[^:]+:([a-z-]+).*/i,
		REG_SELECT = /(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi,
		REG_CLASS = /\.([a-z0-9_-]*on(hover|active|focus))/i,
		REG_MSIE = /msie (5|6|7)/i,
		REG_COMPAT = /backcompat/i;

	// css prefix, a leading dash would be nice (spec), but IE6 doesn't like that.
	var CSSHOVER_PREFIX = 'csh-';
	
	/**
	 *	Local CSSHover object
	 *	--------------------------
	 */
	
	var CSSHover = {
		
		// array of CSSHoverElements, used to unload created events
		elements: [], 
		
		// buffer used for checking on duplicate expressions
		callbacks: {}, 
		
		// init, called once ondomcontentready via the exposed window.CSSHover function
		init:function() {
			// don't run in IE8 standards; expressions don't work in standards mode anyway, 
			// and the stuff we're trying to fix should already work properly
			if(!REG_MSIE.test(navigator.userAgent) && !REG_COMPAT.test(window.document.compatMode)) return;

			// start parsing the existing stylesheets
			var sheets = window.document.styleSheets, l = sheets.length;
			for(var i=0; i<l; i++) {
				this.parseStylesheet(sheets[i]);
			}
		},

		// called from init, parses individual stylesheets
		parseStylesheet:function(sheet) {
			// check sheet imports and parse those recursively
			if(sheet.imports) {
				try {
					var imports = sheet.imports, l = imports.length;
					for(var i=0; i<l; i++) {
						this.parseStylesheet(sheet.imports[i]);
					}
				} catch(securityException){
					// trycatch for various possible errors,
					// todo; might need to be placed inside the for loop, since an error
					// on an import stops following imports from being processed.
				}
			}
			
			// interate the sheet's rules and send them to the parser
			try {
				var rules = sheet.rules, l = rules.length;
				for(var j=0; j<l; j++) {
					this.parseCSSRule(rules[j], sheet);
				}
			} catch(securityException){
				// trycatch for various errors, most likely accessing the sheet's rules,
				// don't see how individual rules would throw errors, but you never know.
			}
		},

		// magic starts here ...
		parseCSSRule:function(rule, sheet) {
			
			// The sheet is used to insert new rules into, this must be the same sheet the rule 
			// came from, to ensure that relative paths keep pointing to the right location.

			// only parse a rule if it contains an interactive pseudo.
			var select = rule.selectorText;
			if(REG_INTERACTIVE.test(select)) {
				var style = rule.style.cssText,
					
					// affected elements are found by truncating the selector after the interactive pseudo,
					// eg: "div li:hover" >>  "div li"
					affected = REG_AFFECTED.exec(select)[1],
					
					// that pseudo is needed for a classname, and defines the type of interaction (focus, hover, active)
					// eg: "li:hover" >> "onhover"
					pseudo = select.replace(REG_PSEUDO, 'on$1'),
					
					// the new selector is going to use that classname in a new css rule,
					// since IE6 doesn't support multiple classnames, this is merged into one classname
					// eg: "li:hover" >> "li.onhover",  "li.folder:hover" >> "li.folderonhover"
					newSelect = select.replace(REG_SELECT, '.$2' + pseudo),
					
					// the classname is needed for the events that are going to be set on affected nodes
					// eg: "li.folder:hover" >> "folderonhover"
					className = REG_CLASS.exec(newSelect)[1];

				// no need to set the same callback more than once when the same selector uses the same classname
				var hash = affected + className;
				if(!this.callbacks[hash]) {

					// affected elements are given an expression under a fake css property, the classname is used
					// because a unique name (eg "behavior:") would be overruled (in IE6, not 7) by a following rule 
					// selecting the same element. The expression does a callback to CSSHover.patch, rerouted via the
					// exposed window.CSSHover function. 

					// because the expression is added to the stylesheet, and styles are always applied to html that is
					// dynamically added to the dom, the expression will also trigger for those new elements (provided
					// they are selected by the affected selector). 

					sheet.addRule(affected, CSSHOVER_PREFIX + className + ':expression(CSSHover(this, "'+pseudo+'", "'+className+'"))');
					
					// hash it, so an identical selector/class combo does not duplicate the expression
					this.callbacks[hash] = true;
				}
				
				// duplicate expressions need not be set, but the style could differ
				sheet.addRule(newSelect, style);
			}
		},

		// called via the expression, patches individual nodes
		patch:function(node, type, className) {
			
			// the patch's type is returned to the expression. That way the expression property
			// can be found and removed, to stop it from calling patch over and over. 
			// The if will fail the first time, since the expression has not yet received a value.
			var property = CSSHOVER_PREFIX + className;
			if(node.style[property]) {
				node.style[property] = null;
			}

			// just to make sure, also keep track of patched classnames locally on the node
			if(!node.csshover) node.csshover = [];

			// and check for it to prevent duplicate events with the same classname from being set
			if(!node.csshover[className]) {
				node.csshover[className] = true;

				// create an instance for the given type and class
				var element = new CSSHoverElement(node, type, className);
				
				// and store that instance for unloading later on
				this.elements.push(element);
			}

			// returns a dummy value to the expression
			return type;
		},

		// unload stuff onbeforeunload
		unload:function() {
			try {
				
				// remove events
				var l = this.elements.length;
				for(var i=0; i<l; i++) {
					this.elements[i].unload();
				}

				// and set properties to null 
				this.elements = [];
				this.callbacks = {};

			} catch (e) {
			}
		}
	};

	// add the unload to the onbeforeunload event
	window.attachEvent('onbeforeunload', function(){
		CSSHover.unload();
	});

	/**
	 *	CSSHoverElement
	 *	--------------------------
	 */

	// the event types associated with the interactive pseudos
	var CSSEvents = {
		onhover:  { activator: 'onmouseenter', deactivator: 'onmouseleave' },
		onactive: { activator: 'onmousedown',  deactivator: 'onmouseup' },
		onfocus:  { activator: 'onfocus',      deactivator: 'onblur' }
	};
	
	// CSSHoverElement constructor, called via CSSHover.patch
	function CSSHoverElement(node, type, className) {

		// the CSSHoverElement patches individual nodes by manually applying the events that should 
		// have fired by the css pseudoclasses, eg mouseenter and mouseleave for :hover. 

		this.node = node;
		this.type = type;
		var replacer = new RegExp('(^|\\s)'+className+'(\\s|$)', 'g');

		// store event handlers for removal onunload
		this.activator =   function(){ node.className += ' ' + className; };
		this.deactivator = function(){ node.className = node.className.replace(replacer, ' '); };
		
		// add the events
		node.attachEvent(CSSEvents[type].activator, this.activator);
		node.attachEvent(CSSEvents[type].deactivator, this.deactivator);
	}
	
	CSSHoverElement.prototype = {
		// onbeforeunload, called via CSSHover.unload
		unload:function() {

			// remove events 
			this.node.detachEvent(CSSEvents[this.type].activator, this.activator);
			this.node.detachEvent(CSSEvents[this.type].deactivator, this.deactivator);

			// and set properties to null 
			this.activator = null;
			this.deactivator = null;
			this.node = null;
			this.type = null;
		}
	};

	/**
	 *	Public hook
	 *	--------------------------
	 */
	
	return function(node, type, className) {
		if(node) {
			// called via the css expression; patches individual nodes
			return CSSHover.patch(node, type, className);
		} else {
			// called ondomcontentready via the public:attach node
			CSSHover.init();
		}
	};

})();

// ]]>
</script>