/* 
STYLE SHEET FOR TEMPLATE DEVELOPED FOR GXSA WEB SITE
Created by Ken Moss September 2009

ToC
	1. defaults
	2. structure divs
	3. sub-structure divs
	4. navigation
	5. images
	6. tables
	7. forms
	
Notes

	1	template uses descriptive colours and borders to delineate areas.   
	2	Template split into divs.  Not all divs are necessary for a particular page/application.
	3	Structure avoids tables, but using fixed width divs.  (Template could  be changed for 
		"liquid layouts".
	4	Uses relative sizing  for all fonts.
	
/*=====================*/
/*		1.  DEFAULTS  	  */
/*=====================*/

*     {
		margin: 0;
		padding: 0;
		border: 0;
}

/*	 page background  */
body {
		padding: 20px;
		line-height: 1.5em;
		background: #CCCCCC;  /* pale grey  */
    	font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
    	color: #4C5A9B;   /* as logo  */	
		font-size: 70%;
		text-align: center;  /* for IE and FF compatibility  */
}
		
html  {
		font-size: 100%;
		height: 100%;   /* forces scroll bars */
		margin-bottom: 0.01em;
}

/* used only for hoizontal menus in internal pages */
span {
		padding: 0 1em 0 1em; 
}

/*=============================*/
/*		2.  STRUCTURE    divs    */
/*=============================*/

/*		fixed width outside wrapper for web main page */
/*		which places it in the centre of screen.      */
#wrap {
		margin:  0 auto;  /* centres page on screen in FF */
		text-align: left;     /* required to cancel center in body tag  */
		/* text-align: center;  centres pages in IE */
		width: 960px;
		background-color: #FFFFFF;  /* white  */
		border-color: #666666; /*  grey;*/
		border-style: solid; 
		border-width: 1px;
		border-bottom-width: 0;  
		padding: 10px;			/* provides all round border to site */
		/* clear: both;   */
}

/* for narrow ancilliary pages  */
#wrap_narrow {
		margin:  0 auto;  /* centres page on screen in FF */
		text-align: left;     /* required to cancel center in body tag  */
		width: 550px;
		background-color: #FFFFFF;  /* white  */
		border-color: #666666; /*  grey;*/
		border-style: solid; 
		border-width: 1px;
		padding: 10px;			/* provides all round border to site */
		clear: none; 
		/* float: left;  */
}

/*		defines outer box for yachtmaster quiz answers   */
#wrap_ans {
		margin:  0 auto;
		text-align: left;  /*to cancel text align left in body for IE centres text on page  */
		width: 600px;
		background-color: #FCF64C;  /*  pale yellow  */
		border: black;  		
		border-style: solid;
		border-width : 1px;
		padding:10px;			/* provides all round border to site */
		/*clear: both;  */
		/* float:left;  */
		height: 350px;  
}

/*   main information box in centre of page - holds sub containers in main body of site  */
#main_contents {
		width: 960px; 
		border: 0; 
		float: none; 
		clear: both; 
		padding: 0;
}

/* was .wide_div changed to #   */
#wide_div {
		width: 100%;
		height: 20px;
		background: #FFFF99;  /* pale yellow  */
		margin: 8px 0;
		float:left;
}
		

/*		defines the top navigation bar across the full page which appears after the logo
		 ( See navigation section for associated styles */
#tp_nav_container {
		clear: none;  
		float: left; 
		width: 960px;		
		background: transparent;
		/*background: purple;	 debug */
		margin-top: 0;
		margin-bottom: 1px; 
		margin-left: 0;
		margin-right: 0;
		padding-left: 4px; 
}

/*	defines strip under main menu that displays subcontents of each main menu items - controlled with javascript  */
#nav_guide {
		margin-top: 10px;
		display: inline; 
		color: #808080;   /* grey  */
		/* background-color: fuchsia;   debug  */
		width: 960px; 
		clear: both;
}

/*		Container for left hand column, most likely a navigaton bar; fixed width.  
		Care about the height  and background.  */
#left_container {  
		clear: none;  
		margin: 0;
		float: left;  
		top: 0;
		margin-top: 1em;
		width:205px;
		/*margin-bottom: 2em;  */
		/* background-color: teal;  debug */
		height: auto;
}

/*		Container for main content in middle of page.  Actual content uses further divs assume that this is the heighest (fullest)  element */
#middle_container {
		margin: 0;
		/* margin-top: 1.0em;  debug  */
		margin-bottom: 1.0em;
		float:left;
		clear: none; 
		width: 550px;
		padding: 0px;
		/* background: gray;   debug */
}


