/* 
	zois.css - A suggested style sheet for general ZOIS use.
	
	See Zen Garden (http://www.cssengarden.com) for more artistic
	CSS and W3 (www.w3.org/Style/CSS) for the nitty gritty.

	This zois.css is destined for external use with the www.zois.co.uk
	web-site.

	$Id: zois.css,v 1.29 2011/09/22 16:13:49 sullivan Exp $

	IE 6 Hacks: http://www.positioniseverything.net
*/

html {
    background: snow;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px; 
/*    max-width: 1375px; */	/* three column */
    max-width: 950px;		/* two column	*/
    margin-left: auto;
    margin-right: auto
} /* html */

/* 
FontChoice

A note on fonts. The DejaVu family is an "improved" Bitstream Vera, and
is not a million miles away from Georgia/Verdana (serif and sans-serif
fonts). All look OK on a screen at small point sizes. Bitstream
Vera is common to all platforms where DejaVu is found on more modern
Linux/*BSD. Georgia is in Microsoft's sortof-open standard "Core fonts
for the Web", but it needs to be downloaded and isn't available on earlier
platforms. Verdana is similarly afflicted. CSS font choices are thus:
* "DejaVu Serif", "Bitstream Vera Serif", Georgia, serif
* "DejaVu Sans", "Bitstream Vera Sans", Verdana, sans-serif
* Courier, mon-space

*/

body {
    font: 9pt "DejaVu Serif", "Bitstream Vera Serif", Georgia, serif;
    text-align: justify
} /* body */

/* Content sees the bulk of the article. We limit its width so it isn't
   smeared over a very side screen	*/
#content {
    float: left;
    display:inline;		/* hack required for IE6	*/
    max-width: 520px;
    margin-right: 1%;
    margin-left: 10%;
    padding-left: 0px;
    padding-right: 2px
} /* content */

/* Blockquote class="aside" in content gets an 'aside', which in this
   instance is designed to be a margin note. */
#content blockquote.aside {
    float: left;
    width: 63px;
    margin-left: -13%;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 2px;
    font-size: 7pt;
    text-align: left;
    color: darkblue
} /* content blockquote aside */

/* Blockquote class="important" in content gets noticable strap. We
    change colours, and put it in a box, but leave font and stuff alone,
    it's expected to be festooned with strong and em tags. */
#content blockquote.important {
    border-style: dotted;
    padding: 10px;
    background: ivory;
    border-color: grey;
    border-width: 1px;
    background: ivory;
    color: darkred
} /* content blockquote aside */


/* Navigation is a bunch of anciliary text that should float to the right
   as a separate column is there's space, and stay at the bottom (or
   wherever it's put) if not.	*/
#navigation {
    float: right;
    display:inline;		/* hack required for IE6	*/
    margin-top: 15px;
    margin-right: 2%;
    margin-left: 2%;
    max-width: 245px;
    padding: 10px;
    background: ivory;
    border-style: dotted;
    border-color: grey;
    border-width: 1px
} /* #navigation */

#navigation img {
    float: left;
    padding: 2px
} /* img */


p { 				/* largely inherited */
} /* p */

/* <p class=first> Gets a hanging paragraph */
p.first:first-letter {
    line-height: 0.8;		/* req. Safari, IE8, Opera	*/
    font-size: 300%;
    letter-spacing: 1px;
    padding: 2px;
    float: left
} /* hanging paragraph sillyness */

code {
    font: 10pt "Courier", monospace;
} /* code */

h1, h2, h3, h4, h5 {
    font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, sans-serif;
    font-weight: bold;
    color: #7D775C;             /* another darkish brown, not so dark   */
    letter-spacing: 1px;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: left
} /* standard header stuff */

h1 {				/* Big shouty, site header	*/
    font-style: italic;
    font-size: 20pt;
    text-align: center
} /* h1 */

h2 {				/* Page header	*/
    font-size: 18pt;
} /* h2 */

h3 {				/* Section header	*/
    font-size: 12pt;
    margin-bottom: 0px
} /* h3 */

h4, h5 {
    font-size: 9pt;
    margin-bottom: 0px;
    margin-top: 10px
} /* h4 */

/* Link colours. If there's something that narks me is that folk CSS
 * obvious links out of existence. The colours are left as close to the
 * 'normal' blue/purple ones as possible. MS.	*/

a {
} /* a */

a:link { 
    text-decoration: underline; 
    color: blue
} /* a:link */

a:visited { 
    text-decoration: underline; 
    color: purple
} /* a:visited */

/* Mouse-over ... As few surprises as possible please ... */
a:hover, a:active { 
    text-decoration: none
} /* a:hover */ 

dt {
    font-style: italic;
    color: #50505C          /* another darkish brown, not so dark */
} /* dt */

pre.example {
    margin-right: auto;
    margin-left: auto;
    font-size: 10px;  /* 80 column code fits in 92% of 520px */
    width: 92%;
    padding: 2%;
    background: LemonChiffon;
    border-style: dotted;
    border-color: grey;
    border-width: 1px;
    overflow: auto
} /* example */

table {
    font: 9pt "DejaVu Serif", "Bitstream Vera Serif", Georgia, serif;
    text-align: left        /* this is supposed to be inherited (from
                             * body, but isn't */
} /* table */

td {
    padding-right: 3px;
    padding-left: 3px
} /* table */

.right_floater {
    float: right;
    margin-left: 7px
} /* .right_floater */

.left_floater {
    float: left;
    margin-right: 7px
} /* .left_floater */

/* cellspacing="0" &c.	*/
table.right_floater {
} /* table.right_floater */

/* Tables associated with the Jobcentre Plus Mirror work	*/
table.jcpm {
    width: 100%
} /* table.jcpm */

table.jcpm_center {
    margin-left: auto;
    margin-right: auto
} /* table.jcpm */

tr.jcpm_head {
    background-color: yellow
} /* th.jcpm */

tr.jcpm_body {
    background-color: aqua
} /* th.jcpm */

tr.jcpm_body_odd {
    background-color: #00EEEE 	/* a slightly darker 'aqua'	*/
} /* th.jcpm */

/* optional stuff is dynamically manipulated by Javascript in
 * conjunction with a dynamically assigned tag	*/
.optional {
    display: none
} /* optional */

/* For a new iteration of the CV */
table.cv {
    width: 100%;
    background-color: #F0F0D0;
    border-style: solid solid none solid;
    text-align: justify;
    border-width: thin
} /* table.cv */

.cv_body {
    border-style: none none solid none; 
    border-width: thin
}

.cv_left {
    width: 150px;
    border-style: none none solid none; 
    border-width: thin;
    padding-right: 7px
}