/*
  application.css

  Created by Craig Mink on 2010-06-16.
  (c) Copyright 2010 Full Steam Marketing & Design. All rights reserved.

  First we import the tripoli style sheets for better defaults for all browers. IE is added
  with a conditional stylesheet on the layout page.

  Next we add the structure stylesheet for grid based layout. It can accomodate 12 and
  16 column layouts. It has the base rules for groups, columns, and left and right floats.

  The dev.css is development rules for us during development. It should be removed along with
  the dev directory after the site is finished.

  Next we set the rules we would like to override for this website. They should fall in the
  .content space to ensure proper scoping.

  Now we set the main structure for this site. Anything specific should go in this document,
  working from top to bottom, generic to specific including text, color and modifications to
  structure as necessary.
*/

/*  Import Default Rules
----------------------------------------------- */
@import url(tripoli.simple.css);
@import url(structure.css);

html {
  background: #000 url('design/ste-body-bkgd.jpg') no-repeat 50% 48px;
  min-width: 960px;
}


/*  Set Content Defaults
----------------------------------------------- */
.content {  /* default font */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #999;
  line-height: 1.6em;
  font-size: 14px;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { /* set header defaults */
  font-weight: normal;
  color: #ddd;
}
.content ul, .content ol { /* I like the list indents to be tighter */
  margin-left: 1.6em;
}
.content em, .content strong {
  color: #ddd;
  font-weight: normal;
}
.content a {
  color: #fbad00;
  text-decoration: none;
}
.content a em {
  color: #ffce61;
}
.content a:hover {
  text-decoration: underline;
}
.content blockquote {
/*  background-color: #111;*/
  margin-top: 1.6em;
  padding-right: 1.6em;
  font-size: 1em;
}
.content blockquote * {
  font-family: constantia, georgia, serif;
  margin-bottom: 1.2em;
  color: #999;
  font-size: 15px;
}
.content blockquote > *:first-child:before {
  content: "";
/*  content: "\201C";*/
  font-size: 1em;
  margin-left: -.62em;
  font-family: constantia, georgia, serif;
  padding-right: .2em;
  color: #444;
  line-height: 0;
}
.content blockquote > *:last-child:after {
/*  content: "\201D";*/
  content: none;
  font-size: 1em;
  color: #444;
}
.content acronym {
  border-bottom-color: #222;
  font-size: 100%;
  letter-spacing: .2em;
}
.content .note {
  font-size: 11px;
  line-height: 1.2em;
  margin: 0;
}

/* TODO: Check image parameters */
.content img {
  margin: .8em 0;
}
.content img.border {
  padding: 5px;
  border: 1px solid #222;
  margin: .3em 20px .3em 0;
}
.content img.left {
  margin: .4em 1.0em .4em 0;
}
.content img.right {
  margin: .4em 0 .4em 1.0em;
}

.content table, .content tr, .content td {
  border: 1px dotted #222;
}
.content form div {
  padding-bottom: 0;
}
.content form label {
  font-weight: normal;
}
.content input[type='text'], .content input[type='password'],
.content textarea {
  width: 98%;
  background-color: #181818;
  border: 1px solid #333;
  color: #eee;
}
.content textarea:focus, .content input[type='text']:focus,
.content input[type='password']:focus, .content select:focus {
  outline:2px solid #666;
  border-color: #888;
}
.content input[type='submit'] {
  background-color: #181818;
  border: 1px solid #282828;
  padding: 2px 8px;
  color: #ccc;
  /* CSS3 Properties */
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.content input[type='submit']:hover {
  border-color: #333;
  background-color: #222;
  color: #ddd;
}

/*  Error message handling
----------------------------------------------- */
.content .errorExplanation * {
  line-height: 1.2em;
  font-size: 12px;
  margin: 10px 0;
  color: #ddd;
}
.content .errorExplanation li {
  margin: 0 0 0 1.6em;
  padding: 0;
  line-height: 1.2em;
}
.content .errorExplanation h2 {
  background-color: #a00;
  color: #fff;
  font-size: 14px;
  text-transform: none;
  padding: .4em 10px;
  margin: 0;
}
.content .fieldWithErrors input,
.content .fieldWithErrors textarea {
  border: 1px solid #800 !important;
  background-color: #200 !important;
}


/*  Start site specific structure
----------------------------------------------- */
#wrapper {
  width: 960px;
  margin: 0 auto;
}


/*  Header
----------------------------------------------- */
#header {
  background: transparent none no-repeat top center;
  float: left;
  width: 960px;
  height: 250px;
  margin: 0;
}
#header .group {
  position: relative;
  height: 250px;
}
#header h1 {
  margin-bottom: .25em;
  margin: 9px 0 0;
  width: 160px;
  float: left;
}
#header h1 a {
  background: transparent url('design/ste-home-logo.png') no-repeat 30px 0;
  display: block;
  height: 160px;
  width: 160px;
  overflow: hidden;
  text-indent: -9999px;
  font-weight: normal;
  text-decoration: none;
}
#header h1 a:hover {
  text-decoration: underline;
}
#header .group p {
  position: absolute;
  z-index: 0;
  bottom: 10px;
  right: 40px;
  font-size: 24px;
  color: #fff;
  width: 650px;
  margin: 0;
  font-weight: 300;
  text-align: right;
  line-height: 1.1em;
  letter-spacing: .05ex;
  text-shadow: 1px 1px 0px #000;
}
#header p span {
  display: block;
  font-size: 16px;
  color: #fbad00;
}

