/* $Id: layout.css,v 1.1 2010/04/29 10:55:13 keaton.chan Exp $ */

/*
 * LAYOUT STYLES
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Zen Columns layout method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow
 */


/** body **/
  body
  {
    
    width:100%;
  }

  #page,
  #closure-blocks
  {
    /*
     * If you want to make the page a fixed width and centered in the viewport,
     * this is the standards-compliant way to do that. See also the ie.css file
     * for the necessary IE5 hack to center a div.
     */
    margin:0 auto 0 auto;
    width: 990px;
  }

  #page-inner
  {
  }

  #navigation-top,
  #navigation
  {
    position: absolute; /* Take the named anchors out of the doc flow    */
    left: -10000px;     /* and prevent any anchor styles from appearing. */
  }

  #skip-to-nav
  {
    float: right;
    margin: 0 !important;
    font-size: 0.8em;
  }

  #skip-to-nav a:link, #skip-to-nav a:visited
  {
    color: #fff; /* Same as background color of page */
  }

  #skip-to-nav a:hover
  {
    color: #000;
    text-decoration: none;
  }

  /* Alternatively, the skip-to-nav link can be completely hidden until a user tabs
     to the link. Un-comment the following CSS to use this technique. */
  
  #skip-to-nav a, #skip-to-nav a:hover, #skip-to-nav a:visited
  {
    position: absolute;
    left: 0;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  #skip-to-nav a:active, #skip-to-nav a:focus
  {
    position: static;
    width: auto;
    height: auto;
  }
  

/** header **/
  #header
  {
    
  }

  #header-inner
  {
  }

  #logo-title
  {
  }

  #logo
  {
    width:140px;
    float: left;
    
  }

  #site-name
  {
  }

  #site-slogan
  {
  }

  #header-blocks
  {   
  
  float:left;
	width: 850px;
  margin-left: 0px; 
	margin-right: -990px; /* Negative value of #header-block's width + left margin. */	
  margin-top:20px;    
  }
#header-top-blocks 
{ 
  display:block;
  float:left;
	width: 850px;
  margin-left: 0px; 
	margin-right: -990px; /* Negative value of #header-block's width + left margin. */	
  
  
  }
   #header-bottom-blocks
   {
  
  float:left;
	width: 850px;
  margin-left: 0px; 
	margin-right: -990px; /* Negative value of #header-block's width + left margin. */	
  margin-top:110px;
  
  }
  #header-blocks, 
  #header-top-blocks ,
  #header-bottom-blocks {

  }
/** main (container for everything else) **/
  #main
  {
    position: relative;
  }

  #main-inner
  {  
  }

/** content **/
  #content
  {
    float: left;    
    padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */    
  }

  .no-sidebars #content
  {
    width: 990px;
    margin-left: 0;
    margin-right: -990px; /* Negative value of #content's width + left margin. */    
    min-height:400px;
    height:auto !important;
    height:400px;
  }

  .sidebar-left #content
  {
    width: 800px;
    margin-left: 190px; /* The width of #sidebar-left. */
    margin-right: -990px; /* Negative value of #content's width + left margin. */
    
    
    min-height:400px;
    height:auto !important;
    height:400px;
  }

  .sidebar-right #content
  {
    width: 790px;
    margin-left: 0;
    margin-right: -790px; /* Negative value of #content's width + left margin. */
    min-height:400px;
    height:auto !important;
    height:400px;
  }

  .two-sidebars #content
  {
    width: 600px;
    margin-left: 190px; /* The width of #sidebar-left */
    margin-right: -790px; /* Negative value of #content's width + left margin. */
    min-height:400px;
    height:auto !important;
    height:400px;
  }

  #content-inner
  {
    margin: 0;
    
  }

/** navbar **/
  #navbar
  {
    float: left;
    
    width: 100%;
    margin-left: 0;
    margin-right: -100%; /* Negative value of #navbar's width + left margin. */
    padding: 0; /* DO NOT CHANGE. Add padding or margin to #navbar-inner. */
    
    height: 32px; /* The navbar can have any arbritrary height. We picked one
                      that is twice the line-height pluse 1em: 2 x 1.3 + 1 = 3.6
                      Set this to the same value as the margin-top below. */      
  }

  .with-navbar #content,
  .with-navbar #sidebar-left,
  .with-navbar #sidebar-right
  {
    margin-top: 32px; /* Set this to the same value as the navbar height above. */
  }

  #navbar-inner
  {
  }

  #search-box
  {
    width: 190px;
    margin-right: -190px; /* Negative value of #search-box's width. */
    float: left;
  }

  #primary
  {
    margin-left: 0; 
  }

  #secondary
  {
    margin-left: 0; 
  }

  #navbar ul /* Primary and secondary links */
  {
    
    text-align: left;
  }

  #navbar li /* A simple method to get navbar links to appear in one line. */
  {
    float: left;
    
  }

  /* There are many methods to get navbar links to appear in one line.
   * Here's an alternate method: */
  /*
  #navbar li
  {
    display: inline;
    padding: 0 10px 0 0;
  }
  */

