/*
style sheet 02_navigation_links.css applies:

•	navigation link button hover effect if you use buttons

*/
/*colour is defined after a hash symbol
three pairs of characters represent the three colours RED, GREEN, BLUE
full brightnees of a colour is represented by   ff
total absence of a colour is represented by     00
each character can have one of these values:   0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
it's a number system called hexadecimal, which gives you 256 shades of each colour
if it had been designed as two decimal characters it would have only given 0 to 99, which would have been less flexible.
here are some examples
    */

/*pure white
  #ffffff;
pure black    
  #000000;
pure red
  #ff0000;
dark red
  #cc3333;
pure yellow
  #ffff00;
pale yellow
  #ffffcc;
pure green
  #00ff00;
pure blue
  #0000ff;
*/

/* half height button   */
a.half_button
{
	display:block; 
	width:100%;  /*each link will fill the width of whatever contains it*/
	text-align:center;
	text-decoration:none; /* prevent the hyperlink underline */
	font-family: Arial, Helvetica, sans-serif;
	text-size: 6;
	color: #053331;/* set the colour of the link text */
	background-color: #053331;
	/*border-bottom:1px solid white;*/ /* separate the links from each other by a thin white line  */
}

/* Here you will see a dot between the word table and the word link_button.
When you see such a dot in a style sheet, it means the HTML page must use a class attribute to refer to this part of the style sheet.
In this case, you would use  <a href="myfile.html" class="link_button" />   */
a.link_button
{
	display:block; 
	width:100%;  /*each link will fill the width of whatever contains it*/
	text-align:center;
	text-decoration:none; /* prevent the hyperlink underline */
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF; /* set the colour of the link text */
	background-color: #053331;
	/*border-bottom:1px solid white;*/ /* separate the links from each other by a thin white line  */
}
/* set the navigation link hover colour */
/* if you use   <a href="myfile.html" class="link_button" />  you should get this effect automatically */
a.link_button:hover { 
	background-color:#5a91c7 
}