/*https://www.w3schools.com/css/css_rwd_mediaqueries.asp*/
/* future development?

body {
  background-color: lightgreen;
}

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
*/

/* below rowcoordinates boxsizing may be an alternative to 
.coordinatesInputs  
below from https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex*/
* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.rowcoordinates {
  display: flex;
  flex-wrap: wrap;
  border:0px solid teal;
  border-radius:20px;
}

/* Create four equal columns */
.columncoordinates {
  flex: 30%;
  padding: 5px;
  margin:5px;
  border:1px solid teal;
  border-radius:20px;
 font-size:small;
 text-align:center;
 background-color:#99B7C8;
}

/* On screens that are 992px wide or less, go from four columns to two columns  */
@media screen and (max-width: 992px) {
  .columncoordinates {
    flex: 30%;
  border:1px solid purple;
  border-radius:20px;
  margin:1px;
  font-size:x-small;
 text-align:center;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .rowcoordinates {
   /* flex-direction: column;*/
    flex: 30%; /*removed top and added this one - needs work*/
      border:0px solid red;
      
  border-radius:20px;

  }
}


.adjustCenter{/* for fieldset in topics*/
	margin-left:auto;
	margin-right:auto;
	border:1px solid red; 
	width:50%;
	border-radius:20px;
}

.addTeal{
border:1px solid white;
border-radius:15px;
background-color:teal;
margin-bottom:5px;
padding:3px;
color:#fff;
overflow:hidden;
}

.ala{

	font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
	text-align:justify;	
}



.ala_left{
   /*position:relative;
    clear:both;*/
	float:left;
	/*width:50%;*/
	border:0px solid black;
	padding:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	text-align:left;
	/*
	border-bottom:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;
	border-top:1px solid black;
	*/
	background-color:#fff;/*must be #fff if repeat-x as the below repeat will show a different color */
	margin:2px 10px 10px 0;
	background-image:url('../images/green_s.JPG');
	background-repeat:repeat-x;
	/* not required? overflow:hidden;*/

}

.ala_left{border:0px solid orange;}



@media only screen and (min-width: 868px) {

.ala_left{width:48%;}

}


@media (max-width:867px)  {

	.ala_left{width:100%;}
		
}

.ala_right{

	border:0px solid red;
	overflow:hidden;
	}

@media only screen and (min-width: 868px) {
    .ala_right{width:48%;}
}

@media only screen and (max-width: 867px) {

.ala_right{width:100%;border:0px solid green;}
}






.ala_left_upload{border:0px solid red;overflow:hidden;float:left;font-size:small;margin:3px;}

@media only screen and (min-width: 1201px) {/*was 868px */
.ala_left_upload{width:48%;}
}

@media (max-width:1200px)  { /*was 867px */
.ala_left_upload{width:100%;}
}

.ala_right_upload{border:0px solid red;overflow:hidden;float:left;}

@media only screen and (min-width: 1201px) {/*was 868px */
.ala_right_upload{
width:48%;}
}

@media (max-width:1200px)  { /*was 867px */
.ala_right_upload{
width:100%;}
}




.alaUploadFormOdd{
	background-color:#DAD8B8;
	border-radius:15px;
	border:1px solid teal;
	padding:3px;
	margin-bottom:5px;
}

.alaUploadFormEven{
	background-color:silver;
	border-radius:15px;
	border:1px solid teal;
	padding:3px;
	margin-bottom:5px;
}

.alaUploadFormCode{
    background-color:#99B7C8;
	border-radius:15px;
	border:1px solid teal;
	padding:3px;
	margin-bottom:5px;
	font-size:small;
}






/* below I added */
  
/* Style buttons */

.calendarTable{
               width:100%;
               border: 1px solid #fff;
               border-radius:15px;
               padding:10px;
               margin:3px 0 0 0;
               text-align:justify;
               
}


/*
coordinateConverterDMS & coordinateConverterDIG NOT USED AS YET*/




@media only screen and (min-width: 801px) {
table.coordinateConverter{
		background-color:#fff;
        border:0px solid teal;
        border-radius:15px;
		float:left; 
		width:60%;
		text-align:center;
		}
}		
		
@media only screen and (max-width: 800px) {
		table.coordinateConverter{
		background-color:#fff;
        border:0px solid teal;
        border-radius:15px;
		float:left; 
		width:100%;
		text-align:center;
		}
}
	

		
		
		

table.coordinateConverter td{
/* no subject */
}



table.coordinateConverterDMS{
		background-color:#ff9999;
        border:3px solid teal;
        border-radius:15px;
	    width:100%;
		text-align:center;
		}

table.coordinateConverterDMS td{
background-color:#ff9999;
text-align:center;
border:0px solid #000;
}


table.coordinateConverterDIG{
        border:3px solid teal;
        border-radius:15px;
        width:100%;
		text-align:center;
		}

table.coordinateConverterDIG td{
background-color:#ffcc99;
}








table.contain{
font-size:small;
border:1px solid teal;
border-radius:15px;

}

table.contain td{
border:0px solid teal;
}





.btn {
  background-color: DodgerBlue; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 1px 14px; /* Some padding */
  font-size: 13px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  border-radius:25px;
  margin:3px;
  padding:10px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
  color:yellow;
}
/* below coordinateimputsnot used */

@media (max-width:500px)  { 
.coordinatesInputs{
border:3px solid teal;
border-radius:20px;
overflow:hidden;
margin-right:auto;margin-left:auto;
width:400px;}
}

@media (min-width:501px)  { 
.coordinatesInputs{
border:3px solid teal;
border-radius:20px;
overflow:hidden;
margin-right:auto;margin-left:auto;
width:501px;}
}

@media (min-width:550px)  { 
.coordinatesInputs{
border:3px solid teal;
border-radius:20px;
overflow:hidden;
margin-right:auto;margin-left:auto;
width:550px;}
}

/*@media only screen and (max-width: 767px) includes dditional left information when screen is a certain size*/
@media only screen and (max-width: 600px) 
{
.displayWideScreen{
	display:none;}
	
}


.extra_small{
	font-size:x-small;
}


.small{
	font-size:small;
}


.medium{
	font-size:medium;
}

.intermedium{
	font-size:13px;/*larger than midium but not as large*/
	font-family:"Courier New", Courier, monospace;
	font-weight:bolder;
}

.larger{
	font-size:large;
}

.centered
{
	text-align:center;
}

.justify{
	text-align:justify;
}







/* flightPlannerTable 4 items below */


@media only screen and (max-width: 600px) {
table.flightPlannerTable{
border:0px solid black;
font-size:xx-small;
width:100%;
}
}


@media only screen and (min-width: 601px) {
table.flightPlannerTable{
border:0px solid black;
font-size:small;
width:100%;
}
}

@media only screen and (min-width: 901px) {
table.flightPlannerTable{
border:0px solid black;
font-size:medium;
width:100%;
}
}



table.flightPlannerTable td 
{
   text-align:center;
    border-radius:5px;
    border:1px solid teal;
}




/* if problem (too wide on small screen can be reduced by degreesing width eve 
so there are 2 tables on refill option in flight plannig'php on line 2311*/

table.fuelCalculation
{
border-radius:5px;
border:1px solid teal;
width:100%
}	

table.fuelCalculation td 
{
    font-size:small;
    border-radius:5px;
    border:1px solid teal;
    /*border-top:thick double #ff0000;*/
}



table.fuelmanagment
{
border-radius:10px;
border:1px solid black;
float:left;
width:40%;
margin:0 10px 0 0;
}	

table.fuelmanagment td 
{
    font-size:small;
    border-radius:5px;
    border:1px solid teal;
    /*border-top:thick double #ff0000;*/
}



@media only screen and (max-width: 600px) {

.goBackLogOutDiv{
	background-color:teal;
	border-radius:30px;
	border:1px solid blue;
	width:100%;
	padding:20px;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	font-size:15px;
	text-align:justify;
	color:#fff;
	
}
}


@media only screen and (min-width: 601px) {

.goBackLogOutDiv{
	background-color:teal;
	border-radius:30px;
	border:1px solid blue;
	width:50%;
	padding:20px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	font-size:20px;
	text-align:justify;
	color:#fff;
	
	
}
}



@media only screen and (max-width: 867px) {
.homeMax{
display:none;}
}


@media only screen and (min-width: 868px) {
.homeMin{
display:none;}
}



.lightBlue{
     border-radius:15px;
     border:1px solid teal;
     background-color:lightblue;
     }

.lightGreen{
     border-radius:15px;
     border:1px solid teal;
     background-color:lightGreen;
     }


.lightYellow{
     border-radius:15px;
     border:1px solid teal;
     background-color:#FFFF00;
     }



.lightPink{
     border-radius:15px;
     border:1px solid teal;
     background-color:#FABC9E;
     }


.lightVeryLightBlue{
     border-radius:15px;
     border:1px solid teal;
     background-color:#DBE8FB
     }

.lightOrange{
     border-radius:15px;
     border:1px solid teal;
     background-color:#FF9900;
     }

.lightRed{
     border-radius:15px;
     border:1px solid teal;
     background-color:red;
     color:#fff;
     font-weight:bold;
     }




.lightPurple{
     border-radius:15px;
     border:1px solid teal;
     background-color:#BFA3FA;
     }


.storyheader{
font-size:20px;
color:teal;
font-weight:bold;
text-align:center;
}


.pictureText{
	text-align:justify;
	font-family:"Courier New", Courier, monospace;
}

a { /* (e) put that in to stop underline */
    color:blue; /*originally yellow*/
	text-decoration:none; /* i put in next two lines */
	font-variant:small-caps;
	font-size:14px;
}


a:hover {
	color:green; /*#fff*/
	/*background:#369; -- sick of it */
	text-decoration:none;/* i put in next two lines */
	font-variant:small-caps;
}

a:active {
	color:green; /*#fff*/
	/*background:#369; -- sick of it */
	text-decoration:none;/* i put in next two lines */
	font-variant:small-caps;
}







.loginselect a { /* (e) put that in to stop underline */
    color:white; /*originally yellow*/
	text-decoration:none; /* i put in next two lines */
	font-variant:small-caps;
	font-size:14px;
}


.loginselect a:hover {
	color:yellow; /*#fff*/
	/*background:#369; -- sick of it */
	text-decoration:none;/* i put in next two lines */
	font-variant:small-caps;
}

.loginselect a:active {
	color:yellow; /*#fff*/
	/*background:#369; -- sick of it */
	text-decoration:none;/* i put in next two lines */
	font-variant:small-caps;
}




img {/*makes the image smaller */
   max-width: 100%;
   height: auto;
   border-radius:15px;}




@media only screen and (max-width: 768px) {

     h1{font-size:medium;}

}



.menuspec ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight:lighter;
  font-size:10px;
  text-align:center;

  }

