/*
Stylesheet: downeast.css
Web site  : destamps.com
Created   : 2017-03-03
Notes     :
Site structure:
  Three divs:
    menupanel fixed at top, outside all, slides in-out from left
    pagebanner fixed at top
    content scrolls under pagebanner
*/

/* ===========================================================================*/
/* We need a reset to start here                                              */
/* ===========================================================================*/
img {
  max-width:100%;
}

/* ===========================================================================*/
/*                                                   */
/* ===========================================================================*/
body{
  /*font-family:'Open Sans',Arial,Helvetica;
  font-size:16px;*/
  position:relative;
  color:white; 
	background-color:#001658;
	overflow:auto;
}

#pageBanner {
	position:fixed;
	top: 0;
	left: 0;  
	width:100%;
  z-index:8;
	background-color:#001658;
	height:4em;
}
.bannerText {
  text-align:center;
  width:80%;
  margin:1em auto 1em auto;
}
.bannerText h1{
  display:inline;
}
.bannerText h4{
  /*This appears only when the closing date for 
  the most recent sale has closed. We need to crowd it
  up under the <h1> title, w/o making the banner taller.*/
  margin:-0.5em 0 0 0;
  padding:0;
}
#menubutton {
  padding-right:2em;;
}
#hdrSrchBtn {
  padding-left:2em;
}
#menupanel {
	position: fixed;
  top: 4em;
  right: 0;
  bottom: 0;
  left: 0;
	width: 250px;
	height:100%;
  z-index:3;
  overflow-y: auto;
  background-color:#001658;
  box-shadow:.5em .5em .5em gray;
  margin:0 0 5em 0;
  padding-bottom:2em;
}

#content {
  position:fixed;
  top:4em;
  left:250px;
  bottom:1em;
  width:75%; 
  margin-bottom:0;
  padding:0;
  background-color:#001658; 
  color:navy;
  z-index: 2;
 /* height:100%;
  	width:100%;
overflow-y:auto;*/
}

/*We sometimes display aboutUs pages in
a popup window which requires add'l styling.*/
#popup {
  position:fixed;
  top:4em;
  left:0;
  bottom:1em;
  width:95%; 
  margin:0 auto 0 auto;
  padding:0;
  background-color:ivory;
  color:navy;
  z-index:2;
 /*height:100%;*/
  	/* width:100%;
overflow:auto;*/
}

/*Every page that we load into <div #content comes inside
its <div #remoteContent, so it is a parent div of 
.aboutPages and #lotPage.  */
#remoteContent{
  position: relative;
  height:100%
}

.aboutPages {
  position:absolute;
  top:0;
  left:2em;
  right:0;
  bottom:1em;
	text-align:left;
	margin:0;
	padding:2em;
	/*width:auto;
	width:95%;*/
	max-width:500px;
	line-height:1.3em; 
	/*height:800px;*/
	background-color:ivory;
	overflow-y:scroll;
}
.aboutPages h1 {
  text-align:center;
  font-size:1.5em;
  line-height:1em;
  margin:0;
  padding:0; 
}
.aboutPages h2 {
  text-align:center;
	font-size:1.2em;
}

.aboutPages li {
  margin-bottom:1em;
}
.aboutPages a {
  font-weight:bold; 
}
.aboutPages a:link {
  color:blue; 
}
.aboutPages a:visited {
  color:purple;
}
.aboutPages a:hover {
  color:red;
}
.aboutPages a:active {
  color:blue; 
}

.howtobid em {
  font-weight:bold;
  font-style:italic;
}
.howtobid p {
  margin-top:0;
}


.notesTable {
	border:1px solid #E5E5E5;
	border-collapse:collapse;
	text-align:left;
	width:80%;
	margin:auto;
}
.notesTable tr td {
	border:1px solid #E5E5E5;
	border-collapse:collapse;
	padding:0.5em;
	text-align:center;
}
.notesTable th {
	border:1px solid #E5E5E5;
	border-collapse:collapse;
	text-align:center;
}
.notesTable caption{
	font-weight:bold;
}

#lotPage {
  position:absolute;
  top:1em;
  left:0;
  right:0;
  bottom:1em;
	text-align:center;
	width:90%;
	margin:0 auto 50px auto;
	padding-bottom:50px;
	background-color:#001658;
/*	height:600px;
	overflow-y:auto;*/
}
#lotPage h2, h4{
  padding:0;
  margin:0;
}
#pageHeading {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  margin:auto;
  height:5em;
  text-align:center;
  background-color:orange;
	color:#001658;
	border-bottom:1px solid black;
  z-index:3;
}

#lotText {
  /* scroll everything under the pageHeading*/
  position:relative;
  top:5em; 
  background-color:ivory;
  /*height:200px;*/
  height:90%;
  overflow-y:auto;
  z-index:0;
  padding:1em 0 4em 0;
  margin-bottom: 20px;
}

#pageHeading h2,h4 {
  padding:0;
  margin:0;
}
.subhead {
  padding-bottom:2em;
  height:auto;
}

