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

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

a:visited{
	color: blue;
}

a:active{
	color: blue;
}


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

h2{
	color: black;
	font-size: 1.2em; /*16px=1.0em */
	font-weight: bold;
	font-style: italic;
	text-align: center;
	/* line-height: 1.125; */
}



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

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: 2px solid blue; */
}
	
.MainTextBlock {
	/* This is the normal container used when there is a left column only*/
	color: black;
	font-size: 1.125em; /*18px =1.125em */
	display: inline-block;
	float: left;
	max-width: 78%; /* was 98% */
	Margin-left: 2%;
	padding-top: 1.25em;
	padding-left: 1%;
	padding-right: 1%;
	/* border: 2px solid red; */
}

.TwoColumnWideBlock{
	/*For use when have right hand bar but nothing on the left
	/*used inside a 900px max width container */
	color: black;
	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: black;
	font-size: 1.125em; /*18px =1.125em */
	display: block;
	float: left;
	max-width: 100%; /*was 800px */
	margin-top: 20px;
	margin-left: 1%;
	/*padding-left: 3%; */
	padding-right: 2%;
	/* border: 2px 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: black;
}

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

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

.Column-vnarrow{
	max-width: 10%; /* 28.5em=456px */
	text-align: right;
	text-align: middle;
}

.Column-wide{
	max-width: 25%; /* left after left image (buttons) and 10% for 1st column (18,10,20 leaves 52) */
	text-align: center;
}

.Column-extrawide{
	max-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: 18%; /*was 12% on book site*/
	display: inline-block;
	float: left;
	padding-top: 8em;
	/* border: solid 2px green; */
}

.TableImage{
	/*to make images in the tables responsive */
	max-width: 100px;
	max-height: 100px;
}

.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 */
}

.Text-centred{
	/* gives a block of text centred on the page */
	text-align: center;
	max-width: 60%;
	margin-left:auto;
	margin-right:auto;
}

.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*/
}