/*	top of the tree, body defines our defaults: black on white text, a nice font and text is centred by default.
	for font sizes you can use various things, e.g. pixels (px). I've used em, which is a number relative to the browser size.
	this is good because users set default sizes (e.g. in IE small, normal, large, etc). The values are a percentage.
	e.g. 0.8em is the site default and means 80% of whatever the user has set as his normal.
*/
body {  
	background-color: #ffffff;
	color: black;
	font-family: arial, verdana, sans-serif;
	font-size: 10pt;
	text-align: center;
}

td {
	background-color: #ffffff;
	color: black;
	font-family: arial, verdana, sans-serif;
	font-size: 10pt;
	text-align: center;
}

/* h1 is used only by the very top line title */
h1 {
	font-size: 20pt;
	font-weight: normal;
}

/* h2 is used by the next level down, e.g. 'episodes' */
h2 {
	font-size: 16pt;
	font-weight: normal;
}

/* h3 is used by the links section */
h3 {
	text-align: center;
	font-size: 12pt;
	font-weight: bold;
}

/* set the gap between horizontal lines */
hr {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
	color: silver;
	background-color: #ffffff;
}

p {
	margin-top: 0px;
	margin-bottom: 0px;
}

/*	these are our list items. ol is for ordered list and the default is numbered items
	ul is unordered list and the default is what the browser has set, usually a circle or diamond
    
	note you can set the same css to similar items by separating them by commas
*/
ul, ol {
	text-align: left;
	margin-left: 20%;
}
.info ul, .info ol, .info li {
	text-align: left;
	margin-left: 0;
}

/*	hyperlinks all have a A HREF section, however they are special in that you can do different things with them
	i.e. with links you can move your mouse over them (hover), hold the mouse down (active), set the default details (link) 
	for new links, and set the default details (visited) for links you have visited
    
	In the below links are blue, ones you have visited are blueish and when you hold the mouse down it is red
	NOTE: the order is quite important, setting active before the others will make it always red!
*/
a:link {
	text-decoration: none;
	color : blue;
	background-color: #ffffff;
}
a:hover {
	text-decoration: underline;
	color : blue;
	background-color: #ffffff;
}
a:visited {
	text-decoration: none;
	color : #00007f;
	background-color: #ffffff;
}
a:active {
	text-decoration: none;
	color : #ff0000;
	background-color: #ffffff;
}

/* these are the classes that we have explicitly set */

/*	this class is used in the site as a DIV around the whole page
	we are using it to set the width
	setting 'auto' as the margin for left and right tells the browser to make them equal, i.e. centre everything
*/

.page {
	width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* 	these are the different sections. we are removing the need for BR's everywhere in this bit of css 
	the padding is to replace the BR elements
	what is also here is for every 'section' a horizontal groove is chiselled out, i.e. replacing the need
	to have HR elements everywhere. The slight drawback is IE doesn't pick the style you choose properly
	so 'groove' is groove in every browser except IE where it is black. but progress stands for no man...
*/
.topsection {
	padding-top: 10px;
	padding-bottom: 10px;
}

.midsection {
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	
	border-top: 1px groove silver;
	border-bottom: 1px groove silver;
}

.article {
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
	
	border-top: 1px groove silver;
	border-bottom: 1px groove silver;

	text-align: left;
}

.mp3player {
	padding-top: 0px;
	padding-bottom: 10px;

	text-align: right;
}

.sidesection {
	text-align: left;
	
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	
	border-top: 1px groove silver;
	border-bottom: 1px groove silver;
}

.paragraph {
	text-align: left;
	padding-bottom: 10px;
}

.paragraph_heading {
	text-align: center;
	padding-bottom: 10px;
}

.paragraph_aside {
	font-size: 8pt;
	text-align: left;
	padding-bottom: 10px;
}

.paragraph_spoiler {
	color: #bfbfbf;
	text-align: left;
	padding-bottom: 10px;
}

.articleheading {
	text-align: left;
	padding-top: 20px;
	padding-bottom: 0px;
}

.quote {
	text-align: left;
	padding-left: 20px;
	padding-bottom: 10px;
}

.signoff {
	text-align: right;
	padding-bottom: 10px;
}

.source_link {
	text-align: right;
	padding-bottom: 10px;
}

.advert_image {
	text-align: center;
	padding-top: 20px;
}

.image_and_description {
	text-align: center;
	padding-bottom: 20px;
}

.center {
	text-align: center;
}