@charset "UTF-8";/* CSS Document */
/*  LAST UPDATED 10/16/21 */

/* NB IF CHANGES TO THE CSS SHOW UP ON MY LAPTOP BUT NOT ONLINE AFTER THEY'RE UPLOADED, TRY HITTING CTRL F5 IN THE BROWSER TO FORCE CLEARING THE CACHE.  SHOULD UPLOAD THE CORRECT VERSION. */

/*use these classes to make whatever text you're using red or bold and red for coronavirus closings, cancellations, etc. Note to add this to a paragraph or something that already has a class, separate with a space, like so:  <p class="centered redletter"> text </p>  */
.redletter {color:red;}
							
.redletterbold {color:red;
				font-weight:bold;}

/*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-image: url(images/back_blue_short.jpg);	
  		background-repeat: repeat-x;	
  		background-color: #cfdffc;  		
  		font-family: Arial, Helvetica, sans-serif;	
  		font-size: 14px;
  		color: #333;	
  		text-align: left;
   		}
  		

	/*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 whole 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. */
.container {
			padding: 0px;	
			margin: auto;	
			width: 792px;	
			position: relative;	
			top: 0px;	
			height: auto;
			background-color: #fff; 
			}

 			
/*  Div that holds the logo image at the top of the page 
NB on the kindle this had a white line on each side so I made the image 10px
wider and hung it over the edge of the container 5px.  Since the color is the same as the 
body  you can't see the overlap and it seems to have filled the gap on the kindle. */
#apDiv1_logo {
 	position:relative;
 	width:792px;
 	height:205px;
 	z-index:10;
 	/* left: 0px; */
 	left:-5px;
 	margin:0px;
 	padding:0px;
  } 
   			
/*  Div that holds black Spry menu bar */
#apDiv2_menu {
 	position:relative;
 	width:792px;
 	height:15px;
 	z-index:10;
 	left: 0px;
 	margin:0px;
 	padding:0px;
  } 
 
/*  Div that holds Menu ID lozenge and pagetitle In 'container_bottom'*/
#apDiv3_title {
	position:relative;
	width:792px;
 	height:68px;
 	text-align:left;
 	z-index:5;
 	left: 0px;
	top: 0px;
	/* background-color:pink; */
    }

/*  New Content div.  White backgound, in 'container bottom' */
#apDiv4_content {
 	position:relative;
 	width:692px;
 	z-index:0;
 	left: 0px;
 	/* background-color: pink; */ 
 	margin:0px;
 	padding:20px 50px 30px 50px;
 	}   

/* This is the 13px high black bar at the bottom of the page. */
#apDiv5_bottombar {
 	position:relative;  /* was absolute, with top set on page */
 	width:792px;
 	height:13px;
 	z-index:1;
 	background-color: #000;
 	margin:0px;
 	padding:0px;
} 

/*  This is a spacer below the content, forces the bottom of the page to be below the content.*/
#apDiv6_bottomspacer {
 	position:relative;
 	width:792px;
	height:60px;
	z-index:1;
 	left: 0px;
 	background-color: #cfdffc;  
}

/* This is the container for the double columns */
 	#apDiv7_colcontainer {
 	padding:20px 50px 0px 50px;
	margin: 0px;	
	width: 692px;	
	position: relative;	
	height: auto;
	overflow:hidden; /*these two lines keep the floated cols inside the div. */
	/* background-color: orange;  */
	}

/* this allows the vertical bar between columns to meet the menu bar.  The other two column pages have titles above the column that need the padding, the home page doesn't. */	
#apDiv7_colcontainer.homepage {
	padding-top:0px;
}	
	
	
/*  This is the left column content box for pages with 2 columns.
nb you must have padding at the bottom of the 2 columns and no paddding at the bottom of the container in order
to keep the black line going all the way to the bottom.
692/2=346  */
#apDiv8_leftcol{
	position:relative;
	width:321px;
	z-index:1;
	left:0px;
	float:left;
	margin:0px;
	padding:0px 20px 30px 0px;
	border:none;
	border-right:1px black solid;
	/*background-color:pink; */ 
	}  

/* this allows the vertical bar between columns to meet the menu bar.  The other two column pagesthe padding in the container to get it down below the title stuff */	
#apDiv8_leftcol.homepage, #apDiv8_rightcol.homepage {
	padding-top:20px;  
	/*background-color:green; */
}	

/*  This is the right column content box for pages with 2 columns. */
#apDiv8_rightcol  {
	position:relative;
	width:311px;
	z-index:1;
	left:-1px;
	float:left;
	margin:0px;
	padding:0px 0px 30px 30px;
	border:none;
	border-left:1px black solid;
	/*background-color:yellow */
}



