body {
	color:#000; background:#FEF3DA;
	padding:0;margin:0;
	font-size:62.5%;/* Makes ems into pixels - 1em = 10px */
}


html { font-size: 100%; /* IE hack */ }

.clearfix:after {
	content:'.';
	display:block;
	height:1px;
	clear:both;
}

* html .clearfix {
	height:1%;
}
/* ------------------------------------------------------------------

   Basic font sizing and vertical margins

   I'd normally use containing elements to set horizontal margins as these
   can be applied to entire blocks.

   The sizes are very much based on the standard typography scale that has been
   used in print for the last 400 years.
   
   Read a nice article about it here:
   http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography_part_4/

   I attempt to set the leading and margins in a way that maintains the rhythm of the text.
   Excellent explanation here:
   http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/

*/
h1, h2, h3, h4, h5, h6 {
	margin:0;padding:0;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", serif;
	color:#923408;
}

h1 {
	font-size:2.4em;
	margin:1.5em 0 0.75em 0;
	line-height:0.75;
}

h2 {
	font-size:2.1em;
	margin:1.72em 0 0.86em 0;
	line-height:0.857;
}

h3 {
	font-size:1.8em;
	margin:2em 0 1em 0;
	line-height:1;
}

h4 {
	font-size:1.6em;
	margin:2.25em 0 1.125em 0;
	line-height:1.125;
}

h5 {
	font-size:1.4em;
	margin:2.57em 0 1.285em 0;
	line-height:1.285;
}

h6 {
	font-size:1.3em;
	margin:2.768em 0 1.384615em 0;
	line-height:1.384615;
}

p, blockquote, pre, li, dt, dd, th, td, label, input, select, button, textarea {
	font-size:1.1em;
	font-family:verdana, helvetica, sans-serif;
}

p {
	line-height:1.63;
	margin:1.63em 0;
}

blockquote {
	margin:1.2em 2.1em;
	font-style:italic;
}

tt {
	font-family: "Courier New", monospace;
	font-size:1.1em;
}

/* Correct font size of nested block elements */
li li, blockquote p, li p, blockquote tt { font-size:1em; }

li p {
	margin:0;
}
/* ------------------------------------------------------------------
   Links

   Remove underline from links as it makes them less readable
   Accessibility guidelines suggest links should be identifiable by 
   something other than colour. You could make them bold or use a
   border instead of an underline. None of these solutions are ideal.

   Here I've elected to use a border, but this causes some weird text
   jumping on IE in certain float situations.
*/

a:link, a:visited, a:active {
	color:blue;
	text-decoration:none;
	border-bottom:1px solid blue;
}

a:hover {
	color:red;
	border-color:red;
}

h1 a:link, h1 a:visited, h1 a:active,
h2 a:link, h2 a:visited, h2 a:active{
	color:#923408;;
	text-decoration:none;
	border:0;
}
h1 a:hover,
h2 a:hover {
	color:#000;
}
/* Remove borders from image links */
a img {	border:0; }


/* ------------------------------------------------------------------
   Ordered & Unordered Lists
*/
ul, ol {
	margin:0 0 1.63em 0; padding:0;
}

ul ul, ol ol {
	margin:0;
}

ul {
	padding-left:2em;
}
ol {
	padding-left:2.5em;
}

li {
	line-height:1.63;
	margin:0; padding:0;
}

/* ------------------------------------------------------------------
   Definition lists 
*/
dl {
	margin:1.63em 0; padding:0;
	line-height:1.63;
}

dl dt {
	font-weight:bold;
	margin:0; padding:0;
}

dl dd {
	margin:0 0 0 2.1em;padding:0;
}

/* ------------------------------------------------------------------
   Forms

   I don't tend to use fieldsets and legends. They are pretty quirky 
   when it comes to applying CSS to them and I'm not sure I believe 
   they have many benefits for accessibility or usability. More useful
   is to have properly labelled fields.

   Form accessibility is often broken because tables are used for layout.
   Assuming you don't use tables and you do label inputs correctly
   this should all be perfectly accessible.
*/

label {
	cursor:pointer;
}



form div {
	margin:1.63em 0;
}

