/******************************************************************************
* Styles for page and game areas.                                             *
******************************************************************************/
@import url(font-awesome/css/font-awesome.min.css); /*font ico*/

body {
  background-color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  margin-top: 1em;
  text-align: center;
}

.principal {width: 100%;}


#header h2{font-size: 30px;}

.playingField {
  background-color: #555;
  border-color:  #000;
  border-style: solid;
  border-width: 10px;
  color: #000;
  margin-bottom: 10px;
  text-align: left;
}

.activeField {
  background-color: #469660;
  border-color:  #000;
}

.cardArea {
  font-size: 20pt;
  height: 150px;
  position: relative;
  margin-top: 60px;
  margin-left: 15px;
}



.name {color: #FFF; font-size: 25px; padding-left: 5px}

.score {color: #FFF; font-weight: bold; font-size: 20px; text-align: right; padding-right: 5px; padding-top: 5px;}

.dollars {color: #FFF; font-size: 20px; text-align: left; padding-top: 4px;}

.lost {color: #da2a37; font-size: 20px; text-align: left; padding-top: 4px;}

.result {color: #FFF; font-weight: bold; font-size: 20px; text-align: right; padding-top: 4px;}

.presupuesto {padding: 10px; background-color: #000; color: #FFF;  font-size: 16px; text-align: right;}

#controlsArea{padding-top: 10px;}


            #box1 { 
                background-color: #000;
                float:left;  
                width:5%;
                height: 40px;
                text-align: left;
            } 
            #box2{ 
                float:left;  
                background-color: #000;
                width:15%; 
                height: 40px;
            } 
            #box3{ 
                background-color: #000;
                float:right;
                width:20%; 
                height: 40px;
            } 
            #box4{ 
                background-color: #000;
                float:right;
                width:60%; 
                height: 40px;
            } 


#rulesBox {
  background-color: #000;
  font-size: 16px;
  color: #FFF;
  display: none;
  margin: 1em auto 3em auto;
  padding: 20px;
  width: 90%;
  text-align: justify;
}

input.button {
  background: #FFF;
  margin: 10px 5px;
  width: 8em;
  font-size: 18px;
  border-style: solid;
  border: 10px;
  height: 40px;
  border-radius: 0px;
  border: 4px solid #000;
}

input.button:hover {
background: #000;
cursor: pointer;
color: #FFF;
}

input.button:active {
background: #000;
cursor: pointer; 
color: #FFF;
}

input.button:disabled{background: #DDD; color: #DDD; cursor: not-allowed; border: none;}

#increase{width: 80px;}
#decrease{width: 80px;}




/******************************************************************************
* Playing card styles.                                                        *
******************************************************************************/

.card {
  background-image: url("cardback.gif");
  border-color: #FFF;
  border-width: 5px;
  border-style: solid;
  font-size: 40pt;
  position: absolute;
  width:  1.70em;
  height: 2.30em;
}

.front {
  background-color: #FFF;
  color: #000;
  position: absolute;
  width: 100%;
  height: 100%;
}

.red { color: #da2a37; }

.index {font-weight: bold; text-align: center;}

.ace { display: none;}


/* RESPONSIVE */

@media screen and (max-width: 1000px) and (min-width: 880px) 
{ 
    .principal {width: 100%;}
    input.button {font-size: 30px; height: 150px;}
    
    .card { height: 2.50em; font-size: 45pt;}
    .cardArea {height: 175px;}
    .presupuesto {font-size: 30px;}
    .red { color: #da2a37; }
    #header h2{font-size: 40px;}
    
    #increase{width: 120px;}
    #decrease{width: 120px;}
    
    #rulesBox {font-size: 12px;}
    input.button {border: 6px solid #000;}
    #controlsArea{padding-top: 80px;}
    
    .playingField {  border-width: 20px;}
    
    .name {font-size: 35px; padding-left: 5px; }
    .score {font-size: 30px; padding-right: 5px; }
    .dollars {font-size: 30px; }
    .lost {font-size: 30px; }
    .result {font-size: 30px; }

    
}