*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

.main {
    float: left;
    width: 100%;
    padding: 0 10px;
}

.periods {
    float: left;
    width: 100%;
    margin: 0 0 6px 0;
}

.periods ul {
    float: left;
    width: 100%;
}

.periods ul li {
    float: left;
    display: inline-block;
    width: 25%;
    padding: 3px;
}

.periods ul li a {
    display: inline-block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #ddd;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
}

.periods a.active {
    border: 1px solid #999;
}

.options {
    float: left;
    width: 100%;
}

.row {
    float: left;
    width: 100%;
}

.formElem {
    float: left;
    padding: 3px;
}

.formElem label {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}

.formElem select,
.formElem input {
    width: 100%;
    height: 30px;
}

.btn {
    float: left;
    border: 1px solid #ae8400;
    margin: 23px 0 0 0;
    background: #ffcc00;
    text-align: center;
    height: 30px;
    width: 60px;
    cursor: pointer;
}

.chart {
    float: left;
    width: 100%;
    height: 410px;
    margin: 0 0 6px 0;
}

.annotation {
    float: left;
    width: 100%;
    padding: 5px;
    text-align: center;
}

.pageTitle {
    display: none;
}

/* plugins specified */
/* jquery ui */

.ui-widget {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
}

.ui-datepicker {
    padding: 0;
}

.ui-datepicker-header {
    border: none;
    font-size: 80%;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0; /* border radius */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; /* prevents bg color from leaking outside the border */
    background-color: #ffcc00; /* layer fill content */
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .53), inset 0 -1px 0 rgba(0, 0, 0, .12); /* drop shadow and inner shadow */
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .53), inset 0 -1px 0 rgba(0, 0, 0, .12); /* drop shadow and inner shadow */
    box-shadow: 0 1px 0 rgba(255, 255, 255, .53), inset 0 -1px 0 rgba(0, 0, 0, .12); /* drop shadow and inner shadow */
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .21) 0%, rgba(255, 255, 255, .21) 100%); /* gradient overlay */
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .21) 0%, rgba(255, 255, 255, .21) 100%); /* gradient overlay */
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .21) 0%, rgba(255, 255, 255, .21) 100%); /* gradient overlay */
    background-image: linear-gradient(bottom, rgba(0, 0, 0, .21) 0%, rgba(255, 255, 255, .21) 100%); /* gradient overlay */
}

.ui-datepicker-title {
    color: #515d65; /* text color */
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .8); /* drop shadow */

}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    border-color: transparent;
}

.ui-state-default {
    background: transparent;
    border: none;
    color: #2b2b2b;
    font-weight: normal;
    text-align: center !important;
}

.ui-datepicker-header .ui-state-hover {
    background: #bdc5c9;
}

.ui-datepicker table {
    margin: 0;
}

.ui-datepicker th {
    color: #9da7af;
    font-size: 12px;
    font-weight: normal;
    -moz-border-radius: 216px 0 0 0 / 0 0 0 0;
    -webkit-border-radius: 216px 0 0 0 / 0 0 0 0;
    border-radius: 216px 0 0 0 / 0 0 0 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: rgba(0, 0, 0, .08);

}

.ui-datepicker td {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 0;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjA2Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjA2Ii8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .06) 0%, rgba(255, 255, 255, .06) 100%);
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .06) 0%, rgba(255, 255, 255, .06) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .06) 0%, rgba(255, 255, 255, .06) 100%);
    background-image: linear-gradient(bottom, rgba(0, 0, 0, .06) 0%, rgba(255, 255, 255, .06) 100%);

}

.ui-datepicker td:last-child {
    border-right: none;
}

.ui-datepicker td span,
.ui-datepicker td a {
    padding: .7em 0;
    color: #6a747a;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.ui-datepicker-calendar .ui-state-hover {
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .12) 0%, rgba(255, 255, 255, .06) 100%);
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .12) 0%, rgba(255, 255, 255, .06) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .12) 0%, rgba(255, 255, 255, .06) 100%);
}

td a.ui-state-active,
td a.ui-state-active.ui-state-hover {
    color: #fff;
    background-color: #8ab8ed;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .26);
    -moz-box-shadow: inset 0 4px 9px rgba(0, 0, 0, .24);
    -webkit-box-shadow: inset 0 4px 9px rgba(0, 0, 0, .24);
    box-shadow: inset 0 4px 9px rgba(0, 0, 0, .24);
}

