/* font-size: 100% avoids IE problem with em sizes */
html { font-family: sans-serif; font-size: 100% ; }
/* Unlike tables, CSS has no real concept of height */
/* kluge a giant grey column (originally images/grey666.gif), keep it open to bottom of viewpoint with repeat-y */
body { color: #fff; background: #444 url(images/background4000rgb444_666.gif) 75% 0 repeat-y ; font-size: 1em; margin: 0; padding: 0; }
/* text-shadow is CSS3, only Safari uses it so far */
h1 { font-size: 2em; text-align: center; text-shadow: 5px 5px 5px #aaaaaa; }
h2 { font-size: 1.5em; }
/* Stop Firefox and others from doing annoying default dotted underline */
abbr, acronym { border-bottom: none; cursor: help; }
/* img needs to be styled in #main */
img { border: none; float: right; margin-left: 2%; margin-bottom: 2%; }
/* test floating images in dt right for index pages */
dt { clear: right; font-size: 1.2em;  margin-top: 1em; }
dt img {border: none; float: right; }

/* Removed float: left; from address because IE displays vertical. Get rid of default italic address style */
address { clear: both; font-style: normal; margin-left: 5%; }

/* Style all unique IDs and their descendent elements*/
#all { }
/* I would like to use a narrow max-width, but photos block this. */
#main { color: #fff; background-color: #444; float: left; border: none; width: 65%; max-width: 40em; margin-left: 5%; }
/* Double margin bug in IE6 and below. Left margin is doubled when block has a float - using display: inline; may fix? But will inline always be ignored by all other browsers? */
#main { display: inline; }
#main p { clear: both; line-height: 1.3; } 
/* Style links within lists in sitemap.html */
#main dl dl{ padding-left: 3em; }
/* Show links within paragraphs on hover in some browsers */
#main p:hover a { background-color: #444; color: #ccc; text-decoration: underline; }

/* Style all links within #main div - may need to change colours */
#main a { text-decoration: none; }
#main a:link { background-color: #444; color: #aaa; }
#main a:visited {background-color: #444; color: #888; }
#main a:hover { background-color: #444; color: #fff }
#main a:active { background-color: #000; color: #fff; text-decoration: underline; }

/* Style the #side box and  navigation - vertical grey is kluged in body at 75%:25% */
/* Various images available architect_card200.gif is original */
/* 3px border and box model bugs in IE will manifest - find kluge before going to 200px again */
#side { float: right; color: #aaa; background: #666 url(images/cyclone_studios_logo.jpg) no-repeat top right; font-size: 0.9em; width: 25%; }
/* When removing list-style, reset padding 0 as the browser defaults leave space for the dotted list. Large top margin is kluge to clear the logo illustration. */
#side ul { list-style: none; margin: 170px 0 50px 0; padding: 0 0 0 1em; }
/* IE 6 & 7 may be allowing li to incorrectly inherit ul margin - added zoom: 1; as bug fix to force IE HasLayout - does not fix IE 5.01 */
#side li { zoom: 1; }
/* Use whole width of list item for link by forcing display block. This gives larger mouse target to click on. Consider whether we want background colour change on hover and active. */
#side a { display: block; margin: 0; padding: 0; text-decoration: none; }
#side a:link { background-color: transparent; color: #aaa; }
#side a:visited {background-color: transparent; color: #888; }
#side a:hover { background-color: transparent; color: #fff }
#side a:active { background-color: #000; color: #fff; text-decoration: underline; }
/* Style list within list */
#side ul ul { list-style: none; margin: 0; padding: 0 0 0 1em; }
/* Style current location dark, to indicate where we are */
#side ul li .here { background-color: #666; color: #222; }


/* Why do I need the float and margin for footer to work? */
/* replaced teal with #4682B4 (too blue) then #36648B 27 November 2007
 then #005070 for Cyclone Studios */
#footer { clear: both; float: left; color: #fff; background-color: #005070; margin: 0;  padding: 0; width: 100%; }
#footer h2 { font-size: 2em; letter-spacing: 0.1em; margin: 0; padding: 0 5%; text-transform: lowercase; word-spacing: 0.2em; }
#footer h3 { display: inline; font-size: 1.5em; letter-spacing: 0.1em; margin: 0; padding: 0; text-transform: lowercase; word-spacing: 0.2em; }
#footer p { display: inline; font-size: 0.8em; margin: 0; padding: 0 0 0 5%; }
/* Style the links back to the home page to hide them */
#footer a { margin: 0px; padding: 0px; text-decoration: none; }
#footer a:link { background-color: #005070; color: #fff; }
#footer a:visited {background-color: #005070; color: #fff; }
#footer a:hover { background-color: #005070; color: #fff }
#footer a:active { background-color: #4682B4; color: blue; text-decoration: underline; }

/* I will probably need another nav area
#nav {
font-size: 80%;
	border: #000000 none 0;
	margin: 2%;
	margin-left: 5%; 
	margin-right: 5%; 
	padding: 0;
	clear: both;
}

*/

/* Probably matches anchors as well as links, so needs to change 
#nav a {
	text-decoration: none;
	margin: 3px;
	padding: 3px;
}

*/

/* LoVe HAte order matters - link, visited, hover, active 
a:link {
	text-decoration: none;
	background-color: blue;
	color:  red;
}

a:visited {
	background-color: transparent;
	color: #aaa;
	text-decoration: none;
}

a:hover {
	background-color: transparent;
	color: #fff;
}

a:active {
	border-color: #666666 #dddddd #dddddd #666666 ;
}

#breadcrumb {}

*/
.problem {color: red; }
.solved {color: green; }

.test { border-color: red green yellow blue; border-width: 1em; border-style: solid; width: 0px; height: 0px; line-height: 0px; }