/* Default Page Styles
================================================================================== */
*           { margin: 0; padding: 0; }
html, body  { height: 100%; text-align: center; }
body        { background: #000000 url(images/background_v4.gif) repeat-x; }
body        { behavior:url("csshover.htc"); }
h1          { text-align: left; }
p           { text-align: left; }
#change {font-family:"Trebuchet MS"; color:#999999; text-decoration:none;}
#change:link {color:#999999; font-family:"Trebuchet MS"; text-decoration:none;}
#change:hover {color:#6FA395; font-family:"Trebuchet MS"; text-decoration:none;}



/* Sitewide Page Layout Styles
================================================================================== */
#wrapper {
	margin: 0 auto;
	min-height: 100%; height: auto; width: 787px;
}

* html body #wrapper { height: 100%; }

#container {
	width: 773px;
	background: #fff;
	margin: 0 auto; text-align: center; /* Horizontal aligning */
}

#header {
	background: #fff;
	width: 773px; height: 118px;
}

#logo {
	width: 345px; height: 52px;
	float: left; display: inline;
	padding: 0px 0 0 0; margin: 22px 0 0 32px;
	background: #fff url(images/logo.gif) no-repeat left;
}

#logo-us {
	width: 345px; height: 63px;
	float: left; display: inline;
	padding: 0px 0 0 0; margin: 19px 0 0 32px;
	background: #fff url(images/aclogo_usa.gif) no-repeat left;
}

#content {
	width: 740px;
	margin: 0 auto;
	background-color: #fff;
	text-align: left;
}




/* Sub Page(s) Layout Styles
================================================================================== */
#flash {
	width: 740px;
}

#firstBox {
	float: left;
	background: #4C4C4C;
	width: 240px; height: 160px;
	margin: 20px 10px 10px 0; padding: 0;
}

#secondBox {
	float: left;
	width: 240px; height: 160px;
	margin: 20px 0 0 0; padding: 0;
}
#secondBox1 {
	float: left;
	background:#929292;
	font:Verdana, Arial, Helvetica, sans-serif;
	width: 240px; height: 160px;
	margin: 20px 0 0 0; padding: 0;
}

#thirdBox {
	float: right;
	width: 240px; height: 160px;
	margin: 20px 0 10px 0; padding: 0;
}

#brochure {
	float: left;
	border: 1px solid #828387;
	width: 238px; height: 158px;
	margin: 0 10px 0 0; padding: 0;
}

#colour-palette {
	float: left;
	background: #000;
	margin: 0 0 0 0; padding: 0;
	width: 240px; height: 160px;
}

#gallery {
	float: right;
	background: #929292;
	margin: 0 0 0 0; padding: 0;
	width: 240px; height: 160px;
}
#emailsub {
	clear:both;
	width:720px;
	padding-top:10px; padding-left:15px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#818386; font-size:12px;
	}
#footer {
	clear: both;
	width: 740px; height: 20px;
	border-top: 1px solid #C0C1C2;
	padding: 0 0 120px 0; margin: 0;
}

.armourCoat { width: 20px; }





/* Typography Styles
================================================================================== */
#content h1.stunning {
	text-indent: -5000px;
	margin: 20px 0 0 15px;
	width: 283px; height: 23px;
	background: url(images/contentTitle.jpg) no-repeat;
}

#content h1.spatulata {
	text-indent: -5000px;
	margin: 20px 0 0 15px;
	width: 283px; height: 23px;
	background: url(images/heading_spatulata.gif) no-repeat;
}

#content h1.spatulata-colour {
	text-indent: -5000px;
	margin: 20px 0 0 15px;
	width: 385px; height: 23px;
	background: url(images/heading_spatulata_colour.gif) no-repeat;
}

#content p {
	margin: 0 0 0 15px; padding: 0; font: 12px Verdana, sans-serif; color: #818386;
}

#wrapper #container #content p {
	line-height: 18px;
}

#footer p {
	margin: 0; padding: 8px 0 0 0;
	font: 9px Verdana, sans-serif; color: #818386;
}

#footer a {
	color: #2B2C2D; text-decoration: none;
}

#footer p span.footerLeft {
	float: left;
}

#footer p span.footerRight {
	float: right;
}

* html body #content h1.stunning {
	text-indent: -5000px;
	margin: 20px 0 -10px 15px;
	width: 283px; height: 23px;
	background: url(images/contentTitle.jpg) no-repeat;
}