/*  Section Specific Header Images
----------------------------------------------- */
.plan-your-visit-page #header { background-image: url('design/ste-hdr-visit.jpg'); }
.exhibitions-programs-page #header { background-image: url('design/ste-hdr-exhibitions.jpg'); }
.educational-resources-page #header { background-image: url('design/ste-hdr-education.jpg'); }
.become-a-donor-page #header { background-image: url('design/ste-hdr-donor.jpg'); }
.become-a-member-page #header { background-image: url('design/ste-hdr-member.jpg') }
.about-the-center-page #header { background-image: url('design/ste-hdr-about.jpg') }


/*  Navigation
----------------------------------------------- */
.content ul.navigation {
  list-style: none;
  margin: 0;
  padding: 0;
}
.content ul.navigation li {
  list-style: none;
/*  display: inline;*/
  margin: 0;
  padding: 0;
}

/*  Main Nav
----------------------------------------------- */
#nav {
  width: 791px;
  margin-left: 160px;
}
#nav div {
  background-color: #000;
  position: fixed;
  z-index: 1;
  width: 791px;
  top: 0px;
  float: left;
  padding-top: 15px;
  height: 42px;
}
#nav ul.navigation li {
  display: block;
  float: left;
}
#nav ul.navigation li a {
  background: transparent url('design/ste-menu-shadow.png') no-repeat -2px -2px;
  display: block;
  width: 93px;
  height: 26px;
  padding: 8px 10px;
  color: #eee;
  font-size: 12px;
  line-height: 1.1em;
  text-decoration: none;
  text-transform: uppercase;
}
#nav ul.navigation li a:hover {
  border-left: 0px solid #000;
}

/*  Sub Nav  */
#nav ul.navigation li ul {
  background-image: url('design/ste-menu-shadow.png');
  background-position: right top;
  background-repeat: no-repeat;
  position: absolute;
  top: 57px;
  width: 226px;
  display: none;
}
#nav ul.navigation li.sub:hover ul {
  display: block;
}
#nav ul.navigation li ul li {
  float: none;
}
#nav ul.navigation li ul li a {
  width: 206px;
  background: transparent !important;
  font-size: 11px;
  font-weight: normal;
  height: 12px;
  padding: 10px 10px 13px;
}
#nav ul.navigation li ul li a:hover {
  color: #333;
  background: transparent url('design/ste-menu-shadow.png') no-repeat 100% -470px !important;
}
#nav ul.navigation li.sub ul li.sub ul,
#nav ul.navigation li.sub li.sub:hover ul {
  display: none;
}

