
html, body {
margin: 0; padding: 0;
height: 100%;
font-family: helvetica, verdana, arial, sans-serif;
font-size: 100%;
text-align: center; /* IE quirky center */
}

#wrap {
position: relative;
width: 90%;
min-width: 600px; /* to allow room for images and long words */
border: 1px solid black;
background: #eee; /* light grey */
min-height: 50%; /* IE has height hacked in in conditional below */
margin: 0 auto; /* compliant center */
text-align: left; /* reset text alignment */
}

#header {
position: relative;
width: 90%;
min-width: 600px; /* to match wrap div */
margin: 0 auto;
background: #ffc; /* pale yellow */
border: 1px solid #000;
background: url(../images/background1.jpg) repeat-x right bottom;

}

#footer {
position: relative;
width: 90%;
height: 60px;
min-width: 600px; /* to match wrap div */
margin: 0 auto;
background: #ffc; /* pale yellow */
border: 1px solid #000;
background: url(../images/footer.jpg) no-repeat center middle;

}

table.sample {
	border-width: 1px 1px 1px 1px;
	border-spacing: 1px;
	border-style: solid  solid solid;
	border-color: black black black black;
	border-collapse: collapse;
	background-color: white;
}
table.sample th {
	border-width: 1px 1px 1px 1px;
	padding: 2px 2px 2px 2px;
	border-style: dotted dotted dotted dotted;
	border-color: gray gray gray gray;
	background-color: rgb(255, 245, 238);
	-moz-border-radius: 0px 0px 0px 0px;
}
table.sample td {
	border-width: 1px 1px 1px 1px;
	padding: 5px 5px 5px 5px;
	border-style: dotted dotted dotted dotted;
	border-color: gray gray gray gray;
	/*background-color: rgb(255, 245, 238);*/
	-moz-border-radius: 0px 0px 0px 0px;
	font-family: helvetica, verdana, arial, sans-serif;
font-size: 0.8em;
}

hr {color: #fff; background-color: #fff; border: 1px dotted #009999; border-style: none none solid; width: 90%; margin-left:10px;}

/*TD.different {
background-color: #E2FAFA;
border-left: dashed 1px #669999;
border-right: dashed 1px #669999;
}
*/

/*h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.63m}*/
/*div#round{ margin: 0 0%;background: #CCFFCC}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px}*/

#strip {
	PADDING-LEFT: 4px; 
	PADDING-RIGHT: 4px; 
	/*BORDER-TOP: #999999 1px solid;*/ 
	BACKGROUND-COLOR:#ffffff; 
	text-align: left;
	height: 75px;
	width:99%;
}
#l {
float: left;
}

/*.gin {
	BORDER-RIGHT: #999999 1px solid; 
	PADDING-RIGHT: 8px; 
	BORDER-TOP: #999999 1px solid; 
	PADDING-LEFT: 8px; 
	PADDING-BOTTOM: 8px; 
	BORDER-LEFT: #999999 1px solid; 
	PADDING-TOP: 8px; 
	BORDER-BOTTOM: #999999 1px solid;
}*/

#one{
position: absolute;
top: 0;
bottom: 0; /* Opera needs this! Moz would automatically assume this as default */
border-width: 0px; /* widths below */
border-style: solid;
border-color: #777;
border-bottom: 1px solid;
height: 100%; /* hacked in for IE via conditional comment */
}

#two {
position: absolute;
top: 0;
bottom: 0; /* Opera needs this! Moz would automatically assume this as default */
border-width: 0px; /* widths below */
border-style: solid;
border-color: #777;
border-bottom: 1px solid white;
height: 100%;  /* hacked in for IE via conditional comment */
}

#one {left: 0; width: 185px; background: #fff; border-right-width: 2px;}
#two {right: 0; width: 160px; background: #fff; background: url(../images/background_l.jpg) repeat-y right top; border-left-width: 2px;}

#one p {background: #b0c4de; height: 50%;}/* height to show inheritance */
#two p {background: #fff; margin: 5px;} 


/* bringing the center content into position (clear the sides)
   using a wrap div to avoid any IE Box Model issues
	 also use this div if using expression to calculate
*/
#contentwrap {
position: relative; 
padding: 10px 170px 0 195px;
}

#content {
position: relative;  /* to enable further positioned divs inside content area */
z-index: 600; /* to make sure if long words overflow they show above the right column */ 
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
background: #fff;
padding: 4px;
margin: 0;
/*word-wrap:break-word;*/
}

#pagetop {margin: 1.3em 0;}

#pagetop h1, #pagetop h2, #pagetop h3 {
margin: 0.3em 220px;
font-family: georgia, serif;
padding: 0;
}

a#toplink {
width: 200px;
height: 130px;
background: #fff url(../images/header.gif) no-repeat 0 -326px;
position: absolute;
top: 0px;
right: 0px;
}

a#toplink:hover {
background: #fff url(images/header.gif) no-repeat 0 0;
}
p {margin: 0; padding: 10px; font-size: 0.8em; line-height: 1.4em;}
#header p {text-align: right;}
a {font-weight: bold;}
a:hover {text-decoration: none; color: #000; background: #eee;}
a:link {text-decoration: none; color: #009999;}

code {font-family: "Courier New", monospace;} 
h1, h2, h3, h4 {margin: 0; padding: 10px; position: relative; z-index: 5;}
h1 {font-size: 1.2em;}
h2 {font-size: 1.1em;}
h3 {font-size: 1em;}
h4 {padding-bottom: 0; padding-right: 15px;}
ul {font-size: 0.8em; margin: 0 20px 0 30px; padding: 0;}

#two ul {margin: 0 10px; padding: 0; border: 0; list-style: none;}
#two li {margin: 0; padding: 3px 0;}

.buttonscontainer {width: 185px; background-color: #CCCCCC; border-bottom: 1px solid #CCCCCC;}

.buttons a {color: #000000;
background-color: #FFFFFF;
padding: 2px;
padding-left: 3px;
display: block;
border-left: 10px solid #FFFF00;
font-family: helvetica, verdana, arial, sans-serif;
font-size: 0.8em;
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: 1px;}

.buttons a:hover {border-left: 10px solid #999999;
text-decoration: none;
color: #000000;}


.buttons1 a {color: #FFFFFF;
background-color: #CCCCCC;
padding: 2px;
padding-left: 3px;
display: block;
border-left: 10px solid #333333;
font-family: helvetica, verdana, arial, sans-serif;
font-size: 0.8em;
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: 1px;}

.buttons1 a:hover {border-left: 10px solid #000000;
text-decoration: none;
color: #000000;}



<!--[if IE]>

/* IE Workaround for peekaboo bug */
#content {height: 1%;}

/* IE hack  - quirks mode layout REQUIRES a height here to work 
   (1% will do) if no min-height is required
	 this it where it fails in Strict Mode
*/
#wrap {height: 100%;} 

#one, #two 
{height: 100%; /* required by IE to inherit from wrap (IE Hack) above*/}

</style>
<![endif]-->

/* this particular version layout will not work in IE/Win Strict Mode 
   it can be made to work in IE strict with the use of CSS expressions
	 to calculate the required height of the 2 absolute positioned divs
*/