/*		right hand fixed column.   */
#right_container {
		/*position:  relative;  */	
		width: 205px; 
		float: left;  
		clear: right; 	
		margin: 0;
		/* height: auto;  */
		/*background-color:  #FFFF99;   debug" */
		/*width: auto;  doesn't work in firefox */
		/*margin-right: 0.8em;  */
}

/* space within main wrap ahead oaf athe footer used for the GXSA strapline   */
#prefooter  {
		background: #4C5A9B;   /* blue matches logo  */
		color: #FFFFFF;  /* white  */
		width: 960px;
		clear: both;   
		float: left;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 4px;
}
	
/*  blank div at foot of page inside the wrapper.  Use for address,phone number copyright etc as required  */
#footer {
		clear: both;
		float: none;
		margin: 0;
		width: 960px;
		height: 20px;  
		/*margin-top: 8px;  */
		/* background: #FFFF99;   pale yellow  */
		background: #BFE2F9;   /* Pale blue  */
		font-weight: 700;  /*  bold  */
		color: #FF0000;  /* red  */
		text-align: center;
		padding: 0.1em;
}

/*  div beyond the wrapper which is in the body.  This is intended to hold supplementary key menu items as template.
		It is important that colors, if any,  are discrete.  Other supplementary info can be added as requried.   */
#postfooter {
		margin: 0 auto;  
		text-align: left;
		clear: both; 
		width: 980px;	
		height: 2em;
		/*border-top: 1px;  */
		border-style: solid;
		border-color: #66CCFF;  /* pale blue  */
		background: #CCCCCC;  /* pale grey  */			
}


/*================================== */
/*		3. 1  MIDDLE section of main pages DIV           */
/*			                                                                     */
/*================================= 	 */
		
.wide_content  {
		/*display: block;  */
		width: 520px;
		background: #FFF;  /* white  */
		padding: 5px;
		clear: none;
		margin-top: 3px;
		margin-bottom: 2px;
		margin-left: 10px;
		margin-right: 10px;	
		border: 1px;
		border-style: solid;
		border-color: #93A9D5;  /*  paleish blue  */
		float: left;
}


/*		 class for half width column under in middle container.  Floats to the left.  Two of these can sit side by side.  width defined with spacer gifs  */ 		
.half_content_left {
		background: #FFF;  /* white  */	
		width: 231px;
		padding: 0;
		margin-top: 3px;
		margin-bottom: 2px;
		margin-left: 10px;
		margin-right: 2px;
		border: 1px;
		border-style: solid;
		border-color: #93A9D5;  /*  paleish blue  */
		clear: none;
		float: left;
}

.half_content_right {
		background: #FFF;  /* white  */
		width: 231px;
		padding: 0;
		margin-top: 3px;
		margin-bottom: 2px;
		margin-left: 2px;
		margin-right: 20px;
		border: 1px;
		border-style: solid;
		border-color: #93A9D5;  /*  paleish blue  */
		clear: none;
		float: right;
}

/*==================================== */
/*		3. 2  RIGHT sections of main pages DIV                  */
/*			                                                                         */
/*================================== 	 */
/* photo block in RH container */
#photo_info {
	margin-top: 30px;
	margin-left: 9px;
} 

/* photo held in embedded table cell  */
/*  table id */

#photo_info table  {
	margin: 0; 
	border-style: none; 
	padding: 0; 
	background-color: #BFE2F9; 
	/*margin-top: 30px; */
	/* width: 120px;  */
}

#photo_info img {
	padding: 0;
	margin: 0;
	border-style: none;
	width: 180px;  /* controls the size of teh photo box  */
}

#photo_info tr td {
	margin: 0; 
	border-style: none; 
	padding: 0; 
	color: red; 
	background-color: #BFE2F9;
	/* margin: 0 auto;  */
}

#photo_info #photo_title {
	margin: 0; 
	padding: 10px;
	border-style: none; 
	text-align: center; 
	/*color: black; */
	font-size: 0.9em; 
	background-color: #BFE2F9; 
	/* margin: 0 auto;  */
}

/*==============================  */
/*   Quiz block  */
/*  for quiz block controlled by JS   */

#quiz  {
	background-color: #BFE2F9;  /* pale yellow  */
	width: 200px;
	margin-left: 2px;
	clear: both;
}

#quiz p#quest {
	padding: 15px;
	font-size: 1.05em;
	line-height: 110%;
}

#quiz img {
	padding: 0;
	clear: both;	
}

#quiz #pose {
	margin-left: 40px;
	clear: both;
}

