/*-----------------------------------------------------------------*/
/* WCC Planning Portal
/*-----------------------------------------------------------------*/
/* Winchester City Council
/* Governance Group
/* Information Management and Technology
/* Copyright (c) Winchester City Council 2008.  All rights reserved.
/* Unathorised distribution or reproduction of this program, 
/* or any portion of it, may result in severe civil and criminal penalties, 
/* and will be prosecuted to the maximum extent possible under the law.
/*-----------------------------------------------------------------*/
/* Cascading Style Sheet for Layout Framework
/*-----------------------------------------------------------------*/
html { 
	height: 100%; 
	margin-bottom: 1px; 
}

body {
    margin: 0 10px 0 10px;
	padding: 0 0 .3em 0;
}

/*div {
	font-size:1em;
	line-height: 1.7em;	
}*/

#main {
	min-width: 770px;
  	max-width: 980px;
  	padding:0.3em;
  	margin:0.3em;
}

/*
#main {
  text-align: left;
  width: expression(  (d = document)
                   && (fs = d.getElementById('em').offsetWidth)
                   && (po = 2 * fs)
                   && (bo = 3)
                   && (min = 50 * fs)
                   && (max = 100 * fs)
                   && (cw = d.body.clientWidth)
                   && (px = 'px')
                   && (cw - po >= max + bo ? max + px : cw - po <= min + bo ? min + px : 'auto')
                   );
}
*/

#header_em {
  width: 1em;
  height: 0;
  overflow: hidden;
}

#body_em {
  width: 1em;
  height: 0;
  overflow: hidden;
}

#footer_em {
  width: 1em;
  height: 0;
  overflow: hidden;
}


/*

Min- and max-width implementation for Windows Internet Explorer

About the weird dynamic property expression

fs = font-size (from the #em element)
min = min-width
max = max-width
po = padding offset (from the body)
bo = border offset (from the #main container, IE 6 seems to need one additional px)
cw = client width
px = pixel

Quriks-mode vs. standards-mode

This expression is the result of extensive trial and error.
I quess reading widths is equal in quirks- and standards-mode
(in this demo), but setting them is different. I don't want
to account for those differences, because they are very little.
*/
body {
	font-family : Arial, Verdana, Helvetica, sans-serif;
  	font-size: 75.01%; 	/* 12px [1] */
  	line-height: 1.5em; /* 18px [2] */
}

#headerWrapper {
        border: 0px;
        margin: 0px;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
}

#bodyWrapper {
        border: 0px;
        margin: 0px;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
}

#footerWrapper {
        border: 0px;
        margin: 0px;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
}

.show-all .columns {
  padding: 0 15em;
}

.hide-left .columns {
  padding: 0 15em 0 0;
}

.hide-right .columns {
  padding: 0 0 0 15em;
}

.show-all #headerColumns {
  padding: 0 15em 0 0;
}

.hide-left #headerColumns {
  padding: 0 15em 0 0;
}

.hide-right #headerColumns {
  padding: 0 0 0 15em;
}

.show-all #bodyColumns {
  padding: 0 15em 0 0;
}

.hide-left #bodyColumns {
  padding: 0 15em 0 0;
}

.hide-right #bodyColumns {
  padding: 0 0 0 15em;
}

.show-all #footerColumns {
  padding: 0 15em 0 0;
}

.hide-left #footerColumns {
  padding: 0 15em 0 0;
}

.hide-right #footerColumns {
  padding: 0 0 0 15em;
}

.cols-wrapper {
	width: 100%;
  	border: 1px;
  	margin: 0 -1px;
}

.cols-wrapper[class] {
  padding-bottom: 0.1px; /* [4] */
}

.hide-left .cols-wrapper {
  border-left: none;
  margin-left: 0;
}

.hide-right .cols-wrapper {
  border-right: none;
  margin-right: 0;
}

.hide-both .cols-wrapper {
  /*border-style: none none solid none;*/
  margin: 0;
}

.float-wrapper {
  float: left;
  width: 100%;
  position: relative;
  z-index: 0;
}
.float-wrapper[class] { /* [2] */
  margin-right: -1px;
}

#header-col-a {
  float: right;
  width: 100%;
}
#header-col-a[id] { /* [2] */
  margin-left: -1px;
}
#header-col-b {
  float: left;
  margin-left: -15em;
  z-index: 10; /* [3] */
}
#header-col-b[id] { /* [2] */
  margin-right: 1px;
}

#header-col-c {
  float: right;
  margin-right: -15em;
  z-index: 11; /* [3] */
}

#header-col-c[id] { /* [2] */
  margin-left: 1px;
}

#body-col-a {
  float: right;
  width: 100%;
}
#body-col-a[id] { /* [2] */
  margin-left: -1px;
}
#body-col-b {
  float: left;
  margin-left: -15em;
  z-index: 10; /* [3] */
}
#body-col-b[id] { /* [2] */
  margin-right: 1px;
}

#body-col-c {
  float: right;
  margin-right: -15em;
  z-index: 11; /* [3] */
}

#body-col-c[id] { /* [2] */
  margin-left: 1px;
}

#footer-col-a {
  float: right;
  width: 100%;
}
#footer-col-a[id] { /* [2] */
  margin-left: -1px;
}
#footer-col-b {
  float: left;
  margin-left: -15em;
  z-index: 10; /* [3] */
}
#footer-col-b[id] { /* [2] */
  margin-right: 1px;
}

#footer-col-c {
  float: right;
  margin-right: -15em;
  z-index: 11; /* [3] */
}

#footer-col-c[id] { /* [2] */
  margin-left: 1px;
}


.sidecol {
  position: relative;
  width: 15em;
  overflow: hidden;
}

/*.sidecol ul {
  padding: 0 0 0 1.5em;
}*/


.box,
.main-content {
  margin: 0px;
  padding: 2px;
}


.clear {
  clear: both;
}

/* header section */
.blockWidth {
	display: block;
    position: relative;
}