@charset "UTF-8";

/* CSS Reset
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
 	padding: 0;
  	border: 0;
  	font-weight: inherit;
  	font-style: inherit;
  	font-size: 100%;
  	font-family: inherit;
  	vertical-align: baseline;
}
:focus {outline: 0;}
body {line-height: 1.5;}
ol, ul {list-style-type: none;}
table {border-collapse: collapse; border-spacing:0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote, q {quotes: "" "";}
img {margin: 0; padding: 0;}
a img { border: none; }



/* Default Setting (940)
-------------------------------------------------------------- */

* { margin: 0; padding: 0; }

html { height:101%; }

body { 
	font-size: 78%;
	padding: 0;
  	color: #666; 
  	background: #eee; /* Old Colour #f2f1f1 or url(assets/bgTile.gif) repeat-x top*/ 
  	font-family: Arial, Helvetica, sans-serif;
}


/* Layout
-------------------------------------------------------------- */

#layoutHolder { width: 880px; margin: 10px auto; background-color: #fff; }

#header {
	width: 840;
	height: 60px;
	padding: 0 40px;
	line-height: 60px;
	overflow: hidden;
	background: url(assets/header.gif) no-repeat;
}

#header a:link,
#header a:active,
#header a:visited, 	
#header a:hover { background-color: transparent; }

#banner {
	width: 100%;
	height: 250px;
	overflow: hidden;
	background: url(assets/banner.jpg) no-repeat;
}


/* Navagation Menu
-------------------------------------------------------------- */	

#nav { height: 100px; overflow: hidden; background: transparent url(assets/menu.gif) no-repeat left top; padding-left: 0px; }
#nav #menu { display: block; list-style-type: none; float: left; }
#nav #menu li { display: block; height: 100px; float: left; }
#nav #menu li a { display: block; float: left; height: 100px; text-decoration: none; text-indent: -2000px; overflow: hidden; }

/* tab widths */

#nav #menu li.home a			{ width: 118px; }
#nav #menu li.aboutUs a			{ width: 134px; }
#nav #menu li.products a		{ width: 136px; }
#nav #menu li.contactUs a		{ width: 146px; }

#nav #menu li a.active,
#nav #menu li a:hover { background: transparent url(assets/menu.gif) no-repeat left top; }

/* tab start points */

#nav #menu li.home a.active,
#nav #menu li.home a:hover		{ background-position: -0px bottom; }
#nav #menu li.aboutUs a.active,
#nav #menu li.aboutUs a:hover		{ background-position: -118px bottom; }
#nav #menu li.products a.active,
#nav #menu li.products a:hover	{ background-position: -252px bottom; }
#nav #menu li.contactUs a.active,
#nav #menu li.contactUs a:hover	{ background-position: -388px bottom; }


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; letter-spacing: -0.03em; }

h1 { width: 800px; height: 50px; text-indent: -2000px; margin-bottom: 20px; }
h1.home { background-image: url(assets/pageTitleHome.gif); }
h1.aboutUs { background-image: url(assets/pageTitleAboutUs.gif); }
h1.products { background-image: url(assets/pageTitleProducts.gif); }
h1.productsHipBottle { background-image: url(assets/pageTitleProductsHipBottle.gif); }
h1.productsHipLanyard { background-image: url(assets/pageTitleProductsHipLanyard.gif); }
h1.contactUs { background-image: url(assets/pageTitleContactUs.gif); }

h2 { font-size: 2em; line-height: 1.25; margin-bottom: 0.2em; color: black; }
h3 { font-size: 1.9em; line-height: 1; margin-bottom: .6em; color: #72b533; }
h4 { font-size: 1.7em; line-height: 1; margin: 1.5em 0 .7em 0; color: #000; }
h5 { font-size: 2em; font-weight: bold; margin-bottom: 1.5em; color: black;}
h6 {
	font-size: .8em;
	font-weight: normal;
	color: #999;
	margin-bottom: 1.5em;
}

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img { margin: 0; }

/* Content
-------------------------------------------------------------- */

#contentHolder { padding: 20px 40px 0 40px ; }

.rowHolder { width: 800px; margin-bottom: 30px; overflow: hidden; }


/* Columns
-------------------------------------------------------------- */

.rowHolder .columnDbl,
.rowHolder .columnDblEnd { float: left; overflow: hidden; }

.rowHolder .columnDbl { width: 520px; margin-right: 40px; }
.rowHolder .columnDblEnd { width: 520px; }

.rowHolder .columnSgl,
.rowHolder .columnSglEnd { float: left; overflow: hidden; }

.rowHolder .columnSgl { width: 240px; margin-right: 40px; }
.rowHolder .columnSglEnd { width: 240px; }


/* Text elements
-------------------------------------------------------------- */

a	{ text-decoration: none; color: #00a7c9}
a:hover		{color: white; text-decoration: none; background-color: #00a7c9; }

p { margin: 0 0 1em; }
p em { font-style: oblique; }
p strong { font-weight: normal; color:#000; }


blockquote {
	padding: 30px;
	border: 1px solid #262626;
	background: #191919 url(assets/blockquote.png) top left no-repeat;
	margin: 20px 0;
	color: #666;
}

hr { color: #999; background: #888; border: 0; height: 1px; margin: 20px 0; }

abbr, 
acronym { border-bottom: 1px dotted #666; }

div.clear {	clear: both; }

.right { text-align: right; }
.left { text-align: left;}


/* Table styles
-------------------------------------------------------------- */

tr.row-off { background-color: #fff; }
tr.row-on { background-color: #eee; }
th { vertical-align: baseline; padding-right: 20px; background-color: #fff; }
td { vertical-align: middle; text-align: center; padding: 0 20px; height: 25px; }


/* Footer
-------------------------------------------------------------- */		

#footer {
	width: 800px; 
	height: 30px; 
	padding: 10px 40px 0 40px;
	font-size: smaller; 
	color: #666;
	text-align: right;
	background: url(assets/footer.gif) top left no-repeat;
} 

#footer a:link,
#footer a:active,
#footer a:visited 	{ color: #00a7c9; }
#footer a:hover 	{ color: white; background-color: transparent; }