/*
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:#336d87;
	overflow:auto;
}

#pageBanner {
	position:fixed;
	top: 0;
	left: 0;  
	width:100%;
  z-index:8;
	background-color:#336d87;
	height:5em;
}
.bannerText {
  text-align:center;
  width:80%;
  margin:1em auto 1em auto;
}
.bannerText h1{
  display:inline;
}
.bannerText h2{
  display:inline;
}

#menubutton {
  padding-right:2em;;
}
#hdrSrchBtn {
  padding-left:2em;
}
#menupanel {
	position: fixed;
  top: 6em;
  right: 0;
  bottom: 0;
  left: 0;
	width: 150px;
	height:100%;
  z-index:3;
  overflow-y: auto;
  background-color:white;
  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:white; 
  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:0;
  right:0;
  bottom:1em;
	text-align:left;
	margin:0;
	margin-left:2em;
	padding:2em;
	/*width:auto;
	width:95%;*/
	max-width:500px;
	line-height:1.3em; 
	/*height:800px;*/
	background-color:white;
	overflow-y:scroll;
}
.aboutPages h1 {
  text-align:center;
  font-size:1.5em;
  line-height:1em;
  margin:0;
  padding:1em; 
}
.aboutPages h2 {
  text-align:center;
	font-size:1.2em;
}

.aboutPages li {
  margin-bottom:1em;
}



/*= = = = = = = = = = = = = = = = = = */
/*       @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;
	}
.bannerText h2{
		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;
	}
	.bannerText h2{
		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;
	}
	.bannerText h2{
		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 ===========*/