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