.btn.btn-small {

    padding: 2px 6px;

}

.btn.btn-mini {

    padding: 0px 4px;

}

.btn:focus {

    outline: none;

}

.btn:hover {

    text-decoration: none;

    color: #515151;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF !important;

}

.btn.badge:hover {

    box-shadow: none !important;

}

.btn.disabled:hover {

    background-position: 0;

    color: #999;

    text-decoration: none;

    box-shadow: none !important;

}

.btn.red {

    color: #fff;

    background-color: #c43c35;

    background-repeat: repeat-x;

    background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));

    background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);

    background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));

    background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);

    background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);

    background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);

    border-color: #c43c35 #c43c35 #882a25;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

}

.btn.blue {

    color: #fff;

    background-color: #339bb9;

    background-repeat: repeat-x;

    background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));

    background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);

    background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));

    background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);

    background-image: -o-linear-gradient(top, #5bc0de, #339bb9);

    background-image: linear-gradient(to bottom, #5bc0de, #339bb9);

    border-color: #339bb9 #339bb9 #22697d;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

}

.btn.green {

    color: #fff;

    background-color: #57a957;

    background-repeat: repeat-x;

    background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));

    background-image: -moz-linear-gradient(top, #62c462, #57a957);

    background-image: -ms-linear-gradient(top, #62c462, #57a957);

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));

    background-image: -webkit-linear-gradient(top, #62c462, #57a957);

    background-image: -o-linear-gradient(top, #62c462, #57a957);

    background-image: linear-gradient(to bottom, #62c462, #57a957);

    border-color: #57a957 #57a957 #3d773d;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

}

.btn.yellow {

    color: #fff;

    background-color: #faa732;

    background-repeat: repeat-x;

    background-image: -khtml-gradient(linear, left top, left bottom, from(#fbb450), to(#f89406));

    background-image: -moz-linear-gradient(top, #fbb450, #f89406);

    background-image: -ms-linear-gradient(top, #fbb450, #f89406);

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbb450), color-stop(100%, #f89406));

    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);

    background-image: -o-linear-gradient(top, #fbb450, #f89406);

    background-image: linear-gradient(to bottom, #fbb450, #f89406);

    border-color: #f89406 #f89406 #ad6704;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

}

label.disabled {

    color: #aaa;

}

.btn.blue.hidden {

    display: none;

}

.btn.active {

    font-weight: bold;

}

ins, div.options a:hover {

    text-decoration: none;

}

img,

#header #header-inner #quick li a:hover span.normal,

#content div.box div.form div.fields div.field div.textarea table td table td a,

#clone_url,

#clone_url_id

{

    border: none;

}

img.icon, .right .merge img {

    vertical-align: bottom;

}

#header ul#logged-user,

#content div.box div.title ul.links,

#content div.box div.message div.dismiss,

#content div.box div.traffic div.legend ul {

    float: right;

    margin: 0;

    padding: 0;

}

#header #header-inner #home,

#header #header-inner #logo,

#content div.box ul.left,

#content div.box ol.left,

div#commit_history,

div#legend_data, div#legend_container, div#legend_choices {

    float: left;

}

#header #header-inner #quick li #quick_login,

#header #header-inner #quick li:hover ul ul,

#header #header-inner #quick li:hover ul ul ul,

#header #header-inner #quick li:hover ul ul ul ul,

#content #left #menu ul.closed,

#content #left #menu li ul.collapsed,

.yui-tt-shadow {

    display: none;

}

#header #header-inner #quick li:hover #quick_login,

#header #header-inner #quick li:hover ul,

#header #header-inner #quick li li:hover ul,

#header #header-inner #quick li li li:hover ul,

#header #header-inner #quick li li li li:hover ul,

#content #left #menu ul.opened,

#content #left #menu li ul.expanded {

    display: block;

}

.repo-switcher .select2-choice {

    padding: 0px 8px 1px !important;

    display: block;

    height: 100%;

}

.repo-switcher .select2-container,

.repo-switcher .select2-choice,

.repo-switcher .select2-choice span {

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    color: #FFFFFF !important;

}

.repo-switcher .select2-arrow {

    display: none !important;

}

.repo-switcher .select2-chosen:after {

    content: ' \25BE';

}

.repo-switcher-dropdown.select2-drop.select2-drop-active {

    xborder-color: black;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

    color: #fff;

    background-color: #576622;

}

.repo-switcher-dropdown.select2-drop.select2-drop-active .select2-results .select2-highlighted {

    background-color: #6388ad;

}

#content div.graph {

    padding: 0 10px 10px;

}

#content div.box ol.lower-roman,

#content div.box ol.upper-roman,

#content div.box ol.lower-alpha,

#content div.box ol.upper-alpha,

#content div.box ol.decimal {

    margin: 10px 24px 10px 44px;

}

#content div.box div.form,

#content div.box div.table,

#content div.box div.traffic {

    position: relative;

    clear: both;

    margin: 0;

    padding: 0 20px 10px;

}

#content div.box div.form div.fields,

#login div.form,

#login div.form div.fields,

#register div.form,

#register div.form div.fields {

    clear: both;

    overflow: hidden;

    margin: 0;

    padding: 0;

}

