/* The main site uses the html tag to set the background for the entire page (underneath the content area).
   So if you need to give the sponsor page a different background, 
   then override the background -- and only the background! -- here.
   */

html
{
  /* background: blue url(images/cde_bg_lightpink.gif); */
}

/* If you give the sponsor page a different background, you may also want to give the #header block 
   a white background here to avoid a narrow strip of color between the header image and the menu bar. 
   */

#header
{
  /* background: white; */
}


/* The sponsorPage id wraps the content area of the page. 
   This replaces the #content div from a normal page. 
   By default we mostly replicate the #content CSS, but with a few differences.
   Because the sponsor nav bar needs to fill the whole top/bottom, we remove all padding.
   */

#sponsorPage
{
  margin: 0;
  padding: 0;
  background: white;
}



/* MENU */

/* The red menu/footer can look garish next to some sponsor backgrounds. 
   So by default, we recolor the menus grey. If you really want red menus, delete this block. 
   */

div#menubar_sub { background: #888888; }
ul#menu_main li.selected { background: #888888; }
div#menubar_sub.hovered { background: #c8c8c8; }
ul#menu_main li.hovered { background: #c8c8c8; }
ul#menu_main li a:link, ul#menu_main li a:visited { color: black; }
#footer { background: #888888; }


/* SPONSOR NAV */

/* The sponsor nav are the dark grey bars on the top and bottom of each sponsor page. 
   They tend to be identical across all sponsor pages, so generally you only need to change the links. 
   Note that images are used for the rounded ends and background shading. */

.sponsorNavLeft,.sponsorNavRight
{
  float: left;
  width: 5px;
  height: 41px;
}
.sponsorNavLeft { background: #000 url(images/nav_left_end.jpg) no-repeat; }
.sponsorNavRight { background: #000 url(images/nav_right_end.jpg) no-repeat; }

.sponsorNav
{
  background: #000 url(images/nav_bg.jpg) repeat-x;
  float: left;
  width: 870px;
  height: 31px;
  padding: 10px 0 0 20px;
  font-size: 85%;
  color: white;
}

.sponsorNav a { font-weight: bold; }
.sponsorNav a:link, .sponsorNav a:visited { color: #eee; }
.sponsorNav a:hover, .sponsorNav a:active { color: #ddd; }



/* The left and right columns sit side-by-side in the main content area. 
   You can put stuff above or below them if you need to, but most pages are fine with two columns.
   Adjust their widths here, but be aware that width + left/right padding + left/right margin has to be 
   less than the total width of the content area (which is 900px) or they won't float right. */

#leftColumn
{
  float: left;
  width: 525px;
  margin: 25px 0;
  padding: 0 15px 0 25px;
}

#rightColumn
{
  float: right;
  width: 300px;
  margin: 25px 0;
  padding: 0 25px 0 10px;
}


/* The callout is a generic colored box. Tweak it as you will. */

.sponsor_callout
{
  border: 1px solid black;
  background: #ccc;
  margin: 20px 10px;
  padding: 15px;
}


/* You may end up needing several differenly-styled or colored callouts. */

.sponsor_callout_two
{
  border: 1px dotted black;
  margin: 0;
  padding: 15px;
}


/* And you may well want to change link colors, especially in the callouts. */

.sponsor_callout a:link, .sponsor_callout a:visited { color: blue; }
.sponsor_callout a:hover, .sponsor_callout a:active { color: white; }


.tagline
{
  font-size: smaller;
  margin: 0;
  font-style: italic;
  font-weight: bold;
  padding: 0;
  padding-bottom: 2em;
}


h2
{
  font-size: larger;
}


.codesque
{
  font-family: courier new;
  font-weight: bold;
  font-size: large;
  color: blue;
  text-align: center;
}