/*   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:transparent;
  text-align: center;
  margin: 0 auto;
  padding: 1em 0em 1em 0em;
  color: lightgray;  
  width: 100%;       
  height: 8%;    
}

#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:  white; 
  background: rgba(256,256,256,0.4);
  text-align: left;
  margin: 0 auto;
  padding: 0.1em 0em 0.1em 0em;
  color: #CCC;     
  position:absolute; 
  font-size : 120%;
  color:#222;
  font-style: italic;  
}

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

.info {
    border-radius: 50%;
    text-align: center;
    color: #888;
    cursor:default;
    position:absolute;
    cursor: pointer;
    top: 100px;
    left:100px;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    line-height: 60px; 
    display:block;
    font-size: 300%;
}

.circleBase {
    position:absolute;
    text-align: center;
    color: #222;
    cursor:pointer;
    box-shadow: 0.4em 0.4em 0.2em #aaaaaa;
    text-decoration: none;
    border: 0.32em solid lightgray;
    border-radius: 1.2em; 
    background-color: white;
    z-index: 1;
    padding: 0.25em;
    font-size: 86%;
}

.t0, .t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8, .t9 {
    position:absolute;
    cursor:default;
    top: 100px;
    left:100px;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    display:block;
    z-index: 1;
}   
 
.t5 {
    background: -moz-radial-gradient(#FFDFFF, violet); 
    background: radial-gradient(#FFDFFF, violet); 
}
    
.t1, .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); 
}

.t2 {
    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 {
  top: 40px;
  max-width: 94%;
  min-width: 64%;    
  font-size: 100%;
}
.modal-wide .modal-body {
  overflow-y: scroll !important;
}

img {
    float: center;
    border: 0;
    padding: 0.1em;
    margin:  0.1em;
    max-width: 20em;
    max-height: 20em;
}

#image {
    float: center;
    border: 0;
    padding: 0em 0.5em 0.5em 0em;
    margin:  0em 0.5em 0.5em 0.5em;
    max-width: 5em;
    max-height: 4em;
}

#image2 {
    float: center;
    border: 0;
    max-width: 20em;
    max-height: 20em;
}


.feedback {
    visibility: hidden;
    font-size: 100%;
}

#next {
    visibility: hidden;
}

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; 
   text-align: center;
}

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;
}


h3.hof{
	font-size: 0px;
	color: whitesmoke; 
    text-decoration: none;
}
table.hof  {
	width: 90%;
	margin: auto; 
	} 
td.hofright {
	text-align: right;
	color: white;       
	}
table.hof td {
	text-align: left;
	color: #181844;              
	}
	
table.aplusclickHOF
{
	margin: 0 0 0 0;
	margin-top:2px;
	width: 90%;
	vertical-align: top;
	text-align: center;
	color: #181844;
	border-collapse: collapse;
    font-size: 90%;
}

td.hoftitle {
	text-align: center;
	background-color: lightsteelblue;
    color: #444;
    border: solid 1px #ddddde;
    margin:0px;
	padding:0px;
    border-spacing:0px;
    font-size: 100%;
}
        
td.hoflist {
	text-align: center;
	background-color: white; 
    border: solid 1px #ddddde;
    margin:0px;
	padding:0px;
    border-spacing:0px; 
}

.centered {
    width: 99%;
    text-align: center;
    float:none;
    display:inline-block;
    zoom:1;
}

#results {
   /* width: 90%;*/
    text-align: center;
    float:none;
    display:inline-block;
    zoom:1;
    font-size: 90%;
}