/* --------
   
   Document: home.css
   Author: University of Washington Bothell 
   
    Table of Content: 
      1. Main
      2. General Home Styles
      3. Col 1 styles
      4. Col 2 styles
      5. Col 3 styles
      6. Section 2: Content
      7. Tabs
      8. Footer
      
   
-------- */




/* ----------------------------------------------------------------
1. Main
-------- */

body{
  background: #fff;/*Overwrites the inside page background*/
  
}


#containerWrapper{
background: #fff; /*Overwrites the inside page background*/
overflow: visible;
width: 100%;
min-width: 1030px;  
}


.headerWrapper{
  padding-bottom: 10px;
  background: #2e1c50 url('/components/home/images/headerBg.jpg') no-repeat center top; /* Header background */
}

.container{
  background: #fff url('/components/home/images/contentBg.gif') repeat-y left top;
  
}


/* ----------------------------------------------------------------
2. Genral Home Styles
-------- */
h1.intro-heading{
  font-size:100%;
  position: absolute;
  left: -5000px;
  font-size: 1em;
}
#homeContent{
  width: 100%;
  background: none;
  padding-top: 0;
  color: #707070;
  overflow: hidden;
  font-size: 1em;
  line-height: 21px;
}
#homeContent a{
  color: #707070; 
}
#homeContent a:hover{
  color: #4b2e84;
  text-decoration: underline;
}
#homeContent img.tagline{
  background: #fff;
  border: 0;
  padding: 16px 0 0;
  margin: 0;
}
#homeContent img {
float: left;
padding: 3px;
border: 1px solid #dfdfdf;
background: #fff;
margin-right: 10px;
margin-bottom: 5px;
}
#homeContent a.more{
background: #f0efef;
padding: 6px 30px;
font-weight: bold;
text-decoration: none;
color: #363636;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 0px;
margin-top: 10px;
}
#homeContent a:hover.more{
background: #cbcbcb;
color: #363636; 
}



/* ----------------------------------------------------------------
3. Col 1 styles
-------- */

.colBox{
  padding: 0 0 30px;
  margin-bottom: 30px;
}

#admissions, #events, #updates, #socialMedia {
border-bottom: 4px solid #eaeaea;
border-style: double;
}
#col1, #col3{
  padding-top: 40px;
}
#col1 h3{
  color: #b7a571;
  margin-bottom: 15px;
  font-size: 18px;
  line-height: 22px;
  font-variant: normal;
  font-style: normal;
}
#col1 h4{
  color: #363636;
  font-weight: bold;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 3px;
}
#col1 ul{
  padding: 0; 
  overflow: hidden;
  font-size: 11px;
  margin-bottom: 0;
  line-height: 18px;
}


#col1 ul li{
  list-style-type: none;
  width: 45%;
  margin-right: 5%;
  float: left;
}

#col1 ul li a{
  text-decoration: none;
  color: #7a7a7a;
}

#admissions ul{
  margin-top: 40px;
}
#admissions p{
  margin-bottom: 10px;
}
#portal.colBox{
  padding: 0 0 20px;
  margin-bottom: 20px;
}
#portal ul{
  margin-top: 20px;
}

/* ----------------------------------------------------------------
4. Col 2 styles
-------- */

#col2{
  font-size: 1.1em;
  line-height: 22px;
  color: #000;
  padding-bottom: 20px;
  background: url('/components/home/images/uwbTaglineBtm.jpg') no-repeat 240px top;
  padding-top: 45px;
}

#col2 h3, #col2 h3 a{
  color: #363636;
  text-decoration: none;
  margin-bottom: 3px;
  font-weight: normal;
  font-size: 20px;
  line-height: 24px;
  font-style: normal;
}
#col2 .story{
  width: 420px;
  margin: 0 auto 35px;
}

/* ----------------------------------------------------------------
5. Col 3 styles
-------- */

#events.colBox{
  margin-top: -20px;
  margin-bottom: 20px;
  padding-bottom: 25px; 
}


#socialMedia.colBox, #otherLinks.colBox{
  padding: 0 0 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