.menuspec li {
 font-size:10px;
  padding: 2px;
  margin-bottom: 7px;
  /* orig background-color: #33b5e5;*/
  background-color:#C5FFB0;
  color:#000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-radius:15px;/*(e) added*/
  border:1px solid #6262FF;/*(e) added*/
 list-style:none;
 text-align:center;
  
}
/* (e) added below https://www.w3schools.com/css/css3_buttons.asp*/
.menuspec li:hover {
  background-color:#00CC99;/* #0099cc;*/
    box-shadow: 0 12px 16px 0 rgba(0,100,0,0.24), 0 10px 50px 0 rgba(0,100,0,10.19);
    /*box-shadow: 0 12px 16px 0 rgba(0,0,12,0.24), 0 17px 50px 0 rgba(0,0,0,10.19);*/
   color: #fff;
    list-style:none;
    font-size:10px;
 text-align:center;
}



.miscon_div{
        
               border: 3px solid teal;
               border-radius:25px;
               width:40%;
               height:150px;
               margin:5% 5% 0% 5%;
               padding:15px 5px 5px 5px;
               overflow:hidden;
               text-align:center;
               font-size:18px;
            }







.email_form{color:#000;}

/* end of i added */



* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}


/* both are main block below - places all to the left or all the divs within would run into the center
however I found you want them in the center if the screen becomes very narrow as all the divs 
will lean towards the left and makes the links also left rather place them in the center when 600px or less*/

