/**
 * Screen layout styles
 *
 * @copyright       Copyright 2005-2008, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 */

/**
 * Zikula BlankTheme Adaptation
 * @link            http://www.blanktheme.org
 *
 * @author          Mateo Tibaquira
 * @link            http://www.nestormateo.com
 * @author          Erik Spaan
 * @link            http://www.erikspaan.nl
 * @author          Dave Pahl
 * @link            http://www.dpahl.com
 * @version         $Id: basemod.css 75M 2008-12-28 21:45:03Z (local) $
 */

/**
 * CSS Table of Contents
 *
 *  Global fixes (layout-global)
 *  Design of the layout (layout-basics)
 *     Layout Elements (layout-elements)
 *     Navigation menu adjustments (layout-navigation)
 *     Miscelaneous (layout-misc)
 *  Content containers default styles (layout-main)
 *  Specific templates and zones (layout-templates)
 */

@media screen, projection
{
  /**
   * Global fixes
   * 
   * @section layout-global
   */

  /* Centering layout in old IE-versions */
  body { 
    text-align: center; 
  }

  #layout_container, #layout_body { height: 0.01%; }

  #page_margins { 
    text-align: left; 
  }

  .bt_zone { 
    display: block;
    overflow: hidden;
  }



  /**
   * Design of the layout
   * Layout: width, background, borders of the main containers
   * 
   * @section layout-basics
   */


  /**
   * Layout elements
   * @subsection layout-elements
   */

  /* marginal area */
  body {
    background: #EDF0F4 url(../images/design/community/body.jpg) repeat-x top left;
  }

  #layout_container {
    background: url('../images/design/community/layout_container.jpg') repeat-x center top;
  }

  /* general wrapper */
  #page_margins {
    margin: 0 auto;

    width: 98%;
    min-width: 990px;
    max-width: 90em;
  }

  /* page wrapper */
  #page {
  }

      /* header */    
      #header {
        padding: 45px 10px 15px;
      }

          /* top navigation container */
          #header #topnav {
            background: url(../images/design/community/topbar.gif) repeat-x left top;
            height: 62px;
            right: 0;
            top: 0;
            width: 486px;
          }
          #topnav_content {
            padding-left: 38px;
          }
            #topnav a {
              background-image: url('../images/design/topbar_icons.gif');
              background-repeat: no-repeat;
              float: left;
              height: 54px;
              margin-right: 6px;
              width: 56px;
            }

            /* .home */
            #topnav a#topbar_home { background-position: 0 1px; }
            #topnav a#topbar_home:hover { background-position: 0 -54px; }
            #topnav a.topbar_selected#topbar_home { background-position: 0 -108px; }

            /* .community */
            #topnav a#topbar_community { width: 84px; background-position: -56px 0px; }
            #topnav a#topbar_community:hover { background-position: -56px -54px; }
            #topnav a.topbar_selected#topbar_community { background-position: -56px -108px; }

            /* .addons */
            #topnav a#topbar_addons { background-position: -140px 0; }
            #topnav a#topbar_addons:hover { background-position: -140px -54px; }
            #topnav a.topbar_selected#topbar_addons {background-position: -140px -108px; }

            /* .blog */
            #topnav a#topbar_blog { background-position: -196px 0; }
            #topnav a#topbar_blog:hover { background-position: -196px -54px; }
            #topnav a.topbar_selected#topbar_blog { background-position: -196px -108px; }

            /* .demo */
            #topnav a#topbar_demo { background-position: -252px 0; }
            #topnav a#topbar_demo:hover { background-position: -252px -54px; }
            #topnav a.topbar_selected#topbar_demo { background-position: -252px -108px; }

            /* .code */
            #topnav a#topbar_code { background-position: -308px 0; }
            #topnav a#topbar_code:hover { background-position: -308px -54px; }
            #topnav a.topbar_selected#topbar_code { background-position: -308px -108px; }

          /* logo */
          #header .logo {
            float: left;
            margin-top: -15px;
            margin-right: 12px;
          }

      /* adjustment of main navigation */          
      #nav ul {
        margin-left: 20px;
      }

      /* content wrapper */      
      #main {
        background: #F6F6F6 url('../images/design/community/layout_body.gif') repeat-y right top;
        /* background-color: #F6F6F6; */
        border-bottom: 1px solid #DDDDDD;
        border-top: 2px solid #F6F6F6;
      }

      /* footer */
      #footer .internal_links {
        background: #EEEEEE; 
        border-bottom: 1px solid #D5D5D5;
        padding: 10px 12px;
      }
      #footer .external_links {
        padding: 6px;
      }
      


  /**
   * Navigation menu adjustments
   * @subsection layout-navigation
   */

  .nav_edge {
    width: 9px;
    height: 10px;
    background: url(../images/design/common/nav_edge.gif) no-repeat;
  }
  #nav_edge_left { background-position: left top; }
  #nav_edge_right { background-position: right top; }

  /* ================================================================ 
  This copyright notice must be kept untouched in the stylesheet at 
  all times.
  
  The original version of this stylesheet and the associated (x)html
  is available at http://www.cssplay.co.uk/menus/pro_drop3.html
  Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
  This stylesheet and the associated (x)html may be modified in any 
  way to fit your requirements.
  =================================================================== */
  /* Adapted for Zikula theme, 22-11-08, Erik Spaan, http://code.zikula.org/blanktheme */
  #nav_cssplaypro ul {
    margin: 0;
  }
  #nav_cssplaypro {
    background: transparent url(../images/design/common/nav_bgbar.gif)  0 0 repeat-x;
    display: block;
    float: none;
    height: 38px;
    overflow: visible;
    position: relative;
    width: 100%;
    z-index: 100;
  }
  /* Hack to correct IE5.5 faulty box model */
  * html #nav_cssplaypro {
    width: 98%;
    w\idth: 100%;
  }  
  .cssplay_prodrop li {
    display: block;
    float: left;
    margin: 0;
    position: relative;
  }
  /* The menu styling of UL */
  .cssplay_prodrop {
    font: normal 12px Verdana,sans-serif;
    height: 38px;
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    position: relative;
    z-index: 500;
  }
  .cssplay_prodrop li a.top {
    color: #f0f2f5;
    cursor: pointer;
    display: block;
    float: left;
    height: 38px;
    line-height: 38px;
    padding: 0 9px;
    text-decoration:none;
  }
  .cssplay_prodrop li a.top span {
    display: block;
    float: left;
    height: 38px;
    padding: 0 5px;
  }
  .cssplay_prodrop li a.top span.down {
    background: url(../images/design/common/nav_down.gif) no-repeat right top;
    display: block;
    float: left;
    height: 38px;
    padding: 0 12px 0 5px;
  }
  .cssplay_prodrop li a.top:hover { /* IE style */
    background: url(../images/design/common/nav_bgbar.gif) 0% -38px repeat-x;
    color: #fff;
  }
  .cssplay_prodrop li a.top:hover span.down {
    background: url(../images/design/common/nav_down.gif) no-repeat right -38px;
  }
  .cssplay_prodrop li:hover > a.top { /* w3c style */
    background: url(../images/design/common/nav_bgbar.gif) 0% -38px repeat-x;
    color: #f5f4f0;
  }
  .cssplay_prodrop li:hover > a.top span.down {
    background: url(../images/design/common/nav_down.gif) no-repeat right -38px;
  }
  
  /* Current active tab */
  .cssplay_prodrop li.current a.top {
    background: url(../images/design/common/nav_activeleft.gif) no-repeat left top;
    color: #222;
    line-height: 38px;
    padding: 0 0 0 5px;
  }
  .cssplay_prodrop li.current a.top span {
    background: url(../images/design/common/nav_activeright.gif) no-repeat right top;
    padding: 0 11px 0 5px;
  }
  .cssplay_prodrop li.current a.top span.down {
    background: url(../images/design/common/nav_activeright.gif) no-repeat right -38px;
    padding: 0 18px 0 5px;
  }
  /* Table for IE */
  .cssplay_prodrop table {
    border-collapse: collapse;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
  /* The iframe shim, width and height should reflect the dropmenu. */
  .cssplay_prodrop :hover iframe {
    left: 0;
    top: 38px;
    width: 180px;
    height: 40px;
  }

  /* Default link styling */
  /* Style the list OR link hover. Depends on which browser is used */
  .cssplay_prodrop a:hover {
    visibility: visible;
    position: relative;
    z-index: 200;
  }
  .cssplay_prodrop li:hover {
    position: relative;
    z-index: 200;
  }

  /* keep the 'next' level invisible by placing it off screen. */
  .cssplay_prodrop ul, 
  .cssplay_prodrop :hover ul ul, 
  .cssplay_prodrop :hover ul :hover ul ul,
  .cssplay_prodrop :hover ul :hover ul :hover ul ul,
  .cssplay_prodrop :hover ul :hover ul :hover ul :hover ul ul,
  .cssplay_prodrop iframe {
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:0;
    height:0;
    margin:0;
    padding:0;
    list-style:none;
  }
  .cssplay_prodrop :hover ul.drop {
    left:0;
    top:37px;
    background:#494b4d;
    padding:3px 3px 2px 3px;
    border-top:1px solid #878a8c;
    border-left:1px solid #878a8c;
    border-right:2px solid #313233;
    border-bottom:2px solid #313233;
    white-space:nowrap;
    width:180px;
    height:auto;
    z-index:300;
  }
  .cssplay_prodrop :hover ul.drop li {
    display:block;
    height:22px;
    position:relative;
    float:left;
    width:180px;
    font-size:0.9em;
    font-weight:normal;
  }
  .cssplay_prodrop :hover ul.drop li a {
    display:block;
    font-size:12px;
    height:20px;
    width:180px;
    line-height:20px;
    text-indent:5px;
    color:#f0f2f5;
    text-decoration:none;
  }
  .cssplay_prodrop :hover ul.drop li a.fly {
    background: #494b4d url(../images/design/common/nav_fly.gif) 170px 0px no-repeat;
  }
  .cssplay_prodrop :hover ul.drop li a:hover {
    background: #b8bcbf;
    color: #222;
  }
  .cssplay_prodrop :hover ul.drop li a.fly:hover {
    background: #b8bcbf url(../images/design/common/nav_fly.gif) 170px -20px no-repeat;
    color: #222;
  }
  .cssplay_prodrop :hover ul li:hover > a.fly {
    background: #b8bcbf url(../images/design/common/nav_fly.gif) 170px -20px no-repeat;
    color: #222;
  } 
  .cssplay_prodrop :hover ul :hover ul,
  .cssplay_prodrop :hover ul :hover ul :hover ul,
  .cssplay_prodrop :hover ul :hover ul :hover ul :hover ul,
  .cssplay_prodrop :hover ul :hover ul :hover ul :hover ul :hover ul {
    left: 180px;
    top: -4px;
    background:#494b4d;
    padding:3px 3px 2px 3px;
    border-top:1px solid #878a8c;
    border-left:1px solid #878a8c;
    border-right:2px solid #313233;
    border-bottom:2px solid #313233;
    white-space:nowrap;
    width:180px;
    z-index:400;
    height:auto;
  }
  /* Current active tab submenu */
  .cssplay_prodrop .current:hover ul.drop {
    background: #f6f6f6;
    border-color: #c2c2c2 #757575 #757575 #c2c2c2;
  }
  .cssplay_prodrop .current:hover ul.drop li a {
    color: #222;
  }
  .cssplay_prodrop .current:hover ul.drop li a.fly {
    background: #f6f6f6 url(../images/design/common/nav_fly.gif) 170px -20px no-repeat;
  }
  .cssplay_prodrop .current:hover ul.drop li a:hover {
    background: #494b4d;
    color: #f6f6f6;
  }
  .cssplay_prodrop .current:hover ul li:hover > a.fly {
    background: #494b4d url(../images/design/common/nav_fly.gif) 170px 0px no-repeat;
    color: #f6f6f6;
  } 
  .cssplay_prodrop .current:hover ul :hover ul,
  .cssplay_prodrop .current:hover ul :hover ul :hover ul,
  .cssplay_prodrop .current:hover ul :hover ul :hover ul :hover ul,
  .cssplay_prodrop .current:hover ul :hover ul :hover ul :hover ul :hover ul {
    background:#f6f6f6;
    color:#222;  
  }
  /** 
   * Navigation bar search box styling 
   * http://www.alistapart.com/articles/makingcompactformsmoreaccessible
   */
  #nav_cssplaypro .side-header {
    float:right;
    margin:0;
    padding:10px 10px 0 0;
    position:relative;
    z-index:99999;
  }
  #nav_cssplaypro form#search {
    margin:0;
    position:relative;
  }
  #nav_cssplaypro input {
    font:12px Verdana,arial,helvetica,sans-serif;
  }
  #nav_cssplaypro #search_all {
	position:relative;
	float:left;
	margin-right:3px;
  }
  #nav_cssplaypro #search_question {
    border: 1px inset #AAAAAA;
    height: 17px;
    padding: 2px 3px 0;
    width: 120px;
  }
  #nav_cssplaypro #search_submit {
    position: absolute;
    right: -10px;
    top: 0;
  }
  label.overlabel {
    display: none;
  }
  label.overlabel-apply {
    position: absolute;
    top: 3px;
    left: 5px;
    z-index: 1;
    color: #999;
  }
  /* Private messages image */
  #nav_cssplaypro .side-msgdata {
    float: right;
    margin: 0;
    padding: 0 10px 0 0;
    position: relative;
    z-index: 99999;
  }
  #nav_cssplaypro .side-msgdata a {
    background: url(../images/design/common/pm.png) no-repeat 0 0;
    display: block;
    height: 38px;
    width: 89px;
  }
  #nav_cssplaypro .side-msgdata a.bt_unreadmsgs {
    background-position: 0 -41px;
    height:48px;
    margin-top:-10px;
  }
  #nav_cssplaypro .side-msgdata a:hover {
    text-decoration: none;
  }


  /* utility */
  .w100p { width: 100%; }
  .mt5 { margin-top: 5px; }



  /**
   * Formatting content containers by default
   *
   * @section layout-main
   */

  #col1 {
    width: 25%;
  }
    #col1_content {
      padding: 16px 16px 10px;
    }

  #col2 {
    width: 25%;
  }
    #col2_content {
      padding: 12px 10px;
    }

  #col3 {
    margin: 0 25%;
  }
    #col3_content {
      padding: 12px 10px;
    }



  /**
   * Specific templates and zones
   * 
   * @section layout-templates
   */

  /* Example: #col1 style for the -grid- template and the -123- layout */
  .bt_grid .bt_123 #col1 {
    width: 25%; /* width does not affect grid template, don't worry ;-) */
  }



  /**
   * 2col template
   * @subsection layout-template-2col
   */

  /* #col1 is the main column */
  .bt_2col #col1 {
    float: none;
    margin: 0 271px 0 0;
    width: auto;
  }

  /* #col2 and #col3 contains side blocks */
  .bt_2col #col2,
  .bt_2col #col3 {
    float: left;
    margin: 0;
    width: 270px;
  }

  /* 1X layouts */
  .bt_2col .bt_12 #col2,
  .bt_2col .bt_13 #col3 {
    float: right;
  }

  /* X1 layouts */
  .bt_2col .bt_21 #col1,
  .bt_2col .bt_31 #col1 {
    margin: 0 0 0 271px;
  }

  /* 1 layout */
  /* full main column */
  .bt_2col .bt_1 #col1 {
    width: 100%;
  }



  /**
   * 3col template
   * 123 is the default layout
   * @subsection layout-template-3col
   */

  /* #col1 is the main column */
  .bt_3col #col1 {
    float: left;
    margin: 0;
    width: 480px;
  }

  /* #col2 contains the left blocks */
  .bt_3col #col2 {
    float: left;
    margin: 0;
    width: 240px;
  }

  /* #col3 contains the right blocks */
  .bt_3col #col3 {
    float: right;
    margin: 0;
    width: 240px;
  }


  /* 213 layout */
  .bt_3col .bt_213 #col1 {
    margin-left: 240px; /* col2 width */
  }
  .bt_3col .bt_213 #col2 {
    margin-left: -720px; /* col1 + col2 widths */
  }
  .bt_3col .bt_213 #col3 {
    margin-left: -5px;
  }


  /* 312 layout */
  .bt_3col .bt_312 #col1 {
    margin-left: 240px; /* col3 width */
  }
  .bt_3col .bt_312 #col2 {
    float: right;
    margin-left: -5px;
  }
  .bt_3col .bt_312 #col3 {
    float: left;
    margin-left: -720px; /* col1 + col2 widths */
  }


  /* 132 layout */
  .bt_3col .bt_132 #col2 {
    float: right;
    margin-left: -5px;
  }
  .bt_3col .bt_132 #col3 {
    float: left;
  }


  /* XX1 layouts */
  .bt_3col .bt_231 #col1,
  .bt_3col .bt_321 #col1 {
    float: right;
    margin-left: -5px;
  }
  .bt_3col .bt_321 #col2 {
    float: right;
  }

}