#mainButton1
{
  position: relative;
  top: -1px;
  left: -1px;
  
  width: 94px;
  height: 94px;
  background: radial-gradient(at top left, #ffdddd 10%,  #cc2A2A 50%);
  
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}

#_outercircle1
{
  width: 100px;
  height: 100px;
  background: #961a1a;
}

#_whitecircle1
{
  position: relative;
  top: 4px;
  left: 1px;

  width: 92px;
  height: 92px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #cc2200; /* Old browsers */
  

}


#mainButton1:active
{
  position: relative;
  top: 4px;
  left: 4px;
  
  width: 94px;
  height: 94px;
  background: radial-gradient(at top left, #eecccc 10%,  #bb2A2A 50%);
  
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}

#_outercircle1:active
{
  width: 100px;
  height: 100px;
  background: #961a1a;
}

#_whitecircle1:active
{
  position: relative;
  top: 9px;
  left: 6px;

  width: 92px;
  height: 92px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #cc2200; /* Old browsers */
  
}
#mainButton2 
{
  position: relative;
top: -1px;
  left: -1px;
  
  width: 94px;
  height: 94px;
 background: radial-gradient(at top left, #ffeedd 10%,  #eebb22 50%); 
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}

#_outercircle2
{
  width: 110px;
  height: 110px;

  background: #eeeeee;
}

#_whitecircle2
{
  
    position: relative;
    top: 4px;
  left: 1px;

  width: 92px;
  height: 92px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #ffff00; /* Old browsers */
  

}

#mainButton2:active
{
  position: relative;
top: 4px;
  left: 4px;
  
  width: 94px;
  height: 94px;
 background: radial-gradient(at top left, #eeddcc 10%,  #ddaa22 50%); 
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}

#_outercircle2:active
{
  width: 110px;
  height: 110px;

  background: #eeeeee;
}

#_whitecircle2:active
{
  
    position: relative;
    top: 9px;
  left: 6px;

  width: 92px;
  height: 92px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #ffff00; /* Old browsers */
  

}


#mainButton3 
{
  position: relative;
top: -1px;
  left: -1px;
  
  width: 94px;
  height: 94px;
  background: radial-gradient(at top left, #ddffdd 10%,  #2a922a 50%);

    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);

}

#_outercircle3
{
  width: 100px;
  height: 100px;
  background: #1a531a;
}

#_whitecircle3
{
    position: relative;
  top: 4px;
  left: 1px;

  width: 92px;
  height: 92px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #00ff00; /* Old browsers */
  


}
#mainButton3:active
{
  position: relative;
top: 4px;
  left: 4px;
  
  width: 94px;
  height: 94px;
  background: radial-gradient(at top left, #cceecc 10%,  #2a812a 50%);

    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);

}

#_outercircle3:active
{
  width: 100px;
  height: 100px;
  background: #1a531a;
}

#_whitecircle3:active
{
    position: relative;
  top: 9px;
  left: 6px;

  width: 92px;
  height: 92px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #00ff00; /* Old browsers */
  


}

#readytext
{
  font-family: Helvetica;
  position: relative;
  top: 25px;
  left: 0px;
  
  font-size: 33px;
  text-align: center;
  font-weight:100;
  color: white;
  text-shadow: 2px 2px black;
}

#taptext
{
  position: relative;
  top: 27px;
  left: 0px;
  
  font-size: 12px;
  text-align: center;
  
  color: #472222;
}

.circle 
{
  border-radius: 50%;
  display: inline-block;
  margin-right: 0px;

}


   
     .onoffswitch {
    position: relative; width: 125px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
    display: none;
    }
    .onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1px solid #FFFFFF; border-radius: 30px;
    }
    .onoffswitch-inner {
    width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    border-radius: 30px;
    box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;
    }
    .onoffswitch-inner:before {
    content: "Test On";
    padding-left: 10px;
    text-align: left;
    text-shadow: 1px 2px black;
    background-color: #2ACE2D; color: #FFFFFF;
    border-radius: 30px 0 0 30px;
    }
    .onoffswitch-inner:after {
    content: "Test Off";
    padding-right: 10px;
    text-shadow: 1px 2px white;
    background-color: #CECECE; color: #333333;
    text-align: right;
    border-radius: 0 30px 30px 0;
    }
    .onoffswitch-switch {
    width: 30px; margin: 0px;
    background: #2222DE;
    border: 1px solid #FFFFFF; border-radius: 30px;
    position: absolute; top: 0; bottom: 0; right: 91px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    box-shadow: 0 1px 1px white inset;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
    }



.info 
 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  width: 150px;
  color: #1a1a1a;
  padding: 5px 30px;
  border-radius: 5px;
  background: #5555ff;
}

.headbar 
 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  width: 100%;
  height: 35px;
  padding:2px;
  color: blue;
  text-align:center;
  background-color: white;
  z-index:1100;
  background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 2%, #606060 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#eeeeee), color-stop(100%,#606060)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 2%,#606060 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 2%,#606060 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 2%,#606060 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 2%,#606060 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
  text-shadow:
    1px 2px 0px rgba(214,214,214,0.2),
    2px 1px 0px rgba(255,255,255,0.3);
}

.button-left
{
 font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  height: 15px;
  color: #1a1a1a;
position: absolute; 
  top: 3px;
  left: 10px;
  margin: 0;
  padding:5px;
  z-index: 1101;
  background: -moz-linear-gradient(
    top,
    #bdbbbd 0%,
    #f0ebef 34%,
    #cfcfcf);
  background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#bdbbbd),
    color-stop(0.34, #f0ebef),
    to(#cfcfcf));
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  -moz-box-shadow:
    3px 6px 6px rgba(000,000,000,0.5),
    inset 0px 0px 1px rgba(168,2,146,1);
  -webkit-box-shadow:
    3px 6px 6px rgba(000,000,000,0.5),
    inset 0px 0px 1px rgba(168,2,146,1);
  box-shadow:
    3px 6px 6px rgba(000,000,000,0.5),
    inset 0px 0px 1px rgba(168,2,146,1);
  text-shadow:
    1px 2px 0px rgba(214,214,214,0.2),
    2px 1px 0px rgba(255,255,255,0.3);
}


.button-right
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  height: 15px;
  color: #1a1a1a;
position: absolute; 
  top: 3px;
  right: 10px;
  margin: 0;
  padding:5px;
  z-index: 1101;
  background: -moz-linear-gradient(
    top,
    #bdbbbd 0%,
    #f0ebef 34%,
    #cfcfcf);
  background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#bdbbbd),
    color-stop(0.34, #f0ebef),
    to(#cfcfcf));
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  -moz-box-shadow:
    3px 6px 6px rgba(000,000,000,0.5),
    inset 0px 0px 1px rgba(168,2,146,1);
  -webkit-box-shadow:
    3px 6px 6px rgba(000,000,000,0.5),
    inset 0px 0px 1px rgba(168,2,146,1);
  box-shadow:
    3px 6px 6px rgba(000,000,000,0.5),
    inset 0px 0px 1px rgba(168,2,146,1);
  text-shadow:
    1px 2px 0px rgba(214,214,214,0.2),
    2px 1px 0px rgba(255,255,255,0.3);
}

.button1

{ border: 1px solid #2222ff;
background-color: #2222ff; 
  color: #ffffff;
  width: 150px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px;
  border-radius: 5px;
}


#activearea1
{background-color:clear;}

#activearea1:active
{background-color:red;}
#activearea2
{background-color:clear;}

#activearea2:active
{background-color:#cccc22;}
#activearea3
{background-color:clear;}

#activearea3:active
{background-color:#22bb22;}

#mainButton1-75
{
  position: relative;
  top: -1px;
  left: -1px;
  
  width: 72px;
  height: 72px;
  background: radial-gradient(at top left, #ffdddd 10%,  #cc2A2A 50%);
  
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}

#_outercircle1-75
{
  width: 75px;
  height: 75px;
  background: #961a1a;
}

#_whitecircle1-75
{
  position: relative;
  top: 4px;
  left: 1px;

  width: 69px;
  height: 69px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #cc2200; /* Old browsers */
  

}

#mainButton2-75 
{
  position: relative;
top: -1px;
  left: -1px;
  
  width: 70px;
  height: 70px;
 background: radial-gradient(at top left, #ffeedd 10%,  #eebb22 50%); 
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}

#_outercircle2-75
{
  width: 77px;
  height: 77px;

  background: #eeeeee;
}

#_whitecircle2-75
{
  
    position: relative;
    top: 4px;
  left: 1px;

  width: 69px;
  height: 69px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #ffff00; /* Old browsers */
  

}




#mainButton3-75 
{
  position: relative;
top: -1px;
  left: -1px;
  
  width: 70px;
  height: 70px;
  background: radial-gradient(at top left, #ddffdd 10%,  #2a922a 50%);

    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);

}

#_outercircle3-75
{
  width: 75px;
  height: 75px;
  background: #1a531a;
}

#_whitecircle3-75
{
    position: relative;
  top: 4px;
  left: 1px;

  width: 69px;
  height: 69px;
  
  /*from http://www.colorzilla.com/gradient-editor/ */
  background: #00ff00; /* Old browsers */
  
}

#readytext-75
{
  font-family: Helvetica;
  position: relative;
  top: 22px;
  left: 0px;
  
  font-size: 22px;
  text-align: center;
  font-weight:100;
  color: white;
  text-shadow: 2px 2px black;
}

#taptext-75
{
  position: relative;
  top: 17px;
  left: 0px;
  
  font-size: 9px;
  text-align: center;
  
  color: #472222;
}