/*		style by shuster 2007		*/

* { margin: 0; padding: 0; }
body {
	font: small/1.5 "Tahoma", "Arial", "Helvetica", sans-serif;
	text-align: center;
	background: #FFF url("../gfx/textura.jpg");
	color: #000;
}
* html body, * html body td, * html body th { font-size: x-small; }

img { border: 0; }

p { text-align: justify; margin-bottom: 1em; }

/* LAYOUT */
#container { width: 960px; margin: 0 auto; /*background: ivory;*/ }

#top1 { display: table; width: 100%; height: 34px; }
#top1 h1 { font-size: 1em; line-height: 34px; width: 240px; }
#top1 h1 a { width: 240; height: 32; display: block; text-decoration: none; background: url("../gfx/zootrade_logo.gif") left center no-repeat; }
#top1 h1 span { visibility: hidden; }

#top1 .x1 { float: right; }
#top1 .x2 { float: right; background: #000080; height: 34px; width: 10px; line-height: 34px; background: url("../gfx/top_bow.gif") top center no-repeat; }
#top1 .x3 { float: right; background: #000080; height: 34px; width: 200px; line-height: 34px; }
#top1 .x4 { float: right; background: #000080; height: 34px; width: 350px; line-height: 34px; font-weight: bold; color: #FFF; font-size: 10pt; text-align: center; }

#top1 .inp1 { border: 1px solid #EFA; height: 18px; margin: 7px 0; }
#top1 .btn1 { border: 1px solid #EFA; height: 18px; margin: 7px 0; background: green; font-weight: bold; font-size: 12px; }


#col-a {
	float: left;
	width: 160px;
	text-align: left;
	color: #FFF;
	/*background: #CCFFCC;*/
}
#col-a a { color: #FFF; }

#col-b {
	float: right;
	width: 800px;
	text-align: left;
	background: #FFF;
}

#foot1 {
/*	background: #000080;*/
	color: #FFF;
}


/*********** TOP MENU ***********/
#menu1 {
	/*
	height: ??;
	Since we are floating all LIs, then you need to set height in the make-up part, if you want to place some background on the menu
	*/
	display: block;
}

#menu1 ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
}

#menu1 li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	/*float: left;*/
	position: relative;
}

#menu1 a {
	display: block;
}

* html #menu1 li a {
	position: relative; /* Fix IE6's inability to expand clickable area */
}

#menu1 li ul {
	visibility: hidden;
	position: absolute;
	z-index: 10;
}

/* using display is better (no scrollbars when page loads), but IE can't handle it, so only good browsers should see this */
html>body #menu1 li ul {
	display: none;
}

#menu1 li li {
	width: 100%;
}

/* fix the position */
#menu1 li li ul {
	top: 0;
	left: 100%;
}

/* simulate child selector for IE */
div#menu1 li:hover ul,
#menu1 li:hover li:hover ul,
#menu1 li:hover li:hover li:hover ul {
	visibility: visible;
}
div#menu1 li:hover li ul,
#menu1 li:hover li:hover li ul,
#menu1 li:hover li:hover li:hover li ul {
	visibility: hidden;
}

/* do the normal show, with increased specificity, for good browsers */
#menu1 ul.menulist li:hover>ul {
	display: block;
	visibility: visible;
}


/*		------   Make-up	--------			*/
#menu1 {
	display: table;
	width: 100%;
	/*height: 25px;	/* 	Height mentioned above	 */
	z-index: 100;
	position: relative;
}

#menu1 li {
	float: none;
	height: 28px;
	margin-bottom: 3px;
	margin-bottom: "0px"; /*IE fix*/
}

#menu1 li li {
	height: auto;
	margin-bottom: 0px;
}

#menu1 li li {
	float: left;
}


#menu1 li ul {
	left: 160px;
	top: 0px;
}

#menu1 ul ul a {
	text-decoration: none;
	text-align: center;
	color: #000;
	padding-top: 3px;
	padding-bottom: 2px;
	padding-left: 9px;
	padding-right: 9px;
}

#menu1 ul ul li {
	margin: 1px;
	padding: 1px;
}
#menu1 ul ul li:hover {
	background-color: #DADAFF;
	color: #FFF;
}

#menu1 li li {
	width: 185px;	/* 	we can't use 100% because LIs have margin and padding (although latter is more important) */
}