/*  Specfic Navigation Colors
----------------------------------------------- */
#nav #nv-home a {
  background: #000 url('design/ste-menu-home.png') no-repeat -10px 0%;
  width: 169px;
  height: 50px;
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
}
#nav #nv-home a:hover {
  background: #000 url('design/ste-menu-home.png') no-repeat -10px 100% !important;
  border: 0 none;
}
#nav #nv-plan-your-visit ul, #nav #nv-plan-your-visit a  {
  background-color: #5c5c5c;
  border-color: #5c5c5c;
  color: #f7b000;
}
#nav #nv-plan-your-visit a:hover {
  background-color: #424242 !important;
}
#nav #nv-exhibitions-programs ul {
  background-color: #89171a;
  border-left-color: #89171a;
}
#nav #nv-exhibitions-programs a {
  border-color: #89171a;
  background-color: #89171a;
  color: #f7b000;
}
#nav #nv-exhibitions-programs a:hover {
  background-color: #6b1215 !important;
}
#nav #nv-educational-resources ul {
  background-color: #fbad00;
  border-left-color: #fbad00;
}
#nav #nv-educational-resources a {
  border-color: #fbad00;
  background-color: #fbad00;
  color: #000;
}
#nav #nv-educational-resources a:hover {
  background-color: #da7f00 !important;
}
#nav #nv-educational-resources ul li a:hover {
  background-color: #eb8900 !important;
}
#nav #nv-become-a-member ul {
  background-color: #4a5400;
  border-left-color: #4a5400;
}
#nav #nv-become-a-member a {
  border-color: #4a5400;
  background-color: #4a5400;
  color: #f7b000;
}
#nav #nv-become-a-member a:hover {
  background-color: #343b00 !important;
}
#nav #nv-become-a-donor ul {
  background-color: #543400;
  border-left-color: #543400;
}
#nav #nv-become-a-donor a {
  border-color: #543400;
  background-color: #543400;
  color: #f7b000;
}
#nav #nv-become-a-donor a:hover {
  background-color: #3b2400 !important;
}
#nav #nv-about-the-center ul {
  background-color: #44227a;
  border-left-color: #44227a;
}
#nav #nv-about-the-center a {
  border-color: #44227a;
  background-color: #44227a;
  color: #f7b000;
}
#nav #nv-about-the-center a:hover {
  background-color: #361b61 !important;
}
#nav #nv-museum-store ul {
  background-color: #83298c;
  right: 0px;
}
#nav #nv-museum-store a {
  border-color: #83298c;
  background-color: #83298c;
  color: #f7b000;
}
#nav #nv-museum-store a:hover {
  background-color: #651f6b !important;
}

/*  Sub Navigation
----------------------------------------------- */
.content .subnav h3 {
  font-size: 15px;
  text-transform: uppercase;
  border-bottom: 1px dotted #333;
  padding-bottom: .25 em;
  margin-top: 1.75em;
  margin-right: 12px;
  text-align: right;
  font-weight: 300;
}
.content .subnav ul {
  margin: 0 12px 0 0;
}
.content .subnav ul li {
  list-style-type: none;
  margin: 1.75em 0 1.5em;
  padding: 0 0 0 0;
  color: #999;
  text-indent: 0;
  line-height: 1.1em;
  text-transform: uppercase;
  text-align: right;
  font-weight: 300;
}
.content .subnav ul li + li {
  margin: 1.5em 0;
}
.content .subnav span {
  margin-right: -12px;
  padding: .25em 12px .25em 0;
  background: transparent url('design/ste-nav-selected.png') no-repeat center right;
  display: block;
}
.content .subnav ul ul {
  margin-right: 0;
}
.content .subnav ul ul li {
  margin: .25em 0;
  font-size: 75%;
}
.content .subnav a {
/*  background-color: #222;*/
/*  outline: 1px solid #444;*/
  color: #888;
  display: block;
  padding: .25em 0;
}
.content .subnav a:hover {
  color: #ccc;
  text-decoration: none;
/*
  background: transparent url('design/ste-nav-selected.png') no-repeat center right;
  margin-right: -12px;
  padding-right: 12px;
*/
}
/*
.plan-your-visit-page ul.subnav li a { color: #5c5c5c; }
.exhibitions-programs-page ul.subnav li a { color: #89171a; }
.educational-resources-page ul.subnav li a { color: #da7f00; }
.become-a-member-page ul.subnav li a { color: #4a5400; }
.become-a-donor-page ul.subnav li a { color: #6D4100; }
.about-the-center-page ul.subnav li a { color: #5F3D9A; }
.museum-store-page ul.subnav li a { color: #83298c; }
*/


