/*******************************************************************************
*
*   This document created for The Uyiosa Company
*   creator: Jesse Pearson, jesse@uyiosa.com
*   
*   There are several sections to this document, in this order:
*   - main document rules: shared rules across all (or most) pages
*   - home page rules: these rules will only apply to the home page
*   - products page rules: rules apply to the products page as well as subsequent
*     product pages
*     > product description page: rules for the induvidual product descriptions
*   - services page rules: rules that style the services page
*   - careers and legal page rules: currently only one rule each, and they are
*     defined here
*
********************************************************************************/

/*******************************************************************************
  BEGIN main document rules */

  html {
    height: 100%; /* helps place footer at the bottom of the page */
  }
  
  body  {
    background: #666 url(../images/jpg/bodyBg.jpg) repeat-y center top;
    color:  #000;
    text-align: center;
    font-family: "Frutiger", "Univers", "Helvetica Neue", arial, helvetica, tahoma, sans-serif;
  	font-size: 62.5%;  /* to be able to size fonts in em's and not px's */
  	margin: 0px;
  	padding: 0px;
  	height: 100%;  /* helps place footer at the bottom of the page */
  }
  
  #wrapperMain  {
    position: relative;
    width: 800px;
    margin:  auto;
    text-align: left;
    font-size: 1.3em;
    line-height: 1.3em;
    min-height: 100%; /* helps place footer at the bottom of the page */
  }
  
  #header { /* main page header div */
    background: #000 url(../images/jpg/headerBg.jpg) no-repeat center top;
    width: 800px;
    height: 85px;
    margin: 0px;
    padding: 0px;
  }
  
  #header img { /* company logo within header div */
    position: relative;
    top: 15px;
    left: 15px;
  }

  #navBar { /* horizontal navigation seen on all pages */
    background: #F3953A url(../images/jpg/barHorizBg.jpg) repeat-x left bottom;
    width: 800px;
    margin: 15px 0px 0px 0px;
    padding-bottom: 4px;
  }
  
  #navBar ul { 
    width: 100%;
    background-color: #FFF; /* white background covers the orange bar image to make it seem smaller */
    text-align: right;
    margin: 0px 0px 12px 0px; /* leaves bottom space to show just enough of the orange bar */
    padding: 0px;
  }
  
  #navBar ul li{
    display: inline; /* brings vert list to horiz position */
    padding: 4px 0px 0px 0px;
    margin-left: -4px;
  }
  
  #navBar ul li a{
    border-right: 1px solid #000; /* creates link dividers */
    padding: 2px 6px 2px 5px;
    margin: 0px;
    text-decoration: none;
    color: #000;
    font-size: 1.1em;
  }
  
  #navBar ul li a:hover{ /* make box orange on hover */
    background-color: #F3953A; 
  }
  
  #navBar ul a#currentPage{ /* make box orange if this is the page we are on */
    background-color: #F3953A;
  }
  
  #navBar ul a.navBarLast{ /* make sure the last link has no divider to the right of it */
    border-width: 0px;
  }
  
  #pageInfo { /* div that contains the summary of the page */
    width: 700px;
    margin: 0px 0px 20px 50px;
    padding: 0px;
    border-bottom: 1px solid #CCC;
  }
  
  #pageInfo h1{
    font-size: 1.5em;
    margin-bottom: -10px;
  }
  
  #pageContent { /* div that contains all the main page content */
    width: 700px;
    margin: 0px 0px 0px 50px;
    padding: 0px 0px 5px 0px;
  }

  #pageContent h1 {
    clear: both; /* for when it comes under floated elements */
    font-size: 1.35em;
    margin: 25px 0px -5px 0px;
    border-bottom: 1px solid #CCC;
  }
  
  #pageContent ul {
    list-style: none; /* remove standard bullets */
  }
  
  #pageContent ul li{
    margin-left: -20px;  /* slide everything over to the left a bit */
    background: url(../images/gif/orangeBullet.gif) no-repeat top left; /* use our own bullet */
    padding-left: 1.4em; /* create some padding for our new bullet */
  }
  
  #erroneousSpacer  { /* helps bring the footer to the bottom of the page */
    clear: both;
    height: 55px;
  }
  
  #pageInfo a, #pageContent a { /* create dashed underlines for links */
    color: #000;
    text-decoration: none;
    border-bottom: 1px dashed #000;
  }
  
  #pageInfo a:hover, #pageContent a:hover { /* make hovered links have orange underline */
    color: #000;
    text-decoration: none;
    border-bottom: 1px dashed #F3953A;
  }

  #footer {
    z-index: 3; /* this fixes the bug where the footer links are not clickable on lower screen res's */
    clear: both;
    position: absolute; /* helps bring the footer to the bottom of the page */
    bottom: 0px; /* helps bring the footer to the bottom of the page */
    left: 0px;
    width: 780px;
    border-top: 1px solid #000;
    margin: 10px 10px 0px 10px;
    padding: 0px;
    font-size: .8em; /* reduced font size */
  }
  
  #footer p {
    margin: 0px; /* make it tight */
  }
  
  #footer ul { /* put the bottom navigation list to the right, remove bullets */
    float: right;
    list-style: none;
    margin: 0px;
  }
  
  #footer ul li {
    display: inline; /* make list horiz */
  }
  
  #footer ul li a {
    border-right: 1px solid #000; /* give links dividers */
    padding: 0px 7px 0px 5px;
    color: #000;
    text-decoration: none; /* take away link underlines */
  }
  
  #footer ul li a.footerLast {
    border-width: 0px; /* make sure last link has no right divider */
  }
  
  #footer ul li a:hover { /* give link underline when hovered over */
    text-decoration: underline;
  }

