/* 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/flag.png");
  background-position: top;
  background-repeat: no-repeat;
}

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

a#flag:active {
  background-position: bottom;
}
/* Thai flag */
a#flag_th {
  display: block;
  position: absolute;
  left: 280px;
  top: 8px;
  width: 100px;
  height: 15px;
  background-image: url("../graphics/thai_flag.png");
  background-position: top;
  background-repeat: no-repeat;
}

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

a#flag_th: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;
}

/* Make the blue links large */

a.blue_links {
  display: block;
  position: absolute;
  font-size: 18px;
}

/* position the blue nav links */
#cool24 {
  top: 5px;
  right: 250px;
}

#global24 {
  top: 43px;
  right: 175px;
}

#jet8news {
  top: 80px;
  right: 90px;
}

/* create a class for the grey links */

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;
}

/* position the grey links */
#contact_info {
  top: 110px;
  right: 0;
  background-image: url("../graphics/contact_info_button.png");
  background-position: top;
  background-repeat: no-repeat;
}

#contact_info:hover {
  background-position: bottom;
}

#contact_info:active {
  background-position: bottom;
}

#investor_info {
  top: 130px;
  right: 0;
  background-image: url("../graphics/investor_info_button.png");
  background-position: top;
  background-repeat: no-repeat;
}

#investor_info:hover {
  background-position: bottom;
}

#investor_info:active {
  background-position: bottom;
}

#employment {
  top: 150px;
  right: 0;
  background-image: url("../graphics/employment_button.png");
  background-position: top;
  background-repeat: no-repeat;
}

#employment:hover {
  background-position: bottom;
}

#employment:active {
  background-position: bottom;
}

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

#mondeSelection {
  top: 192px;
  right: 0;
  background-image: url("../graphics/mondeSelection_button.png");
  background-position: top;
  background-repeat: no-repeat;
}

#mondeSelection:hover {
  background-position: bottom;
}

#mondeSelection:active {
  background-position: bottom;
}

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

#cform {
  top: 173px;
  right: 0;
  background-image: url("../graphics/cool24_form_button.png");
  background-position: top;
  background-repeat: no-repeat;
}

#cform:hover {
  background-position: bottom;
}

#cfrom:active {
  background-position: bottom;
}

/* 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: 90px 0 20px 100px; border: 4px solid; padding: 10px;
  border-color: #BFDFF6;
  background-color: #FFFFFF;
  background-image: url("../graphics/cool24_top_div_bg.png");
  background-position: top left;
  background-repeat: no-repeat;
  position: relative;
  width: 700px;

}

/* hack alert! the height of this list determines the space
between the 9 steps and JET8's 3 steps */

ol#nine_steps {
  height: 230px;
  position: relative;
  left: -9999em;
}

p.slim {
  width: 400px;
}

a#cool24_one_two_three {
  display: block;
  width: 500px;
  height: 33px;
  position: relative;
  left: 90px;
  background-color: transparent;
  background-image: url("../graphics/cool24_one_two_three.png");
  background-position: top;
  background-repeat: no-repeat;
}
  
#cool24_one_two_three:hover {
  background-position: bottom;
}

#cool24_one_two_three:active {
  background-position: bottom;
}

img#cool24_no_baai {
  position: relative;
  left: 90px;
}

/* the bottom half of the upper div */

div#graph_bg {
  margin: 0; border: 0; padding: 0;
  width: 700px;
  height: 282px;
  background-color: #FFFFFF;
  background-image: url("../graphics/graph_bg.png");
  background-position: top left;
  background-repeat: no-repeat;
}

ol#wariai {
  position: relative;
  left: -9999em;
}

/* the bottom div */

div#cool24_bottom_div {
  margin: 0 0 20px 200px; border: 4px solid; padding: 10px;
  border-color: #C8C8C8;
  background-color: #FFFFFF;
  position: relative;
  width: 700px;
}

#cool24_bottom_div ol {
  line-height: 20px;
}

/* .cool24_table - takes advantage of all the tables being in cool24_bottom_div */

#cool24_bottom_div table.cool24_table { /* i.e. all tables of the class .cool24_table within the id cool24_bottom_div */
  border: 0;
  table-layout: auto;
  empty-cells: show;
}

#cool24_bottom_div td {
  border: 1px solid #AAAAAA; padding: 2px;
  width: 225px;
  text-align: center;
  vertical-align: middle;
}

#cool24_bottom_div th {
  border: 1px solid #AAAAAA; padding: 2px;
  width: 675px;
  text-align: center;
  vertical-align: middle;
  background-color: #AAAAAA;
  font-weight: bold;
}

#cool24_bottom_div td.table_heading {
  background-color: #AAAAAA;
  font-weight: bold;
}