.abc-analytics-wrapper { background-color: white; border: 1px solid #E5E5E5; padding: 4px; } .abc-analytics-content { background-color: #ffffff; } /* ####################################################### CHARTIST CSS ######################################################## */ /* Resets */ .graph-container, .graph-container div, .graph-container a, .graph-container span { margin: 0; padding: 0; } /* Gradinet and Rounded Corners */ .graph-container, #tooltip, .graph-info a { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /* Graph Container */ .graph-container { position: relative; width: 95%; height: 300px; padding: 20px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1); box-shadow: 0px 1px 2px rgba(0,0,0,.1); } .graph-container > div { position: absolute; width: inherit; height: inherit; top: 10px; left: 25px; } .graph-info { width: 100%; margin-bottom: 10px; } /* Text Styles */ #tooltip, .graph-info a { height: 20px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 12px; line-height: 20px; color: #646464; } .tickLabel { font-weight: bold; font-size: 12px; color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Tooltip */ #tooltip { position: absolute; display: none; padding: 5px 10px; border: 1px solid #e1e1e1; } /* Links */ .graph-info a { position: relative; display: inline-block; float: left; padding: 7px 10px 5px 30px; margin-right: 10px; text-decoration: none; cursor: default; } /* Color Circle for Links */ .graph-info a:before { position: absolute; display: block; content: ''; width: 8px; height: 8px; top: 13px; left: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* Colors For each Link */ .graph-info .requests { border-bottom: 2px solid #71c73e; } .graph-info .requests:before { background: #71c73e; } /* Lines & Bars Buttons */ #lines, #bars { width: 34px; height: 32px; padding: 0; margin-right: 0; margin-left: 10px; border-bottom: 2px solid #71c73e; float: right; cursor: pointer; } #lines.active, #bars.active { background: #82d344; background: -moz-linear-gradient(top, #82d344 0%, #71c73e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#71c73e)); background: -webkit-linear-gradient(top, #82d344 0%,#71c73e 100%); background: -o-linear-gradient(top, #82d344 0%,#71c73e 100%); background: -ms-linear-gradient(top, #82d344 0%,#71c73e 100%); background: linear-gradient(to bottom, #82d344 0%,#71c73e 100%); } #lines span, #bars span { display: block; width: 34px; height: 32px; background: url('../img/lines.png') no-repeat 9px 12px; } #bars span { background: url('../img/bars.png') no-repeat center 10px; } #lines.active span { background-image: url('../img/lines_active.png'); } #bars.active span { background-image: url('../img/bars_active.png'); } /* Hide the First and Last Y Label */ .yAxis .tickLabel:first-child, .yAxis .tickLabel:last-child { display: none; } /* Clear Floats */ .graph-info:before, .graph-info:after, .graph-container:before, .graph-container:after { content: ''; display: block; clear: both; }