/* CSS Document */


#vehicles-listing table { display: table !important; }
#vehicles-listing thead{ display: table-header-group !important;}
#vehicles-listing tbody{ display: table !important; }
#vehicles-listing th{ display: table-cell !important; }
#vehicles-listing td{ display: table-cell !important; }
#vehicles-listing tr{ display: table-row !important;}


/* ========== Listing page ========== */
a.top-sort {
	display: inline-block;
	float: left;
	white-space: nowrap;
	margin: 3px 5px 3px 3px;
	position: relative;
	border: 1px solid #CCC;
	border-radius: 3px;
	text-decoration: none;
	color: #666;
	background-color: #FAA732;
	background-image: linear-gradient(to bottom, #FBB450, #F89406);
	background-repeat: repeat-x;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	color: #666;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 3px;
}

a.top-sort:hover {
	background-color: #FAA732;
	background-image: linear-gradient(to bottom, #F89406, #F89406);
	color: #333;
}

.automart-brand-name {
	padding: 3px 5px 3px 7px;
	display: inline-block;
}

span.automart-brand-total {
	padding: 3px 5px;
	border-left: 1px solid #FFF;
}

.automart-top-sort-container .current {
	color: #000;
}

#vehicles-listing {
	border-radius: 4px;
	border: 1px solid #DDDDDD;
	border-collapse: separate;
	width: 100%;
}

#vehicles-listing tbody { width: 100%;}

#vehicles-listing th a {
	text-decoration: none;
}

#vehicles-listing th {
	padding: 8px 12px;
	border-right: 1px solid #DDDDDD;
}

#vehicles-listing th:last-child {
	border-right: none;
}


#vehicles-listing td {
	border-top: 1px solid #DDDDDD;
	padding: 4px;
	border-right: 1px solid #DDDDDD;
}

#vehicles-listing td:last-child {
	border-right: none;
}

td.km { width: 80px;}
td.year { width: 60px;}
td.price { width: 100px;}

a.makemodel-title {
	font-size: 120%;
}

.price, .km { text-align: right; }
.year { text-align: center;}
.makemodel { text-align: left; }

/* ========== Detail Page ========== */

.automart-detail-container {
	border: 1px solid #DDDDDD;
	width:98%;
	max-width: 600px;
	border-radius: 4px;
	padding:1%;
}

.detail-heading-price { font-style: italic; }

.automart-detail-main-image {
	text-align: center;
	border-bottom: 1px solid #ddd;
	margin-bottom: 5px;
}

.automart-detail-main-image img {
	width: 100%;
	max-width: 480px;	
}

.automart-detail-image-thumbs-container {
	text-align: center;
	margin-bottom: 5px;
}

.automart-detail-image-thumbs {
	float: left;
	width: 70px;
	margin-right: 4px;
}
	

.automart-detail-image-thumbs img {
	height: auto;
	width: 100%;
}

.automart-detail-image-thumbs img:hover {
	opacity: 0.6;
}


.automart-detail-row {
	border-top: 1px solid #ddd;
	margin-top: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.automart-detail-row b {
	font-weight: bold;
	width: 130px;
	display: inline-block;
}

.automart-back-button {
	background-color: #FAA732;
	background-image: linear-gradient(to bottom, #FBB450, #F89406);
	background-repeat: repeat-x;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	color: #FFFFFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	padding: 4px 8px;
	text-decoration: none;
}

.automart-back-button:hover {
	background-color: #FAA732;
	background-image: linear-gradient(to bottom, #F89406, #F89406);
	color: #000;	
}

/* ========== Table Overwrite ========== */

@media (max-width: 480px) {
	
td.km { width: 69%; }
td.year { width: 69%;}
td.price { width: 69%;}	
	
/* Force table to not be like tables anymore */
#vehicles-listing table,
#vehicles-listing thead,
#vehicles-listing tbody,
#vehicles-listing th,
#vehicles-listing td,
#vehicles-listing tr {
display: block !important;
}
 
/* Hide table headers (but not display: none;, for accessibility) */
#vehicles-listing tr th{
position: absolute;
top: -9999px;
left: -9999px;
}
 
#vehicles-listing tr {
	border-bottom: 3px solid #999;
}
 
#vehicles-listing td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
white-space: normal;
text-align:left;
}

#vehicles-listing td.image { padding-left: 2%;} 
#vehicles-listing td.image img { width: 98%;} 
 
#vehicles-listing td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 36%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}

#vehicles-listing td.image:before { padding-left: 2%;} 
 
/*
Label the data
*/
#vehicles-listing td:before { content: attr(data-title); }
}