/* petercopp 13 sept 16


To do:
imgRight & left - used?
tabImageR and L - improve the styles and incorporate into the show_normal and highlight.
*/

/*------------------------------------*\
  RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE:WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
  display:block;
}

ol,ul{
  list-style:none;
}
blockquote,q{
  quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
  content:'';
  content:none;
}
/* remember to define visible focus styles!
:focus{
  outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
  text-decoration:none;
}
del{
  text-decoration:line-through;
}

table{
  border-collapse:collapse;
  border-spacing:0;
}
/* Clear Floated Elements */
.clearfix:before, .clearfix:after {content: "\0020"; 
display: block; height: 0; visibility: hidden;}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* eo resets */
/*--MAIN----------------------------------
  
dark grey 3D3D3D
light grey #cfd3d6

*/

body{
	margin:0 auto 40px auto;
	font-size:62.5%;
	font-family: sans-serif;
	background-color:#fff;
	text-align:center;
}
div.dCont{       
	width:100%;
	max-width:1600px;
	margin:20px auto 0 auto; 
}
@media only screen and (max-width: 48.5em)
{/*px*/
	div.dCont  {
	margin:0 auto;
	}
}
/* banner */
div.dTop{
	clear:both;
	width:auto;
	height:100px;
	margin:4px auto 0 auto;/* needs a bit of a top margin so as not to cross the top curve */
	/*text-align:left;*/
}
@media only screen and (max-width: 48.5em)
{/*px*/
	div.dTop  {
	margin:55px 0 0 0;
	height:100px;
	margin:0;
	}
}
/*img.imgLogo{
	float:left;
	max-width:178px;
	width:100%;
	height:auto;
	margin:50px 0 0 0;
}*/
@media only screen and (min-width: 35.4em) and (max-width: 48.5em)
{/*px*/
	img.imgLogo{
		float:left;
		width:40%;
	}
}
@media only screen and (max-width: 35.3em)
{/*px*/
	img.imgLogo{
		float:none;
		width:50%;
		margin:10%;
	}
}

img.imgPhoto{/* Peter's portrait + logo */
	width:100%;
	max-width:543px;
	/*text-align:left;*/
	margin:0 0 0 0.5%;
}
/* div layout */
div.dNavContainer{
	margin:80px 0 50px 0;
	width:auto;
	height:30px;
	text-align:center;
	padding:5px;
}
div.dNav{
	width:auto;
	height:auto;
}
@media only screen and (max-width:50.1em)
{/*px*/
	div.dNavContainer, div.dNav {
		display:none;
	}
}
div.dMain{ 
	border-top:1px solid #ccc;
	clear:both;
	margin:0 auto;
	width:auto;
	background-color:#fff;
	padding:20px 0 0 0;
}
h1.h1Top{
	clear:both;
	margin:0 2% 30px 1%;
	font-size:14px;	
	font-size:1.4rem;
	width:auto;
	text-align:left;
	color:#3D3D3D;
}

div.dContentWide{
	margin:10px 2%;
	width:auto;/* 960 total */
	height:auto;
}
div.dContent{/* on pages where there's an aside panel on the right - probably just the home page */
	float:left;
	margin:10px 0;
	width:55%;/* 960 total */
	height:auto;
	/*border:solid 2px #000;*//* xxxx no border? */
   /*-moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;*/ 

}      

div.dAside{
	float:right;
	margin:10px 20px 10px 0;
	width:35%;/* 960 total */
	height:auto;
   }
   @media only screen and (max-width: 48.5em)
{/*px*/
	div.dContent, div.dAside  {
		float:left;
		clear:both;
		width:100%;
		margin:0;
	}
}
   
   
/* end div layout */


/* foot */
div.dFooter{    
	border-top:1px solid #ccc;
	margin:50px auto 20px auto;
	width:auto;
	text-align:left;
}
h4.h4Foot{
	margin:10px auto 10px 20px;
	font-size:1.2em;
	line-height:1.6em;
	text-align:left;
	width:auto;
	font-weight:bold;
}
p.pSitemap{
	max-width:920px;
	margin:10px auto;
	font-size:1.2em;
	text-align:center;
}
@media only screen and (max-width: 769px)
{/*px*/
	div.dFooter  {
		float:left;
		margin:0;
	}
}
@media only screen and (max-width: 769px)
{/*px*/
	p.pSitemap  {
		text-align:left;
		margin: 0 0.5em;
		
	}
}    
div.dFootBox h2{
	font-size:2.0em;
}
/* eo footer */

