@CHARSET "UTF-8";

/* WEBPAGE */
/* Webpage Layout Widths, Margins and Paddings (including Alignment) */
body { margin: 0; padding: 0; }
#topnav, #header, #container_home, #container, #footer2 { width: 940px; margin: 0 auto; }
#topnav { margin-top: 1em; }
#left_column, #right_column { width: 250px; }
#middle_column { width: 380px; }
#left_column, #middle_column, #right_column { padding: 10px; }
#leftbar {
  width: 200px; /* Width of Container Background Image */
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 1em;
  padding-bottom: 1em;
}
#content {
  width: 700px; /* Width = Container Width - Leftbar (Width - Margin-Left - Margin-Right) - Margin-Left - Margin-Right */
  margin: 0 10px 0 230px; /* Margin-Left = Leftbar (Width + Margin-Left + Margin-Right) + Content Margin-Left */
  padding-top: 1em;
  padding-bottom: 1em;
}
#footer2 { margin-bottom: 1em; }

/* Webpage Placement */
#left_column, #middle_column, #right_column, #leftbar { float: left; }
#footer { clear: left; }

/* Alignment */
/* See above for Webpage Layout Alignment */
#topnav { text-align: right; }
#footer, #footer2 { text-align: center; }

/* Backgrounds */
body { background-color: #c8daff; /* Light Blue */ }
#left_column { background-color: lightblue; }
#middle_column { background-color: lightgreen; }
#right_column { background-color: #CC66FF; }
#container {
  background-color: white;
  background-image: url(/IMAGES/CSS/LeftBarBackground.jpg); /* Gold KCL Watermark */
  background-repeat: repeat-y;
}
#topnav { background-color: #275886; /* Lighter Blue */ }
#footer { background-color: #173551; /* Darker Blue */ }
#header { background-color: #FF6333; /* Dark Orange */ }

/* Fonts */
body {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}
h1, h2, h3 {
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  color: #204663;
}
h1 {
  padding-top: 0px;
  font-size: 22px;
  border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: #204663;
}
h2 {
  margin-bottom: 0px;
  padding-top: 10px;
  padding-bottom: 0px;
  font-size: 18px;
  border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #204663;
}
h3 {
  margin-bottom: 0px;
  padding-top: 10px;
  padding-bottom: 0px;
  font-size: 16px;
}
h4, h5 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: normal;
  color: #000033;
}
h4 { font-weight: bolder; }
p, li, label, span, div { font-size: 14px; }

label { font-weight: bold; }

