html,body{
padding: 0px;
margin: 0px;
height: 100%;
width: 320px;
background-color: #ccc;
background-image:url(groovepaper.png);
background-repeat:repeat;
}

#navbar{
padding: 0px;
height: 50px;
margin: 0px;
width: 320px;
}

#content{
 padding: 0px;
 height: 413px;
margin: 0px;
width: 320px;

}
.all{
      background-image:url('recyclebutton.png');
        -webkit-gradient(
          linear,
          left top,
          left bottom,
                from(     rgba( 068,213,254,0 )),
          color-stop(.43, rgba( 068,213,254,0 )),
                  to(     rgba( 068,213,254,1 ))),
        -webkit-gradient(
          radial, 
          60 162, 150, 
          60 162, 149, 
                from(     rgba( 049,123,220,0 )), 
                  to(     rgba( 049,123,220,1 ))),
        -webkit-gradient(
          radial, 
          20 -43, 60, 
          20 -43, 40, 
          from(           rgba( 125,170,231,1 )), 
          to(             rgba( 230,238,250,1 )));
    }
    
#tabbar{
width: 320px;

position: absolute;
height: 50px;
}

.butt{
width: 102px;
padding: 0px;
height: 40px;
margin: 0px;
display: inline-block;
}
.square{
width:49%;
height: 215px;
margin: auto;
padding: auto;

display: inline-block;
}


.numRect{
height: 40px;
padding-left: 25px;
border: 0px solid blue;
width: 295px;
display: inline-block;

}
#smallerMessageBox{
width: 75%;
text-align: center;
margin: auto;
}
#messageBox{
width: 50%;
display: inline-block;
height: 180px;
float:left;
text-align: center;
color: #333;
margin: auto;
border: 0px solid black;
font-family: Helvetica-Bold;
font-size: 120%;
padding-top: 55px;
}
#pieChartBox{
width: 155px;
display: inline-block;
height: 180px;
padding-left: 3px;
}
#smallerPieChartBox{
width: 120px;
padding-left: 5px;

display: inline-block;
height: 180px;
}

.column{
width: 49%;
height: 300px;
font-family: Helvetica;

}

#noColumn{
border: 0px solid black;
display: inline-block;
float:right;
background-color:rgba(150,0,0,0.6)
}

#yesColumn{
border: 0px solid black;
display: inline-block;
background-color: #68ce90;
}
.pageTitle{
width: 100%;
font-size: 140%;
color: #333;
padding-top: 10px;
padding-bottom: 10px;
font-family: Helvetica;

}
.pageTitleBigger{
width: 100%;
font-size: 200%;
color: #333;
padding-top: 10px;
padding-bottom: 10px;
font-family: Helvetica;

}
.counter{

font-size: 200%;
color: #333;
font-family: Helvetica;
display: inline-block;
}

.heading{
font-size: 140%;
color: #333;
}
.subContainer{
text-align: center;
width: 85%;
color: white;
margin: auto;
border: 0px solid black;
}

.countingSubBox{

color: #777;
margin: auto;
font-size: 120%;
border: 0px solid black;
font-family: Helvetica-Bold;
}

#buttonContainer{
width: 100%;
height: 110px;

}
.button{
border-radius: 8px; 
font-family: Helvetica;
-moz-border-radius: 5px; 
text-shadow: black 0.1em 0.1em 0.1em;
-webkit-border-radius: 5px; 

border: 1px solid #333;
padding-top: 8px;
color:white;
text-align: center;
margin-left: auto;
margin-right: auto;

margin-top: 20px;
width: 240px;
height: 25px;
background: #b4ddb4; /* Old browsers */
background-image: linear-gradient(bottom, rgb(84,176,121) 29%, rgb(104,206,145) 62%, rgb(130,237,173) 81%);
background-image: -o-linear-gradient(bottom, rgb(84,176,121) 29%, rgb(104,206,145) 62%, rgb(130,237,173) 81%);
background-image: -moz-linear-gradient(bottom, rgb(84,176,121) 29%, rgb(104,206,145) 62%, rgb(130,237,173) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(84,176,121) 29%, rgb(104,206,145) 62%, rgb(130,237,173) 81%);
background-image: -ms-linear-gradient(bottom, rgb(84,176,121) 29%, rgb(104,206,145) 62%, rgb(130,237,173) 81%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.29, rgb(84,176,121)),
	color-stop(0.62, rgb(104,206,145)),
	color-stop(0.81, rgb(130,237,173))
);

}
.centered{

padding-left: 15px;
padding-top: 15px;
}