body{
    padding-bottom:100px;
}

.bar{
  transition:all 1300ms ease;
  
  
}

.box{
  background-color:#CCFFFF;
  padding-top: 30px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  border: solid 1px;
  width:100%;
  
}
.graph td{
  border: 1px solid black;  
}


.green{
  background-color:#348236;
  
}

.orange{
  background-color: #FF992E;
  height:400px;
}

.red{
  background-color:#FF2F22;
}


#graph-container {
  position: relative;
  width: 500px;
  background-color: #FFCC00;

}

#graph {
  position: relative;
  height: 40px;
  width: 100%;
  background-color: #996600
;
}

#numbers {
  position: absolute;
  top: 0px;
  left: 0;
}

#numbers ul {
  margin: 0;
  padding: 0
}

#numbers ul li {
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 170px;
  border-left: solid 1px;
  height: 40px;
  text-align: center;
  line-height: 40px /*newid hwn i symyd y numbers i lawr */
}

.progress {
  width:100%;
  position: relative;
}
.progress-bar, bar{
  width:100%;
  
}

#numbers {
  
  position: absolute;
  left: 0;
  margin:0;
  padding:0
}


#numbers li {
  margin:0; padding:0;
  display: inline-block;
  width: 250px; /*Newid pellter leins*/
  left: 0;
  top: 0;
  /*border-left:solid;*/
box-shadow:-3px 0px 0px 0px #000;
    float:left;
}

#header {
            background: #357;
            color: #eFF;
            padding-top: 22px;
            padding-bottom: 0px;
        }
        
        #header .title {
            /* font-family: 'Fredoka One';*/
        }
        
        #header h1 {
            margin-top: 0px;
                font-size:41px;
        }
        
        #header p {
            margin-top: 10px;
                font-size: 14px;
        }
        
        #info-btn {
            padding-top: 0px;
            color: #FFF;
            background: none;
            cursor: pointer;
        }
        
        #info-btn:hover {
            color: #EEE;
        }
        
        .embed-responsive {
            border: solid
        }
        
        .bloc {
            background: #333;
        }
        #footer {
            background-color: #357;
            min-height: 1em;
            font-family: Verdana;
            color: #FFFFFF;
            text-align: center;
            position: fixed;
            bottom: 0px;
           width: 100%;
        }
#total1, #total2, #total3, #total4, #total5,#foodMiles, #overalltotal {
      text-align:center;
    
}

#food-table tr td {}
#food-table p {margin:0}
#overalltotal{
    border-top: solid 2px;
    border-bottom: solid 2px;
}
#penToolOptions{
                position: absolute;
                top:350px;
                
            }
.btn-default{ 
            background-color: #ccc;
            border-color: #ccc;
        }
.headerText{
        font-size: 21px;
        font-weight: 200;
}
.headerText{
        font-size: 21px;
        font-weight: 200;
}
@media only screen 
                    and (min-device-width : 768px) 
                    and (max-device-width : 1024px)
                    and (orientation : portrait){ 
          
        #penToolBtn.btn{
            height:40px;
            width:40px;
            bottom:0;
            float:right;
            left:-10px;
            }


@media print {

    .progress {
        border: solid 1px black;
        
        
    }

    .progress-bar {
        position: relative;
        overflow: hidden;
    }
    .progress-bar:before{
        content:"";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom 0;
        border: 9999px solid ;
        
    }
    .progress-bar.green:before{
        border: 9999px solid green;
    }
    .progress-bar.orange:before{
        border: 9999px solid orange;
    }
    .progress-bar.red:before{
        border: 9999px solid red;
    }
}