#socialMedia ul, #otherLinks ul{
  margin: 0;
  padding: 0 0 0 20px;
}
#socialMedia li, #otherLinks li{
  display: inline-block;
  float: left;
  margin-right: 3px;
  list-style-type: none;
}
#socialMedia img, #otherLinks img{
  border: 0;
  padding: 0;
  margin: 0;
  
}
#socialMedia li a{
width: 50px;
height: 50px;
display: block; 
text-indent:-9999px;

}
#socialMedia li.icon-facebook a{
  background: url('/components/home/images/iconFb.gif') no-repeat left top;
}
#socialMedia li.icon-facebook a:hover{
  background: url('/components/home/images/iconFbHover.gif') no-repeat left top;
}
#socialMedia li.icon-twitter a{
  background: url('/components/home/images/iconTw.gif') no-repeat left top;
}
#socialMedia li.icon-twitter a:hover{
  background: url('/components/home/images/iconTwHover.gif') no-repeat left top;
}
#socialMedia li.icon-linkedin a{
  background: url('/components/home/images/iconIn.png') no-repeat left top;
}
#socialMedia li.icon-linkedin a:hover{
  background: url('/components/home/images/iconInHover.png') no-repeat left top;
}
#socialMedia li.icon-youTube a{
  background: url('/components/home/images/iconYt.gif') no-repeat left top;
}
#socialMedia li.icon-youTube a:hover{
  background: url('/components/home/images/iconYtHover.gif') no-repeat left top;
}

#otherLinks li{
  float: left;
  margin: 0;
}
#otherLinks li a{
  display: block;
    
}
#otherLinks ul li.accessibility{
  background: url('/components/home/images/iconAccessibility.gif') no-repeat left top;
  width: 25%;
  height: 50px; 
}

#otherLinks ul li.accessibility a {
  text-indent:-9999px;
  background: url('/components/home/images/iconAccessibility.gif') no-repeat left top;
  width: 50px;
  height: 50px;
}
#otherLinks ul li.accessibility a:hover {
  background: url('/components/home/images/iconAccessibilityHover.gif') no-repeat left top;

}

#otherLinks ul li.gift a {
  text-decoration: none;
  font-weight: bold;
  color: #b7a571;
  padding-top: 14px;
  padding-bottom: 10px;
  padding-left: 35px; 
  background: url('/components/home/images/iconGift.gif') no-repeat left top;
  height: 30px; 
  width: 105px;
  margin-right: 20px;
  font-size: 14px;
}
#otherLinks ul li.gift a:hover{
  background: url('/components/home/images/iconGiftHover.gif') no-repeat left top;
  color: #4b2e84;
  
}

/* ----------------------------------------------------------------
6. Section 2: Content
-------- */

#subContent{
  border-top: 5px solid #eaeaea;
  background: #fff url('/components/home/images/subContentMissionBg.png') no-repeat 746px top;
}
#subContent-left, #subContent-right{
  padding: 30px 0 40px;
}
#subContent-left{
    background: #fff;
  }
.tabWrapper ul.tab_container li{
  padding-right: 35px;
}

#subContent-right p{
  margin: 0 0 0 20px;
  padding-top: 30px;
  color: #363636;
  line-height: 26px;
  font-size: 15px;
}

#subContent-right p span{
  display: block;
  font-weight: bold;
  font-size: 26px;
  margin-bottom: 5px;
}

/* ----------------------------------------------------------------
7. Tabs
-------- */


.tabWrapper{
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}
.smoothTabs ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

/* ---------------------------------------------------------
Navigation links */

.tabWrapper .tab_navigation li{
    list-style: none;
  color: #858585;
    float: left;
    display: inline;
    cursor: pointer;
    text-align: center;
    margin-right: 2px;
    list-style-type: none;
}
li.smoothTabsLiCurrent{
    color: #000 !important;
}
.smoothTabs li:hover{
}

/* ---------------------------------------------------------
Default */


.smoothTabsDivHidden {
    display: none;
}
.smoothTabsDivVisible{
    
}
.tabWrapper .item{
overflow: hidden;
margin-bottom: 15px;

}

.tabWrapper a.more-link{
  font-size: 11px;
  color: #7a7a7a;
  margin-left: 55px;
}

/* ---------------------------------------------------------
Our Campus Tabs Styles*/


#subContent-left.tabWrapper {
color: #707070;
font-size: 1em;
}


#subContent-left.tabWrapper ul.tab_navigation li {
  color: #858585;
  font-size: 16px;
  padding: 30px 43px 20px 40px !important;
  padding-right: 36px\9 !important; /* IE8 and below */ 
  background:  url('/components/general/images/tab-divider2.jpg') no-repeat right 15px !important;

}

