JSFiddle - React, Tailwind, and code Playground
by slimps
HTML
<div id="autodirector"></div><script type="text/javascript" src="http://www.yourcarsite.co.uk/autodirector/carlist.php?site=mrdcars&style=bluenew"></script>
CSS
/* AutoDirector: modern.css base CSS */
#autodirector
{
position: relative;
width: 100%;
padding: 0;
margin: 1em auto;
color: #000;
z-index: 99999;
}
#autodirector *
{
font-size: 1em;
padding: 0;
margin: 0;
color: #555;
}
#autodirector_list a
{
clear: both;
display: block;
width: 100%;
margin: 3px auto;
color: #000;
border: 1px solid #C9C9C9;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.25, #fff),
color-stop(0.75, #eee)
);
background: -moz-linear-gradient(
center top,
#fff 25%,
#eee 75%
);
}
#autodirector_list a * { cursor: pointer; }
#autodirector_list a:hover, #autodirector_list a:focus
{
border-color: #999;
background-color: #ddd;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.25, #999),
color-stop(0.75, #bbb)
);
background: -moz-linear-gradient(
center top,
#EDEDED 25%,
#FFF 75%
);
-moz-box-shadow: 9px 0px 5px #999;
-webkit-box-shadow: 9px 0px 5px #999;
box-shadow: 9px 0px 5px #999;
}
#autodirector_list img
{
display: block;
float: left;
padding: 3px;
margin: 6px;
background-color: #fff;
border: 1px solid #00478A;
-webkit-box-shadow: rgba(40, 40, 40, 0.5) 2px 2px 5px;
-moz-box-shadow: rgba(40, 40, 40, 0.5) 2px 2px 5px;
}
#autodirector_list dl
{
display: block;
float: left;
min-width: 65%;
margin: 6px 6px 6px 6px;
}
#autodirector_list dt { clear: both; width: 6.5em; float: LEFT; }
#autodirector_list dd { display: block; font-weight: bold; }
#autodirector_list dd.model { font-size: 1.2em; color: #00478A; text-shadow: 0px 1px 1px rgba(255,255,255,1.0); }
#autodirector_list div
{
clear: both;
font-size: 1.25em;
...