/* useful to see all boxes in box model */
/*
* {
   border: 1px solid red !important;
}
*/

/* define some text colors, to limit the number of places to change */
h1, .lightColor,  .titlebarMain { color: #66cc88; }
 h2, .hdrColor, .blackColor, .medBlack, .button1blk, .linkBlack, .linkNoUnderlineBlk {  color: Black; }
.medWhite {color: White; }

h3, td.contentColor, .contentColor, .sansLiteBoldCtr, .medDark { color: #526F51; }
.medLite, .normLite, .sansLite { color:  #d2eeb7;}
strong, em, .linkRed, .button1Red, .linkNoUnderlineRed {color: #ff6666;}

/*ditto for background colors */

.hdrBkrColor, .button1Red, td.hdrColor { background-color: #526F51; }
.contentBkColor, table.elfinPageContent, td.contentColor  /* lt green */
 {
  background-color: #d2eeb7;
 }
.trimBkColor, .button1blk, body {background-color: #66cc88;}
 
 a, strong, em, .bold, .linkBlack, .linkRed, .linkNoUnderlineRed,  linkNoUnderlineBlk 
 {
 font-weight: bold;
 }
 
 
 em { font-style: italic; }
	
.linkNoUnderlineRed,  .linkNoUnderlineBlk { 	text-decoration: none; }

/* unvisited link */
a:link {
    color: green;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
	color: #ff6666;
    
}

/* selected link */
a:active {
    color: hotpink;
}



table.elfinPageContent, div.elfinPageContent, .sansLite {
/*font-family :  "Times New Roman", Times, serif;*/

 /*font-size: 100%;*/
 font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size: 1.0em;
  font-size: 1.0rem;
 font-weight: normal;
 text-align: left;
}

 .sansLiteBoldCtr { 
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size: 1.0em;
  font-size: 1.0rem;
 font-weight: bold;
 text-align: center;
 }

p, ul, ol, li, .normalTxt, .normLite
{
 /*font-family :  "Times New Roman", Times, serif;*/
 font-family : Trebuchet MS, Arial, Helvetica, sans-serif; 
 font-weight: normal;
 text-align: left;
 font-size: 1em;
 font-size: 1rem;
} 

p { /* add some spacing to p tags */
	padding-left: 10px;
	padding-right: 20px;
	  }
  
ul { padding-left: 40px;
	padding-right: 20px;
   }

.smaller { font-size: 60%; }


h1, .largeSize, .titlebarMain
{
font-family : Arial, Helvetica, sans-serif;
font-size: 2.4em;
font-size: 2.4rem;
font-weight: bold;
text-align: left;
}

h2
{
 font-family : "Times New Roman", Helvetica, sans-serif;
  font-size: 1.8em;
 font-size: 1.8rem;
 font-weight: bold;
 text-align: left;
 margin-left: 10%
}

h3 {
 padding-left: 10px; 
 font-weight: bold;
 text-align: left;
 }
 
h3, .subhead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-size: 1.2rem;
	font-weight: bold;
	font-style: normal;
	text-align: left;
}


.medSize, .medBlack, medWhite, .medLite, .button1, .button1blk, .button1Red
{
 font-family : Arial, Helvetica, sans-serif;
 font-size: 1em;
 font-size: 1rem;
 font-weight: bold;
 text-align: left;
}

.mailbody /* not used I don't think */
{
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 700px;
	height: 650px;
}

table.joinCells {
	
 padding: 0px;
 border: 0px;
 border-spacing: 0px;
 border-collapse: collapse;
 }
 

 .button1, .button1blk, .button1Red
 {
	/* background: #d2eeb7; */
	text-align: center;
	text-decoration: none;
	border: thick groove Green;
	padding-top: 6px;
	height: 30px;
	outline-width: 200;
	text-align: center;
	width: 150px;
	margin-left: auto;
	margin-right: auto;
}


.counter { 				/* for GCOUNT visitor counters */
	 width:100%; 
	 min-width:50px;
	 margin-right:15px; 
	 text-align: center; 
	 border: thick groove Green;
	 font-weight: bold;
 }



/* button experiment from web CSS tutorials. Fact is, its so freeking
complicated, I just don't like it and will use another approach.
.btn {
  background: #a5f003;
  background-image: -webkit-linear-gradient(top, #a5f003, #13cf1f);
  background-image: -moz-linear-gradient(top, #a5f003, #13cf1f);
  background-image: -ms-linear-gradient(top, #a5f003, #13cf1f);
  background-image: -o-linear-gradient(top, #a5f003, #13cf1f);
  background-image: linear-gradient(to bottom, #a5f003, #13cf1f);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  font-size: 200%;
  font-weight: bold;
  color: #000f02;
 
  padding: 10px 20px 10px 20px;
  border: solid #052902 1px;
  text-decoration: none;
}

.btn:hover {
  background: #b9fc3c;
  text-decoration: none;
}

  */
  

div.menuTrim  {
 position:relative;
 background: Black;
 margin-left:0px;
 margin-right:3px; 
 z-index: 1; 
 }


div.footerPosAndTrim {
 position:fixed;

 bottom:0px;
 width: 89.5%;
 /*width: 960px;  modified by media rules */
 margin-left:0px;
 z-index: 2;
}

 table.elfinPageContent, div.elfinPageContent 
 {
 /* normal font defined elsewhere */

  padding: 20px;
  /* background: #d2eeb7; */
    top: 5px;
  
  border-left: thin solid #526F51;
  border-right: thin solid #526F51;
  border-top: thin solid #526F51;
  border-bottom: thin solid #526F51;
  position:relative;
 

  width:100%

  /*margin-left:15px;
  margin-right:15px; 
  */

 
}



 div.hideOverflow {
 overflow: hidden; /* scroll */
 }

.imgCenter
{
 	display: block;
    margin-left: auto;
    margin-right: auto;
}

 
/* some older styl;es from past site */


.titleLarge {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	color: Black;
}

.titleMidLft {
	font-size: 18px;
	font-weight: bold;
	font-style: italic;
	text-align: left;
	color: #990000;
}

.titleMidCtr {
	font-size: 18px;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	color: #990000;
}
.titleSubCtr {
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	color: Black;
}



.tiny {
font-size: 12px;
font-family : "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
}



.mainbody {
  width: 90%;
  margin: 0 auto;
  font-size: 100%;
  
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 20px;
	  
}


/* -------------------------------
some styles imported from my other sites. Going forward, these will
better help with images and positioning */

.imLeft50, .imRight50 { width: 50%; min-width: 150px; height: auto; } 
.imLeft25, .imRight25  { width: 25%; min-width: 90px; height: auto; } 
.imLeft35, .imRight35 {width: 35%; min-width: 110px; height: auto; } 
.imLeft, .imRight {width: 35%; min-width: 120px; height: auto; } /* same as above */

.imLeft, .imLeft25 , .imLeft35,.imLeft50 {float: left; margin-right: 10px; }
.imRight, .imRight25, .imRight35,.imRight50 {float: right; margin-left: 10px;}
.imMid {width: 100%; height: auto;}

/* several widths, helpful in approximating photo page layouts */
/* all 1% increment widths, centered from 20-80, plus a few others */
.minWid {width: 1%; } 
.w5 {width:5%} .w10 {width:10%} .w15 {width:15%} 
.w20  {width: 20%;} .w21  {width: 21%;} .w22  {width: 22%;}
.w23  {width: 23%;} .w24  {width: 24%;} .w25  {width: 25%;}
.w26  {width: 26%;} .w27  {width: 27%;} .w28  {width: 28%;}
.w29  {width: 29%;} .w30  {width: 30%;} .w31  {width: 31%;} 
.w32  {width: 32%;} .w33  {width: 33.3%;}
.w34  {width: 34%;} .w35  {width: 35%;} .w36  {width: 36%;}
.w37  {width: 37%;} .w38  {width: 38%;} .w39  {width: 39%;}
.w40  {width: 40%;} .w41  {width: 41%;} .w42  {width: 42%;}
.w43  {width: 43%;} .w44  {width: 44%;} .w45  {width: 45%;}
.w46  {width: 46%;} .w47  {width: 47%;} .w48  {width: 48%;}
.w50  {width: 50%;} .w51  {width: 51%;} .w52  {width: 52%;}
.w53  {width: 53%;} .w54  {width: 54%;} .w55  {width: 55%;}
.w56  {width: 56%;} .w57  {width: 57%;} .w58  {width: 58%;}
.w59  {width: 59%;} .w60  {width: 60%;} .w61  {width: 61%;}
.w62  {width: 62%;} .w63  {width: 63%;} .w64  {width: 64%;}
.w65  {width: 65%;} .w66 {width: 66.6%;} .w67  {width: 67%;}
.w68  {width: 68%;} .w69  {width: 69%;} .w70  {width: 70%;}
.w71  {width: 71%;} .w72  {width: 72%;} .w73  {width: 73%;}
.w74  {width: 74%;} .w75  {width: 75%;} .w76  {width: 76%;} 
.w77  {width: 77%;} .w78  {width: 78%;} .w79  {width: 79%;} 
.w80 {width: 80%;} .w85 {width: 85%;} .w90 {width: 90%;} .w95 {width: 95%;} .w100 {width: 100%; }
.noLRmarg, .minWid, .w5, .w10, .w15, .w20, .w21, .w22, .w23, .w24, .w25, .w26, .w27, .w28, .w29, .w30, .w31, .w32, .w33, .w34, .w35, .w36, .w37, .w38, .w39, .w40,w41, .w42, .w43, .w44, .w45, .w46, .w47, .w48, .w50, .w51, .w52, .w53, .w54, .w55, .w56, .w57, .w58, .w60, .w61, .w62, .w63, .w64, .w65, .w66, .w67, .w68, .w69, .w70, .w71, .w72, .w73, .w74, .w75, .w76, .w77, .w78, .w79, .w80, .w85, .w90 , .w95, .w100 {margin-left:auto; margin-right:auto;}


.center { text-align: center; margin-left: auto; 	margin-right:auto; }

	
.strongcenter /* altered carryover from TTC site. */
 {
 font-family : "Times New Roman", Times, serif;
 color: #990033;	/* same as strong and em */
 filter: glow(color=white,strength=2);  /* weaker than usual blur */
 text-shadow: -1px -1px .2em #ffffff,   
     1px -1px .3em #ffffff,   
     -1px 1px .4em #ffffff;  
 font-weight: bold;
/* font-size: 75%; */
 font-style: italic;
 margin: .5em 0;
 margin: .5rem auto;
 }

  /* confine certain text centered format tags 
  to limit closeness to edge on small screen .
  offset was added as a stand alone class here.
  note first use of H$ in the elfin file.
   */
  
.h4, .strongcenter, .offset  { 
 text-align: center;
 margin-left: 12%; 
 margin-right: 12%; 
 }

 
 .blur {
    filter: glow(color=black,strength=4);  
	 text-shadow: -1px -1px .2em #000,   
     1px -1px .3em #000,   
     -1px 1px .4em #000;  
    	 }
.blurW { /* white blur */
     filter: glow(color=white,strength=4);  
	 text-shadow: -1px -1px .2em #ffffff,   
     1px -1px .3em #ffffff,   
     -1px 1px .4em #ffffff;  
    	 }


 /* useful style for debug scrolling window */

.DivToScroll{   
	display:none;
	width:50%;
	margin:auto; /* scroll as needed */
	height:10em;
	overflow-y: auto;
    background-color: #D0D0D0;
    border: 1px solid black;
    border-radius: 4px;
	font-family: "Courier New", Courier, monospace;
    padding: 5px 7px 5px;
	position: fixed;
	bottom: 3px;	/* tweak these */
	right: 10%;
	}



/* --------------- end of style imports  ------------------ */





/* some media queries */


@media screen and (max-width: 640px) {
  .mainbody {
    width: 100%;
	 font-size: 100%;
	 padding-left: 0px;
	padding-right: 0px;
		 
  }
   div.footerPosAndTrim { width: 99.5%;}
}

@media screen and (min-device-width: 320px) and (max-device-width: 475px)
{
	 .mainbody {
    /* smartphone */
      width:100%;
	  font-size: 85%;
	  padding-left: 0px;
	  padding-right: 0px;
	  padding-top: 0px;
	  padding-bottom: 0px;
	 	 /* test background-color: lightblue; */
	 }
	 div.footerPosAndTrim { width: 99.5%"}
 	
}

@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:portrait) 
{
 p, ul, ol, li, .normalTxt, .normLite .sansLite
  {   font-size: 1.0em; font-size: 1.0rem; } 
 
 table.elfinPageContent, div.elfinPageContent
 	{   padding: 10px; }
  
  h1, .largeSize, .titlebarMain 
      {   font-size: 2.0em; font-size: 2.0rem;}
}

@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:landscape) 
{ 
 	p, ul, ol, li, .normalTxt, .normLite .sansLite
	  {   font-size: .6em; font-size: .6rem;  	} 
	table.elfinPageContent, div.elfinPageContent
 	{   padding: 10px; }\
  
  h3 { font-size: 120%;}
 
 }