/*------------ THE NAV MENU ------------------- */

/* START NAV MENU */
/* The main back ground of the header   */

nav {
  /*background-color:#2C5463;*/
  /*background-color:#F0F8FF;*/

  /*  MAIN BUTTON   */
background: white; /* Old browsers */
/*background: -moz-linear-gradient(top,  red 0%, red, red 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,red), color-stop(47%,red), color-stop(100%,red)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top,  red 0%,red 47%,red 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* IE10+ */
/*background: linear-gradient(to bottom,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */

  position: relative;   
  z-index:10;
  /*background-color:royalblue;*/
  height:40px;
  /*padding-left: 25%;*/
  color:black;
  font-weight:bold;
}
  
nav ul {
  font-family: Arial, Verdana;
  font-size: 20px;
    margin: 0;
  padding: 0;
  list-style: none;
  color: red;
}
 
nav ul li {
  display: block;
  position: relative;
  float: left;
 color: red;
}
 
nav li ul { 
  display: none; 
color: red;
}
 

nav ul li a {
  z-index:13;
  display: block;
  text-decoration: none;
  padding: 7px 15px 3px 15px;
  font-family: Arial, Verdana;
  font-size: initial;
  
  /*  MAIN BUTTON   */
/* The main button colour play,material, home etc */
background: white; /* Old browsers */

  
  
  /*background: #2C5463;*/
  /*background: white; */
  /*color: blue;*/
  /*color: #284E98;*/
  color: black;
  margin-left: 1px;
  white-space: nowrap;
  height:30px; /* Width and height of top-level nav items */
  /*width:100px;*/
  width:100px;
  text-align:center;
 
}
 
/*this on is menu hower when mousekept play then changed colours */
nav ul li a:hover { 
  /*background: #617F8A;*/
  z-index:13;

  /* - SELECTED IN THE MAIN MENU*/
background: none; /* Old browsers */


  /*background: #284E98;*/
  color: #68A4C4; 
}
 
nav li:hover ul {
  display: block;
  position: absolute;
  height:30px;
  color: White; 
    z-index:13;
}
 
nav li:hover li {
  float: none;
  font-size: 11px;
  color: White; 
    z-index:13;
 
}
 
/*this on is menu hower for  selecting the different options they are fouroptions, playwrite etc buttons  */
nav li:hover a { 
   /*background: #3A464F; */
     z-index:13;
   /* ---- SELECT BUTTON */
background: white; /* Green colour */     /* Old browsers */ 

  /*background: White;*/
  /*color: Blue; */
  color: black; 
  
  height:30px; /* Height of lower-level nav items is shorter than main level */
}


 /*this on is menu hower when abutton is selected play then changed colours */
nav li:hover li a:hover { 
  /*background: #95A9B1; */
    z-index:13;

   /* ---- SELECT BUTTON */
background: #68A4C4;/* some kind of yellow*/ /* Old browsers */

color: black;

  /*background: #284E98;*/
}
 
nav ul li ul li a {
    text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
}

nav select {
  display: none;
}

.navfont {
  font-size: small;
  text-transform: uppercase;
}

.navfontopen {
  font-size: medium;
}
  
.navtoppriority {
    z-index:-2;
}
 
.menuhighlight { text-decoration:underline; /*color:#68A4C4;*/   color: black; font-weight:bold;}

.whitemenuicon { width:16px; height: 16px;  margin-right:5px;}

.bluetoprightshortcutbuttons { width:40px; height: 40px;  margin-left:2px; margin-right:2px; cursor:pointer;}

.translateplayicon { width:20px; height: 20px;  margin-left:0px; margin-right:0px; cursor:pointer;}

/* END NAV MENU */

/* THis is to normalize buttons at index page - otherwise it looks bad on iPad Chrome */



/* -------------- MEDIA QUERIES ------------------*/

/* Two columns */

@media all and (min-width:901px) and (max-width: 1300px) and (orientation:landscape){
    /* iPad landscape mode - confirmed */
        
    /*nav select { display: inline-block; }*/  /* This is the drop down menu - still to be activated */
    .whitemenuicon { width:18px; height: 18px;  margin-right:5px;}

}

@media all and (min-width:701px) and (max-width: 1000px) and (orientation:portrait){
    /* iPad portait mode*/

    /*nav select { display: inline-block; }*/  /* This is the drop down menu - still to be activated */

            /* MENU */
    nav { height:36px; padding-left:0%;}
    nav ul { font-size: 8px;}
    nav ul li a {  padding: 5px 1px 1px 5px; height:30px; width:100px;}
    nav li:hover ul {height:30px;}
    nav li:hover li { font-size: 8px;}
    nav li:hover a {height: 30px; }
    .navfont { font-size: small; }
    .navfontopen { font-size: medium; }
        .whitemenuicon { width:16px; height: 16px;  margin-right:4px;}
    .paseedutopline {display: none;}

}

/* One column */

@media all and (min-width:1px) and (max-width: 900px)  and (orientation:landscape) {
    /* iPhone5, Sony Experia landscape */
    /* iPhone and Sony Experia are over 301*/
    
        /* MENU */
    nav { height:36px; padding-left:0%;}
    nav ul { font-size: 8px;}
    nav ul li a {  padding: 5px 1px 1px 1px; height:30px; width:100px;}
    nav li:hover ul {height:30px;}
    nav li:hover li { font-size: 8px;}
    nav li:hover a {height: 30px; }
    .navfont { font-size: small; }
    .navfontopen { font-size: medium; }
    .whitemenuicon { width:14px; height: 14px;  margin-right:4px;}
    .paseedutopline {display: none;}

    }



@media all and (min-width:1px) and (max-width: 700px) and (orientation:portrait) {
    /* iPhone5, Sony Experia portrait */
    /* iphone and Sony Experia are over 301*/
    
    /* MENU */
    nav { height:27px; padding-left:0%;}
    nav ul { font-size: small;}
    nav ul li a {  padding: 1px 1px 1px 1px; height:25px; width:90px;}
    nav li:hover ul {height:25px;}
    nav li:hover li { font-size: small;}
    nav li:hover a {height: 25px; }
    .navfont { font-size: x-small; }
    .navfontopen { font-size: small; }
    .whitemenuicon { width:10px; height: 10px;  margin-right:2px;}
        .paseedutopline {display: none;}

}