#quiz #pose img {
	clear: both;
}

#quiz p#info {
	padding: 15px;
	padding-top: 50px;
	padding-bottom: 15px;
	font-size: 0.90em;
	line-height: 100%;
	color: #808080;   /* grey  */
	clear: both;
}

#quiz a#answer_link {
	font-size: 1.0em;
	margin-left: 80px;
	width: 100%;  /* required for FF  */
}

 
/*==========================================================	*/
/*   4  NAVIGATION																											*/
/* 		The schema has three navigation bars : 																*/
/*		    -  A top menu, ( nav)  																							*/
/*         -  a left hand menu (lh_nav) 																				*/
/*			-  menu beneath the wrapper, (post footer). 														*/																																												
/*==========================================================	*/
/*  TOP menu  */

#nav { 										/* horizontal container	 for menu */
	
		position: relative;
		top: 10px;						/* defines top margin above menu bar  */ 
		padding: 0;
		margin: 0;
		clear: none;
		float: left;
		/*background: transparent;  */		
		height: 35px ;						/* height of horizontal menu bar  ie menu container - drives space between bar and director */
		/*margin-left: 6px;  */

}

#nav ul { 									/* container for drop down lists   */
		margin: 0;
		line-height: 1;       				/* positions text on background */
		clear: none;			
}

#nav a {
		text-decoration: none;			/* gets rid of underlines in links  */
		display: block;
		
}

#nav li { 									/*  format for all  horizontal list items on menu bar */
		/*  width: 30em; 					width needed for Opera doesn't seem to have any effect in FF and IE */
		position: relative;
        top: 0px;  
  		display: block;
		clear: none;
		float: left; 
    	/*border-left: 1px solid #999;	 sets border round all menu items */
		border: 1px solid #999999;
	    border-color: #92aed3;		
		width: 121px;						/* width  and height of menu items on main menu  */
		height: 20px;						/* amend according to application  */
		list-style: none;
		text-align: center;
		vertical-align: middle;
		font-family: Arial, Tahoma, Verdana, sans-serif;
      	font-size: 1.2em;  				/* font size of horizonal and drop menu items  */
		padding: 2px 0;			
		margin: 0;							/* margin between individual menu items both horizon and drop  */
		background-color: #92aed3;			/* same blue as sky */
		color: #30587f;       /* sea blue */
}

#nav li.spacer {
		
	background-color: transparent;
    width: 15px;  /*  avoids inheritance  */
	border-width: 0;
	margin: 0;
	padding: 0; 
}

#nav li.spacer:hover {
		
	background-color: transparent;
}

#nav a:hover {  		/* changes format of hoverred items in main menu line  */
	color: #FFFFFF;  /* white */
	/*color: green;  */
}

/*==========================================================	*/
/*  LEFT  menu  */

/* Line up   navigation box within div   --*/
#lh_nav {
		clear: right;
} 
		
 /*--defines text area on which each menu item is placed  */
#lh_nav li  {    
		list-style-type: none;		
}

/*  controls area around navigation entries  */
#lh_nav a   {
		height:15px;
		text-decoration: none;
		text-align: center;
		background: #92aed3;			/* same blue as sky */
		color: #30587f;       					/* sea blue */
		display: block;
		font-size: 1.0em;
		vertical-align: middle;
		border: 1px;
		border-style:solid;
		border-color: #FFFFCC;  /* very pale blue  */
		padding:2px ;
   		margin: 0 40px 10px 40px;
}


/*   mouse hovers */
#lh_nav a:hover {
		/*background: #006600;    dark green */
   	    color: #FFF;  /* white  */
}

/*==========================================================	*/
/*  SECONDARY LEFT  MENU  used for historical talks ion program page  */

/* Line up   navigation box within div   --*/
#lh_nav1 {
		clear: right;
} 
		
 /*--defines text area on which each menu item is placed  */
#lh_nav1 li  {    
		list-style-type: none;		
}

/*  controls area around navigation entries  */
#lh_nav1 a   {
		height:15px;
		text-decoration: none;
		text-align: center;
		background: #92aed3;			/* same blue as sky */
		color: #d32759; /*  red  */
		display: block;
		font-size: 1.0em;
		vertical-align: middle;
		border: 1px;
		border-style:solid;
		border-color: #FFFFCC;  /* very pale blue  */
		padding:2px ;
   		margin: 0 40px 10px 40px;
}


/*   mouse hovers */
#lh_nav1 a:hover {
		/*background: #006600;    dark green */
   	    color: #FFF;  /* white  */
}

/*==========================================================	*/
/*  POST Footer  menu  */