/* END main document rules 
********************************************************************************/

/*******************************************************************************
  BEGIN home page rules*/

  #navTower  { /* this is the navigation tower on the home page */
    position: absolute; /* so we can put it where we want it */
    z-index: 1; /* bump it up a layer so it is on top of everything */
    top: 85px; /* putting it.. */
    right: 50px; /* ..where we want it */
    background: transparent url(../images/png/navTowerBg.png) no-repeat left top;
    width: 210px;
    height: 555px;
  }
  
  #navTower ul {
    list-style: none;  /* take away standard bullets */
    background-color: #000;
    width: 100px;
    margin: 80px 0px 0px 8px;
  }
  
  #navTower ul li{
    background: #000 url(../images/jpg/navTowerLiBg.jpg) no-repeat left center; /* use our own bullets */
    margin: 0px 0px 0px -40px; /* bring everything over to the left */
  }
  
  #navTower ul li.navTowerLast{ /* last list element has custom image as a background */
    background: #000 url(../images/jpg/navTowerLiLast.jpg) no-repeat left center;
    height: 150px;
  }
  
  #navTower ul li a{
    display: block; /* makes our link mouseover area a uniform length */
    width: 100%;
    text-decoration: none; /* remove link underlines */
    color: #FFF;
    font-size: 1.5em;
    padding: 2px 2px 2px 10px;
  }
  
  #navTower ul li a:hover{
    color: #F3953A; /* hovered links turn orange */
  }
  
  #barHoriz { /* div that is the horiz orange bar that contains the slogan */
    position: relative; /* so we can put absolutely positioned elements inside it*/
    z-index: 0; /* put it behind the nav tower */
    background: #F3953A url(../images/jpg/barHorizBg.jpg) repeat-x left top;
    width: 800px; /* span the whole space of the wrapper */
    height: 160px;
    padding: 0px;
    margin: 50px 0px 0px 0px;  /* space it off the header */
  }
  
  #barHoriz img { /* the slogan image */
    padding: 40px 0px 0px 60px;
  } 
  
  #barHoriz img#barHorizGlow { /* the glow behind the tower */
    position: absolute;  /* so we can put it where we want it */
    top: 0px; /* top of the box */
    right: 0px; /* right of the box */
    padding: 0px;
    margin: 0px;
  } 
  
  #textWelcome, #textNews { /* divs that contain our index page text */
    margin: 20px 20px 20px 20px;
    width: 230px; /* any larger and they would overlap the nav tower */
    float: left; /* so that they line up next to each other */
  }
  
  #textWelcome h1, #textNews h1{ /* the headers for Welcome and News */
    margin: 5px 0px 5px 0px;
  }
  
  #textNews ul{
    list-style: none; /* remove standard bullets */
  }
  
  #textNews ul li{
    margin: 0px 0px 10px -45px; /* close the left gap */
    background: url(../images/gif/orangeBullet.gif) no-repeat top left; /* use our bullets */
    text-indent: 1.3em; /* set the proper spacing for the new bullets */
  }

/* END home page rules
********************************************************************************/

