body  {
      font-family: arial,helvetica,sans-serif;
            font-size:20px;
    }
    .content{
        margin: auto;
        width:800px;
    }


    h1{
        font-size:40px;
        margin:4px;
        color:orange;
        display: inline-block;
    }
    h2{
        font-size:25px
    }
 
    input {
        width:150px;
        font-size:20px;
    }
   
   .promo{
        
        font-style: italic;
        position: absolute;
        top:320px;
        text-align: center;
        margin:10px;
        width: 100%;
   }
   
   .toy {
        position:relative;
        border-radius:20px;
        width:800px;
        display:none;
        min-height:240px;
   }
   .toy.active{
        display:block;
   }
   .toy.calc{
        height:440px;    
        background-color:#eeeeee;
   }
   .toy.mile{
        background-color:#eeeeff;
          width:600px;
    
   }
   
   .timeholder {
        position:absolute;
        top:10px;
        background:#dddddd;
        padding: 4px 8px;
        border-radius: 20px;
        width:225px;
        min-height: 200px   ;
   }
   
   #timeholdera{
        left:20px;
   }
   #timeholderb{
        left:540px;
   }
   #timeholderc{
        min-height:100px;
        min-height:150px;
        left:10px;
        top:40px;
   }
   
   #midpoint{
        
        left:280px;
   }
    .action{
        color:orange;
        background-repeat: no-repeat;
        padding-left:30px;
        height:24px;
        margin:2px;
        cursor: pointer;
    }
    .action.reset{
        background-image: url("warning-24.png");
        
    }
    .action.swap{
        background-image: url("sinchronize-24.png");
        
    }
    .action.calc-end {
        background-image: url("calendar-3-24.png");
    }
    .action.calc-mile{
        background-image: url("calendar-3-48.png");
        height:48px;
        padding-left:70px;
        font-weight: bold;
    }
    .action.calc-diff{
        background-image: url("math-24.png");
    }
    .action.dateOnly {
        background-image: url("clock-24.png");
    }
    
    .iconClock{
        background-image: url("clock-24-gray.png");
        width:24px;
        height:24px;
        display: inline-block;
        position:relative;
        top:3px;
    }
    
    .iconCal{
        background-image: url("calendar-3-24-gray.png");
        width:24px;
        height:24px;
        display: inline-block;
        position:relative;
        top:3px;
    }
    .dateOrTimewrap .on .iconClock {
        background-image: url("clock-24.png");        
    }
    
    .dateOrTimewrap .on .iconCal  {
        background-image: url("calendar-3-24.png");
        
    }
    .dateOrTimewrap div:hover{
     color:orange;   
    }
    
    
    .timeholder .action{
        position:absolute;
        top:134px;
    }
    #diff {
        width:130px;
    }
    #unitpick {
        display: inline-block;
        position:absolute;
        background-color: #cccccc;
        top:64px;
    }
    #unitpick div {
        padding:1px;
        cursor: pointer;
        padding-left:2px;
        color:#999999;
        height:24px;
    }
    #unitpick div.picked {
        color:black;
    }
    #unitpick div:hover {
        color:orange;
    }
    #unitpick div.picked:hover {
        color:black;
    }
    
    
    .actionwrap{
        position:absolute;
        top:230px;
        background:#dddddd;
        padding: 4px 8px;
        border-radius: 20px;
        width:225px;
        min-height: 60px   ;
        cursor: pointer;
        
    }
    
    .dateOrTimewrap {
        position:absolute;
        background:#dddddd;
        padding: 4px 8px;
        border-radius: 20px;
        width:225px;
        cursor: pointer;
        
        min-height:30px;
        font-size:16px;
        color:#999999;
    }
    .mile .dateOrTimewrap{
        top:290px;
        left:10px;        
    }
    .calc .dateOrTimewrap{
         top:230px;
        left:20px;
       
    }
    
    .dateOrTimewrap .justdates {
        float:left;
    }
    .dateOrTimewrap .dateandtimes {
        float:right;
    }
    .dateOrTimewrap  .on{
        color:black;
    }
    
    
    
    .dateOnly span{
        Xposition:relative;
        Xtop:4px;
    }
    
    .actionwrap.calc-end{
        left:540px;
    }
    .actionwrap.calc-diff{
        left:280px;
    }
    .actionwrap.calc-mile{
        left:10px;
        top:210px;
        font-size: 48px;
    }
    .actionwrap .info{
        text-align: center;
    }
    

   /* .clock {
        position:absolute;
        top:8px;
        right:8px;
        background-image: url("clock-24.png");
        width:24px;
        height:24px;
        background-repeat: no-repeat;
        cursor: pointer;
    }*/
    .timewrapper {
        overflow: hidden;
        height:0px;
    }
    
    .tab {
        display: inline-block;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: 8px 20px;
        color:#cccccc;
        cursor: pointer;
    }
    .tab.calc{
        background-color:#eeeeee;
    }
    .tab.mile{
        background-color:#eeeeff;
    }
    
    .tab.active{
        color:black
    }
    .tab:hover{
        color:orange;
    }
  
  
  
    #mileresults {
        position:relative;
        left:270px;
        top:10px;
        height: 340px;
        width:300px;
        margin-bottom:15px;
        text-align: center;
        
    }
    #mileresults h3, #mileresults p{
        margin:0px;
    }
     #mileresults p{
        padding-top: 30px;
     }
    .milestone-finder{
        display:none;
        background-color:#dddddd;
        border-radius: 20px;
        margin-bottom:10px;
        height:50px;
        width:300px;
        position:absolute;
    }
    .milestone-finder.past {
        background-color:#cccccc;
    }
    .milestone-finder .move{
        width:24px;
        height:24px;
        top:12.5px;
        position:absolute;
        cursor: pointer;
    }
    .milestone-finder .earlier{
        left:4px;
        background-image: url("arrow-91-24.png");
    }
    .milestone-finder .later{
        right:4px;
        background-image: url("arrow-27-24.png");
    }
    .milestone-finder .guts{
        margin:0px 26px;
    }
    .milestone-finder .guts div{
        text-align: center;
    }
    .milestone-finder .amountAndUnits{
        font-weight:bold;
    }
    
    #result10K{
        position: absolute;
        top:10px;
        left:px;
        color:#666666;
        width:250px;
        text-align: center;
        font-size: 20px;
    }
    
footer {
    padding-top:20px;
    font-size:16px;
    text-align: center;
    font-style: italic;
    color:#999999;
    
}
footer.mile{
    width:600px;
}
footer.calc{
    width:800px;
}
footer a{
    color:#666666;
    text-decoration: none;
    
}

@-ms-viewport{
  width: device-width;
}