/* For mobile phones: */

@media (max-width:600px)
{        /* (e) added media wth entire  block. It did not exist at all
           This is a replica of the one below except: 
           float:left removed and 
           replaced it is margin:auto
           and reduced padding to 5px
          
           for phone (600px everything in the center all 
           the links where towards the side on phone */
	[class*="col-"] {
      margin:auto;
     /* padding: 15px;*/
      padding: 5px 0px 5px 0px;

      }
}

@media (min-width:601px){ /*(e) added media , rest original*/
	
[class*="col-"] {
     float:left;
    padding: 5px;
    }
}


html {
  /*font-family: "Lucida Sans", sans-serif;*/
  font-family:"Times New Roman", Times, serif;
}


#headerina
{
width:100%;
border:3px solid lightblue;
background:url('../image/blue.JPG');
background-repeat:repeat-x;
background-image:url('../image/blue.JPG')
}



.header {
 /*background-color: #9933cc;*/
border-radius:15px;

}

/*below not used as yet */
.imagesUploadDiv{
	/*background-attachment:fixed;background-position:center;background-image:url('../images/movie-reel-transparent-background-4.png');*/
	background-position:right;
	background-image:url('../images/');
	background-repeat:no-repeat;
	background-repeat:no-repeat;
	border:0px solid teal;
	border-radius:1px;
	padding:0px;
	color:teal;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	
}