/** sidebar-left **/
  #sidebar-left
  {
    float: left;
    display:block;
    width: 190px;
    margin-left: 0;
    margin-right: -190px; /* Negative value of #sidebar-left's width + left margin. */
    padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */    

    
    
  }

  #sidebar-left-inner
  {
    margin: 10px 0 0 0px;
    padding: 0;
  }

/** sidebar-right **/
  #sidebar-right
  {
    float: left;
    width: 200px;
    margin-left: 790px; /* Width of content + sidebar-left. */
    margin-right: -990px; /* Negative value of #sidebar-right's width + left margin. */
    padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
  }

  #sidebar-right-inner
  {
    margin: 10px 0 0 0;
    padding: 0;
  }

/** footer **/
  #footer
  {
  }

  #footer-inner
  {
  }

/** closure **/
  #closure-blocks /* See also the #page declaration above that this div shares. */
  {
  }

/** Prevent overflowing content **/
  #header,
  #content,
  #navbar,
  #sidebar-left,
  #sidebar-right,
  #footer,
  #closure-blocks
  {
    overflow: visible;
    word-wrap: break-word; /* A very nice CSS3 property */
  }

  #navbar
  {
    /*overflow: hidden; *//* May need to be removed if using a dynamic drop-down menu */
  }

  /* If a div.clear-block doesn't have any content after it and its bottom edge
     touches the bottom of the viewport, Firefox and Safari will mistakenly
     place several pixels worth of space between the bottom of the div and the
     bottom of the viewport. Uncomment this CSS property to fix this.
     Note: with some over-large content, this property might cause scrollbars
     to appear on the #page div.
  */
  /*
  #page
  {
    overflow-y: hidden;
  }
  */

  

  
/* site.css start */
/* $Id: site.css,v 1.1 2010/06/09 06:46:54 keaton.chan Exp $ */

/*
 * MESSAGES STYLE
 *
 * Add sensible messages styling.
 */


  div.messages, /* Important messages (status, warning, and error) for the user */
  div.status,
  div.warning,
  div.error
  {
    min-height: 21px;
    margin: 0 1em 5px 1em;
    border: 2px solid #ff7;
    padding: 5px 5px 5px 35px;
    color: #000;
    background-color: #ffc;
    background-image: url(images/messages-status.png);
    background-repeat: no-repeat;
    background-position: 5px 5px;
  }

  div.status /* Normal priority messages */
  {
  }

  div.warning /* Medium priority messages */
  {
    border-color: #fc0;
    background-image: url(images/messages-warning.png);
  }

  div.warning,
  tr.warning
  {
    color: #000; /* Drupal core uses #220 */
    background-color: #ffc;
  }

  div.error /* High priority messages. See also the .error declaration below. */
  {
    /* border: 1px solid #d77; */ /* Drupal core uses: 1px solid #d77 */
    border-color: #c00;
    background-image: url(images/messages-error.png);
  }

  div.error,
  tr.error
  {
    color: #900; /* Drupal core uses #200 */
    background-color: #fee;
  }

  div.messages ul
  {
    margin-top: 0;
    margin-bottom: 0;
  }


/* $Id: site.css,v 1.1 2010/06/09 06:46:54 keaton.chan Exp $ */

/*
 * Rollover edit links for blocks
 */

  div.block.with-block-editing
  {
    position: relative;
  }

  div.block.with-block-editing div.edit
  {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 40;
    border: 1px solid #eee;
    padding: 0 2px;
    font-size: 0.7em;
    background-color: #fff;
  }

  div.block.with-block-editing:hover div.edit
  {
    display: block;
  }

  

  
  /* $Id: site.css,v 1.1 2010/06/09 06:46:54 keaton.chan Exp $ */

/*
 * WIREFRAMES STYLE
 *
 * Add wireframes to the basic layout elements.
 */


  .with-wireframes #header-inner,
  .with-wireframes #content-inner,
  .with-wireframes #content-inner>*,
  .with-wireframes #navbar-inner,
  .with-wireframes #sidebar-left-inner,
  .with-wireframes #sidebar-right-inner,
  .with-wireframes #footer-inner
  {
    margin: 1px;
    padding: 2px;
    border: 1px solid #ccc;
  }

  .with-wireframes #closure-blocks
  {
    margin-top: 1px;
    padding: 2px;
    border: 1px solid #ccc;
  }
  
/* site.css end */