/*  Main Column Setup
----------------------------------------------- */

#body-content {
  float: left;
}
.content .col { padding: 0 20px; }


/*  Article Section
----------------------------------------------- */
.content h1.page-title {
  font-size: 300%;
  font-weight: 200;
  margin-top: .6em;
  margin-bottom: 0;
  color: #89171a; /* #5c5c5c; */
  text-transform: uppercase;
}
.plan-your-visit-page h1.page-title { color: #5c5c5c; }
.exhibitions-programs-page h1.page-title { color: #89171a; }
.educational-resources-page h1.page-title { color: #da7f00; }
.become-a-member-page h1.page-title { color: #4a5400; }
.become-a-donor-page h1.page-title { color: #6D4100; }
.about-the-center-page h1.page-title { color: #5F3D9A; }
.museum-store-page h1.page-title { color: #83298c; }

.content .article h1.page-title em {
  color: #89171a;
}
.content .article .directory p {
  margin-top: 0em;
  margin-right: 20px;
  width: 200px;
  float: left;
  line-height: 1.2em;
  font-size: 13px;
  height: 6em;
}
.content .intro {
  font-size: 130%;
  font-weight: 300;
  color: #83298c;
}
.content .intro em {
/*  color: #f71;*/
}
.content .intro strong {
/*  color: #fa3;*/
}
/*
.plan-your-visit-page .content table,
.plan-your-visit-page .content tr,
.plan-your-visit-page .content td {
  border: 0px none;
  padding: 0.4em 0;
}
*/
.plan-your-visit-page table#tickets {
  background-color: #0e0e0e;
  width: 80%;
}
.plan-your-visit-page table#tickets td {
  font-size: 120%;
  padding: 0.4em 0.8em;
}
.plan-your-visit-page table#tickets td + td {
  color: #999;
}
.plan-your-visit-page table#tickets td + td strong {
  color: #fff;
}

/*  Aside Section
----------------------------------------------- */
.aside {
  background: transparent url('design/ste-bkgd-dark.png') repeat;
}
.aside img {
  max-width: 220px;
}
.aside h2 {
  background-color: #361b61;
  color: #912C9A;
  font-size: 24px;
  margin-top: 20px;
  padding: .3em .4em;
  text-transform: uppercase;
}
.aside p {
  color: #777;
}
.aside p.intro {
  color: #83298c;
}


/*  Directions & Parking
----------------------------------------------- */
#directions-parking .aside {

}

/*  Calendar
----------------------------------------------- */
.article .calendar h2 {
  background-color: #361b61;
  color: #912C9A;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .1em;
  margin: 10px -10px 0;
  padding: .1em 10px;
  text-transform: uppercase;
  text-align: center;
}
.article .calendar h3 {
  background-color: #181818;
  margin: 0 -10px;
  padding: 10px;
  text-align: left;
}
.calendar .exhibits {
  margin-bottom: 20px;
}
.article .calendar img {
  max-width: 440px;
}
.calendar dt {
  border-top: 1px dotted #222;
  padding-top: 0.8em;
  margin-bottom: 0em;
  font-weight: normal;
  font-size: 140%;
}
.calendar dd {
  margin: 0.8em 0;
}
.calendar dd p {
  display: inline;
}
.calendar dl dt:first-child {
  border-top: none;
  padding-top: 0;
}

.calendar .event-date {
  font-size: 110%;
  margin-top: 0;
}
.calendar .event-time {
  margin-top: 0;
  margin-bottom: 0;
  color: #fff;
}
.calendar .event-location {
  margin-top: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.calendar p.event-location {
  display: inline;
}
.calendar p.event-date {
  margin-bottom: 0;
}
.calendar a.back {
  text-transform: uppercase;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
}

/* Footer
----------------------------------------------- */
#footer .navigation {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px dotted #181818;
  display: block;
  width: 760px;
  float: left;
}

#footer .navigation li {
  margin: 0;
  float: left;
  line-height: 1em;
}
#footer .navigation li + li {
  border-left: 1px dotted #222;
  padding-bottom: .1em;
}
#footer .navigation li a {
  font-size: 12px;
  text-transform: uppercase;
  padding: .2em .6em .2em 0;
  margin: 0;
}
#footer .navigation li + li a, #footer .navigation li span {
  padding: .2em .6em;
}
#footer p {
  margin-top: 1em;
  font-size: 10px;
  color: #555;
}
#footer p a { color: #777; }