#content div.box div.form div.fields div.field div.label span,

#login div.form div.fields div.field div.label span,

#register div.form div.fields div.field div.label span {

    height: 1%;

    display: block;

    color: #363636;

    margin: 0;

    padding: 2px 0 0;

}

#content div.box div.form div.fields div.field div.input input.error,

#login div.form div.fields div.field div.input input.error,

#register div.form div.fields div.field div.input input.error {

    background: #FBE3E4;

    border-top: 1px solid #e1b2b3;

    border-left: 1px solid #e1b2b3;

    border-right: 1px solid #FBC2C4;

    border-bottom: 1px solid #FBC2C4;

}

#content div.box div.form div.fields div.field div.input input.success,

#login div.form div.fields div.field div.input input.success,

#register div.form div.fields div.field div.input input.success {

    background: #E6EFC2;

    border-top: 1px solid #cebb98;

    border-left: 1px solid #cebb98;

    border-right: 1px solid #c6d880;

    border-bottom: 1px solid #c6d880;

}

#content div.box-left div.form div.fields div.field div.textarea,

#content div.box-right div.form div.fields div.field div.textarea,

#content div.box div.form div.fields div.field div.select select,

#content div.box table th.selected input,

#content div.box table td.selected input {

    margin: 0;

}

#content div.box-left div.form div.fields div.field div.select,

#content div.box-left div.form div.fields div.field div.checkboxes,

#content div.box-left div.form div.fields div.field div.radios,

#content div.box-right div.form div.fields div.field div.select,

#content div.box-right div.form div.fields div.field div.checkboxes,

#content div.box-right div.form div.fields div.field div.radios {

    margin: 0 0 0 0px !important;

    padding: 0;

}

#content div.box div.form div.fields div.field div.select,

#content div.box div.form div.fields div.field div.checkboxes,

#content div.box div.form div.fields div.field div.radios {

    margin: 0 0 0 200px;

    padding: 0;

}

#content div.box div.form div.fields div.field div.select a:hover,

#content div.box div.form div.fields div.field div.select a.ui-selectmenu:hover,

#content div.box div.action a:hover {

    color: #000;

    text-decoration: none;

}

#content div.box div.form div.fields div.field div.select a.ui-selectmenu-focus,

#content div.box div.action a.ui-selectmenu-focus {

    border: 1px solid #666;

}

#content div.box div.form div.fields div.field div.checkboxes div.checkbox,

#content div.box div.form div.fields div.field div.radios div.radio {

    clear: both;

    overflow: hidden;

    margin: 0;

    padding: 8px 0 2px;

}

#content div.box div.form div.fields div.field div.checkboxes div.checkbox input,

#content div.box div.form div.fields div.field div.radios div.radio input {

    float: left;

    margin: 0;

}

#content div.box div.form div.fields div.field div.checkboxes div.checkbox label,

#content div.box div.form div.fields div.field div.radios div.radio label {

    height: 1%;

    display: block;

    float: left;

    margin: 2px 0 0 4px;

}

div.form div.fields div.field div.button input,

#content div.box div.form div.fields div.buttons input

div.form div.fields div.buttons input,

#content div.box div.action div.button input {

    font-size: 11px;

    font-weight: 700;

    margin: 0;

}

div.form div.fields div.field div.highlight,

#content div.box div.form div.fields div.buttons div.highlight {

    display: inline;

}

#content div.box div.form div.fields div.buttons,

