body {
font-family: "times new roman", georgia, garamond;
}



/* Comment: General setup for headings etc start here */



/* Comment: this is the cool buttons section */






#nav {

background-color: #33d1ff;
height: 35px;
font-size: 25px;
font-weight: bold;
font-family: "trebuchet ms", tahoma, arial, verdana;

}

#nav ul {

padding: 0;
margin: 0;
list-style-type: none;
text-align: center;

}

#nav li {

display: inline;
padding: 15px;
vertical-align: middle;
}

#nav a {

text-decoration: none;
padding: 8px 8px 8px 8px;
color: white;
vertical-align: middle;
}


#nav a:hover {

color: black;
background-color: white;
}


/* Comment: cool buttons section ends here */




/* Comment: Heading 3 based on Storytime starts here */


.headingl3 {

font-family: "times new roman", georgia, garamond;
color: black;
width: 55em;
margin: -1em auto 0 auto;
padding: 0;
border: 0;
text-indent: 110px;
max-width: 100%;
line-height: 1.5;
font-size: 18px;
background-color: white;

}

/* Comment: Heading 3 based on Storytime ends here */





/* Comment: Heading 4 based on Storytime starts here */


.headingl4 {

font-family: "times new roman", georgia, garamond;
color: black;
width: 55em;
margin: -1em auto 0 auto;
padding: 0;
border: 0;
text-indent: 60px;
max-width: 100%;
line-height: 1.5;
font-size: 15px;
background-color: white;

}

/* Comment: Heading 4 based on Storytime ends here */











/* Comment: Well-spaced text in box section starts here */

.tales {

color: black;
font-size: 15 px;
line-height: 1.5 em;
background-color: #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;

}

/* Comment: Well-spaced text in box section ends here */



/* Comment: Short line length section starts here */

.shortline {

color: black;
width: 36em;
margin: 0 auto;
max-width: 100%;
line-height: 1.5;
font-size: 16px;
background-color: #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;

}

/* Comment: Short line length section ends here */





/* Comment: Short line length section with tighter line spacing starts here */

.shortlinetight {


color: black;
width: 36em;
margin: 0 auto;
max-width: 100%;
line-height: 0.3;
font-size: 16px;
background-color: #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;

}

/* Comment: Short line length section with tighter line spacing ends here */






/* Comment: Medium line length section with box starts here */

.boxmediumline {

color: black;
width: 50em;
margin: 0 auto;
max-width: 100%;
line-height: 1.5;
font-size: 16px;
background-color: #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;


}

/* Comment: Medium line length section with box ends here */








/* Comment: Medium line length section starts here */

.mediumline {

color: black;
width: 50em;
margin: 0 auto;
max-width: 100%;
line-height: 1.5;
font-size: 16px;
background-color: #e5e4d7;
padding: 20px 20px 20px 20px;



}

/* Comment: Medium line length section ends here */




/* Comment: Flattened medium line length section starts here */

.flatmediumline {

color: black;
width: 55em;
margin: 0 auto;
max-width: 100%;
line-height: 1.5;
font-size: 16px;
background-color: white;
padding: 0px 20px 0px 20px;

}

/* Comment: Flattened medium line length section ends here */






/* Comment: Medium line length with single spacing section starts here */

.mediumlinesingle {

color: black;
width: 50em;
margin: 0 auto;
max-width: 100%;
line-height: 1.0;
font-size: 16px;
background-color: #e5e4d7;
padding: 20px 20px 20px 20px;



}

/* Comment: Medium line length with single spacing section ends here */





/* Comment: Tabbed first line, medium line length, 1.2 spacing starts here */

.storytime {

font-family: tahoma, verdana, arial, geneva, arial black;
color: black;
width: 55em;
margin: -1em auto 0 auto;
padding: 0;
border: 0;
text-indent: 50px;
max-width: 100%;
line-height: 1.5;
font-size: 14px;
background-color: white;

}

/* Comment: Tabbed first line, medium line length, 1.2 spacing ends here */




/* Comment: Centred lines, medium line length, 1.2 spacing starts here */

.storycenter {


color: black;
width: 55em;
margin: -8px auto 0 auto;
padding: 0;
border: 0;

text-align: center;
max-width: 100%;
line-height: 1.2;
font-size: 17px;
background-color: white;

}

/* Comment: Medium line length with 1.2 spacing section ends here */





/* Comment: Non-indented lines, medium line length, 1.2 spacing starts here */

.storyplain {


color: black;
width: 55em;
margin: -8px auto 0 auto;
padding: 0;
border: 0;

max-width: 100%;
line-height: 1.2;
font-size: 17px;
background-color: white;

}

/* Comment: Non-indented lines, medium line length with 1.2 spacing section ends here */






/* Comment: Text for footnote in a thin box, medium line length, 1.4 spacing starts here */
/* Comment: Used HTML to give small text and italics */