a:link { color: #000044; }
a:visited { color: #333333; }
a:hover { color: #cc0000; }
a:active { color: #cc0000; text-decoration: none; }

a img { text-decoration: none; border: 0; }

.quote { font-size: 12px; }
.error, .prerequisite { color: red; }
.required, .note { color: blue; }
.centered { text-align: center; }

#site_map ul { list-style-type: none; margin: 1em; padding: 0; text-indent: -1em; }
.no_bullets { list-style-type: none; margin: 0 0 0 1em; padding: 0; text-indent: -1em; }

/* Deprecate in favor of <h1> and <h2> */
.Header, .subhead { font-family: Arial, Helvetica, sans-serif; color: #400922; }
.Header { font-size: 28px; letter-spacing: .5px; }
.subhead { font-size: 21px; letter-spacing: .1px; }
/* Deprecate in favor of <h3> and <h4> */
.subsubstrong, .subsubhead {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: normal;
  color: #000033;
}
.subsubstrong { font-weight: bolder; }

/* Leftbar */
#leftbar p { font-size: 13px; margin-top: 0; }
#leftbar img { width: 150px; padding-left: 25px; padding-bottom: 15px; }
#leftbar ul { list-style-type: none; margin: 0 0 1em 1em; padding: 0; text-indent: -1em; }
#leftbar li { font-size: 13px; }
#leftbar .leftbar_header, .donate_button {
  font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 16px;
  color: #B11E24; letter-spacing: 0.1em;
  border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #B11E24;
  border-top-width: 1px; border-top-style: solid; border-top-color: #B11E24;
  padding-top: 2px; margin-top: 0px;
  margin-bottom: 1em;
  display: block;
  text-align: center;
}
#leftbar .leftbar_header a, .donate_button a { text-decoration: none; color: #B11E24; display: block; }
#leftbar .leftbar_header a:hover, .donate_button a:hover { text-decoration: none; color: #600; }

/* Top Navigation */
#topnav p { padding: 0 5px; margin: 0; font-size: 13px; letter-spacing: 0.1em; }

/* Footer */
#topnav p img, #footer p img { vertical-align: middle; }
#footer p { padding: 2px 9px; margin: 0; letter-spacing: 0.1em }
#topnav p, #topnav p a, #topnav a:link, #footer p, #footer a:link { color: #ffd700; /* Gold */ }
#topnav a, #footer a { text-decoration: none; }
#footer a:visited { color: #778899; }
#topnav a:hover, #footer a:hover { color: #b8860b; }
#topnav a:active, #footer a:active { color: #ff0000; }

/* Footer 2 */
#footer2 p { font-size: 10px; color: #000080; /* Dark Blue */ }
#footer2 img { border: 0px; }


/* FORMS */
/* Fieldsets */
fieldset, legend { margin: 0; }
fieldset { margin-bottom: 1em; }
fieldset fieldset fieldset { margin-left: 20px; margin-bottom: 0; }
fieldset p { margin-top: 0; }

fieldset { padding: 10px; border: 1px solid #204663; }
fieldset fieldset { padding: 0px; border: none; font-size: 14px; font-weight: bold; }

legend { padding: 0.2em 1em; color: white; background: #204663; border: 1px solid #204663; }
fieldset fieldset legend { margin-bottom: 0; padding: 0; color: black; background: none; border: none; }

/* Forms */
.form_display, .textfield, .dropdown, .textarea, .inlinefields, .file, .buttons { margin-bottom: 1em; }
fieldset fieldset .textfield { margin-bottom: 0; }
.textfield input, .dropdown select, .textarea textarea, .file input { display: block; }
.form_display label, .radio input, .checkbox input { margin-right: 5px; }
.textfield input, .file input, .dropdown select, .textarea textarea { width: 400px; }
.login { width: 250px; }
.login .textfield input { width: 250px; }
.leftbar_login { width: 150px; }
.leftbar_login .textfield input { width: 145px; }
textarea { height: 6em; }
.buttons { text-align: center; }


/* HOME */
#home h1 { border-bottom-style: none; text-align: center; }
#home h2 { border-bottom-style: none; text-align: center; padding-top: 0px; }
#programs_right_column .program { overflow: auto; }
#programs_right_column .program { padding-top: 10px; padding-bottom: 10px; }
#programs_right_column .icons img { width: 20px; height: 20px; }
#programs_right_column .program .details .name { font-size: 18px; }
#programs_right_column .program .details .name a { text-decoration: none; }
#programs_right_column .program .details .teacher { color: #400922; }
#programs_right_column .program .picture { float: right; }
#programs_right_column .program .picture img { width: 75px; }
#programs_right_column .program .program_push { clear: both; }


/* LOGIN */
#login ul { list-style-type: none; padding-left: 0; }


/* PROGRAMS */
#programs .program { padding-top: 10px; padding-bottom: 10px; }
#programs .child_program { padding-top: 5px; padding-bottom: 5px; }
#programs .picture, #programs .details { float: left; }
#programs .program_push { clear: both; }
#programs .program, #programs .child_program { overflow: auto; }
#programs .picture { width: 100px; padding-right: 5px; }
#programs .program .details { width: 590px; padding-left: 5px; }
#programs .child_program .details { width: 555px; padding-left: 40px; }
#programs .picture img { width: 100px; }
#programs .icons img { width: 20px; height: 20px; }
#programs .program .name, #programs .details .name { padding-right: 0.5em; font-size: 20px; }
#programs .child_program .name { padding-right: 0.5em; font-size: 16px; }
#programs .name a { text-decoration: none; }
#programs .teacher { color: #400922; }



/* PROGRAM DETAILS */
#program #title h1, #program #title h2 { border-bottom-style: none; }
#program #title h2 { padding-top: 0px; }

/* Promotional Boxes */
.promotional_box_outer { padding-top: 15px; }
.promotional_box {
  margin: 0px 40px;
  height: 60px;
  width: 375px;
  border: 1px solid #999999;
  padding: 15px;
  background-image: url(/IMAGES/CSS/mukpo_box_bgrnd.gif);
  background-repeat: repeat-x;
  background-color: #F2F2F2;
}
.promotional_box img {
  height: 60px;
  width: 60px;
  float: left;
  margin-right: 16px;
  border: none;
}
.promotional_box_text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: italic;
  color: #8F8F8F;
  font-weight: bold;
  line-height: 18px;
}
.promotional_box_text a {
  font-weight: bold;
  color: #8a2200;
  font-style: normal;
  text-decoration: none;
}
.promotional_box_text a:visited { color: #666666; }
.promotional_box_text a:hover { text-decoration: underline; }

#prerequisite p, #prerequisite ul, #prerequisite ol, #preauthorization p { color: red; }

table.transactions { padding-bottom: 1em; }
table.transactions tr td, table.transactions tr th { font-size: 13px; }
table.transactions tr.subtotal td, table.transactions tr.total td { font-weight: bold; }
table.transactions tr.subtotal td { border-top: 1px solid black; }
table.transactions tr.total td { border-top: 3px double black; border-bottom: 3px double black; }

table.member_programs tr td, table.member_programs tr th { font-size: 13px; }

table.staff_directory tr td, table.staff_directory tr th { font-size: 13px; }
table.staff_directory { border-collapse: collapse; margin-bottom: 1em; }
table.staff_directory, table.staff_directory th, table.staff_directory td { border: 1px solid black; }
table.staff_directory th { padding-top: 0.5em; padding-bottom: 0.5em; }
table.staff_directory th, table.staff_directory td { padding-left: 0.5em; padding-right: 0.5em; }
table.staff_directory th, table.staff_directory tfoot td { background-color: lightgrey; font-weight: bold; }

table.ride_board tr td, table.ride_board tr th { font-size: 11px; }
table.ride_board { border-collapse: collapse; margin-bottom: 1em; }
table.ride_board, table.ride_board th, table.ride_board td { border: 1px solid black; }
table.ride_board th { padding-top: 0.5em; padding-bottom: 0.5em; }
table.ride_board th, table.ride_board td { padding-left: 0.5em; padding-right: 0.5em; }
table.ride_board th, table.ride_board tfoot td { background-color: lightgrey; font-weight: bold; }

/* DONATIONS */
.projects { color: #ec8200; font-weight: bolder; }
.emphasis { color: #bb0100; font-weight: bolder; }
.emphasis a { text-decoration: none; }
.emphasis a:link { color: #bb0100; }
.emphasis a:visited { color: #5B2002; }
.emphasis a:hover { color: #642c00; }
.donations_needed, .donations_met {
  margin-top: 0px;
  padding-top: 0px;
  font-size: 16px;
  font-weight: bold;
  font-variant: small-caps;
  letter-spacing: .1em;
}
.donations_needed { color: #B02020; }
.donations_met { color: #360; }