#postfooter ul {
		display: inline;  
		margin-left: 320px; 
		position: absolute;
}

#postfooter li {	
		clear: none;		
		float: left;
		display: inline;		
		border-left: 2px solid #999;		
		border-color: #666666;  
		width: 110px;
		font-size: 1.0em;		
		list-style: none;
		padding-top: 0.2em;
		padding-bottom: 0.2em;
		margin: 0;
		text-align: center;
		height: 1.5em;	
		/*margin-bottom: 0.3em;  */
		background: #CCCCCC;  /* pale grey  */	
}
		
#postfooter a {
		text-decoration: none;
		color: #666666; /*  gray;*/
}

#postfooter a:hover {
		color:maroon;
}
/*=====================MENUs  END ============================  */
/*==========================================================	*/
			 
/* NETRINO 
/*==========================================================  */

/* #netrino {
	float: left;
}

  */
  
#netrino img {
margin-left: 7px;
float: left;
}




/*===========	*/
/*		5.  Forms  		*/
/*===========   	*/


/*--------------------------------------------------------------------------*/
/* -***   MAILING   LIST  SUBSCRIBE  ***                          	*/
/*--------------------------------------------------------------------------*/

/* div styling */	
#mailing_list  {
		width: 180px;
		margin: 10px;
		line-height: 150%;
		font-size: 1.0em;
		color: #0000FF;  /* Full blue */
		/* background: red;  debug */
}

/* for email submit form  */
#input_text_mail {
		margin: 0 auto;
		font-size: 1em;
		color: #0000FF;     /* dark blue   */
		/*padding: 0 auto;  */
		border: 1px;
		border-style: solid;
		border-color: #66CCFF;   /*pale blue  */
}

.submit_email {
		clear: none;
		font-size: 1em;
		margin-left: 4em; 
		color: #0000FF;   /* full blue */
		margin-top: 4px;
		border: 1px;
		border-style: solid;
		border-color: #66CCFF;   /*pale blue  */
}

/*-------------------------------------*/
/*  *** Contact Us form    *****/
/*-------------------------------------*/


#formdes label {
	margin-left: 30px;
	margin-top:5px;
	width: 150px;
	float: left;
	clear: left;
}
/*
#formdes .long {	
	margin-top: 5px;
	width: 410px;
	verticle-align: center;
	clear: none; 
	background-color: red; 	
}  */

#formdes .longi {
	margin-top: 10px;
	margin-right: 100px;
	float: right;
	clear: right; 	
}

.asterix {
	color: red;
}

#formdes input, select {
	margin-top: 5px;
	border-width: 1px;
	border-color: #000000;
	background-color: #ECECEC;  /* v page grey */
	clear: right;
	color: #4C5A9B;   /* blue matches logo  */
}

#formdes input.long {
	border-width: 1px;
	border-color: black;
	background-color: #ECECEC;  /* v page grey */
	color: green;
	clear: right; 
	float: right;
	clear: both; 
}

#formdes textarea {
	background-color: #ECECEC;  /* v page grey */
	color: #4C5A9B;   /* blue matches logo  */
	width:215px;
	margin-left: 0;
	clear: right; 	
}

#formdes select {
	width: 220px;
}

#sendbox {
padding: 10px;
margin-left: 195px;
font-size: 1.1em;
float: left;
clear: both;
}

#reset {
padding: 10px;
margin-left: 110px;
font-size: 1.1em;
float: left;
clear: both;
background: red;
}

#formdes-footnote {
	float: left;
	font-size: 0.9em;
	margin-bottom: 20px;
	}
	
/*=============================	*/
/*		6.  Text Styles      							  		*/
/*============================   	*/

 h1  { 
		color: red;  /* red  */
		font-size:1.3em;
		padding-bottom: 0.4em;		
}

/*  used for programme page  */
.wide_content h1 {
	margin-left: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	color: #30587f;       		/* sea blue */
	text-align: left;
}
				
.content_right h1 , .content_left h1 {
		color:#006600;    	/*dark green */
		font-weight: normal;
		text-align: center;
		background-color: #FFFF99;   /* yellow  */
}


p  {
	margin: 10px;
	margin-top: 0em;
	margin-bottom: 1.0em;
}
	
.list_content {
		width: 90%;
		margin:10px auto 10px auto;
}

.list_item_row td{
		margin: 0;
		background: #D5DCEF;
		vertical-align: top;
		line-height: 1.3em;
		padding: 0.5em;
}

.item_row {
		color:#555; /* dark grey */
		background: #D5DCEF;
		vertical-align: top;
		padding-top: 5px;
		margin: 0;
}

