Chris@0: /* $Id: layout-liquid.css,v 1.5.2.4 2009/02/13 19:30:50 johnalbin Exp $ */
Chris@0: 
Chris@0: /*
Chris@0:  * LAYOUT STYLES
Chris@0:  *
Chris@0:  * Define CSS classes to create a table-free, 3-column, 2-column, or single
Chris@0:  * column layout depending on whether blocks are enabled in the left or right
Chris@0:  * columns.
Chris@0:  *
Chris@0:  * This layout is based on the Zen Columns layout method.
Chris@0:  *   http://drupal.org/node/201428
Chris@0:  *
Chris@0:  * Only CSS that affects the layout (positioning) of major elements should be
Chris@0:  * listed here.  Such as:
Chris@0:  *   display, position, float, clear, width, height, min-width, min-height
Chris@0:  *   margin, border, padding, overflow
Chris@0:  */
Chris@0: 
Chris@0: 
Chris@0: /** body **/
Chris@0:   body
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #page,
Chris@0:   #closure-blocks
Chris@0:   {
Chris@0:     min-width: 600px; /* Don't allow the browser to make the site unreadable. */
Chris@0:   }
Chris@0: 
Chris@0:   #page-inner
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #navigation-top,
Chris@0:   #navigation
Chris@0:   {
Chris@0:     position: absolute; /* Take the named anchors out of the doc flow    */
Chris@0:     left: -10000px;     /* and prevent any anchor styles from appearing. */
Chris@0:   }
Chris@0: 
Chris@0:   #skip-to-nav
Chris@0:   {
Chris@0:     float: right;
Chris@0:     margin: 0 !important;
Chris@0:     font-size: 0.8em;
Chris@0:   }
Chris@0: 
Chris@0:   #skip-to-nav a:link, #skip-to-nav a:visited
Chris@0:   {
Chris@0:     color: #fff; /* Same as background color of page */
Chris@0:   }
Chris@0: 
Chris@0:   #skip-to-nav a:hover
Chris@0:   {
Chris@0:     color: #000;
Chris@0:     text-decoration: none;
Chris@0:   }
Chris@0: 
Chris@0:   /* Alternatively, the skip-to-nav link can be completely hidden until a user tabs
Chris@0:      to the link. Un-comment the following CSS to use this technique. */
Chris@0:   /*
Chris@0:   #skip-to-nav a, #skip-to-nav a:hover, #skip-to-nav a:visited
Chris@0:   {
Chris@0:     position: absolute;
Chris@0:     left: 0;
Chris@0:     top: -500px;
Chris@0:     width: 1px;
Chris@0:     height: 1px;
Chris@0:     overflow: hidden;
Chris@0:   }
Chris@0: 
Chris@0:   #skip-to-nav a:active, #skip-to-nav a:focus
Chris@0:   {
Chris@0:     position: static;
Chris@0:     width: auto;
Chris@0:     height: auto;
Chris@0:   }
Chris@0:   */
Chris@0: 
Chris@0: /** header **/
Chris@0:   #header
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #header-inner
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #logo-title
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #logo
Chris@0:   {
Chris@0:     float: left;
Chris@0:   }
Chris@0: 
Chris@0:   #site-name
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #site-slogan
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #header-blocks
Chris@0:   {
Chris@0:     clear: both; /* Clear the logo */
Chris@0:   }
Chris@0: 
Chris@0: /** main (container for everything else) **/
Chris@0:   #main
Chris@0:   {
Chris@0:     position: relative;
Chris@0:   }
Chris@0: 
Chris@0:   #main-inner
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0: /** content **/
Chris@0:   #content
Chris@0:   {
Chris@0:     float: left;
Chris@0:     width: 100%;
Chris@0:     margin-left: 0;
Chris@0:     margin-right: -100%; /* Negative value of #content's width + left margin. */
Chris@0:     padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
Chris@0:   }
Chris@0: 
Chris@0:   #content-inner,
Chris@0:   .no-sidebars #content-inner
Chris@0:   {
Chris@0:     margin: 0;
Chris@0:     padding: 0;
Chris@0:   }
Chris@0: 
Chris@0:   .sidebar-left #content-inner
Chris@0:   {
Chris@0:     padding-left: 20%; /* The width + left margin of #sidebar-left. */
Chris@0:     padding-right: 0;
Chris@0:   }
Chris@0: 
Chris@0:   .sidebar-right #content-inner
Chris@0:   {
Chris@0:     padding-left: 0;
Chris@0:     padding-right: 20%; /* The width + right margin of #sidebar-right. */
Chris@0:   }
Chris@0: 
Chris@0:   .two-sidebars #content-inner
Chris@0:   {
Chris@0:     padding-left: 20%; /* The width + left margin of #sidebar-left. */
Chris@0:     padding-right: 20%; /* The width + right margin of #sidebar-right. */
Chris@0:   }
Chris@0: 
Chris@0: /** navbar **/
Chris@0:   #navbar
Chris@0:   {
Chris@0:     float: left;
Chris@0:     width: 100%;
Chris@0:     margin-left: 0;
Chris@0:     margin-right: -100%; /* Negative value of #navbar's width + left margin. */
Chris@0:     padding: 0; /* DO NOT CHANGE. Add padding or margin to #navbar-inner. */
Chris@5:     height: 3.6em; /* The navbar can have any arbritrary height. We picked one
Chris@0:                       that is twice the line-height pluse 1em: 2 x 1.3 + 1 = 3.6
Chris@0:                       Set this to the same value as the margin-top below. */
Chris@0:   }
Chris@0: 
Chris@0:   .with-navbar #content,
Chris@0:   .with-navbar #sidebar-left,
Chris@0:   .with-navbar #sidebar-right
Chris@0:   {
Chris@5:     margin-top: 3.6em; /* Set this to the same value as the navbar height above. */
Chris@0:   }
Chris@0: 
Chris@0:   #navbar-inner
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #search-box
Chris@0:   {
Chris@0:     width: 20%;
Chris@0:     margin-right: -20%; /* Negative value of #search-box's width. */
Chris@0:     float: left;
Chris@0:   }
Chris@0: 
Chris@0:   #primary
Chris@0:   {
Chris@0:     margin-left: 20%;
Chris@0:   }
Chris@0: 
Chris@0:   #secondary
Chris@0:   {
Chris@0:     margin-left: 20%; /* Width of search-box */
Chris@0:   }
Chris@0: 
Chris@0:   #navbar ul /* Primary and secondary links */
Chris@0:   {
Chris@0:     margin: 0;
Chris@0:     padding: 0;
Chris@0:     text-align: left;
Chris@0:   }
Chris@0: 
Chris@0:   #navbar li /* A simple method to get navbar links to appear in one line. */
Chris@0:   {
Chris@0:     float: left;
Chris@0:     padding: 0 10px 0 0;
Chris@0:   }
Chris@0: 
Chris@0:   /* There are many methods to get navbar links to appear in one line.
Chris@0:    * Here's an alternate method: */
Chris@0:   /*
Chris@0:   #navbar li
Chris@0:   {
Chris@0:     display: inline;
Chris@0:     padding: 0 10px 0 0;
Chris@0:   }
Chris@0:   */
Chris@0: 
Chris@0: /** sidebar-left **/
Chris@0:   #sidebar-left
Chris@0:   {
Chris@0:     float: left;
Chris@0:     width: 18%;
Chris@0:     margin-left: 1%;
Chris@0:     margin-right: -20%; /* Negative value of #sidebar-left's width + left margin. */
Chris@0:     padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
Chris@0:   }
Chris@0: 
Chris@0:   #sidebar-left-inner
Chris@0:   {
Chris@0:     margin: 0 20px 0 0;
Chris@0:     padding: 0;
Chris@0:   }
Chris@0: 
Chris@0: /** sidebar-right **/
Chris@0:   #sidebar-right
Chris@0:   {
Chris@0:     float: right;
Chris@0:     width: 18%;
Chris@0:     margin-left: -20%; /* Negative value of #sidebar-right's width + right margin. */
Chris@0:     margin-right: 1%;
Chris@0:     padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
Chris@0:   }
Chris@0: 
Chris@0:   #sidebar-right-inner
Chris@0:   {
Chris@0:     margin: 0 0 0 25px;
Chris@0:     padding: 0;
Chris@0:   }
Chris@0: 
Chris@0: /** footer **/
Chris@0:   #footer
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0:   #footer-inner
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0: /** closure **/
Chris@0:   #closure-blocks /* See also the #page declaration above that this div shares. */
Chris@0:   {
Chris@0:   }
Chris@0: 
Chris@0: /** Prevent overflowing content **/
Chris@0:   #header,
Chris@0:   #content,
Chris@0:   #navbar,
Chris@0:   #sidebar-left,
Chris@0:   #sidebar-right,
Chris@0:   #footer,
Chris@0:   #closure-blocks
Chris@0:   {
Chris@0:     overflow: visible;
Chris@0:     word-wrap: break-word; /* A very nice CSS3 property */
Chris@0:   }
Chris@0: 
Chris@0:   #navbar
Chris@0:   {
Chris@0:     overflow: hidden; /* May need to be removed if using a dynamic drop-down menu */
Chris@0:   }
Chris@0: 
Chris@0:   /* If a div.clear-block doesn't have any content after it and its bottom edge
Chris@0:      touches the bottom of the viewport, Firefox and Safari will mistakenly
Chris@0:      place several pixels worth of space between the bottom of the div and the
Chris@0:      bottom of the viewport. Uncomment this CSS property to fix this.
Chris@0:      Note: with some over-large content, this property might cause scrollbars
Chris@0:      to appear on the #page div.
Chris@0:   */
Chris@0:   /*
Chris@0:   #page
Chris@0:   {
Chris@0:     overflow-y: hidden;
Chris@0:   }
Chris@0:   */
Chris@2: 
Chris@2:   td.col-first { padding-right: 2em; }
Chris@2: 
Chris@6:   table.col-2 td.col-first { width: 55%; }
Chris@6: 
Chris@2:   .views-view-grid td { vertical-align: top; }
Chris@2: 
Chris@2:   .views-view-grid .views-field-image-attach-images { float: left; margin-right: 0.8em; }
Chris@2: 
Chris@5:   .views-view-grid h3 { margin-top: 0; }
Chris@5: