@charset "UTF-8";
/*CSS Document*/

    
 html {
  max-width: 1200px;
  margin: 0 auto;
 position: relative; /* Fix for absolute positioning */
}   



body {
	/*font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;*/
    
    font-family: Arial, Helvetica, sans-serif;
    background-color: lightskyblue;
	/*background-color: #FFFFFF;*/
	margin: 0;
    /*
    animation: fadeInAnimation ease 1s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;   
    */
}
/*
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
} 

*/



/*iframe*/


.btiframe{
   /* overflow-y: scroll;
    height: auto;*/
    height: 300px;
    
}






/* Consolidated Code*/

.textcentre{
    text-align: center;
}

.textleft{
    text-align: left;
}


/* End of Consolidated Code*/



/* Button Build */


/*removes the blue line between buttons*/
a {
  text-decoration: none;
}

.btngen {
    border: 2px antiquewhite solid;
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
    verflow: hidden;
    text-decoration: none;
    color: #FFFFFF;
    width:150px;
    background-color: #472121;
    text-align: center;
    font-size: 10pt;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s linear;
    outline: none;   
       
}

.btngreen{
    background-color: #356504;
    
}

.btnblue{
    background-color: #2808E8;
    
}

.btngen:hover {
	background-color: #6DC7D0;
	color: black;
	cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)

}
/*rounded ends*/
.btnrnd{
    border-radius: 30px;
    
}

.btnx{
    width:200px;
}


.btnpad{
    margin-top:10px;
    margin-left:5px;
     margin-right:5px;
}


/* End of Button build */













.danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
  margin-bottom: 15px;
  padding: 4px 12px; 
}

.success {
  background-color: #ddffdd;
  border-left: 6px solid #4CAF50;
  margin-bottom: 15px;
  padding: 4px 12px; 
}

.info {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
  margin-bottom: 15px;
  padding: 4px 12px;   
}


.warning {
  background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
  margin-bottom: 15px;
  padding: 4px 12px;   
}



.linehr {
    display:block;
    max-width: 90%;
    
    /*border-top: solid;*/
    border-bottom: Solid;
   /* border-top-color: black;*/
    border-bottom-color:antiquewhite;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 100, 0.5);
      
    
}


/* Container */
.container {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
    /*background-color: #FFFFFF;*/    
}

/*
.txtcentre{
    text-align: center;
    padding-top: 10px;
}

*/

.frontpage{
    
    width:90%;
    margin-left: auto;
	margin-right: auto;
    border:thick;
    border-style:double;
    border-color: grey;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    
    
    border-radius: 60px;
    
    
    background-color:antiquewhite;
   /* background-image: linear-gradient(red, yellow)*/
    background-image: linear-gradient(lightgreen, antiquewhite)   
    
}

/*
style="overflow: hidden; height: 100%; width: 100%; position: absolute;"

*/.iframeborder{
    width: 90%;
    margin: auto;
    height:100%;
   
    
}

.iframeone{
    width:100%;
    border:none;
    height:inherit;
          
}

.internalbox{
    width: 90%;
    margin-left: auto;
	margin-right: auto;
    
}

.internalstyle{
    width: 80%;
    margin-left: auto;
	margin-right: auto;
    
}


.texttab{
	
	margin-left: 5%
}


.texttabinfo {
	margin-left: 10%;
	/*text-indent: 10%;*/
	font-style: italic;
	font-size: 12px;
		
}




/* Standard settings for the copyright statement */
.copyright {
	font-style: italic; 
	font-size: 12px;
	}




.txtmargins{
    
    margin-left: 10px;
    margin-right: 10px;
    
}


.mainintro{
    
    width:100%;
   /* background-color: #52BAD5;*/
    padding-top: 30px;
    padding-bottom: 30px;
    text-align:center;
    /*border-radius: 30px;*/
    border-bottom-right-radius: 30px; 
    border-bottom-left-radius: 30px;
    
}


