here is the css for the tablesorter
Thanks for looking at this
body {
margin-top: 50px;
}
#wrapper {
padding-left: 0;
}
#page-wrapper {
width: 100%;
padding: 5px 15px;
}
/* Nav Messages */
.messages-dropdown .dropdown-menu .message-preview .avatar,
.messages-dropdown .dropdown-menu .message-preview .name,
.messages-dropdown .dropdown-menu .message-preview .message,
.messages-dropdown .dropdown-menu .message-preview .time {
display: block;
}
.messages-dropdown .dropdown-menu .message-preview .avatar {
float: left;
margin-right: 15px;
}
.messages-dropdown .dropdown-menu .message-preview .name {
font-weight: bold;
}
.messages-dropdown .dropdown-menu .message-preview .message {
font-size: 12px;
}
.messages-dropdown .dropdown-menu .message-preview .time {
font-size: 12px;
}
/* Nav Announcements */
.announcement-heading {
font-size: 50px;
margin: 0;
}
.announcement-text {
margin: 0;
}
/* Table Headers */
table.tablesorter thead {
cursor: pointer;
}
table.tablesorter thead tr th:hover {
background-color: #f5f5f5;
}
/* Flot Chart Containers */
.flot-chart {
display: block;
height: 400px;
}
.flot-chart-content {
width: 100%;
height: 100%;
}
/* Edit Below to Customize Widths > 768px */
@media (min-width:768px) {
/* Wrappers */
#wrapper {
padding-left: 200px;
}
#page-wrapper {
padding: 15px 25px;
}
/* Side Nav */
.side-nav {
margin-left: -225px;
left: 225px;
width: 200px;
position: fixed;
top: 50px;
height: 100%;
border-radius: 0;
border: none;
background-color: #222222;
overflow-y: auto;
}
/* Bootstrap Default Overrides - Customized Dropdowns for the Side Nav */
.side-nav>li.dropdown>ul.dropdown-menu {
position: relative;
min-width: 225px;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
-webkit-box-shadow: none;
}
.side-nav>li.dropdown>ul.dropdown-menu>li>a {
color: #999999;
padding: 15px 15px 15px 25px;
}
.side-nav>li.dropdown>ul.dropdown-menu>li>a:hover,
.side-nav>li.dropdown>ul.dropdown-menu>li>a.active,
.side-nav>li.dropdown>ul.dropdown-menu>li>a:focus {
color: #fff;
background-color: #080808;
}
.side-nav>li>a {
width: 225px;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
background-color: #080808;
}
/* Nav Messages */
.messages-dropdown .dropdown-menu {
min-width: 300px;
}
.messages-dropdown .dropdown-menu li a {
white-space: normal;
}
}
.aligncenter { text-align: center; }
.alignright { float: right !important; }
.highlight { color: #cc3d3d; }
.completed { background: #f0f0f0; }
.clear { clear: both; }
.marginRight { margin-right: 4px; }
.marginTop { margin-top: 10px; }
.headerright { float: right; padding: 7px 10px 0 0; }
.headerright .dropdown { display: inline-block; margin-left: 7px; }
.divider30 { height: 30px; clear: both; }
.divider20 { height: 20px; clear: both; }
.divider15 { height: 15px; clear: both; }
.divider10 { height: 10px; clear: both; }
.one_half{ width:48.5%; }
.one_third{ width:31.16%; }
.two_third{ width:65.83%; }
.one_fourth{ width:22.5%; }
.three_fourth{ width:74.5%; }
.one_fifth{ width:17.3%; }
.two_fifth{ width:38.1%; }
.three_fifth{ width:58.9%; }
.four_fifth{ width:67.7%; }
.one_sixth{ width:13.83%; }
.five_sixth{ width:83.17%; }
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,
.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:3%; float:left; }
.last{ margin-right:0 !important; clear:right; }
.dashicons { list-style: none; margin-bottom: 15px; }
.dashicons li { margin-bottom: 15px; }
.dashicons li a { display: block; border: 1px solid #ccc; background: #fcfcfc; text-align: center; }
.dashicons li a:hover { text-decoration: none; background-color: #fff; }
.dashicons li a span { display: block; padding: 2px; text-transform: uppercase; margin-bottom: 5px; }
.dashicons li a img { margin: 15px auto 5px auto; }
.widgettitle {
color: #999; text-transform: uppercase; text-transform: uppercase; margin-bottom: 15px;
text-shadow: 1px 1px rgba(255,255,255,0.3); border: 1px solid #bbb; position: relative;
}
h4.widgettitle { font-size: 12px; padding: 2px 10px; font-weight: bold; }
h4.ctitle { border: 1px solid; color: #fff; text-shadow: 1px 1px rgba(0,0,0,0.2); }
h3.widgettitle { font-size: 14px; padding: 5px 10px; }
h3.ctitle { border: 1px solid; color: #fff; text-shadow: 1px 1px rgba(0,0,0,0.2); }
.showhide {
font-size: 10px; position: absolute; top: 0; right: 0; padding: 2px 10px; border-left: 1px solid #bbb; color: #999;
text-align: center; min-width: 75px;
}
.showhide:hover { text-decoration: none; color: #777; background: #e7e7e7; }
.widgetcontent { margin-bottom: 30px; position: relative; }
.widgetcontent.bordered { padding: 15px; border: 1px solid #bbb; border-top: 0; background: #fcfcfc; }
.widgetcontent.nopadding { padding: 0; }
.widgetsource { display: none; }
.widgetsource.show { display: block; }
.stdform input { padding: 7px 5px; border: 1px solid #bbb; }
.stdform textarea { padding: 6px 5px; border: 1px solid #bbb; }
.stdform select { border: 1px solid #bbb; padding: 5px 2px; }
.stdform p, .stdform div.par { margin: 20px 0; }
.stdform span.field, .stdform div.field { margin-left: 220px; display: block; position: relative; }
.stdform .formwrapper { display: block; padding-top: 5px; margin-left: 220px; line-height: 25px; }
.stdform label { float: left; width: 200px; text-align: right; padding: 5px 20px 0 0; }
.stdform label.error { float: none; display: block; font-size: 11px; color: #ff0000; text-align: left; padding: 0; width: auto; margin-left: 220px; }
.stdform label.valid { color: #468847; }
.stdform small.desc { font-size: 11px; color: #999; font-style: italic; display: block; margin: 5px 0 0 220px; }
.stdform .stdformbutton { margin-left: 220px; }
.stdform #spinner.input-small { width: 100px; }
.stdform2 p, .stdform2 div.par { border-top: 1px solid #ddd; background: #fcfcfc; margin: 0; clear: both; }
.stdform2 div.terms { border: 0; background: none; }
.stdform2 p:first-child, .stdform2 div.par:first-child { border-top: 0; }
.stdform2 label { display: inline-block; padding: 15px 0 0 15px; vertical-align: top; text-align: left; font-weight: bold; }
.stdform2 label.error { margin-left: 0; padding: 0; }
.stdform2 label small { font-size: 11px; color: #999; display: block; font-weight: normal; line-height: 16px; }
.stdform2 span.field, .stdform2 div.field { margin-left: 220px; display: block; background: #fff; padding: 15px; border-left: 1px solid #ddd; }
.stdform2 .stdformbutton { margin-left: 0; padding: 15px; background: #fff; }
.stdform2 input[type=checkbox], .stdform2 input[type=radio] { margin: 10px; }
.shadowed, .listfile li:hover,
.widgeticons li a {
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
form input, form textarea, form select {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,1);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 0 rgba(255,255,255,1);
}
.empty {
background-color: #f8dbdb !important;
border-color: #cc3d3d !important;
}
.splashMessage {
font-size: 14px;
font-family: ‘Open Sans’, sans-serif;
line-height: 1.5em;
margin: 20px 0;
padding: 12px 30px 10px 20px;
position: relative;
}
.splashMessage i {
font-size: 18px;
margin-right: 10px;
}
.splashMessage .alert-close {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAXElEQVR4XnXPsQ1AIQgE0KsYAWf6NDoClfuP8CGAFEY63sUcwobwgVHDtlHwxIaCk9W26ZEY74iccxP0Ag3u96Pg8HDO6Oau7K6bO3qXv88lrKzsM1b9XYIzEucf0sMh9ZVCt9gAAAAASUVORK5CYII=) no-repeat scroll 0 0 transparent;
display: block;
height: 12px;
opacity: 0.4;
overflow: hidden;
position: absolute;
right: 10px;
text-indent: -999px;
top: 15px;
width: 12px;
}
.splashMessage .alert-close:hover { opacity: 1; }
.splashMessage.default {
background-color: #ffffff;
border: 1px #cccccc solid;
color: #333333;
}
.splashMessage.primary {
background-color: #428bca;
border: 1px #357ebd solid;
color: #ffffff;
}
.splashMessage.info {
background-color: #5bc0de;
border: 1px #46b8da solid;
color: #ffffff;
}
.splashMessage.success {
background-color: #5cb85c;
border: 1px #4cae4c solid;
color: #ffffff;
}
.splashMessage.warning {
background-color: #f0ad4e;
border: 1px #eea236 solid;
color: #ffffff;
}
.splashMessage.danger {
background-color: #d9534f;
border: 1px #d43f3a solid;
color: #ffffff;
}
.splashMessage.inverse {
background-color: #474949;
border: 1px #000 solid;
color: #ffffff;
}
/*!
*/
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
}
.slider.slider-horizontal {
width: 210px;
height: 20px;
}
.slider.slider-horizontal .slider-track {
height: 10px;
width: 100%;
margin-top: -5px;
top: 50%;
left: 0;
}
.slider.slider-horizontal .slider-selection {
height: 100%;
top: 0;
bottom: 0;
}
.slider.slider-horizontal .slider-handle {
margin-left: -10px;
margin-top: -5px;
}
.slider.slider-horizontal .slider-handle.triangle {
border-width: 0 10px 10px 10px;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
.slider.slider-vertical {
height: 210px;
width: 20px;
}
.slider.slider-vertical .slider-track {
width: 10px;
height: 100%;
margin-left: -5px;
left: 50%;
top: 0;
}
.slider.slider-vertical .slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider.slider-vertical .slider-handle {
margin-left: -5px;
margin-top: -10px;
}
.slider.slider-vertical .slider-handle.triangle {
border-width: 10px 0 10px 10px;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
.slider input {
display: none;
}
.slider .tooltip-inner {
white-space: nowrap;
}
.slider-track {
position: absolute;
cursor: pointer;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff5f5f5’, endColorstr=’#fff9f9f9’, GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider-selection {
position: absolute;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff9f9f9’, endColorstr=’#fff5f5f5’, GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider-handle {
position: absolute;
width: 20px;
height: 20px;
background-color: #0e90d2;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(to bottom, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff149bdf’, endColorstr=’#ff0480be’, GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
opacity: 0.8;
border: 0px solid transparent;
}
.slider-handle.round {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.slider-handle.triangle {
background: transparent none;
}
h4 {
color: #cd0000;
font-size: 22px;
letter-spacing: -2px;
text-align: left;
}
.list {
color: #555;
font-size: 12px;
padding: 0 !important;
border: 1px solid #dedede;
}
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
text-indent: 5px;
padding: 5px;
border-right: 5px double hsla(0,95%,50%,.1);
}
.dash-count {
display: block;
position: absolute;
top: -10px;
right: 5px;
line-height: 16px;
height: 16px;
padding: 0 5px;
font-family: Arial, sans-serif;
font-size: 14px;
color: white !important;
border-width: 1px;
border-style: solid;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-color: #B94A48;
background-color: #B94A48;
}
