*						{ margin: 0; padding: 0; }

body					{ background-color: #808080; font-family: arial, sans-serif; }
#shell					{ width: 908px; margin: auto; padding: 0px 8px; background: white url("../img/shell_bg.gif") repeat-y; }

.image_replacement		{ position: relative; overflow: hidden; }
.image_replacement span	{ position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; }
.clear					{ clear: both; }

a img					{ border: none; }
a						{ font-weight: bold; color: #808080; text-decoration: none; }
a:hover					{ color: black; }

/*
	Tails after each of the headers
*/
.tail		{ color: #ee7724; margin-left: 0.3em; font-weight: bold; }

/*
	The black header at the top of every page. Elements:
	 - Logo. The orange and grey box with the letter "CSL" inside. Done as a grey div with an orange border (works without images) with image replacement for the logo.
	 - Name. The white text "Cuthbert Stewart Limited" with the orange underline. Underline is HTML to avoid images. Text is done with image replacement.
	 - Images. The set of five images at the top right. These are straight images, and fade in and out with javascript.
*/
#header					{ height: 128px; background: black url("../img/content_bg.gif") repeat-x bottom; color: white; float: left; width: 100%; }

#title					{ float: left; width: 321px; }
#logo					{ width: 159px; height: 61px; padding: 3px 0px 3px 91px; background-color: #808080; border-left: 71px solid #ee7724; }
#logo h1				{ height: 61px; width: 131px; font-family: impact, sans-serif; font-size: 3.0em; }
#logo h1 span			{ background-image: url("../img/text_csl.gif"); }
#name					{ width: 252px; margin-left: 70px; padding: 12px 0px 7px 0px; border-bottom: 2px solid #ee7724;}
#name h2				{ width: 222px; height: 12px; font-size: 0.7em; text-align: right; }
#name h2 span			{ background-image: url("../img/text_cuthbert_stewart_limited.gif"); }

#images					{ float: right; width: 555px; height: 68px; }
#images .image			{ position: relative; width: 111px; height: 68px; float: left; }
#images .image img		{ position: absolute; top: 0px; left: 0px; }
#images img.front		{ z-index: 1; }
#image_list				{ display: none; }

/*
	The ad column
*/
#ad					{ margin-left: auto; text-align: center; }

/*
	The middle panel, everything between the header and footer.
*/
#middle					{ background-color: white; float: left; width: 100%; }
#left					{ float: left; width: 161px; }
#centre					{ float: left; width: 429px; padding: 30px 0px 30px 40px; overflow: hidden; }
#centre #content		{ float: left; padding-right: 37px; background: url(../img/border_vertical.gif) repeat-y right; }
#right					{ float: left; width: 205px; margin-left: 37px; padding: 30px 0px 0px 0px; }

/* background: url(../img/border_vertical.gif) repeat-y right; */

/*
	The footer
*/
#footer					{ width: 100%; float: left; padding: 4px 0px; border-top: 2px solid #808080; font-size: 0.75em; }
#footer a				{ color: black; text-decoration: none; }
#footer a:hover			{ text-decoration: underline; }
#contact				{ list-style-type: none; margin-left: 70px; }
#contact li				{ float: left; padding: 0px 38px 0px 34px; background: url("../img/bullet.gif") no-repeat right center; }
#contact li.last			{ padding-right: 34px; background: none; }

/*
	Button
*/
.button					{ display: block; width: 210px; margin: 20px 0px 0px 0px; background-image: url(../img/button_off_bg.gif);
						  text-decoration: none; text-transform: uppercase; text-align: center; cursor: pointer; }
.button .top				{ display: block; width: 210px; background: url(../img/button_off_bg_top.gif) no-repeat; }
.button .bottom			{ display: block; width: 185px; padding: 10px 15px 15px 10px; background: url(../img/button_off_bg_bottom.gif) no-repeat bottom; }

.button:hover			{ background-image: url(../img/button_on_bg.gif); }
.button:hover .top		{ background-image: url(../img/button_on_bg_top.gif); }
.button:hover .bottom	{ background-image: url(../img/button_on_bg_bottom.gif); }

.button .name			{ display: block; margin-bottom: 0.3em; font-size: 0.7em; color: white; }
.button .download		{ display: block; font-size: 1.3em; color: black; }
.button:hover .download	{ color: #808080; }
.button:hover .tail		{ color: black; }

/*
	The ad column
*/
a.ad					{ display: block; width: 161px; margin: 40px 0px; padding: 170px 0px 3px 0px;
						background-color: #ee7724; background-repeat: no-repeat;
						text-align: center; color: white; text-transform: uppercase; font-weight: bold; text-decoration: none; }
a.ad:hover				{ color: black; }