/* SeCommerce Zen theme/layout.css - version 0.3 2009-1-21
** http://www.silverearth.com/
**
** The goal of the SeCommerce Zen theme is to provide an elegant, flexible,
** standards-compliant layout model that can be easily extended to suit a variety
** of design needs.
**
** This file only contains CSS rules that directly affect the basic layout
** and positioning of page elements. Other styles such as those affecting fonts,
** colors, background images, borders, etc. are contained in elements.css and zen.css.
**
** THIS FILE IS NOT MEANT TO BE EDITED DIRECTLY. Instead, override or extend these
** definitions by placing your custom CSS in the custom.css file; you may also create
** your own CSS files and link them to your site template.
*/

/***********************************************************************************
** Basic page layout and sizing
**
** This part of the template implements the Jello Mold layout:
** http://positioniseverything.net/articles/jello-expo.html
**
** The default values coded here will have the following effect:
**  - When the browser window is narrower than 780px, the minimum width
**    kicks in and a horizontal scrollbar will appear.
**  - When the browser window is wider than 1280px (780+250/0.5),
**    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.
** To get a liquid layout, set the #container width and max-width to 100%.
** (These changes should be made in custom.css)
**
** 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. */
  padding: 0;
}

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

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

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

/***********************************************************************************
** Main content area and sidebars
*/
#main {
  position: relative;
  height: 100%; /* Necessary for Expression Web to position #footer correctly */
}

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

#content-inner,
.sidebar-none #content-inner {
  margin: 0;
  padding: 1em 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: 1em 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: 1em 0 0 0;
  text-align: right;
}

/* This is a wrapper for modules placed in the left and right sidebars. */
.block {
  margin-bottom: 1em;
}
  
/***********************************************************************************
** Top navigation bar
*/
#navbar {
  text-align: center; /* Center the nav links horizontally */
  padding: 0.5em;
}

#navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navbar li {
  display: inline; /* A simple way to get the links to appear all on one line. */
}

#navbar a {
  padding: 0.5em; /* Make the links more like buttons by adding some padding. */
  display: inline-block; /* IE needs this to get the padding right. */
}

/***********************************************************************************
** Vertical menu
**
** A simple base class for creating vertical CSS menus (additional styles in zen.css).
*/
ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.menu li {
  width: 100%;
}

ul.menu a {
  display: block;
  width: 100%;
  background: white; /* IE can't do display:block properly without a background color ??? */
}

/***********************************************************************************
** Horizontal menu
**
** A simple base class for creating horizontal CSS menus.
*/
ul.nav {
  list-style: none;
}

ul.nav li {
  display: inline;
}

ul.nav a {
  padding: 0.25em 0.5em; /* Make the links more like buttons by adding some padding. */
  display: inline-block; /* IE needs this to get the padding right. */
}


/***********************************************************************************
** 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 */