#garageUI
{
  position:fixed;
  display:none;
  margin:0;
  padding:0;
  
  width:70%; /* The room left over from mainMenu */
  height:400px;
  left:0;
  bottom:0;
  z-index:-1; /* To appear behind the main menu */
  
  border-left:0;
}

#colorChooser
{
  position:absolute;
  top:0;
  left:0;
  margin:0;
  width:calc(100% - 500px);
  box-sizing:border-box;
}

#colorChooserContents
{
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
  height:calc(400px - 9em); /* The rest of the space not taken by the stats panel or the TitleBar */
}

.ColorChooserItem
{
  position:relative;
  background-color:red;
  height:1.5em;
}

.ColorChooserText
{
  position:relative;
  height:1.5em;
}

#vehicleChooser
{
  width:15%;
  height:12ex;
  position:absolute;
  top:0;
  right:502px;
  margin: 0 auto;
  border:none;
}

#vehicleChooser select
{
  overflow-y:hidden;
}

#vehicleChooserTitleBar
{
  text-align:center;
}

#statsPanel
{
  position:absolute;
  left:0;
  bottom:1px;
  width:25em;
  height:8em;
  padding-top:0.2em;
  width:calc(100% - 500px);
  box-sizing:border-box;
  
  font-family: 'Orbitron', sans-serif;
  
  overflow-x:hidden;
  overflow-y:auto;
}

.StatContainer
{
  position:relative;
  width:100%;
  height:1em;
  margin-top:0.3em;
}

.StatMax
{
  position:absolute;
  left:50%;
  top:0;
  margin-top: -0.5em;
  margin-left:-1.5em;
  
  width:3em;
  height:1em;
  line-height:1em;
  font-size:1em;
  
  color:#fff;
  text-shadow:
    -2px -2px 0 #333,
    2px -2px 0 #333,
    -2px 2px 0 #333,
    2px 2px 0 #333;
}

.StatText
{
  position:absolute;
  width:35%;
  height:100%;
  top:0;
  
  font-size:1em;
  text-align:right;
  white-space: nowrap;
}

.StatsProgressBarContainer
{
  position:absolute;
  background-color:#444;
  width:45%;
  height:40%;
  min-height:5px;
  right:6.8%;
  
  /* Vertical centering within parent */
  top: 50%;
  transform: translateY(-50%);
}

.StatsProgressBar
{
  position:relative;
  width:50%;
  height:100%;
  background-color:#eee;
}

.StatMinusButton, .StatPlusButton
{
  position:absolute;
  width:1em;
  height:1em;
  
  border:1px solid #aaa;
  background-color:#444;
  
  font-family: 'Orbitron', sans-serif;
  font-size:1em;
  line-height:1em;
  text-align:center;
  vertical-align:middle;
}

.StatMinusButton
{
  right:calc(54% + 5px);
}

.StatPlusButton, .StatMaxed
{
  right:5px;
}

.ModIcon
{
  position:absolute;
  left:1.2em;
  bottom:0.8em;
  z-index:1;
  
  border: 1px solid #eee;
  width:4.5em;
  height:4em;
  transform:skew(20deg);
  
  font-family: 'Orbitron', sans-serif;
}

#garageCanvasContainer
{
  position:absolute;
  bottom:0;
  right:0;
  width:500px;
  height:400px;
  box-sizing:border-box;
  
  border:1px solid #555;
}

#garageCanvas
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.RainbowColorChooserItem
{
  background: -moz-linear-gradient( left ,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 255, 0, 1) 15%,
        rgba(0, 255, 0, 1) 30%,
        rgba(0, 255, 255, 1) 50%,
        rgba(0, 0, 255, 1) 65%,
        rgba(255, 0, 255, 1) 80%,
        rgba(255, 0, 0, 1) 100%);
  background: -webkit-gradient(linear,  left top,  right top, 
      color-stop(0%, rgba(255, 0, 0, 1)), 
      color-stop(15%, rgba(255, 255, 0, 1)),
      color-stop(30%, rgba(0, 255, 0, 1)),
      color-stop(50%, rgba(0, 255, 255, 1)),
      color-stop(65%, rgba(0, 0, 255, 1)),
      color-stop(80%, rgba(255, 0, 255, 1)),
      color-stop(100%, rgba(255, 0, 0, 1)));
}