/* something wrong here - may have had some use - not sure 13/6/2020

	background-position:right;
	background-image:url('../images/');
	background-repeat:no-repeat;
	background-repeat:no-repeat;
	border:0px solid teal;
	border-radius:1px;
	padding:0px;
	color:teal;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	
}
*/

/* no longer used !!
@media only screen and (max-width: 601px) {
.show14dt{
	display:none;}
}

@media only screen and (min-width: 601px) {
.show11dt{
     display:none;
     }
}
*/



/* below  - see mouseover.html*/
span.dropt {border-bottom: thin dotted; background: #ffeedd;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: #ffffff;} 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-radius:20px; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;} 



/* below used in flight planning formtill further notice*/
span.dropt9 {/*border-bottom: thin dotted;*//* background: #ffeedd;*/}
span.dropt9:hover {text-decoration: none; background:#99B7C8; z-index: 9; }
span.dropt9 span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 9;}
span.dropt9:hover span {left: 2%; background: #ffffff;} 
span.dropt9 span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-width:1px;}
span.dropt9:hover span {margin: 100px 0 0 200px; background:#ffffff; width:200px; color:black; z-index :9;text-align:justify; font-size:12px;padding:3px;}



.topicLink a { /* (e) put that in to stop underline */
    color:blue; /*originally yellow*/
	text-decoration:none; /* i put in next two lines */

	font-size:14px;
	font-weight:bold;
	border:1px solid green;
	border-radius:15px ;
	padding: 1px 3px 1px 3px;
}


.topicLink a:hover {
	color:red; /*#fff*/
	/*background:#369; -- sick of it */
	text-decoration:none;/* i put in next two lines */
font-size:14px;
		font-weight:bold;
}

.topicLink a:active {
	color:red; /*#fff*/
	/*background:#369; -- sick of it */
	text-decoration:none;/* i put in next two lines */
font-size:14px;
		font-weight:bold;
}


/* (e) added below https://www.w3schools.com/css/css3_buttons.asp*/

@media (max-width:600px)
{   

/* menu a , menu ul menu li all belong together
because the menus are <a href... links
the colour configuration gets overridden in the li and ul */

.menu a { /* (e) put that in to stop underline */
    color:black; /*originally yellow*/
	text-decoration:none; /* i put in next two lines */
	font-variant:small-caps;
	font-size:12px;
}

.menu a:active { /* (e) put that in to stop underline */
    color:black; /*originally yellow*/
	text-decoration:none; /* i put in next two lines */
	font-variant:small-caps;
	font-size:12px;
}


/* all six items belon together */


.menu a:hover {
	color:white; /*#fff*/
	/*background:#369; -- sick of it */
	text-decoration:none;/* i put in next two lines */
	font-variant:small-caps;
	font-size:12px;
}




.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight:bold;
 /* font-size:small;   suddenly all are big - this works but there must be another reason why this happened check this out 29/4/2020*/
}

.menu li  {
  padding: 4px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: black;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-radius:15px;/*(e) added*/
  border:1px solid #6262FF;/*(e) added*/
  font-size:12px;
}
/* (e) added below https://www.w3schools.com/css/css3_buttons.asp*/
.menu li:hover {
  background-color: #0099cc;
    box-shadow: 0 12px 16px 0 rgba(0,0,12,0.24), 0 17px 50px 0 rgba(0,0,0,10.19);
   color: white;
   font-size:12px;}
}


@media (min-width:601px)
{   



/* menu a , menu ul menu li all belong together
because the menus are <a href... links
the colour configuration gets overridden in the li and ul */

.menu a { /* (e) put that in to stop underline */
    color:black; /*originally yellow*/
	text-decoration:none; /* i put in next two lines */
	font-variant:small-caps;
	font-size:14px;
}

.menu a:active { /* (e) put that in to stop underline */
    color:black; /*originally yellow*/
	text-decoration:none; /* i put in next two lines */
	font-variant:small-caps;
	font-size:14px;
}



.menu a:hover {
	color:white; /*#fff*/
	/*background:#369; -- sick of it */
	text-decoration:none;/* i put in next two lines */
	font-variant:small-caps;
	font-size:14px;
}







.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight:bold;

 }

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: black;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-radius:15px;/*(e) added*/
  border:1px solid #6262FF;/*(e) added*/
  font-size:14px;}
  
