/*--------------------------------------------------*/
/*          #=ID(single)    .=CLASS(multiple)       */
/*              REGULAR PAGE FORMATTING             */
/*                  ROOT LEVEL                      */
/*--------------------------------------------------*/
body {
	text-align: center;
	background-image:url(graphics/v-bg2.gif);
	background-repeat: repeat-x;
	background-color: #6b758c;
	font-family: "arial", helvetica, sans-serif, Times, serif;
	margin: 0px 0px 0px 0px;
	margin-bottom: 0px;
	behavior: url(csshover.htc); /* WinIE behavior call */
	behavior: url(../csshover.htc); /* WinIE behavior call */
	behavior: url(../../csshover.htc); /* WinIE behavior call */
}


/*In the world of CSS there can be many headaches getting your page to do what you want.
Today let me show you a trick that will save you some time getting your site to look the
same in IE and Firefox.  If you try to center a wrapper div on a page you may run into
some issues with FireFox.  I discovered a fix online and I hope this helps you as well.
In short here is the solution:

Change the margin from margin: 0px; to margin: 0 auto; 

When you make that change this will give the div an auto left and right margin. Combined
with your div width this will cause it to center. */

div#body-bloc {
	margin: 0 auto;       /* Causes Overlib to center its text and also centers the page in Firefox window.  */
	text-align: left;     /* Causes Overlib to align text left */
	/* background-color: #808040;*/
	background-color: #FFFFFF;
	width: 998px;
	border: 0px solid #0C557C;
	padding: 0px 0px 0px 0px;
	font: "arial", helvetica, sans-serif;
	font-size: 12px;
	/* color: #333333*/
	color: #000099;
	/* word-wrap: break-word; */
}

div#masthead {
	background-image: url(graphics/header-name13.gif);
	background-repeat: repeat-x;
	background-position:center;
	width: 1000px;
	height: 120px;
	margin: 0px;
}

div#date-time {
	background-image: url(graphics/topbar01_back.gif);
	width: 990px;
	height: 17px;
	padding-top: 3px;
	padding-right: 10px;
	text-align: right;
}

#footer {
	background-image:url(graphics/footer-street.gif);
	border-top: 1px solid #575391;
	border-bottom: 1px solid #575391;
	width: 1000px;
	height: 119px;
	font-size: 10px;
	font-weight: bold;
}

div.footer {
	font: "arial", helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

div.clear{
	padding: 0;
	clear: both;
	display: block;
	height: 1px;
	overflow: hidden;
}

/*--------------------------------------------------*/
/*     Fifty-Fifty formatting    RESUME  & INDEX    */
/*--------------------------------------------------*/

div#body-left-480px {
	float: left;
	width: 480px;
	border: 0px solid #999999;
	text-align: justify;
	padding: 0px;
}

div#body-right-480px {
	float: right;
	width: 480px;
	border: 0px solid #999999;
	text-align: justify;
	padding-right: 25px;
}

#boxleft-38per {
	float: left;
	width: 38%;
	/*- height: 800px; -*/
	text-align: center;
	padding: 0px;
	margin: 0px;
}

div#boxright-58per {
	float: right;
	width: 58%;
	text-align: justify;
	border-left: 3px double #575391;
	padding: 0px;
	margin: 0px;
}

/*----------------------------------------------------------------------*/
/*----------------------------------------------------------------------*/
/*    OBSOLETE         Thirty-Seventy formatting            OBSOLETE    */
/*----------------------------------------------------------------------*/
/*----------------------------------------------------------------------*/

div#body-left-300px {
	float: left;
	width: 200px;
	height: 100%;
	border-right: 3px double #575391;
	text-align: justify;
	padding: 10px;
	margin: 0px;
}

div#body-right-700px {
	float: right;
	width: 750px;
	height: 100%;
	border: 0px solid #999999;
	text-align: justify;
	padding: 0px;
	margin: 0px;
}

/*--------------------------------------------------*/
/*              Mostly used formatting              */
/*--------------------------------------------------*/
div#body-left {
	float: left;
	width: 200px;
	height: 100%;
	border-right: 3px double #575391;
	text-align: justify;
	padding: 10px;
	margin: 0px;
}

div#body-right {
	float: right;
	width: 750px;
	height: 100%;
	border: 0px solid #999999;
	text-align: justify;
	padding: 0px;
	margin: 0px;
}

/*--------------------------------------------------*/
/*            Footer boxen indeling                 */
/*--------------------------------------------------*/
div.box-100per-top {
	width: 100%;
	height: 1px;
	padding-top: 0px;
	border-top: 0px double #575391;
	background-color: #FFFFFF;
	text-align: center;
}

div.box-100per {
	width: 100%;
	border: 1px solid #999999;
	background-color: #FFFFFF;
}

/*--------------------------------------------------*/
/*            Summary-box Formatting                */
/*--------------------------------------------------*/
div.summary-box {
	background-color: #E9E9E9;
	padding: 10px;
	width: 440px;
}

a.summary-box {
	font-weight: bold;
	text-decoration: none;
	color: #575391;
}

/*--------------------------------------------------*/
/*            Photolink-box formatting              */
/*--------------------------------------------------*/
div.photolink-box {
	margin-top: 10px;
	background-color:#cdd9d9;
	padding: 10px;
	width: 270px;
	border: 1px solid #575391;
	line-height: 18px;
}