* html body #content h1.spatulata {
	text-indent: -5000px;
	margin: 20px 0 -10px 15px;
	width: 283px; height: 23px;
	background: url(images/heading_spatulata.gif) no-repeat;
}

* html body #content h1.spatulata-colour {
	text-indent: -5000px;
	margin: 20px 0 -10px 15px;
	width: 385px; height: 23px;
	background: url(images/heading_spatulata_colour.gif) no-repeat;
}

#brochure h2         { margin: 17px 0 5px 13px; font: 19px Verdana, sans-serif; color: #A1A2A4; }
#brochure p          { margin: 0 0 0 13px; font: 12px Verdana, sans-serif; color: #818386; }
#brochure img        { float: right; margin: -15px 5px 0 0; }
#brochure a img      { border: none; }
#colour-palette h2   { margin: 17px 0 9px 13px; font: 19px Verdana, sans-serif; color: #818286; }
#colour-palette img  { margin: 0 0 4px 0; }
#colour-palette a    { color: #818386; }
#gallery h2          { float: left; display: inline; margin: 17px 0 5px 13px; font: 19px Verdana, sans-serif; color: #fff; }
#content #gallery p  { clear: both; margin: 0 0 0 13px; font: 12px Verdana, sans-serif; color: #fff; }
#gallery img         { margin: 8px 0 0 0; }





/* Image(s) Styles
================================================================================= */
#secondBox a img { border: none; }
#firstBox a img  { border: none; }
#thirdBox a img  { border: none; }





/* Misc(s) Styles
================================================================================= */
.break{ overflow: hidden; clear: both; width: 1px; height: 1px; }
.breakLarge{ overflow: hidden; clear: both; width: 1px; height: 60px; }




/* Form(s) Styles
================================================================================= */
#gallery input.box {
	width: 93px;
	color: #000;
	background: #D8D8D8;
	border: 1px solid #5A5B5D;
	font: 11px Verdana, sans-serif;
	padding: 2px 0 2px 3px; margin: 18px 0 0 16px;
}

#gallery input.button {
	margin: 0 0 -5px 0;
}







/* Main Navigation Styles
================================================================================== */
ul#mainNavigation                  { width: 740px; height: 20px; background-color: #000; }
#mainNavigation                    { width: 740px; height: 20px; background-color: #000; list-style: none; }
#mainNavigation ul                 { margin: 0; padding: 0; list-style: none; }
#mainNavigation li ul              { position: absolute; left: 0; top: auto; display: none; }
#mainNavigation ul li              { position: relative; float: left; width: 110px; }
#mainNavigation ul li.polished     { position: relative; float: left; width: 110px;	padding: 0 0 0 1px; }
#mainNavigation ul li.armourCast   { position: relative; float: left; width: 90px; }
#mainNavigation ul li.armourColor  { position: relative; float: left; width: 90px; }
#mainNavigation ul li.dutro        { position: relative; float: left; width: 55px; }
#mainNavigation ul li.racketSports { position: relative; float: left; width: 110px; }
#mainNavigation ul li a            { display: block; text-decoration: none; font: 11px Verdana, sans-serif; color: #000000; background: #000; /* IE6 Bug */ padding: 3px; }

/* commented backslash mac hiding hack \*/ 
* html #mainNavigation ul li a {height:1%}
/* end hack */ 

/* this sets all hovered lists to red */
#mainNavigation li:hover a, #mainNavigation li.over a,
#mainNavigation li:hover li a:hover, #mainNavigation li.over li a:hover { color: #FFFFFF; background-color: #000; }

/* set dropdown to default */
#mainNavigation li:hover li a, #mainNavigation li.over li a { color: #9EA1A4; background-color: #000; width: 100px; margin-left: 7px; line-height: 13px; }

#mainNavigation li ul li a                              { padding: 2px 5px; } /* Sub Menu Styles */
#mainNavigation li:hover ul, #mainNavigation li.over ul { display: block; color: #FFFFFF; } /* The magic */
#mainNavigation a:hover                                 { color: white; }