.list_item_row a {
		margin: 0;
		padding: 0;
		color:#555;  /*dark grey */
}

.list_item_row a:hover {
		color: #000;  /* black  */
}

h2	{
	color: #d32759;
	background-color: #BFE2F9;
	font-size: 1.2em;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-bottom: 10px;
	margin-top: 5px;
	clear: left;
	font-style: normal;
	font-variant: normal;

}

h2 #centre {
		padding-left: 145px;
}

h3  {
		color: #d32759; /*  red  */
		font-size: 1.2em;
		text-align: center;
		padding-bottom: 0.8em;
}
.half_content h1 {
		color: red;  /* red  */
		font-size:1.2em;
		padding-bottom: 0.4em;		
}

.half_content h2 {
color: #0000ff;  /*mid blue */
		/* color: #009933;   bluey green  */ 
		font-size: 1.1em;
		padding-bottom: 0.4em;
}

.half_content h3 {
	color: #FF0000 ; /*  red  */
		font-size: 1.1em;
		text-align: center;
		padding-bottom: 0.8em;		color: #009933;  /* bluey green  */ 		
}
/* for challenge answer page  */

#ans_description p {
	color: black;
	float: left; 
	margin-left: 20px;
	margin-bottom:15px;
}

#ans_description  li  ul{
font-size: 1.1em;
color: black;
clear: left;
float: left;
margin-left: 50px;
margin-bottom: 5px;
}

#wrap_ans a {
		float: left;
		color: red;
		font-size: 1.2em;
		background: white;
		border-style: solid;		
		border-color: black;
		border: 2px;
		padding: 5px;
		margin: 20px;
		margin-left: 45%;
}


#ans_description {
width:400px;
font-size: 1.1em;
color: red;
clear: none;
float: right;
background: green;
}


/*=================================================================== */
/* 												Tables (for programme page)  														*/
/*===================================================================*/

table {
	font-size: 1.1em;
	margin: 3px;
	border-color: #93A9D5;  /*  paleish blue  */
	background-color: #93A9D5;  /*  paleish blue  */
	border-style: solid;
	border-width: 1px;
	padding: 5px;
}

table tr  td {
	background-color: #FFFFFF;  /* white  */
	border-style: solid;
	border-width: 1px;
	border-color: #93A9D5;  /*  paleish blue  */
	padding: 10px;	
}
table  h3 {
	color: red;
	font-size: 1.0em;
}

.col1 {
	font-size: 1.1em;
	text-align: center;
	color: #30587f;  /*sea blue */
}

.col1 p {
	font-size:0.9em;
	font-weight: bold;
	color: #30587F;
	text-align: center;
	vertical-align: middle;
}


/*=================================================================== */
/* 												Tables Etc (for committee page)  													*/
/*===================================================================*/

table .twocol {
margin: 0;
border: 1px;
background-color: red;
}

.twocol img {
	height:150px;
}

.twocol td {
text-align: center;
width: 250px;
padding: 0;
margin: 0;
}

/*===========	*/
/*		7.  Images  		*/
/*===========   	*/
#middle_container .left  {
		border: 0; 	
		width: 230px;
		margin: 10px;
		float: left;
		clear: left;
}

#middle_container .right  {
		border: 0; 
		width: 230px;
		margin: 10px;
		float: right;
		clear: right;
}

.headleft {
	border: 0px none;
	float: left;
	clear: both;
	margin: 0px;
	padding: 0px;
	height: 50px;
	width: 505px;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	clip:  rect(0px 0px 0px 0px);


}

/* used for locating image on RHS middle */
img.middle {
		/* clear: all;   try to avoid overlaps  */
		margin-top: 10px;
		margin-left:15px;
		margin-bottom:10px;
		background: #FFF;  /* white  */
		/*float: none;  */
		/*  clear: none;  */
	}

img.left {
		border: none;   /* removes borders on hyperlink */
		/* margin:15px 15px 10px 0;   */
		float: left;
		clear: right;
		padding: 0;
		padding-right: 10px;
		margin-right: 10px;
		/* width: 150px;  */
		}

/*===========================================================================	*/
.textbox_input {
		background-color:#CCCCCC;  /* paler gray */
		color:#000;  /* black  */
		border: 1px;
		border-style: solid;
		border-color: #666666; /*  gray;*/ 
		margin-left:  160px;
		margin-top: 20px;
		margin-bottom:20px;
}

#answer {
position:absolute;
left:50px;
width:150px;
background: transparent;
border: 20px;
}