.dropdown,
.dropdown ul,
.dropdown li {
  margin  : 0;
  padding : 0;
  background: #1567a7; /* medium blue from header - determines the hindmost bg color */
  color: #FFF;
  text-transform: uppercase;
  font-size: 90%;
}

.dropdown ul {
  display  : none;
  position : absolute;
  top      : 100%;
  left     : 0;
  z-index  : 1;
  background: #1567a7; /* probably determines the ul bg color but it is overlain by other styles */
  color: #FFF;
}

.dropdown ul ul {
  font-size  : 90%; /* not working here. works in main style sheet */
  background: #1567a7; /* probably determines the ul bg color but it is overlain by other styles */
  color: #FFF;
}

.dropdown ul li a {
  background: #004881; /* determines dropdown list bg color */
  color: #FFF;
  text-decoration: none; 
  text-align: left; /*WORKS*/
  text-transform: none;
  font-size: 130%; /* first dropdown level text size */
}

.dropdown ul li a {
  background: #004881; /* determines dropdown list bg color */
  color: #FFF;
  text-decoration: none; 
  text-align: left; /*WORKS*/
  text-transform: none;
  font-size: 130%; /* first dropdown level text size */
}

.dropdown ul ul li a {
  background: #1567a7; /* determines third level dropdown list bg color */
  color: #FFF;
  font-size: 160%; /* works */
}

.dropdown ul ul li a:hover {
  background: #004881; /* determines third level dropdown list bg color on hover state */
}

/* set the background colour of active items */
.dropdown li:hover > a,
.dropdown li:hover > span,
.dropdown li.dropdownOpen > a,
.dropdown li.dropdownOpen > span{
  background: #004881; /* THIS ONE WORKS FOR HOVER STATES - sets top level hover bg color and drop down link hover bg color */
  color: #FFF;
  text-decoration: none; /* WORKS */
}


.dropdown ul li a:hover {
  background: #1567a7; /* determines dropdown link hover bg color */
}


.dropdown ul:hover {
  background: #1567a7; /* NOT APPARENT WHAT THIS DOES */
  color: #FFF;
  text-decoration: none;  /* WORKS */
}

[dir=rtl] .dropdown ul{
  left  : auto;
  right : 0;
}

.dropdown ul ul,
[dir=rtl] .dropdown ul .dropdownLeftToRight ul{
  top   : 0;
  left  : 100%;
  right : auto;
}

[dir=rtl] .dropdown ul ul,
.dropdown ul .dropdownRightToLeft ul{
  left  : auto;
  right : 100%;
}

.dropdown li {
  position: relative;
  display: block;
  list-style-type: none;
}

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

.dropdown a,
.dropdown span{
  display: block;
  text-decoration: none;
  white-space: pre;
  padding: 12px 15px 10px 15px; 
  background: #1567a7; /* this is the top level link bg color */
  color: #FFF;
}

.dropdown a:hover,
.dropdown span:hover{
  background: #035668; /* NOT */
  color: #FFF;
}

.dropdown li:hover > ul{
  display: block;
  background: #035668; /* NOT */
  color: #FFF;
}

.dropdownVertical{
  display : inline-block;
}

.dropdownVertical > li{
  display : block;
}

.dropdownVertical ul{
  top  : 0;
  left : 100%;
}

[dir=rtl] .dropdownVertical ul{
  left  : auto;
  right : 100%;
}

.dropdownJavaScript li:hover > ul{
  display : none;
}

.dropdownJavaScript li.dropdownOpen > ul{
  display : block;
}


/* BREAKPOINTS */

@media screen and (max-width: 600px) {
	
	.dropdown, .dropdown ul, .dropdown li { text-align: center; } /*WORKS*/

	.dropdown a, .dropdown span { padding: 10px 10px 9px 10px; }
	
	.dropdown ul ul { visibility: hidden; height: 0; } /* hides third level dropdowns on narrow screens */

}