/* CSS3 properties just for fun */

/*#nav, #nav ul.navigation li, #nav ul.navigation li a, #nav ul.navigation ul {*/
/*  -moz-border-radius: 4px;*/
/*  -webkit-border-radius: 4px;*/
/*}*/
#nav ul.navigation li a {
/*  text-shadow: 1px 1px 0px #800;*/
}
/*#nav ul.navigation li a:hover {*/
/*  text-shadow: 1px 1px 0px #eee !important;*/
/*}*/
#nav ul.navigation li a {
/*  text-shadow: 1px 1px 1px #333;*/
}
/*
#headline, #footer, .aside, .page-title {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}
*/
#nav #nv-about-the-center a {
/*  text-shadow: 1px 1px 1px #111;*/
}
#nav #nv-educational-resources a {
/*  text-shadow: 1px 1px 1px #fbad00;*/
}


/*  Home Page
----------------------------------------------- */
#home #header {
/*  background: transparent url('design/ste-home-hdr.jpg') no-repeat 50% 0;*/
  float: left;
  width: 960px;
  /*height: 340px;*/
  /*padding-top: 140px;*/
}
#home #nav div {
  background-color: transparent ;
  position: relative;
}
/*#home #header p#tagline {
  position: absolute;
  float: left;
  top: -50px;
  bottom: auto;
  font-size: 24px;
  color: #fff;
  width: 900px;
  font-weight: 300;
  text-align: right;
  line-height: 1.1em;
  letter-spacing: .05ex;
}
*/
#home #header p span {
  display: block;
  font-size: 16px;
  color: #fbad00;
}
#home #home-nav {
  margin-top: 24px;
  border-right: 1px solid #181818;
}
#home #home-nav li {
  font-size: 22px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .05ex;
  line-height: 1.6em;
}
#home #home-nav #visit a { color: #5c5c5c; }
#home #home-nav #participate a { color: #89171a; }
#home #home-nav #learn a { color: #da7f00; }
#home #home-nav #join a { color: #4a5400; }
#home #home-nav #support a { color: #6D4100; }
#home #home-nav #discover a { color: #5F3D9A; }
#home #home-nav #shop a { color: #83298c; }

#home .article img {
  max-width: 360px;
}

#home .article h1 {
  font-size: 32px;
  font-weight: 300;
}
#home .article .home-events {
/*  list-style: none;*/
  margin: 0;
}
#home .article .home-events h2 {
  margin: 1.6em 0 0;
  padding: 0;
  text-indent: 0;
  line-height: 1.2em;
  font-weight: 300;
  font-size: 18px;
}
#home .article .home-events p {
  font-size: 14px;
  line-height: 1.2em;
  margin: .4em 0 0;
  display: inline;
}
#home .article .home-events p  a {
  display: inline;
}
#home .article .home-events p.date {
  color: #666;
  margin-bottom: 0;
}

