/*	This document is intended to provide the basic styles, suitable for all browsers.
	Another document, preferred.css, provides more visually interesting styles, but
	some of these are not understood by older browsers.	*/

/* Global definitions */
body
{
	font: 12px/1.5 Courier, monospace;
	background-image: url(images/bg.jpg);
}

a { font-weight: bold; }

a:link
{
	color: #db0000;
	text-decoration: none;
}

a:visited
{
	color: #8a0000;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
	background-image: url(images/alphagray.png);
}

a:active { color: black; }

div
{
	margin: 0;
	padding: 0;
}

h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 14.4px; }
h4 { font-size: 13.2px; }


/* General Classes */

.alert
{
	color: #f00;
	font-weight: bold;
}

.center { text-align: center; }

.floatright { float: right; }

.sectionlinks, .sectionsublinks
{
	text-transform: uppercase;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.sectionsublinks { padding-left: 2em; }

/* Hide from NN4 because it can't handle this shifting */
/*/*/
.shiftleft
{
	margin: 0;
	padding: 0 0 0 6px;
	border: 1px solid black;
	position: absolute;
	left: 0;
	background: transparent url(images/alphapink.png);
}

h1.shiftleft { width: 360px; margin-left: -368px; }
h2.shiftleft { width: 324px; margin-left: -332px; }
h3.shiftleft { width: 230px; margin-left: -238px; }
h4.shiftleft { width: 198px; margin-left: -206px; }
/* */

/* Specific Definitions */

#background, #certification, #contact, #documents, #focus, #interest, #intro, #links, #services
{
	padding: 0 24px;
	margin: 0;
	border-width: 0;
	/*	Hide from NN4 because it doesn't understand border-top; also, because it can't
		handle the headings shifted left, these lines are unnecessary. */
	/*/*/
	border-top: 1px solid black;
	/* */
}

/*	Hide from NN4 because it doesn't color the background of the whole div,
	only the space behind the text.  The border must be there to make the
	color extend to the very bottom, rather than just to the end of the text.	*/
/*/*/
#certification, #interest, #intro, #links, #services
{
	background-color: #ccc;
	border-bottom: 1px solid #ccc;
}
/* */

#certification, #contact { padding: 6px 24px; }

.first {
	margin-top: 0;
	padding-top: 0;
}

#intro { margin-top: 0; }

#main
{
	font: 12px/1.5 Courier, monospace;
	width: 408px;
	position: absolute;
	left: 384px;
	top: 168px;
	background-color: white;
	border: 1px solid black;
}

#sections
{
	position: fixed;
	top: 12px;
	left: 12px;
	border: 1px solid black;
	background-image: url(images/alphagray.png);
	width: 210px;
	padding: 12px;
	margin: 0;
	z-index: 10;
}

/*	This rule is not applied by Win IE 4.0-6.x, Mac IE 4.x, All NS 4.x,
	Win Opera 3.5-5.0, OSX/Mac Opera 5.0, OSX iCab 2.x, OSX OmniWeb
	4.1-4.2.  In IE it seems to make the div span the whole width of
	the screen.	*/
html+body #main { width: auto; }

#stamp
{
	/*	Using !important doesn't work in Win IE 4.0 - 6.x, Mac IE 4.x, All NS 4.x,
		OSX OmniWeb 4.1 - 4.2, or Konqueror 2.2.  In those browsers, let's put the
		stamp in the background, because IE6 notably can't handle PNGs transparently	*/
/*	z-index: 3 !important;
	z-index: -2; */
/*	z-index: 2; */
	display: none;
}

/* Stupid hack to let IE5/Mac display the PNG, because it can. */
i {content: "\"/*" }
#stamp
{
	z-index: 3;
	display: block;
	position: absolute;
	top: -120px;
	left: -48px;
	height: 209px;
	width: 324px;
}
/*	*/

/*	Let's try this trick instead.  IE6 shows an ugly grey background for
	the PNG image, so let's just not display it.	*/
/*head+body #stamp { display: block; }	*/

/* This is just hanging around to use in case this flips out when I try it on a PC. */
/* CSS HACK:  position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned
div, div h2, div div
	{ p\osition: relative; }
*/