@charset "UTF-8";
/* CSS Document */

/* THIS DOES NOT DISPLAY CORRECTLY IN DREAMWEAVER CS3 BUT DOES IN A BROWSER */

/* BEGIN MAJOR LAYOUT ELEMENTS */

html {
  margin: 0px;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: #ebf3db;
}

#header {
  display: block;
  height: 150px;
  padding: 0px;
  margin: 0px;
  background-color: #000000;
  color: #ffffff;
  overflow: hidden;
}

#footer {
  display: block;
  height: 48px;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  font-size: x-small;
  line-height: 4em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 20px 0px 0px 0px;
  padding: 0px;
}

/* Everything goes in the container. Unlike some of my other versions where I am doing sequential floating divs in absolute positions, this design features the left and/or right columns within the main contain container, floated and with margins set to push the text in the main body of the container away from them, toward the center. */

#container {
  position: relative;
  display: block;
  background: #ebf3db;
  border-left: 246px solid #ebf3db;
  /*border-right: 200px solid #ffffff;*/
  /*No right column in this version.*/
  overflow: visible;
}
/* The borders are a cheat: they define the area of the left and right columns (So you could, for example, use different background colors to define/fill those areas top to bottom with color if the left and right columns are taller than what's in the main content area, and push open its height.) The borders are also necessary; without them the layout of the left and right breaks. The hitches with using this technique are these: 1) the left and right columns are fixed-width only (or else they could bleed out of the border); 2) you have to apply padding to individual elements for or within each area, which is a little irritating--adding any padding at a container-level affects the left, throws things out of whack, etc. So this technique is not quite as simple as Stu Nichols states. The price you pay for the layout is some extra formatting.*/

#leftnav {
  float: left;
  position: relative;
  width: 246px;
  margin-left: -246px;
  /* This yanks the content backward, onto the container's border.*/
  padding-right: 30px;
  /* The extra 46 pixels are to accommodate the menu channel graphic. */
  background-image: url(../img/menu-channel.gif);
  background-position: right top;
  /*The div has been yanked backward 246, but I want the background pattern--the channel graphic--to start in the padding, after the edge of the menu text.*/
  background-repeat: no-repeat;
  display: inline;
  min-height: 600px;
  /* This min height is to accommodate the menu channel graphic. */
}

/* No right column in this version.*/

/* Placed within the container, this forces a break before the footer */
/* Note: #clear div retained for decorative footer-element.gif background */

#clear {
  clear: both;
  height: 72px;
  overflow: hidden;
  background-image: url(../img/footer-element.gif);
  background-repeat: no-repeat;
}

/* Container clearfix for float clearing */
#container::after {
  content: "";
  display: table;
  clear: both;
}

/* END MAJOR LAYOUT ELEMENTS */

/* BEGIN HEADER STYLES */

/* There is no text in the header div in this design. */

/* END HEADER STYLES */

/* BEGIN LEFTNAV STYLES */

/* Keep in mind that color is more or less defined by the border color set for the container, but a background image could be used here, or a background to text, etc.*/

#leftnav p,
#rightcol p {
  padding: 24px;
}

/* Navigation spacer */
#leftnav .nav-spacer {
  height: 24px;
}

/* Navigation list styles (semantic nav/ul/li structure) */
#leftnav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#leftnav > ul > li {
  padding-left: 24px;
  padding-bottom: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: small;
  color: #005518;
  text-transform: uppercase;
}

#leftnav > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#leftnav > ul > li > ul > li {
  padding-left: 0;
  padding-bottom: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: x-small;
  font-weight: normal;
  color: #005518;
  text-transform: uppercase;
}

#leftnav > ul > li.last-in-section {
  margin-bottom: 12px;
}

/* Legacy dt/dd styles (kept for backwards compatibility during transition) */
#leftnav dt {
  padding-left: 24px;
  padding-bottom: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: small;
  color: #005518;
  text-transform: uppercase;
}

#leftnav dd {
  padding-bottom: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: x-small;
  font-weight: normal;
  color: #005518;
  text-transform: uppercase;
}

