/* CSS FOR WESTSWINDON-SHOPPING */

/* font hack, WINIE5 is one smaller than all other browsers */

body {
font-family: arial, sans-serif;
font-size: x-small;
voice-family: "\"}\"",inherit;
font-size: small;
}

html>body { font-size: small; }

a {
color: red;
}

.bblue {
background: navy;
border: 1px solid black;
}

.border {
border: 1px solid black;
}

.clear {
clear: both;
width: 300px;
}

#compliant {
background: #00487D;
color: #80C9FF;
display: block;
font-size: 80%;
width: 650px;
margin: 0;
padding: 1em 0;
}

#compliant a {
background: url(../imgs/bt-more-dark.png) no-repeat 1px 50%;
padding: 0 0 0 15px;
color: white;
font-weight: bold;
text-decoration: none;
}

#content {
background: white url(../imgs/tmp-content-bg.png) no-repeat bottom left;
float: left;
width: 474px;
min-height: 400px;
padding: 0;
overflow: visible;
margin: 0;
border-right: 1px solid black;
}

#content #contentdata {
min-height: 210px;
margin: 0;
padding: 0 1em 0 1em;
}

#content h1 {
background: url(../imgs/h1.png) 0 90% no-repeat;
color: #0066B3;
font-size: 120%;
padding: .5em 0 0 1.2em;
margin: 0 0 .5em 0;
}
	
#content p {
font-size: 80%;
line-height: 1.5em;
}

#content ul {
font-size: 80%;
font-weight: bold;
line-height: 1.5em;
}

#explorerspace {
clear: both;
float: left;
padding-top: 100px;
}
	
/* I MAY NEED TO ADD MORE HACKS FOR THE WIDTH OF DIVS, I WILL HAVE TO FOCUS ON THESE HACKS AS IT COULD GO ALL A BIT PEAR SHAPED. IM WORRIED ABOUT EXPLORER */

#frame {
border: 1px solid #E6E6E6;
float: left;
/* margin: 0 0 0 -375px; */
padding: 0;
position: relative;
/* left: 50%; */
width: 650px;
overflow: visible;

}

/*

div.content { 
border: 10px;
padding: 10px;
width: 340px; 
voice-family: "\"}\""; 
voice-family: inherit;
width: 260px;
} 

*/

#nav {
background: #FFB200 url(../imgs/bt-li-nav.png) repeat-x bottom left;
float: left;
font-size: 85%;
list-style: none;
margin: 0;
padding: 5px 0 0 0;
width: 600px;
voice-family: "\"}\""; 
voice-family: inherit;
width: 650px;
}

#nav li {
float: left;
margin: 0 0 0 5px;
padding: 0;
}

/* EXPLORER ISN'T UPDATING THE NEW IMAGE, WATCH THIS */

#nav li a {
background: #FFD980 url(../imgs/bt-li-cream.png) repeat-x top left;
border: 1px solid #B37D00;
border-bottom: none;
display: block;
color: #333;
float: left;
margin: 0 1px 0 0;
padding: 4px 8px;
text-decoration: none;
}

/* SO THE PAGE SHOWS WHICH WHITE BUTTON TO SHOW UP */

#nav a:hover, body#intro #t-intro a {
color: black;
padding-bottom: 5px;
border-color: black;
background: #FFF url(../imgs/bt-li-white.png) repeat-x top left;
}

#nav a:hover, body#aboutus #t-aboutus a {
color: #333;
padding-bottom: 5px;
border-color: black;
background: #FFF url(../imgs/bt-li-white.png) repeat-x top left;
}

#nav a:hover, body#shops #t-shops a {
color: #333;
padding-bottom: 5px;
border-color: black;
background: #FFF url(../imgs/bt-li-white.png) repeat-x top left;
}

#nav a:hover, body#news #t-news a {
color: #333;
padding-bottom: 5px;
border-color: black;
background: #FFF url(../imgs/bt-li-white.png) repeat-x top left;
}

