/* Add some margin to the page and set a default font and colour */

*
{
  /*clear: both;*/
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

body 
{
  line-height: 1em;
  color: #333;
  background-color: #989489;
  background: url("../images/drag_drop_background.jpg") no-repeat center center;
  background-size: cover;
}

/* Main content area */

.card_font
{
    font-size: 1em;
    widows: 100%;
    display: block;
    color: white;
}

.top
{
    position: relative;
    bottom: 15px;
}

.container
{
  background-color: rgba(256,256,256,0.9); !important;
  margin-top: 7%;
}
 
/* Slots for final card positions */
 
#cardSlots 
{
  /*margin: 50px auto 0 auto;*/
  width: 600px;
  height: 450px;
  background: url("../images/enginebay_cartoon2.png") no-repeat center center;
  background-size: 100%;
  /*padding: 20px;*/
  float: left;
}
 
/* The initial pile of unsorted cards */
 
#cardPile 
{
  width: 50%;
  margin: 0 auto;
  /*padding: 20px;*/
}

/* Individual cards and slots */ 
#cardSlots div 
{
  float: left;
  width: 50px;
  height: 50px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /*margin: 0 0 0 10px;*/
  background: rgba(256,256,256,0.2);
}

#cardPile div 
{
  float: right;
  width: 100px;
  height: 60px;
}
 
#cardSlots div:first-child, #cardPile div:first-child 
{
  margin-left: 0;
}
 
#cardSlots div.hovered 
{
  background: #aaa;
}

#successMessage 
{
  position: absolute;
  left: 450px !important;
  width: 400px !important;
  height: 150px !important;
  z-index: 100;
  background: white;
  border: 1px solid #b3b3b3 !important;
  border-radius: 10px;
  padding: 20px;
  font-size: 1.5em;
  resize: none !important;
  cursor: move;
  display: none;
}

a
{
  color: white !important;
  text-decoration: none !important;
  display: block;
}

a:hover, a:active
{
  color: white !important;
  text-decoration: none !important;
}

.progress
{
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
    height: 32px !important;
    margin-top: 20px;
}

.h2_position
{
  margin-left: 35%;
}

.h2_position_hard
{
  margin-left: 48%;
}

.engine_symbol
{
    background: url("../images/engine_symbol.png") no-repeat center center;
    background-size: 100px 100px;
}

.battery
{
    background: url("../images/battery.png") no-repeat center center;
    background-size: 100px 100px;
}

.dipstick
{
    background: url("../images/dipstick.png") no-repeat center center;
    background-size: 120px 120px;
}

.brake_fluid
{
    background: url("../images/brake_fluid.png") no-repeat center center;
    background-size: 100px 100px;
}

.engine_coolant
{
    background: url("../images/engine_coolant.png") no-repeat center center;
    background-size: 100px 100px;
}

.lights
{
    background: url("../images/lights.png") no-repeat center center;
    background-size: 100px 100px;
}

.oil
{
    background: url("../images/oil.png") no-repeat center center;
    background-size: 100px 100px;
}

.temp_gauge
{
    background: url("../images/temp_gauge.png") no-repeat center center;
    background-size: 100px 100px;
}

.windscreen_fluid
{
    background: url("../images/windscreen_fluid.png") no-repeat center center;
    background-size: 100px 100px;
}