#leftnav a {
  display: block;
  text-decoration: none;
  padding-right: 36px;
  font-weight: bold;
}

#leftnav a:link {
  color: #005518;
  font-weight: bold;
}

#leftnav a:visited {
  color: #005518;
}

#leftnav a:hover {
  color: #cc0000;
  font-weight: bold;
}

/* This is for the main body too, or could be. */

.lastParaInListOrSection {
  margin-bottom: 12px;
}

/* END LEFTNAV STYLES */

/* BEGIN CONTAINER STYLES */

/* If that general 24px padding is applied to a container p, it creates a gap below the header! So, in addition I need a margin adjust: */

#container h1,
h2,
h3 {
  font-family: Arial, Helvetica, sans-serif;
  padding-left: 48px;
  padding-right: 48px;
}

#container p {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 24px;
  padding-left: 48px;
  padding-right: 48px;
  font-family: Garamond, "Adobe Garamond", Palatino, "Times New Roman", Times, serif;
  font-size: medium;
}

#container ol,
ul {
  margin-left: 48px;
  margin-right: 48px;
  margin-bottom: -2px;
}

#container li {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 6px;
  font-family: Garamond, "Adobe Garamond", Palatino, "Times New Roman", Times, serif;
  font-size: medium;
}

#container a:link {
  color: #005518;
}

#container a:visited {
  color: #005518;
}

#container a:hover {
  color: #cc0000;
}

/* Begin Image Styles for Container div */

/* This is meant to coordinate with images as a caption style. */
#container div.imageLeft,
div.imageRight,
div.imageCenter h4 {
  margin-top: 6px;
  color: #005518;
  font-size: x-small;
  font-weight: normal;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.imageRight h4 {
  padding-right: 24px;
  font-weight: normal;
}

#container div.imageLeft {
  float: left;
  padding-left: 48px;
  padding-right: 12px;
  margin-right: 24px;
  margin-bottom: 24px;
}

#container div.imageLeft img {
  border: 1px solid #000000;
  margin-top: 18px;
}

#container div.imageRight {
  float: right;
  width: 300px;
  padding-left: 48px;
  padding-right: 0px;
  margin-right: 0px;
  margin-left: 24px;
  margin-bottom: 12px;
  margin-top: 24px;
}

#container div.imageCenter {
  min-width: 400px;
  max-width: 600px;
  clear: both;
  padding-left: 48px;
  padding-right: 48px;
  margin-top: 24px;
  margin-bottom: 0px;
  /* The auto margins are a trick to center non-text content in the div. */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#container div.imageCenter img {
  border: 1px solid #000000;
}

/* End Image Styles for Container div */

.pageHeader,
.pageHeaderBlack {
  color: #cc0000;
  font-size: 1.3em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 24px;
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 0px;
}

.pageHeaderBlack {
  color: #000000;
}

.sectionHeader,
.sectionHeaderBlack {
  color: #cc0000;
  font-size: larger;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 24px;
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 0px;
}

.sectionHeaderBlack {
  color: #000000;
}

.subHeader,
.subHeaderRed {
  font-size: medium;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 24px;
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 0px;
}

.subHeaderRed {
  color: #cc0000;
}

.subHeaderLineBreak {
  font-size: medium;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 24px;
  padding-bottom: 0px;
}

#callout,
#callout2 {
  float: right;
  width: 200px;
  padding: 12px;
  margin: 24px;
  margin-right: 48px;
  background-color: #cde1a2;
  font-size: small;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font: Arial, Helvetica, sans-serif;
  color: #005518;
  line-height: 2em;
  overflow: hidden;
  background-image: url(../img/callout-background.gif);
}

#content {
  /* This is an attempt to appease Internet "We don't need no stinkin' W3C!" Explorer 7. */
  /* However, it didn't seem to have an effect. */
  vertical-align: top;
  margin-top: 0px;
  padding-top: 0px;
}

/* BEGIN SPECIAL STYLES TO ADAPT NEWSENGINE */
/* The site's CSS already uses style names that are convenional throughout Clark School sites. These styles are specifically designed to adapt the dynamic code generated by the newsengine components to the look of this site. All PHP includes for the newsengine will be contained in their own div called "news " or "newsStory" or "newsSearch" on the pages in question. */