/* (e) added below https://www.w3schools.com/css/css3_buttons.asp*/
.menu li:hover {
  background-color: #0099cc;
    box-shadow: 0 12px 16px 0 rgba(0,0,12,0.24), 0 17px 50px 0 rgba(0,0,0,10.19);
   color: white;
    font-size:14px;}
}





.medium_small{
	font-family:"Courier New", Courier, monospace;
	font-size:12px;
}


.movieUploadDiv{
	/*background-attachment:fixed;background-position:center;background-image:url('../images/movie-reel-transparent-background-4.png');*/
	background-position:right;
	background-image:url('../images/movieReel_small.png');
	background-repeat:no-repeat;
	background-repeat:no-repeat;
	border:10px solid teal;
	border-radius:15px;
	padding:20px;
	color:teal;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	
}


.aside {
  background-color: #33b5e5;
  padding: 10px;
  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);
  /*box-shadow: 0 12px 16px 0 rgba(0,0,12,0.24), 0 17px 50px 0 rgba(0,0,0,10.19);*/
  border-radius:15px;/*(e) added*/
  border:1px solid blue;/*(e) added*/

}
/* NOT USED https://www.w3schools.com/css/css3_flexbox.asp
.flex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  text-align: center;
 line-height: 75px;
  font-size: 30px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

*/

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
  margin-top:30px;
  border-radius:15px;/*(e) added*/

}


.generalDiv{
	
	border:1px solid olive;
	border-radius:15px;
	width:100%;
	text-align:justify;
	margin:0 auto;
	padding:3px;
	background-color:#e0e0e0;
}




.runwayLinks {
	border:0px solid olive;
	padding:10px;margin:0 0 0 0;
	overflow:visible;
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:14px;
	}
	
	.runwayLinks a { 
	color:teal;
	text-decoration:none; /* i put in next two lines */
	font-variant:small-caps;
	font-weight:bold;
    }

.runwayLinks a:hover {
	color:blue; 
	text-decoration:none;
	font-variant:small-caps;
}
.runwayLinks a:active {
	color:green;
    text-decoration:none;
    font-variant:small-caps;
}


