/*** SARAH v1.0 | TJK.Template | Table-less Layouts | Copyright (c) TJKDesign - Thierry Koblentz */

/* Do not forget that for NNv4 one needs to use root-relative paths */ 
/* The trick for NNv4 is to use images versus colors for background */
/* Also because background images seem to resolve some float issues */

/* If you create a new style sheet for modern browsers, you may want */
/* to remove the a:hover rules from here [NN v4 does not "see" them] */

/* #MAIN is a wrapper. Use DIV #CONTENT for your page content */


body {
	margin:0;
	padding:0;
	text-align:center; /* This is to center the whole Layout in IE5 and also the "copyright" DIV */
	color:#594535;
	/* This is to keep the text legible in IE (if text-size "smallest") */	
	font-size:100%; 
	font-family:Arial, Helvetica, sans-serif;
	background:url(../img/backbody.jpg) #A39284 fixed
}
p, h1, h2, h3, h4, ul {
	font-family:Arial, Helvetica, sans-serif;
	color:#594535;
	text-align:left; /* To reset a previous declaration (see body) */
	/* 100% is too much for NN4 Mac. If we declare the font-size here it is because with NN4, one cannot rely on inheritance */
	font-size:95%;
	/* This is a CSS filter (CSS hack). We reset the font-size for modern browsers. NN4 does not see this */	
	/*/*/ font-size:100% /**/
}
h1, h2, h3, h4 {
	margin:0;
	font-size:1.1em;
	color:#660033;
	font-weight:bold}
h2, h3, h4 {font-size:.9em}
/* This is to style any string wrapped inside the acronym tags pair */
/* It changes the cursor. It is to be used with the title attribute */
acronym {
	border-bottom:1px dotted #600;
	cursor:help
}
blockquote {
	text-align:center;
	font-style:italic;
	margin:0;
	border-bottom:1px dotted #CC9900;
	padding:0 5px 20px 0;
	font-size:.9em
}
form {
	margin:20px 0;
	padding:0 0 20px 0;
	font-size:small;
	border-bottom:1px dotted #594535
}
input {
	color:#663300;
	background-color:#E3D8CC;
	width:80px
}
/* This is to change the background of the input fields when they get focus */
/* Note: this includes the submit button. For browsers that do not support the */
/* pseudo-class ":focus" (MSIE for example), you'd need to use some JavaScript */
/* inside the input tag. Example: onfocus="this.style.border='1px solid #000'" */
/* onblur="this.style.border='1px solid #fff'". Both need to be in the tag  */
input:focus {background-color:#fff;color:#633}
label {font-size:90%}
.mybutton {
	color:#fff;
	font-weight:600;
	background-color:#594535;
	width:83px
}
/* This is to remove border around images. Because NN4 ignores this rule, we will be using a "color" declaration */
/* to blend the border with the background color. Look at the ".hideme" class and the popup image in the markup  */
img {border:0}
/* a:link are links that have not been visited yet (vs a:visited). When you */
/* create these rules (using these pseudo-class) you have to respect a certain */
/* order: a:link must come first then it is a:visited, a:hover and a:active */
a:link, a:visited {
	color:#660033;
	text-decoration:underline
}
a:hover, a:active {
	color:#550000;
	text-decoration:none
}
/* Links above the banner image */
#toplinks {
	text-align:right;
	padding:0 9px 0 0
}
#toplinks a:link,#toplinks a:visited {
	text-decoration:none;
	color:#FFF;
	font-size:70%
}
#toplinks a:hover,#toplinks a:active {text-decoration:underline}
#wrapper {
	width:740px;
    margin:0 auto; /* This is to center everything  */
    padding:0;
	/* Without a background image declaration NN4 does not center the DIV */
	background-image:url(../img/white.gif)
} 
/* I am not using LIs because NN4 Mac cannot hide bullets */
/* The bottom-padding here is very important for NN4. Without it, this browser would truncate the banner element */
#menu {
	padding:0;
	margin:0;
}
/* The WIDTH declaration takes care of IE5 Mac that would not float the elements */
#menu p {
	float:left;
	text-align:center;
	border:1px solid #660033;
	background-image:url(../img/button1.gif);
	width:92px
}
/* If you include a background declaration in the following rule, you will "lose" the links in NN4 */
#menu p a, #menu p a:link, #menu p a:visited {
	display:block;
	height:1.5em;
	line-height:1.5em;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #330033;
} 
#menu p a:hover {
	background-color:#663366;
	color:#fff
} 
/* To keep navigation state [the current selection]. Each page has a different navlink# ID [just before the menu] */
/* When there is a match between navlink# and link# [link1, link2,etc.] the link is styled according to this rule */
#navlink #link1,#navlink2 #link2,#navlink3 #link3,#navlink4 #link4,#navlink5 #link5 {cursor:default;font-weight:600;background-image:url(../img/backcolor.gif)} 
/* This is an inner wrapper. It holds the 2 "floaters" together */
#main {
	text-align:left;
	padding-left:10px;
	margin: 0px;
}
#sidebar {
	width:155px;
	float:left;
	padding:0;
	margin:0;
	text-align:center;
}
#sidebar p {
	font-size:90%;
	padding:0 9px 20px 9px;
	border-bottom:1px dotted #CC9900}
/* This is the container for the main content of your HTML pages */
#content {
	float:right;
	width:540px;
	padding:0 9px 0 0;
}
/* This is to clear the Horizontal menu. Because the Navigation links are floats, the */
/* margin here is not the space between the title and the bottom of the menu but its top */
#clearMenu {
	clear:left;
	margin-top:75px
}
#portfolio {
	text-align: left;
	clear: none;
	float: right;
	width: 360px;
}
#footer {
	text-align:left;
	clear:both;
	padding:20px 0 20px 10px;
	margin:0;
	font-size: 80%;
}
#footer p a:link,#footer p a:visited {
	text-decoration:none;
	color:#006666;
    font-size:80%
}
#validation p {text-align:center}
#validation a:link,#validation a:visited {
	font-size:0.8em;
	font-weight:600;
	text-decoration:none
}
/* This DIV holds the "top of page" image at the bottom right corner of the document */
#topOfPage {
	float:right
}
/* This can be used to clear floats using an image in a DIV */
.fillandclear {
	clear:both;
	line-height:0;
	height:0
}
div.fillandclear img {
	width:0;
	height:0
}
/* The following rule is to hide images borders in NN4. Set the color to the background color you want to match  */
.hideme {color:#E3D8CC}
/* We need to hide the border around the banner (linked images and NN4 issues) and reset its width for other UAs */
/* Make sure that the width of the banner in the markup is set to 725px. The original value would make NN stick the */
/* image out of its container */
#banner {color:#E3D8CC}
#banner img {width:740px}
/* To display a small icon next to external links. The "/" and "*" are here to hide these declarations from NN4  */
.outlink {
	/*/*/ padding-right:15px;
	background-image:url(../img/outlink.gif);
	background-position:right;
	background-repeat:no-repeat; /**/
}
.centerMe {text-align:center}
/* These two containers are to be printed only */
#printheader {display:none}
#copyright{display:none}