/* ==========================================================================
   CIX Custom styles
   ========================================================================== */
/* STYLES USED IN NEW WEBSITE December 2019
12/12/2019 Colours changed for main pagess
13/12/2019 Bottom border removed from header style
*/

/*body {text-align: center; font-family: Arial, Helvetica, sans-serif; color: #990000; background-color:#FFFFCC; border-style:hidden; margin-left: auto; margin-right: auto; min-width:800px; max-width:1280px;}*/
/*body{text-align:center;font-family:Arial,Helvetica,sans-serif;color:#900000;background-color:#FFFFCC;border-style:hidden;margin-left:auto;margin-right:auto;min-width:800px;max-width:1024px}*/


/*Body Style for new website June 2019.  Paler background, font colour more blue/mauve */
html, body {
    height:100%;
    width: 100%;
    color: #751D21;
}
	
body {
  text-align:center;
  font-family:Arial,Helvetica,sans-serif;
  color:#751D21;
	background-color: #FFFFFF;  /*white */
/*  background-color: #000066;  /*Dark blue */
/*  background-color:#FFFFEE; Pale Cream*/
  border-style:hidden;
  padding: 0px;
  margin: 0px;
}

body.level2 { /*Used for Event Definitions form */
  text-align:left;
  background-color:#D6F1FA;
  border-style:hidden;
  border-width:0px 1px 0px 1px;
  margin:1px 5px 0px 5px;
  }
  
#mainnomenu { /* Used for Event briefing documents */
/*  position:absolute; */
  z-index:3;
  margin-left: auto; margin-right:auto; top:160px; /* Top margin leaves space for the title area */
  background-color:#FFFFEE;
  overflow:visible;
  border:1px none #000000;

}

body.newlevel3 { /* Used for Event briefing documents */
  background-color:#FFFFEE;
/*  width:1003px; /*Fixed width is not responsive. Make it 75% still leaves a big margin each side */ 
  width: 75%;
  margin: 0 auto; /* top and bottom 0, left and right effectively centred */
  text-align: left;
}
 
* {
  box-sizing: border-box; /* This means that all divs have a full width of that set (100%), no matter what padding or border widths are set*/
}

header {
  text-align:center;
  margin:0 0.75% 0 0.75%; /* Margin order is Top, Right, Bottom, Left */
/*  border-bottom:1px dotted #000; */ /* Commenting it out removes the line under the title */
/*  width:97.5%; /* 97%  Defining the Width is not necessary*/
}

header, section, article, footer {
  display:block;
}

.titleblock { /* Used for all page title blocks but not the Event briefing pages */
/*  background-color:#FFFFEE; */
  background-color:#FFFFFF; /*White*/
  padding: 20px;
  margin-bottom:5px;
/*  border-radius: 0px 0px 18px 18px; /* top-left corner, top-right corner, bottom-right corner, bottom-left corner*/
}

.headlinebox {
  border:2px solid #900;
  /*margin:0 20px 0 20px; /* top, right, bottom, left DO NOT SET MARGINS*/
  padding:20px; /* Determines where the text sits inside the border */
  /*width:95%; Was originally 93%  Width not required */
}

/* Style the navigation bar */
.cixmenu {
  overflow: hidden;
/*  Can choose either dark  maroon background-color: #751D21; or navy blue background colour #0000aa*/
  background-color: #0000aa;
  }

.cixmenu ul {
  list-style-type: none;
  border: 1px solid white;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #0000aa;
}

.cixmenu li {
  float: left;
  border-right: 1px solid white;
  border-bottom: 1px solid white; /* was #0000AA but didn't look right.*/
}

.cixmenu li:last-child {
  border-right: none;
  }

.cixmenu li a, .dropbtn {
  font:bold 14px Verdana;
  color: white;
  display: inline-block;
  text-align: center;
  padding: 14px 16px; /* Top and bottom 14px. left and right 16px. */
  text-decoration: none;
  }

.cixmenu li a:hover, .dropdown:hover .dropbtn {
  background: blue; /*background of tabs for hover state */
  border:1px solid #0000AA;
}

.cixmenu li.dropdown {
  display: inline-block;
}

