@charset "utf-8";
/* CSS Document */

/* GENERAL */
body{margin:0; padding:0; 
	font-family:Arial, Helvetica, sans-serif;
	color:#555;
	font-size:0.9em;
	/*background-color:#f0c79b;*/
	background-color:white;
}
.email{color:#b67131; text-decoration:underline; cursor:pointer; font-weight:bold; }
a {color:#b67131; font-weight:bold;}
a.titlelink{color:#6b2b01;  font-weight:bold; text-decoration:none} /* Ie leave it looking like a title */
a.banner{display:block}

h1{clear:both; padding:0; margin:0 0 0.5em 0; font-size:2em; color:#6b2b01;}
h2{clear:both; padding:0; margin:0 0 0.2em 0; font-size:20px; color:#6b2b01;}
h3{clear:both; margin:0; font-size:17px; color:#6b2b01; }
h4{margin:0; font-size:17px; color:#6b2b01; }
p{padding:0; margin:0 0 1em 0}
ul.bullist li{padding-bottom:20px}
.redtext{color:red}



input[type=button]{cursor:pointer}


.bannerclear{margin:0; padding:0; display:block}
.clear{clear:both; margin-bottom:1em}
.clearbasic{clear:both}
#centre {margin:auto; max-width:1024px;}
.dmmailchimp{clear:both; padding:10px; max-width:500px; border:1px solid #6b2b01; border-radius:10px; margin:35px auto 15px; border-collapse: separate; }

.firstpara{margin-top:0}
.booktable{border:none}
.booktable img{max-width:none}
.booktable td{padding:0 0 15px 3px}
.picleft{float:left; margin:0 15px 5px 0}
.picright{float:right; margin:0 0 5px 10px}
.review{margin:10px 30px 0px 30px; max-width:60% ;font-style:italic}
.reviewer{margin:3px 30px 5px 30px; max-width:60% ; font-weight:bold; text-align:right}
.smallbook{float:left; display:block; border:none; width:100px; height:150px; padding:0 12px 15px 0}
.smallbookq{float:left; display:block; border:none; width:100px; height:100px; padding:0 5px 5px 0} /*square */
.smallbookr{float:right; display:block; border:none; width:100px; height:150px; padding:0 0 5px 5px} /*right */
.bookdetail{overflow:hidden}  /* stops wrapping */
.newbook{clear:both; padding-top:10px;}
.sample{margin:0 10px; padding:10px; background-color:white; border:1px solid #555;}
#cbhuman{display:none}
/* NAV/MENUS */
.topnav-width-full{background-color:#6b2b01; clear:both;}
.topnav-width-limit{max-width:1200px; margin:0 auto;}
.topnav{display:flex; flex-wrap:wrap; justify-content:space-around; clear:both; padding:0; margin:0; background-color:#6b2b01;}

.topnav li{list-style:none; height:38px;  }
.topnav a{display:block; height:100%; padding:10px 4px; text-decoration:none; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:white}


nav.leftnav ul{float:left; list-style-type:none; padding:0; margin:3.7em 0 0 3px; width:115px; display:block; }
nav.leftnav ul li{list-style:none; padding:0 0 1em 0; margin:0;  }
nav.leftnav a{font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#6b2b01; }	

/* main has 2 backgrounds - horseshoes are covered with a blank to make them start lower down */
main{display:block; float:right; width:calc(100% - 180px);   
	margin:10px 0 0 0px;
	padding-left:43px;
	background-image:  url(../i/blank.png) , url(../i/track6.png);
	background-repeat: no-repeat, repeat-y;
	background-position: top left, top left;
}

/*top level pages don't have left nav or trigger - Oh yes they do!*/
/*#forhorselovers li.navtitle{display:none}*/
body.nonavtitle li.navtitle{display:none}

.toplevel nav.leftnav{display:none; width:0}

main.toplevel{float:none; width:calc(100% - 43px);  max-width:800px; clear:both; margin:0; padding:0 0 0 43px;}
.toplevel #trigger{display:none !important}
body#forchildren    li.lchildren    a,
body#forhorselovers li.lhorselovers a,
body#other          li.lother       a,
body#forwriters     li.lwriters     a,
body#freestuff      li.lfreestuff   a,
body#home           li.lhome        a
			{color:#f0c79b}



/*left hand nav live pages*/
body#amybooks          li.lamybooks          a,
body#alien             li.lalien             a,
body#games             li.lgames             a,
body#maths             li.lmaths             a,
body#picture           li.lpicture           a,
body#pony              li.lpony              a,
body#ponymad           li.lponymad           a,
body#nonf              li.lnonf              a,
body#animation         li.lanimation         a,
body#hoof              li.lhoof              a,
body#cause             li.lcause             a,
body#santa             li.lsanta             a,
body#sfi               li.lsfi               a,
body#news              li.lnews              a,
body#how               li.lhow               a,
body#contact           li.lcontact           a,
body#faqs              li.lfaqs              a,
body#kubby             li.lkubby             a,
body#special           li.lspecial           a,
body#plots             li.lplots             a,
body#scenes            li.lscenes            a,
body#tmbh              li.ltmbh              a,
body#horsearticles     li.lhorsearticles     a,
body#writearticles     li.lwritearticles     a,
body#otherarticles     li.lotherarticles     a

		{ color:#b67131; text-decoration:none}

/* Games pages */
body#pmquiz     li.lpmquiz    a,
body#pmsearch   li.lpmsearch  a,
body#amysearch  li.lamysearch a,
body#pmpairs    li.lpmpairs   a,
body#amypairs   li.lamypairs  a,
body#sfxquiz    li.lsfxquiz   a,
body#codesquiz  li.lcodesquiz a,
body#ponyquiz   li.lponyquiz  a
	{color:#f6a171; font-weight:normal}

.outer{position: relative; background-color:white; padding:24px 24px 0 20px; /*margin-top:10px;*/
/*box-shadow: -10px 0px 10px -9px #000000, 10px 0px 10px -9px #000000;*/}
#trigger{cursor:pointer; float:right}
#trigger{display:none}



@media screen and (max-width: 600px) {
main{margin:0; padding:0}

main .pairsblock img{max-width:none}

#ln{margin:0; border:1px solid brown; border-radius:5px; float:none; position:absolute; top:40px; right:0px; background-color:#f0c79b; display:none; z-index:1000}
nav.leftnav ul{margin:0em 0 0 3px;}
.outer {padding:0 3px}
main, main.toplevel{width:100%; clear:both; padding:0; background-image:none; border:none}
#trigger{display:block}

body.nonavtitle li.navtitle{display:block}
}



@media screen and (max-width: 750px) {
	main img{max-width:40%}
	}

@media screen and (max-width: 1080px) {/*kill top margin*/
.outer{margin-top:0}
}