/**
 * This file is part of the Grido (http://grido.bugyik.cz)
 *
 * Copyright (c) 2011 Petr Bugyík (http://petr.bugyik.cz)
 *
 * For the full copyright and license information, please view
 * the file LICENSE.md that was distributed with this source code.
 */

/******************** GRID ********************/

.grido table, .grido .filter {
    background: #fff;
    border-radius: 4px;
    border-spacing: 0;
    border: 1px solid #CACACA;
    text-align: left;
    width: 100%;
}

.grido table, .grido .filter.outer {
    box-shadow: 1px 1px 12px -1px rgba(0,0,0,.2);
}

.grido thead th,
.grido tfoot td,
.grido .filter.outer {
    background: #E9E9E9;
    background:-moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
    background:-webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background:-o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background:-ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background:linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
}

.grido thead .filter th {
    background: #f2f2f2;
    background: -moz-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e9e9e9));
    background: -webkit-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
    background: -o-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
    background: -ms-linear-gradient(top, #f2f2f2 0%,#e9e9e9 100%);
    background: linear-gradient(to bottom, #f2f2f2 0%,#e9e9e9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e9e9e9',GradientType=0 );
}

.grido tr.head th:first-child {border-radius: 4px 0 0 0}
.grido tr.head th:last-child {border-radius: 4px 4px 0 0}

.grido th,
.grido td
{
    border:1px solid #CACACA;
    border-width: 0 1px 1px 0;
    height: 30px;
}

.grido th.column {/*width: 7%*/}

.grido thead {font-size: 1.15em}
.grido tfoot {font-size: 1.1em}

.grido .no-results {text-align: center}

/******************** FILTER ********************/

.grido tr.filter {height: 20px}

.grido tr.filter th {
    padding: 2px 6px 2px 6px;
    border-radius: 0;
    height: 35px;
}

.grido .filter.outer {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    min-height: 5em;
}

.grido .filter.outer .items {
    width: 85%;
    float: left;
}

.grido .filter.outer .items > span {
    float: left;
    display: block;
    width: 12em;
    height: 5em;
    padding: 7px;
}

.grido .filter.outer label {
    margin-bottom: 2px;
}

.grido .filter.outer select,
.grido .filter.outer input.text,
.grido .filter.inner select,
.grido .filter.inner input.text {width: 100%}

.grido .filter.outer .buttons {
    float: right;
    margin: 1.4em 1em 0;
}

/******************** SORTING ********************/

.grido th.column span {
    width: 0;
    height: 0;
    vertical-align: top;
    content: "";
    float: right;
    margin-top: 8px;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.grido th.column.asc span {border-bottom: 4px solid #555}
.grido th.column.desc span {border-top: 4px solid #555}

/******************** OTHERS ********************/

.grido th.actions {
    width: 15%;
    text-align: center;
}

.grido th.buttons,
.grido td.actions {text-align: center}

.grido td.actions a {margin-right: 3px}
.grido td.actions .btn-group a {margin-right: 0px}
.grido th.checker {width: 1%;text-align: center}
.grido td.checker {text-align: center}

.grido th:last-child,
.grido td:last-child { border-right: 0}

.grido tfoot tr {height: 35px}
.grido tfoot td {border-bottom:0}
.grido tfoot td:first-child {border-radius: 0 0 0 4px}
.grido tfoot td:last-child {border-radius: 0 0 4px 4px}

.grido tfoot {text-align: center; line-height: 23px!important}
.grido tfoot .operations {float: left;text-align: left}
.grido tfoot .count {float:right; text-align: left}

.grido .center {text-align: center}
.grido .left {text-align: left}
.grido .right {text-align: right}

.grido .filter.outer label {font-size: 12px}

/******************** TWITTER BOOTSTRAP RESET ********************/

.grido table {border-collapse: inherit}
.grido table thead th {vertical-align: middle}
.grido table th, .table td {vertical-align: middle}
.grido table tfoot td {text-align: inherit}

.grido tfoot tr td {line-height: 22px}

.grido table td, .grido table th {border-top: 0!important}
.grido thead th {
    border-bottom: 1px solid #CACACA!important;
    padding: 3px 6px!important;
}
.grido tbody tr td, .grido tfoot tr td {
    vertical-align: middle;
    height: 20px;
    padding: 5px;
}

.grido input.text, .grido select {
    margin-bottom: 0;
    padding: 0;
    height: 23px;
    width: auto;
}
.grido input.text {text-indent: 3px}

.grido .buttons input {
    width: auto;
    height: auto;
    margin-right: 4px;
}

.grido .form-control {
    height: auto;
    width: auto;
}

.grido tbody .form-control {
    width: 100%;
    height: 23px;
    padding: 0 0 0 3px;
}

.grido tfoot .form-control {
    display: inline;
}

.grido tr.active td {background-color: #d9edf7!important}

.btn-mini [class*=" icon-"]
{
    margin-top: 1px
}

.btn-sm .fa,
.btn-xs .fa,
small .fa,
.btn-group-sm .fa,
.btn-group-xs .fa,
.input-group-sm .fa,
.input-group-xs .fa
{
    font-size: 14px;
    top: 1px;
    position: relative;
}





/* responzivní tabulka grida */

@media only screen and (max-width: 760px),
		(min-device-width: 768px) and (max-device-width: 1024px)  {
		.responsive-table table, .responsive-table thead, .responsive-table tfoot, .responsive-table tbody, .responsive-table tbody th, .responsive-table tbody td, .responsive-table tbody tr { 
			display: block !important; 
		}
		.responsive-table tfoot{
			clear: both;
		}
		.responsive-table thead tr { 
			width: 50% !important;
			float: left !important;
		}
		.responsive-table thead tr th{
			display: block !important;
			height: 34px !important;
		}
		.responsive-table thead:after{
			content:'';
			display:block;
			clear: both;
		}
		.responsive-table thead th.actions{
			width: 100% !important;
		}
		.responsive-table thead tr.filter .buttons{
			min-width: 100%;
		}
		.responsive-table tbody tr { border: 1px solid #ccc !important; }
		.responsive-table tbody td { 
			border: none !important;
			border-bottom: 1px solid #eee !important; 
			position: relative !important;
			padding-left: 50% !important; 
			height: auto !important;
			min-height: 30px;
		}
		.responsive-table tbody td:before { 
			position: absolute !important;
			top: 6px !important;
			left: 6px !important;
			width: 45% !important; 
			padding-right: 10px !important; 
			white-space: nowrap !important;
		}
		.responsive-table tbody td:before{
			content: attr(data-before);
		}
		.responsive-table .actions {
			text-align: left !important;
		}
	}