/* HTML ------------------------------------------------- */

body {background: #1b1b1b url(../Images/backing.jpg) repeat-x top center; margin: 0; padding:0; font-family:Arial, Tahoma, sans-serif; font-size: small; color: #222; text-align:center;}
h1 {font-size: 16px;}
h2 {font-size: 16px;}
h3 {font-size: 16px;}
p {font-size: 12px;color: #666; line-height: 18px;}
a {color: #222;}
a img {border:none;}
.clear {clear:both;}
ul li {font-size: 12px;color: #666;}

/* STRUCTURE ------------------------------------------------- */

#wrapper {margin: 20px auto;background: #242424 url(../Images/wrap-back.jpg) repeat-x bottom left; width: 977px;text-align:left;height: 685px;border-bottom: solid 4px #0a0a0a;}

#header {width: 977px; float: left; clear:both;height: 147px;}
#side {float:right;width: 270px;}
#content {float:left;width: 977px;clear: both;}
#main {float:left;width: 734px;}
#footer {width: 977px; clear:both;float:left;position: relative;}
#flashcontent {background: transparent url(../Images/borderbottom.png) no-repeat center bottom;padding-bottom:0px;height: 463px;text-align:center;float: left; clear: both;}

/* HEADER  ------------------------------------------------- */

#header .logo {float: left; margin: 15px;}
#header .tel {float:right;margin: 15px;}
#header .backtoloop {float:Right;margin-right: 25px;}

/* FOOTER  ------------------------------------------------- */

#footer ul {float: left;clear:left;width: 500px;margin: 0;padding: 0;}
#footer ul li{float: left;display:inline;}
#footer ul li a{float: left;}
#footer p {float: left;margin:0; padding:0;font-size: 11px; color:#464646;}
#footer a {color: #666;font-size: 11px;color:#464646;}
#footer .footerlogo {float: right;margin: 15px 15px 0 0;}

/* NAVIGATION ------------------------------------------------- */

#nav {float: left; clear: both; width: 100%;background: transparent url(../Images/navBack.jpg)}
#nav ul{list-style-type: none; margin: 0; padding: 0;width: 100%;}
#nav ul li{float: left;display:inline;}
#nav ul li a{float: left;padding: 4px 7px; color: #222;}
#nav ul li a:hover {color:#999;}
/* #nav ul li a span{display:none;} */

#nav ul li#home a{background: transparent url(../Images/nav-home.jpg) no-repeat 0px 0px;width:116px; height: 50px;}
	#nav ul li#home a:hover{background: transparent url(../Images/nav-home.jpg) no-repeat 0px -50px;}
#nav ul li#whatson a{background: transparent url(../Images/nav-whatson.jpg) no-repeat 0px 0px;width:130px; height: 50px;}
	#nav ul li#whatson a:hover{background: transparent url(../Images/nav-whatson.jpg) no-repeat 0px -50px;}
#nav ul li#pics a{background: transparent url(../Images/nav-pics.jpg) no-repeat 0px 0px;width:88px; height: 50px;}
	#nav ul li#pics a:hover{background: transparent url(../Images/nav-pics.jpg) no-repeat 0px -50px;}
#nav ul li#qjump a{background: transparent url(../Images/nav-qjump.jpg) no-repeat 0px 0px;width:112px; height: 50px;}
	#nav ul li#qjump a:hover{background: transparent url(../Images/nav-qjump.jpg) no-repeat 0px -50px;}
#nav ul li#shop a{background: transparent url(../Images/nav-shop.jpg) no-repeat 0px 0px;width:99px; height: 50px;}
	#nav ul li#shop a:hover{background: transparent url(../Images/nav-shop.jpg) no-repeat 0px -50px; }
#nav ul li#djcharts a{background: transparent url(../Images/nav-djcharts.jpg) no-repeat 0px 0px;width:135px; height: 50px;}
	#nav ul li#djcharts a:hover{background: transparent url(../Images/nav-djcharts.jpg) no-repeat 0px -50px;}
#nav ul li#aboutus a{background: transparent url(../Images/nav-aboutus.jpg) no-repeat 0px 0px;width:135px; height: 50px;}
	#nav ul li#aboutus a:hover{background: transparent url(../Images/nav-aboutus.jpg) no-repeat 0px -50px;}

/* LISTS ------------------------------------------------- */

.article {float: left; clear: both; width: 100%; border-bottom: solid 1px #ccc;background: #fff;position:relative;}
.article .thumb {float:left; padding: 2px; border: solid 1px #ccc; margin-right: 8px;}
.article h2{color: #222; font-size: 18px;margin: 0; padding: 0;}
.article p{margin: 0 0 8px 0;}
.article a.readmore{margin: 0 0 4px 0;}

.product {float: left; clear: both; width: 100%; border-bottom: solid 1px #ccc;background: #fff;position:relative;}
.product .thumb {float:left; padding: 2px; border: solid 1px #ccc; margin-right: 8px;}
.product h2{color: #222; font-size: 18px;margin: 0; padding: 0;}
.product p{margin: 0 0 8px 0;}
.product a.readmore{margin: 0 0 4px 0;}
.product a.addtobasket {margin: 0 0 4px 0;}

/* FORMS ------------------------------------------------- */

label {float: left; width: 180px; text-align: right; margin-right: 10px;font-weight: bold;}
.textinput {width: 220px;border: solid 1px #444;padding: 2px;clear: right;}
.textbox {width: 220px; font-family:Arial, Tahoma, sans-serif; font-size: 12px; border: solid 1px #444;padding: 2px;clear: right;}
.submitbutton {padding: 4px 6px; font-weight: bold; float: left; background: #222; color:#fff;}
.message {color: #ff0000; font-weight: bold; float: left; clear :both; width: 100%;margin: 10px 0;}

/* TABLES ------------------------------------------------- */

table.listing {width: 100%; float: left; clear: both;margin: 0;}
table.listing thead th {background:#222 ;color: #fff; padding: 4px 3px;}
table.listing tr td.first{border-left: solid 1px #ccc;}
table.listing tr td {color: #fff; border-bottom: solid 1px #333;padding: 4px 3px;}