Segmented Controls Styles for JQTouch using UL > LI > A

SegmentedMenu.css

/* @group Segmented */

ul.segmented {
   border:                0px;
   padding-bottom:        1px;
   background:            none;
   overflow:              hidden;
   list-style:            none;
   text-align:            center;
   font-size:             1px;
   margin-top:            10px;
   -webkit-border-radius: 8px;
}

ul.segmented li{
   border:                1px solid rgba(180, 180, 180, 0.8);
   border-left:           0;
   border-right:          1;
   
   display:               inline-block;
   
   font-size:             12px;
   text-align:            center;
   font-weight:           bold;
   background-color:      #e1e1e1; /* For V2.2.1 */
   background:            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fcfcfc), to(#c7c7c7));
   
   -webkit-box-sizing:    border-box;
   -webkit-box-shadow:    rgba(255,255,255,0.8) 0px 1px 2px;
   -webkit-border-radius: 0;
   
}
ul.segmented li:last-child, 
ul.segmented li:last-child a {
   -webkit-border-radius:               8px;
   -webkit-border-bottom-left-radius:   0px;
   -webkit-border-top-left-radius:      0px;
}

ul.segmented li:first-child{
  border-left: 1px solid rgba(180, 180, 180, 0.4);
}
ul.segmented li:first-child, 
ul.segmented li:first-child a {
   -webkit-border-radius:               8px;
   -webkit-border-bottom-right-radius:  0px;
   -webkit-border-top-right-radius:     0px;
}

ul.segmented li a{
   color:                 #777777;
   text-shadow:           rgba(255,255,255,.8) 1px 1px 0px;
   text-decoration:       none;
   padding:               10px;
   display:               block;
   position:              relative;
}

ul.segmented li a:hover,
ul.segmented li a.selected {
   background-color:      #528CE7; /* For V2.2.1 */
   background:            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#336ed2), to(#70aafc));
   color:                 #eee;
   text-shadow:           0px -1px 1px rgba(0, 0, 0, .4);
   overflow:              hidden;
}
ul.segmented li a.selected::before,
ul.segmented li a.selected::after{
  content:                " ";
  display:                block;
  position:               absolute;
  -webkit-box-shadow:     rgba(0, 0, 0, 0.95) 0px 0px 10px;
}
ul.segmented li a.selected::after {
  height:                 1px;
  width:                  100%;
  top:                    0px;
  right:                  0px;
}

ul.segmented li a.selected::before{
  height:                 100%;
  width:                  1px;
  top:                    0px;
  right:                  0px;
}

/* @end */