/*
 * Homepage Styles
 */
div#slide-and-events {
  overflow: hidden;
  padding: 0px 0px 10px 0px;
}

div#slideshow {
  background: none;
  float: left;
}

ul#slides {
  list-style: none;
  border: 0;
  margin: 0;
  padding: 0;
}
ul#slides li {
  list-style: none;
  border: 0;
  margin: 0;
  padding: 0;
  width: 630px;
  height: 458px;
}
ul#slides li img {
  border: 1px solid #000000;
  border-radius: 0 0 0 10px;
}

ul#slides li div.caption {
  position: absolute;
  margin: 384px 0px 0px 1px;
  z-index: 999;
}
ul#slides li div.caption span {
  background: #f0f0f0;
  border-radius: 0 10px 0 10px;
  display: block;
  font-size: 1.5em;
  width: 590px;
  height: 75px;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -moz-opacity:0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
}
ul#slides li div.caption span p {
  padding: 10px 10px 0px 10px;
}

div#slide-navigation {
  margin: 10px 0px 0px 575px;
  position: absolute;
  z-index: 9999;
}
div#slide-navigation li {
  list-style: none;
  border: 0;
  margin: 0px 0px 10px 0px;
  padding: 0;
  text-align: center;
  width: 15px;
  height: 20px;
}

div#slide-navigation li a {
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  width: 11px;
  height: 10px;
}

div#slide-navigation a {
  padding: 5px;
  background: #99999f;
  display: block;
}

div#slide-navigation li.activeLI a {
  background: #d9d9d9 url(/img/active-slide-bullet.gif) no-repeat 7px 6px;
}
div#slide-navigation a span {
  display: none;
}

div#slide-navigation a:focus {
  outline: none;
}
div#slide-navigation img {
  border: none;
  display: block
}


/*
 * Heroes
 */

div#heroes {
  float: left;
  width: 290px;
}
div#heroes div.hero {
  height: 92px;
}
div#heroes div.hero img {
  border-radius: 2px;
}

/*
 * Event
 */

div#heroes div.event {
  background: #040404 url(/img/homepage-event-bg.gif) repeat-x top left;
  border-radius: 4px;
  color: #ffffff;
  height: 458px;
}
div#heroes div.event h2 {
  text-transform: uppercase;
  padding: 10px 0px 0px 10px !important;
}
div#heroes div.event div.detail {
  background: #ffffff;
  border-radius: 4px;
  margin: 0px 8px 8px 8px;
  padding: 0px 0px 0px 1px;
}
div#heroes div.event div.title {
  color: #000000;
  height: 20px;
}
div#heroes div.event div.title div.name {
  float: left;
  font-weight: bold;
  padding: 6px 0px 0px 0px;
}
div#heroes div.event div.title div.name span {
  padding: 0px 0px 0px 4px;
}
div#heroes div.event div.title div.date {
  float: left;
  padding: 6px 0px 0px 0px;
  width: 112px;
}
div#heroes div.event div.title div.date span {
  padding: 0px 4px 0px 0px;
}


/*
 * Countdown
 */
div#heroes div.event div.countdown {
  position: absolute;
  background: #000000 url(/img/countdown-bg.gif) repeat-x top left;
  border-radius: 10px;
  font-size: 2em;
  font-weight: bold;
  margin: 320px 0 0 5px;
  z-index: 999;
  width: 264px;
  height: 50px;
}
div#heroes div.event div.countdown span {
  display: block;
  padding: 8px;
}
div#heroes div.event div.countdown span span.days {
  color: #38da7c;
  display: inline;
}


/*
 * Panels
 */
div#panels {

}
div#panels ul {
  list-style: none;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
div#panels ul li {
  list-style: none;
  float: left;
  border: 0;
  margin: 0;
  padding: 0;
}

div#panels ul li#panel1 {
  float: left;
  width: 306px;
}
div#panels ul li#panel2 {
  float: left;
  width: 308px;
}
div#panels ul li#panel3 {
  float: left;
  width: 306px;
}


div#panels ul li#panel1 div.content {
  background: transparent url(/img/homepage-panel-bg.jpg) no-repeat top left;
  margin: 0px 8px 0px 0px;
  height: 440px;
}
div#panels ul li#panel2 div.content {
  background: transparent url(/img/homepage-panel-bg.jpg) no-repeat top left;
  margin: 0px 3px 0px 3px;
  height: 440px;
}
div#panels ul li#panel3 div.content {
  background: transparent url(/img/homepage-panel-bg.jpg) no-repeat top left;
  margin: 0px 0px 0px 8px;
  height: 440px;
}


div#panels ul li h2 {
  background: transparent url(/img/more-info.gif) no-repeat 265px 20px;
  padding: 20px 0px 25px 15px;
}
div#panels ul li a {
  color: #007681;
  display: block;
  text-decoration: none;
}

div#panels div.text {
  padding: 0px 15px 0px 15px;
}

div#panels ul li#panel1 div.text {
  background: transparent url(/img/lets-see-what-we-can-do.gif) no-repeat 15px 10px;
  padding: 80px 15px 0px 15px;
}


/*
 * Panel 2
 */
li#panel2 ul li {
  float: none;
  overflow: hidden;
  border-bottom: 1px solid #d3d3d3;
  padding: 0px 0px 10px 0px;
  margin: 0px 0px 10px 0px;
}
li#panel2 ul li.last {
  border: 0;
}
li#panel2 ul li div.date {
  float: left;
  width: 50px;
}
li#panel2 ul li div.event {
  float: left;
  width: 220px;
}
li#panel2 ul li div.event h3,
li#panel2 ul li div.event p {
  padding: 0px 10px 0px 10px;
}

li#panel2 span.month {
  border-radius: 4px 4px 0 0;
  background: #584790;
  color: #ffffff;
  display: block;
  text-align: center;
  padding: 5px 2px 5px 2px;
}
li#panel2 span.day {
  background: #303030;
  border-radius: 0 0 4px 4px;
  color: #ffffff;
  display: block;
  font-size: 2em;
  padding: 10px 2px 10px 2px;
  text-align: center;
}
li#panel2 span.past {
  display: block;
  margin: 5px 0px 0px 0px !important;
  text-align: center !important;
}

/*
 * Panel 2
 */
 li#panel3 ul li {
  float: none;
  overflow: hidden;
  border-bottom: 1px solid #d3d3d3;
  padding: 0px 0px 10px 0px;
  margin: 0px 0px 10px 0px;
}