/** BASIC */

html, body {
	height: auto; /*100%;*/
  margin:0;
  padding:0;
}

body {
	margin: 0px;
	padding: 0px;
	background: #007CDE;
  /* background: linear-gradient(0deg, rgba(110,151,235,1) 0%, rgba(69,158,236,1) 52%, rgba(0,124,222,1) 100%); looks better, but some images have blue bg, so can't use gradient */
	font-size:100%;
	font-family: 'Delius', Comic Sans MS, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align:center;
}

div, input, textbox{
	box-sizing:border-box;
}

/** HEADINGS */
h1, h2, h3, h4, h5, h6 {
	margin: 20px 0;
}




p, blockquote, ul, ol, dl {
	margin-top: 0px;
	margin-bottom: 1em;
	/*text-align: justify;*/
}

/** LAYERS 
#content {
	width: 1024px;
	height: 368px;
	margin: 0px auto;
}
*/
img{
	max-width:100%;
	height:auto;
}

iframe{
	max-width:100%;
}

.clear {clear:both;}


/*****
* buttons forms etc
*******/

form{
	margin-top:40px;
	background:#D6E1F4;
	padding:20px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
input,
textarea{
	padding:10px 15px;
	margin:10px 0;
	width:70%;
	background:#fff;
	border:1px solid #160E75;
	color:#333;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	font-size:1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.button,
input[type='submit']{
	border:1px solid #160E75;
	background:#464CC5;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	color:#fff;
	padding:15px 20px;
	font-size:1em;
	text-align:center;
	margin:30px 0 20px;
	cursor:pointer;
	text-decoration:none;
	display:inline-block;
}
.button:hover,
input[type='submit']:hover{
	background:#5F8FD9;
}

input[type='reset']{
	border:1px solid #160E75;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	color:#fff;
	background:#666;
	padding:15px 20px;
	font-size:1em;
	text-align:center;
	margin:10px 0;
	cursor:pointer;
}

.formtop{
	padding:15px;
	margin:10px 0;
	border-radius: 7px;
}
.formtop-error {
	background:red;
}
.formtop-success{
	background:green;
	color:white;
}
.inform-msg{
	border-bottom:2px solid red;
	color:red;
	margin-bottom:15px;
}
/*****
* layout
*******/

.header{
	border-bottom:1px solid rgba(255,255,255,0.3);
	margin-bottom:20px;
}

img.logo {
	width: 65%;
  max-width:97%;
	height: auto;
	zoom: 1;
  display:block;
  margin:0 auto;
}
.home img.logo {
	/*width: auto;*/
	max-width:97%;
	margin:0 auto;
	display:block;
}

.content {
	position: relative; 
	width: auto;
	margin: 0px 0 40px;
	padding:10px 20px 40px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	background:rgba(255,255,255,0.9);
	text-align:left;
	font-size:1.2em;
}
.home .content{
	text-align:center;
	margin-top:30px;
	padding-top:30px;
}


.content h1, 
.content h2, 
.content h4 {
	color: #614C31;
}


.nav{
	margin:20px 0;
	align:center;
	font-family: 'Delius', Comic Sans MS, Arial, Helvetica, sans-serif;
}
.nav ul{
	align: center;
	display:inline-block;
	margin:0 auto;
	list-style-type: none;
	padding:0;
}
.nav ul li{
	display:inline-block;
	margin:0 2px;
}
.nav a,
.nav a:link,
.nav a:visited{
	display:block;
	padding:10px 20px; 
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	background:transparent;
	color:#fff;
	font-size:1em;
	text-transform:uppercase;
	text-decoration:none;
}
.nav a:hover,
.nav a:active{
	background: rgba(255,255,255,0.2);
}
	
@media screen and (min-width:621px){
	.nav a,
	.nav a:link,
	.nav a:visited{
		font-size:1.5em;
	}
}
/* added 15/8/14 */
.container{
	width:100%;
	padding:10px;
	margin:10px auto;
}

/* columns */
.leftcol,
.rightcol{
	margin-top:20px;
}

@media screen and (max-width:620px){
	.hide-on-mobile{
		display:none;
	}
}
@media screen and (min-width:621px){
  .hide-above-mobile{
    display:none;
  }
}

@media screen and (min-width:621px){
	
	.container{
		width:100%;
		max-width:1020px;
		padding:10px;
		margin:10px auto;
	}

	.leftcol{
		float:left;
		width:30%;
	}
	.rightcol{
		float:right;
		width:65%;
	}
}


.leftcol img{
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
}




h1.book-title{
	color:#fff;
	font-size:3.2em;
}

#paper,
#halfpaper,
.paper,
.halfpaper {
	padding: 30px 0;
	border-bottom:1px solid rgba(29,113,154,0.6);
}

/*
#paper {
	float: right;
	top: 0px;
	width: 570px;
	height:802px;
	padding : 20px;
	background: url(images/paper.jpg) no-repeat left top;
	z-index: 2;
}

#halfpaper {
	float: right;
	top: 0px;
	width: 570px;
	height:401px;
	padding : 20px;
	background: url(images/halfpaper.jpg) no-repeat left top;
	z-index: 2;
}
*/



#photo {
	float: left;
	top: 0px;
	left: 200px;
	width: 454px;
	height:451px;
	margin: 20px auto;
	z-index: -2;
}

#photo2 {
	float: left;
	top: 00px;
	left: 0px;
	width: 340px;
	height:440px;
	margin: 70px auto;
	z-index: -2;
}


