/* div#mainWrapper { height: 300px; width:300px; }*/

body, ul, li, h1, h3, p { margin:0; padding: 0; background-color: #000000; color: #ffffff; font-family: "calibri";}

body *
{
	background-color: transparent;
}

div#booksQuantityNote
{
	/*
	width:100%;
	height: auto;
	padding: 10px 0px;
	background-color: purple;
	text-align: center;
	animation: bookQuantityHighlight 5s infinite;
	animation-direction: alternate;
	*/
	display:none;
}

  
@keyframes bookQuantityHighlight 
{
	0% {
		background-color: #2e68c9;
  }
  
  100% {
	  background-color: purple;
  }
}

p#bookQuantity
{

}

p#bookQuantity > span
{
	font-weight: bold;
}

div#enlargeImageViewer
{
	display: none;
}

ul#bookPageImages > li.mobileImageNames
{
	display: none;
}

div#mobileAuthorImage
{
	display: none;
}


div#mobileNavBtn
{
	display: none;
}

div#mobileNavigation
{
	display: none;
}

a{text-decoration: none;}
a:link { color: white;}
a:visited { color: white; }
a:hover, a:focus { color: #ff9d00;}
a:active { color: #ff9d00;}


a#purchaseButton2:{text-decoration: none;}
a#purchaseButton2:link { color: white;}
a#purchaseButton2:visited { color: white; }
a#purchaseButton2:hover, a:focus { color: white;}
a#purchaseButton2:active { color: white;}

li
{
	list-style-type: none;
}

div#topWrapper 
{
  width: 90%;
  height: auto;
  margin: 0px 0px 0px 5%;
  text-align: center;
  /*background-color: orange;*/
  background-image: url('../images/str.png');
  background-position: 0px 20px;
  background-repeat: repeat-x;
}


div#topLeftWrapper
{
  width:auto;
  max-width: 42%;
  height: auto;
  display: inline-block;
  vertical-align: top;
  margin: 30px 20px 0px 0px;
  /*background-color: pink;*/

}

div#topRightWrapper
{
  min-width: 100px;
  max-width:50%;
  width: auto;
  height: auto;
  display: inline-block;
  margin: 30px 0px 0px 10px;
  /*background-color: pink;*/
}


h1#bookName
{
	font-size: 80px;
	text-align: left;
	margin: 60px 0px 0px 0px;
}


div#bookDescription
{
	font-size: 20px;
	margin: 30px 0px 0px 0px;
	background-color: #000000;
}

div#bookDescription > p
{
	text-align: left;
}


div#readingAudio
{
	width: 300px;
	height: 123px;
	margin: 50px 0px 0px 0px;
	background-color: #ffb42b;
}

span#readingAudioText
{
	width: 300px;
	display: block;
	text-align: center;
	color: #b3b3b3;
}


/* Book image etc */

div#bookWrapper
{
	width: auto;
	height: auto;
}

div#bookImage > img
{
	height: 90%;
	width: 90%;
}


div#buyButtonMain
{
	width: auto;
	height: auto;
	background-color: #ff9d00;
	text-align: center;
	
	display: inline-block;
	
	padding: 5px 20px;
	
	
	font-size: 30px;
	
	color: #ffffff;
	margin: 20px auto 0px auto;
	
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius:15px;
	

	
}

div#buyButtonMain:hover
{
	background-color: blue;
	cursor: pointer;
}

div#priceSelection
{
	width: 60%;
	height: auto;
	margin: 0px auto;
	/*background-color: orange;*/
}

div.priceDivider
{
	width: 5px;
	height: 30px;
	background-color: #ff9d00;
	margin: 0px auto 0px auto;
	
	/*-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius:3px;*/
}



div#priceDivider2
{
	width: 5px;
	height: 30px;
	background-color: #ff9d00;
	margin: 0px auto 0px auto;
	display: none;
}

div#postageSelection
{
	border: 2px solid #ff9d00;
	padding: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius:15px;
}

div#priceSelection
{
	display: none;
}

div#postageSelection > span
{
	display: inline-block;
	font-size: 20px;
	margin: 0px 0px 10px 0px;
}


div#postageSelection > ul
{
	display: inline-block;
}

div#postageSelection > ul > li
{
	display: inline-block;
	padding: 10px;
	margin: 10px 10px 10px 10px;
	background-color: #ff9d00;
	
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius:15px;
}

div#postageSelection > ul > li:hover
{
	background-color: blue;
	cursor: pointer;
}


div#ukBuyButton, div#euroBuyButton, div#worldBuyButton
{
	display: none;
	border: 2px solid #ff9d00;
	padding: 0px 15px 15px 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius:15px;
}

div.areaSelected
{
	width: auto;
	height: auto;
	display: inline-block;
	background-color: #ff9d00;
	padding: 5px;
	margin: 0px 0px 10px 0px;
	
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	
}


span#bookPrice
{
	margin: 10px 0px 0px 0px;
	font-size: 20px;
	display: block;
	color: #888888;
}

span#bookPriceNote
{
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	display: block;
	color: #888888;
}

span#orderSignNote
{
	
	width: 60%;
	margin: 10px auto 0px auto;
	font-size: 20px;
	display: block;
	color: #888888;
}

div.areaCostNote
{
	margin: 10px auto;
}


img#fbProfileLogo
{
	height: 30%;
	width: 30%;
}


ul.shareButtons
{
	width: 180px;
	height: auto;
	margin: 10px auto 0px auto;
	padding: 5px 0px;
	/*background-color: blue;*/
	
	text-align: center;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

ul.shareButtons > li
{
	width: auto;
	display: inline-block;
}


p#event_notification
{
	display: inline-block;
	width: 80%;
	font-size: 20px;
	margin: 10px 0px 0px 0px;
	/*color: #ff9d00;*/
	color: #ecaa41;
	line-height: 25px;
}

p#event_notification > span
{
	text-decoration: underline;
}


/* divider */

div.divider
{
	width: 65%;
	height: 2px;/*6e566e*/
	/*background-color: #5e5e65; 9787da 2e68c9*/
	
	background: linear-gradient(to right, #303030, #2e65c2, #303030);
	/*background: linear-gradient(to right, #6e566e, #9787da, #6e566e);*/
	margin: 50px auto;
}


ul#bookPageImages
{
	width: auto;
	height: auto;
	text-align: center;
	margin: 50px auto 0px auto;
	/*background-color: blue;*/
}

ul#bookPageImages > li
{
	display: inline-block;
	vertical-align: top;
	height: 200px;
	width: 250px;
	margin-right: 30px;
	background-color: #898989;
	padding: 5px;
	background: linear-gradient(to right, #2e68c9, purple);
}


ul#bookPageImages > li:hover
{
	cursor: pointer;
}

ul#bookPageImages > li > img, ul#bookPageImages > li > a >img
{
	width: 250px;
}

ul#bookPageImageName
{
	width: auto;
	height: auto;
	text-align: center;
	margin: 0px auto;
	/*background-color: blue;*/
}

div#enlargeImageViewer
{
	/*height:100px;
	width:100px;
	position: fixed; 
	top: 30%; 
	z-index: 300; 
	background-color: orange;
	padding: 10px;	
	display: block;*/
	
	/*height:auto;
	top: 10%;
	width:75%;
	left: 50%;
	margin-left: -37.5%;*/
	
	/*display: block;*/
	
	/*
	position: absolute;
	z-index: 300; 
	background-color: #3079be;
	padding: 10px;	
	text-align: right;*/
	
	height:auto;
	top: 10%;
	width:75%;
	left: 50%;
	margin-left: -37.5%;
	display: none;
	position: relative;
	z-index: 300; 
	background-color: #3079be;
	background: linear-gradient(to right, #2e68c9, purple);
	padding: 10px;	
	text-align: right;
	cursor: pointer;
	
}

div#enlargeImageViewer > img
{
	width: 100%;
	height: 100%;
}


ul#bookPageImageName > li
{
	display: inline-block;
	
	height: auto;
	width: 250px;
	margin-right: 30px;
	/*background-color: orange;*/
}


span#enlargeImageNote
{
	margin-top: 20px;
	display: block;
	text-align: center;
}

/* Quote */

blockquote.quotesTop
{
	width:70%;
	margin: 10px auto 100px auto;
	text-align: center;
	color: #b3b3b3;
	font-style: italic;
	font-size: 150%;
}

blockquote.quotesTop > footer
{
	font-size: 80%;
	font-weight: bold;
	text-align: right;
	display: block;
	margin: 15px auto 0px auto;
}

blockquote.quotesTop > footer > a
{
	font-size: 15px;
}


blockquote#quote
{
	width:60%;
	margin: 10px auto;
	text-align: center;
	color: #b3b3b3;
	font-style: italic;
	font-size: 150%;
}

blockquote#quote > footer
{
	font-size: 80%;
	font-weight: bold;
	text-align: right;
	display: block;
	margin: 20px auto 0px auto;
}


/* About the Author */


#authorwp
{
	width: 80%;
	margin: 0px 0px 0px 10%;
	/*text-align: center;*/
}

#authorDetails
{
	display: inline-block;
	vertical-align: top;
	max-width: 45%;
	margin: 0px 80px 0px 0px;
}

#aboutAuthorTitle
{
	font-size: 30px;
	color: #b3b3b3;
}

p#authorDescription
{
	margin: 10px 0px 0px 0px;
	color: #b3b3b3;
}

div#authorImage
{
	width: 40%;
	height: auto;
	display: inline-block;
	/*background-color: blue;*/
}

div#authorImage > img
{
	width: 100%;
	height: 100%;
}


div#authorAudioWrapper
{
	width: 498px;
	height: 165px;
	margin: 30px 0px 0px 10%;
	background-color: orange;
}


div#buyButton2
{
	width: auto;
	height: 30px;
	margin: 30px auto;
	background-color:none;
	text-align: center;
	font-size: 0;
}

div#buyBtn2
{
	display: inline-block;
}


div#buyButton2Left
{
	width: auto;
	height: auto;
	display: inline-block;
	
	font-size: 20px;
	padding: 5px 10px;
	
	background-color: #6b5b43;
	color: #bf9000;

	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
}

div#buyButton2Right
{
	width: auto;
	height: auto;
	display: inline-block;
	
	font-size: 20px;
	padding: 5px 10px;
	
	background-color: #ff9d00;

	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
}





div.divider2
{
	width: 20%;
	height: 2px;
	background-color: #5e5e65;
	margin: 30px auto 10px auto;
}

div#footerLinks
{
	width: 200px;
	text-align: center;
	margin: 10px auto 30px auto;
	font-size: 20px;
}



div#footerLinks ul > li
{
	display: inline-block;
	margin: 0px 10px 0px 0px;
}

div#cookieWrapper
{
	width: 100%;
	height: auto;
	background-color: #4e3301;
	position: fixed;
	bottom: 0px;
	display:block;
	text-align: right;
	z-index: 312;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}


div#cookieWrapper > p
{
	display: inline-block;
	position: absolute;
	top: 40%;
	left: 30px;
	color: #bcbcbc;
	font-Size: 16px;
}

div#cookieWrapper > p > a
{
	text-decoration: underline;
}

div#cookieButton
{
	width: auto;
	height: auto;
	padding: 10px;
	display: inline-block;
	margin: 20px 30px 20px 0px;
	background-color: #4e4941;
	border: 2px solid white;
	
	color: white;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	
}

div#cookieButton:hover
{
	background-color: #000000;
	cursor: pointer;
}

/* Mobile Devices */

@media screen
	and (max-width: 695px)
	{
		div#topRightWrapper
		{
			min-width: 100px;
			max-width: 80%;
		}
		
		div#authorImage
		{
			width: 35%;
			height: auto;
			display: inline-block;
			/*background-color: blue;*/
		}

		div#authorImage > img
		{
			width: 100%;
			height: 100%;
		}
		
		p#event_notification
		{
			line-height: 25px;
		}
		
		ul#bookPageImages > li
		{
			margin-right: 0px;
		}
		
	}

@media screen
	and (max-width: 878px)
	{
		p#event_notification
		{
			line-height: 25px;
		}
		
		ul#bookPageImages > li
		{
			margin-right: 0px;
		}
	}
	
@media screen
	and (max-width: 568px)
	{
		
		div#topWrapper 
		{
			margin: 0px auto;
		}
		
		div#mobileNavigation
		{
			width: 100%;
			height: auto;
			background-color: #383838;
			display: none;
			
			-moz-border-radius: 0px 10px 10px 10px;
			-webkit-border-radius: 0px 10px 10px 10px;
			border-radius: 0px 10px 10px 10px;
		}
		
		div#mobileNavigation > ul > li
		{
			display: inline-block;
			font-size: 20px;
			padding: 10px 20px;
		}
		
		
		div#mobileNavBtn
		{
			width: 30px;
			height: 30px;
			margin: 20px 0px 0px 0px;
			padding: 5px 2px 0px 2px;
			background-color: #383838;
			display: block;
			cursor: pointer;
			
		}
		
		div#mobileNavBtn > div
		{
			height: 2px;
			width: 80%;
			background-color: #717171;
			/*display: inline-block;*/
			margin: 5px auto 0px auto;
			
			
		}
		
		div#topLeftWrapper
		{
			width:auto;
			height: auto;
			display: inline-block;
			vertical-align: top;
			max-width: none;
			margin: 0px;
			/*margin: 20px 20px 0px 0px;*/
			/*background-color: pink;*/

		}
		
		div#topRightWrapper
		{
			min-width: 100px;
			width: auto;
			height: auto;
			display: inline-block;
			margin: 50px 0px 0px 10px;
			/*background-color: pink;*/
		}
		
		
		h1#bookName
		{
			font-size: 80px;
			text-align: center;
			margin: 0px 0px 0px 0px;
			/*color: orange;*/
		}
		
		div#bookDescription
		{
			width: 90%;
			font-size: 20px;
			margin: 30px auto 0px auto;
			background-color: #000000;
		}
		
		
		div#readingAudio
		{
			width: 80%;
			height: 123px;
			margin: 50px auto 0px auto;
			background-color: #ffb42b;
		}

		span#readingAudioText
		{
			width: 300px;
			display: block;
			margin: 10px auto 0px auto;
			text-align: center;
			color: #b3b3b3;
		}
		
		div#enlargeImageViewer
		{
			height:auto;
			top: 10%;
			width:75%;
			left: 50%;
			margin-left: -37.5%;
			display: none;
			position: fixed;
			z-index: 300; 
			background-color: #3079be;
			padding: 10px;	
			text-align: right;
		}
		
		div#enlargeImageViewer > img
		{
			width: 100%;
			height: 100%;
		}
		
		

		
		ul#bookPageImages > li
		{
			display: block;
			vertical-align: top;
			height: 200px;
			width: 250px;
			margin: 20px auto 0px auto;
			background-color: #898989;
			padding: 5px;
		}
		
		ul#bookPageImages > li.mobileImageNames
		{
			display: block;
			vertical-align: top;
			height: auto;
			width: 250px;
			margin: 0px auto 0px auto;
			background-color: #000000;
		}
		
		ul#bookPageImageName
		{
			display: none;
		}
		
		
		#authorDetails
		{
			display: inline-block;
			vertical-align: top;
			max-width: none;
			margin: 0px 0px 0px 0px;
			text-align: center;
		}
		
		#authorDetails > h3
		{
			text-align:center;
		}
		
		p#authorDescription
		{
			text-align: left;
		}
		
		div#priceSelection
		{
			width: 80%;
		}
		
		div#mobileAuthorImage
		{
			width: auto;
			height: auto;
			margin: 20px auto;
		}
		
		div#mobileAuthorImage
		{
			display: inline-block;
		}
		
		div#mobileAuthorImage > img
		{
			width: 100%;
			height: 100%;
		}
		
		div#authorImage
		{
			display:none;
		}
		
		div#authorAudioWrapper
		{
			width: 80%;
			height: 165px;
			margin: 30px auto 0px auto;
			background-color: orange;
		}
		
		
		
		div#footerLinks
		{
			font-size: 20px;
		}
		
		div#cookieWrapper > p
		{
			display: inline-block;
			position: relative;
			height: auto;
			left: 0px;
			text-align: left;
			margin: 10px 20px 10px 20px;
			color: #bcbcbc;
			font-Size: 16px;
		}
		
		div#cookieButton
		{
			position: relative;
			right: 0px;
			margin: 10px 20px 10px 0px;
		}
		
		p#event_notification
		{
			line-height: 25px;
		}
		
	}
	
	
	@media screen
	and (max-width: 568px)
	and (orientation: landscape)
	{
		div#enlargeImageViewer
		{
			height:auto;
			top: 10%;
			width:75%;
			left: 50%;
			margin-left: -37.5%;
			display: none;
			position: relative;
			z-index: 300; 
			background-color: #3079be;
			padding: 10px;	
			text-align: right;
		}
		
		div#cookieWrapper > p
		{
			display: inline-block;
			position: relative;
			height: auto;
			left: 0px;
			text-align: left;
			margin: 10px 20px 10px 20px;
			color: #bcbcbc;
			font-Size: 16px;
		}
		
		div#cookieButton
		{
			position: relative;
			right: 0px;
			margin: 10px 20px 10px 0px;
		}
		
		p#event_notification
		{
			line-height: 25px;
		}
		
		ul#bookPageImages > li
		{
			/*margin-right: 0px;*/
		}
		
	}
	
	
	@media screen
	and (min-width: 569px)
	and (max-width: 877px)
	{
		ul#bookPageImageName
		{
			display: none;
		}
		
		ul#bookPageImages > li.mobileImageNames
		{
			display: block;
			vertical-align: top;
			height: auto;
			width: 250px;
			margin: 0px auto 20px auto;
			background-color: #000000;
		}
		
		div#enlargeImageViewer
		{
			height:auto;
			top: 10%;
			width:75%;
			left: 50%;
			margin-left: -37.5%;
			display: none;
			position: relative;
			z-index: 300; 
			background-color: #3079be;
			padding: 10px;	
			text-align: right;
		}
		
		div#cookieWrapper > p
		{
			display: inline-block;
			position: relative;
			height: auto;
			left: 0px;
			text-align: left;
			margin: 10px 20px 10px 20px;
			color: #bcbcbc;
			font-Size: 16px;
		}
		
		div#cookieButton
		{
			position: relative;
			right: 0px;
			margin: 10px 20px 10px 0px;
		}
		
		p#event_notification
		{
			line-height: 25px;
		}
		
		ul#bookPageImages > li
		{
			margin-right: 0px;
		}
		
	}
	

	
	
	
	