#nav a:hover, body#gallery #t-gallery a {
color: #333;
padding-bottom: 5px;
border-color: black;
background: #FFF url(../imgs/bt-li-white.png) repeat-x top left;
}

#nav a:hover, body#direct #t-direct a {
color: #333;
padding-bottom: 5px;
border-color: black;
background: #FFF url(../imgs/bt-li-white.png) repeat-x top left;
}

#nav a:hover, body#contactus #t-contactus a {
color: #333;
padding-bottom: 5px;
border-color: black;
background: #FFF url(../imgs/bt-li-white.png) repeat-x top left;
}

.pukka {
background: url(../imgs/h1.png) 0 50% no-repeat;
font-weight: bold;
padding: .5em .5em .5em 1.8em;
text-transform: uppercase;
}

.smalldate {
font-size: 80%;
font-style: italic;
}

.theshop {
border-bottom: 1px solid gray;
float: left;
margin: 0;
margin-bottom: 1em;
min-height: 100px;
padding: 0;
padding-bottom: .5em;
width: 400px;
}

.theshop img {
border: 1px solid black;
}

.theshop p {
margin: 0;
padding: 0;
}

.theshop a {
color: red;
}

/* WRAPPER AND GENERAL CONTENT */

#wrapper {
clear: both;
float: left;
width: 650px;
background: #B32400 url(../imgs/tmp-sidebar-bg.png) repeat-y 475px;
}



/* TABLES: START */

table {
background: #FFBFBF;
border: 1px solid #B30000;
border-collapse: collapse;
}

th, td {
border: 1px solid #B30000;
border-right: none;
border-top: none;
font-size: 80%;
padding: .5em;
text-align: left;
}

th {
background: #FF8080;
font-size: 80%;
font-weight: bold;
text-transform: uppercase;
}


/* TABLES: END */


	/* DL */
	
	#dlthumbs {
	float: left;
	padding: 0;
	margin: 0;
	width: 400px;
	}
	
	#dlthumbs dl {
	border-bottom: 1px solid #E6E6E6; 
	display: inline; /* FIXES IE/WIN BUG */
	width: 400px;
	float: left;
	margin: 10px 5px;	
	padding: 0 0 1em 0;
	}
	
	/* IF THE WIDTH CHANGES ON TH DL THEN YOU NEED TO CHANGE THE DT TO SIT AT THE TOP */
	
	#dlthumbs dt {
	text-align: left;
	float: right ;
	font-size: 110%;
	font-weight: bold;
	color: black;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	width: 238px;
	}
	
	#dlthumbs dd {
	font-size: 80%;
	color: #333;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	}
	
	#dlthumbs dd.img img {
	border: 1px solid #E6E6E6;
	float: left;
	margin-right: 5px;
	}

#sidebar {
padding: 0;
margin: 0;
color: #FFCCBF;
float: right;
width: 175px;
border: none;
overflow: hidden;
text-align: left;
}

	#sidebar h3 {
	font-size: 110%;
	margin: 0 0 .5em 0;
	padding: .5em .5em 0 .4em;
	}
	
	#sidebar p {
	color: white;
	font-size: 70%;
	line-height: 1.5em;
	margin: 0;
	padding: 0 .5em 1em .5em;
	}


#footer {
clear: both;
float: left;
margin: 0;
padding: 0;
width: 650px;
text-align: center;
}

#switcher {
background: #FFB200;
color: white;
display: block;
font-size: 80%;
width: 650px;
margin: 0;
padding: 1em 0;
}

#switcher a {
background: url(../imgs/bt-more-brown.png) no-repeat 1px 50%;
padding: 0 0 0 15px;
margin: 0 0 0 .5em;
color: black;
font-weight: bold;
text-decoration: none;
}

/* WHEN FONT-SIZE IS TO SMALL IT CUTS OFF THE IMAGE: LINE-HEIGHT DOESN'T CHANGE IT, AND NEITHER DOES HEIGHT. I HAVE HAD TO MAKE THE IMAGE MUCH SMALLER */