/* Header */
header {
	width: 100%;
	height: 8%;
    padding-bottom: 10px;
    padding-top: 10px;
    
    background-color: #5D5E5D;
	border-bottom: 1px solid #353635;
    /*
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
    */
    background-image: linear-gradient(to bottom right, blue, antiquewhite);
    
        
}


img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
    
}



.logo {
	color: #fff;
	font-weight: bold;
	margin-left: auto;
	/*letter-spacing: 4px;*/
	margin-right: auto;
	text-align: center;
	/*padding-top: 15px;*/
    padding-bottom: 15px;
	/*line-height: 2em;*/
	font-size: 24px;
    vertical-align: middle;
    text-shadow: 2px 2px 5px blue;
    
}


/*dns logo*/
.logo-image {
	margin-left: 10px;
	margin-right: auto;
	display: block;
	width: 120px;
	height: 80px;
	float: left;
    padding-bottom:10px;
	
}


/*-----------  Start of Main Menu  --------------*/

/*
navformat{
    
    text-align: center;
}
*/

/* --------------  Start of Menu Bar -------------------  */


.menubar{
   background-color:antiquewhite;
    padding-top: 5px;
    padding-bottom: 5px;
  /*  position: sticky;*/
   
}


.Mainmenu {
	display:block;
    float: right;
}


.mainmenu li {
	/*display: block;*/
    display: inline-block;
}

.mainmenu li a {
	text-decoration: none;
	color: #000000;
	padding: 8px;
	font-size: 16px;
}



.mainmenu li:hover {
	background-color:aqua;
	color: #FFFFFF;
	cursor: pointer;
}




.mainmenu a.active{
    color: #FFFFFF;
    background-color:black;
    padding-bottom: 0px;
    padding-top: 0px;
}



/* ---------Start of Sub Menu -------- */

.mainmenu ul li ul{
   display:none;
 }

.mainmenu li:hover ul{
    position:absolute;
    display:block;
    list-style:none;
    padding-top: 10px;
    
}

.mainmenu li:hover ul li{
    display:block;
    background-color: antiquewhite;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.mainmenu li:hover ul li:hover{
    background-color: aqua;
 
}

/* ---------End of Sub Menu -------- */

/* --------- Hides the Hamburger Menu ----------*/

.icon{
    display: none;
}


/* --------------  End of Menu Bar -----------------  */






.aboutus{
    
    width:100%;
    background-color: #52BAD5;
    /*padding-bottom: 10px;*/
    margin-top:20px;
    margin-bottom:20px;
    text-align:center;
    border-radius: 30px;
    
}

.aboutusdiv{
    padding-top:5px;
    padding-bottom:10px;
    margin-left: 20px;
    margin-right: 20px;
    text-align:left;
    
    
}


footer {
	background-color: gray;
	padding-top: 30px;
	padding-bottom: 40PX;
    border-radius: 30px;
    
}



.footeremail{
	text-decoration: none;
	color: black;
	font-size: 12px;
	font-style: italic; 
	padding-left: 30px;
   /* margin: 0 auto;*/
   /* text-align: left;*/
    float:left;
}

.footeremail a{
    text-decoration: none;
    color: black;
   /* text-align:left;*/
}

.lastupdated {
	font-style: italic; 
	font-size: 12px; 
    padding-right: 30px;
   /* text-align: right;*/
    /* margin: 0 auto;*/
    float:right;
    
	}


/*used to set the text position of the image for the pubs pages*/
.pubsimage-text{
	width:90%;
	height:inherit;
	text-align: center;
	
}

/*used to set the size of the image for the pubs pages*/

.pubsimage{
	font-size: 12px;
    height: 115px; 
	width: 80px; 
	margin-bottom: 2px;
	margin-right: 10px;
	margin-left: 10px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #000000;  
		/*font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;*/ 
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-left: 5px;
	
}


.pubsimage-text:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}



