diff layout.css @ 0:1700a4568043

Initial import
author Chris Cannam
date Thu, 23 Jun 2011 10:31:17 +0100
parents
children 6b9d46abd911
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/layout.css	Thu Jun 23 10:31:17 2011 +0100
@@ -0,0 +1,297 @@
+/* $Id: layout-liquid.css,v 1.5.2.4 2009/02/13 19:30:50 johnalbin 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
+  {
+  }
+
+  #page,
+  #closure-blocks
+  {
+    min-width: 600px; /* Don't allow the browser to make the site unreadable. */
+  }
+
+  #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
+  {
+    float: left;
+  }
+
+  #site-name
+  {
+  }
+
+  #site-slogan
+  {
+  }
+
+  #header-blocks
+  {
+    clear: both; /* Clear the logo */
+  }
+
+/** main (container for everything else) **/
+  #main
+  {
+    position: relative;
+  }
+
+  #main-inner
+  {
+  }
+
+/** content **/
+  #content
+  {
+    float: left;
+    width: 100%;
+    margin-left: 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,
+  .no-sidebars #content-inner
+  {
+    margin: 0;
+    padding: 0;
+  }
+
+  .sidebar-left #content-inner
+  {
+    padding-left: 20%; /* The width + left margin of #sidebar-left. */
+    padding-right: 0;
+  }
+
+  .sidebar-right #content-inner
+  {
+    padding-left: 0;
+    padding-right: 20%; /* The width + right margin of #sidebar-right. */
+  }
+
+  .two-sidebars #content-inner
+  {
+    padding-left: 20%; /* The width + left margin of #sidebar-left. */
+    padding-right: 20%; /* The width + right margin of #sidebar-right. */
+  }
+
+/** 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: 3.6em; /* 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: 3.6em; /* Set this to the same value as the navbar height above. */
+  }
+
+  #navbar-inner
+  {
+  }
+
+  #search-box
+  {
+    width: 20%;
+    margin-right: -20%; /* Negative value of #search-box's width. */
+    float: left;
+  }
+
+  #primary
+  {
+    margin-left: 20%;
+  }
+
+  #secondary
+  {
+    margin-left: 20%; /* Width of search-box */
+  }
+
+  #navbar ul /* Primary and secondary links */
+  {
+    margin: 0;
+    padding: 0;
+    text-align: left;
+  }
+
+  #navbar li /* A simple method to get navbar links to appear in one line. */
+  {
+    float: left;
+    padding: 0 10px 0 0;
+  }
+
+  /* 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;
+    width: 18%;
+    margin-left: 1%;
+    margin-right: -20%; /* 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 20px 0 0;
+    padding: 0;
+  }
+
+/** sidebar-right **/
+  #sidebar-right
+  {
+    float: right;
+    width: 18%;
+    margin-left: -20%; /* Negative value of #sidebar-right's width + right margin. */
+    margin-right: 1%;
+    padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
+  }
+
+  #sidebar-right-inner
+  {
+    margin: 0 0 0 25px;
+    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;
+  }
+  */