#newsletter_signup {
  width:210px;
}
p.newsletter-signup {
  margin-bottom:0;
  color:#fff;
}

#donate-btn a {
  background: transparent url('design/ste-bkgd-dark.png') repeat center center;
  background-color: rgba(128,128,128,.2);
  display: block;
  width: 140px;
  margin: 10px -10px;
  padding: 18px 0 12px;
  color: #83298c;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 12px;
}
#donate-btn a:hover {
  background-color: #333;
}
#donate-btn a span {
  color: #eee;
  font-weight: normal;
  font-size: 11px;
  line-height: 1.2em;
}
#home .img-btn {
  clear: both;
  width: 140px;
  margin: 10px -10px;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.2em;
}
#home .img-btn a {
  display: block;
}
#home .img-btn a img {
  vertical-align: top;
  margin: 0 10px 0 0;
}
#home .img-btn a span {
  display: block;
  height: 40px;
  padding: 10px 0;
  vertical-align: middle;
}
#home #kids-club-btn a {
  background: transparent url('design/ste-kids-club-badge.png') no-repeat center center;
  display: block;
  padding: 10px 0;
  font-size: 18px;
  overflow: hidden;
  text-indent: -9999px;
}
#home #kids-club-btn a span {
  height: auto;
  padding: 0;
  font-size: 10px;
}
#home #kids-club-btn a:hover {
  background-color: #161616;
}
#home #siac-btn a {
  background: transparent url('design/ste-siac-badge.png') no-repeat center center;
  height: 190px;
  display: block;
  font-size: 18px;
  overflow: hidden;
  text-indent: -9999px;
}
#home .social-btns {
  margin: 0 -10px 10px;
  height:50px;
  width: 261px;
}
#home .social-btns a {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 5px 0 0;
  float: left;
  text-indent: -9999px;
  overflow: hidden;
  color: #333;
}
#home .social-btns a#youtube {
  margin: 0;
}
a#flickr {
  background: transparent url('design/flickr-badge-40.png') no-repeat center center;
}
a#facebook {
  background: transparent url('design/facebook-badge-40.png') no-repeat center center;
}
a#twitter {
  background: transparent url('design/twitter-badge-40.png') no-repeat center center;
}
a#instagram {
  background: transparent url('design/instagram-badge-40.gif') no-repeat center center;
}
a#youtube {
  background: transparent url('design/youtube-badge-40.gif') no-repeat center center;
}


/* alerts (flash messages)
----------------------------------------------- */
div.alertgood, div.alertbad, div.alertwarning, #errorExplanation h2  {
  padding: 6px 0 4px 44px;
  text-align: left;
  font-size: 110%;
  line-height: 1.8em;
}
div.alertgood {
  background: #4A5400 url("design/ste-success-icon.png") no-repeat 4px 50%;
  border: 1px solid #323800;
  color: #F7B000;
}
div.alertwarning {
  background: #FBAD00 url("design/ste-attention-icon.png") no-repeat 4px 50%;
  border: 1px solid #DA7F00;
  color: #000;
}
div.alertbad, #errorExplanation h2 {
  background: #89171A url("design/ste-failure-icon.png") no-repeat 4px 50%;
  color: #F7B000;
  font-weight: bold;
}

/* Error Rules
----------------------------------------------- */
.fieldWithErrors input.textfield, .fieldWithErrors input, .fieldWithErrors textarea {
  border: 1px solid #711316 !important;
  background-color: #fee !important;
}
#errorExplanation {
/*  margin: 10px 32% 20px 0;*/
  border: 1px solid #711316;
  padding: 0;
  background-color: #200;
  margin-bottom: 5px;
}
#errorExplanation h2 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}
#errorExplanation p {
  margin: 10px 20px;
  color: #F7B000;
}
#errorExplanation ul {
  margin-left: 36px;
}
#errorExplanation ul li {
  padding-right: 10px;
  color: #F7B000;
  list-style: square;
}