@font-face {
    font-family: "Conduit ITC";
    src: url(Conduit-ITC.woff);
}
html {
    color: #FFF;
    font-family: "Conduit ITC", sans-serif;
}
label {
    float: left;
    font-size: 2.478vh;
}
.tabs {
    float: right;
    left: 27.8775vh;
    top: 0.708vh;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    font-size: 1.77vh;
    z-index: 3;
    width: 37.17vh;
}
.tabs li {
    display: inline;
}
.tabs li a {
    background: #14234a;
    color: #FFF;
    display: block;
    float: left;
    padding: 0.2655vh 1.062vh;
    position: relative;
    text-decoration: none;
    border-top-left-radius:0.885vh;
    border-top-right-radius:0.885vh;
    margin-right: 2px;
}
.tabs li a:hover {
    background: #B1572A;
}
#settingsWindow {
    width: 59.7375vh;
    margin-bottom: 0;
    opacity: 0.85;
    position: absolute;
    font-size: 2.655vh;
    line-height: 3.0975vh;  
    right:5%;
    top:44%
}
#settingsWindow div{
    width: 100%;
}
#settingsWindow div:not( #windowHeader) {
    background: #14234a;
    border: 1px solid #000;
    left: 0;
    padding: 20px;
    padding-top: 15px;
    position: absolute;
    top: 4.3365vh;
    height: 45.135vh;
}
#windowHeader {
    padding: 0.885vh 27px 20px 15px;
    height: 3.54vh;
    background-color: #000;
    color: #FFF;
    line-height: 3.0975vh;
    position: relative;
}
.setting {
    float: right;
    font-size: 1.947vh;
    height: 2.655vh;
    line-height: 2.655vh;
    margin-right: 20px;
    margin-bottom: 0.885vh;
    margin-top: 0.354vh;
    position: absolute;
    right: 0;
    width: 26.55vh;
    font-family: "Conduit ITC", sans-serif;
    border: 1px solid grey;
    color: #474747;
}
.tinySetting {
    width: 5.31vh; 
    float: right; 
    margin-top: 0.354vh; 
    height: 2.655vh;
    line-height: 2.655vh;
    font-size: 1.947vh;
    font-weight: 700;
    font-family: "Conduit ITC", sans-serif;
    text-align: center;
    border: 1px solid grey;
    color: #474747;
}
input.setting {
    padding-left: 5px;
}
input[type=range] {
    -webkit-appearance: none;
    float: right;
    width: 20.355vh;
    margin-right: 0.885vh;
    margin-top: 1.45vh;
    height: 0.4425vh;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid grey;
  height: 2.2125vh;
  width: 2.2125vh;
  border-radius: 1.77vh;
  background: #efefef;
}
input[type=range]:focus, input[type=checkbox]:focus {
  outline: none;
}
#playerSettings:target,#serverSettings:target,#advancedSettings:target {
    z-index: 2;
}
#playerSettings:target ~ .tabs a[href='#playerSettings'],#serverSettings:target ~ .tabs a[href='#serverSettings'],#advancedSettings:target ~ .tabs a[href='#advancedSettings'] {
    background-color: #14234a;
    border-bottom: 1px solid #14234a;
    padding-bottom: 10px;
}

#controllerWindowHeader {
    padding: 1.3275vh 2.478vh 1.3275vh 1.239vh;
    background-color: #000;
    color: #FFF;
    line-height: 1.77vh;
    position: relative;
    margin-bottom: 0.885vh;
    font-size: 2.478vh;
}
#closeButton {
    background-color: #000;
    border: 1px solid #FFF;
    border-radius: 0.531vh;
    color: #FFF;
    padding: 0;
    padding-left: 0.0177vh;
    font-size: 1.77vh;
    font-weight: 700;
    line-height: 3.0975vh;
    position: absolute;
    right: 0.708vh;
    top: 0.708vh;
    width: 3.0975vh;
    height: 3.0975vh;
    z-index: 10;
}
#controllerWindowHeader #closeButton{
    padding: 0;
}
#closeButton:hover,#expandCollapse:hover {
    background-color: #B1572A;
}
#closeButton:focus,#expandCollapse:focus {
    outline: 0;
}
#controllerSettings {
    background-color: #14234a;
    border: 1px solid #000;
    color: #FFF;
    display: none;
    font-size: 1.77vh;
    font-weight: 700;
    height: 43.719vh;
    opacity: 0.8;
    position: absolute;
    top: 1.77vh;
    left: 1.77vh;
    width: 110.979vh;
}
#controllerSettings label{
    font-size: 1.77vh;
}

