theme/default/style/layout.css

   1 /**************************************************************\r
   2    AUTHOR:  Pat Heard (fullahead.org)\r
   3    DATE:    2006.09.12\r
   4    PURPOSE: Controls the layout of the site and styles\r
   5             the menus\r
   6  **************************************************************/\r
   7 \r
   8 /**************************************************************\r
   9    #wrapper & #content: wrapper positions and sets the width\r
  10    on the content.  The background is then applied to #content.\r
  11  **************************************************************/\r
  12 \r
  13 #wrapper {\r
  14   width: 589px;\r
  15   height: 100%;\r
  16   margin: 0 auto;\r
  17 \r
  18   text-align: left;\r
  19 }\r
  20 \r
  21 #content {\r
  22   float: left;\r
  23   width: 589px;\r
  24   height: 100%;\r
  25   min-height: 100%;\r
  26 \r
  27   background: url(../image/content.gif) repeat-y top center;\r
  28 }\r
  29 \r
  30 #content[id] {\r
  31   height: auto;\r
  32   background: url(../image/content.png) repeat-y top center;\r
  33 }\r
  34 \r
  35 /**************************************************************\r
  36    #header: Holds the site title and header images\r
  37  **************************************************************/\r
  38 \r
  39 #header {\r
  40   padding: 60px 0 2em 49px;\r
  41   background: url(../image/header.jpg) no-repeat top center;\r
  42 }\r
  43 \r
  44 /* Forces IE to set the hasLayout flag and show the header at the height of its contents \*/\r
  45 * html #header {\r
  46   height: 1%;\r
  47 }\r
  48 /* End hide from IE-mac */\r
  49 \r
  50 #header h1,\r
  51 #header h2 {\r
  52   margin: 0;\r
  53   padding: 0;\r
  54   background: none;\r
  55 }\r
  56 \r
  57 #header h1 {\r
  58   font-size: 3.5em;\r
  59   font-family: georgia;\r
  60   letter-spacing: -3px;\r
  61   color: #6E310B;\r
  62 }\r
  63 \r
  64 /**************************************************************\r
  65    #menu: The top level site menu\r
  66  **************************************************************/\r
  67 \r
  68 ul#menu {\r
  69   width: 491px;\r
  70   margin: 0 auto;\r
  71   padding: 0 !important;\r
  72   padding: 0 0 0 10px;\r
  73 }\r
  74 \r
  75 ul#menu li {\r
  76   display: inline;\r
  77   list-style: none;\r
  78   margin: 0;\r
  79   padding: 0;\r
  80 }\r
  81 \r
  82 ul#menu li a {\r
  83   float: left;\r
  84   padding: 15px 0 5px 0;\r
  85 \r
  86   font: 400 1.54em georgia, serif;\r
  87   text-align: center;\r
  88   text-decoration: none;\r
  89 \r
  90   color: #61804E;\r
  91   border-bottom: 1px solid #D3F1B6;\r
  92 }\r
  93 \r
  94 ul#menu li a:visited {\r
  95   background-color: #FFF;\r
  96 }\r
  97 \r
  98 ul#menu li a:hover {\r
  99   color: #2E5F0F;\r
 100   background: url(../image/menu.gif) repeat-x bottom left;\r
 101 }\r
 102 \r
 103 ul#menu li a.here {\r
 104   color: #512103;\r
 105   background: url(../image/menu.gif) repeat-x bottom left;\r
 106 }\r
 107 \r
 108 /* helper classes to control width of links in topbar */\r
 109 ul.two li a {\r
 110   width: 50%;\r
 111 }\r
 112 \r
 113 ul.three li a {\r
 114   width: 33%;\r
 115 }\r
 116 \r
 117 ul.four li a {\r
 118   width: 25%;\r
 119 }\r
 120 \r
 121 ul.five li a {\r
 122   width: 20%;\r
 123 }\r
 124 \r
 125 /**************************************************************\r
 126    #page: Holds the main page content.\r
 127  **************************************************************/\r
 128 \r
 129 #page {\r
 130   float: left;\r
 131   clear: both;\r
 132   width: 491px !important;\r
 133   width: 100%;\r
 134 \r
 135   padding: 2em 49px;\r
 136 }\r
 137 \r
 138 /**************************************************************\r
 139    .footer: Site footer\r
 140  **************************************************************/\r
 141 \r
 142 .footer {\r
 143   padding-top: 3em;\r
 144   font-size: 0.85em;\r
 145   clear: both;\r
 146 }\r
 147 \r
 148 /**************************************************************\r
 149    .bigLinks: Large, clickable links\r
 150  **************************************************************/\r
 151 \r
 152 ul.bigLinks {\r
 153   margin: 10px 0;\r
 154   padding: 0;\r
 155   list-style: none;\r
 156 \r
 157 }\r
 158 \r
 159 ul.bigLinks li {\r
 160   display: inline;\r
 161   margin: 0;\r
 162   padding: 0;\r
 163   background: none;\r
 164 }\r
 165 \r
 166 ul.bigLinks li a,\r
 167 ul.bigLinks li a:visited {\r
 168   display: block;\r
 169 \r
 170   margin: 10px 0;\r
 171   padding: 3px;\r
 172 \r
 173   text-decoration: none;\r
 174   background-color: #FFF;\r
 175   border: 0;\r
 176 }\r
 177 \r
 178 ul.bigLinks li a:hover {\r
 179   padding-bottom: 2px;\r
 180   background-color: #F1FFE3;\r
 181   border-bottom: 1px solid #B8E78B;\r
 182 }\r
 183 \r
 184 ul.bigLinks li a span.title {\r
 185   color: #5E9040;\r
 186   border-bottom: 1px solid #B8E78B;\r
 187 }\r
 188 \r
 189 ul.bigLinks li a:hover span.title {\r
 190   color: #3C5D29;\r
 191   border-bottom: 1px solid #4A6E35;\r
 192 }\r
 193 \r
 194 ul.bigLinks li a span.desc {\r
 195   display: block;\r
 196   color: #6D6864;\r
 197 }\r
 198 \r
 199 ul.bigLinks li a:hover span.desc {\r
 200   color: #555;\r
 201 }\r
 202 \r
 203 /**************************************************************\r
 204    Width classes used by the site columns\r
 205  **************************************************************/\r
 206 \r
 207 .width100 {\r
 208   width: 100%;\r
 209 }\r
 210 \r
 211 .width75 {\r
 212   width: 73%;\r
 213 }\r
 214 \r
 215 .width66 {\r
 216   width: 64%;\r
 217 }\r
 218 \r
 219 .width50 {\r
 220   width: 48%;\r
 221 }\r
 222 \r
 223 .width33 {\r
 224   width: 31%;\r
 225 }\r
 226 \r
 227 .width25 {\r
 228   width: 23%;\r
 229 }\r
 230 \r
 231 /**************************************************************\r
 232    Alignment classes\r
 233  **************************************************************/\r
 234 \r
 235 .floatLeft {\r
 236   float: left;\r
 237 }\r
 238 \r
 239 .floatRight {\r
 240   float: right;\r
 241 }\r
 242 \r
 243 .alignLeft {\r
 244   text-align: left;\r
 245 }\r
 246 \r
 247 .alignRight {\r
 248   text-align: right;\r
 249 }\r
 250 \r
 251 /**************************************************************\r
 252    Generic display classes\r
 253  **************************************************************/\r
 254 \r
 255 .clear {\r
 256   clear: both;\r
 257 }\r
 258 \r
 259 .block {\r
 260   display: block;\r
 261 }\r
 262 \r
 263 .big {\r
 264   font-size: 1.3em;\r
 265 }\r
 266 \r
 267 .small {\r
 268   font-size: 0.85em;\r
 269 }\r
 270 \r
 271 .bold {\r
 272   font-weight: bold;\r
 273 }\r
 274 \r
 275 .italic {\r
 276   font-style: italic;\r
 277 }\r
 278 \r
 279 .grey {\r
 280   color: #AAA;\r
 281 }\r
 282 \r
 283 .green {\r
 284   color: #82C048;\r
 285 }\r
 286 \r
 287 .darkBrown {\r
 288   color: #512103;\r
 289 }\r
 290 \r
 291 .greenBg {\r
 292   padding: 0 10px;\r
 293   background-color: #F1FFE3;\r
 294   border-bottom: 1px solid #B8E78B;\r
 295 }\r
 296 \r
 297 .highlight {\r
 298   padding: 1px 2px;\r
 299   background: #D9F5EC;\r
 300   border-top: 1px solid #BDEDDE;\r
 301 }\r
 302 \r
 303 ul.menuish li {\r
 304   display: inline;\r
 305   list-style: none;\r
 306 }\r