/*  New Content div.  White backgound, in 'container bottom' */
#apDiv9_bottomcontent {
 	position:relative;
 	width:692px;
 	z-index:0;
 	left: 0px;
 	margin:0px;
 	padding:20px 50px 30px 50px;
 	border:none;
 	border-top:1px black solid;
 	/* background-color: pink; */ 
 	}   



/*  This is the bottome one column content box for pages with a 2 column section and a one column section.   Set the height AND THE TOP POSITION on the page
#apDiv7_content_bottom {
  position:absolute;
 	width:690px;
 	z-index:1;
 	left: 50px;
 }	  */
 /*  This is the horizontal line at the bottom of a 2 column page 
The top should be set on the page;  it should be 61 + the height of Div3, the vertical line.
#apDiv9_horizline {
	position:absolute;
	width:792px;
	height:80px;
	z-index:1;
	left: 0px;
}  */
 
 /*  This is the horizontal line on the class pages between the 2 column top section and the single column map/direction section on the bottom.  It doesn't have the 80px space beneath it.  
The top should be set on the page;  it should be 61 + the height of Div3, the vertical line.
#apDiv9_dividerline {
	position:absolute;
	width:792px;
	height:1px;
	z-index:1;
	left: 0px;
	margin:0px;
	padding:0px;
	} */

/*  Div that holds vertical line in the center of the content block, if used.  */
/*  May need to set the height on the page.  The actual line is a gif
#apDiv3_vertline {
 	position:absolute;
 	width:10px;
 	z-index:1;
 	left: 390px;
 	top: 61px;
 	margin:0px;
 	padding:0px;
	}  */




/*  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. 
  
  */
#apDiv10_mapbox {
	position:relative;
	top:0px;
	width:600px;
	height:450px;
	z-index:1;
	margin:20px auto;
	padding: 0px;
	/* background-color:red; */ 
}





/* This is the 10px high empty cell that separates the sections.  It should come before the dotbox/dottitle row. You may need to put a colspan property in it and it needs a &nbps as content. 
td.overdot {
	height:10px;
	width:690px;
	padding:0px;
	margin:0px;
	} */
						
/* NOT THIS WAY.  DO THIS WITH AN H1 HEADER WITH THE DOTA AS A BACKGROND IMAGE, AS BELOW.
td.dotbox and td.dottitlego together to make the top line with the colored dot to the left.
if the 20px high dot is aligned to the top of a 27px high box, the 14px bold text will be in line with it.
Let the td.dottitle class determine the text formatting - don't need <p> or anything.			
td.dotbox {
		height:27px;
		width:20px;
		padding:0px;
		margin:0px;
		text-align:left;
		vertical-align:top;
		}  /*
/* this puts in the height and width of the image */ 
img.dot {
		height:20px;
		width:15px;
		margin:0px;
		padding:0px;
	}
/* See above.  This is used in conjunction with the td.dotbox  
td.dottitle {
			font-family: Arial, Helvetica, sans-serif;	
  		color:#333;
  		font-size:14px;
  		text-align:left;
  		margin:0 0 0 3px;
  		padding:0px;
  		font-weight:bold;
			}  */

/* this is general paragraph setting.  No margins, padding top and bottom 7px (half of std font height, no side padding.  I've been using <br /> for most of my paragraph breaks...  */
p {
		margin:0px;
		padding:7px 0px 7px 0px; 
 		text-align:left;
		/* background-color:pink;  */
	}
		

/* This is for the 'Back to Top' links on the long pages Also see li.backtotop */
p.backtotop {
	text-align:right;		
	margin:10px 30px 10px 0px;
	padding:0px;
	}
/*  Alternative way of doing dots, from http://www.w3schools.com/css/css_list.asp  
p.dotline, dt.dotline {
		margin: 30px 0px 0px 0px; 
		padding: 0px 0px 0px 20px; */ /*moves the text away from the left side
		font-weight:bold;
		background-image: url("images/button_purple_5top.jpg");
		background-repeat: no-repeat;
		background-position: 0px -5px;
		background-color:yellow;
	}*/

/*MAIN HEADING WITH COLORED DOT   USE THIS METHOD*/
/* title line with colored dot AS BACKGROUND IMAGE */
h1 {
	 	font-family: Arial, Helvetica, sans-serif;	
  	font-size: 14px;
  	color: #333; 
  	text-align: left;
		margin: 30px 0px 0px 0px; 
		padding: 0px 0px 0px 20px;  /*moves the text away from the left side to make room for dot*/
		font-weight:bold;
		background-repeat: no-repeat; 
		background-position: 0px -5px;
		clear:both;
		/* background-color:orange; */
	}
	