#presets {
    float: right;
    margin-right: 25.665vh;
}
#presets label {
    font-size: 2.2125vh;
}
#presetMenu {
    font-size: 1.947vh;
    height: 2.655vh;
    line-height: 1.593vh;
    margin-left: 0.885vh;
    width: 31.86vh;
    font-family: "Conduit ITC", sans-serif;
}
#controls,#vehicle,#other,#advanced {
    border: 1px solid #FFF;
    float: left;
    line-height: 2.478vh;
    margin-left: 1.77vh;
    min-height: 19.47vh;
    padding: 1.3275vh;
    position: relative;
    width: 20.355vh;
}
#controls select,#extendedControls select {
    float: right;
}
#controllerGraphic {
    float: right;
    position: relative;
    right: 23.01vh;
    top: 5.487vh;
}
#controllerGraphic div {
    height: 3.009vh;
    line-height: 1.4691vh;
    position: absolute;
    width: 23.01vh;
    z-index: -1;
}
#controllerPic {
    position: relative;
    top: 0.354vh;
    width: 40.533vh;
    height: 23.541vh;
}
#extendedControls {
    background-color: #14234a;
    border: 1px solid #000;
    border-top: 0;
    display: none;
    height: 23.895vh;
    left: -1px;
    position: absolute;
    top: 43.719vh;
    width: 110.979vh;
}
#expandCollapse {
    background-color: #14234a;
    border: 2px solid #000;
    border-radius: 0.885vh;
    bottom: -1.3275vh;
    color: #FFF;
    font-size: 1.3275vh;
    height: 2.478vh;
    left: 49.737vh;
    letter-spacing: 0.2655vh;
    padding-left: 2.0355vh;
    padding-right: 2.0355vh;
    position: absolute;
}
#advanced {
    width: 53.985vh;
}

#advanced input[!type=range], #advanced select {
    float: right;
    margin-right: 1.77vh;
    height: 1.593vh;
    line-height: 2.124vh;
    margin-bottom: 0.354vh;
}

#advanced .tinySetting{
    height: 2.2125vh;
    font-size: 1.593vh;
    line-height: 1.77vh;
    margin-right: 1.1505vh;
}

#advanced input[type=range] {
    margin-right: 8.85vh;
    line-height: 1.947vh;
}

.bind {
    float: right;
    font-size: 1.3275vh;
    font-weight: 700;
    height: 2.2125vh;
    margin-right: 1.77vh;
    margin-bottom: 0.885vh;
    margin-top: 0.354vh;
    position: absolute;
    right: 0;
    width: 7.08vh;
}
#A {
    left: 40.71vh;
    top: 15.93vh;
}
#B {
    left: 40.179vh;
    top: 13.098vh;
}
#X {
    left: 38.763vh;
    top: 7.08vh;
}
#Y {
    left: 39.471vh;
    top: 9.912vh;
}
#RS {
    left: 40.71vh;
    top: 19.824vh;
}
#RB {
    left: 36.462vh;
    top: 1.947vh;
}
#RT {
    left: 29.913vh;
    top: -2.832vh;
}
#LT {
    right: 29.559vh;
    text-align: right;
    top: -2.832vh;
}
#LB {
    right: 35.931vh;
    text-align: right;
    top: 1.947vh;
}
#Start {
    height: 1.77vh !important;
    right: 37.878vh;
    text-align: right;
    top: 7.08vh;
}
#Back {
    height: 1.77vh !important;
    right: 40.002vh;
    text-align: right;
    top: 9.204vh;
}
#LS {
    right: 40.887vh;
    text-align: right;
    top: 11.682vh;
}
#Left {
    right: 40.887vh;
    text-align: right;
    top: 18.408vh;
}
#Right {
    left: 16.638vh;
    top: 24.249vh;
}
#Up {
    right: 40.887vh;
    text-align: right;
    top: 15.222vh;
}
#Down {
    right: 40.356vh;
    text-align: right;
    top: 21.594vh;
}

@media screen and (aspect-ratio: 4/3), screen and (aspect-ratio: 5/4) {

}