/********************************************************************************************
File:           ubc_clf.css
Version:        0.3 (beta)
Last Modified:  Mar-07-2007
---------------------------------------------------------------------------------------------
Description:    Stylehseet for the University of British Columbia's Common Look & Feel 
                banner.

                For more information about the UBC Common Look & Feel (CLF) initiative, 
                please visit: www.publicaffairs.ubc.ca/ubcweb/clf.
---------------------------------------------------------------------------------------------
Cross-Browser
Compatibility:  - PC : FireFox 1.5, IE 6, Maxthon, Netscape 4,7,8
                - Mac: Camino 1.0, FireFox 1.5, Opera 8.51, Safari 1.3.2
---------------------------------------------------------------------------------------------
Notes:          The markup for the UBC CLF Banner should be placed at the top of the page
                body and not inside any other containing divs (see below for sample markup).

                All selectors in the UBC CLF Banner are pre-pended with 'ubcBanner'. To avoid
                conflicting style rules, do not use 'ubcBanner' in any of your site-specific
                style selector names.
---------------------------------------------------------------------------------------------
Version Notes:				
- v.0.3 (beta): Minor adjustment to height of banner and positioning of UBC logo.
- v.0.2 (beta): Finalized version for release.
---------------------------------------------------------------------------------------------
Contact:        UBC Public Affairs
                t: 604.822.8925
                e: web.admin@ubc.ca
                w: www.publicaffairs.ubc.ca/ubcweb
---------------------------------------------------------------------------------------------
Core Markup:

<!-- UBC CLF -->
<div id="ubcBannerWrapper">
  <div id="ubcBanner">
    <div id="ubcBannerCrest"><a href="http://www.ubc.ca/" title="UBC.ca"><img src="/ubcclf/images/ubc_logo.gif" alt="UBC.ca" title="UBC.ca" border="0" /></a></div>
    <p class="ubcBannerTitle"><a href="http://www.ubc.ca/" title="The University of British Columbia">The University of British Columbia</a></p>
    <ul class="ubcBannerLinks">
      <li class="ubcBannerlifirst"><a href="http://www.publicaffairs.ubc.ca/ubcnews/" title="UBC Public Affairs">News</a></li>
      <li class="ubcBannerli"><a href="http://www.liveat.ubc.ca" title="Live@UBC">Events</a></li>
      <li class="ubcBannerli"><a href="http://www.ubc.ca/directory/" title="UBC Directory">Directories</a></li>
      <li class="ubcBannerli"><a href="http://www.ubc.ca/search/" title="Search UBC">Search UBC</a></li>
      <li class="ubcBannerlilast"><a href="http://my.ubc.ca" title="myUBC"><span class="my">my</span>UBC Login</a></li>
    </ul>
  </div>
</div>
<!-- /UBC CLF -->

********************************************************************************************/

/********************************************************************************
The wrapper holds all of the banner elements. Two default stylings are available:
(1) fixed-width and (2) fluid, full-width.
********************************************************************************/

/* Fixed-width banner */
#ubcBannerWrapper {
  border: 0px solid #39ba42; /* change to 1px to test container sizing + positioning */
  width: 740px;
  margin: 0 auto; /* to left-align the banner, change this to margin:0; */
  padding: 0;
  margin-bottom: 10px;
}

/* Fluid full-width banner */
ubcBannerWrapperFull {
  border: 0px solid #39ba42; /* change to 1px to test container sizing + positioning */
  width: 100%;
  margin: 0 auto;
  padding: 0;
  margin-bottom: 10px;  
}

/****************************
Position the UBC logo graphic
*****************************/
#ubcBannerCrest {
  margin-left: 13px;
  _margin-left: 6px; /* for IE 6 */
  margin-top: 3px;
  float: left;
}
#ubcBannerCrest a img {
  behavior: url(../js/pngbehavior.htc);
}

/****************************************************
Define properties for the banner and links in CLF bar
*****************************************************/
#ubcBanner {
  clear: both;
  position: relative;
  width: 99%;
  height: 43px;
  background: url(../images/ubc_banner_003399.gif) repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  text-transform: uppercase;
  font-weight: normal;
  font-size: .6em;
  white-space: nowrap;
}

#ubcBanner a:link, #ubcBanner a:visited {
  text-decoration: none;
  color: #fff;
}
#ubcBanner a:hover {
  text-decoration: underline;
}
#ubcBanner a:active {
  text-decoration: none;
}

/**********************************************************************
Define properties for banner title "The University of British Columbia"
***********************************************************************/
#ubcBanner p.ubcBannerTitle {
  /* border:1px solid #f90; /* uncomment to test sizing + positioning */
  float: left;
  padding: 0 6px;
  margin-top: 23px;
  font-size: 100%;
  font-weight: bold;
}

/********************************************************************************
Set properties for list items: News, Events, Directories, Search UBC, myUBC Login
*********************************************************************************/
ul.ubcBannerLinks {
  /* border:1px solid #39ba42; /* uncomment to test sizing + positioning */
  float: right;
  margin-top: 23px;
  margin-left: 0;
  padding-left: 0;
  background-color: #039;
}

ul.ubcBannerLinksNarrow { /* this ul version is for the full width banner, with narrow fixed-width content left-aligned */
  /* border:1px solid #39ba42; /* uncomment to test sizing + positioning */
  position: absolute;
  left: 410px;
  margin-top: 16px;
  margin-left: 0;
  padding-left: 0;
  background-color: #039;
  line-height: 27px;
}

li.ubcBannerli {
  display: inline;
  border-left: 1px solid #fff;
  padding: 0 4px 0 8px;
  margin: 0;
}
li.ubcBannerlifirst {
  display: inline;
  border-left: none;
  padding: 0 4px 0 0;
  margin: 0;
}
li.ubcBannerlilast {
  display: inline;
  border-left: 1px solid #fff;
  padding: 0 8px 0 8px;
  margin: 0;
}
#ubcBanner .my {
  text-transform: lowercase; /* transform myUBC */
}