/*		style by shuster 2007		*/

/* global settings */

.menu_primary {
  color:#ffffff;
  text-decoration:none;
  font-weight:bold;
}

.menu_secondary {
  color:#ffffff;
  text-decoration:none;
  font-size:10px;
}

.menu_primary_active {
  color:#ffffff;
  text-decoration:none;
  font-weight:bold;
}

.menu_secondary_active {
  color:#ffffff;
  text-decoration:none;
}

.menu_primary_td {
  background-color:#4e4e95;
}

.copyright {
  font-size:11px;
  font-family:tahoma;
  color:#615ea8;
  text-decoration:none;
}

body {
	font: small "Verdana", "Lucida", sans-serif;
	text-align: center;
	color: #000;
	background: #FFF;
}
* html body { font-size: x-small; }
* html body td, * html body th { font-size: x-small; }

/* all elements but OL, UL */
body, p, h1, h2, h3, h4, h5, img, dl, form, fieldset, input {
	border:  0px none;
	margin:  0px;
	padding: 0px;
}
ul, ol, dl { padding-top: 0; margin-top: 0; }
dt { font-weight: bold; }

ol.a li { list-style-type: lower-alpha; }
ol.i li { list-style-type: lower-roman; }

hr {
	clear: both;
	width: 90%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	border: 1px dashed;
	border-color: #FFFFFF #FFFFFF #000080 #FFFFFF;
}


/* MAIN MENU */

/* body { behavior:url("csshover.htc"); /* update for IE browsers *//* }*/

/****** CSS MENU ******/
#menu {
	/*
	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;
}

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

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

#menu a { display: block; }

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

#menu li ul {
	visibility: hidden;
	position: absolute;
	z-index: 200;
}

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

#menu li li {
	width: 100%;
}

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

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

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

/*		------   menu Make-up	--------			*/
#menu {
	height: 25px; /* 	Height mentioned above	 */
	z-index: 100;
	font-size: 14px;
	font-weight: bold;
	background: #000066;
}

#menu ul { background: #7474AC; }

#menu a {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 12px;
	padding-right: 12px;
	text-decoration: none;
	text-align: center;
	color: #FFF;
}

#menu li {
	margin: 0 2px 0 0px;
	padding: 1px;
	background: #000066;
}
#menu li li { background: transparent; }
#menu li:hover {
	background: #D5D3F2;
}
#menu li:hover a {
	color: #000;
}
#menu li ul {
	background: #D5D3F2;
	border: 1px solid #000080;
	width: 190px;
	margin-top: 1px;
}
#menu li ul a {
	text-align: left;
	padding-left: 9px;
}
#menu li ul a.submenu {
	background: url("../gfx/sub.gif") right center no-repeat;
}
#menu li li {
	width: 185px; /* we can't use 100% because LIs have margin and padding (although latter is more important) */
	font-size: 12px;
	font-weight: normal;
	color: #000;
}
#menu li li:hover {
	background: #3F60B4;
}

/* 2-nd, 3-rd, 4th level color */
#menu li li:hover a {
	color: #FFF;
}
#menu li li:hover li a {
	color: #000;
}
#menu li li li:hover a {
	color: #FFF;
}
#menu li li li:hover li a {
	color: #000;
}
#menu li li li li:hover a {
	color: #FFF;
}
#menu li li li li:hover li a {
	color: #000;
}

#menu li ul li ul {
	margin-top: 0; /*3px;*/
	margin-left: 0; /*-2px;*/
}
#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.
*/
#menu li li ul {
	margin-top: -5px;
}
/*********** TOP MENU END ***********/

/*************** LAYOUT *************/
#container1 { background: #9C9CC4; padding-top: 0px; }
#head1 { width: 820px; margin: 0 auto; height: 20px; text-align: left; position: relative; }
#top1 {  }
#top1bar1 { margin-left: 120px; margin-right: 15px; width: 685px; color: #000; height: 42px; text-align: right; font-size: 11px; }
#top1bar1 span { display: block; width: 100%; padding-top: 26px; }
#top2 { background: #7474AC; margin-bottom: 3px; }
#top2bar1 { margin-left: 120px; width: 700px; background: #000066; }
#top3 {}
#top3bar1 { margin-left: 120px; width: 700px; background: #2F2F82; }
#top3bar2 { margin-right: 15px; width: 685px; background: #DADAE9; text-align: left; height: 20px; }

#head1 h1 a { position: absolute; top: 0px; left: 15px; display: block; width: 96px; height: 90px; background: url("../gfx/logo.jpg"); }
#head1 h1 a span { display: none; }

#marquee1 {
	padding-top: 2px;
	line-height: 18px;
	color: #000;
	font-size: 12px;
}

#container2 { width: 820px; position: relative; margin: 3px auto; }
#bg-gfx1 { width: 820px; background: url("../gfx/bg-gfx1.gif") no-repeat top right; }
#bg-gfx2 { width: 820px; background: url("../gfx/bg-gfx2.gif") no-repeat bottom left; }
#container3 { width: 790px; background: #000; margin: 0 auto; padding: 1px; } /* padding: 1 = border: 1 - inside*/
#container4 { width: 790px; background: #FFF; text-align: left; }

#col-a1 {}
#col-a2 { width: 620px; float: left;  }

#col-b { width: 160px; float: right; background: #6476AB; }
#col-b h2 {
	background: url("../gfx/h3_bg1.gif") no-repeat top center;
	height: 30px;
	line-height: 22px;
	padding: 0 5px;
	margin-bottom: 1em;
	color: #FFF;
	font-size: 110%;
}
#col-b p {
	padding: 0 5px;
	margin-bottom: 1em;
	color: #FFF;
	text-align: justify;
	font-size: 86%;
}
#col-b img {
	width: 160px;
	padding: 0 5px;
	margin-bottom: 5px;
}

#col-a_bg {
	background: url("../gfx/col-a_bg.gif") repeat-y topleft;
	height: 100%; /* IE fix */
}
#col-b_bg {
	background: url("../gfx/col-b_bg.gif") repeat-y top right;
	height: 100%; /* IE fix */
}


#foot1 {
	height: 18px;
	line-height: 18px;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;
	background: #000066;
	margin: 3px auto;
}
#foot1 a { color: #FFF; text-decoration: none; }
#foot1 a:hover { color: #FFF; text-decoration: underline; }

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

	float: none;
	clear: both;

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

.center { text-align: center; margin: 0 auto; }
.bold { font-weight: bold; }
.nobold, .normal { font-weight: normal; }

.table { display: table; width: 100%; }

.wrap1 { padding: 0 4px 0 4px; }
.wrap2 { padding: 1px 5px; }
.wrap3 { padding: 4px; }
.wrap4 { padding: 10px; }
.wrap5 { padding: 1em 4px; }

img.left, .imgl { float: left; margin: 10px 10px 10px 0; }
img.right, .imgr { float: right; margin: 10px 0 10px 10px; }

/* predefined table */
table.tab1 {
	border-spacing: 1px;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	border-collapse: collapse;
	font-size: 12px;
}

.tab1 th, .tab1 td { empty-cells: show; border: 1px solid #000080; padding: 4px; vertical-align: top; }
.tab1 th { background: #7B8DCE; color: #FFF; vertical-align: top; }
.tab1 .left { text-align: left; }
.tab1 .right { text-align: right; }
.tab1 .odd { background: #F1F6FA; }
.tab1 .even { background: #DEECF7; }


/* [frontpage] */
#frontpage h2 {
	color: #2C1C5C;;
	font-size: 120%;
}
#frontpage p { text-align: justify; margin-bottom: 1.5em; }