/* CSS adapted from http://leftjustified.net/site-in-an-hour/ - cheers!  */

/** Global **/
/* technique explained @ http://leftjustified.net/journal/2004/10/19/global-ws-reset/  */
* {
    margin: 0;
    padding: 0;
}

/* setting the base font size to 90% allows even scaling by the user while keeping font-size 'xx-small' legible */
body, p, td {
	background: #FFF;
	font-size: 90%;
	font-family: Verdana, Arial, Helvetica, sans-serif;

}

/** Layout **/

/********
the #outer div is the key element to the flexibility of this design.
By setting maximum and minimum widths in 'em', whilst the width is set in '%', 
we effectively create the perfect combination of 'fluid' and 'elastic' layouts.
Javscript is used to add support for min/max width in IE

Any elements inside #outer that require a set width or horizontal margins/padding use the '%' unit for that value.
This means that regardless of what causes the #outer div to expand (font size or screen size), 
the content will seemlessly re-flow to fill that space.
*********/
#wrapper {
	margin: 0 auto;
	width: 80%;
   min-width: 30em;
   max-width: 50em;
	border: 10px solid #fff;
	border-width: 0 10px;
	background: #fff;
}

/** Header **/
#header {
	border: 1px solid #000;
	margin-bottom: 1em;
	background: #25408F; 
	height: 94px;
}

/***
Containers should be named according to what they contain. not where they sit in the layout.
To make identifying each column more simple, I have named them according to their position.
***/
#content {
	width: 100%;
}
#nav {
	display: none;
}
#boxes {
	display: none;
}
#tools {
	display: none;
}
#searchBox {
	display: none;
}
#loginBox {
	display: none;
}
/** Footer **/
#footer {
	display: none;
}

/** For hiding accessibility stuff **/
.off-left {
	display: none;
}


.printonly {
        display:block;
        visibility:visible;
}
.noprint {
        display:none;
        visibility:hidden;
}