/* index.css (umhb homepage) v1.0 | 10062008 */

/**
 * contents:
 * -> homepage structure
 * -> rotating images
 * -> all branding (rounded corners, logo + tagline, drop shadows, 4 stripes)
 * -> quicknav (contains: quicklinks, search, mycampus)
 * -> speaking from experience
 * -> the latest (news + events)
 * -> footer 
 */

/** homepage structure **/
#main {
  width: 960px;
  height: 550px;
  position: relative; 
}
/** homepage rotating images - uses cycle.jquery plugin **/
ul#images{
  z-index: -10; /* this keeps us from having to style EVERYTHING else with a z-index */
}
#images {
  width: 960px;
  height: 550px;
  background: url(../images/slideshow_bkg.gif) no-repeat top center;
  overflow: hidden; /* this keeps all of the images  */
}
/** 4 rounded corners **/
#corner_TL {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0px;
  left: 0px;  
}
#corner_TR {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0px;
  right: 0px;
}
#corner_BL {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
#corner_BR {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0px; 
  right: 0px;
}
/** left & right drop shadows **/
#shadow_LEFT {
  position: absolute;
  left: -13px;
  bottom: 140px;
}
#shadow_RIGHT {
  position: absolute;
  right: -13px;
  bottom: 0px;
}
/** four yellow branding stripes **/
#stripes {
  position: absolute;
  bottom: 0px;
  left: 430px;
}
/** umhb brand banner **/
#branding /* just a white css bar */{
  width: 960px;
  height: 100px;
  position: absolute;
  top: 25px;  
}
.opacity /* this class adds opacity to the #branding bar */{
  background: white;
  /* IE filter extension */
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  width:100%;                /* Required for IE filter */
  -moz-opacity: 0.8;         /* Mozilla extension */
  -khtml-opacity:0.8;        /* Konqueror extension (Safari 1.1)*/
  opacity: 0.8;              /* the correct CSS3 syntax */
}
#logo /* THE branding logo complete with catchy tagline */{ 
  width: 603px;
  height: 100px;
  position: absolute;
  top: 25px;
  left: 0px;
  background: url(../images/umhb_brand.png) no-repeat top left;
  z-index: 1;
}
/** quicknav (quicklinks + search + mycampus) **/
#quicknav {
  position: absolute;
  top: 38px;
  right: 15px;
}
/** quicklinks **/
#quicklinks{
  background: url(../images/quicklinks.png) no-repeat;  
  width: 152px;
  height: 20px; 
  margin-bottom: 4px;
}
#quicklinks_hover /* white box w/ rounded corners, pops up on hover */{
  background: url(../images/hover_bkg_tall.png) no-repeat;
  width: 164px;
  height: 280px;
  position: absolute;
  display: none;
  line-height: 14px;
  padding-top: 20px;
  padding-left: 21px;
  top: -13px;
  left: -13px;
  z-index: 100; 
}
#quicklinks_hover a {
  display: block;
  padding: 1px;
  color: #333;
  font-size: 10px;
  text-decoration: none;  
}
#quicklinks_hover a:hover {
  color: #ffaa00;
}
/** search **/
#search{
  background: url(../images/search.png) no-repeat;
  margin-bottom: 4px;
  width: 152px;
  height: 20px; 
}
#search_input{
  margin-top: 2px;
  margin-left: 6px;
  color: #707070;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0px;
  background: transparent;
  border: none;
  width: 120px; 
}
#search_submit {  
  background: url(../images/search_button.gif) no-repeat;
  border: none;
  width: 14px;
  height: 13px;
  cursor: pointer;  
  position: absolute;
  top: 28px;
  left: 134px;
}
#mycampus { 
}
/** speaking from experience **/
#speaking /* speaking from experience anchor bar */ {
  width: 330px;
  height: 40px;
  position: absolute;
  bottom: 0px;
  background: url(../images/speaking_bar.png) no-repeat top left; 
  cursor: pointer;
  z-index: 1000;
}
#speaking_title {
  position: absolute;
  top: 14px;
  left: 35px;
}
#speakingbox /* the actual pop-up box */{
  width: 330px;
  height: 300px;
  position: absolute;
  bottom: 25px;
  background: url(../images/experience_bkg.png) no-repeat top left;
  overflow: hidden;
}
#speakingbox h3 {
  margin: 0px;
}
#speakingbox h3, h4, h5, h6 {
  margin-top: 0px;  
}
#speaking_image {
  float: right;
  margin: 0 0 5px 20px;
}
#speaking_inner {
  margin: 20px;
  color:#fff;
}
#speaking_inner p {
  font-size: 11px;
  padding: 3px;
}
#speaking_inner p a {
  color: #f2ae00;
  font-weight: 500;
  text-decoration: none;
}
#player1 {
  position: relative;
  top: -5px;  
}
#speaking_controls {
  font-weight: bold;
  position: absolute;
  text-align: right;
  right: 20px;
  top: 258px;
  cursor: pointer;
  display: block;
}
#speaking_controls a {
  color: #F2AE00;
  text-decoration: none;
  letter-spacing: 1px;
  zoom: 1;
  float: right;
  display: block;
}
#speaking_controls a:hover {
  color: #FFFFFF;
}
#arrow {
  position: absolute;
  bottom: 14px;
  left: 17px;
}
#arrow_right {
  position: absolute;
  bottom: 13px;
  left: 22px;
}
/** the latest **/
#the_latest {
  width: 330px;
  height: 175px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  /*background: url(../images/the_latest.png) no-repeat top right;*/
}
#latest_bkg {
  position: absolute;
}
#the_latest {
  margin-left: 2px;
  color: #fff;
}
#the_latest h3 {
  margin-bottom: 0.1em;
  margin-top: 0.7em;
}
.view-umhb-homepage .view-content {
  line-height: 18px; 
}
#the_latest a {
  color: #fff;
  text-decoration: none;
}
#the_latest a:hover {
  
  text-decoration: underline;
}
#the_latest .title {  
}
#the_latest ul {
  list-style: disc;
  margin-left: 16px;
}
#the_latest td {
  padding: 0 4px; 
}
div.more /* this div holds the news and event links */ {
 margin: 8px 0 0 0; 
}
#the_latest .more a {
  font-size: 0.75em;
  font-weight: bold;
  letter-spacing: 1px;
  color: #f2ae00;
}
#the_latest a.news {
  position: absolute;
  left: 25px;
  bottom: 12px;
}
#the_latest a.events {
  position: absolute;
  left: 120px;
  bottom: 12px;
}
#the_latest a:hover {
  color: #fff;
}
#the_latest h3 a {
  
  color: #F2AE00;
}
#newsbox, #eventsbox {
  position: relative;
  left: 16px;
  top: 45px;
}
#the latest table {
  position: relative;
  left: 20px;
}
#eventsbox {
  display: none;
  position: absolute;
}
#newsbox {
  position: absolute;
}
#the_latest .arrow_tab {
  position: absolute;
  bottom: 0px;
  left: 50px;
}
#abcc_badge {
 display: inline-block;
 padding-bottom: 30px;
}
#abc_badge {
  display: inline-block;
  padding: 0 10px;
}

#military-badge {
 display: inline-block;
 padding-bottom: 35px;
}
#badges {
  height: 86px;
  text-align: center;
  vertical-align: top;
  width: 100%;
}
/** footer **/
#footer{
  margin: 15px 0 20px;
  text-align: center;
  color: #333;
  font-size: 12px;
}
#footer a{
  color: #333;
}