/* Optional Code */

body { 	
	margin: 0; 
	padding: 0; 
	color: #ffffff; 
	background-color: #C2CEF2; 
	text-align: justify; 
	font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif; 
	font-size: 92%; 
	}
p  { 	padding: 0.9em; 
	margin: 0; 
	font-size: 1em; 
	}
h1 { padding: 0.5em; margin: 0; font-size: 1.8em; font-weight: bold; }
h2 { padding: 0.5em; margin: 0; font-size: 1em; font-weight: bold; }
ul { padding-right: 1em; text-align: left; margin-bottom: 1em; line-height: 200%; 
	}

/* Hypertext */
 
a:link { color: #80FAFF;
 	font-weight: normal;
	text-decoration: underline;
	}
a:visited { color: #330099;
	font-weight: normal;
	text-decoration: underline;
	}
.left a:visited { color: #FFFFFF;
	font-weight: normal;
	text-decoration: underline;
	}	
 
.right { font-style: italic; }
.normal { font-style: normal; }

.outbox { padding: 1em; text-align: center; }
.outbox a { display: block;
	background: #CF0095;
	border: 1px solid #ccc;
	width: 50%;
	
	margin: 0 auto;
	}

.outbox a:hover { border: 1px solid #000; }

.wrapper { min-width: 400px; }
          /* Allways good to have on full width liquid CSS layouts, 
             google "min-width IE" for JS solutions there */

/* Setup (This all looks neater when it isn't put on display!) */

.wrapper {
	width: 100%;               /* total width */
}      

.outer {
	border-left-width: 130px;  /* left column width */
	border-left-color: #660099;   /* left column colour */
	
	border-right-width: 90px; /* right column width */
	border-right-color: #AA80FF;  /* right column colour */
	
	background-color: #330099; /* center column colour */
}

.left {
	width: 130px;              /* left column width */
	margin-left: -130px;       /* _negative_ left column width */
}

.right {
	width: 90px;              /* right column width */
	margin-right: -90px;      /* _negative_ right column width */
}

.wide {
	background-color: #40005C;     /* header and footer colours */
}

/* Main code */

.outer { width: auto; border-left-style: solid; border-right-style: solid; }
.inner { margin: 0; width: 100%; }

.left { float: left; position: relative; z-index: 10; }
.right { float: left; position: relative; z-index: 11; }
.center { float: left; width: 100%; position: relative; z-index: 12; }

.wide { width: 100%; position: relative; z-index: 13; }

.clear { clear: both; }

/* Mozilla code */
.outer > .inner { border-bottom: 1px solid transparent; }
.left { margin-right: 1px; }
.right { margin-left: 1px; }
.right p { padding-left: 10px; }
.center { margin: 0 -8px 0 -2px; }