@charset "UTF-8";/* CSS Document */
/*  LAST UPDATED 8/25/22  This is the edited version */

/*use these classes to turn the background color when you are testing tables etc. */
.testpink {background-color:pink;}
.testyellow {background-color:yellow;}
.testgray {background-color:gray;}
.testtan {background-color:tan;}
.testsilver {background-color:silver;}
.testblue {background-color:blue;}

body {	
  		background-color: lightgray;  		
  		font-family: Arial Rounded MT Bold, Arial, Helvetica, sans-serif;	
  		font-size: 1 em;
  		color: #000;	
  		text-align: left;
   		}
  
/*Do I still need this?  these lines are to prevent the android from jacking up the text size when it renders the page.  The immediate problem with that is that that dot to the left of the line becomes an insignificant off center bullet.  Also the page top and stuff look tiny comparatively and it isn't doing it across the board.  Some text is large, some isn't.  If it's all small the user can just zoom the whold thing.  This is kind of a kludge, though and you really need to check it on different platforms.  It shouldn't change anything on the PC of most other devices. */
 p, li, h1, a, ul, dt, dl, dd { 
    /* prevent font boosting on mobile devices  It seems like this actually works the way it should on the android.  Not the I phone.
    Don't put td in here, though.  */
    /* width: 100%; */
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

/* The container div holds all the content and centers it on the page.  Also the 80% sets the width of the content window*/
.container {
			padding: 0;	
			margin: 0  auto;       
			width: 80%;	
			position: relative;	
			top: 0px;	
			height: auto;
			background-color: #fff; 
			border: 3px solid red;
		}

/* Div at the top of the page that holds the logo image. */
#Div_logo {
	/* do I need to set the position?   position:relative;  */
 	max-width:1000px;
 	max-height:175px
 	margin:0px;
 	padding:0px;
 	}


/* This is the left side of the top section, ie the menu list. */
div.menulist {
	float:left;
	padding: 0px;	
	margin: 0;	/* this was set to '0 Auto' originally, do I need to do this to center it?  or do I not want it centered? */
	width: 20%;	
	position: relative;  /* think I need to do this go get it to float? */	
	height: auto;			
	overflow:hidden;  /*this prevents the content from being outside the container div.  Because the menu columns are floated inside this div, they will extend down below it (floated elements have no height) unless you use this.  What this really does is hide any content that is larger than the height of the div, but since I have height set to auto I think it will just expand to enclose whatever is there and won't hide any of it.  I think this actually makes it a block display or something.  An alternative way of doing this is to put <br clear="all"/> in your html after the last floated element (here, it would be the last line of the div.  But then you have to mess with the line every time you use it.  This is called 'clearfix' and there are a bunch of ways of doing it, evidently.*/	
	/* background-color:pink; */ 
}	

/* This is the right side of the top section */ 
div.homeinfo {
	float:right;
	width:80%;
	padding: 0px;	
	margin: 0;	/* this was set to '0 Auto' originally, do I need to do this to center it?  or do I not want it centered? */
	position: relative;	
	height: auto;			
	overflow:hidden;
 	/* background-color:yellow; */ 
}

/*  This is a spacer below the content, forces the bottom of the page to be below the content.*/
div.bottomspacer {
 	position:relative;
 	width:100%;
	height 30px;
 	left: 0px;
 	background-color: lightgray; 
}

/*  Makes the links red.  I tried using the 'visited' 'active' etc but all that happened was they links turned the 'visited' color and never changed back at all, even if you closed the window and re-opened it.  Don't know why, this is a small page don't really need to differentiate. */
a {
	color: red;
	text-decoration: underline;
}
/*  What they say.  I couldn't get the clear's to work as classes, though.  */
.FL {
	float: left;
}
.FR  {
	float: right;
}
.CR  {
	clear: right;
}
.CL  {
	clear: left;
}
.CB  {
	clear: both;
}

/* put this div where you want the floated element to stop.  This does work */
div.cleardiv {
	clear:both;
}
/* This is for ephasizing important text phrases, i.e 'we're moving' or whatever. */
strong { 
    font-weight: bold;
		color: red;
}

	/* This is for the 'Back to Top' links on the long pages Also see li.backtotop */
p.backtotop {
	text-align:right;		
	margin:10px 30px;
	padding:0px;
	}		

p {
	margin:0 auto;
	padding:10px 30px;
}

/* holder for the picture and caption.  Set the float class here.  Margin set here to hold pics away from each other. 
use order div picholder - div pic - img - p caption */
div.picholder {
	display:inline-block;
	background-color:white;
	border:none;
	margin:10px 30px;
	padding:0;
}

/* Container for images.  Padding and border make it look like a photo with a white frame.  Set image height and width in img tag*/
div.pic  {
	display: inline-block;
	background-color:white;
	border: black 5px inset;;
	margin:  0 px;
	padding: 10px;
}
/* picture caption but you have to use 'style=width:##" set to same width as image  to keep it from making the picture div too wide. The 1-px top margin keeps the caption below the picture.  Other than that all the spacing is in the picholder div*/
p.capt {
	font-size:75%;
	margin: 5px 0px 10px 0px;
	padding:0;
	background-color:white;
	}


	/* thick black dividing line between sections   Do I want to use this as a clear?*/ 	  
hr {
	height: 5px;
	background-color: black;
		margin: 20px 0px;
	padding: 0px;
} 	  			

p {
	margin:0 auto;
	padding:10px 30px;
}


/* section titles */
h1 {font-family: Arial Rounded MT Bold, Arial, Helvetica, sans-serif;	
  	font-size: 150%;
    	color: #000; 
  	text-align: left;
	margin: 0 auto;
	padding: 10px 30px;
}
  		
/* centered text for special events DOESN'T WORK WHY NOT?*/
h2 {background-color:blue;
		font-family:Arial Rounded MT Bold, Arial, Helvetica, sans-serif;	
  	font-size:  150%;
    color:  #000; 
  	text-align:center;
  	line-height:150%;
	margin: 0 auto;
	padding: 10px 30px;
}




/*  This is the container for the map, mostly to center it. 
I used Google maps, the 'medium' size embedded map is 600 wide by 450 high.   */
#div_mapbox {
	/* DO I NEED THIS?  position:relative; */
	top:0px;
	width:600px;
	height:450px;
	z-index:1;
	margin:0 auto;
	padding: 0px;
	}

table {margin: 10px 30px;
		padding: 0;
		border: 2px solid black;
}

 th, td {
    border: none;
    margin: 0;
    padding:10px;
}
/*  the following two properties are for dances in the schedule that have already happened;  thought it might be better to gray them out rather than delete them because otherwise by the end of the year it will look like we don't have any dances.  I don't like the way it looks, thought, so I didn't end up using it.*/

td.past {
	color: dimgray;
}
a.past {
	color: indianred;
}

*/  use the following to make the alternating colored rows */
table tr:nth-child(odd) td{
		background-color:whitesmoke;
}
table tr:nth-child(even) td{
	background-color:lightgray;
}
 /*this is the un-ordered list for the menu at the top of the page */
li {
	margin: 0;
	padding: 5px 0px;
}