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   clear: both;\r
 160 }\r
 161 \r
 162 \r
 163 \r
 164 \r
 165 /**************************************************************\r
 166    .bigLinks: Large, clickable links\r
 167  **************************************************************/\r
 168 \r
 169 ul.bigLinks {\r
 170   margin: 10px 0;\r
 171   padding: 0;\r
 172   list-style: none;\r
 173   \r
 174 }\r
 175 \r
 176 ul.bigLinks li {\r
 177   display: inline;\r
 178   margin: 0;\r
 179   padding: 0;\r
 180   background: none;\r
 181 }\r
 182 \r
 183 ul.bigLinks li a,\r
 184 ul.bigLinks li a:visited {  \r
 185   display: block;\r
 186 \r
 187   margin: 10px 0;\r
 188   padding: 3px;\r
 189 \r
 190   text-decoration: none;\r
 191   background-color: #FFF;\r
 192   border: 0;  \r
 193 }\r
 194 \r
 195 ul.bigLinks li a:hover {\r
 196   padding-bottom: 2px;\r
 197   background-color: #F1FFE3;\r
 198   border-bottom: 1px solid #B8E78B;\r
 199 }\r
 200 \r
 201 ul.bigLinks li a span.title {\r
 202   color: #5E9040;  \r
 203   border-bottom: 1px solid #B8E78B;\r
 204 }\r
 205 \r
 206 ul.bigLinks li a:hover span.title {\r
 207   color: #3C5D29;\r
 208   border-bottom: 1px solid #4A6E35;\r
 209 }\r
 210 \r
 211 ul.bigLinks li a span.desc {\r
 212   display: block;\r
 213   color: #6D6864;\r
 214 }\r
 215 \r
 216 ul.bigLinks li a:hover span.desc {\r
 217   color: #555;\r
 218 }\r
 219 \r
 220 \r
 221 \r
 222 /**************************************************************\r
 223    Width classes used by the site columns\r
 224  **************************************************************/\r
 225 \r
 226 .width100 {\r
 227   width: 100%;\r
 228 }\r
 229 \r
 230 .width75 {\r
 231   width: 73%;\r
 232 }\r
 233 \r
 234 .width66 {\r
 235   width: 64%;\r
 236 }\r
 237 \r
 238 .width50 {\r
 239   width: 48%;\r
 240 }\r
 241 \r
 242 .width33 {\r
 243   width: 31%;\r
 244 }\r
 245 \r
 246 .width25 {\r
 247   width: 23%;\r
 248 }\r
 249 \r
 250 \r
 251 \r
 252 /**************************************************************\r
 253    Alignment classes\r
 254  **************************************************************/\r
 255 \r
 256 .floatLeft {\r
 257   float: left;\r
 258 }\r
 259 \r
 260 .floatRight {\r
 261   float: right;\r
 262 }\r
 263 \r
 264 .alignLeft {\r
 265   text-align: left;\r
 266 }\r
 267 \r
 268 .alignRight {\r
 269   text-align: right;\r
 270 }\r
 271 \r
 272 \r
 273 \r
 274 /**************************************************************\r
 275    Generic display classes\r
 276  **************************************************************/\r
 277 \r
 278 .clear {\r
 279   clear: both;\r
 280 }\r
 281 \r
 282 .block {\r
 283   display: block;\r
 284 }\r
 285 \r
 286 .big {\r
 287   font-size: 1.3em;  \r
 288 }\r
 289 \r
 290 .small {\r
 291   font-size: 0.85em;  \r
 292 }\r
 293 \r
 294 .bold {\r
 295   font-weight: bold;\r
 296 }\r
 297 \r
 298 .italic {\r
 299   font-style: italic;\r
 300 }\r
 301 \r
 302 .grey {\r
 303   color: #AAA;\r
 304 }\r
 305 \r
 306 .green {\r
 307   color: #82C048;\r
 308 }\r
 309 \r
 310 .darkBrown {\r
 311   color: #512103;\r
 312 }\r
 313 \r
 314 \r
 315 .greenBg {\r
 316   padding: 0 10px;\r
 317   background-color: #F1FFE3;\r
 318   border-bottom: 1px solid #B8E78B;\r
 319 }\r
 320 \r
 321 .highlight {\r
 322   padding: 1px 2px;\r
 323   background: #D9F5EC;\r
 324   border-top: 1px solid #BDEDDE;\r
 325 }\r
 326 \r
 327 \r
 328 \r
 329 \r
 330 \r