html
{
	background:#e6e6e6 url(/ss2/styles/shiny/images/backdrop.gif) top left repeat-x;
	padding:0;
	margin:0;
	line-height:1.25em;
}
body
{
	background:url(/ss2/styles/shiny/images/whitedrop.png) top left repeat-y;
	width:766px;
	padding:0 17px 0 17px;
	margin:0 auto 39px;
}

h1
{
	padding:1em 0;
	margin:0;
}
h2
{
	text-align:center;
	padding-bottom:0.5em;
	border-bottom:1px solid #1c2d54;
}
#subsections
{
	border:1px solid #e6e6e6;
	padding-top:1em;
	padding-bottom:1em;
	padding-left:2em;
	margin-left:0;
}


/*
	Page header including title and site navigation.
*/
#header
{
	background:#000 url(/ss2/styles/shiny/images/header-background.png) top left repeat-y;
	padding:0 0 1em 0;
	color:#fff;
	text-align:center;
	margin:0;
}
#header blockquote
{
	margin:0;
}
#header blockquote p
{
	display:inline;
	padding-right:1em;
	margin:0;
}
#header blockquote p:before
{
	content:open-quote;
}
#header blockquote p:after 
{
	content:close-quote;
}


/*
	Main navigation menu for all pages.
*/
#sitemenu
{
	text-align:center;
	background:#000 url(/ss2/styles/shiny/images/header-background.png) top left repeat-y;
	list-style:none;
	padding:0;
	margin:2px 0;
	height:2em;
}
#sitemenu li
{
	float:left;
	width:153px;
}
#sitemenu a
{
	display:block;
	line-height:2em;
	text-decoration:none;
	font-family:sans-serif;
	color:#fff;
}
#sitemenu a:hover
{
	background-color:#fff;
	color:#000;
}


/*
	Each section has it's own image or uses the default.jpg
*/
#gameshot img
{
	display:block;
	margin:0 auto;
	width:762px;
	clear:both;
}


/*
	This element surrounds the actual page content, including the section heading.
*/
#content
{
	padding:0 30px;
	margin:0;
	margin-top:1em;
}


/*
	All screenshots with captions.
*/
*.screenshot
{
	text-align:center;
	font-style:italic;
}


/*
	Table colours and borders.
*/
table
{
	border-collapse:collapse;
}
caption
{
	margin-bottom:1em;
	font-style:italic;
}
thead
{
	background-color:#e6e6e6;
}
th,
td
{
	border:1px solid #747474;
	padding:0.2em;
}


/*
	Shown at the bottom of every page.
	CSS moves the element below the body element preventing the drop-shadows from overlapping.
*/
#footer
{
	position:relative;
	top:39px;
	left:-17px;
	width:800px;
	line-height:20px;
	background:url(/ss2/styles/shiny/images/footer.png) bottom left no-repeat;
	margin:0;
	padding:0;
	padding-bottom:19px;
	border-width:1px 0;
	text-align:center;
	font-size:0.85em;
}


ul
{
	list-style-image:url(/ss2/styles/shiny/images/bullet.png);
}


/*
	List shown a grid of squares.
	Set the width, height and margin of "ol.grid a" in the html file itself.
*/
ol.grid
{
	list-style:none;
	margin:0;
	padding:0;
	text-align:center;
	overflow:auto;
}
ol.grid li
{
	float:left;
}
ol.grid a
{
	display:block;
	padding:0.5em 0;
	border:1px solid #e6e6e6;
	text-decoration:none;
	color:#000;
}
ol.grid a:hover
{
	border:1px solid #c9c9c9;
	background-color:#e6e6e6;
}
ol.grid img
{
	display:block;
	margin:0 auto 0.3em;
	border:1px solid #000;
}


/*
	Put the stylesheet-switcher in the top left corner and keep it there
*/
#styleswitcher
{
	list-style:none;
	position:fixed;
	top:0;
	left:0;
	margin:0;
	padding:0;
}


/*
	Notes within the walkthrough.
*/
p.note
{
	background:url(/ss2/styles/shiny/images/pencil.gif) 3px center no-repeat;
	padding-left:30px;
	border:1px solid #e6e6e6;
}


ins
{
text-decoration:none;
}