/* written for bus4wdhire - does NOT use font awesome of changeable arrows. Arrow used is simply a text character always points down. 
*/

.ciau_row {clear:both; width:100%;} /* bootstrap row is quite different */

/* --- Initialisation and bug fixes --- */
.ciau_menu_container { 
	position:relative; 
	z-index:900; /* to fix z-index problem on Chrome */
 	font-size: 16px; /* !SIZE: set font size for narrow view top 'Menu' */
}

  .ciau_menu_container a { /* !SIZE: set font size for all a tag text in menu (does not affect narrow view top 'Menu' */
    font-size: 14px;
	font-weight: bold;
  }
  .ciau_menu_container ul {
	margin: 0px;
  }
	.ciau_menu_container ul li {
	  display: block;	/* overrides dietlicious.css: ul li, ol li, ul.list > li, ol.list > li {display: list-item;}  */
	  margin-bottom: -1px; /* fixes Chrome bug of adding space after 3rd vertical menu item */
	  border-left-color: #C50202;
	  border-left-width: 2px;
	  border-left-style:solid;
	}
	
	.ciau_menu_container ul li:last-child {
	  border-right-color: #C50202;
	  border-right-width: 2px;
	  border-right-style:solid;	
	}
	
  .ciau_menu_container ul li ul {
	border-top-color: #C50202;	/* Dark Red */
	border-top-width: 4px;
	border-top-style:solid;
  }

  .ciau_menu_container ul li ul li {border:none;  } /* stop borders showing on sub levels */
  .ciau_menu_container ul li ul li:last-child {border:none;  } /* need this as well as above libne doesn't stop it

  /* --- initial padding on all levels within menu else defaults to indenting list items  - required in my TEST pages else idents LI sub items --- */
  .ciau_menu_container ul, .ciau_menu_container ul li, .ciau_menu_container ul li ul, .ciau_menu_container ul li ul li, .ciau_menu_container ul li ul li ul, .ciau_menu_container ul li ul li ul li {
	/* vertical-align: baseline; ??? */
	padding: 0; 
	/* do NOT specify margin here as causes all sorts of issues on lower sub items */
  }
/* --- */

