/* 
    Document   : mercMeter
    Created on : Dec 29, 2013, 11:54:27 AM
    Author     : mercredo
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

.clear
{
    float: none;
    clear: both;
}

.mercChartWrapper
{
    /*width: 100%;*/
/*    margin-bottom: 30px;
    margin-top: 30px;*/
    /*display: inline-block;*/
    margin: 60px auto auto;
    width: 1120px;
}

.mercChart
{
/*    background-color:green;*/
    /*margin: auto;*/
    width: 970px;
    height: 600px;
    overflow:hidden;
    
/*    margin-top: 10px;
    margin-left: 10px;*/
}

.mCenter
{
    width: 970px;
    /*margin: auto;*/
    float:left;
    text-align:center;
}
.mLeft
{
    /*width: 150px;*/
    /*height: 652px;*/
    /*background-color: lightgreen;*/
    position: absolute;
    float: left;
    margin-left: -150px;
}
.mRight
{
    width: 150px;
    height: 970px;
    /*background-color: lightcoral;*/
    /*position: absolute;*/
    float: left;
    /*margin-left: 150px;*/
}

.mercChartHeader
{    
    
    /*background-color: #A93944;*/
    background-color: #568149;
    -moz-border-radius: 15px 15px 0 0;
    -webkit-border-radius: 15px 15px 0 0;
    border-radius: 15px 15px 0 0;
}

.mercChartHeader .headerTitle
{
/*    color: #335466;*/
    color: white;
    font-family: sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 33px;
    /*margin: 25px 0 0;*/
    text-shadow: none;
    padding: 20px;
    text-align: center;
}

.chartDescription
{
    /*background-color: #568149;*/
/*    border-left: 1px solid #47683D;
    border-right: 1px solid #47683D;*/
    padding: 2% 14%;
}

.chartDescription p
{
    color: #859789;
    font-family: "Helvetica","arial";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.6;
    
/*    margin-bottom: 10px;
    margin-top: 10px;*/
    /*padding: 10%;*/
}

.progressbarOutern
{
    border: 1px solid grey;
    width: 45%;
    height: 94%;
    margin:auto;
    position: relative;
    top: 3%;
    /*margin-left: 10%;*/
}

.progressbarLeveller
{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;

/* Old Browsers */
background-color: #66271B;
    
/* Safari */
background: -webkit-repeating-linear-gradient(left top -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px) repeat scroll 0 0%, linear-gradient(#66271B 37%, #25702D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(left top -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px) repeat scroll 0 0%, linear-gradient(#66271B 37%, #25702D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #25702D), color-stop(1, #66271B));
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(left top -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px) repeat scroll 0 0%, linear-gradient(#66271B 37%, #25702D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
/* Standard syntax */
background: repeating-linear-gradient(left top -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px) repeat scroll 0 0%, linear-gradient(#66271B 37%, #25702D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);

}

.progressbarWrapper
{
    /*border: 3px solid #555400;*/
    /*height: 688px;*/
    height: 479px;
    width: 75px;
    /*margin-left: 25px;*/
/*    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #E5E5E4;    */
    float: left;
}

.mercmeterStats
{
    min-width: 180px;    
    height: 250px;
    width: 250px;
    margin-left: 25px;    
    margin-bottom: 20px;
    
}

.mercmeterStats .top
{
    height: 40%;
    padding-top:22px;
}

.mercmeterStats .hr
{
    border-color: #575900;
    width: 60%;
    margin: auto;
}

.mercmeterStats .vr
{
    float: left;
    border-color: #575900;
    height: 73%;
}

#mmSum
{
    
}

.mmTheme
{
    border: 3px solid #555400;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #E5E5E4;    
    text-align: center;
}

.mmNumber
{
    color: #B55E5F;
    font-family: "Helvetica","arial";
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1px;
    text-shadow: 2px 2px 2px grey;
    /*line-height: 1.6;*/
}

.mmText
{
    color: #859789;
    font-family: "Helvetica","arial";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.6;
}

.mmHalf
{
    width: 49%;
    height: 100%;
}

#mmMilestones
{
    float:left;
}

#mmSth
{
    float: left;
}

.mercmeterSelection
{
    height: 180px;
    width: 250px;
    margin-left: 25px;
    margin-bottom: 25px;
    text-align:left;
}

.mercmeterSelection .option
{
    height: 20%;
    color: #B55E5F;
    font-family: "Helvetica","arial";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.6;
    margin-left: 15px;
    text-shadow: 1px 1px 1px grey;
}
.mercmeterSelection input
{
    margin-top:8%;
}

.mercmeterSelection .title
{
    height: 26%;
    text-align: center;
    font-size: 32px;
}

.nextMilestone
{
    float: left;
    width: 144px; /*-12+6px*/
    margin-left: 25px;
    background-color: #BBCDC1;
}

.nextMilestone .mmNumber
{
    color: #FFFFFF;
}

.nextMilestone .mmText
{
    color: #55836b;
    line-height: 1.1;
    margin-top:3px;
}

.mRightElement
{
    min-width: 180px;
    width: 256px; /*+6 inner-border*/
    margin-left: 25px;
    /*margin-bottom: 25px;*/
}

#mercMeterChart
{
    width: 970px;
    float: right;
    margin-left: -31px;
}