/* tab.css start */
/* $Id: tabs.css,v 1.1 2010/04/29 10:55:15 keaton.chan Exp $ */

/*
 * Tabs CSS
 *
 * Adds styles for the primary and secondary tabs.
 *
 * Compare this with default CSS found in the system module's stylesheet (a copy
 * of which is in drupal6-reference.css, line 510.)
 *
 */

  div.tabs
  {
    margin: 0 0 5px 0;
  }

  ul.primary
  {
    margin: 0;
    padding: 0 0 0 10px;
    border-width: 0;
    list-style: none;
    white-space: nowrap;
    line-height: normal;
    background: url(images/tab-bar.png) repeat-x left bottom;    
  }

  ul.primary li
  {
    float: left;
    margin: 0;
    padding: 0;
  }

  ul.primary li a
  {
    display: block;
    height: 24px;
    margin: 0;
    padding: 0 0 0 5px; /* width of tab-left.png */
    border-width: 0;
    font-weight: bold;
    text-decoration: none;
    color: #777;
    background-color: transparent;
    background: url(images/tab-left.png) no-repeat left -38px;
    
  }

  ul.primary li a .tab
  {
    display: block;
    height: 20px; /* 24px (parent) - 4px (padding) */
    margin: 0;
    padding: 4px 13px 0 6px;
    border-width: 0;
    line-height: 20px;
    background: url(images/tab-right.png) no-repeat right -38px;
  }

  ul.primary li a:hover
  {
    border-width: 0;
    background-color: transparent;
    background: url(images/tab-left.png) no-repeat left -76px;
  }

  ul.primary li a:hover .tab
  {
    background: url(images/tab-right.png) no-repeat right -76px;
  }

  ul.primary li.active a,
  ul.primary li.active a:hover
  {
    border-width: 0;
    color: #000;
    background-color: transparent;
    background: url(images/tab-left.png) no-repeat left 0;
  }

  ul.primary li.active a .tab,
  ul.primary li.active a:hover .tab
  {
    background: url(images/tab-right.png) no-repeat right 0;
  }

  ul.secondary
  {
    margin: 0;
    padding: 0 0 0 5px;
    border-bottom: 1px solid #c0c0c0;
    list-style: none;
    white-space: nowrap;
    background: url(images/tab-secondary-bg.png) repeat-x left bottom;
  }

  ul.secondary li
  {
    float: left;
    margin: 0 5px 0 0;
    padding: 5px 0;
    border-right: none;
  }

  ul.secondary a
  {
    display: block;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 1px solid #c0c0c0;
    text-decoration: none;
    color: #777;
    background: url(images/tab-secondary.png) repeat-x left -56px;
  }

  ul.secondary a .tab
  {
    display: block;
    height: 18px; /* 24px (parent) - 6px (padding) */
    margin: 0;
    padding: 3px 8px;
    line-height: 18px;
  }

  ul.secondary a:hover
  {
    background: url(images/tab-secondary.png) repeat-x left bottom;
  }

  ul.secondary a.active,
  ul.secondary a.active:hover
  {
    border: 1px solid #c0c0c0;
    color: #000;
    background: url(images/tab-secondary.png) repeat-x left top;
  }

/* tab.css end */

/* html-elements.css start */
/* $Id: html-elements.css,v 1.2 2010/04/29 12:17:12 keaton.chan Exp $ */

/****
 **** HTML ELEMENT STYLING
 ****/


/** fonts **/
  /*
   * Our font size and line height declarations are based on the following ALA
   * article:
   *   http://www.alistapart.com/articles/howtosizetextincss
   *
   * All modern browsrs use a 16px default font size. Specifying the font-size
   * and line-height in ems (relative to the 16px default font) allows the user
   * to resize the font in the browser and produces the most consistent results
   * across different browsers.
   */
  body
  {
    font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */   
  }

  #page
  {
    /*
     * To use a 12px font size on the page, delete the 14px declarations.
     * to use a 14px font size on the page, delete the 12px declarations.
     */
    
    /* Use a 13px base font size with a 15px line height */    
    font-size: 0.75em; /* 16px x .75 = 12px */
    line-height: 1.443em; /* 14px x 1.071= 15px */
  }

  body, caption, th, td, input, textarea, select, option, legend, fieldset
  {
    /* The following font family declarations are based on the Microsoft core
     * web fonts which are common fonts available on most computer systems. The
     * Bitstream Vera fonts are commonly available on Linux systems where the MS
     * fonts are less common.
     *
     * A user's web browser will look at the comma-separated list and will
     * attempt to use each font in turn until it finds one that is available
     * on the user's computer. The final "generic" font (sans-serif or serif)
     * hints at what type of font to use if the web browser doesn't find any
     * of the fonts in the list.

    font-family: "Times New Roman", Times, Georgia, "Bitstream Vera Serif", serif;
    font-family: Times, "Times New Roman", Georgia, "Bitstream Vera Serif", serif;
    font-family: Georgia, "Times New Roman", "Bitstream Vera Serif", serif;

    font-family: Verdana, Tahoma, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
    font-family: Tahoma, Verdana, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
    font-family: Helvetica, Arial, "Bitstream Vera Sans", sans-serif;
    font-family: Arial, Helvetica, "Bitstream Vera Sans", sans-serif;

    font-family: "Bitstream Vera Sans Mono", "Courier New", monospace;

     */
    font-family:  Arial, PMingLiU, Helvetica, sans-serif;
    
  }

  p, td, th,caption,legend
  {
  font-size:1em;
  }
  
  pre, code
  {
    font-size: 0.813em; /* Monospace fonts can be hard to read */    
    font-family:  Arial, PMingLiU, Helvetica, sans-serif;
  }