#subContent-left.tabWrapper ul.tab_navigation li.firstTab {
  padding-left: 0 !important;
}
#subContent-left.tabWrapper ul.tab_navigation li.lastTab {
  padding-right: 10px !important;
  background: none !important;
}


#subContent-left.tabWrapper img{
  float: right !important;
  margin-left: 54px;
}
#subContent-left.tabWrapper .item{
  padding-top: 20px;
  padding-right: 3%;
  width: 97%;
  height: 270px;
  border-top: 1px solid #e1e1e1;
  line-height: 22px; 
  
}
#subContent-left.tabWrapper .item a.more{
display: block !important;
width: 100px;
text-align: center;
}
#subContent-left.tabWrapper p{
  margin-bottom: 15px;
}

/* ----------------------------------------------
Events Tabs Styles*/

#events.tabWrapper {
color: #707070;
font-size: 1em;
}

#events.tabWrapper ul.tab_navigation {
  color: #858585;
  font-size: 18px;  
  line-height: 18px !important;
  padding: 0;
  overflow: hidden;
}

#events.tabWrapper ul.tab_navigation li {
  color: #858585;
  padding-bottom: 15px;
  padding-top: 10px;
  text-align: left;
  padding-left: 20px;
}

#events.tabWrapper ul.tab_navigation li.secondTab{
width: 110px!important;
float: left;
}
#events.tabWrapper ul.tab_navigation li.firstTab{
width: 75px !important;
float: left;
background:  url('/components/general/images/tab-divider.jpg') no-repeat right center;
padding-top: 20px;
}
li.smoothTabsLiCurrent{
    color: #b7a571 !important;
}
#events.tabWrapper .item{
  padding-top: 20px;
  padding-right: 3%;
  width: 97%;
  border-top: 1px solid #e1e1e1;
  /*height: 260px; The height of the tabs. NOTE: The height will be adjusted according to the amount of content if this height is taken out. */
     
    
  margin-bottom: 0;
}
#events.tabWrapper .item li{
  display: block;
  overflow: hidden;
  padding: 0 0 0 15px;
  margin-bottom: 0;
}
#events.tabWrapper .item li a{
  padding-top: 3px;
  padding-bottom: 3px;
  display: block;
  color: #707070;
  text-decoration: none;
}
#events.tabWrapper .item li a:hover{
  color: #000 !important;
  
}

#events.tabWrapper .item span.date {
width: 25px;
margin-right: 16px;
display: block;
float: left;
font-size: 10px;
line-height: 14px;
text-align: center;
margin-top: 3px;
}

#events.tabWrapper .item span.date em{
color: #363636;
font-size: 20px;
font-weight: normal;
font-style: normal;
text-align: left;
display: block;
margin-bottom: 2px;
}     

#events.tabWrapper .item span.info{
  width: 168px;
  float: left;
  display: block;
  line-height: 18px;
  padding-bottom: 7px;
  margin-bottom: 7px;
}
#events.tabWrapper .item span.info strong{
  display: block;
}

#events.tabWrapper .more-link, #events.tabWrapper .construction-link{
display: block;
line-height: 16px;
padding-left: 55px;

}
#events.tabWrapper .more-link a{
  font-size: 11px;
}
#events.tabWrapper .construction-link{
  padding-top: 15px;
  padding-bottom: 5px;
  margin-bottom: 0;
  background:  url('/components/home/images/construction-icon.gif') no-repeat 15px 20px;
    border-top: 1px solid #f0efef;
  
  
}
#events.tabWrapper .construction-link a{
  text-decoration: none;
  color: #363636;
  
}
#events.tabWrapper .construction-link strong{
display: block;
}


#updates{
padding-top: 10px;
padding-left: 10px;
text-align: left;
border-bottom: 4px solid #eaeaea;
border-style: double;
}

#updates h3{
color: #b7a571;
}

/* ----------------------------------------------------------------
8. Footer
-------- */
#footerContainer, .footer{
    background: #212121 url('/components/home/images/footerBg.jpg') no-repeat center top !important;
    
}


.footer{
  border: 0 !important;
  color: #a3a3a3 !important;  
}


.footer h4{
color: #fff !important; 
}
  

.footer ul li a {
color: #a3a3a3; 
}

.footer ul li a:hover{
  color: #fff;
}