body 
{
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;  
	color: black;		
	font-size: 100%;
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	
}	

/* the wrapper 'contains' the whole website display */
#wrapper 
{
	margin: auto;	/* centres the web page */
  	max-width: 1000px;	/* will scale automatically if smaller than this */
	width: 100%;	/* will use up whatever width is available to a max of 1000px */  
	border: 2px solid blue;
	background-color: #BFE2F9;	/* a lightish blue - 191, 226, 249 */
	
}

.h1_heading
{	/* page 2 and onwards - font size set by javascript */
	text-align: center;
	text-decoration: underline;
}

.h2_heading_centre
{	/* page 2 and onwards - font size set by javascript */
	text-align: center;
	position: relative;
	top: -0.5em;
	text-decoration: underline;
}

.h2_heading_left
{	/* page 3 and onwards - font size set by javascript */
	position: relative;
	top: -0.5em;
	text-decoration: underline;
	margin-left: 2%;
}

#container
{	/* see CSS3 - The Missing Manual - page 428 re floating the containing element */
	float: left;
	background-color: #BFE2F9;	/* a lightish blue */
	width: 100%;
	position: relative;
			
}

#sidebar 
{	/* page 1 only */
	width:16%;			/* 16% of the container width */
	float:left;
	background-color: #BFE2F9;	/* a lightish blue */
		
}

#sidebar p
{
	margin-left: 4%;
	
}

#sidebar a
{	
	text-decoration: none;
	
}

.side_menu_button
{	
	padding: 1px;
	/* the font size is set by duo_melodica.js */
	
}

.the_star
{
	color: blue;
	font-size: 120%;
	font-weight: bold;	
}

#main_col 
{
	float: left;
	/*margin-left:21%; 	/* makes sure that anything in this div does not 'spill over' into the sidebar */ 
	width:83%;			/* right column content width (% of container width) */
	background-color: #BFE2F9;	/* a lightish blue */
	
}

#main_image img
{
	width: 96%;	/* 96% of the main_col div */
	margin-left: 2%;	
}

#text_box
{
	width: 96%;
	margin-left: 2%;	
}

#text_box_2
{
	width: 96%;
	margin-left: 2%;	
}

.para_text
{
	margin-left: 2%;
	width: 96%;
	/* font-size is set by JavaScript in module duo_melodica.js in directory js 	 */
}

.commendations_text_box
{
	width: 96%;
	margin-left: 2%;
}

/* the three images going across page 2 (the first line of images) */
/* their widths are set by javascript */

#page2_image_block
{
	display: inline-block;
	width: 100%;
	
}

.page2_line1_images img
{	
	float: left;
	margin-left: 2.5%;
}

#page2_image4
{
	width: 40%;
	margin-left: 30%;
	
}

#page3_image_block
{
	display: inline-block;
	width: 100%;
	
}

.page3_line1_images img
{	
	float: left;
	margin-left: 3.3%;
}

.smallish
{
	font-size: 0.3em;	
}

.smallish_smallish
{
	font-size: 0.15em;
}

#page4_image_block
{
	display: inline-block;
	width: 100%;
	
}

.page4_line1_images img
{	
	float: left;
	margin-left: 3.3%;
}

#page4_image1
{
	position: relative;
	top: 2em;
}

#page4_image3
{
	width: 80%;
	margin-left: 10%;
	
}

#page4_image4
{
	width: 70%;
	margin-left: 15%;
}

.page5_images
{
	width: 90%;
	margin-left: 5%;	
}

#page6_image_block
{
	display: inline-block;
	width: 100%;
	
}

.page6_line1_images img
{	
	float: left;
	margin-left: 3.3%;
}

#page6_image2
{
	position: relative;
	top: 0.01em;	
}

#page7_image1
{
	margin-left: 3%;	
}

#page7_image_block
{
	display: inline-block;
	width: 100%;
	
}

.page7_line2_images img
{	
	float: left;
	margin-left: 3.3%;
}

/* now the horizontal menu bar */
#menu_bar
{  
	display: inline-block;
	width: 98%;	
	margin-left: 1%;
	
}

#menu_bar p
{
	float: left;
	margin-left: 1%;
	
}

.bottom_menu_button
{	
	padding: 1px;
	/* the font size is set by duo_melodica.js */	
}

a:link
{	
	color: black;
	text-decoration: none;
	/* the font size is set by duo_melodica.js */
}

a:visited
{
	color: black;
}

#music_table
{
	width: 90%;
	margin-left: 5%;
	border-spacing: 2%;
	table-layout: fixed;	
}

#music_table td 
{
  width: 22%;
  overflow: hidden;
}

.music_name
{
	color: black;
	position: relative;
	top: -0.7em;
	/* the font size is set by duo_melodica.js */	
}

#overall_container
{
	width: 40%;
	margin-left: 5%;
	display: inline-block;
	float: left;	
}

#music_playing_name
{
	position: relative;
	top: 1.5em;
	margin-left: 2.0em;		
}

.stop_button
{
	position: relative;
	top: -0.85em;
	font-weight: bold;
	border: 2px solid blue;
	cursor: pointer;
	/* the font size is set by duo_melodica.js */	
}

#close
{
	position: relative;
	top: 1.5em;
	margin-left: 0.8em;
	font-weight: bold;
	border: 2px solid blue;
	padding-left: 0.5em;
	padding-right: 0.5em;
	cursor: pointer;
	/* the font size is set by duo_melodica.js */	
}

#hidden_message p
{
	color: blue;
	font-weight: bold;
	font-style: italic;
	margin-left: 4%;
	position: relative;
	top: -0.5em;
}

#musical_notes
{
	width: 20%;
	margin-left: 40%;	
}

.contact_heading
{
	font-weight: bold;
	margin-left: 2%;
	text-decoration: underline;	
}

.address_details_1
{
	font-weight: bold;
	margin-left: 10%;	
}

.address_details_1A
{
	font-weight: bold;
	margin-left: 8%;	
}

.address_details_1B
{
	font-weight: bold;
	margin-left: 12.5%;
	color: blue;
	text-decoration: underline;		
}

.address_details_2
{
	font-weight: bold;
	margin-left: 20%;	
}

.red_message
{
	color: red;	
}

.maintext_blue
{
	color: blue;	
}

#footer_text
{
	text-align: center;
	font-size: 0.85em;
	font-style: italic;	
}

.stop_button_video
{
	font-weight: bold;
	border: 2px solid blue;
	cursor: pointer;
	margin-left: 28%;
	color: red;
	
}

.move_down
{
	position: relative;
	top: 0.5em;
}
/*
@media screen and (max-height: 450px) 
{
    video { height: 100%; }
}*/