/* 
For text fields and selects the label is floated left
and set to a particular width. This means all the fields
line up along their left edge.

You can also just switch the text align of the label to
'right' if you want the mirror style layout.

The line height gives the vertical alignment between labels
and their fields.

*/
form div.text label,
form div.select label,
form div.textarea label {
	width:8em;
	float:left;	
	line-height:1.63;
}

form div.text input:focus,
form select:focus,
form textarea:focus {
	border:2px solid orange !important;
}

form div.controls input,
form div.controls button {
	margin:0; padding:0;
	/* Fix button width in IE */
	width:auto;
	overflow:visible;
}

form div.error label {
	color:red;
}

form div.error input,
form div.error select,
form div.error textarea {
	border:2px solid red;
}

/* ------------------------------------------------------------------
   Tables 
*/

table {
	border-collapse:collapse;
	margin:1.2em 0;
}

td, th {
	border:1px solid #808080;
	padding:0.25em 0.15em;
}


/* ------------------------------------------------------------------
   More specific stuff
*/

div#wrapper {
	margin:10px auto;padding:0;
	width:65.5em;
	border:1px solid #000;
}
/* Masthead */

div#masthead {
	background-color:#923408;
	color:#fff;
}
div#masthead p {
	font-size:2.4em;
	margin:0; padding: 10px;
	line-height:0.75;
	font-family:Georgia, "Times New Roman", serif;
}

div#masthead p em {
	display:block;
	font-weight:normal;
	font-size:60%;
	margin-top:0.5em;
}


/* Breadcrumbs */
ul.breadcrumbs {
	margin:0;padding:5px;
	border-bottom:1px solid #000;
	background-color:#FED170;
}

ul.breadcrumbs li {
	display:inline;
}

ul.breadcrumbs li a:link,
ul.breadcrumbs li a:visited,
ul.breadcrumbs li a:active {
	border:0;
	color:#923408;
}

ul.breadcrumbs li a:hover {
	background-color:#BE5028;
	color:#fff;
}

div#middle-wrapper {
	background:#FED170 url(mid_wrapper_bg.png) 15em 0 repeat-y;
}

/* Content */

div.document {
	width:47em;
	float:left;
	padding:1.5em 1em 1em 1em;
}

div.document h1 {
	margin-top:0;
}

div.document ul.section_details {
	list-style-type:none;
	margin:0; padding:0;
}

div.document ul.section_details li {
	margin:1em 0;
}

div.document ul.section_details li a {
	font-weight:bold;
}
/* I'm sure docutils should convert headings in nested sections to H2 or whatever
   but this doesn't seem to be happening. */
div.section h1 {
	font-size:2.1em;
	margin:1.72em 0 0.56em 0; padding: 0 0 0.3em 0;
	line-height:0.857;
	border-bottom:1px solid #ccc;
}

div.section h2 {
	font-size:1.8em;
	margin:1.72em 0 1em 0;
	line-height:1;
	font-style:italic;
	color:#923408;
}

/* Sidebar */

div#sidebar {
	width:15em;
	float:left;
}

div.menu {
	margin-bottom:1em;
}

div.menu h3 {
	margin:0; padding:0.5em;
	font-size:1.3em;
	background-color:#923408;
	color:#fff;
}

div.menu ul {
	padding:0;margin:0;
}

div.menu ul li {
	list-style-type:none;
	padding:0; margin:0;
	display:inline;
}

/*
#BE5028 - Light Red
#923408 - Dark Red
*/
div.menu ul li a:link,
div.menu ul li a:visited,
div.menu ul li a:active {
	display:block;
	padding:0.3em 0.5em; margin:0;
	border:0;
	color:#923408;
}

div.menu ul li a:hover {
	background-color:#BE5028;
	color:#fff;
}

/* Footer */
div#footer {
	clear:both;
	padding:0 0.5em;margin:0;
	border-top:1px solid #000;
	background-color:#DCDCDC;
}

p.page-meta {
	font-size:0.9em;
	font-style:italic;
	padding:0.5em 0; margin:0;
}


/* Tables of contents for pages */

div.contents p.topic-title {
	visibility:hidden;
	height:0;margin:0;padding:0;
	overflow:hidden;
}