/* CSS for DJCLARK.CO.UK * David.Clark@orditur-telas.com - February 2001
 
 *	Style Sheet optimised for Opera4, Lynx. compromised for NS 6, IE5.5

 *	DIV structure
 *	.header is white san-serif on green - Warwick English Dept house style
 *	.intro ranges across top of document (width limited for readability on wide window)
 *	.box is a container for the main part of the page [#1]
 *	.sidebar is absolute width and always set full left
 *		ideally it should be floated and fixed to remain visible when scrolled [#2]
 *	.contrib forms a column floated to the right [#3]
 *	.main is a container to position the background image [#1][#4]
 *		the margin is set to clear .sidebar
 * .text a central column within main
 *		the width limits for readability will not apply to PRE.poem

 * [1] .box, .main are necessary to overcome browser incompatibilities:
 * [2] position: fixed; float: left; only works with Opera
 *		for Opera do NOT specify top or left, placement will then adjust to depth of intro.
 *		with IE5 other divs dissapear unless loaded first
 *		NS4 does not set margins correctly around floated elememts
 * [3] NS4 ignores float: right; if margins are set 
 * [4] ideally this should be positioned within body, but NS4 ignores position

 *	background image and colours are set by an embedded CSS
 *	utopia/univers may be available on unix systems
 *	Georgia is a ms web font with similar set and x height to Utopia Black.
 *
 *	QUOTES
 *	we prefer (contra Hart's Rules) “ ” ‘ ’
 * body {quotes: '\2018' '\2019' '\201C' '\201D'}
 *	q:before {content: open-quote;}
 *	q:after {content: close-quote;}
 *	BUT <Q></Q> seems to be ignored by IE5 and crashes NS4 so do not use
 */

body {background-color: #256; color: #FFF;
 font-family: "Utopia Bold","Utopia","utopia","Georgia",serif;
 margin: 0em; padding: 0em; border-style: none;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: 140px 4.5em;}

A:link {color: #FFC; background-color: transparent; text-decoration: none;}
A:active {color: #FFF; background-color: #556B2F; text-decoration: none;}
A:visited {color: #DEB887; background-color: transparent; text-decoration: none;}
A:link:hover, A:visited:hover {font-weight: bold;}

.title {font-size: 1.6em;
 background: #100;
 color: #f77;
 text-shadow: 0 0 0.5em #ff0000;}

.poem {
 white-space: pre;
 font-family: "Utopia Bold","Utopia","utopia","Georgia",serif;
 font-size: 1em;}

.sc {font-variant: small-caps;}
.sd {font-style: italic; margin-left: 2em;}		/* stage direction */

div {margin: 0em; padding: 0em; border-style: none;} 

div.header {background-color: #556B2F; color: #ffffff;
 font-family: "Univers","Trebuchet MS",sans-serif;
 font-weight: bold;
 font-size: 1em;
 text-align: center;
 padding-top: .3em;}

div.intro {
 max-width: 50em;
 padding: .5em 0em .5em .5em;
 margin-left: 160px; 
 margin-bottom: 0em;}

div.box {
position: relative;}

div.sidebar {
 position: fixed;										/* only works with OPERA 4 */
/* position: absolute;	left: 0px; top: 0px;		alternative for NS4, IE5 */
 float: left;
 padding-left: .5em;
 padding-right: .5em;
 width: 140px;}

div.main {
/* position: relative; left: 0em; top: 0em; */
 margin-left: 160px; 
 margin-right: 0em;
 padding-top: .5em;
 background-image: url(none);		/* nonsense to keep NS4 happy */ 
 background-repeat: no-repeat;
 background-attachment: fixed;}

div.contrib {
 border: solid thin #006633;
 float: right; 
 width: 35%;
 padding-left: .5em;
 padding-right: .5em;
 min-width: 16em;
 max-width: 32em;
 font-family: "Lucida Sans Unicode","Univers",univers,sans-serif;}

div.text {
 min-width: 23em;
 max-width: 35em;
 padding-left: .5em;
 padding-right: .5em}

h1 {									/* short title */
 text-align: center;
 margin: 0em 0em .5em 0em;
 padding: 0em;}

h2 {									/* long title, column head chapter */
 margin: .75em 0em .25em 0em;
 padding: 0em;}

h3 {									/* in column chapter, section, poem title, */
 margin: 1em 0em .2em 0em;
 padding: 0em;}

h4,h5,h6 {							/* sub-titles */
 margin: .5em 0em .2em 0em;
 padding: 0em;}

h5.s, h6.s{							/* stanza numbering */
 font-size: .9em;
 margin: .5em 0em .0em 9em;
 padding: .25em;
 font-weight: normal;
 font-style: normal;}

pre {									/* set margin and padding to match p */
 margin: 0em 0em .25em 0em;
 padding-left: .25em;
 overflow: auto;}

code {
 font-family: VTBulletin,"Lucida Console",monospace;
 font-size: 1em;}

p {
 margin: 0em;
 padding: .25em;
 border-style: none;}

p.list {
 margin: 0em 0em .2em 0em;
 padding: 0em;}

p.small {
 margin: .25em 0em .25em 0em;
 padding: 0em;
 font-size: .9em;}

p.fn {								/* footnote */
 font-size: .9em;
 margin-left: 2em;
 margin-right: 2em;
 padding-bottom: 1em;}

p.r {
 text-align: right;
 margin-right: 5em;}

hr.section {
 margin-left: 3em;
 width: 10em;
 text-align: left;}

hr.ruleoff {
 clear: both;
 width: 100%;
 height: 5px;
 margin-left: 140px;
 text-align: left}

img {border-style: none;}

img.otval {
 float: right;}

img.topright {
 float: right;
 padding-right: .5em}

img.right {
 float: right;}

.ot {
 background-color: #225566; color: #FFFFFF;
 background-image: url(IMAGES/py225566.jpeg);
 margin: 0em inherit;
 border: 0px inherit;
 padding: .3em 0em 2.2em;}
div.otlogo {
 margin-top: 27px; padding-top: 0px;}
p.otpara {
 font-family: "Lucida Sans Unicode","Lucida Sans","Univers","Trebuchet MS",sans-serif;
 font-size: 1em;}
div.otbox {
 font-family: "Utopia Black","Utopia Bold","Utopia","utopia","Georgia",serif;
 font-weight: 800; font-size: 1.7em;line-height: 1em;
 margin: 0px 0em 0px;
 padding: 0px 0em 0px;
 text-align: center;float: right;
 position: relative; z-index: +1;
 width: 10em; height: 45px;}
img.otimg {
 position: absolute; z-index: -1;
 top: -27px; left: +4em;}
span.otnav{display: none;}