/* Images with captions & show_random_image */
table.tabImageL{
	float:left;
	margin:5px 3%;
	text-align:center;
	table-layout:auto;
	clear:left;
	width:1px;
}
table.tabImageR{
	float:right;
	margin:5px 3%;
	text-align:center;
	clear:right;
	/*width:1px;*/
}
td.tdImage{
	text-align:center;
	font-size:0.9em;
}
td.tdCaption{
	font-size:0.9em;
	font-style:italic;
	text-align:right;
}
img.imgInTd{ /* also see div shop images image in td */   /*width:100%;*/
	position:relative; 
	z-index:10;
	top:0px;
	right:0px;
	max-width:700px;	
	width:100%;
}
img.imgSold {
	position:absolute;  
	z-index:100;
	right:5%;
	bottom:5%;
	max-width:40px;
}


/* ====================== show_page_content ==================== */
div.dItem{
	margin:0 auto;
	width:auto;
}
h2.h2Sub, h2.h2Shop{
	font-size:11px;	
	font-size:1.1rem;
	margin:0 2% 10px 2%;
	text-align:left;
	width:auto;
	display:block;
	/*font-weight:400;*/
	color:#3D3D3D;
}
h3.h3Bold, h3.h3Sub{
	font-size:10px;	
	font-size:1.0rem;
	line-height:1.4em;
	font-weight:400;
	text-align:left;
	margin:10px 2%;
}
h4.h4Enquire, h4.h4Shop{
	clear:both;
	display:inline;
	font-size:1.3em;
	font-style:italic;
}
p.pBody, p.pText, p.pShop{/* pText used in gallerise */
	margin:0 2% 1em 2%;
	font-size:9px;	
	font-size:0.9rem;
	text-align:justify;
	line-height:1.5em;
}
ul.ulGen{
	margin:5px 5px 5px 20px;
	padding:0 0 0 20px;
	width:auto;
	text-align:left;
	float:left;
}
ul li.liGen{
	font-size:1.1em;
	list-style: disc outside;
}
hr.hrDivider { /* xxxx used? */
	width:96%;
	height:0px;
	margin:10px auto 5px auto;
	clear: both;
}
img.imgLeft{/* xxxx used by make page but possibly not used*/
	float:left;
	border:1px solid #000;
	padding:2px 2px 3px 2px;
	margin:5px 20px;
	background-color:#dcdcdc;
}
img.imgRight{/* xxxx used by make page but possibly not used*/
	float:right;
	border:1px solid #000;
	padding:2px 2px 3px 2px;
	margin:5px 20px;
	background-color:#dcdcdc;
}
img.imgCentred, div.dCentred{/* xxxx used by make page but possibly not used */
	border:1px solid #000;
	padding:1px;
	margin:5px auto;
	background-color:#fff;
}
/* tablify */
table.tabGen{
 	margin:20px 0 20px 20px;
 	border-collapse: collapse;
 	width:auto;
 	clear:both;
 	border:1px dashed #ddd;
 }
tr.trGen{
 	
 }
th.thGen{
 
 }
td.tdGen{
 	width:auto;
 	vertical-align:top;
 	padding:0 5px 0 0;
 	text-align:left;
 }
/* end tablify */
/* enquiry and pdf links output in div items by make_page */
div.dInfo{
	float:left;
	width:auto;
	margin:0 0 0 5%;
	text-align:left;
}
img.imgPdfIcon{
	margin:0 2px -4px 0;
}
img.imgEmailIcon{
	margin:0;
}
/* eo enquiry etc */

