/* Set the font for the whole site, including the flying words */
body { 
	font-family:Arial, Helvetica, sans-serif; 
}

/* Link styling - underline only when activated, in red (dark red once followed) */
a:link { text-decoration:none; color:#B00000; }
a:visited { text-decoration:none; color:#800000; }
a:active { text-decoration:underline; color:#B00000; }
a:hover { text-decoration:underline; color:#B00000; }

/* But linked images do not have a red border put around them */
a img {
	border:none;
}

/* This is for the Apple appStore widgets only */
iframe.appStoreWidget {
	margin-top:40px;
	margin-left:40px;
	margin-right:40px;
	margin-bottom:0px;
}

/* .left and .right specify that an image should be floated to the left or the right
   in the main text, and the following text flowed around them. The actual elements
   to which left or right apply can be either div or span (if the image has a caption) or 
   img (if it doesn't).
   N.B. we have to set the width of each div containing
   a caption using inline style (width:XXpx;) to be the same as the width of the image. 
   The only way around doing it like that would seem to be to use javascript to
   set the widths automatically. */
.left {
	float:left;
	margin-right:15px;
	margin-bottom:5px;
	margin-top:10px;
}

.right {
	float:right;
	margin-left:15px;
	margin-bottom:5px;
	margin-top:10px;
}

/* This is to centre an image (either an img or div tag containing and img) The caption (if 
   there is one simply appears in the div after the image, and is in slightly smaller
   text. For centred images, captions are also centred. */
.center {
	/* This aligns the caption inside the div element, if there is one - not the .center 
	   element itself */
	text-align:center;
	/* These two rules makes the left and right margins equal size, thus centering the
	   img or div */
	margin-left:auto;
	margin-right:auto;
}

/* This rule makes photo captions and block quotes a little smaller than the main text */
.right, .left, .center, blockquote {
	font-size:80%;
}

/* This lets us use br to put half a line between the photo and its caption. No space is 
   needed after the caption, as the whole photo and caption unit already has a space after it. */
.right br, .left br, .center br {
	line-height:50%;
}

/* This just makes us move on after PREVIOUS and NEXT, and prevents any images from
   overflowing the main content sections. */
p.end-line {
	clear:both;
}

/* When a hyperlink is inside h1 or h2, it always stays red, even if it has been followed.
   This is as it would not look so good if this large text went dark-red. The same is
   also true for the whole div element on the front page */
h1 a:visited, h2 a:visited {
	color:#B00000;
}

/* Heading formats are modified considerably from the default settings */
h1 {
	font-size:4em;
	text-align:center;
	color:#B00000;
}

/* We add a large WA before and after the main title */
h1:before
{
	vertical-align:-50%;
	padding-right: 1em;
	content:url(../images/wa.gif);
}

h1:after {
	vertical-align:-50%;
	padding-left: 1em;
	content:url(../images/wa.gif);
}

h2 {
	font-size:3em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	text-align:center;
}

h3 {
	margin-top:0em;
	margin-bottom:1em;
	margin-left:0em;
}

h4 {
	margin-top:0;
	margin-bottom:0.5em;
}

/* Any bold sections labeled with "note" get coloured pink (as red is already used so much - it won't stand out) */
b.note {
	color:#D000D0;
}

/* Table cell content should start at the top, not be vertically centered */
td {
	vertical-align:top;
}

/* This means that the column is automatically made the width of the vertical banners (160px) plus 4px for spacing */
#ad-column {
	padding:3em;
	width:164px;
}

/* In the bookshop, we float the images to the left of the table elements, and pad the right of the image so the
   text doesn't appear right next to it.
   Or, if the book image is not in a table, we can just label it as a bookshop image directly, and the same thing 
   will happen. */
table.bookshop img {
/*	float:left; */
	padding-right:10px;
	padding-bottom:5px;
}
/* And, also in the bookshop, each cell's contents begins at the top of the cell, and we leave a space between the 
   the cells */
table.bookshop td {
	vertical-align:top;
	padding:10px;
}

/* This is for book reviews in paragraphs, not tables */
p.book-review {
	clear:both;
}

/* This is also for book reviews in paragraphs, not tables */
p.book-review img {
	float:left;
	padding-right:10px;
	padding-bottom:20px;
}

/* Styling of horizontal lines */
hr {
	color:#B00000; width:80%; height:3px;
	border:0;
	background-color:#B00000;
	text-align:center;
	margin-top:0em;
	margin-bottom:1em;
}

/* THE RED BOXES AROUND THE MAIN CONTENT SECTIONS */
div.main-content-section {
	padding:40px;
	border:3px solid #B00000;
	background-color:white;
}

#main-column {
	/* 640 to allow for 640px photos, (40 padding + 3 border) * 2 */
	max-width:726px;
}

/* SIDEBAR-MENU STYLING */
#menu-column {
	max-width:240px;
	font-size:80%;
}

#menu-column div {
	background-color:white;
}

#menu-column h3 {
	padding:0em;;
	margin-top:0em;
	margin-left:0em;
}

#sidebar-menu {
	padding:1em;
	border:1px solid #B00000;
	margin-right:30px;
	margin-left:15px;
/*	margin-right:45px; This is for when the like box wasn’t in this column */
}

#sidebar-menu ol {
	list-style-type:decimal;
	margin:0em;
	padding-left:1.5em;
	padding-right:0.0em;
	padding-bottom:0em;
}

#sidebar-menu li {
	margin:0em;
	padding:0em;
	margin-bottom:0.5em;
}

.index-page-list {
	list-style-type:decimal;
	margin-left:0em;
	padding-left:1.5em;
}

.index-page-list li {
	margin-bottom:0.5em;
}

/* PREVIOUS and NEXT */

/* The element (usually a span) labelled previous is floated to the left,
   and << PREVIOUS: is added before it. */
.previous {
text-transform:uppercase;
float:left;
}
.previous:before {
content:"<< PREVIOUS: ";
}

/* The element (usually a span) labelled next is floated to the right, 
   NEXT: is added before it, and >> is added after it. */
.next {
	text-transform:uppercase;
	float:right;
}
.next:before {
	content:"\00a0\00a0NEXT: " /* The hex code is for &nbsp; */
}
.next:after {
	content:" >>";
}

/* Previous and next for francais. */
#previous-fr {
text-transform:uppercase;
float:left;
}
#previous-fr:before {
content:"<< PRÉCÉDENT: ";
}

/* The element (usually a span) labelled next is floated to the right, 
   NEXT: is added before it, and >> is added after it. */
#next-fr {
	text-transform:uppercase;
	float:right;
}
#next-fr:before {
	content:"\00a0\00a0SUIVANT: " /* The hex code is for &nbsp; */
}
#next-fr:after {
	content:" >>";
}

/* Text in paragraphs within the end material is centered */
#end-material p {
	text-align:center;
}

/* This makes space at the bottom that will be covered by the footer, so we can always see 
   the bottom of the table if we scroll far enough. */
table.main-three-column-table {
	margin-bottom:60px;
	margin-left:auto;
	margin-right:auto;
}

/* This make the add this tool box into a footer */
div.footer {
	background-color:white;
	width:100%;
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:1;
	border-top-style:solid;
	border-bottom-style:none;
	border-left-style:none;
	border-right-style:none;
	border-color:#B00000;
	padding:10px;
}