.orangedot {
	background-image: url("images/button_orange_5top.jpg");
	}
.purpledot {
	background-image: url("images/button_purple_5top.jpg");
	}
.greendot {
	background-image: url("faqs/images/button_green_5top.jpg");
	}
.reddot {
	background-image: url("images/button_red_5top.jpg");
	}	
.magentadot {
	background-image: url("images/button_magenta_5top.jpg");
	}	



/* SECONDARY HEADING no colored dot, bold text.  Use for miscellaneous subheadings, title of Haggis poem, etc. */
h2 {
	 	font-family: Arial, Helvetica, sans-serif;	
  	font-size: 14px;
  	color: #333; 
  	text-align: left;
		margin: 10px 0px 0px 0px; 
		padding: 0px;  
		font-weight:bold;
		/* background-color:tan; */
	}


/* title of Haggis Poem, YOU NEED TO DO THIS */
h2.style1 {
		margin: 30px 0px 0px 0px; 
		padding: 0px;  
		font-weight:bold;
	}

/* Home page centered secondary headings */
h2.style2 {
	margin:0px;
	padding:5px 0px 0px 0px;
	text-align:center;
	font-weight:bold;
	/* background-color:silver; */
}
	
/* HEADING 3  Oversize bold text, with dot.  Use for the 'Month' line in events, etc. */
h3 {
	 	font-family: Arial, Helvetica, sans-serif;	
  	font-size: 20px;
  	color: #333; 
  	text-align: left;
		font-weight:bold;
		margin: 30px 0px 0px 0px; 
		padding: 0px 0px 0px 20px;  /*moves the text away from the left side to make room for dot*/
		font-weight:bold;
		background-repeat: no-repeat; 
		background-position: 0px -2px;
		/* background-color:silver; */  
	}

/* NEW H4  Oversize text, without dot.  Use class to style for different pages */
h4 {
	 	font-family: Arial, Helvetica, sans-serif;	
  	font-size: 20px;
  	text-align: left;
		font-weight:bold;
		margin: 0px; 
		padding:0px
		text-align:left;
	 	/* background-color:gray; */
	}

/* heading of 'officers' page */
h4.style1 {
		padding: 30px 0px 0px 0px;
		font-weight:bold;
		font-style:normal;
		text-align:center;
		color:#333;
		/* background-color:red; */
	}		

/* home page large centered headings WHITE TEXT   see also the next H4 style*/
h4.style2 {
		padding:10px 0px 5px 0px;
		font-weight:normal;
		font-style:italic;
		text-align:center;
		color:#fff;
	}
	
	/* home page large centered headings BLUE TEXT because once you get down toward the bottom of the page where the backgound */
	/* is lighter you can't read the white text on the pale blue background .  The color is html royalblue #4169e1*/
h4.style4 {
		padding:10px 0px 5px 0px;
		font-weight:normal;
		font-style:italic;
		text-align:center;
		color:#444;
	}
	
/* Also heading of 'officers' page, left justified */
h4.style3 {
		padding:0px;
		font-weight:bold;
		font-style:normal;
		text-align:left;
		color:#333;
		/*background-color:red; */ 
	}

/* HEADING 5 This is for the home page events - bold, centered.  Goes with centered paragraphs.  Put a the red gif dot in the top line, break, then the title.  Has to be gif (unlike the other pages, where the dots are jpgs) because you can't have transparent background in a jpg and you need to see the blue background behind it.  I think. */
h5 {
		font-family: Arial, Helvetica, sans-serif;	
  	font-size: 14px;
  	color: #333; 
  	text-align: center;
		margin: 0px auto; 
		padding: 10px 0px 5px 0px;  
		font-weight:bold;
		/* background-color:tan; */ 
}






/*  add 10px of padding below the element  because all the element have 0 bottom padding and margin, sometimes need to add some*/
.add10below  {   
		margin-bottom:10px;
		/* background-color:pink; */
	}



/*  add 20px of padding below the element  because all the element have 0 bottom padding and margin, sometimes need to add some*/
.add20below  {   
		margin-bottom:20px;
		/* background-color:silver; */
	}

.margintop0 {
	margin-top:0px;
}

	
.margintop10 {
	margin-top:10px;
}

/* moves the paragraph to the right out from under the colored dot. */
.inset {
	padding-left:20px;
	/* background-color:gray; */
}