/*******************************************************************************
  BEGIN product page rules */

  .productInfo  { /* divs that contain our induvidual product descriptions */
    clear: both; /* for when there is more than one */
    width: 700px; /* spans the full with with the padding gaps */
    padding: 5px 50px 5px 50px;
    margin: 0px 0px 10px 0px;
  }
  
  /*
    Note that the .productInfo div's are currently changing to an orange background
    when being hovered over. this is set directly in the xhtml with the onmouseover
    and onmouseout properties. I had to do it this way due to IE6's lack of 
    support for the :hover attribute for a div.
  */
  
  div.productLogo { /* main container for the product logo */
    float: left; /* so text will wrap around it */
    width: 160px;
    margin: 0px 10px 10px 0px;
  }
  
  div.productLogoTop  { /* top image for the product logo box */
    width: 160px;
    height: 15px;
    background: url(../images/png/productBoxTop.png) no-repeat left top;
  }
  
  div.productLogoMid  { /* middle section for the product logo box */
    width: 140px;
    padding: 0px 10px 0px 10px;
    background: url(../images/png/productBoxMid.png) repeat-y left top;
  }
  
  div.productLogoBottom  { /* bottom image for the product logo box */
    width: 160px;
    height: 20px;
    background: url(../images/png/productBoxBottom.png) no-repeat left top;
  }
  
  .productInfo p a { /* set the links to have a dashed underline */
    color: #000;
    text-decoration: none;
    border-bottom: 1px dashed #000;
  }
  
  .productInfo p a:hover { /* hovered links should have a dashed white underline */
    color: #000;
    text-decoration: none;
    border-bottom: 1px dashed #FFF;
  }

  /*****************************************************************************
    BEGIN product description page rules*/
  
    .largerText { /* just to bump up the text in the page intro */
      font-size: 1.4em;
    }
    
    #productDescription {
      clear: both; /* so it doesnt wrap */
      background-color: #404D4B; /* dark green */
      color: #FFF; /* white text */
      width: 740px; /* spans the whole page with the padding gaps */
      padding: 20px 30px 20px 30px;
      margin: 0px;
    }
    
    .productWhy { /* the why boxes */
      float: left; /* make them float next to each other */
      width: 350px; /* make sure they fit */
      margin: 25px; /* ..and dont overlap */
    }
    
    .productWhy h2, h2.productFeatures {
      font-size: 1.3em;
      color: #404D4B;
      border-bottom: 1px solid #404D4B; /* create a stylish underline */
      margin-bottom: -2px; /* bring text below closer to the underline */
    }
    
    ul.productFeatures {
      width: 715px;
      margin: 0px 0px 0px 20px;
      padding: 15px 15px 15px 30px;
      background: #E4E6E6 url(../images/jpg/ogGreyBoxBottom.jpg) no-repeat bottom left;
       /* the background is a solid color with a non-repeating image set on the bottom to create the rounded corners*/
    }
    
    h2.productFeatures {
      clear: both; /* make sure it doesnt wrap */
      width: 750px;
      margin: 0px 0px 0px 20px;
      padding: 5px 0px 0px 10px;
      background: #E4E6E6 url(../images/jpg/ogGreyBoxTop.jpg) no-repeat top left; /* top of rounded corner box */
      margin-bottom: 0px;
    }
  
  /* END product description page rules
  ******************************************************************************/

/* END product page rules 
********************************************************************************/

/*******************************************************************************
  BEGIN services page rules */

  .clientLogo { /* our client logos */
    float: right; /* make sure the client description wraps the logo */
    margin: 0px 10px 10px 10px; /* ...but not to close */
  }
  
  .partneringInformation { /* the p that contains our partnering info */
    background-color: #F3953A; /* make it bright orange */
    font-weight: bold; /* and make it stand out even more */
    padding: 10px 20px 10px 20px;
  }
  
  #pageContent p.partneringInformation a:hover {
    border-bottom: 1px dashed #FFF; /* make sure the links still have a bottom border when hovered */
  }

/* END services page rules 
********************************************************************************/

/*******************************************************************************
  BEGIN careers page rules */

  .jobTitle {
    text-decoration: underline; /* just because it looks good */
  }

/* END careers page rules
********************************************************************************/

/*******************************************************************************
  BEGIN legal page rules */

  #pageContent ol li  {
    margin-bottom: 10px; /* allows the list to be more legible and less run together */
  }

/* END legal page rules
********************************************************************************/