/* css bar graph */
    .bargraph {     
          height: 229px; 
          position: relative; 
          background:url(../images/papergrid.jpg);
          border-left: 1px solid #d4d4d4;
          margin: 15px 0 30px 40px;
    }

    .bargraph ul.bars {
        margin: 0; 
        padding: 0; 
        /* getting rid of bullets */
        list-style-type: none;
    }


    div.bargraph div.colorfilter {
        position: absolute;
        top: 0; left: 0;
        height: 201px;
        background-color: black;
        opacity:0.2;  filter:alpha(opacity=20);
        z-index: 97;
    
    }

    div.bargraph div.colorfilter2 {
        position: absolute;
        top: 0; left: 0;
        height: 201px;
        background-color: black;
        opacity:0.4;  filter:alpha(opacity=40);
        z-index: 97;
    
    }

    .bargraph ul.bars li {  
        position: absolute; 
        width: 30px; 
        height: 200px; 
        /*move it up from bottom label*/
        bottom: 29px; 
        padding: 0; 
        margin: 0; 
        background: url(../images/bars200.jpg) no-repeat;
        text-align: center; 
        font-weight: bold; 
        color: white; 
        line-height: 2.5em;
        font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
        font-size: 13px;
        z-index: 99;
    }

   
    .bargraph ul.bars li span {
        position: relative;
        top: -25px;
        color: #7c7c7c;
     }
    .bargraph ul.bars li img {        
           margin: 0; padding: 0;
           position: relative;
           top: -71px;
           left: 0;
    }

    .bargraph ul.bars li span.darkpen {
        color: #515151;
        position: static;
    }
    .bargraph ul.bars li span.whitepen {
        color: red;
    }

    .bargraph ul.bars li.bar1 { left: 21px;  }
    .bargraph ul.bars li.bar2 { left: 94px;  }
    .bargraph ul.bars li.bar3 { left: 167px; }
    .bargraph ul.bars li.bar4 { left: 240px; }
    .bargraph ul.bars li.bar5 { left: 313px; }
    .bargraph ul.bars li.bar6 { left: 386px; }
    .bargraph ul.bars li.bar7 { left: 459px; }
    .bargraph ul.bars li.bar8 { left: 532px; }
    .bargraph ul.bars li.bar9 { left: 605px; }
	.bargraph ul.bars li.bar10 { left: 678px; }
	.bargraph ul.bars li.bar11 { left: 751px; }
	.bargraph ul.bars li.bar12 { left: 824px; }
	.bargraph ul.bars li.bar13 { left: 897px; }
	.bargraph ul.bars li.bar14 { left: 970px; }

    /* bottom means 100% in background-position */
    .bargraph ul.bars li.bluebar  { background-position: 0px bottom; }
    .bargraph ul.bars li.redbar   { background-position: -30px bottom; }
    .bargraph ul.bars li.greenbar { background-position: -60px bottom; }
    .bargraph ul.bars li.orangebar  {  background-position: -90px bottom; }
    .bargraph ul.bars li.grapebar   {  background-position: -120px bottom; }
    .bargraph ul.bars li.purplebar  {  background-position: -150px bottom; }
    .bargraph ul.bars li.crimsonbar {  background-position: -180px bottom; }
    .bargraph ul.bars li.navybar    {  background-position: -210px bottom; }
    .bargraph ul.bars li.goldbar    {  background-position: -240px bottom; }
    .bargraph ul.bars li.tealbar    {  background-position: -270px bottom; }

    .label { list-style-type: none; 
             position: absolute; bottom: 3px; 
             margin: 0; padding: 0; }
    .label li { 
        color: white; 
        text-transform: uppercase; 
        letter-spacing: 0.1em;
        font-size: 11px;
        width: 73px;
       
        float: left;
        text-align: center;
       /*safeguard against a label that is too long - if they type
          that in from the HTML
        */
        overflow: hidden;

        font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
        line-height: 1.6em;
    }


    ul.y-axis { list-style-type: none; position: absolute; 
                /*
                  positioning the ul box - the box that goes 
                  around the list, 100, 75,... */
                  left: -45px; 
                  width: 40px;
                  text-align: right;
                  bottom: 0;
                  margin: 0; padding: 0; 
				 
    }

    ul.y-axis li:first-child {
         height: 40px;
         line-height: 40px;
    }

    ul.y-axis li { 
        color: #aba8a8;  
        font-size: 12px;
        height: 51px;
        line-height: 51px;
        text-align: right;
    }

    ul.y-axis li.units {
        position: absolute;
        bottom: 110px;
        right: 20px;
        line-height: 1.2em;
        height: auto;
    }
  /*labeling of the graph*/
  .bargraph  p { 
                position: absolute; 
                left: 0; 
                top: 236px; 
                
                padding: 0; 
                margin:0; 
                text-align: left; 
     
                width: 100%;
                font-family: Verdana, sans-serif;
                font-size: 10px; color: black;
                line-height: 1.3em;
                
              }
   .bargraph p.centered { text-align: center; }

   /* end of css bar graph */
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
.bl-box{
	background:#fff;
	margin:0;
	padding:0;
	border:1px solid #428bca;
}