div.dVid{/* xxxx used by make page but possibly not used */
	
}
/* ============== eo show_page_content ============== */
/* ==============show_page_content highlight========= */
/* not used */
/* =============== eo highlight styles=================== */
/* links */
a.aDark:link, a.aDark:visited, a.aDark:active {/* on dark background */
	color:#000;
	text-decoration: none;
}
a.aDark:hover {
	color:#000;
	text-decoration: underline;
}
a.main:link, a.main:visited, a.main:active {/* on light background */
	color:#000;
	text-decoration: underline;
}
a.main:hover {
	color:#000;
	text-decoration: none;
}
a.aSitemap:link, a.aSitemap:visited, a.aSitemap:active {
	color:#aaa;
	text-decoration:none;
}
a.aSitemap:hover {
	color:#333;
	text-decoration:underline;
}
/* ======================================== down to here */
/* contacts */
h2.h2Small{
	font-size:1.6em;
	font-weight:bold;
	text-align:left;
	margin:0 20px 0px 20px;
	width:auto;
	display:block;
	clear:both;
}
table.tabList{
	float:left;
	margin:0 20px 20px 20px;
	border-collapse: collapse;
	width:auto;
}
td.tdListLeft{
	font-weight:bold;
	text-align:right;
	padding:2px 5px 2px 0;
	font-size:1.4em;
	vertical-align:top;
}
td.tdListRight{
	font-size:1.4em;
	vertical-align:middle;
	text-align:left;
}

/* the WDW footer */
p.pWDW{
	font-size:0.85em;
	margin:5px auto 0 auto;
}
span.spColour{
	font-style:italic;
	color:#1e90ff;
}
a.aNone:link, a.aNone:visited, a.aNone:active {
	color:#aaa;
	text-decoration:none;
}
a.aNone:hover {
	color:#bbb;
	text-decoration:none;
}
/* eo WDW footer */
/* ================ SHOP =============== */

div.dShopItemGrid{
	position:relative;
	background-color:#fff;
	margin:0 0 40px 0;
}
.alt1{
	max-width:700px;
	float:left;
	clear:left;  
}
.alt2{
	max-width:700px;
	float:right;
	clear:right;
}   
div.dImagesWithOverlay {
	position:relative;
}
@media only screen and (max-width: 769px)
{/*px*/
	.alt2  {
		float:left;
	}
}

div.dShopImages {
	width:auto;
	float:left;
	clear:left;
	margin:0 0 0 10px;
	width:auto;
	/*border:1px solid #ccc;*/
}
div.shopImages table {
	width:1px;
	clear:both;
	border-collapse:collapse;
}
div.shopImages table tr {

}
div.shopImages table tr td {
	padding:1px;
	vertical-align:top;
}
div.shopImages table tr td img {
	/* copy img_in_td from elsewhere */
}
/*h2.h2Shop{
	font-size:1.3em;
	text-align:left;
	margin:4px 0 0 2%;
	width:auto;
	font-weight:bold;
}*/
/*h3.h3Shop{ used? xxxx 
	font-size:1.2em;
	line-height:1.4em;
	text-align:left;
	margin:5px 20px;
	width:auto;
	color:green;
}*/

/*p.pShop{
	float:right;
	clear:right;
	margin:5px 2%;
	font-size:1.3em;
	text-align:left;
	width:auto;
	line-height:1.6em;
}*/
/*ul.ulShop{
	margin:5px 20px 5px 20px;
	padding:0 0 0 20px;
	width:auto;
	text-align:left;
	float:left;
	color:#000;
}
li.liShop{
	font-size:1.3em;
	list-style: disc outside;
	color:#000;
}*/
div.dSelections{
	position:relative;
	width:300px;
	margin:0 20px 0 0;
	border:1px dashed #ccc;
	float:right;
	clear:right;
	padding:10px 0 0 0;
	font-size:110%;
}
div.dMore{
	position:absolute;
	right:2px;
	bottom:2px;
	border:1px outset #000;
	width:auto;
	padding:2px;
	-moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
	background-color:#3D3D3D;
	color:#fff;
	font-size:1.3em;
}
div.dBack{
	float:right;
	margin:20px;
	border:1px outset #000;
	width:auto;
	padding:2px;
	-moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
	background-color:#3D3D3D;
	color:#fff;
	font-size:1.3em;
}
label{/* xxxx used? */
	position:absolute;
	top:-10px;
	left:5px;
	/*border:1px solid blue;*/
	background-color:#fff;
	font-size:1.2em;
	padding:2px;
}
/* eo shop */

/* misc */
span.spBold{
	font-weight:bold;
}
br.brClear{
	clear:both;
}
hr.hrClear {
	width:900px;
	height:5px;
	clear:both;
	margin-top:100px;
	border-bottom: 1px solid red;
}
/* italic etc  for html5 doctype xxxx */
strong{
	font-weight:bold;
}
em{
	font-style:italic;
}