body 
{
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;  
	font-size: 100%;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	background-color: #8DCFF4;	/* a lightish blue */
}	

/* 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: 4px solid navy;
	background-color: navy;
}

/* ******************************************* public page heading css ********************************* */
#head_area_container
{	
	float: left;
	width: 100%;
}

#MGCC_logo_area_left
{
	float: left;
	width: 13%;	/* 13% of the head area container */
}

#centre_header
{
	float: left;
	width: 73%;	/* 73% of the head area container */
}

#MGCC_logo_area_right
{
	float: left;
	width: 13%;	/* 13% of the head area container */
}

#centre_header img 
{
	width: 96%;  /* makes the image scalable */
	margin-left: 3%;
	margin-top: 1%;
}

#MGCC_logo
{
	 width: 90%;	/* makes the images scalable and sizes them */
	 margin: 4% 12% 4% 12%;
}

/* *************************************************** container css **************************************** */
#container
{	/* see CSS3 - The Missing Manual - page 428 re floating the containing elements */
	float: left;
	width: 100%;	/* 100% of the wrapper width */
}

/* ************************************************* sidebar css ******************************************** */
/* Style the sidenav links and the dropdown button */
/* with thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown */
#sidenav 
{
	width: 25%;			/* 25% of the container width */
	float: left;
	background-color: navy;
}

#sidenav a,
.dropdown-btn 
{
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 17.0px;	/* set by public_area.js */
    color: white;
    display: block;
    border: none;
    background: none;
    width: 99%;
    text-align: left;
    cursor: pointer;
    outline: none;
	
}

#dropper
{
	padding-bottom: none;
}

/* On mouse-over/hover */
#sidenav a:hover, 
.dropdown-btn:hover 
{
    color: red;
}

/* Add an active class to the active dropdown button */
.active 
{
    background-color: navy;
    color: white;
	
}

.dropdown-container 
{
    display: none;
    background-color: #00AEED;	/* a blue */
    padding-left: 2%;
	
}

/* Style the caret down icon */
/* with thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_arrows */
i 
{
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down 
{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
	margin-left: 15%;
}

/* ********************************************** main column and inner boxes css ********************************************* */
#main_col 
{
	float: left;
	width: 75%;						/* main column content width (% of container width) */
	background-color: #8DCFF4;		/* main column background colour (a lightish blue) */
}

br.clear_it
{
	clear: both;					/* needed to clear the 'float lefts' */	
}

#login_container
{
	margin: 1em;
	
}

#member_login input,
#m_login
{
	font-size: 1.0em;	
}

fieldset 
{
	border: 1px solid navy;
}

#member_login label.error
{
	text-align: left;
	font-size: 1.0em;
	color: blue;
    font-weight: bold;
	display: block;
	width: 80%;
    margin-left: 11%;
	padding-top: 1%;
}

.centre_text
{
	text-align: center;
}

#inner_container_2
{
	margin-left: 1em;
	width: 98%;
	
}

/* *******************************************************scrollable box css **************************************** */
#y_axis_scrollable_box
{
	overflow-y: auto;
	height: 500px;
	margin-right: 0.5%;
}

.y_axis_scrollable_box_head
{
	font-size: 120%;	/* gets adjusted by public_area.js */
	font-weight: bold; 
	text-align: center;
}

.y_axis_scrollable_box_head_2
{
	font-size: 110%;	/* gets adjusted by public_area.js */
	font-weight: bold; 
	text-align: center;
	position: relative;
	top: -0.5em;
}

.y_axis_scrollable_box_text
{
	font-size: 100%;	/* gets adjusted by public_area.js */
	margin-right: 1%;
	font-weight: normal;
}

/* *******************************************************contacts css **************************************** */
#contacts_box
{
	margin-left: 1em;
	margin-top: 1em;
}

.contacts_table th,
.contacts_table td
{
	font-size: 100%;	/* gets adjusted by public_area.js */
	
}

#contacts_head
{
	text-align: center;
	font-size: 100%;	/* gets adjusted by public_area.js */
}

/* *******************************************************regalia css **************************************** */
.regalia_container
{
	float: left;
	width: 98.5%;
	border: 2px solid navy;
}

.regalia_image_container
{
	float: left;
	width: 20%;	/* 20% of the regalia container */
}

.regalia_image
{
	 width: 95%;	/* makes the images scalable and sizes them */
	 margin: 1.5%;
}

.regalia_text
{
	float: left;
	width: 80%;	/* 80% of the regalia container */
}

.regalia_sales_message
{
	text-align: center;
	position: relative;
	top: -0.6em;
	font-size: 100%;	/* gets adjusted by public_area.js */
}

/* *******************************************************about css **************************************** */
.about_mgbs_texts>li
{
	font-size: 100%;	/* gets adjusted by public_area.js */
}

/* *******************************************************events css **************************************** */

.events_p
{
	margin-left: 2%;
	margin-right: 2%;
	font-size: 100%;	/* gets adjusted by public_area.js */
}

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

.text_centred
{
	text-align: center;
}

.navy_colour
{
	color: navy;
}

.underlined
{
	text-decoration: underline;	
}

/* *******************************************************captain's news css **************************************** */
#captains_news_heading
{
	text-align: center;
	font-size: 100%;	/* gets adjusted by public_area.js */
}

/* *******************************************************history css **************************************** */
#history_top
{
	height: 1px;
}

#history_table
{
	border-style: solid;
	border-width: 1px;
	border-color: black;
	
}

#history_table th,
#history_table td
{
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

#history_table td
{
	text-align: center;
}

/* *******************************************************technical css **************************************** */
#technical_table
{
	border-style: solid;
	border-width: 1px;
	border-color: black;
	
}

#technical_table th,
#technical_table td
{
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

#technical_table th,
#technical_table td
{
	text-align: left;
	vertical-align: top;
	/* width: 45% !important */
}

.section_link
{
	text-decoration: underline;
}

/* *******************************************************competition_descriptions css **************************************** */
.competitions_descriptions_container
{
	float: left;
	width: 97%;
	/* border: 2px solid navy; */
}

.competitions_descriptions_picture_container
{
	float: left;
	width: 24%;	/* 20% of the competition_descriptions_container container */
}

.competions_decsriptions_image
{
	 width: 95%;	/* makes the images scalable and sizes them */
	 margin: 1.5%;
}

/* *************************************************** for the slideshows and captains news ******************************************** */
#inner_container
{	/* within the main_col div */
	margin-left: 1em;
	margin-right: 1em;
	float: left;
	width: 96%;
}

#news_box
{
	margin-left: 1em;
	margin-top: 1em;
	margin-right: 1em;	
}

#news_box p
{
	font-size: 1.0em;	/* gets adjusted by public_area.js */
}

#main_photos
{
	margin-top: 0.75%;
	margin-bottom: 0.75%;
}

/* ************************************************ other *********************************************************** */
.footertext
{
	text-align: center;
	color: white;
	margin-top: 0.5em;
	margin-left: 5%;
}

.red_message
{
	color: red;
}

.blue_message
{
	color: blue;
}

.buying_spacer
{
	height: 1px;
}

.secondary_ordered_list>li
{
	list-style-type: lower-alpha;
}