.storytime_foot {


display: block;
text-align: center;
margin-left: auto;
margin-right: auto;

padding: 0px 18px 0px 18px;
border-color: black;
border-width: 1px;
border-style: solid;
border-radius: 3px;

font-family: tahoma, verdana, arial, geneva, arial black;
color: black;
width: 55em;

max-width: 100%;
line-height: 1.4;
font-size: 13px;
background-color: white;

}

/* Comment: Text for footnote in a thin box, medium line length, 1.4 spacing  ends here */











/* Comment: Flattened text section starts here */

.flat_text {

font-family: times new roman;
line-height: 1;
margin: 0;
line-height: 1.2;
padding: 0px 20px 0px 20px;

}

/* Comment: Flattened text section ends here */







/* Comment: Centred images section starts here */

.center_pic {

display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;

}

/* Comment: Centred images section ends here */



/* Comment: Centred text section starts here */

.center_text {
text-align: center;
}

/* Comment: Centred text section ends here */



/* Comment: this is the picture-frame section */

img.image {

display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 3 px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;

}

/* Comment: picture-frame section ends here */





/* Comment: Indented first line section starts here */

.indented {
 text-indent: 3em;
}

/* Comment: Indented first line section ends here */










/* Comment: this is the picture-frame section */

.framepic {

display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 3 px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;

}

/* Comment: picture-frame section ends here */








/* Comment: LMJ button section starts here */

.mybutton a {

background-color: #e6f2ff;
height: 35px;
font-size: 25px;
color: black;

margin: 0;
width: 10em;


text-decoration: none;
padding: 8px 8px 8px 8px;

vertical-align: middle;


border: 1px solid;
border-radius: 6px;
border-color: black;

}

.mybutton a:hover {

color: black;
background-color: white;
}


/* Comment: LMJ button section ends here */



/* Comment: Smaller button section starts here */

.smallbutton a {

background-color: #e6f2ff;
height: 35px;
font-size: 18px;
color: black;

margin: 0;
width: 10em;


text-decoration: none;
padding: 4px 6px 4px 6px;

vertical-align: middle;


border: 1px solid;
border-radius: 4px;
border-color: black;

}

.smallbutton a:hover {

color: black;
background-color: #e5e4d7;
}


/* Comment: Smaller button section ends here */





/* Comment: Smaller button section starts here */

.smallbutton_orange_lt a {

background-color: #ffc48d;
height: 35px;
font-size: 18px;
color: black;

margin: 0;
width: 10em;


text-decoration: none;
padding: 4px 6px 4px 6px;

vertical-align: middle;


border: 1px solid;
border-radius: 4px;
border-color: black;

}

.smallbutton_orange_lt a:hover {

color: black;
background-color: #ffe0c5	;
}


/* Comment: Smaller button section ends here */






/* Comment: Smaller BLUE button section starts here */

.smallbutton_blue_lt a {

background-color: #bee8ff;
height: 35px;
font-size: 18px;
color: black;

margin: 0;
width: 10em;


text-decoration: none;
padding: 4px 6px 4px 6px;

vertical-align: middle;


border: 1px solid;
border-radius: 4px;
border-color: black;

}

.smallbutton_blue_lt a:hover {

color: black;
background-color: #cdeeff	;
}


/* Comment: Smaller button section ends here */







/* Comment: this is the center buttons section */

#centerbutton {


height: 35px;
font-size: 25px;
font-weight: bold;
font-family: times new roman, georgia, garamond;

}

#centerbutton ul {

padding: 0;
margin: 0;
list-style-type: none;
text-align: center;

}

#centerbutton li {

display: inline;
padding: 50px;
vertical-align: middle;
}

#centerbutton a {

background-color: #e6f2ff;
height: 35px;
font-family: times new roman, georgia, garamond;
font-size: 24px;
color: black;

margin: 0;
width: 10em;

vertical-align: middle;


border: 1px solid;
border-radius: 4px;
border-color: black;




text-decoration: none;
padding: 8px 8px 8px 8px;
color: black;
vertical-align: middle;
}


#centerbutton a:hover {

color: black;
background-color: #e5e4d7;
}

/* Comment: center buttons section ends here */










/* Comment: unframed landscape pic&cap in box section starts here */


.picbox {
	
	color: black;
width: 36em;
margin: 0 auto;
max-width: 100%;
line-height: 1.5;
font-size: 16px;
background-color; #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;
text-align: center;

}


p.picbox {
	
	text-align: center;
		
}



img.picbox {

display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 3 px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;


}


/* Comment: unframed picture and caption in box section ends here */




/* Comment: unframed landscape pic&cap in box 50% wide section starts here */


.picbox50 {
	
color: black;
width: 36em;
margin: 0 auto;
max-width: 50%;
line-height: 1.5;
font-size: 16px;
background-color; #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;
text-align: center;

}


p.picbox50 {
	
	text-align: center;
		
}



img.picbox50 {

display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 3 px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;


}