div.form div.fields div.buttons {

    margin: 10px 0 0 200px;

    padding: 0;

}

#content div.box-left div.form div.fields div.buttons,

#content div.box-right div.form div.fields div.buttons,

div.box-left div.form div.fields div.buttons,

div.box-right div.form div.fields div.buttons {

    margin: 10px 0 0;

}

#content div.box table td.user,

#content div.box table td.address {

    width: 10%;

    text-align: center;

}

#content div.box div.action div.button,

#login div.form div.fields div.field div.input div.link,

#register div.form div.fields div.field div.input div.link {

    text-align: right;

    margin: 6px 0 0;

    padding: 0;

}

#content div.box div.pagination div.results,

#content div.box div.pagination-wh div.results {

    text-align: left;

    float: left;

    margin: 0;

    padding: 0;

}

#content div.box div.pagination div.results span,

#content div.box div.pagination-wh div.results span {

    height: 1%;

    display: block;

    float: left;

    background: #ebebeb url("../images/pager.png") repeat-x;

    border-top: 1px solid #dedede;

    border-left: 1px solid #cfcfcf;

    border-right: 1px solid #c4c4c4;

    border-bottom: 1px solid #c4c4c4;

    color: #4A4A4A;

    font-weight: 700;

    margin: 0;

    padding: 6px 8px;

}

#content div.box div.pagination ul.pager li.disabled,

#content div.box div.pagination-wh a.disabled {

    color: #B4B4B4;

    padding: 6px;

}

#login, #register {

    width: 520px;

<%inherit file="/base/base.html"/>

<%block name="title">

    ${_('%s Statistics') % c.repo_name}

</%block>

<%def name="breadcrumbs_links()">

    ${_('Statistics')}

</%def>

<%block name="header_menu">

    ${self.menu('repositories')}

</%block>

<%block name="head_extra">

  <link href="${h.url('atom_feed_home',repo_name=c.db_repo.repo_name,api_key=c.authuser.api_key)}" rel="alternate" title="${_('%s ATOM feed') % c.repo_name}" type="application/atom+xml" />

  <link href="${h.url('rss_feed_home',repo_name=c.db_repo.repo_name,api_key=c.authuser.api_key)}" rel="alternate" title="${_('%s RSS feed') % c.repo_name}" type="application/rss+xml" />

</%block>

<%def name="main()">

${self.repo_context_bar('summary')}

    <%

    summary = lambda n:{False:'summary-short'}.get(n)

    %>

    <div class="box">

    <!-- box / title -->

    <div class="title">

        ${self.breadcrumbs()}

    </div>

    <div class="graph">

         <div style="padding:0 10px 10px 17px;">

         %if c.no_data:

           ${c.no_data_msg}

           %if h.HasPermissionAll('hg.admin')('enable stats on from summary'):

                ${h.link_to(_('Enable'),h.url('edit_repo',repo_name=c.repo_name),class_="btn btn-mini")}

           %endif

        %else:

            ${_('Stats gathered: ')} ${c.stats_percentage}%

        %endif

        </div>

        <div id="commit_history" style="width:450px;height:300px;float:left"></div>

            <div id="legend_container"></div>

            <div id="legend_choices">

                <table id="legend_choices_tables" class="noborder" style="font-size:smaller;color:#545454"></table>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

var data = ${c.trending_languages|n};

var total = 0;

var no_data = true;

var tbl = document.createElement('table');

tbl.setAttribute('class','trending_language_tbl');

var cnt = 0;

for (var i=0;i<data.length;i++){

    total+= data[i][1].count;

}

