/* 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
*/

html, body {
margin: 0; padding: 0;
height: 100%;
font-family: helvetica, verdana, arial, sans-serif;
font-size: 100%;
text-align: center; /* IE quirky center */
}

#wrapper {
position: relative;
width: 90%;
min-width: 600px; /* to allow room for images and long words */
border: 0px solid black;
min-height: 80%; /* IE has height hacked in in conditional below */
margin: 0 auto; /* compliant center */
text-align: left; /* reset text alignment */
}


#header, #footer {
position: relative;
width: 90%;
min-width: 600px; /* to match wrapper div */
margin: 0 auto;
border: 0px solid #000;

}

#apbg1, #apbg2 {
position: absolute;
top: 0;
bottom: 0; /* Opera needs this! Moz would automatically assume this as default */
border-width: 0px; /* widths below */
border-style: solid;
/* height: 100%; */ /* hacked in for IE via conditional comment */
}

#apbg1 {background: #fff url(images/a1.gif) top right repeat-y; left: 0; width: 220px; border-right-width: 0px;}
#apbg1 .xbg
{
	position: absolute;
	left: 0em;
	bottom: -64px;
	background: #fff url(images/a4.gif') top left no-repeat;
	height: 64px;
	width: 160px;
}

#apbg2 {background: #fff url(images/a2.gif) top left repeat-y; right: 0; width: 190px; border-left-width: 0px;
}
#apbg2 .xbg
{
	position: absolute;
	right: 0em;
	bottom: -64px;
	background: #fff url(images/a3.gif) top right no-repeat;
	height: 64px;
	width: 210px;
}
#apbg1 p {margin: 5px; height: 30%;}/* height to show inheritance */
#apbg2 p {margin: 5px;} 
#apbg1 ul {margin: 0 10px; padding: 0; border: 0; list-style: none;}
#apbg1 li {margin: 0; padding: 3px 0;
}
/* bringing the center content into position (clear the sides)
   using a wrapper div to avoid any IE Box Model issues
	 also use this div if using expression to calculate
*/
#contentwrap {
position: relative; 
padding: 0 220px 0 190px;
}

#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: 0px solid #000;
border-right: 0px solid #000;
background: #fff;
padding: 0;
margin: 0;
/*word-wrap:break-word;*/
}

/***** General formatting ****/
 /* logo/link */
#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/shop7.png) no-repeat 0 -326px;
position: absolute;
top: 0px;
right: 0px;
}

a#toplink:hover {
background: #fff url(images/shop7.png) 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;}
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;}

#apbg2 ul {margin: 0 10px; padding: 0; border: 0; list-style: none;}
#apbg2 li {margin: 0; padding: 3px 0;
}
p#tagCloud {
padding : 5px 0;
}
p#tagCloud a.size1 {
font-family : Verdana, Tahoma, Arial;
font-size : 0.88em;
color : #CACACA;
}
p#tagCloud a.size2 {
font-size : 0.90em;
font-weight : bold;
color : #408080;
}
p#tagCloud a.size3 {
font-family : Kartika;
font-size : 1em;
text-transform : uppercase;
color : #99cc00;
}
p#tagCloud a.size4 {
font-size : 1.1em;
font-family : Verdana, Tahoma, Arial;
color : #9999ff;
}
p#tagCloud a.size5 {
font-size : 1.2em;
font-family : Verdana, Tahoma, Arial;
color : #cec9cf;
}
p#tagCloud a.size6 {
font-family : Verdana, Tahoma, Arial;
font-size : 1.1em;
color : #ff0080;
}
p#tagCloud a.size7 {
font-size : 1.0em;
font-family : Verdana, Tahoma, Arial;
color : #a5a5a5;
}
p#tagCloud a.size8 {
font-size : 0.9em;
font-family : Verdana, Tahoma, Arial;
color : #009999;
}
p#tagCloud a.size9 {
font-family : Eras Bold ITC;
font-size : 1.0em;
color : #00e6e6;
}
p#tagCloud a.size10 {
font-size : 1.1em;
color : #ff8040;
}
p#tagCloud a:hover {
text-decoration : none;
}
<!--[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
*/
}
#wrapper {height: 100%;} 
}
#apbg1, #apbg2 
{
height: 100%; 
/* required by IE to inherit from wrapper (IE Hack) above*/
}

#Proceed DIV { 
font-weight : bold; 
font-size : 11px; 
} 
#Proceed H1 { 
display : inline; 
font-size : 11px; 
} 
#Proceed .left { 
padding-right : 0; 
padding-left : 12px; 
background-image : url(images/bgleftBL.gif); 
padding-bottom : 0; 
padding-top : 22px; 
background-repeat : no-repeat; 
} 
#Proceed .right { 
padding-right : 12px; 
background-position : right top; 
padding-left : 8px; 
font-size : 11px; 
background-image : url(images/bgrightBL.gif); 
padding-bottom : 3px; 
padding-top : 0; 
background-repeat : no-repeat; 
} 
#Proceed .right2 { 
padding-right : 12px; 
background-position : right top; 
padding-left : 8px; 
font-size : 11px; 
background-image : url(images/bgright3BL.gif); 
padding-bottom : 3px; 
padding-top : 0; 
background-repeat : no-repeat; 
} 
<![endif]-->
}