/* General site-wide formatting */

body {
  margin: 0; padding: 0; border: 0;
  background-color: #FFFFFF;
  background-image: url("../graphics/background.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: arial, sans-serif;
  color: #323232;
  font-size: 12px;
}

img {
  /* keep link anchor images from getting an ugly border */
  margin: 0; padding: 0; border: 0;
}

p {
  /* prevent Firefox's enormous paragraph margins */
  margin: 10px; padding: 0; border: 0;
  line-height: 20px;
}

p.borderless {
  /* a borderless paragraph comes in handy */
  margin: 0; border: 0; padding: 0;
}

/* general-purpose classes */

.invisible {
  display: none;
}

.right {
  text-align: right;
}

.dark_blue {
  color: #1063A8;
}

.dark_grey {
  color: #646464;
}

/* make the top link invisible to everything but basic browsers - invisible to print */

.top_link {
  display: none;
}

/* general link styles for the site */
a {
  font-weight: bold;
  text-decoration: none;
  color: #1063A8;
}

a:hover { color: #78BEF2; }
a:active { color: #78BEF2; }

/* the nav bars and logo */

#logo {
  margin: 0; border: 0; padding: 0;
  position: relative;
  width: 160px;
  height: 40px;
  left: 5px;
  top: 5px;
}

/* put everything in place for the flag */
a#flag {
  display: block;
  position: absolute;
  left: 180px;
  top: 8px;
  width: 100px;
  height: 15px;
  background-image: url("../graphics/japanese_flag.png");
  background-position: top;
  background-repeat: no-repeat;
}

a#flag:hover {
  background-position: bottom;
}

a#flag:active {
  background-position: bottom;
}

/* create a nav for the links and block image off to the right */
#blue_nav {
  margin: 0; border: 0; padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 350px;
  height: 300px;
  background-color: transparent;
  background-image: url("../graphics/blocks.png");
  background-position: top right;
  background-repeat : no-repeat;
}


a.grey_links {
  display: block;
  position: absolute;
  margin: 0; border: 0; padding: 0;
  z-index: 2;
  width: 100px;
  height: 18px;
  background-color: #FFFFFF;
}

a.grey_links:hover {
  background-color: #646464;
}

a.grey_links:active {
  background-color: #646464;
}



/* page-specific formatting */

h1 {
  margin: 10px; padding: 0; border: 0;
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;
  color: #323232;
}

h2 {
  margin: 20px 0 10px 10px; padding: 0; border: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  color: #323232;
}

h3 {
  margin: 10px; padding: 0; border: 0;
  font-size: 14px;
  line-height: 18px;
  color: #323232;
}


h4 {
  margin: 10px; padding: 0; border: 0;
  font-weight: bold;
  font-size: 16px;
  line-height: 18px;
}

/* the top half of the top div */

div#top_div {
  margin-top: 30px;
  margin-left: 30px;
  border: 4px solid; padding: 10px;
  border-color: #BFDFF6;
  background-color: #FFFFFF;
  background-position: top left;
  background-repeat: no-repeat;
  position: relative;
  width: 390px;
}