<!-- CSS goes in the document HEAD or added to your external stylesheet -->

table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
  	text-align: center;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
    text-align: center;
}
/*Arrow used on Main page for list items */
ul.ab {
  /*  image for list items on home page*/
   list-style-image: url('http://www.arrowsky.co.uk/wp-content/uploads/2017/05/Arrow1-15x15.png'); 
}

/* Controls all the list items on the main page ie those with an arrow */
li.a {
    color:DarkBlue;
}

/* The Footer 2 has 4 links that are in a list.  This makes them appear as buttons same colors as contact button */
a.c {
display:inline-block;
background-color:#125fe5;
color: #FFFFFF;
padding: 14px 25px;
text-align: left;
/*text-decoration: none;*/
font-size:16px;
opacity:1;  
}
/* This addition to class c means that a hover gives darker blue colour to the button.  Looks like White text gets overwritten with grey though */
a.c:hover {
  text-decoration:none;
/*color:rgba(255,255,255,1); */
background-color:#002db3;
opacity:1;
}



/*Does the footer navigation of the 4 items. The Role does all the links in one go but the class c has to be written for each one */
nav[role="Footer1"] li a {
    display: block;
    text-decoration: none;
    margin-right: 0;   /* space between links */
    width: auto;   /* adjust width as needed or use auto  */
    padding: 4px;
    font-weight: bold;
    line-height: 1em;
    border-left: 1px solid #333333;  
    border-right: 1px solid #333333;
    border-top: 1px solid #333333;
    border-bottom: 10px solid #333333;  
}

/* Sets the list text to Dark Blue   Think this is redundant now but now investigated */
/*li[role="HomeList1"] {
    display: block;
    text-decoration: none;
    margin-right: 0;
    width: auto;   
    padding: 6px;
    font-weight: bold;
    line-height: 2em;
    color: DarkBlue;
  }
*/

/* Hover over a button - maybe keeps the text as white but not sure on the rest */
button[role="ButtonHover1"] {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    margin: auto;
    text-decoration: none;
    display: block;
    font-size: 16px;
}
/*Does all text throughout in different colour etc like that on Home Page*/
/*media all*/
body, button, input, select, textarea {
    color: Gray;
    font: 16px "Lato", sans-serif;
    line-height: 20px;
    word-wrap: break-word;
}

/*Does the navigation links on each page at the top like About Us, but only the unpressed colour not the pressed link colour*/
/*media all*/
/*.main-navigation a {
    color: DarkGreen /*rgba(57, 143, 20, 1);*/
    /*display: block;
    float: left;
    padding: 16px 0 0;
    height: 30px;*/
}


/*Sub Menu main colour*/
/*media all*/
.main-navigation ul li ul li a, .main-navigation ul li.current-menu-item ul li a, .main-navigation ul li ul li.current-menu-item a, .main-navigation ul li.current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a, .main-navigation ul li.current_page_item ul li a {
    
    float: none;
    line-height: 21px;
    font-size: 13px;
    font-weight: normal;
    height: 100%;
    padding: 6px 10px;
    color: Gray /*rgba(255, 165, 0, 1);*/
}