.pubsimagemap{
	font-size: 12px;
    height: 50px; 
	width: 80px; 
	margin-bottom: 2px;
	margin-right: 10px;
	margin-left: 10px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #000000;  
		/*font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;*/ 
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-left: 5px;
	
}



/*Red Text*/
.textred{
   color:red;
    
}

/*Blue Text*/
.textblue{
   color:Blue;
    
}




/*used on misc images*/
.imagemisc {
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	width: 50%; 
    height:auto; 
    border-radius: 20px;
    box-shadow: 5px 5px 8px #888888;
}
/*used on images in the AboutUs page*/
.imagefloatleft {
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	width: 18%; 
    height:auto; 
    border-radius: 20px;
    box-shadow: 5px 5px 8px #888888;
}


/*used on images in the AboutUs page*/
.imagefloatright {
	float: right;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
    
	width: 18%; 
    height:auto; 
    
    
    border-radius: 20px;
    box-shadow: 5px 5px 8px #888888;
}


.reportsformat{
	text-align: center;
}



.imagegeneral {
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
    
	width: 18%; 
    height:auto; 
}








.centrebutton{
	text-align: center;
	padding: 20px;
		 
}


/* -- Start of Flex Box -----*/

.flex-container {
  display: flex;
  flex-wrap: wrap;  
    /*
    flex-wrap: nowrap;
    flex-wrap: wrap;  
    flex-wrap: wrap-reverse; 
    
    flex-flow: row wrap;
    */
  justify-content: center;  
  /*background-color: lightskyblue;*/
}

.flex-container > div {
  background-color: #F11010;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}


.flexdemotwo .flex-container > div {
    background-color: #f1f1f1;
    width: 120px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    border:solid 5px;
    border-color: #fff;

    

}


/*.fleximage{
    
    border:5px;
    
}
*/

/* -- End of Flex Box -----*/
   
/* Container for the text part of the flex box holding the image and the text */
.flex-image-container {
    position: relative;
    text-align: center;
    color: white;
    border-radius: 50%;
    
}



.indeximage{
    border-radius: 50%;
    
}



/* Centered text */
.flex-image-containercentered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-size: 20px;
    line-height: 80%;
}

 .flex-image-container, .flex-image-container:hover {
	text-decoration: none;
	color: white;
    
}  

.flex-image-container:hover{
    
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 100, 0.5);
    
}

    
.flex-image-containercentered, .flex-image-containercentered:hover {   
	text-decoration: none;
	color: white;    
    
    }


/* End of Container holding the image and the text */


/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}


@media only screen and (orientation: portrait) and (max-width: 599px)  {
    .logo{
        font-size: 18px;
       padding-right: 5px;
    }
  
}
    
 /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
     
    /* ------ Keeps the Home Menu visible -------- */
     .mainmenu li:not(:first-child) {
         display: none;
    }
  
    
    .mainmenu ul a.icon {
    float: right;
    display: block;
    padding-right:20px;
    top: 50%;
    -ms-transform: translateY(-40%);
    transform: translateY(-40%);
      
    }    
  
   .mainmenu ul a.icon .hamb:after { 
       content: ' \2261';
       font-size: 60px;
       
    }
     
        
  /* The "responsive" class is added to the mainmenu with JavaScript when the user clicks on the icon. This class makes the mainmenu look good on small screens (display the links vertically instead of horizontally) */
  
  .mainmenu.responsive {position: relative;}
  .mainmenu.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .mainmenu.responsive li {
    float: none;
    display: block;
    text-align: left;
  }  
    
	  

    .columnimage {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
      }    
    
    .lastupdated{
        float:left;
        padding-left: 30px;
     }   
        
       
  /* ----------  Sizes the height og the iFrame --------------*/      
        
        
    .iframeborder{
         height:400px;  
             
    }
        
      
        
        
        
        

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    
  
   /* .mainmenu li {
        display: block;
        text-align: left;
        }*/      

    .columnimage {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
      }
    
   
    
    
}
    
    


 /*Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   
  
  
    
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    
  
    
    
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
  
}