/* **********************
 * layout set-up *
 ************************ */

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

.wrapper { border: 1px solid black; margin: 0 -1px; }
          /* this is a border with marginal compensation to stop scroll bars */

/* 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: black;   /* left column colour */
	
	border-right-width: 130px; /* right column width */
	border-right-color: black;  /* right column colour */
	
	background-color: black /* center column colour */
}

.left {
	width: 130px;              /* left column width */
	margin-left: -130px;       /* _negative_ left column width */
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 130px;
}

.right {
	width: 130px;              /* right column width */
	margin-right: -130px;      /* _negative_ right column width */
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 130px;
}

.wide {
	background-color: black;    /* header and footer colours */
}

/* Main code */

.outer { width: auto; border-left-style: solid; border-right-style: solid; }
.inner { 
	margin: 0;
	width: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;
	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: 0; }
.left { margin-right: 1px; }
.right { margin-left: 1px; }
.center { margin: 0 -3px 0 -2px; }

/* End layout */