body {
	font-family: Times, Geneva, Tahoma, Verdana, sans-serif;
	font-size: 16px;   /* 100% means will normally be 16px */
	color: white;
	background-color: black;
}

/* Colours for links */
a:link{
	color: yellow;
}

a:visited{
	color: #cc9933;
}

a:active{
	color: #ffff66;
}


/* Main Styles */
h1{
	color: white;
	font-size: 1.75em; /*16px=1.0em */
	font-weight: bold;
	font-style: italic;
	text-align: center;
	line-height: 1.125;
}

h2{
	color: #8a8321; /*gold */
	font-size: 1.5em; /*16px=1.0em */
	font-weight: bold;
	font-style: italic;
	text-align: left;
	line-height: 1.125;
}



/* For tables (news page) */
td{
	font-size: 1.0em;
	font-style: normal;
	padding: 0.75em;
	vertical-align: top;
}

iframe{
	max-width: 100%;
}


/* Custom blocks */

.FullWidth{
	/* Gives a block that's full width of what's required */
	/* want max width of 900px, which is 47% of my monitor */
	/* need to set this to px not %, otherwise will be half size of a small monitor */
	display: block; 
	max-width: 900px; /* 47%*/
	/* border: 1px solid pink; */
}
	
.MainTextBlock {
	/* This is the normal container used when there is a column either side.*/
	color: white;
	font-size: 1.125em; /*18px =1.125em */
	display: inline-block;
	float: left;
	max-width: 68%; /* was 610px */
	Margin-left: 2%
	padding-top: 1.25em;
	padding-left: 1%;
	padding-right: 1%;
	/*border: 1px solid yellow; */
}

.TwoColumnWideBlock{
	/*For use when have right hand bar but nothing on the left
	/*used inside a 900px max width container */
	color: white;
	font-size: 1.125em; /*18px =1.125em */
	display: inline-block;
	float: left;
	width: 78%; /*leaves 17% for right bar & the rigth bar's margin*/
	padding-left: 2%;
	/*margin-top: 20px; */
	padding-right: 2%;
	/*border: 1px solid yellow; */
}

.FullWidthBlock{
	color: white;
	font-size: 1.125em; /*18px =1.125em */
	display: block;
	float: left;
	width: 100%; /*was 800px */
	margin-top: 20px;
	margin-left: 1%;
	/*padding-left: 3%; */
	padding-right: 2%;
	/* border: 1px solid yellow; */
}

.BookDisplay{
	/*To sit inside MainTextBlock, showing book cover on left and some text on right */
	text-align: left;
	width: 98%; /*was 580px. Set to fill its containing block*/
	/*height: 200px; */
	display: inline-block;
	float: left;
	/*border: 1px solid red;*/
}


.FooterText{
	font-size: 0.875em; /*12px = 0.75em*/
	font-style: italic;
	color: white;
}

.Table-2Col{
	/*table-layout: fixed; */
	/* border: 1px solid pink; */
	/*table-width: 610px; */
}

.Column-narrow{
	width: 20%; /* 9.5em = 136px */
}

.Column-vnarrow{
	width: 10%; /* 28.5em=456px */
}

.Column-wide{
	width: 80%; /* 28.5em=456px */
}

.Column-extrawide{
	width: 90%; /* 28.5em=456px */
}

.Buttons-7{
	/* buttons in main header where fills full width (7 buttons).  */
	max-width: 13%; /* percentage of the container block */
	/* Each one is 124x44px. */
}

.Buttons-4{
	/* buttons in main header where fills partial width (5 buttons).  */
	max-width: 23%; /* this sits in a smaller containter block that's 4 buttons wide, so each button is 1/4 of total */
	/* Each one is 124x44px. */
}

.LeftImage{
	/* For the main image on the left hand side of pages*/
	max-width: 12%; /*image is 134px wide, which is 14.88% of a 900px container*/
	display: inline-block;
	float: left;
	padding-top: 2em;
	/* border: solid 1px green;*/
}

.LeftTextBar{
	/* For left bar when it contains text (e.g. Thrillers page)*/
	display: inline-block;
	float: left;
	width: 12%; /* was originally 120px, but made same as LeftImage*/
	margin-top: 9em;
	margin-bottom: 9em;
	margin-right: 1m;
	color:rgb(158, 158, 158) /* silver */
}

.RightBar{
	/* For the right-hand bar. Normally link to  Amazon and social media*/
	display: inline-block;
	float: left;
	max-width: 13%; /* 12% of the 900px full width display*/
	margin-left: 4%;
	/* border: solid 1px red; */
}


.BuyAtAmazon{
	/* For the main image on the right hand side of pages (normally Amazon and social media  links) */
	max-width: 99%; 		/*want it 100% of the side container */
	/*margin-left: 34px; */
	padding-top: 9em; /* roughly 150px */
	padding-bottom: 1.25em; /*20px; */
}

.DividingBar{
	/*Puts a horizontal silver bar in middle of the container as a dividing element*/
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3.0em;
	max-width: 40%;
}

.DividingBar-wide{
	/*Puts a horizontal silver bar in middle of the container as a dividing element*/
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3.0em;
	max-width: 80%;
}



.EmbeddedImage{
	/*Used on characters page for face pictures in the text*/
	float: left;
	width: 18%;
	padding-right: 4%;
	padding-bottom: 0.5em;
}

.EmbeddedImage-L{
	/* used on Locations page for photos */
	width: 30%;
	float: left;
	padding-right: 2%;
	padding-bottom: 0.5em; /* was 8em*/
}