@charset "utf-8";
/*-----------------------------------------
Cascading style sheet for the slrn web site.
--Andrew Strong. 
------------------------------------------*/        
body{color: black; background: #676767;/*#cccccc;*/
font-size:100%;font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
margin:0;
padding:0;
}
/*----------------------------------------
Wrapper div set at 98% width and maximum
width of 70 ems.
-----------------------------------------*/
#wrapper{
width:98%;
max-width: 70em;
margin: .5em auto;
color: black; background: white;
padding:0em;
border: 2px solid black; 
}
/*-------------------------------------- 
Header div.
--------------------------------------*/
#header{
padding: 1.5em;
border-bottom: 1px solid black; 
color: black; background: white;
/* The 'overflow' setting below stops images 
breaking the surroundiing divs with huge screens*/
overflow:hidden;
}
#header p{
font-size:100%;
font-style:italic;
color: black; background: white;
margin: .25em 0em 0em 0em;
padding: 0;
}
/* For the Sourceforge image */
#header img {
border: 0;
float: right;
}

/*------------------------------------------- 
Main site navigation at left
--------------------------------------------*/
#nav{
color: black; background: white;
float: left;
width: 10em;
margin: .75em .25em;
padding: .25em;
}
#nav ul {
margin:1em 0em .5em .25em;
padding:0;
}
#nav li {
list-style: none;
margin: 0;
padding: .4em .25em;
border-bottom: 1px solid black;
}
#nav li a:link {text-decoration:none; color:#00c; background: white;}
#nav li a:visited {text-decoration:none; color:#551a8b;background: white;}
#nav li a:active {text-decoration:none; color:#f00;background: white;}
#nav li a:hover {text-decoration:none; color: #f00; background: white;}
#nav img{
display: block;
margin: 3em auto;
text-align: center; 
}
/*------------------------------------
Main content div rules.
------------------------------------*/
#content {
color: black; background: white;
margin-left:12em;
border-left: 1px solid black; 
padding: 1em 2em .5em 1em;
/*text-align:justify;*/
line-height:1.4;
}
/*---------------------------------------- 
Styles for the 'news' box 
----------------------------------------*/
#news {
color: black; background: white;
border: 1px dashed red;
padding:.5em .75em;
font-size:100%;
margin-bottom: .75em;
}
#news p {
padding: 0em;
margin: 0em;
text-align:justify;
}
/*---------------------------------------- 
Styles for the footer, 'Updated' section 
and the buttons.
----------------------------------------*/
#footer {
color: black; background: white;
clear: both;
/* The 'overflow' setting below stops images 
breaking the surrounding divs with huge screens*/
overflow:hidden;
margin: 0;
padding:.25em;
border-top: 1px solid black; 
}
#footer p {
margin:0;
padding:0em 0em .3em .25em;
font-size:95%;
line-height:1.3;
font-style:italic;
}
#footer ul{
float:right;
margin:.25em 0em 0em 0em;
padding:.25em;
}
#footer ul li {
display:inline;
padding: 0em .25em;
}
/*------------------------------------------
 General rules for links, headings an images.
 Could do with some cleaning up.
 ------------------------------------------*/
a:link {color:#00c; background: white;}
a:visited {color:#551a8b;background: white;}
a:active {color:#f00;background: white;}
a:hover {color: #f00;background: white;}
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
color: black; background: white;
margin:0;
padding:0;
}
h1 {font-size: 160%;}
h2 {font-size: 130%;}
h3 {font-size: 120%;}
h4 {font-size: 115%;}
h5 {font-size: 110%;}
h6 {font-size: 105%;}
img { border:0;}
/*-----------------------------------
Styling for the 'pre' code boxes and
code snippets within text.
------------------------------------*/
pre {
    padding: 1em;
    border: 1px dashed silver;
    color: black;
    background-color: #f9f9f9;
    overflow: auto;
	 font-family:"Courier New", Courier, monospace;
	 font-size:95%;
}
code {
   margin:0;
   padding:0;
	font-family:"Courier New", Courier, monospace;
	font-size:100%;
}
/*--------------------------
Some extra 'list' rules'
----------------------------*/
ol { list-style-type: lower-roman;}
ul { 
list-style-type: circle;
padding: 0em; 
margin: .25em .5em .75em 1.25em;
}
/*---------------------------
Blockquote styles
-----------------------------*/
blockquote {
	padding-left: .5em;
	border-left: 1px dotted #6f9f6f;
	background:none;
	text-align: justify;
	}
/*---------------------------
Table Rules from andrews-corner.org
------------------------------*/

table {
  margin: 0;
  color:#000000;
  background: #f9f9f9;
  border: 1px #aaa solid;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  font-size: 95%;
  }
table a:link {color:#00c; background: #f9f9f9;}
table a:visited {color:#551a8b;background:#f9f9f9;}
table a:active {color:#f00;background:#f9f9f9;}


th, td{
  border: 1px #aaa solid;
  padding: 0.5em;
}

th {
  color:#000000;
  background: #f2f2f2;
  text-align: center;
  padding: 0.5em;
}

caption {
	padding: 0em 0.6em 0.8em 0em;
	font-size: 1em;
   font-weight: bold;
	text-align: left;
	margin-left: auto;
   margin-right: auto;
   color:black; background:transparent;
}
tfoot td {font-style:italic;}

/*-------------------------------------- 
Below are the painful extra rules I had to write
to cater for the screenshot gallery. --Andrew
--------------------------------------*/

/*The large screenshot image pages needed a slightly 
modified header: border-bottom is gone here.*/

#header-screen{
padding: 1.5em;
color: black; background: white;
/* The 'overflow' setting below stops images 
breaking the surrounding divs with huge screens*/
overflow:hidden;
}
/* For the smaller print with the page URL*/
#header-screen p{
font-size:100%;
font-style:italic;
color: black; background: white;
margin: .25em 0em 0em 0em;
padding: 0;
}
/* For the Sourceforge image */
#header-screen img {
border: 0;
float: right;
}

/* Rules for the thumbnail images. */

#screenshots {
	margin:0em;
	padding:0em;	
}

#screenshots li {
	float:left;
	display:inline;
	list-style:none;
	margin:.5em;
	padding: .5em .5em;
	width: 200px; 
	height: 150px;
}

#screenshots li p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size:90%;
	font-style:italic;
}

/* Rules for the main screenshot image */
img.screenshot {display: block; margin: 0 auto; padding-top: .5em;}
/* Rules for the link back to the thumbnails page */
p.navigate {font-size:100%; font-style:italic; padding-left: .5em}