/*
 * Colour Styles
 * - Dark Blue: #024A94 
 * - Light Blue: #33b5e5 When buttons are selected, slightly darker than the light background blue below
 * - Light Blue: #0099cc  For news & Footer
 * - 
 */




/*
 * Defining how news appears
 */

.bottom {
    border-bottom:thin dotted;
    border-color:grey;
    font: 10px;
    color:#333;
}




/*
 * Defining how news appears
 */

.news {
  font: 10px Verdana;
 }


/*
 * Defining for left side menu
 */

ul.sidenav li a {
	    display: block;
	    color: white;
	    text-align: left;
	    padding: 8px 8px;
	    text-decoration: none;
	}





/*
 * This is for menu and page layout
 */


* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif, arial;
}

/*  Top Menu background colour : was....    background-color: #9933cc;    */

.header {
    background-color: #33b5e5;
    color: #ffffff;
    padding: 15px;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Side Menu, colour of box - was 33B5E5 */

.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#024A94;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


/* Top Menu, background colour */

.menu li:hover {
    background-color: #0099CC;
}





/* Style for news section */
	
.aside {
    background-color: #0099CC;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Colour of footer */

.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}




/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}


/*
 * The following places the Adobe & other Logos, next to links ("a href=...") to a linked document
 */

a[href$=".pdf"]:before
{
  padding-right:2px;
  content: url(Pics/Logo-Adobe.png);
}

a[href$=".doc"]:before
{
  padding-right:2px;
  content: url(Pics/Logo-MS-Word.png);
}

a[href$=".docx"]:before
{
  padding-right:2px;
  content: url(Pics/Logo-MS-WordX.png);
}

a[href$=".xls"]:before
{
  padding-right:2px;
  content: url(Pics/Logo-MS-Excel.png);
}

a[href$=".xlsx"]:before
{
  padding-right:2px;
  content: url(Pics/Logo-MS-ExcelX.png);
}



.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}

/*
 *  Images for when mouse over, they swap to another image


#container {
  height: 250px;
  width: 250px;
  position: relative;
}

#image {
  position: relative;
  left: 0;
  top: 0;
}

 */