for (var i=0;i<data.length;i++){

    cnt += 1;

    no_data = false;

    var hide = cnt>2;

    var tr = document.createElement('tr');

    if (hide){

        tr.setAttribute('style','display:none');

        tr.setAttribute('class','stats_hidden');

    }

    var k = data[i][0];

    var obj = data[i][1];

    var percentage = Math.round((obj.count/total*100),2);

    var td1 = document.createElement('td');

    td1.width = 150;

    var trending_language_label = document.createElement('div');

    trending_language_label.innerHTML = obj.desc+" ("+k+")";

    td1.appendChild(trending_language_label);

    var td2 = document.createElement('td');

    td2.setAttribute('style','padding-right:14px !important');

    var trending_language = document.createElement('div');

    var nr_files = obj.count+" ${_('files')}";

    trending_language.title = k+" "+nr_files;

    if (percentage>22){

        trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"% "+nr_files+ "</b>";

    }

    else{

        trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"%</b>";

    }

    trending_language.setAttribute("class", 'trending_language top-right-rounded-corner bottom-right-rounded-corner');

    trending_language.style.width=percentage+"%";

    td2.appendChild(trending_language);

    tr.appendChild(td1);

    tr.appendChild(td2);

    tbl.appendChild(tr);

    if(cnt == 3){

        var show_more = document.createElement('tr');

        var td = document.createElement('td');

        lnk = document.createElement('a');

        lnk.href='#';

        lnk.innerHTML = "${_('Show more')}";

        lnk.id='code_stats_show_more';

        td.appendChild(lnk);

        show_more.appendChild(td);

        show_more.appendChild(document.createElement('td'));

        tbl.appendChild(show_more);

    }

}

</script>

<script type="text/javascript">

/**

 * Plots summary graph

 *

 * @class SummaryPlot

 * @param {from} initial from for detailed graph

 * @param {to} initial to for detailed graph

 * @param {dataset}

 * @param {overview_dataset}

 */

function SummaryPlot(from,to,dataset,overview_dataset) {

    var initial_ranges = {

        "xaxis":{

            "from":from,

            "to":to

        }

    };

    var dataset = dataset;

    var overview_dataset = [overview_dataset];

    var choiceContainer = YUD.get("legend_choices");

    var choiceContainerTable = YUD.get("legend_choices_tables");

    var plotContainer = YUD.get('commit_history');

    var overviewContainer = YUD.get('overview');

    var plot_options = {

        bars: {show:true, align: 'center', lineWidth: 4},

        legend: {show:true, container: "legend_container"},

        points: {show:true, radius: 0, fill: false},

        yaxis: {tickDecimals: 0},

        xaxis: {

            mode: "time",

            timeformat: "%d/%m",

            min: from,

            max: to

        },

        grid: {

            hoverable: true,

            clickable: true,

            autoHighlight: true,

            color: "#999"

        },

        //selection: {mode: "x"}

    };

    var overview_options = {

        legend:{show:false},

        bars: {show:true, barWidth: 2},

        shadowSize: 0,

        xaxis: {mode: "time", timeformat: "%d/%m/%y"},

        yaxis: {ticks: 3, min: 0, tickDecimals:0},

        grid: {color: "#999"},

        selection: {mode: "x"}

    };

    /**

    *get dummy data needed in few places

    */

    function getDummyData(label){

        return {"label":label,

         "data":[{"time":0,

             "commits":0,

                 "added":0,

                 "changed":0,

                 "removed":0

            }],

            "schema":["commits"],

            "color":'#ffffff'

        }

    }

    /**

     * generate checkboxes accordindly to data

     * @param keys

     * @returns

     */

    function generateCheckboxes(data) {

        //append checkboxes

        var i = 0;

        choiceContainerTable.innerHTML = '';

        for(var pos in data) {

            data[pos].color = i;

            i++;

            if(data[pos].label != ''){

                choiceContainerTable.innerHTML +=

                    '<tr><td><input type="checkbox" id="id_user_{0}" name="{0}" checked="checked" /> \

                     <label for="id_user_{0}">{0}</label></td></tr>'.format(data[pos].label);

            }

        }

    }

    /**

     * ToolTip show

     */

    function showTooltip(x, y, contents) {

        var div=document.getElementById('tooltip');

        if(!div) {

            div = document.createElement('div');

            div.id="tooltip";

            div.style.position="absolute";

            div.style.border='1px solid #fdd';

            div.style.padding='2px';

            div.style.backgroundColor='#fee';

            document.body.appendChild(div);

        }

        YUD.setStyle(div, 'opacity', 0);

        div.innerHTML = contents;

        div.style.top=(y + 5) + "px";

        div.style.left=(x + 5) + "px";

        var anim = new YAHOO.util.Anim(div, {opacity: {to: 0.8}}, 0.2);

        anim.animate();

    }

    /**

     * This function will detect if selected period has some changesets

       for this user if it does this data is then pushed for displaying

       Additionally it will only display users that are selected by the checkbox

    */

    function getDataAccordingToRanges(ranges) {