#timercontainer_wrapper { background: url('../images/time.jpg') repeat-x top center; margin-top: -30px }
#timercontainer {display: block; width: 200px !important; margin: 0 auto; padding: 15px 0; border-top: 1px solid #CCC; height: 80px;}
#timercontainer2 {display: block; width: 500px !important; margin: 0 auto; padding: 0px; border-top: 1px solid #CCC; height: 120px;}
@media (max-width: 480px)  {#timercontainer2 { width: 240px !important; height: 170px; }}

#buzzerbutton {display: block; float: right; margin: 0px 10px 0 0;}
#buzzercount {float: left; font-size: 42px; font-weight: bold; color: #000; line-height:46px;}

.darepage #toolbox_wrapper {height: 120px; background: #e8e8e8; border-top: 1px solid #b2b2b2; padding: 20px; margin-top: -4px; }

#toolbox_wrapper-full-8 {display: block; height: 60px !important; text-align: center; border-top: 1px solid #b2b2b2; margin: 0; padding: 0; } 
#toolbox_wrapper_full {display: block; min-height: 80px !important; margin: 0; padding: 10px; border-top: 1px solid #b2b2b2;} 
#toolbox_wrapper { height: 30px; line-height: 30px; border-top: 1px solid #b2b2b2; }
#tools-box { display: block; width: 50%; float: left; margin: 0; text-align: center; color: #666; text-transform: capitalize; font-size: 12px;}
#tools-box-full  { display: block; text-align: center; margin: 0 auto; width: 420px; background: #e8e8e8;   }

@media (max-width: 760px)  { #tools-box  { width: 100%; padding-top: 5px }  .darepage #toolbox_wrapper {height: 200px; padding: 10px; } }

.show_timer, .show_sets {color: #666666; font-weight: bold; font-size: 12px; cursor: pointer; }
.setsDiv, .timerDiv { display: block; text-align: left; padding: 0 20px;  }
.htimerDiv {display: block; width: 200px !important; margin: 0 auto!important; }
#quickTimerArea .button {display: inline-block; padding: 0; margin:0; width: 40px !important;}

#breakBtn, #refresh, #pauseBtn, #resumeBtn, #quickbutton1, #quickbutton2, #quickbutton3, #inputArea
{display: block; float: left; cursor: pointer; font-size: 12px; height: 45px; line-height: 45px; margin: 0 0 5px 5px; padding: 0 5px; text-align: center;}

#breakBtn, #refresh, #pauseBtn, #resumeBtn  {background: #CC0000; color: #fff; }
#quickbutton1, #quickbutton2, #quickbutton3 {background: #FFFFFF; color: #000; border: 1px solid #CCC; text-transform: uppercase; width: 90px; }
#inputArea { font-size: 20px !important; font-weight: bold; color:#666; background: #CCC; border: 1px solid #ababab}

#timercounter { display: block; float: left;}
#timercounter h1 {color: #333 !important; font-weight: normal; font-size: 52px; line-height: 50px; margin: 0 10px 0 0 !important}

#timer {float: left; font-size: 30px; font-weight: bold; width: 100px; color: #000; display: block; padding: 5px 10px 0 0}
#timer_wrapper { display: block; width: 200px; margin: 0 auto; }

.setsWrapper .dareset {display: inline-block; width: 50px; height: 40px; line-height: 40px; background: #999999; cursor: pointer; margin: 2px 0; color: #FFFFFF; font-size: 12px; text-align: center;}

#switchTimerBtn, #reset {float: right; display: inline-block; cursor: pointer; background: none; line-height: 50px; padding: 0; margin: 0;}
#switchTimerBtn i, #reset i {color: #999 !important;}

@media (max-width: 960px) { 
.setsDiv, .timerDiv, .htimerDiv { padding: 0 5px }
.setsWrapper .dareset {width: 30px; height: 30px; line-height: 30px;}
#breakBtn, #refresh, #pauseBtn, #resumeBtn, #quickbutton1, #quickbutton2, #quickbutton3  {height: 30px; line-height: 30px; } 
 #quickbutton1, #quickbutton2, #quickbutton3  {width: 60px; } 
#inputArea input[type="number"] {font-size: 16px; width: 30px; height: 30px; line-height: 30px; }
#timercounter h1 {font-size: 32px; line-height: 30px; margin: 0 3px 0 0 !important}
}

@media (max-width: 400px) { #quickbutton1, #quickbutton2, #quickbutton3 {width: 45px; font-size: 9px; margin: 0 0 5px 2px;} #timercounter h1 {font-size: 24px;} }


#ampz_inline_bottom { padding: 20px 0 !important  }

/*******************PROGRAM PAGES*****************/

.index_wrapper {display: block; float: none; width: 90%; height: 260px; margin: 0 auto !important; }
.index_tools   {display: block; float: none; width: 200px; height: 50px; margin: 0 auto !important;  border-bottom: 1px solid #CCC  }

@media (max-width: 1280px) { .index_wrapper {height: 300px }}
@media (max-width: 980px)  { .index_wrapper {height: 400px }}
@media (max-width: 720px)  { .index_wrapper {height: 500px }}
@media (max-width: 600px)  { .index_wrapper {height: 520px; padding: 5px;}}
@media (max-width: 500px)  { .index_wrapper {height: 620px;  width: 70%;}}
@media (max-width: 420px)  { .index_wrapper {height: 650px;  width: 70%;}}
@media (max-width: 400px)  { .index_wrapper {height: 700px;  width: 76%;}}
@media (max-width: 300px)  { .index_wrapper {height: 700px;  width: 92%;}}

.pwrap {display: block; float:left;}
.ppp {display: block; float: left; width:140px; height:40px; margin: 5px 11px 0 0; line-height: 40px; background: #c2c2c2; text-align: center; }
.ppp a {display: block; width:100px; height:40px; color: #FFF; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: bold; float: left;}

@media (max-width: 500px) { .ppp {margin: 5px 5px 0 0; width:110px !important;} .ppp a {width:70px !important;}}

.darepage .aaa { background: #FFFFFF; }
.aaa {display:block; float:right; width:40px; height:40px; cursor: pointer; border: 2px solid #c2c2c2; background-size: contain !important}
.aaa i { color: #ff0000 !important}

#save, #clear {display: block; float: right; height:30px; line-height:30px; width:80px; text-align: center; cursor: pointer; margin: 5px; font-weight: bold; color:#999 }
#save {border: 2px solid #999} #save:hover { border: 2px solid #000 }
#save:hover, #clear:hover { color: #000 !important; }