#menu1 li ul {
	background-color: #F2F2FF;
	border: 1px solid #A3BCF1;
	width: 190px;
}
#menu1 li ul a {
	text-align: left;
	padding-left: 9px;
}
#menu1 li ul li ul {
	margin-top: 3px;
	margin-left: 0px; /*-2px*/

}
#menu1 li ul a.sub {
	background: url("../gfx/arrow1.gif") no-repeat right center;
}
.menulist {
	/*position: absolute;*/
}

/*		------   Specific fixes	(thank to W3C for these) --------			*/
/* 
		I'm gonna move the submenus 5px up
		5px works fine here and it is roughly calculated as:
			padding-bottom + margin-bottom + border-bottom of the LI
			+
			*-top values of the LI
			
		Mostly it needs a bit of trial and error.
		Basic idea is to remove the scrollbar when menu re-positioning is perfomed. Of course, script could take care of that, but that takes too much code - this is easier.
*//*
#menu1 li li ul {
	margin-top: -5px;
}
*/
menu1 span, #menu1 span b { display: block; line-height: 28px; height: 28px; border: 0; margin: 0; padding: 0;  text-align: center; }

#menu1 a.slot-a { padding: 0; line-height: 28px; display: block; text-decoration: none; }
#menu1 a.slot-a span { display: block; width: 160px; height: 28px; cursor: pointer; cursor: hand; background: #000080; }
#menu1 li a.slot-a span { color: #FFF; }
#menu1 li:hover a.slot-a span { background: #EFBC2C; color: #FFF; }

#menu1 a.slot-b { padding: 0; line-height: 28px; display: block; text-decoration: none; }
#menu1 a.slot-b span { display: block; width: 160px; height: 28px; cursor: pointer; cursor: hand; background: #000080; }
#menu1 li a.slot-b span { color: #FFF; }
#menu1 li:hover a.slot-b span { background: #789538; color: #FFF; }

#menu1 a.slot-c { padding: 0; line-height: 28px; display: block; text-decoration: none; }
#menu1 a.slot-c span { display: block; width: 160px; height: 28px; cursor: pointer; cursor: hand; background: #000080; }
#menu1 li a.slot-c span { color: #FFF; }
#menu1 li:hover a.slot-c span { background: #74A4D4; color: #FFF; }

#menu1 a.slot-d { padding: 0; line-height: 28px; display: block; text-decoration: none; }
#menu1 a.slot-d span { display: block; width: 160px; height: 28px; cursor: pointer; cursor: hand; background: #000080; }
#menu1 li a.slot-d span { color: #FFF; }
#menu1 li:hover a.slot-d span { background: #A21D2C; color: #FFF; }

/*********** TOP MENU END ***********/


.clr {
	border:  0px none;
	margin:  0px;
	padding: 0px;

	float: none;
	clear: both;

	width: 100%;
	height: 0;
	line-height: 0;
	font-size: 0;
}

.table1 { display: table; width: 100%; }
.center { text-align: center; margin: 0 auto; }

.wrap1 { padding: 10px 5px 10px 5px;  }

.imgl { float: left; margin: 10px 10px 10px 0; border: 4px solid #FFF; }
.imgr { float: right; margin: 10px 0 10px 10px; border: 4px solid #FFF; }

#bwsnav1, #bwsnav2 { display: table; width: 100%; }
#bwsnav1 .bwl, #bwsnav2 .bwl { width: 30%; float: left; }
#bwsnav1 .bwr, #bwsnav2 .bwr { width: 70%; float: right; text-align: right; }
#bwsnav1 a, #bwsnav2 a, #bwsnav1 a:visited, #bwsnav2 a:visited  { color: #000080; text-decoration: none; }
#bwsnav2 .txt { width: 32px; border: 1px solid #000; }
#bwsnav2 .btn { border: 1px solid #000; font-weight: bold; font-size: 11px; }
#bwsnav1, #bwsnav2 { background: #FFF; line-height: 2em; }
#bwsnav1 { margin-bottom: 0.5em; }

.ctgnav1 {
	border: 0px dotted #00F;
	border-top-width: 1px;
	border-bottom-width: 1px;
	line-height: 2em;
	height: 2em;
	margin-bottom: 0.5em;
}
.ctgnav1 a, .ctgnav1 a:visited { color: #000080; text-decoration: none; }
.ctgnav1 a:hover { color: #EE0; text-decoration: underline; border-bottom: 1px solid #008000;  }
.ctgnav1 a span { color: #000080;  }