/*   replaced AAA by A7CDF0   */

*{
  margin: 0;
  padding: 0;
}

html { height: 100%; width:100%;}

body{
  -moz-user-select: none;
  background-color: #888;
  text-align:center;
  font-family: Tahoma,"Lucida Grande","Helvetica Neue", Arial, Helvetica, sans-serif;
 
  background-image:   -moz-radial-gradient(center, ellipse cover, #000 0%, #555 100%);
  background-image:   -webkit-radial-gradient(center, ellipse cover, #000 0%, #555 100%); 
  background-image:   -o-radial-gradient(center, ellipse cover, #000 0%, #555 100%);
  background-image:   -ms-radial-gradient(center, ellipse cover, #000 0%, #555 100%);
  background-image:   radial-gradient(center, ellipse cover, #000 0%, #555 100%);
  
}
    
  td, th {
    text-align: center;
  }
  
  td.now {
    background-color: rgb(223, 240, 216);
    color: rgb(60, 118, 61);
  }
  
#wrapper{
  text-align: center;
  margin: 0 auto;
  color: lightgray;   
  width: 100%;       
  height: 100%;    
  top: 0;
  left: 0; 
}
#menu{
  /*background: rgb(102,102,104); */
  background:transparent;
  text-align: center;
  margin: 0 auto;
  padding: 1em 0em 1em 0em;
  color: lightgray;  
  width: 100%;       
  height: 8%;    
}
/*
#page{
  background: #222; 
  color: gray;
  text-align: center;
  margin: 0 auto;
  color: #888;   
  display: table;
  width:600px;
  min-width: 300px;
  height: 600px;
  
  border-color: #222;
  border-radius: 10%;
  -webkit-box-shadow: inset 0 3em 1em -2em #EEE;
  box-shadow: inset 0 3em 1em -2em #EEE;
  border-width:0.5em;	
  border-style:ridge;
  padding: 1em; 
  
}
*/
#page{
  background: transparent; 
  border:0;
  
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  margin: 0;
  padding: 0;
  border: 0;
  position:absolute;
  background-image: url("../image/aplusclicksky1.png");
  
}


.header{
  background:  transparent; 
  text-align: left;
  margin: 0 auto;
  padding: 0.5em 0em 0.5em 0em;
  color: #CCC;     
  position:absolute; 
  font-size:140%;
  color:#DADADA;
}


.footer{
  background:  transparent; 
  text-align: center;
  margin: 0 auto;
  padding: 0.5em 0em 0.5em 0em;
  color: #CCC;     
  position:absolute; 
  font-size:80%;
  font-style: italic;
  color: gray; /*magenta;*/
  
}

.info {
    border-radius: 50%;
    text-align: center;
    font-size: 120%;
    font-style: italic;
    color: #EEE;
    text-shadow: 0.025em 0.025em lightgray;
    cursor: pointer;
    position:absolute;
    top: 100px;
    left:100px;
    width: 60px;
    height: 60px;
    border: 0.1em solid #444;
    vertical-align: middle;
    line-height: 60px; 
    display:block;
    /* background: -webkit-radial-gradient(#444, #222); */ /* For Safari 5.1 to 6.0 */
    /* background: -o-radial-gradient(#444, #222); */ /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(#444, #111); /* For Fx 3.6 to 15 */
    background: radial-gradient(#444, #111); /* Standard syntax (must be last) */
    font-family: "Lucida Calligraphy","Helvetica Neue", Tahoma, Arial, Helvetica, sans-serif;
}



.circleBase {
    border-radius: 50%;
   /* behavior: url(PIE.htc);  remove if you don't care about IE8 */
    text-align: center;
    font-size: 180%;
    color: dimgray ;
    text-shadow: 0.025em 0.025em lightgray;
    cursor: move;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
}

.circleBase:hover{
    cursor: move;
}


.t0, .t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8, .t9 {
    position:absolute;
    top: 100px;
    left:100px;
    width: 60px;
    height: 60px;
    border: 0.1em solid #444;
    vertical-align: middle;
    line-height: 60px; 
    display:block;
    z-index: 1;
}   

    
.t1 {
    background: -moz-radial-gradient(#FFDFFF, violet); 
    background: radial-gradient(#FFDFFF, violet); 
}
    
.t2, .t7 {
    background: -moz-radial-gradient(#C0FCC0, LIMEGREEN); 
    background: radial-gradient(#C0FCC0, LIMEGREEN); 
}

.t3, .t8 {
    background: -moz-radial-gradient(#F0F8FA, #6090F0); 
    background: radial-gradient(#F0F8FA, #6090F0); 
}
    
.t4, .t9 {
    background: -moz-radial-gradient(LAVENDERBLUSH, SALMON); 
    background: radial-gradient(LAVENDERBLUSH, SALMON); 
}

.t5 {
    background: -moz-radial-gradient(ivory, #DDDD44); 
    background: radial-gradient(ivory, #DDDD44); 
}

.t6 {
    background: -moz-radial-gradient(#FFDDE8, #FF1111); 
    background: radial-gradient(#FFDDE8, #FF1111); 
}
.left {
    text-align :left;
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

.modal.modal-wide .modal-dialog {
  width: 80%;
  font-size: 100%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

#image {
    float: right;
    border: 0;
    padding: 0em 0.5em 0.5em 0em;
    margin:  0em 0.5em 0.5em 0.5em;
    max-width: 50%;
}
.feedback {
    visibility: hidden;
    font-size: 100%;
}
button.full-width {
    background-color: white;
    border-color: #BBB;
    border-radius: 0.1em;
    border-width:0.08em;	
    font-size: 100%;
    margin: 0.5em 1em 0.5em 0em;
    padding: 0.5em 0em 0.5em 0em;
    width: 94%;
    float: right;
}
p#modalQ {
   margin: 0.2em 0em 0.2em 1em; 
}

button.full-width:hover {
    background-color: #DFDFE4;   
}


button#restart {
     font-size: 120%; 
}
    
#modalLabel { 
    font-size: 100%;
}
div#config{
   padding: 0em 1em 0em 1em;
   margin: 0em 1em 0em 1em;
   
   display: block;  
}
div#stars {
    top: 0px;
    left: 0px;
    display:block;
    width: 100%;
    text-align: center; 
    z-index: 99;
    margin: auto;
    position: absolute;
            right: 0;
}