/* Top level menu */
#navigationmenu{
  width: 100%;
  display: block;
  height: 30px;
  padding: 0;
  margin: 0 auto;
}
#rhymecontent,
#lettercontent,
#catcontent{
  position: relative;
}
#lettercontent li,
#catcontent li,
#rhymecontent li,
#navigationmenu li{
  list-style-type: none;
  float: left;
  text-align: center;
}
#navigationmenu li.topsubscribe{
  float: right;
  margin: 0;
}
#navigationmenu a.topmenu{
  padding: 0px 12px;
}
ul.catchild li a,
#lettercontent li a,
#rhymecontent li a,
#catcontent li a,
#navigationmenu li a{
  line-height: 30px;
  font-size: 18px;
  display: block;
  text-decoration: none;
}
#catcontent li a:hover{
  background-color: #512b72;
}
#lettercontent li a:hover{
  background-color: #0080b8;
}
#rhymecontent li a:hover{
  background-color: #a8217c;
}
#catcontent li a:hover,
#lettercontent li a:hover,
#rhymecontent li a:hover{
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  color: white;
}

/* Alphabetical menu */
#catcontent,
#rhymecontent,
#lettercontent{
  width: 100%;
  display: none;
  height: auto;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
}
/* Alpha is the default one, but dimmed */
#lettercontent{
  display: block;
  background-color: #0080b8;
  z-index: 50;
  display: block;
}
.alphabet #lettercontent{
  background-color: #0097ce;
}
#catcontent a,
#rhymecontent a,
#lettercontent a{
  color: #fefefe;
}
@media all and (max-width: 1023px){
  a#letteropen.topmenu:after,a#rhymeopen.topmenu:after,a#catopen.topmenu:after,
  a#letteropen.topmenu:hover:after,a#rhymeopen.topmenu:hover:after,a#catopen.topmenu:hover:after{
    border-color: transparent;
    box-shadow: none;
    display: none;
  }
}
#rhymecontent li a{
  padding: 0 13px;
}
#lettercontent li{
  width: 33px;
}
#lettercontent li.last{
  width: 50px;
}
#catcontent li.parent a{
  padding: 0 8px;
}

/* Responsive stuff */
@media all and (max-width: 640px){
  #navigationmenu li{
    width: 33.3333333%;
  }
  #catcontent, #lettercontent, #rhymecontent{
    display: none !important;
  }
  #catcontent li{
    width: 25%;
    text-align: center;
  }
  /* Need to display this on mobile sometime */
  #rhymeopen{
    display: none !important;
  }

  a#letteropen.topmenu:after,a#rhymeopen.topmenu:after,a#catopen.topmenu:after
  a#letteropen.topmenu:hover:after,a#rhymeopen.topmenu:hover:after,a#catopen.topmenu:hover:after{
    border-color: transparent;
    box-shadow: none;
    display: none;
  }
  #catcontent, ul.catchild{
    padding-top: 0px;
  }
}
@media all and (max-width: 480px){
  #catcontent li{
    width: 50%;
    border: 0;
  }
}
/* Individual menu colours */
a#topsubscribe{
  background-color: #ffae00;
  color: white;
}
a#topsubscribe:hover{
  background-color: #da980a;
  color: white;
}
a#letteropen{
  background-color: #0080b8;
  z-index: 10;
}
.alphabet a#letteropen{
  background-color: #0097ce;
  z-index: 10;
}
a#letteropen,
a#catopen,
a#rhymeopen{
  color: #fefefe;
}
a#catopen{
  background-color: #512b72;
  z-index: 9;
}
a#rhymeopen{
  background-color: #a8217c;
  z-index: 8;
}
.category #catcontent{
  background-color: #674388;
  z-index: 50;
  display: block;
}
.category #catopen{
  background-color: #674388;
  z-index: 20 !important;
}
.rhyme a#rhymeopen{
  background-color: #c2177a;
  z-index: 20 !important;
}
.rhyme #rhymecontent{
  background-color: #c2177a;
  z-index: 50;
  display: block;
}
.rhyme #catcontent,
.rhyme #lettercontent{
  display: none;
}
.alphabet #catcontent,
.alphabet #rhymecontent{
  display: none;
}
.category #lettercontent,
.category #rhymecontent{
  display: none;
}
a.topmenu.active{
  z-index: 20 !important;
}
a#catopen.topmenu:hover{
  background-color: #674388;
}
a#letteropen.topmenu:hover{
  background-color: #0097ce;
}
/* Rhyme tab hover colors */
a#rhymeopen.topmenu:hover{
  background-color: #c2177a;
}
a#rhymeopen.topmenu:hover:after{
  border-color: #c2177a;
  box-shadow: -2px 2px 0 #c2177a;
}
a#catopen.topmenu:hover:after{
  border-color: #674388;
  box-shadow: -2px 2px 0 #674388;
}
a#letteropen.topmenu:hover:after{
  border-color: #0097ce;
  box-shadow: -2px 2px 0 #0097ce;
}
a#letteropen.topmenu,a#rhymeopen.topmenu,a#catopen.topmenu,a#calltoaction, a#topsubscribe{
  -webkit-border-top-left-radius: 17px;
  -moz-border-radius-topleft: 17px;
  border-top-left-radius: 17px;
  -webkit-border-top-right-radius: 17px;
  -moz-border-radius-topright: 17px;
  border-top-right-radius: 17px;
  position: relative;
}
a#letteropen.topmenu:after,a#rhymeopen.topmenu:after,a#catopen.topmenu:after{
  border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-width: 0 0 1px 1px;
  border-style: solid;
  position: absolute;
  bottom: -1px;
  width: 10px;
  height: 10px;
  right: -10px;
  content: " ";
}
.alphabet a#letteropen.topmenu:after{
  border-color: #0097ce;
  box-shadow: -5px 5px 0 #0097ce;
}
a#letteropen.topmenu:after{
  border-color: #3e73a4;
  box-shadow: -5px 5px 0 #0080b8;
}
.category a#catopen.topmenu:after{
  border-color: #674388;
  box-shadow: -5px 5px 0 #674388;
}
a#catopen.topmenu:after{
  border-color: #512b72;
  box-shadow: -5px 5px 0 #512b72;
}
.rhyme a#rhymeopen.topmenu:after{
  border-color: #c2177a;
  box-shadow: -5px 5px 0 #c2177a;
}
a#rhymeopen.topmenu:after{
  border-color: #a8217c;
  box-shadow: -5px 5px 0 #a8217c;
}