html {
    font-family: "Lucida Sans", "arial", sans-serif;
	font-size 14px;
}
* {
    box-sizing: border-box;
}


body {
	background: rgb(210,255,210); /* For browsers that do not support gradients */
    /*background: -webkit-linear-gradient(rgba(210,210,255,.8),rgba(10,10,255,.9)); For Safari 5.1 to 6.0 */
   /* background: -o-linear-gradient(rgba(10,10,255,.9),rgba(210,210,255,.8));  For Opera 11.1 to 12.0 */
   /*  background: -moz-linear-gradient(rgba(10,10,255,.9),rgba(210,210,255,.8)); For Firefox 3.6 to 15 */
   /* background: linear-gradient(rgba(0,0,100,1),rgba(210,210,255,.8));  Standard syntax (must be last) */

}

	
}

.dateTime{float: "left";
	
}
	
	
.mainHead{
    color: #ffff99;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px yellow;
    padding-left: 15px;
	text-align: center;
	
}

.tooltip {
  position: relative;
  display: inline-block;
  
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -110px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

img.logo {
    
}


.all{
    content: "";
    clear: both;
    display: block;
	width: 100%;
	margin: auto;
}


[class*="col-"] {
    float: left;
    padding: 2px;
}


.show {
    display: block;
}
	
.link ul {
    list-style-type: none;
    overflow: auto;
	
}

.link li a {
    display: block;
    margin-left: -1.5em;
    padding: 3px 2px;
    text-decoration: none;
	color: #fff;
    background-color: blue;
    text-align: center;
    width: 100%;
	font-size: 12px;
	border: 1px solid #bbf;
    border-radius: 6px;
}

.link li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
	
.link2 ul {
    list-style-type: none;
    overflow: auto;
}

.link2 li a {
    display: block;
    margin-left: -1.5em;
    padding: 3px 2px;
    text-decoration: none;
	color: #000;
    background-color: lightyellow;
    text-align: center;
    width: 100%;
	font-size: 12px;
	border: 1px solid blue;
    border-radius: 6px;
}

.linkPoints ul {
    overflow: auto;
}

.linkPoints li {
    margin-left: -1.5em;
    color: #000;
    font-size: 12px;
	
}

	
.breadcrum{
	height: 8px;
	margin-bottom: 2px;
}

/* Vertical group of buttons*/
.buttons {
  width: 90%;
  margin: .4% 5% .4% 5%;
  /*box-shadow: 0 6px #999;*/
  padding: 3px 2px;
  font-size: 12px;
  text-align: center;	
  color: #fff;
  background-color: blue;
  border: 1px solid #bbf;
  border-radius: 6px;
  
}

<script>
$(document).ready(function(){
    $(".buttons").focus(function(){
        $(this).css("background-color", "red");
    });
    $(".buttons").blur(function(){$(this).css("background-color", "blue");
		
		});
});
</script>


/*.buttons:hover {background-color:#3e8e41 ;}*/

.button:active {
  background-color: #fff;
  /*box-shadow: 0 2px #666;
  transform: translateY(2px);*/
}
/* End Vertical group of buttons*/

.buttonSubmit {
  width: 80%;
  margin: .4% 10% .4% 10%;
  /*box-shadow: 0 6px #999;*/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  padding: 3px 2px;
  font-size: 12px;
  text-align: center;	
  color: #fff;
  background-color: darkblue;
  border: 1px solid #bbf;
  border-radius: 6px;
}

.button1{
  width: 33%;
  min-height:20px;
  margin: 0% 0% .5% 0%;
  padding: 3px 0px;
  font-size: 12px;
  text-align: left;	
  color: #fff;
  background-color: blue;
  border: 1px solid #bbf;
  border-radius: 6px;
  float: left;
  clear: left;
}

.button2{
  width: 66.5%;
  min-height:20px;
  margin: 0% 0% .5% .5%;
  padding: 3px 0px;
  font-size: 12px;
  text-align: left;	
  color: #000;
  background-color: #eee;
  border: 1px solid #bbf;
  border-radius: 6px;
  float: left;
}

.button3{
	width: 25%;
	padding: 4px 2px; 
	margin: 1% 0%; 
	box-sizing: border-box; 
	border: 1px solid #bbf; 
	border-radius: 6px;
	outline: none;
	background-color: blue;
	color: #fff;
	text-align: left;
	position: relative;
	display: inline-block;
	font-size: 12px;
	
} 

input{
	padding: 4px 3px; 
	margin: 0px 0px; 
	box-sizing: border-box; 
	border: 1px solid #555; 
	border-radius: 6px;
	outline: none;
	background-color: lightblue;
	color:black;
} 

input:focus {
	background-color: lightyellow;
}

div > h3{
	background-color:#4CAF50; 
	border:1px solid darkgrey;
	border-radius: 10px 10px 0px 0px ;
	padding-top: 2px;
	padding-bottom: 2px;
	color: white; 
	text-align:center;
	font-size: 100%;
	font-weight: bolder;
}

div > h4{
	text-align:center; 
	background-color: blue; 
	color: yellow;
	width: 90%;
	margin: 0 5% 0 5%;
	padding-top: 3px;
	padding-bottom: 3px;
	border:1px solid blue;
	border-radius: 8px 8px 0px 0px ;
}

div > h5{
	/*text-align:center; */
	color: yellow;
	width: 90%;
	margin: auto;
	font-size: 100%;
}
div > p{
	font-size: 12px;
	color: black;
}

.tabledeco  {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
   border-collapse: collapse;
    width: 100%;
	}


.tabledeco td, .tabledeco th{
    border: 1px solid grey;
    /*text-align: left;*/
    padding-top: 6px;
    padding-bottom: 6px;
	color: black;
	/* */
}

.tabledeco tr {background-color: lightyellow;}

.tabledeco tr:nth-child(even){background-color: lightgrey;}

.tabledeco tr:hover {background-color: #ddd;}

.tabledeco th {
    background-color: #333;
    color: white;
	font-size: 14px;
	text-align: center;
}

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 100px;
}


.left{
    background-color: rgba(210,210,255,.8);
	color: #ffff99;
	height: 450px;
    /*clear: left;*/
	padding-left: 5px;
	padding-right: 5px;
    border: 1px solid rgb(100,100,255);
    border-radius: 15px;
	overflow: auto;
	margin-bottom: 10px;
	margin-top: 20px;
	margin-right: 0.5%;
}
.centre, .centreSpecial{
    color: #ffffee;
	/*font-size:150%;
	height: 450px; 
	width: 90%;
	overflow: auto;*/   
    padding-left: 5px;
	padding-right: 5px;
	margin: auto;
	

}

.centreSpecial{
	background-color:rgba(210,210,255,.8); 
	border: 1px solid rgb(100,100,255); 
	border-radius: 15px;
	margin-bottom: 10px;
	margin-top: 20px;
}

.centreFull{
    color: #ffffee;
	/*font-size:90%;
	min-height: 200px;*/    
    padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 3px;
	margin-bottom: 10px;
	margin-top: 1px;
    overflow: auto;
	background-color:rgba(210,210,255,.8); 
	border: 1px solid rgb(100,100,255); 
	border-radius: 12px;
	width: 100%;
	margin:auto;

}

.right{
    background-color: rgba(210,210,255,.8);
	color: #ffff99;
	height: 450px;
	padding-left: 5px;
	padding-right: 5px;
    border: 1px solid rgb(100,100,255);
    border-radius: 15px;
    overflow: auto;
	margin-bottom: 10px;
	margin-top: 20px;
	margin-left: 0.5%;
}

.footer{
    background-color: rgba(210,210,255,.6);
    text-align: center;
    font-size: 12px;
    /*padding: 15px;*/
    border-radius: 50px 50px 2px 2px;
	border: 1px solid rgb(100,100,255);
	clear: left;
	padding-left: 50px;
	padding-right: 50px;
}

/* Balloons*/


.regionalNews {
	background-color: rgba(190,190,255,.6);
	color: #000;
	width: 96%;
	padding-left: 5px;
	padding-right: 5px;
    border: 1px solid rgb(255,255,255);
    border-radius: 15px;
    overflow: auto;
	margin-bottom: 10px;
	margin-left: 2%;
	margin-right: 2%;
	
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
	font-size: 70%;
}

.videos {
	float: left;
	padding: 10px;
    border: 1px solid rgb(100,100,100);
    border-radius: 15px;
    margin-bottom: 10px;
    
	
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-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%;}
}