/* SeCommerce Zen theme/layout.css - version 1.0 2009-2-15
** http://www.silverearth.com/
**
** This file only contains CSS rules that directly affect the basic layout
** and positioning of page elements.
************************************************************************************/

/***********************************************************************************
** Basic page layout and sizing
**
** This part of the template implements the Jello Mold layout:
** http://positioniseverything.net/articles/jello-expo.html
**
** This layout method is very flexible and also allows traditional fixed
** and liquid layouts.
**
** The default values coded here will have the following effect:
**  - When the browser window is narrower than 780px, the minimum width
**    is in effect and a horizontal scrollbar will appear.
**  - When the browser window is wider than 1280px (780 + 250*2),
**    a maximum width of 1030px (780+250) is enforced on the #page div.
**  - When the width of the browser window is between 780px and 1280px,
**    the total #page width will be 780px + 50% of any additional space
**    that is available. For example, if the browser is 1020px wide, the
**    width of the #page div will be 780 + (1020-780) * 0.5 = 900px.
**
** To get a fixed-width layout, set the #container width and max-width to 0
** (example in custom.css).
**
** To get a liquid layout, set the #container width and max-width to 100%.
**
** If you change the width or max-width of the #container div, be sure
** to also adjust the values in ie.css.
**
** IMPORTANT: Do not add any padding or margins to these elements, aside from
** what is defined here, doing so will have unpredictable results and may break
** your layout. If necessary, add an extra div inside #page-inner, and apply
** padding to that element.
*/
body {
  margin: 0;
  padding: 0 390px;   /* This offsets the negative #page margins. */
  text-align: center; /* This centers the #container div in older IE browsers. */
}

#container {
  margin: 0 auto;   /* This centers the #container div in standard browsers. */
  text-align: left; /* Reset text alignment (from the value set on the body element). */
  width: 50%;       /* This value determines the behavior of the jello mold. */
  max-width: 250px; /* The amount that #page is allowed to grow before it reaches its max width. */
}

#page {
  position: relative; /* Required by IE. */
  margin: 0 -390px; /* This determines the effective minimum width of the layout. */
  min-width: 780px; /* This prevents Safari from losing the negative margin in narrow windows. */
}

#page-inner {
  width: 100%; /* This helps IE get any child percentage widths right. */
}

/***********************************************************************************
** Header section
*/
#header {
  padding: 12px;
}

#logo-title {
  float: left; /* To get header-blocks to appear below this element, use 'float: none' instead. */
}

#logo {
  float: left;
  margin-right: 12px;
}

#site-name {
  white-space: nowrap;
}

#header-blocks {
  text-align: right;
  padding: 12px 0;
}

/***********************************************************************************
** Main content area and sidebars
*/
#main {
  position: relative;
  width: 100%; /* Helps some WYSIWYG editors position page elements correctly. */
}

/* Do not change or override any of these values, doing so may break your layout. */
#content {
  float: left;
  width: 100%;
  margin: 0;
  margin-right: -100%; 
  padding: 0; 
}

#content-inner,
.sidebar-none #content-inner {
  margin: 0;
  padding: 12px 0 0 0;
   
}

.sidebar-left #content-inner {
  padding-left: 180px; /* The width + left margin of #sidebar-left. */
  padding-right: 0;
}

.sidebar-right #content-inner {
  padding-left: 0;
  padding-right: 180px; /* The width + right margin of #sidebar-right. */
}

.sidebar-both #content-inner {
  padding-left: 180px; /* The width + left margin of #sidebar-left. */
  padding-right: 180px; /* The width + right margin of #sidebar-right. */
}

#sidebar-left {
  float: left;
  width: 180px;
  margin-left: 0;
  margin-right: -180px; /* 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: 0 12px 0 0;
  padding: 12px 0 0 0;
}

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

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

/* This is a wrapper for modules placed in the left and right sidebars. */
.block {
  margin-bottom: 12px;
}
  
/***********************************************************************************
** Top navigation bar
*/
#navbar {
  width: 100%; /* Helps some WYSIWYG editors position page elements correctly. */
}

/***********************************************************************************
** Basic menu class - removes normal list formatting on root element and all sub-elements
*/
ul.menu,
ul.menu li,
ul.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/***********************************************************************************
** Horizontal menu
**
** A simple base class for creating horizontal CSS menus
*/
ul.horizontal-nav {
  position: relative;
  float: left;
  z-index: 747;
}

ul.horizontal-nav li {
  float: left;
  position: relative;
  z-index: 749;
}

ul.horizontal-nav a {
  display: block;
}

ul.horizontal-nav ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 748;
}

ul.horizontal-nav ul li {
  float: none;
}

ul.horizontal-nav ul ul {
  top: 0;
  left: 100%;
}

ul.horizontal-nav li:hover ul {
  visibility: visible;
}

ul.horizontal-nav li:hover ul ul {
  visibility: hidden;
}

ul.horizontal-nav ul li:hover ul {
  visibility: visible;
}

/***********************************************************************************
** Vertical menu
**
** A simple base class for creating vertical CSS menus
*/
ul.vertical-nav li {
  position: relative;
  width: 100%;
}

ul.vertical-nav a {
  display: block;
  width: 100%;
}

ul.vertical-nav ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
}

ul.vertical-nav li:hover ul {
  visibility: visible;
}

ul.vertical-nav li:hover ul ul {
  visibility: hidden;
}

ul.vertical-nav ul li:hover ul {
  visibility: visible;
}


/***********************************************************************************
** Footer section
*/
#footer {
  padding: 18px;
  text-align: center;
}

/***********************************************************************************
** Clutter-free clearing for floats
** See http://positioniseverything.net/easyclearing.html 
*/
.clear-block:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear-block {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clear-block {
  height: 1%;
}
.clear-block {
  display: block;
}
/* End hide from IE-mac */