div.photolink-box a {
	text-decoration: none;
	color: #575391;
	font-weight: bold;
}

/*--------------------------------------------------*/
/*               Header Formatting                  */
/*--------------------------------------------------*/
div.header5 {
	font-size: 12px;
	font-weight: bold;
}

div.header4{
	font-size: 20px;
	font-weight: bold;
	text-align:center;
}

/*--------------------------------------------------*/
/*               Ruler Formatting                   */
/*--------------------------------------------------*/
hr.plaza {
	color: #575391;
	size: 1;
	align: center;
	width: 100%;
}

hr.plaza3 {
	color: #575391;
	size: 3;
	align: center;
	width: 100%;
}

/*--------------------------------------------------*/
/*                  Menu Formatting                 */
/*--------------------------------------------------*/
div#menubar {text-align:left; border-bottom: 2px solid #6b758c; width: 920px; padding: 0px 0px 0px 80px; background-color: #575391; height:22px;}
div#nav {float: left; margin: 1px 0 0 7em; background: #575391; border: 0px solid #AAA;}

div#nav a {font-family: "arial", helvetica, sans-serif, comic sans ms; text-decoration: none; font-style:normal; font-weight:bold; color: #FFFFFF;}
div#nav ul a:hover, ul a:visited, ul a:active {color: #575391;}
div#nav li a {display: block; padding: 0.1em 0 0.25em 0.5em; text-decoration: none;}

div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 7em; line-height: 1.5em;}
div#nav li li {border-left: 5px solid #938094;}

div#nav li a:hover, li:hover, li.submenu:hover {background-color: #b4b4b4;}

div#nav ul {margin: 0; padding: 0; background: #575391; border: 1px solid #575391; border-width: 0 0px;}
div#nav ul a {width: auto;}
div#nav ul ul {position: absolute; display: none;}
div#nav ul ul li {border-bottom: 0px solid #575391;}

/*----   Width of the column    ---------*/
div#nav ul.level2-hobby li {width: 7.5em;}
div#nav ul.level2-weblib li {width: 10em;}
div#nav ul.level2-travel li {width: 11em;}

div#nav ul.level3-hobby li {width: 8em;}
div#nav ul.level3-career li {width: 16em;}
div#nav ul.level3-weblib li {width: 8em;}
div#nav ul.level3-ict li {width: 10.5em;}
div#nav ul.level3-community li {width: 12.5em;}

div#nav ul.level4-weblib li {width: 9em;}
div#nav ul.level4-ict li {width: 9em;}

/*----          Sub-menus       ---------*/
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level1 li.submenu:hover ul.level2-hobby,
div#nav ul.level1 li.submenu:hover ul.level2-weblib,
div#nav ul.level1 li.submenu:hover ul.level2-travel,

div#nav ul.level2 li.submenu:hover ul.level3,
div#nav ul.level2 li.submenu:hover ul.level3-career,
div#nav ul.level2-weblib li.submenu:hover ul.level3-weblib,
div#nav ul.level2-weblib li.submenu:hover ul.level3-ict,
div#nav ul.level2-weblib li.submenu:hover ul.level3-community,
div#nav ul.level2-hobby li.submenu:hover ul.level3-hobby,
div#nav ul.level2-weblib li.submenu:hover ul.level3-history,

div#nav ul.level3-hobby li.submenu:hover ul.level4-holiday,
div#nav ul.level3-weblib li.submenu:hover ul.level4-weblib,
div#nav ul.level3-ict li.submenu:hover ul.level4-ict,
div#nav ul.level3-community li.submenu:hover ul.level4-community,
div#nav ul.level3 li.submenu:hover ul.level4 {display:block;}

div#nav ul.level2 {top: 1.8em; left: -1px; border-top: 2px solid #575391;}
div#nav ul.level2-hobby {top: 1.8em; left: -1px; border-top: 2px solid #575391;}
div#nav ul.level2-weblib {top: 1.8em; left: -1px; border-top: 2px solid #575391;}
div#nav ul.level2-travel {top: 1.8em; left: -1px; border-top: 2px solid #575391;}

div#nav ul.level3 {top: 3px; left: 7em; border-top: 0px solid #575391;}
div#nav ul.level3-career {top: 3px; left: 7em; border-top: 0px solid #575391;}
div#nav ul.level3-hobby {top: 3px; left: 7.5em; border-top: 0px solid #575391;}
div#nav ul.level3-weblib {top: 3px; left: 10em; border-top: 0px solid #575391;}
div#nav ul.level3-ict {top: 3px; left: 10em; border-top: 0px solid #575391;}
div#nav ul.level3-community {top: 3px; left: 10em; border-top: 0px solid #575391;}
div#nav ul.level3-history {top: 3px; left: 10em; border-top: 0px solid #575391;}


div#nav ul.level4 {top: 3px; left: 7em; border-top: 0px solid #575391;}
div#nav ul.level4-ict {top: 3px; left: 10.5em; border-top: 0px solid #575391;}
div#nav ul.level4-weblib {top: 3px; left: 8em; border-top: 0px solid #575391;}
div#nav ul.level4-community {top: 3px; left: 12.5em; border-top: 0px solid #575391;}