/* Sub Navigation Styles
================================================================================== */
#subNavigation                  { width: 421px; height: 20px; float: right; list-style: none; margin: 7px 0 0 0; }
#subNavigation ul               { margin: 0 8px 0 0; padding: 0; list-style: none; float: right; }
#subNavigation ul li            { position: relative; float: left; width: 110px; }
#subNavigation ul li.div        {  font: 8px Verdana, sans-serif; color: #818386;  position: relative; height: 0px; float: left; width: 3px; padding: 0 0px 0 0px; }
#subNavigation ul li.home       { position: relative; height: 12px; float: left; width: 26px; padding: 0 4px 0 0px; }
#subNavigation ul li.news       { position: relative; height: 12px; float: left; width: 90px; padding: 0 10px 0 10px; }
#subNavigation ul li.about      { position: relative; height: 12px; float: left; width: 48px; padding: 0 4px 0 4px; }
#subNavigation ul li.contact    { position: relative; height: 12px; float: left; width: 57px; padding: 0 4px 0 4px; }
#subNavigation ul li.gallery2     { position: relative; height: 12px; float: left; width: 23px; padding: 0 4px 0 4px; }
#subNavigation ul li.gallery     { position: relative; height: 12px; float: left; width: 38px; padding: 0 4px 0 4px; }
#subNavigation ul li.brochure   { position: relative; height: 12px; float: left; width: 100px; padding: 0 4px 0 4px; }
#subNavigation ul li.technical  { position: relative; height: 12px; float: left; width: 35px; padding: 0 20px 0 4px; }
#subNavigation li ul            { position: absolute; left: 0; top: auto; display: none; }
#subNavigation ul li a          { display: block; text-decoration: none; font: 9px Verdana, sans-serif; color: #818386; background: #fff; /* IE6 Bug */ }

/* commented backslash mac hiding hack \*/ 
* html #subNavigation ul li a {height:1%}
/* end hack */ 

/* this sets all hovered lists to red */
#subNavigation li:hover a, #subNavigation li.over a,
#subNavigation li:hover li a:hover, #subNavigation li.over li a:hover { color: #000; }

/* set dropdown to default */
#subNavigation li:hover li a, #subNavigation li.over li a { color: #505153; background-color: #BABCBF; width: 130px; margin-left: 7px; text-align: left; line-height: 15px; }

#subNavigation li ul li a                             { padding: 2px 5px; } /* Sub Menu Styles */
#subNavigation li:hover ul, #subNavigation li.over ul { display: block; } /* The magic */
#subNavigation a:hover                                { color: #000; }
* html body #subNavigation ul li.technical            { padding: 0 0 0 8px; }




/* Top Navigation Styles
================================================================================= */
ul#topNavigation {
	overflow: hidden;
	padding: 0 0 0 20px;
	background: #4C4C4C; 
	width: 754px; height: 18px;
}

ul#topNavigation li {
	float: left;
	margin: 0; padding: 0;
	font: 11px Verdana, "Trebuchet MS", sans-serif;
	list-style: none;	
	line-height: 1.6em;
	border-left: 1px solid #828287;
}
	
ul#topNavigation a {
	float: left;
	color: #828287;
	text-decoration: none;
}

ul#topNavigation li.active a {
	float: left;
	color: #BABBBD;
	background: #707173;
	text-decoration: none;
}
	
ul#topNavigation a:hover {
	color: #BABBBD;
	background: #707173;
	text-decoration: none;
}

ul#topNavigation li a.group       { padding: 0 6px 0 6px;  }
ul#topNavigation li a.usa         { padding: 0 38px 0 6px; }
ul#topNavigation li a.far-east    { padding: 0 22px 0 6px; }
ul#topNavigation li a.middle-east { padding: 0 6px 0 6px; }
ul#topNavigation li a.india       { padding: 0 36px 0 6px; border-right: 1px solid #828287; }




/* Breadcrumbs Navigation Styles
================================================================================= */
ul#breadcrumbs {
	padding: 6px 0 0 30px; 
	float: left; width: 322px;
}

ul#breadcrumbs li {
	float: left;
	margin: 0; padding: 0 4px 0 0;
	list-style: none; color: #A3A4A6;
	font: 9px Verdana, "Trebuchet MS", sans-serif;
}
	
ul#breadcrumbs a                 { float: left; color: #A3A4A6; padding: 0 3px 0 0; text-decoration: none; }
ul#breadcrumbs li.active a       { color: #A3A4A6; text-decoration: underline; }
ul#breadcrumbs li.active a:hover { color: #000; text-decoration: underline; }
ul#breadcrumbs a:hover           { color: #000; }

