#tray {
	float: left;
    height: 34px;
    position: relative;
}
.triangle {
margin-top: 34px;
}

.navigation {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: relative;
  width: auto;
  z-index: 5;
}

.navigation li {
  margin:0 5px;
  padding: 0;
  position: relative;
}

#whitebar .navigation li {
float: right;
}

#ribbon ul.navigation {
background: none repeat scroll 0 0 transparent;
border: medium none;
margin: 0;
padding-left: 10px;
}

#ribbon .navigation li {
float: left;
}

#whitebar .navigation a {
  background: none repeat scroll 0 0 transparent;
  color: #1E6B52;
  display: block;
  font-weight: normal;
  padding: 5px;
  text-decoration: none;
}

#ribbon .navigation a {
  background: none repeat scroll 0 0 transparent;
  color: #FFFFFF;
  display: block;
  font-weight: normal;
  padding: 7px;
  text-decoration: none;
}

#whitebar .navigation a:hover{
	color:#222222;
	background: none repeat scroll 0 0  #c7c7c7;
	text-decoration:underline;
}

#ribbon .navigation a:hover{
	color: #DEFFDF !important;
	background: none repeat scroll 0 0 #1B4638;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#whitebar .navigation ul {
	background: none repeat scroll 0 0 transparent; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	list-style: none outside none;
	position: absolute;
}
#whitebar .navigation ul li {
  text-align: left;
  width: 160px;
}
#whitebar .navigation ul a {
	white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#whitebar .navigation li:hover ul { /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}

#whitebar .navigation li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
  background: none repeat scroll 0 0 #F1F1F1;
  text-decoration: underline;
}

#whitebar .navigation li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
  left: -50%;
  position: relative;
  text-decoration: none;
}

#whitebar .navigation li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
  background: none repeat scroll 0 0 #FFFFFF;
  text-decoration: underline;
}

a#sidebar_trigger.active {
  max-width: 200px;
}

.sidebar ul.menu {
  clear: both;
  margin: 0;
  padding: 30px 10px 40px 15px;
}

.sidebar ul.menu li {
  border-top: 0 none;
  display: block;
  font-weight: 600;
  line-height: 1.25em;
  list-style: none outside none;
  padding: 6px 0;
}
#footer {
padding: 5px 0;
}

#footer ul {
text-align: center;
}

#footer ul li {
  background: none repeat scroll 0 0 transparent;
  border-radius: 0 0 0 0;
  border-top: medium none;
  color: #FFFFFF;
  display: inline;
  font-weight: normal;
  line-height: 1.4em;
  list-style: none outside none;
  margin: 0;
  padding: 8px 5px;
}

/******** Begin Responsive elements ********/
@media only screen and (min-width: 320px) and (max-width: 1024px) {

#whitebar .navigation ul {
  left: auto;
  list-style: none outside none;
  position: relative;
}

#whitebar .navigation ul li {
  float: left;
  margin: 0;
  text-align: left;
  width: 100%;
}


#whitebar .navigation li:hover a {
  background: none repeat scroll 0 0 transparent;
}

#whitebar .navigation li:hover ul a {
  left: 0;
}
#whitebar .navigation li:hover ul li a:hover {
  background: none repeat scroll 0 0 #F1F1F1;
}
}
/******** End Responsive elements ********/