/** headings **/
  h1
  {
    font-size: 1.6em;
    line-height: 1.5em;
    margin-top: 0;
    margin-bottom: 1.2em; /* 0.5em is equavalent to 1em in the page's base font.
                             Remember, a margin specified in ems is relative to
                             the element's font-size, not to the pages' base
                             font size. So, for example, if we want a 1em margin
                             (relative to the base font), we have to divide that
                             length by the element's font-size:
                             1em / 2em = 0.5em */
  }

  h2
  {
    font-size: 1.3em;
    line-height: 1.35em;
    margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
    margin-bottom: 1em;
  }

  h3
  {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
    margin-bottom: 0.769em;
  }

  h4, h5, h6
  {
    font-size: 1.05em;
    line-height: 1.05em;
    margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
    margin-bottom: 0.909em;
  }

/** block-level elements **/
  p, ul, ol, dl, pre, table, fieldset, blockquote
  {
    margin: 0.5em 0;
          
  }

  p
  {
    margin: 1em 0;
  }
/** lists **/
  /* standardize list item indentation */
  ul, ol
  {
    margin-left: 0;
    padding-left: 2em;    
  }

  .block ul, /* Drupal overrides */
  .item-list ul
  {
    margin: 1em 0;
    padding: 0 0 0 2em;
  }

  ul ul, ul ol,
  ol ol, ol ul,
  .block ul ul, .block ul ol,
  .block ol ol, .block ol ul,
  .item-list ul ul, .item-list ul ol,
  .item-list ol ol, .item-list ol ul
  {
    margin: 0;
  }

  li
  {
    margin: 0;
    padding: 0;
  }

  .item-list ul li /* Drupal override */
  {
    margin: 0;
    padding: 0;
    list-style: inherit;
  }

  ul.menu li, /* Drupal override */
  li.expanded,
  li.collapsed,
  li.leaf
  {
    margin: 0;
    padding: 0;
  }

  ul          { list-style-type: disc; }
  ul ul       { list-style-type: circle; }
  ul ul ul    { list-style-type: square; }
  ul ul ul ul { list-style-type: circle; }
  ol          { list-style-type: decimal; }
  ol ol       { list-style-type: lower-alpha; }
  ol ol ol    { list-style-type: decimal; }

  dt
  {
    margin: 0;
    padding: 0;
  }

  dd
  {
    margin: 0 0 0 2em;
    padding: 0;
  }

/** links **/
  /* The order of link states are based on Eric Meyer's article:
   * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
   */
  a:link
  {
  color:#6666CC;
  text-decoration:underline;
  }

  a:visited
  {
  color:#6666CC;
  text-decoration:underline;
  }

  a:hover,
  a:focus
  {
  text-decoration:underline;
  }

  a:active
  {
  }

/** tables **/
  /* Override Drupal default CSS */
  table
  {
    border-collapse: collapse;
    /* width: 100%; */ /* Prevent cramped-looking tables */  
    
  }

  th,
  thead th,
  tbody th
  {
    text-align: left;
    padding-right: 0;
    border-bottom: none;
  }

  tbody
  {
    border-top: none;
  }

/** abbreviations **/
  abbr
  {
    border-bottom: 1px dotted #666;
    cursor: help;
    white-space: nowrap;
  }

  /* Date-based "abbreviations" show computer-friendly timestamps which are not
     human-friendly. */
  abbr.created
  {
    border: none;
    cursor: auto;
    white-space: normal;
  }

/** images **/
  img
  {
    border: 0;
  }

  
/** horizontal rules **/
  hr
  {
    height: 1px;
    border: 1px solid #666;
  }

/** forms **/
  form
  {
    margin: 0;
    padding: 0;
  }

  fieldset
  {
    margin: 1em 0;
    padding: 0.5em;
  }
/* html-elements.css end */