/* ******************* THIS IS GENERAL PAGE STUFF *********************** */	
table { 
				border:0;
				border-collapse:collapse;
				margin:10px 0px 10px 0px;
				padding: 0px;
			}	
			
td	{
			padding:0px;
			margin:0px;
		}				
/* this unformatted list stuff is used on the Rerr Terr page, the Teacher page, and I think the links page.  Should check */
ul	{
			margin:0px;
			padding:0px;
			/* background-color:red; */
		}
	
ul li	{
				list-style-type: disc;
				padding:3px 0px 3px 0px;
				margin: 0px 0px 0px 40px;  /* this gets the marker under the text above it, otherwise it's outside the margin.  */
			}



	
/*  to break up a list:  has padding above and below it, bold font, no disc in front of it.  nb also has 40px left margin from the ul li style above. On Links page, others*/	
li.subhead {
				list-style-type:none;
				padding:12px 0px 10px 0px;
				font-weight:bold;
				/* background-color: tan; */
			}
			
/* This is for the 'Back to Top' links on the long pages Make it the last item in a list  Also see p.backtotop*/
li.backtotop {
	text-align:right;		
	margin:0px;
	padding:10px 30px 0px 0px;
	list-style:none;
	}			

/*  general purpose definition list.  Used for directions on the class pages, other? */
dl {
	margin:0;
	padding:0;
	list-style-type:disc;
}

dt {
	margin: 0;
	padding: 10px 0px 3px 0px;
	font-weight:bold;
	list-style-type:disc;
}

dd {
	margin:0;
	padding:0px 0px 0px 20px;
	font-weight:normal;
}	






/* This is general housekeeping for images.  I don't think image styling works well in css, put image in a div and style that. */
img {
			border:none;
			margin:0px;
			padding:0px;
		}
/* This div is for pictures which will be positioned on the page. Put the caption in another div inside this div.
NB If the pictures is against the side of the container you'll need to give it at least 50px on that side to keep it out of the div 4 padding.  Absolutely positioned elements apparently ignore padding too. */		
div.imagepos {
			position:absolute;
			margin:0;
			padding:0;
			height:auto;
			width:auto;
			/* background-color:red; */
		}

/* This is to hold a picture which is centered across the page.  */
div.imagerelctr {
	position:relative;
	margin:auto;
	padding:0px;
	text-align:center;
	/* background-color:yellow; */
	}				

/* YOU SHOULD RENAME THIS SOMETHING THAT REFLECTS THE FACT THAT IT IS CENTERED ON THE PAGE.  i THINK THE ONLY PLACE THIS IS USED IS THE RERR TERR PAGE, 2 PICS.  This div is the width of the page with the pictures centered inside it.  Put the caption in another div inside this div. */		
div.image {
						margin:auto;
						padding:0px;
						text-align:center;
					 	/* background-color:tan; */
					}				
/* This makes the caption text smaller than the body text.  Put the caption in a separate div inside and under the photo. */
*.caption  {
							font-size:80%;
							text-align:center;
							margin:auto;
							padding:5px 0px 0px 0px ;
						/* 	background-color:silver;  */
						}			
/* make text italic for additional info (musicians under the name of the band, stuf like that. */
*.addit_info 	{
								font-style:italic;
							}
							
.text_poster {
/*  used on the Jane Sharp pages, among other things */
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
padding: 5px 10px 5px 10px;
color: #333;
text-align: center;	
}		
	
.text_poster_left {
/*  like 'text_poster' above, only left justified */
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
padding: 5px 10px 5px 10px;
color: #333;
text-align: left;	
}		

 
/*  ********************** THE FOLLOWING ARE FOR THE CLASS PAGES ***************************	*/

/* these are the littlesquare pictures of the churches where we dance on the class pages  */

/* container for the address floated left and the picture floated right */
div.picpara {
		position:relative;
		margin:0;
		padding:0;
		height:auto;
		overflow:hidden;
		/* background-color:gray; */
	}


div.churchpic {
	position:absolute; 
	height:110px; 
	width:130px; 
	right:0px; 
	top:0px; 
	margin:0px; 
	padding:50px 10px 10px 10px;
	/* background-color:pink; */
}

div.churchpic2 {
	position:relative; 
	height:110px; 
	width:130px; 
	float:right; 
	margin:0px; 
	padding:0px 0px 10px 10px;
	/* background-color:pink; */
}


img.churchpic {
	height:110px;
	width:130px;
	margin:0px;
	padding:0px;
}

/* keeps the text out from under the righthand picture */
p.churchpic {
	margin-right:140px;
}

