/*
	STYLE SHEET FOR IHWY JQUERY LISTNAV PLUGIN V 2.0, 3/2/2009

	For more information, visit http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
*/


/* default styling example
----------------------------------------------------------------- */

.listNav {
  margin: 0 0 10px;
}

.ln-letters {
  overflow: hidden;
  text-align: center;
  padding-left: 0px;
  display: flex;
  justify-content: space-between;
}

/*** composer page **/
ul.composerList {
  margin-left: 0px;
  display: none;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 400px;
  margin-top: 30px;
}

/*.ln-letters a { font-size:0.9em; display:block; float:left; padding:2px 6px; border:1px none silver; border-right:none; text-decoration:none; }
.ln-letters a.ln-last { border-right:1px none silver; }
.ln-letters a:hover,
.ln-letters a.ln-selected { background-color:#eaeaea; font-size:18px; }
.ln-letters a.ln-disabled { color:#ccc; } */


.ln-letters a {
  font-size: 1.0em;
  display: block;
  float: left;

  box-sizing: border-box;

  min-width: 1.5em;
  padding: 0.5em 0.4em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  color: #000 !important;
  border: 1px solid transparent;
  border-radius: 6px;

}

.ln-letters a:hover {
  color: #E7540A !important;
  border: 1px solid #E7540A;
  background-color: white;
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009f9b), color-stop(100%, #009f9b));*/
  /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top, #009f9b 0%, #009f9b 100%);*/
  /* Chrome10+,Safari5.1+ */
  /*background: -moz-linear-gradient(top, #009f9b 0%, #009f9b 100%);*/
  /* FF3.6+ */
  /*background: -ms-linear-gradient(top, #009f9b 0%, #009f9b 100%);*/
  /* IE10+ */
  /*background: -o-linear-gradient(top, #009f9b 0%, #009f9b 100%);*/
  /* Opera 11.10+ */
  /*background: linear-gradient(to bottom, #009f9b 0%, #009f9b 100%);*/
  /* W3C */
}

.ln-letters a.ln-disabled.ln-selected {
  color: #fff !important;
}
.ln-letters a.ln-selected {
  color: #fff !important;
  border: 1px solid #009f9b;
  background-color: #009f9b;
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009f9b), color-stop(100%, #009f9b));*/
  /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top, #009f9b 0%, #009f9b 100%);*/
  /* Chrome10+,Safari5.1+ */
  /*background: -moz-linear-gradient(top, #009f9b 0%, #009f9b 100%);*/
  /* FF3.6+ */
  /*background: -ms-linear-gradient(top, #009f9b 0%, #009f9b 100%);*/
  /* IE10+ */
  /*background: -o-linear-gradient(top, #009f9b 0%, #009f9b 100%);*/
  /* Opera 11.10+ */
  /*background: linear-gradient(to bottom, #009f9b 0%, #009f9b 100%);*/
  /* W3C */
}


.ln-letters a.ln-last {
  border-right: 1px none silver;
  padding-right: 0px;
}

.ln-letters a.ln-disabled {
  color: #000 !important;
}


.ln-letter-count {
  text-align: center;
  font-size: 0.8em;
  line-height: 1;
  margin-bottom: 3px;
  color: #336699;
}

/**** my list */
#composerList li {
  list-style-image: none;
  list-style: none;
  margin-bottom: 14px;
  max-width: 200px;
}

#composerList li a {
  color: #000;
  font-size: 1.0em;
}

#composerList li a:hover {
  color:#328D8F;
}

#composerList-nav {
  text-align: center;
  margin-top: 30px;
}



/* demo-specific
----------------------------------------------------------------- */

#demoThree-nav .ln-letters a {
  border: none;
  border-top: 2px solid pink;
  color: red;
}

#demoThree-nav .ln-letters a.ln-last {
  border-right: none;
}

#demoThree-nav .ln-letters a:hover,
#demoThree-nav .ln-letters a.ln-selected {
  border-top: 2px solid red;
  background-color: pink;
  color: White !important;
}

#demoThree-nav .ln-letters a.ln-disabled {
  color: pink;
}

#demoThree-nav .ln-letters a.ln-disabled:hover {
  color: white;
}

#demoThree-nav .ln-letter-count {
  color: red;
}

#demoThree li {
  color: pink;
}

#demoThree li a {
  color: red;
  text-decoration: none;
}

#demoThree li a:hover {
  text-decoration: underline;
}

#demo4 #listWrapper {
  width: 650px
}

#demoFour li {
  float: left;
}

#demoFour a {
  display: block;
  text-align: center;
  width: 85px;
  border: 1px solid silver;
  padding: 10px;
  margin: 0 10px 10px 0;
  text-decoration: none
}

#demoFour a:hover {
  background-color: #eee
}