@font-face {
    font-family: "ride_the_fader";
    src: url("fonts/RIDETHEFADER.ttf") format("truetype");
}


@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Regular.ttf");
    font-weight: normal;
}
@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Light.ttf");
    font-weight: 200;
}
@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Semibold.ttf");
    font-weight: 600;
}


body {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
	font-size: 16px;
    font-weight: normal;
	background: #f6f6f6;
	color: #333333;
    text-align: center;
    margin: 5px;
    -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}


ul
{
    list-style-type: none;
}

::-webkit-input-placeholder {
   color: #e3e3e3;
}

:-moz-placeholder { /* Firefox 18- */
   color: e3e3e3;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: e3e3e3;  
}

:-ms-input-placeholder {  
   color: e3e3e3;  
}


/* ******************** */
/*         MAIN         */
/* ******************** */

.main-title {
    font-size: 30px;
}

.main-option {
    font-size: 22px;
    text-transform: uppercase;
    margin: 15px 0px;
    padding: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    display: block;
}


.small-option {
    font-size: 13px;
    text-transform: uppercase;
    margin: 25px 0px 15px 0px;
    padding: 15px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    display: block;
}

.help-section {
    font-size: 18px;
    text-transform: uppercase;
    margin: 17px 0px 15px 0px;
    padding: 3px;
    display: block;
    font-weight: 600;
}

.help-text {
}


.clickable {
    cursor: pointer;
}


.disabledOption {
    color: #aaa;
    cursor: default;
}


.topbar-option {
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    display: block;
    vertical-align: middle;
    padding: 14px 10px;
}

.page-title {
    font-size: 22px;
    *text-transform: uppercase;
}


.top-bar {
    width:100%;
    height: 54px;
    vertical-align: middle;
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0;
    background-color: #f6f6f6;
    overflow: hidden;
    display: inline;
    z-index: 2;
    border-bottom: thin solid #aaa;

}


.top-bar-right {
    width: 30%;
    overflow:hidden;
    text-align: right;
    height: 54px;
    display: table;
    float:right;
}
.top-bar-left {
    width:30%;
    float:left;
    height: 54px;
    text-align: left;
    display: table;
}
.top-bar-center{
    display: inline-block;
    text-align: center;
    height: 54px;
}

.bottom-bar {
    width:100%;
    height: 30px;
    vertical-align: middle;
    position: fixed;
    bottom: 0px;
    left: 0px;
    margin: 0;
    *background-color: #000;
    overflow: hidden;
    display: inline;
    z-index: 2;
    *border-top: thin solid #aaa;
    *color: #f6f6f6;
}


.bottom-bar-right {
    width: 30%;
    overflow:hidden;
    text-align: right;
    height: 30px;
    display: table;
    float:right;
}
.bottom-bar-left {
    width:30%;
    float:left;
    height: 30px;
    text-align: left;
    display: table;
}
.bottom-bar-center{
    display: inline-block;
    text-align: center;
    height: 30px;
}

.bottom-bar-option {
    font-size: 12px;
    text-transform: uppercase;
    margin: 40px 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ******************** */
/*       FIXTURES       */
/* ******************** */

.fixture-table {
    border-spacing: 8px;
    margin: 5px auto;
}

.fixture-match {
    height: 25px;
    padding-top: 4px;
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
}

.fixture-home-team {
    width: 200px;
    text-align: right;
    vertical-align: baseline;
    padding-right: 8px;
}

.fixture-visitor-team {
    width: 200px;
    text-align: left;
    vertical-align: baseline;
    padding-left: 8px;
}

.fixture-score {
    width: 40px;
    font-weight: normal;
    text-align: center;
    font-size: 135%;
    vertical-align: baseline;
    background-color: #e6e6e6;
}

.fixture-vs {
    text-align: center;
    vertical-align: baseline;
}


.hand {
    font-size: 80%;
    margin: 8px 0;
    color: #666;
}


/* ******************** */
/*        TEAMS         */
/* ******************** */



#wrapper {
    position: relative;
    top: 60px;
    *overflow: auto;
    *height: 300px;
    margin-left: auto; margin-right: auto;
    *background: #444;
    -webkit-overflow-scrolling: touch;
    z-index:1;
}


.teamList {

}

.teamEntry {
    font-size: 30px;
    font-weight: lighter;
    border: 0;
    /* padding: 2px; */
    background-color: transparent;
    outline: 0;
    color: #666;
    width: 320px;
    padding: 5px;
    

}