/*#leftbar {
	float: left;
	width: 300px;
	margin: 0px auto;
	z-index: 0;
}
*/
#extra {
	width: 600px;
	margin: 20px auto;
	text-align: center;
}


#footer {
	clear:both;
	border-top:1px solid rgba(255,255,255,0.3);
	margin: 100px auto 20px;
	text-align: center;
	color:rgba(255,255,255,0.8);
}
#footer .nav{
  border-top:1px solid rgba(255,255,255,0.3);
  padding-top:12px;
}


/*p.letter {
	font-size: 20px;
	color: #000000;
}	

p.lettersmall {
	font-size: 17px;
	color: #800800;
}	
*/


/*
.books {
	display: flex;
  justify-content: space-between;
	flex-wrap:wrap;
}
.books > div{
	width:32%;
}
*/



.books{
	max-width:100%;
}
.books{
	/*display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-moz-flex;
	display:-webkit-flex;*/
	display:flex;
	flex-wrap:wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.books > div{
	/*float:left;*/
	width:47%;
	-webkit-flex-basis: 47%;
	flex-basis: 47%;
}

@media screen and (min-width:621px){

	.books > div{
		/*float:left;*/
		width:31%;
		-webkit-flex-basis:31%;
		flex-basis: 31%;
	}
	
	.books img {max-width:80%;}
	
	/*.books img.angela-angel{max-width:380px;}
	.books img.dragon-cottage-cover{
		max-width:60%;
	}*/
}
.books > div > a{
	display:block;
	/*min-height:400px;*/
	padding:0 20px;
}

/*.books img.wishing {margin-left:60px;}
.books img.paws{margin-left:15px;}
.books img.dolls-house{
	max-width:190px; 
	margin-top:55px;
	margin-left:55px;
	box-shadow: 10px 10px 15px rgba(0,0,0,0.75);}
*/
.books img{
	margin:35px auto 5px;
	box-shadow: 10px 10px 15px rgba(0,0,0,0.75);
	
}
/*
div.letter{
	font-size: 20px;
	color: #000000;
}	

.letter h1{font-size:40px; margin-bottom:20px;}
*/



.cols{
  display:flex;
	flex-wrap:wrap;
}

@media screen and (min-width:621px){
  .col-half{
    width:50%;
    padding:2rem;
  }
  .col-one-quarter{
    width:25%;
    padding:2rem;
  }
  .col-three-quarters{
    width:75%;
    padding:2rem;
  }
  .col-one-third{
    width:33%;
    padding:2rem;
  }
  .col-two-thirds{
    width:67%;
    padding:2rem;
  }
}
  
.book-info{
  text-align:left;
  font-size: 1.2rem;
  align-items:center;
}
.before-heading,
.above-heading{
  margin-bottom:-10px;
  text-transform:uppercase;
  opacity:0.5;
}
.after-heading,
.below-heading{
  margin-top:-10px;
  margin-bottom:20px;
  text-transform:uppercase;
  opacity:0.5;
}
.heading-first{
  margin-top:0;
}

.text-light{
  color:#fff;
}
.text-light a{
  color:#B4DEFF;
  text-decoration:underline;
}
.text-light h1 a,
.text-light h2 a,
.text-light h3 a,
.text-light h4 a{
  color:inherit;
  text-decoration:none;
}
.text-light a:hover{
  color:#B4FEFF;
  text-decoration:none;
}
.text-light a.button{
  text-decoration:none;
  color:#fff;
  border:1px solid;
  background:transparent;
}
.text-light a.button:hover{
  color:#B4FEFF;
  opacity:0.85;
}


img.book-cover{
  box-shadow: 10px 10px 15px rgba(0,0,0,0.75);
}


#footer .amazon-logo{
  width:130px;
  border-radius:5px;
  margin-bottom:7px;
}