web/css/ArticleLayout.css

   1 /*-----------------------------------------------------------------------
   2 This css file is part of a layout package. Used on its own it won't
   3 have the desired effect. The corresponding HTML file should LINK to a
   4 filter.css file which will then IMPORT this style sheet (effecively
   5 hiding it from IE3, IE4 and NN4). Imported ahead of this file should
   6 be one named lpf.css (lpf = Level Playing Field) which attempts to get
   7 all the different browsers using the same measurements, including font
   8 sizes.
   9
  10 Not related to the layout but also used in this example is 1 of Stu
  11 Nicholls' wonderful creations (somewhat customized). This styles the
  12 color boxes with rounded corners used in the content area. The style
  13 for this, also imported by filter.css, is cbrc.css and it contains its
  14 own documentation.
  15
  16 ======================================================================
  17   Copyright and LICENSE -- do not remove --
  18 ======================================================================
  19 This CSS file is copyrighted (c) 2005, Paul Pomeroy/AdaptiveView
  20
  21 see: http://design.adaptiveview.com
  22
  23 but free to use under a Creative Commons Attribution 2.5 license.
  24 Full details about this license are online at:
  25
  26 http://creativecommons.org/licenses/by/2.5/
  27 ----------------------------------------------------------------------- */
  28 html, body, #page {
  29   height:100%;
  30   width:100%;
  31 }
  32
  33 body {
  34   background-color: #fff;
  35   margin-left:auto;
  36   margin-right:auto;
  37   text-align:center;
  38 }
  39
  40 html>body, html>body #page {
  41   height:auto;
  42 }
  43
  44 #head {
  45   background: url(/Images/TopOfTheWorld.jpg);
  46   color:white;
  47   border-top:1px solid #306;
  48   border-bottom:1px solid #306;
  49   position:absolute;
  50   height:165px;
  51   left:0;
  52   min-width:775px;
  53   top:0px;
  54   width:100%;
  55   width:expression(document.body.clientWidth < 800? "775px": "100%" ); /* min-width IE style*/
  56   z-index:10;
  57 }
  58
  59 #head h1 {
  60   color:        #fff;
  61   font-size:    3em;
  62   padding-top:  20px;
  63   text-align:   center;
  64 }
  65
  66 #page {
  67   left:0;
  68   background: white;
  69   color: #2a4c96;
  70   position:absolute;
  71   text-align:center;
  72   top:166px;
  73   z-index:8;
  74 }
  75
  76 #content {
  77   margin-left:auto;
  78   margin-right:auto;
  79   max-width:955px;
  80   min-width:775px;
  81   padding-bottom:4.0em; /* you can get all of the padding set in one line, but Mac IE5.2 has issues with the shorthand method. */
  82   padding-left:4px;
  83   padding-right:4px;
  84   padding-top:10px;
  85   width:expression(document.body.clientWidth < 800? "775px" : document.body.clientWidth > 1024? "999px": "99%"); /* IE's version of min- and max-width */
  86   z-index:1;
  87 }
  88
  89 * html #page, * html #content  {
  90   height:100%;
  91 }
  92
  93 * html #page {
  94   width:auto;
  95 }
  96
  97 #foot {
  98   width:100%;
  99   z-index:99;
 100 }
 101
 102 #foot p {
 103   color:                #aaa;
 104   font-size:            80%;
 105   text-align:           center;
 106 }
 107
 108 html>body #foot { /* anyone but IE */ */
 109   bottom:               0;
 110   left:                 0;
 111   position:             absolute;
 112 }
 113
 114 * html #foot { /* IE */
 115   color:                #aaa;
 116   margin-left:          auto;
 117   margin-right:         auto;
 118   width:                auto;
 119 }
 120
 121 abbr {
 122   cursor: help;
 123 }
 124
 125 #head, #foot {
 126   padding-bottom:0;
 127   padding-top:0;
 128 }
 129
 130 #content p, #content h2, #content h3, #content h4, #content h5 {
 131   margin:11px 11px;
 132 }
 133
 134 #main {
 135   background:transparent;
 136   min-height:100%;
 137   z-index:15;
 138 }
 139
 140 #main {
 141   width:90%;
 142 }
 143
 144 #main p.tagline {
 145   color:#939;
 146   font-size:1.4em;
 147   font-style:italic;
 148   text-align:center;
 149 }
 150
 151
 152 .hide, .filtered {display:none;}
 153
 154 .clear {
 155   clear:both;
 156   margin-bottom: -1px; /* for Gecko-based browsers */
 157   overflow:hidden;
 158   padding-bottom: 1px; /* for Gecko-based browsers */
 159 }
 160
 161 .clearfix:after {
 162   clear: both;
 163   content: ".";
 164   display: block;
 165   height: 0;
 166   visibility: hidden;
 167 }
 168
 169 .clearfix {display: inline-table;}
 170
 171 /* Hides from IE-mac \*/
 172 * html .clearfix {height: 1%;}
 173 .clearfix {display: block;}
 174 /* End hide from IE-mac */