.ciaunav {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  transition: none;
  -webkit-transform-style: preserve-3d;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  max-height: 0; 
  font-family:Verdana, Arial, Helvetica, sans-serif;	/* this sets font for all items in menu except the narrow view "Menu" button */  
}

  .ciaunav.opacity {
    opacity: 0; }
  .ciaunav.ciau_show {
    max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; }

  .ciaunav a {  /* set initial properties for all links in menu */	
	text-decoration: none;
	color: #000;	/* may be overriden by others below like inherit */
	text-align:center; /* tell button text to center align */
	}

  /* NOTE: found that I did not need to include: ".ciaunav a:visited" to stop inheritance but can be used to change on menu if required */	

  /* change hover bg color on all menu items BUT does NOT affect arrow box */
  .ciaunav a:hover { /* white on dark red */
	/* text-decoration:none; set above for <a> */
	background-image: none;
	background: #C50202; /* dark red */
	color: #FFF;
	filter: none; /* IE seems to want this to show dark red background on top level menu items */
  }
  
  .ciaunav li {
    position: relative;
    overflow: hidden; 
	}



  .ciaunav li a {	/* top level menu items ONLY - background colour (both wide & narrow views) */
    position: relative;
    display: block;
    padding: .5em;	/* !SIZE: changes padding around all <a> tag text - changes menu box height but not arrow box - top level changed below */

	padding-left: .5em;
	padding-right: .5em;
	padding-top: 13px;
	padding-bottom: 13px;


    z-index: 2;	/*tried 902 but didn't fix chrome - see elsewhere for solution */
    overflow: hidden;

	Zcolor:#000000;
	Zbackground: #ffffff;	/* sets top level menu items */
	Zbackground-color: #EFEFEF; /* set default background color
	IE won't show gradient so set a background color before gradient */
	Zbackground-image: linear-gradient(#EFEFEF,#BBBBBB); /*TESTING - affects wide view only */

	/* gradient background color lite grey to mid grey works on IE, FF & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#EFEFEF', endColorstr='#BBBBBB'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#BBBBBB)); 
	background: -moz-linear-gradient(top,  #EFEFEF,  #BBBBBB); 
	background-image: linear-gradient(to bottom, #EFEFEF 0%, #BBBBBB 100%);

	text-align:center; /* tell top menu items to center align */
}
    .ciaunav li ul li {
      position: relative;
      overflow: hidden; 
	  }
  .ciaunav li ul.ciau_show li {
    overflow: visible;
	}

  /* second level menus */
  .ciaunav li ul li a {	/* set second level menu colors for text & background (both wide & narrow views) */
    display: block;
	text-align:left; /* tell sub menu items to left align */
	/* use background to override gbackground-image inheitance - do not use background-color */
	Zbackground-image: none;
	background: #CBCBCB; /* #EFEFEF; /*lite grey*/ /* #C50202; dark red */
	z-inherit-color: #000;
	filter: none; /* IE needs this else propagates top level filter */
	}

  /* third level ... Not Required in this css 
  .ciaunav ul li ul li a {	/* third level menu background colour (both wide & narrow views) 
    Zbackground: #937D75;	/* was #bfbfbc which was lighter than parent li  
	background: #ffffff;	/* 
	}
  /* fourth level ... Not Required in this css 
  .ciaunav ul li ul li ul li a {
    background: #cbcbc9; } */
	
/* --- */

/* -- set up Navigation Arrows and touch button box surrounding arrow --- 	
.ciaunav .touch-button {	/* defines the box around arrow ie: <span> set up in .js file 
  position: absolute;
  z-index: 999; /* placing this below <a> tags makes arrows disappear 
  top: 0;
  right: 0;	/* places arrow to right of li
  width: 20px;	/* !SIZE: arrow box dimensions */
  /* default is .navicon font-size height, 2.78em=close, auto=font, inherit=font, % no good in narrow view 
  height: 2.5em; 	/* !SIZE: changes height of box arround arrow - may differ when included inside index page 
  display: inline-block;
  /* Note: if you do NOT specify background then doesn't overwrite <a> text & defaults to <li> background 
  zzbackground: #acaca1;	/* specify background color of arrow box ELSE takes on li background  
  zzbackground: rgba(255, 255, 0, 0.75);	/* TESTING - YELLOW arrow box background color and alpha density - good for testing box size 
  text-align: center; }
  .ciaunav .touch-button:hover {	/* arrow box
    cursor: pointer; 
	/* Note: if you do NOT specify a hover background then doesn't overwrite text & defaults to <li> background 
	Zbackground-color:#DED6D1;		/* set arrow box bg to mushroom on hover (both wide and narrow) 
	zxcbackground: rgba(255, 255, 0, 0.1);	/* arrow box background color and alpha density 
	zzzcolor:#6CF;
	}
  .Zciaunav .touch-button .navicon { /* only affects arrow not surrounding box 
    position: relative;
    /* set arrow top - need to vary depending on font size of <a> tag - vertical-align: middle; does not appear to work 
    top: 0.5em;	/* !SIZE: distance of arrow from top of row - note: vertical-align: middle; does not work? 
    font-size: 14px;	/* !SIZE: changes size of all wide arrows AND sub menu arrows on narrow view 
    zcolor: #fff;	/* sets font color for all item arrows except top 'Menu' in narrow view 
	color: #000000;
	}


/* --- sets Menu stuff for 'Menu' row in NARROW View --- */
.ciau_menu_button {	/* sets Menu stuff for 'Menu' row on narrow view */
  position: relative;
  display: block;
  padding: 1em;
  /*  'Menu' text color */
  color: #000000;
  Zcolor: #FFF;

  cursor: pointer;
  font-family:Verdana, Arial, Helvetica, sans-serif;	/* this sets font for the narrow view "Menu" button */
  font-weight:bold;

  Zborder-bottom: 1px solid rgba(0, 0, 0, 0.2); /* border under 'Menu' row in narrow view */ 
}



@media all and (min-width: 993px) {	/* 801 --- Wide view only : min-width value MUST = data-ciaumenubreak --- */
/*
  body.one-page {
    padding-top: 70px; }
*/

  /* WIDE view - makes only top row thicker top & bottom than sub rows - also requires adjustments to arrow box & navicon */
  .ciaunav > li > a {	/* !SIZE: changes padding on all top row <a> tag text - changes size of menu box height but not arrow box */	
	}

  .ciaunav {
    overflow: visible; }
    .ciaunav.opacity {
      opacity: 1; }

    .ciaunav li {
      position: relative;
      list-style: none;
      float: left;
      display: block;
      overflow: visible;
	  }
	  
    .ciaunav li a {
	  white-space: nowrap;	/* stops wrapping on white space and removes need for &nbsp; */
	  }

    .ciaunav li > ul {
      position: absolute;
      top: auto;
      left: 0; }
      .ciaunav li > ul li {
        width: 100%; 
		}

    .ciaunav li ul li > ul {
      margin-left: 100%;
      top: 0; }
    .ciaunav li ul.open {
      display: block;
      opacity: 1;
      visibility: visible;
      z-index: 1; /*tried 901*/
	  }
      .ciaunav li ul.open li {
        overflow: visible;
        max-height: 100px; 
		}
      .ciaunav li ul.open ul.open {
        margin-left: 100%;
        top: 0;
		}

  .ciau_menu_button { display: none; } /* hide 'Menu' button on wide view */

  /* !COLUMN WIDTHS: dependent upon number of comumns in menu */
  /* This MUST reside in the Wide View @ media else upsets narrow view */
  /* specify widths of top menu items in wide view - if not specified will default to equal widths if 'calcItemWidths': true in .js file - also set in IE 8 widtha
  /* note sum of % must be <= to 100% */
  nav-ciau ul[role=topmenu] li:nth-child(1){width:13%}	
  nav-ciau ul[role=topmenu] li:nth-child(2){width:18%} 
  nav-ciau ul[role=topmenu] li:nth-child(3){width:18%}
  nav-ciau ul[role=topmenu] li:nth-child(4){width:18%}
  nav-ciau ul[role=topmenu] li:nth-child(5){width:15%} 
  nav-ciau ul[role=topmenu] li:nth-child(6){width:18%} 
  /* followng tells sub levels <li> to go back to 100% */
  nav-ciau ul[role=topmenu] li li:nth-child(1){width:100%}
  nav-ciau ul[role=topmenu] li li:nth-child(2){width:100%}
  nav-ciau ul[role=topmenu] li li:nth-child(3){width:100%}
  nav-ciau ul[role=topmenu] li li:nth-child(4){width:100%} 
  nav-ciau ul[role=topmenu] li li:nth-child(5){width:100%}
  nav-ciau ul[role=topmenu] li li:nth-child(6){width:100%} 
  /* sub menus from wide view will configure themselves to widest text in sub menu regardless of parent's width */

}	/* --- END WIDE VIEW MEDIA --- */


.ciau_DarkRedRow { /* wide view only */
	background-color:#C50202;
	height: 5px;
	width: 99.999%; /* less tha 100% to fix extra red pixel width on some browsers - Chrome in particular */
	}

.ciau_DarkRed {
	background-color:#C50202;}

/* special class to stop menus expanded on load and that is removed by js after hiding sub menu items during initialisation */
.ciau_hide_expanded ul > li {display:none}

/* --- */

@media all and (max-width: 992px) {	/* narrow view only : value must = data-ciaumenubreak */

  .ciau_menu_container ul li {border-left:none;  }			  /* remove borders used in wide view */
  .ciau_menu_container ul li:last-child {border-right:none; } /* need this as well as above line doesn't stop it*/
  .ciau_menu_container ul li ul {border-top: none;} 		  /* undo border on sub levels for narrow view */

  .ciaunav li a {	/* first level menu narrow view */
	text-indent: 1em;  
	filter: none; /* IE needs this else propagates wide view filter */
	Zbackground-image: none;
	background: #EFEFEF; /*lite grey*/ /* #C50202; dark red */
	text-align:left; /* tell narrow views button text to left align */
	}

  .ciaunav li ul li a {	/* ident second level menu*/
	text-indent: 3em; }

  /*.ciaunav ul li ul li a {	/* indent third level menu 
	text-indent: 6em;  } */

 .ciau_DarkRed { /* only show row under menu on wide view */
	visibility:hidden;}
	
 .ciau_DarkRedRow { /* only show on wide view */
	display:none;}
	

}	/* --- END NARROW VIEW MEDIA --- */

/* ===================================================== */

/* --- STUFF for old IE --- appears this section must go LAST in .css */	

.oldie .ciaunav, .lt-ie7 .ciaunav, .lt-ie8 .ciaunav, .lt-ie9 .ciaunav {
  overflow: visible; }
  .oldie .ciaunav li, .lt-ie7 .ciaunav li, .lt-ie8 .ciaunav li, .lt-ie9 .ciaunav li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
	Zbackground-color:#96F; /* TESTING ONLY */
	/* !COLUMN WIDTHS: dependent upon number of columns in menu */
    width: 16.667%;	/* !! causes only 6 children across screen */
    zzwidth: 14.28%;	/* !! allows for 7 children across screen  but*/
    Zmin-height: 50px;	/*this causes thick border below each item*/
    overflow: visible; }
  .oldie .ciaunav li:hover > ul, .lt-ie7 .ciaunav li:hover > ul, .lt-ie8 .ciaunav li:hover > ul, .lt-ie9 .ciaunav li:hover > ul {
    display: block;
	Zbackground-color:#6FF;  /* TESTING ONLY */
    width: 100%;
	overflow: visible; }
    .oldie .ciaunav li:hover > ul li, .lt-ie7 .ciaunav li:hover > ul li, .lt-ie8 .ciaunav li:hover > ul li, .lt-ie9 .ciaunav li:hover > ul li {
      width: 100%;
      float: none; }
  .oldie .ciaunav li a, .lt-ie7 .ciaunav li a, .lt-ie8 .ciaunav li a, .lt-ie9 .ciaunav li a {/* top level menu buttons*/
    Zborder-left: 1px solid #acaca1;
    border-top: none;
    overflow: visible; }
  .oldie .ciaunav li > ul, .lt-ie7 .ciaunav li > ul, .lt-ie8 .ciaunav li > ul, .lt-ie9 .ciaunav li > ul {
    Zbackground: #Fcaca1;
    position: absolute;
    top: auto;
    left: 0;
    display: none;
    z-index: 1;
    overflow: visible; }
  .oldie .ciaunav li ul li ul, .lt-ie7 .ciaunav li ul li ul, .lt-ie8 .ciaunav li ul li ul, .lt-ie9 .ciaunav li ul li ul {
    top: 0; }
  .oldie .ciaunav li ul li a, .lt-ie7 .ciaunav li ul li a, .lt-ie8 .ciaunav li ul li a, .lt-ie9 .ciaunav li ul li a {
	font-weight: normal; /* stop second level menu buttons being double bold*/
    border-top: none; }
  .oldie .ciaunav li ul.open, .lt-ie7 .ciaunav li ul.open, .lt-ie8 .ciaunav li ul.open, .lt-ie9 .ciaunav li ul.open {
    display: block;
	Zbackground-color:#F6F;  /* TESTING ONLY - salmon - behind sub ul tags when dropped down */
    width: 100%;
    overflow: visible; }
    .oldie .ciaunav li ul.open li, .lt-ie7 .ciaunav li ul.open li, .lt-ie8 .ciaunav li ul.open li, .lt-ie9 .ciaunav li ul.open li {
      width: 100%; }
    .oldie .ciaunav li ul.open ul.open, .lt-ie7 .ciaunav li ul.open ul.open, .lt-ie8 .ciaunav li ul.open ul.open, .lt-ie9 .ciaunav li ul.open ul.open {
      margin-left: 100%;
      top: 0;
      display: block;
      width: 100%;
      overflow: visible; }
  .oldie .ciaunav ul li:hover ul, .lt-ie7 .ciaunav ul li:hover ul, .lt-ie8 .ciaunav ul li:hover ul, .lt-ie9 .ciaunav ul li:hover ul {
    margin-left: 100%;
    top: 0; }
  .oldie .ciau_menu_button, .lt-ie7 .ciau_menu_button, .lt-ie8 .ciau_menu_button, .lt-ie9 .ciau_menu_button {
	display: none; }
	
/* --- LAST LINE OF IE CSS --- */

.testRed {
	background-color:#0F0;
	}

.ciau_menu_button { /* affects narrow view to pmenyu bar */
	background-color: #f5f5f5; /* as per .panel-default > .panel-heading */
	Zbackground: #C50202; /* dark red */
	
	/* following as per bootstrap-theme:	.panel-default > .panel-heading */
	background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
	background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
	background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
	background-repeat: repeat-x;

	height: 48px; /* height of top narrow menu bar */
	
	/* Rounded Corners 
	z-moz-border-radius: 3px 3px 3px 3px	;
	z-webkit-border-radius: 3px 3px 3px 3px;
	z-khtml-border-radius: 3px 3px 3px 3px;
	zborder-radius: 3px 3px 3px 3px ; */
	
	/* button border and corners - as per bootstrap panel & panel-heading */
	border: 1px solid transparent;
	border-radius: 4px;
	border-color: #ddd;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.ciau_menu_text {
	font-size: 1em;
	Zcolor: #FFF; /* on upper level */
	Zpadding-left: 14px; /*shifts right */
	zpadding-top: 120px; /* no effect */
	Zmargin-left: 14px;  /*shifts right */
	Zmargin-top:-40px; /* has no effect */
	Zpadding-bottom:20px; /* no effect */
	Zposition:fixed; /* makes menu text move up and down page */
	position:relative; /* needed this so margin or padding worked */
	Zbackground-color:#6F3; /* testing only */
}

.ciau_hamburger:after { /* font awesome hamburger icon, must include before or after */
  content: "\f0c9";	/*"\f039";=4 bars*/
  zfont-size:28px;
  font-size: 2em;
  Zcolor: #6C9; /* testing only */
  float:right;
  Zbackground-image: none; /* as per icon-white definition */
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
  Ztext-decoration: inherit;
  padding-right: 2px; /* push hamburger in from right side */
  margin-top:-15px; /* affects vertical of hamburger icon */
}