.teamRow {
}

.teamDelete {
    font-size: 20px;
    *background-color: #e0e0e0;
    *color: #fefefe;
    background-color: #d09191;
    color: #fefefe;
    padding: 5px 7px 0 7px;
    margin-left: 5px;
    cursor: pointer;
}

.teamDeleteHide {
    /* visibility: hidden; */
}

.teamEditing {
    /* border: 2px dotted gray;
    padding: 0px; */
    color: black;
}

#addButton {
    font-size: 16px;
    width: 350px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background-color: #ddd;
    border: 0px;
    color: 111;
    padding: 6px;
    margin-top: auto; margin-bottom: auto;
    cursor: pointer;
}

.teamFormat {
    font-size: 18px;
    *font-weight: bold;
    margin: 5px 0;
    cursor: pointer;
}

header {
    height: 50px;
}


#teams {
    font-size: 30px;
    *width: 380px;
    *margin: 0 auto;
    *background-color: #333;
    text-align: center;
}

#options {
    margin-left: auto; margin-right: auto;
    margin: 10px auto;
}

footer {
    clear:both;
    height: 50px;
}


select {
   border: 0;
   color: #333;
   background: transparent;
   font-size: 16px;
   font-weight: bold;
   padding: 2px 10px;
   *width: 80px;
   background: #ddd;
   -webkit-appearance: none;
    vertical-align: text-bottom;
}

.selectBox {
   overflow:hidden;
   *width:80px;
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
   *box-shadow: 1px 1px 11px #330033;
   color: 333;
}



/* ******************** */
/*       HISTORY        */
/* ******************** */

.compDate {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 100%;
}


.compTable {
    margin-left: auto;
    margin-right: auto;
}

.tableCol {
    min-width: 50px;
    padding-left: 4px;
    padding-right: 4px;
}

.tableHeader {
    background-color: #ddd;
}

.tableTeamCol {
    min-width: 100px;
    text-align: left;
}


.historyDelete {
    *font-size: 20px;
    background-color: #d45252;
    color: #fefefe;
    padding: 0px 7px 0 7px;
    margin-left: 5px;
    cursor: pointer;
    *font-weight: lighter;
}

.historyDeleteHide {
    display: none;
}


/* ******************** */
/*      SCOREBOARD      */
/* ******************** */


.dice-bar {
    width:100%;
    height: 88px;
    vertical-align: middle;
    position: fixed;
    bottom: 50px;
    left: 0px;
    margin: 0;
    background-color: #000;
    overflow: hidden;
    display: inline;
    z-index: 2;
    border-top: thin solid #aaa;
    color: #f6f6f6;
    padding-top: 5px;
}


.diceSelectBox {
    overflow:hidden;
    *width:80px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    *box-shadow: 1px 1px 11px #330033;
    color: 333;
    text-align: center;
}


.diceX {
    height: 35px;
    padding: 3px 5px;
    text-align: center;
    *border: thin solid #aaa;
    margin: 5px;
    background-color: #AAA;
    font-size: 12px;
    color: black;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}

.dice {
    height: 48px;
    width: 48px;
    margin-left: 1px;
    margin-right: 1px;
}

.diceAction {
    font-size: 12px;
    color: #DDD;
}

.diceValue {
    font-size: 36px;
}

.bottom-bar-dark {
    width:100%;
    height: 50px;
    vertical-align: middle;
    position: fixed;
    bottom: 0px;
    left: 0px;
    margin: 0;
    background-color: #000;
    overflow: hidden;
    display: inline;
    z-index: 2;
    border-top: thin solid #aaa;
    color: #f6f6f6;
}


.bottom-bar-right-dark {
    width: 30%;
    overflow:hidden;
    text-align: center;
    height: 50px;
    display: table;
    float:right;
}

.bottom-bar-left-dark {
    width:30%;
    float:left;
    height: 50px;
    text-align: center;
    display: table;
}


.bottom-bar-center-dark {
    *width:40%;
    height: 50px;
    display: inline-block;
    text-align: center;
}


#scoreboard {
    *top: 60px;
    *overflow: auto;
    *height: 300px;
    *margin-left: auto; margin-right: auto;
    *background: #444;
    -webkit-overflow-scrolling: touch;
    z-index:1;
    padding-top: 16px;
}

.teamName {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: lighter;
}

.hidden {
    visibility: hidden;
}

.dontShow {
    display: none;
}

.showGenius {
    display: inline-block;
}