/* Comment: unframed picture and caption in box 50% wide section ends here */



/* Comment: unframed landscape pic&cap in box 30% wide section starts here */


.picbox30 {
	
	color: black;
width: 36em;
margin: 0 auto;
max-width: 30%;
line-height: 1.5;
font-size: 16px;
background-color; #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;
text-align: center;

}


p.picbox30 {
	
	text-align: center;
		
}



img.picbox30 {

display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 3 px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;


}


/* Comment: unframed picture and caption in box 30% wide section ends here */





/* Comment: unframed landscape pic&cap in box 25% wide section starts here */


.picbox25 {
	
	color: black;
width: 36em;
margin: 0 auto;
max-width: 25%;
line-height: 1.5;
font-size: 16px;
background-color; #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;
text-align: center;

}


p.picbox25 {
	
	text-align: center;
		
}



img.picbox25 {

display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 3 px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;


}


/* Comment: unframed picture and caption in box 25% wide section ends here */










/* Comment: unframed landscape pic&cap in box ?? wide section starts here */


.picboxvar {
	
	color: black;
width: 36em;
margin: 0 auto;

line-height: 1.5;
font-size: 16px;
background-color; #e5e4d7;
padding: 20px 20px 20px 20px;
border: black 2px solid;
border-radius: 10px;
text-align: center;

}


p.picbox50 {
	
	text-align: center;
		
}



img.picbox50 {

display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 3 px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;


}


/* Comment: unframed picture and caption in box ?? wide section ends here */





/* Comment: section for a circular link green button starts here */

.dot {
  height: 25px;
  width: 25px;
  background-color: #3ede76;
  border-radius: 50%;
  display: inline-block;
  
  
span.halftab {
margin:0; padding:0px 0px 10px 0px;
padding-right:15px;
}


  
}


.dot:hover {

color: black;
background-color: #8ebf42;
}

/* Comment: section for a circular link green button ends here */





/* Comment: section for a circular link green button starts here */

.blue_dot {
  height: 25px;
  width: 25px;
  background-color: #9999ff;
  border-radius: 50%;
  display: inline-block;
  
  

}


  
  
}


.blue_dot:hover {

color: black;
background-color: #6666ff;
}

/* Comment: section for a circular link green button ends here */








/* Comment: section for an indented circular link button starts here */

.indot {
  height: 25px;
  width: 25px;
  background-color: #3ede76;
  border-radius: 50%;
  display: inline-block;
}


.indot:hover {

color: black;
background-color: #8ebf42;
}

/* Comment: section for an indented circular link button ends here */






/* Comment: logo section starts here */


.logo {

display: block;
text-align: center;
margin-left: auto;
margin-right: auto;


}

/* Comment: logo section ends here */


/* Comment: section to centre a block starts here */

.central {
          margin: 0 auto;
  width: 400px;
  display: block;

}


/* Comment: section to centre a block ends here */





/* Comment: span to give tab section starts here */

span.tab {
margin:0; padding:0px 0px 10px 0px;
padding-right:30px;
}



/* Comment: span to give tab section ends here */






/* Comment: span to give half-tab section starts here */

span.halftab {
margin:0; padding:0px 0px 10px 0px;
padding-right:15px;
}


/* Comment: span to give half-tab section ends here */




/* Comment: Section starts here for big Basalt button */
/* Comment: this version gives a light blue button */

.basaltbutton a {


Display: inline;
margin-left: auto;
margin-right: auto;



background-color: #cdeeff;
height: 35px;
font-size: 30px;
color: black;






margin: 0;
width: 10em;



text-decoration: none;
padding: 4px 6px 4px 6px;

vertical-align: middle;



border: 1px solid;
border-radius: 4px;
border-color: black;


/* Comment: Section ends here for big Basalt button */

}








/* Comment: Section starts here for big Basalt button */
/* Comment: this version gives a pale orange button */

.basaltbutton_orange_pale a {


Display: inline;
margin-left: auto;
margin-right: auto;



background-color: #ffae74;
height: 35px;
font-size: 30px;
color: black;






margin: 0;
width: 10em;



text-decoration: none;
padding: 4px 6px 4px 6px;

vertical-align: middle;



border: 1px solid;
border-radius: 4px;
border-color: black;


/* Comment: Section ends here for big red Basalt button */

}









/* Comment: Section starts here for big Basalt button */
/* Comment: this version gives a red button */

.basaltbutton_red a {


Display: inline;
margin-left: auto;
margin-right: auto;



background-color: #ff8176;
height: 35px;
font-size: 30px;
color: black;






margin: 0;
width: 10em;



text-decoration: none;
padding: 4px 6px 4px 6px;

vertical-align: middle;



border: 1px solid;
border-radius: 4px;
border-color: black;


/* Comment: Section ends here for big red Basalt button */

}


















/* Comment: xx section starts here */
/* Comment: xx section ends here */




/* Comment: end of file */