.subhead_title {
  background-color:#e5e5e5;
  font-weight:bold;
  text-align:center;
  margin:0;
  padding:.5em;
  height:2em;
  vertical-align:middle;
  border-bottom:2px solid white;
}
/* #e5e5e5 is a little darker grey*/
.lotTable {
	border:1px solid #E9E9E9;
	border-collapse:collapse;
	text-align:left;
	width:80%;
	margin:auto;
}
.lotTable tr td {
	border:1px solid #E9E9E9;
	border-collapse:collapse;
	padding:0.5em;
}
.lotTable th {
	border:1px solid #E9E9E9;
	border-collapse:collapse;
}
.lotTable .desc{
	width:50%;
}
.lotTable .photo{
	width:15%;
}
.lotTable caption{
	font-weight:bold;
}

/*These divs create the 'pages' (1,2,3...) 
on getPrices.php.  */
.priceDiv {
	text-align:center;
}
.priceDiv a {
  font-weight:bold;
  text-decoration:none;
}
.priceDiv a:link {
  color:red; 
}
.priceDiv a:visited {
  color:blue; 
}
.priceDiv a:hover {
  color:orange;
}
.priceDiv a:active {
  color:red; 
}
.pagePicker{
  text-align: center;
  font-size: 1em;
}

/* #e5e5e5 is a little darker grey*/
.priceTable {
	border:1px solid #E9E9E9;
	border-collapse:collapse;
	text-align:left;
	width:80%;
	margin:auto;
}
.priceTable td {
	border:1px solid #E9E9E9;
	border-collapse:collapse;
}
.priceTable th {
	border-bottom:1px solid black;
	border-collapse:collapse;
}
.priceTable caption{
	background-color:white;
	padding-bottom:1em;
}
.priceTable .lot{
  background-color:#fcfcfc;
}
.priceTable .price{
  text-align:right;
  padding:0.5em;
  background-color: #e9e9e9;
  border-bottom:1px solid black;
}
.priceTable .divider{
  border:none;
  width:1em;
  padding:0;
}


/*= = = = = = = = = = = = = = = = = = */
/*       @media:   all devices        */
/*= = = = = = = = = = = = = = = = = = */
/*
@media only screen and (height : 200px){
	.aboutPages {
		height: 100px;
	}	
}
@media only screen and (height : 400px){
	.aboutPages {
		height: 200px;
	}	
}
@media only screen and (height : 600px){
	.aboutPages {
		height: 400px;
	}	
}
@media only screen and (height : 800px){
	.aboutPages {
		height: 600px;
	}	
}
@media only screen and (height : 1000px){
	.aboutPages {
		height: 800px;
	}	
}
*/

/*= = = = = = = = = = = = = = = = = = */
/*      @media:  Mobile devices       */
/*= = = = = = = = = = = = = = = = = = */

/*
This works for iPod/small iphone.
Checking for max-height doesn't seem to work.
When checking landscape mode, note that the 
width is the width in that orientation 
(the device's largest dimension).
*/
@media only screen 
and (max-width : 414px)
and (orientation: portrait){
  /*img {max-height:100%;}*/
  #pageBanner{
    height:3em;
  }
  .bannerText {
		width:90%
  }
	.bannerText h1{
		font-size:1em;
	}
	#content {
		top:2em;
		width:98%; 
	}
	.aboutPages {
		padding: 2em 1em 1em 1em;
		/*height:400px;*/
	}	
	#pageHeading h2{font-size:1em;}
	#pageHeading h4{font-size:.8em;}
	#pageHeading {
		height:4em;
	}

	#lotText {
	  top:4em;
	  /*height:300px;*/
	}
	
	.subhead_title {
		font-weight:bold;
		text-align:center;
		margin:0;
		padding:.25em;
		height:1.25em;
		border-bottom:1px solid white;
		overflow:auto;
	}
}
@media only screen 
and (max-width : 568px)
and (orientation : landscape){
  #pageBanner{
    height:3em;
  }
	.bannerText h1{
		font-size:1em;
	}

	#content {
		top:2em;
		width:98%; 
	}
	.aboutPages {
		padding:1em;
		/*height:200px;*/
	}	
	#pageHeading h2{font-size:1em;}
	#pageHeading h4{font-size:.8em;}
	#pageHeading {
		height:4em;
	}

	#lotText {
	  top:4em;
	  /*height:100px;*/
	}
}
/* * * * * * * * * * * * * * * * */
/*Size for tablets*/
/* * * * * * * * * * * * * * * * */
@media only screen 
and (min-width : 415px)
and (max-width : 800px)
and (orientation: portrait){
  /*img {max-height:100%;}*/
  .bannerText {
		width:90%
  }
	.bannerText h1{
		font-size:1em;
	}
	#content {
		width:95%; 
	}
	.aboutPages {
		padding-left: 1em;
		/*height:700px;  avail screen height is ~1024*/
	}	
	#lotText {
	  /*height:750px;*/
	}
	
	.subhead_title {
		font-weight:bold;
		text-align:center;
		margin:0;
		padding:.25em;
		height:1.25em;
		border-bottom:1px solid white;
		overflow:auto;
	}
}
@media only screen 
and (min-width : 569px)
and (max-width : 1024px)
and (orientation : landscape){
	.aboutPages {
		padding-left: 1em;
		 /*height:580px;avail screenhgt is ~768*/
	}	
	#lotText {
	  /*height:450px;*/
	}
}


/*========= END ===========*/