.cixmenu .dropdown-content {
  display: none;
  position: absolute;
  min-width: 60px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/*This style dictates what the dropdown menu list looks like*/
.cixmenu .dropdown-content a {
  background-color: #FFFFEE; /*cream*/
  font:normal 13px Verdana;
  color: #751D21; /*deep maroon*/
  padding: 5px 16px; /* Top and bottom 5px. left and right 16px. */
  text-decoration: none;
  display: block;
  text-align: left;
  border:1px solid #0000AA;
  border-top-width: 0;/*Navy blue all round except no need to specify the bottom border*/
}

/*This style dictates what the dropdown menu list looks like when the mouse hovers over it.*/
.cixmenu .dropdown-content a:hover {
	background-color: #FFFFCC; /*slightly darker cream*/
	}

.cixmenu .dropdown:hover .dropdown-content {
  display: block;
}
/*.downarrowpointer{padding-left:4px;border:0} */
/* END OF MENU */

figure {
  display:block;
}

figcaption {
margin:0;
padding:1%;
}

.caption
	{font-size:12.0pt;
	font-family:"Trebuchet MS";
	font-weight:bold; font-style:italic; text-align:center;
}

.fullwidth {
  background-color: #FFFCDB;
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  padding: 20px;
}
.fullwidth p {
  text-align:justify;
}

.fullwidth h4 {
  text-align:left;
}

.fullwidth ol, ul {
  text-align:left;
}
.fullwidth header {
  clear:both;
  border-bottom-style: none;
}

/*fullwidthcentre is not used I believe. */
.fullwidthcentre {
  text-align:center;
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */; /* Margin order is Top, Right, Bottom, Left */
}

.fullwidth-after {
  clear:both;
  background-color: #FFFCDB;
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  text-align:justify;
  padding: 20px;
}

.fullwidth-after h3 {
  clear:both;
  background-color: #FFFCDB;
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  text-align:center;
  padding: 20px;
}

.fullleftimg {
  clear:both;
  background-color: #FFFCDB;
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  padding: 20px;
  text-align:justify;
}

.fullleftimg h3 {
  font-size:1.3em;
}

.fullleftimg h4 {
  font-size:1.1em;
  text-align:left;
}

.fullleftimg img {
  float:left;
  margin-right:20px;
}

.fullrightimg {
  clear:both;
  background-color: #FFFCDB;
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  padding: 20px;
  text-align:left;
}

.fullrightimg img {
  float:right;
  margin-left:20px;
}

/*titlebarpic is to be deleted once all instances of its use have been found and changed to borededpic */
.titlebarpic {
  display:block;
  float:right;
  border:2px solid #990000;
  padding:3px;
  margin-left:10px;
  min-width:200px;
}

.borderedpic {
  display:block;
  float:right;
  border:2px solid #990000;
  padding:3px;
  margin-left:10px;
  min-width:200px;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
  overflow: auto;
}

.column1 {
  background-color: #FFFCDB;
  float: left;
  margin: 0.5% 0.25% 0.5% 0.75%; /* top, right, bottom, left*/
  padding: 20px; /* This value ensures that left column margin lines up with fullwidth left margin */
  width: 49%;
}

.column2 {
  background-color: #FFFCDB;
  float: right;
  margin: 0.5% 0.75% 0.5% 0.25%; /* top, right, bottom, left*/
  padding: 20px; /* This value ensures that right column margin lines up with fullwidrh right margin */
  width: 49%;
}
/* Create two unequal columns that float next to each other */
/* Left column */
.column74 {  
  background-color: #FFFCDB; 
  float: left;
  width: 68%;
  margin:0.5% 0.25% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  padding:20px;
  text-align:justify;
}

/* Right column */
.column24 {
  background-color: #FFFCDB; 
  float: right;
  width: 29%;
  margin:0.5% 0.75% 0.5% 0.25%; /* Margin order is Top, Right, Bottom, Left */
  padding:20px;
  text-align:justify;
}

.col-container {
  display: table; /* Make the container element behave like a table */
  width: 100%; /* Set full-width to expand the whole page */
}

.col74 {
  background-color: #FFFCDB; 
  float: left;
  width: 68%;
  margin:0.5% 0.25% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  padding:20px;
  text-align:justify;
  display: table-cell; /* Make elements inside the container behave like table cells */
}

.col24 {
  background-color: #FFFCDB; 
  float: right;
  width: 24%;
  margin:0.5% 0.75% 0.5% 0.25%; /* Margin order is Top, Right, Bottom, Left */
  padding:20px;
  text-align:justify;
  display: table-cell; /* Make elements inside the container behave like table cells */
}

/* Add a card effect for articles */
.card {
/*  border-style: solid;
  border-width: 3px;
  border-color: white; Probably not used in future */
/*background-color: #FBE7BB; Medium Orange */
/* background-color: #FFFFEE; /* Pale orange */
  background-color: #FFFCDB;
/*  background-color: #FFF4CE; */
/*	background-color: #95FE95; Green */
  padding: 20px;
/*  margin-top: 0.25%; /* was 5px */
/*  margin-bottom:0.25%; /* was 5px */
/*  border-radius: 18px; */ /*Border radius removed 12/12/2019*/

}

.img {
  max-width: 100%; /* Must be 100% otherwise Banner image is narrowed */
  height: auto;
/*  width:auto; */
}

.responsive { /* use with <img> if necessary */
  width: 100%;
  height: auto;
} 

/* Fake image */
.fakeimg {
  background-color: #eaeafa;
  width: 100%;
  height: auto;
  padding: 20px;
}

.headingyellow12pt{font-family:Tahoma;font-size:12pt;font-style:normal;font-weight:bold;color:#FFFF00;}
.textyellow10pt{font-family:Tahoma;font-style:normal;font-weight:normal;color:#FFFF00;font-size:10pt}
.textyellow12pt{font-family:Tahoma;font-size:12pt;font-weight:normal;color:#FFFF00;}
.textmaroon10pt{font-family:Tahoma;font-size:10pt;font-style:normal;font-weight:normal;color:#990000;}
.title18pt{font-family:Tahoma;font-size:18pt;font-style:normal;font-weight:normal;color:#990000}
.title24pt{font-family:Tahoma;font-size:24pt;font-style:normal;font-weight:normal;color:#990000}
.menuitem{font-family:Tahoma;font-size:10pt;font-style:normal;font-weight:bold;color:#000099;text-decoration:none;line-height:19px;list-style-type:none;}


footer {
  clear: both;
  background-color: #FFFCDB;
/*  height:100px;  */
  vertical-align:middle;
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
/*  border-radius: 18px; No longer used 2020 */
}

footer ul {
/*  margin:0; */
  padding:0;
}

footer li {
  display: inline;
}

footer img {
/*  margin: 0 1% 0 0; */
}

table.bordered {
  width:100%;
  background-color:#FFFFEE;
  border-style:solid;
  border-width:2px;
  border-color:#999;
  border-collapse:collapse;
  text-align:justify;
}

table.innerbordered {
  border-style:solid;
  border-width:2px;
  border-color:#333;
  border-collapse:collapse;
  }
/* Used in footerblock to centre the table */
table.center {
    margin-left:auto; 
    margin-right:auto;
  }

.tabular {
  clear:both;
  text-align:justify;
  font-size:90%;
  margin:0 0.75% 0 0.75%; /* Margin order is Top, Right, Bottom, Left */
}

tr.header {
	  background-color:#BB3300;
	  height:2.0em; /* Height of table row. Was 2em set by Tony */
}

tr.splitheader {
  font-weight:bold;
  font-size:12px;
  color:white;
/*  Can choose either dark  maroon background-color: #751D21; or navy blue background colour #0000aa*/
  background-color: #751D21;
  height:1.75em;
  text-align:center;
}

.tabfullwidth  {
  clear:both;
  text-align:justify;
  margin:0 0.75% 0 0.75%; /* Margin order is Top, Right, Bottom, Left */
  width:98.5%;
}

.tabfullwidth p  {
  text-align:justify;
  margin:0 0.75% 0 0.75%; /* Margin order is Top, Right, Bottom, Left */
  padding:0;
  width:98.5%;
}
.tabfullwidth img  {
  float:right;
  margin:5px 0 5px 15px;  /* Margin order is Top, Right, Bottom, Left */
}

h1 {
    font-size: 2em;
    margin: 0.1em 0 0.4em 0;
}

h2 { 
	font-size: 1.6em;
	margin: 0.1em 0 0.5em 0;
}
h3 {font-size:1.3em;
  margin:.1em 0 .2em 0;
}

h4 {
  font-size:1.1em;
  margin:.05em 0 .1em 0;
}

h5 {
  font-size:1.1em;
  margin:.05em 0 .1em 0;
  text-align:left;
}

h3left {font-size:1.3em;
  margin:.1em 0 .2em 0;
  text-align:left;
}

/* Callout styles for index.php Calendar box */
.callout {
  position: relative;
  display: inline-block;
  line-height:18px;
}
.callout:hover {
  font-weight:bold;
  color:#CC0000;
}
.callout .callouttext {  /* callout text */
  visibility: hidden;
  width: 180px;
  background-color:#F6F6F6;
  font-weight:normal;
  color: #751D21;
  text-align: left;
  border:1px solid;
  border-color:#0000AA;
  border-radius: 6px;
  padding: 5px;
  position: absolute; /* Position the callout */
  z-index: 1;
  top: -5px;
  left: 130%; /* Well to the right of the text */
}
/* Show the callout text when you mouse over the callout container */
.callout:hover .callouttext {
  visibility: visible;
}

/*These two styles used with the Online Training Lessons */
.ATC {
  font-size:12pt;
  font-family:"Courier New";
  color:red;
  }
  
.Pilot {
  font-size:12pt;
  font-family:"Courier New";
  color:#00f;
  }

.dummylink {
  color: #33CC33;
  font-weight:bold;
  text-decoration:underline;
}

.Link {
  font-style:normal;
  font-weight:bold;
  color:#00f;
  text-decoration:underline;
}

.link {
  font-style:normal;
  font-weight:normal;
  color:#00f;
  text-decoration:none;
  }
  
.align_third{
    margin: auto;
    width: 32%;
}

/*Displays on the first half of tag*/
.center{
    margin: auto;
    width:50%;
}


/* Responsive layout - when the home screen is less than 920px wide, make the two columns stack on top of each other instead of next to each other */
/* Originally set to 768px */
@media screen and (max-width: 920px) {
.column74, .column24 {
  width: 98%;  /* was 97% */
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  padding: 20px;
  }
}
/* Responsive layout - when two-column screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 800px) {
.column1, .column2 {
  width: 98%;  /* was 97% */
  margin:0.5% 0.75% 0.5% 0.75%; /* Margin order is Top, Right, Bottom, Left */
  padding: 20px;
  }
}

/* STYLES NOT USED YET IN cix.css */

/*CSS for pop up hint box */
#hintbox{position:absolute;top:0;background-color:#cee;width:150px;padding:3px;border:1px solid black;font-style:normal;font-size:80%;color:#900;line-height:18px;z-index:100;border-right:3px solid black;border-bottom:3px solid black;visibility:hidden;}
/*CSS for link that shows hint onmouseover*/

table.excel{width:100%;border-style:solid;border-width:2px;border-color:#999;border-collapse:collapse;}

td.bordered{border-style:solid;border-width:1px;border-color:#999;border-collapse:collapse;}
td.borderedcenter { /* New style used in training_manual.php */
  border-style:solid;
  border-width:1px;
  border-color:#999;
  border-collapse:collapse;
  text-align:center;
}

td.entrybordered,th.entrybordered{border-style:solid;border-width:1px 1px 2px 1px;border-color:#999;border-collapse:collapse;}
td.innerbordered,th.innerbordered{border-style:solid;border-width:1px;border-color:#333;border-collapse:collapse;}
td.excel{border-style:solid;border-width:1px;border-color:#999;padding:1%;text-align:left;}
th.bordered{border-style:solid;border-width:1px;border-color:#999;border-collapse:collapse;}
th.splitborderedtop{border-style:solid;border-width:1px 1px 0 1px;border-color:#999;border-collapse:collapse;}
th.splitborderedbot{border-style:solid;border-width:0 1px 1px 1px;border-color:#999;border-collapse:collapse;}
th.bordered a{color:white;}
tr.header{font-weight:bold;font-size:12px;color:white;background-color:#007;height:3.5em;text-align:center;}

.clearboth {clear:both;}
.clearboth hr {margin: 0 2%; width: 95.5%;}

.column1 h4 {text-align:left;}
.column1 p {text-align:justify;}
.column1 ol {text-align:left;}
.column1 ul {text-align:justify; margin: 0 5%; padding: 1%; width: 95.5%;}
.column1 img {float:left; margin: 2%; padding: 1%;}
.column1R {float: left; margin: 0 1%; padding: 1%; width: 45%;}
.column1R h4 {text-align:left;}
.column1R p {text-align:justify;}
.column1R ol {text-align:left;}
.column1R ul {text-align:justify; margin: 0 5%; padding: 1%; width: 95.5%;}
.column1R img {float:right; margin: 2%; padding: 1%;}



.column2 h4 {text-align:left;}
.column2 p {text-align:justify;}
.column2 ol {text-align:left;}
.column2 ul {text-align:justify; margin: 0 5%; padding: 1%; width: 95.5%;}
.column2 img {float:right; margin: 2%; padding:1%;}

.tabcenter{clear:both;text-align:center;margin:0 1%;padding:1%;width:95.5%;}



.hintanchor{font-weight:normal;text-decoration:none;color:navy;margin:3px 8px;}

.left {float: left; padding: 0 10px 10px 0;}
.right {float: right; padding: 0 0 10px 10px;}
.indnt30{margin-left:30px;}
.styleVFR{color:#00f;font-weight:bold;font-size:1.1em}

.UKicon{float:left;margin:3px}
.titlebarlogo {float:left;border:2px solid #990000;padding:2px;}
.titlebarbanner {text-align:justify;border:0 solid #990000;padding:0;width:100%;}