body {
    min-height:100%;
}

.guppy_osk {
    position:fixed;
    width:100%;
    bottom: 0px;
    /* border: 1px solid #ccc; */
}

.guppy_osk .controls{
    text-align: center;
    width: 100%;
    background-color: #fff;
    padding: 5px;
}

.guppy_osk .keys {
    border: none !important;
}

.guppy_osk_group {
    width: 100%;
    min-height:20vh;
    background-color:white;
    text-align: center;
}

.guppy_osk_group_box {
    display: inline-block !important;
    border: 0 !important;
    padding: 0 !important;
    margin:auto;
}

.guppy_osk .spacer {
    display: inline-block;
    height:0;
    width:8vw;
}

.guppy_osk .guppy_osk_key {
    margin: .1vh .1vw;
    display: inline-block;
    justify-content: center;
    align-items: center;
    min-width: 8vw;
    line-height:8vh;
    height:8vh;
    vertical-align:middle;
    text-align: center;
    background: #ddd;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.guppy_osk .med_key {
    min-width:10vw !important;
}

/* .guppy_osk #qwerty .guppy_osk_key, */
/* .guppy_osk .controls .guppy_osk_key, */
/* .guppy_osk #QWERTY .guppy_osk_key, */
.guppy_osk .long_key {
    min-width:20vw !important;
}

.guppy_osk .guppy_osk_key:hover {
    position: relative;
    top: 1px;
    left: 1px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}

.tabbed{
  overflow:hidden;
  clear:both;
}

.tabbar{
    width:100%;
    text-align:center;
    float:left;
    background-color:white;
    padding:1vh 0 0 0;
}

.tabbar .scroller-left{
    cursor: pointer;
    display:inline-block;
    /* border:1px solid black; */
    float:left;
    width:8vw;
    margin:0 1vw;
    min-height:7vh;
    line-height:7vh;
}

.tabbar .scroller-right{
    cursor: pointer;
    display:inline-block;
    float:left;
    /* border:1px solid black; */
    width:8vw;
    margin:0 1vw;
    min-height:7vh;
    line-height:7vh;
}

.tabbar ul{
    float:left;
    white-space:nowrap;
    list-style-type:none;
    list-style:none;
    margin:0 2.5vw;
    padding:0;
    width:70vw;
    overflow-x:hidden;
    background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 40px 100%, 40px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
}

.tabbar li{
    display:inline-block;
    background:rgba(0,0,0,0);
    cursor: pointer;
}
 
.tabbar a{
    background:rgba(0,0,0,0);
    display:block;
    padding:5px 10px;
    color: #000;
    text-decoration: none;
    margin: 0 5px;
    border-radius: 1vh 1vh 0 0;
    border-top:1px solid #000;
    border-left:1px solid #000;
    border-right:1px solid #000;
    border-bottom: 0;
    min-height:7vh;
    line-height:7vh;
    min-width:8vw
}

.tabbar i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
}

.tabbar .disabled i {
  border: solid #eee !important;
  border-width: 0 3px 3px 0 !important;
}

.tabbar .right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.tabbar .left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.tabbar a.active_tab{
  background: #7af;
}

.tabbar a.fav_tab{
  border-color: #7fa;
}

/* .tabbar div{ */
/*   clear: both; */
/*   border:1px solid #ccc; */
/*   padding:5px; */
/*   display:none; */
/* } */