.bl-box .content{
	padding:0 10px;
}

.bl-box .bl-header{
	background:#428bca;
}

.bl-box h3{
	font-size:18px;
	color:#fff;
	padding:10px;
	margin:0;
}



.gr-box{
	background:#fff;
	margin:0;
	padding:0;
	border:1px solid #59b234;
}

.gr-box .content{
	padding:0 10px;
}

.gr-box .gr-header{
	background:#59b234;
}

.gr-box h3{
	font-size:18px;
	color:#fff;
	padding:10px;
	margin:0;
}




.red-box{
	background:#fff;
	margin:0;
	padding:0;
	border:1px solid #df4141;
}

.red-box .content{
	padding:0 10px;
}

.red-box .red-header{
	background:#df4141;
}

.red-box h3{
	font-size:18px;
	color:#fff;
	padding:10px;
	margin:0;
}



.no-border2{
	border:1px solid #ddd;
	margin-top:15px;
}

.no-border2 td{
	border:0px solid #fff !important;
}

.no-border2 tr{
	border-bottom:1px solid #ddd;
	padding:5px 0;
}

.inp{
	padding:5px;
	border:1px solid #ccc;
	width:90%;
}

.inp2{
	padding:5px;
	border:1px solid #ccc;
	width:90%;
	background:#eee;
}

.no-border2 tr:nth-child(even) {
   background-color: #f9f9f9;
}

.no-border3 tr:nth-child(even) {
   background-color: #f9f9f9;
}

.mar-top{
	margin-top:15px;
}

.l-grey{
	color:#666;
}



.demo-3 {
    position:relative;
    width:202px;
    height:100px;
    overflow:hidden;
    float:left;
    margin-left:15px;
}

.demo-3 i{
	float:right;
	padding-right:15px;
}

.demo-3 .i-l{
	float:right;
	padding-right:15px;
	margin-top:-15px;
}

.demo-3 li{
	list-style:none;
}

.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure .im-hover {
    display:block;
    position:relative;
    z-index:10;
	background:#2d3e50;
	height:125px;
	color:#fff;
	padding-top:40px;
	font-size:18px;
	padding-left:35px;
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:12px 75px;
    background-color:#2772A4;
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

.demo-3 figure figcaption h2{
	text-align:center;
	margin-top:15px;
}

.demo-3 figure .im-hover {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover .im-hover,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

.ex-mar-top{
	margin-top:250px;
}

.slc{
	padding:5px;
	border:1px solid #ccc;
	width:100%;
}

.bl-box2{
	background:#fff;
}

.hmr{
	margin-left:15px;
	margin-top:10px;
	margin-bottom:20px;
}

.smtxt{
	font-size:15px;
	margin-top:5px;
}

.t-a a{
	float:left;
}

.demo-3 figure .figcaption2{
	padding-left:50px;
	padding-right:50px;
	padding-top:20px;
}

.m-t{
	padding-top:32px !important;
}

.clear{
	clear:both;
}