/* News home */

/* Bari believes that the imported news include tables are wrapping to below the left (menu) column in IE. If correct--and it seems likely, this is wat's going on: The <div> holding the news in CSS is set to be fluid (no specific width). Now, Firefox and other browsers correctly interpret the "directions"--"This news table needs to be 100% of the width of what it's in; therefore it is the width of the fluid <div> at any given time, whether that's 400 pixels or 800 pixels."  IE is apparently looking too many levels up, at the "parent" <div>, the "wrapper" that keeps everything together, as it's set to 100% or something like that. Either that or it's projecting an inherited width onto the content <div>, even though it's not set to inherit. I tried, several times, putting the include inside a table, inside other divs, etc. all set with explicit width instructions, and IE still messed up. Bari tried a variation of the code where she set the include table to a fixed width, which helped in IE, but in Firefox 3 Mac, the table was  bumped way down the page (below the menu) unless the browser window was open wide enough to accommodate, and we can't predict how large or small people will make their browser windows...which is the whole point of doing a fluid or semi-fluid design in the first place! */

#news {
  /* This is an attempt to appease Internet "We don't need no stinkin' W3C!" Explorer 7. */
  /* position: relative; */
  /* top: 0px; */
  /* margin-top: 0px; */
  /* Using absolute hiked it up way too far...because the Page Header and the line of text below it are not part of the include.*/
  /* Maybe try absolute top with a margin...? */
  /* Tricky as type changes...must be in ems, I guess, or percent. */
  /* This breaks it and pulls the table over the rest of the page, but the ems thing worked. */
  /* Tried position relative with tiny top margin...nope. */
  /* Next: tried putting the header and one line of text in the news div, and using positioning. */
  /* That should have worked, but it created the gap in Firefox...and had no effect in IE7. */
  /* In fact, now I remember why I put teh text outside of the news div...if I don't the gap appears in Firefox. */
  margin-top: 0px;
  vertical-align: top;
  padding-top: 0px;
}

#news table {
  margin-top: 0px;
  margin-left: 48px;
  margin-right: 48px;
  vertical-align: top;
  /* Next attempt: apply positioning to the table. */
  /* position: absolute; */
  /* top: 0px; */
  /* position alone just yanks it to the top, so I have to try to replace the header and other text in the div with it. */
  /* Nope, duh...the positioning effects the table, but not the text; overlap results, also on bottom. */
  /* clear: both; */
  /* adding clear doesn't help with overlap with lower graphic. */
}

#news table p.subHeader {
  font-size: medium;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 0px;
  padding-top: 0px;
}

/* News Search */
/* Another external piece of code with its own settings/structure, not quite the same as the others. */
/* For example, styling that is applied to p on the news home is applied to a span here. */

#newsSearch table {
  margin: 0px;
  padding: 0px;
  vertical-align: top;
}

#newsSearch form {
  margin-top: 0px;
  margin-bottom: 0px;
}

#newsSearch table tr td p span .subHeader {
  font-size: medium;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

/* News Story */
/* NOTE: While making the text appearance consistent with other styles, I was able to, or had to, zero out most of the padding and margins because the special news div is already inside a div with those attributes applied. */

/* NOTE: The news story include contains a much more complicated, nested table, so its own styles were required. */

#newsStory {
  /* This is an attempt to appease Internet "We don't need no stinkin' W3C!" Explorer 7. */
  vertical-align: top;
  margin-top: 0px;
  padding-top: 0px;
  /* Doesn't help in IE */
}

/* ===================!!!!!=================== */

#newsStory table.containerTable {
  /* Dale made a version of the news story tacle include where all the elements are tagged. This is yet another attempt to force the table containing the story to do what it should in IE. */
  /* THIS SEEMS TO BE THE FIX--CONFIRMED WORKING IN IE7 XP AND VISTA. */
  width: inherit;
  clear: none;
  vertical-align: top;
  margin-top: 0px;
  padding-top: 0px;
}

/* ===================!!!!!=================== */