.runwaySampleDv{
	border:1px solid blue;
	background-color: #33b5e5;
	border-radius:15px;
	overflow:hidden;
	padding:3px;
	margin:30px 0 0 0;
	color:#fff;
}


.standardForm{
    width:100%;
    border-radius:15px;
    padding:5px;
    border:1px solid olive;
    }


.topicForm{
  /*do not add width!!!*/
    border-radius:15px;
    padding:5px;
    border:1px solid red;
    background-color:#FFE8E1;
    }




.clearit{
	clear:both;
}


/*Note that the two sets of classes are almost identical, the only difference is the name (col- and col-s-):*/
/* For mobile phones: */

@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%;}
  
}



/*elow imports from original screen css
can not use original screen css as it interferes with to many other ones  29/4/*/



span.exposeL {background: #ffeedd;}
span.exposeL:hover {text-decoration: none; background: #ffffff; z-index: 7; }
span.exposeL span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 7;}
span.exposeL:hover span {left: -10%; background: #ffffff;} 
span.exposeL span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-width:1px;}
span.exposeL:hover span {margin: 50px 0 0 250px; background: #ffffff; z-index:7;} 



/* below show airfield.php */
.madira{font-weight:bold;font-size:13px;font-family:Andy;padding:0 5px 0 5px;}

.madira   a:link {color:#847308;text-decoration:none; }
.madira   a:active {color: #847308;text-decoration:none;} 
.madira   a:visited {color: #847308;text-decoration:none; } 
.madira   a:hover {color:#330000;text-decoration:underline;}




.moreinformation{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:10px;
}



.login{
	
	background-color:#212121;
	color:white;
	font-family:Arial, Helvetica, sans-serif; /* remove font family if unhappy*/
	font-variant:small-caps;
	text-align:center;
	font-size:13px;
	padding:5px;
	margin:0px;
	font-weight:bold;
	border-radius:15px;

}

 .additionalinformation{
	padding:0px 0px 0px 0px;
	font-family:Arial, Helvetica, sans-serif;

	font-size:13px;
	text-align:justify;
    font-weight:normal;
	color:black;
	/*background-image:url('images/ss049.jpg');
	background-repeat:repeat;*/
	padding:0px 5px 0px 5px;
}
/* iframeDiv are not used here - fixed problem by adding overflow:hidden into ala_rght */



.iframeDiv{
    width:100%;
	/*width:280px;*/
	margin-left:auto;
	margin-right:auto;
	border:0px solid orange;
	overflow:hidden;}

.wrap{
	border:0px solid teal;
	padding:3px;
	}

.error_reporting_form{
	border:1px solid green;
	border-radius:15px;
	background-color:#FFFFCC;	
}
.reporting_form{
	border:1px dotted black;
	padding:0px;
	margin:10px 0 0 0;width:100%;
	text-align:center;
	border-radius:15px;
	background-color:#BCD3FE;
	font-size:14px;
}

.searchform{
	border-radius:15px;
	background-color:#CCFFFF;
	border:1px solid teal;
}

/* for shrinking movies */
.shrink{/*makes the video smaller */
   max-width: 100%;
   /* not suitable here - height: auto;*/
   border:1px solid olive;
   border-radius:15px;
  
}


/* both below written seperately for the same thing
I want it not to show from 768px but also not to show blow 601px
mining not show -> show and than again not show. It was the only way this would work*/
@media only screen and (min-width: 768px){
	
	.showMap{
	display:none;}
}


@media only screen and (max-width: 601px){
	
	.showMap{
	display:none;}
}




@media only screen and (max-width: 767px) {

.flexidv {
	height:130px;
	overflow:auto;}

}

@media only screen and (min-width: 768px) {

.flexidv {
	height:750px;
	overflow:auto;}

}

/*below for links of main menue to dissapear and appear*/
/*these have been placed on index.php due to coching and hopefully can be rmoved from index.php*/
@media only screen and (min-width: 600px) 
{
.displaySmall{
	display:none;}
	
}

@media only screen and (min-width: 600px) 
{
.displaySmall{
	display:none;}
	
}