/* table with colored blocks for class schedules  */
div.pink {
	position:relative;
	width:260px;
	margin:0px;
	padding:10px;
	background-color:#f2e0e0;
	left:20px;
	border:none;
	border-bottom:3px white solid;
}

div.tan {
	position:relative;
	width:260px;
	margin:0px;
	padding:10px;
	background-color:#f2f1e0;
	left:20px;
	border:none;
	border-bottom:3px white solid;
}

div.green {
	position:relative;
	width:260px;
	margin:0px;
	padding:10px;
	background-color:#e6f2e0;
	left:20px;
	border:none;
	border-bottom:3px white solid;
}
table.schedule {
	width:260px;
	padding:0px 0px 0px 20px;
	margin:0px;
}

.color1 {
	background-color:#f2e0e0;
}

.color2 {
	background-color:#f2f1e0;
}

.color3 {
	background-color:#e6f2e0;
}

dl.dir {
	margin:0px;
	padding:0px 0px 0px 20px;
	}

dt.dir {
	margin:0px;
	padding: 10px 0px 0px 0px;
	font-weight:bold;
	
}

dd.dir {
	margin:0px;
	padding:3px 0px 3px 20px ;
	font-weight:normal;
	}
	
/* ******************** THE FOLLOWING ARE FOR THE INDEX PAGE ************************************ */

p.centered {
	margin:0 auto;
	padding:5px 0px;
	text-align:center;
	/* background-color:silver; */
}

p.left{
	margin:0 auto;
	padding:5px 0px;
	text-align:left;
	/* background-color:silver; */
}
/*  ********************** THE FOLLOWING ARE FOR THE EVENTS PAGES ***************************	*/

/* moves the events information over away from the left margin;  nb the month/year isn't inside it it's all the way to the left.  */
div.events {
	margin:0px;
	padding:0px 0px 0px 50px; 
	/* background-color:yellow; */
}	
p.eventdate {
	margin:10px 0px 0px 0px;
	padding:0;
	font-weight:normal;
}
p.eventname {
	margin:2px 0px 0px 0px;
	padding:0;
	font-weight:bold;
}
p.eventinfo {
	margin:2px 0px 0px 0px;
	padding:0px 0px 0px 25px;
	font-weight:normal;
}




/*  ********************** THE FOLLOWING ARE FOR THE FAQs PAGES ***************************	*/


/*  holds the curly green line between sections  */
div.curlyline {
		position:relative;
		top:0px;
		margin:0px;
		padding:0px;
		width:692px;
		height:46px;
		/* height:60px;
		background-color: gray; */
		}

/*  approximately centers lyrics/poetry on the page  The 200px left padding works for the Burns night and Lyric pages.  */
div.lyrics{
		padding:0px 0px 0px 170px;
		margin:0;
		/*background-color:pink; */
	}
			
/*  ********************** THE FOLLOWING ARE FOR THE ABOUT US/TEACHERS PAGE ***************************
		paragraph ends farther from the right side to make room for the teacher pictures.*/

p.teachers {
	padding-right:160px;
	padding-left:20px;
	/* background-color:yellow; */ 
}

img.teacherpic1{
	height:160px;
	width:120px;
	margin:20px 0px 20px 20px;
	padding:0px;
	border:none;
	float:right;
	/* background-color:gray; */
}

ul.teacherlist {     /* sized for 3 200px columns  */
	width:200px;
	padding:20px 0px 0px 0px;
  margin:0px;
	float:left;
}

div.menucols {
	padding: 0px;	
	margin: auto;	
	width: 692px;	
	position: relative;	
	top: 0px;	
	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.*/
}

/*  ********************** THE FOLLOWING ARE FOR THE RERR TERR PAGES ***************************
/* moves the list items over so the disc is under the text  */
td.datelist{
			width:85px; 
			vertical-align:top; 
			position:relative; 
			left:-20px;
			/* background-color:red; */
			}

/* this is the table of rerr terr dances.  It's 670 wide instead of 690 because of the 20px dotbox col on the right.  */
table.rerrterr td{
			/* width:100%; */
			/* width:690px */;
			margin:0px;
			padding:3px; 
			text-align:left;
			vertical-align:top;
			}
			
table.rerrterr td.num {
	
		width:20px; 
		text-align:right;
		padding-left:20px;
		/* background-color:yellow; */
	}
table.rerrterr td.dance {
		width:175px; 
		/* background-color:silver; */ 
		}
table.rerrterr td.desc {
		width:75px;
		font-style:italic;
		/* background-color:red;  */ 
	}
table.rerrterr td.dev {
		/*  width:400px; */
		/* background-color:violet;  */
				} 		
table.rerrterr td.int {
		text-align:right;
			}