#newsStory p.pageHeader {
  /* Make consistent with other page headers */
  color: #cc0000;
  font-size: 1.3em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
}

#newsStory table {
  margin-top: 4px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;
  vertical-align: top;
  /* float: left; */
  /* This fixes it for IE, but breaks it in Firefox etc. The problem is it applies to all tables in the cascade, and the news story is in a table. In Bentley's personal site, Dale added an ID to the image table--but only in that code, not universally...*/
  /* Next: positioning. */
  /* position: absolute; */
  /* top: 0px; */
  /* mangles nested tables. */
  /* I need Dale's help and Microsoft's collective head on a platter. */
}

#newsStory table p {
  /* Make consistent with paragraph type on site. */
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 12px;
  padding-top: 12px;
  /* This is 12 instead of 24 because Dale's code generates extra p tags.
	Behavior may vary across browsers. */
  padding-left: 0px;
  padding-right: 0px;
  font-family: Garamond, "Adobe Garamond", Palatino, "Times New Roman", Times, serif;
  font-size: medium;
}

#newsStory table#imageTable .caption {
  /* This provides a caption style specifically for the news photo. */
  margin-top: 6px;
  color: #005518;
  font-size: x-small;
  font-weight: normal;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

#newsStory .rightHeader {
  /* Used for subheaders in side bar. */
  /* Make relatively consistent with top-level menu eaders */
  padding-left: 9px;
  padding-right: 9px;
  padding-bottom: 6px;
  background-color: #cde1a2;
  font-size: small;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 12px;
  color: #005518;
  text-transform: uppercase;
}

#newsStory .caption4 {
  /* Used for current news story links in side bar. */
  /* Make relatively consistent with 2nd-level menus, plus add background.*/
  padding-left: 9px;
  padding-right: 9px;
  padding-bottom: 6px;
  margin-left: 12px;
  background-color: #cde1a2;
  font-family: Arial, Helvetica, sans-serif;
  font-size: x-small;
  /* font-weight: bold; */
  color: #005518;
  text-transform: uppercase;
}

#newsStory .caption4 a {
  /* Remove underline from Current Headlines sidebar only; make area clickable. */
  display: block;
  text-decoration: none;
}

#newsStory table p.caption {
  /* Make consistent with image div h4. */
  margin-top: 6px;
  margin-botom: 6px;
  color: #005518;
  font-size: x-small;
  font-weight: normal;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* END SPECIAL STYLES TO ADAPT NEWSENGINE */

/*END CONTAINER STYLES */

/* BEGIN UTILITY CLASSES */

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Skip Link - Accessibility */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: #006622;
  color: #ffffff;
  padding: 12px 24px;
  z-index: 1100;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #cc0000;
  outline-offset: 2px;
}

/* Visually Hidden - For screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* END UTILITY CLASSES */

/*BEGIN RIGHTCOL STYLES */

#rightcol p {
  margin-left: 24px;
  margin-right: 0px;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 12px;
  background-color: #dddddd;
  font-size: smaller;
  font-family: Arial, sans-serif;
}

#rightcol p.nobg {
  margin-left: 24px;
  margin-right: 0px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 12px;
  background-color: #ffffff;
  font-size: smaller;
  font-family: Arial, sans-serif;
}

/* The following can be consolidated later: */

#rightcol .rightColHeader,
.rightColHeaderBlack {
  color: #cc0000;
  font-size: small;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

#rightcol .rightColHeaderBlack {
  color: #000000;
}

#rightcol .rightColsubHeader {
  font-weight: bold;
}

#rightcol .rightColsubHeaderRed {
  font-weight: bold;
  color: #cc0000;
}

/* BEGIN FOCUS STYLES - Accessibility */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid #005518;
  outline-offset: 2px;
}

#leftnav a:focus {
  outline: 2px solid #005518;
  background-color: #ffffff;
}

.hamburger:focus {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

#footer a:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* END FOCUS STYLES */

/* BEGIN FOOTER STYLES */

#footer a:link {
  color: #ebf3db;
}

#footer a:visited {
  color: #ebf3db;
}

#footer a:hover {
  color: #ffffff;
}