icculus.org git repositories - duncan/yastx-webclient/blob - public/stylesheets/CoolWater.css

   1 /********************************************\r
   2    AUTHOR:                      Erwin Aligam \r
   3    WEBSITE:                     http://www.styleshout.com/\r
   4         TEMPLATE NAME:          CoolWater\r
   5    TEMPLATE CODE:       S-0019\r
   6    VERSION:          1.0     \r
   7         DATE:                                   November-07-2007        \r
   8  *******************************************/\r
   9  \r
  10 /********************************************\r
  11    HTML ELEMENTS\r
  12 ********************************************/ \r
  13 \r
  14 /* top elements */\r
  15 * { margin: 0; padding: 0; outline: 0; }\r
  16 \r
  17 body {\r
  18         background: #caced1;\r
  19         font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;\r
  20         color: #777;\r
  21         text-align: center;\r
  22         margin: 15px 0;\r
  23 }\r
  24 \r
  25 /* links */\r
  26 a, a:visited {\r
  27         text-decoration: none;\r
  28         background: inherit;\r
  29         color: #FB9233; \r
  30 }\r
  31 a:hover {\r
  32         text-decoration: underline;\r
  33         background: inherit;\r
  34         color: #93C600;\r
  35 }\r
  36 \r
  37 /* headers */\r
  38 h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif;  }\r
  39 h1 {\r
  40         font-size: 180%;        \r
  41         font-weight: normal;    \r
  42         color: #555;\r
  43 }\r
  44 h2 {\r
  45         font-size: 160%;\r
  46         color: #88ac0b;\r
  47         font-weight: normal;\r
  48 }\r
  49 h3 {\r
  50         font-size: 135%;         \r
  51         color: #666666;\r
  52 }\r
  53 \r
  54 /* images */\r
  55 img {\r
  56         background: #fff;\r
  57    border: 1px solid #E5E5E5;\r
  58         padding: 5px;\r
  59 }\r
  60 img.float-right { margin: 5px 0px 10px 10px;  }\r
  61 img.float-left { margin: 5px 10px 10px 0px; }\r
  62 \r
  63 h1, h2, h3, p {\r
  64         margin: 10px 15px;\r
  65         padding: 0;\r
  66 }\r
  67 ul, ol {\r
  68         margin: 5px 15px;\r
  69         padding: 0 25px;\r
  70 }\r
  71 \r
  72 code {\r
  73   margin: 5px 0;\r
  74   padding: 15px;\r
  75   text-align: left;\r
  76   display: block;\r
  77   overflow: auto;  \r
  78   font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;\r
  79   /* white-space: pre; */\r
  80   border: 1px solid #E5F0FB;  \r
  81   background: #F4F8FD;\r
  82 }\r
  83 acronym {\r
  84   cursor: help;\r
  85   border-bottom: 1px dotted #777;\r
  86 }\r
  87 blockquote {\r
  88   margin: 10px 15px;\r
  89   padding: 0 0 0 25px;  \r
  90   font: bold 1.3em/1.5em "Trebuchet MS", Tahoma, arial, Sans-serif; \r
  91   color: #2361BA;\r
  92   border: 1px solid #E5F0FB;   \r
  93   background: #F4F8FD url(/images/quote.jpg) no-repeat 8px 6px;\r
  94 }\r
  95 \r
  96 /* start - table */\r
  97 table {\r
  98         border-collapse: collapse;\r
  99         margin: 10px 15px;      \r
 100 }\r
 101 th strong {\r
 102         color: #fff;\r
 103 }\r
 104 th {\r
 105         background: #306bc1 url(/images/button-bg.jpg) repeat-x 0 0; \r
 106         height: 35px;\r
 107         padding-left: 12px;\r
 108         padding-right: 12px;\r
 109         color: #fff;\r
 110         text-align: left;\r
 111         border: 1px solid #306bc1;\r
 112         border-bottom-width: 2px;\r
 113 }\r
 114 tr {\r
 115         height: 32px;\r
 116         background: #fff;       \r
 117 }\r
 118 td {\r
 119         padding-left: 12px;\r
 120         padding-right: 12px;\r
 121         border: 1px solid #E5F0FB; \r
 122 }\r
 123 /* end - table */\r
 124 \r
 125 /* form elements */\r
 126 form {\r
 127         margin:10px 15px; \r
 128         padding: 10px 0;\r
 129         border: 1px solid #E5F0FB; \r
 130         background: #F4F8FD;\r
 131 }\r
 132 fieldset {\r
 133         margin: 0;      padding: 0;\r
 134         border: none;\r
 135 }\r
 136 legend {\r
 137         display: none;\r
 138 }\r
 139 label {\r
 140         display:block;\r
 141         font-weight:bold;\r
 142         margin: 7px 0;\r
 143 }\r
 144 input {\r
 145         padding:3px;\r
 146         border: 1px solid #E5F0FB; \r
 147         font: normal 1em Verdana, sans-serif;\r
 148         color:#777;     \r
 149 }\r
 150 textarea {\r
 151         width:400px;\r
 152         padding:3px;\r
 153         font: normal 1em Verdana, sans-serif;\r
 154         border: 1px solid #E5F0FB; \r
 155         height:100px;\r
 156         display:block;\r
 157         color:#777;\r
 158 }\r
 159 input.button { \r
 160         font: bold 12px Arial, Sans-serif; \r
 161         height: 28px;\r
 162         margin: 0;\r
 163         padding: 2px 3px; \r
 164         color: #fff;\r
 165         background: #306bc1 url(/images/button-bg.jpg) repeat-x 0 0; \r
 166         border: 1px solid #306bc1;\r
 167 }\r
 168 \r
 169 /* search form */\r
 170 .searchform {\r
 171         background-color: transparent;\r
 172         border: none;   \r
 173         margin: 0; \r
 174         padding: 5px 0 5px 0;   \r
 175         width: 180px;   \r
 176 }\r
 177 .searchform p { margin: 0; padding: 0; }\r
 178 .searchform input.textbox { \r
 179         width: 110px;\r
 180         color: #777; \r
 181         height: 20px;\r
 182         padding: 2px;   \r
 183         border: 1px solid #D2E8F7; \r
 184         vertical-align: top;\r
 185 }\r
 186 .searchform input.button { \r
 187         width: 55px;\r
 188         height: 26px;\r
 189         padding: 2px 5px;\r
 190         vertical-align: top;\r
 191 }\r
 192 \r
 193 /********************************************\r
 194    LAYOUT\r
 195 ********************************************/ \r
 196 #wrap {\r
 197         width: 790px;\r
 198         background: #CCC url(/images/content.jpg) repeat-y center top;\r
 199         margin: 0 auto;\r
 200         text-align: left;\r
 201 }\r
 202 #content-wrap {\r
 203         clear: both;\r
 204         width: 760px;   \r
 205         margin: 5px auto;\r
 206         padding: 0;     \r
 207 }\r
 208 #header {\r
 209         position: relative;\r
 210         height: 131px;\r
 211         background: #caced1 url(/images/header.jpg) no-repeat center top;\r
 212         padding: 0;     \r
 213         color: #fff;    \r
 214 }\r
 215 #header h1#logo-text a {\r
 216         position: absolute;\r
 217         margin: 0; padding: 0;\r
 218         font: bolder 55px 'Trebuchet MS', Arial, Sans-serif;\r
 219         letter-spacing: -3px;\r
 220         color: #fff;\r
 221         text-transform: none;\r
 222         text-decoration: none;\r
 223         background: transparent;\r
 224         \r
 225         /* change the values of top and left to adjust the position of the logo*/\r
 226         top: 18px; left: 35px;  \r
 227 }\r
 228 #header p#slogan {\r
 229         position: absolute;\r
 230         margin: 0; padding: 0;\r
 231         font: bold 13px 'Trebuchet MS', Arial, Sans-serif;\r
 232         text-transform: none;\r
 233         color: #FFF;\r
 234         \r
 235         /* change the values of top and left to adjust the position of the slogan*/\r
 236         top: 80px; left: 50px;          \r
 237 }\r
 238 \r
 239 /* header links */\r
 240 #header #header-links {\r
 241         position: absolute;\r
 242         color: #C6DDEE;\r
 243         font: bold 14px"Trebuchet MS", Arial, Tahoma, Sans-serif;\r
 244         top: 20px; right: 20px; \r
 245 }\r
 246 #header #header-links a {       \r
 247         color: #fff;\r
 248         text-decoration: none;  \r
 249 }\r
 250 #header #header-links a:hover {\r
 251         color: #D4FF55; \r
 252 }\r
 253 \r
 254 /* navigation */\r
 255 #menu {\r
 256         clear: both;    \r
 257         margin: 0 auto; padding: 0;\r
 258         background: #81C524 url(/images/menu.jpg) no-repeat;    \r
 259         font: bold 16px/40px "trebuchet MS", Arial, Tahoma, Sans-serif;\r
 260         height: 40px;\r
 261         width: 790px;   \r
 262 }\r
 263 #menu ul {\r
 264         float: left;\r
 265         list-style: none;\r
 266         margin:0; padding: 0 0 0 20px;\r
 267 }\r
 268 #menu ul li {\r
 269         display: inline;\r
 270 }\r
 271 #menu ul li a {\r
 272         display: block;\r
 273         float: left;\r
 274         padding: 0 12px;\r
 275         color: #fff;    \r
 276         text-decoration: none;\r
 277         background: url(/images/sep.jpg) no-repeat 100% 100%;\r
 278 }\r
 279 #menu ul li a:hover {\r
 280         color: #3b5e0b; \r
 281 }\r
 282 #menu ul li#current a { \r
 283         color: #3b5e0b;\r
 284 }\r
 285 \r
 286 /* Main Column */\r
 287 #main {\r
 288         float: left;\r
 289         width: 555px;\r
 290         margin: 0; padding: 20px 0 0 0; \r
 291         display: inline;\r
 292         background: url(/images/box.jpg) no-repeat;     \r
 293 }\r
 294 #main h2 {\r
 295         font: normal 180% 'Trebuchet MS', Tahoma, Arial, Sans-serif;\r
 296         padding: 0;     \r
 297         margin-bottom: 0;               \r
 298         color: #2666c3;\r
 299 }\r
 300 #main h2 a {\r
 301         color: #2666c3;\r
 302         text-decoration: none;  \r
 303 }\r
 304 \r
 305 #main p, #main h1, #main h2, #main h3, #main ol, #main ul,\r
 306 #main blockquote, #main table, #main form {\r
 307         margin-left: 20px;\r
 308         margin-right: 25px;\r
 309 }\r
 310 #main ul li {\r
 311         list-style-image: url(/images/bullet.gif); \r
 312 }\r
 313 \r
 314 /* Sidebar */   \r
 315 #sidebar {\r
 316         float: right;\r
 317         width: 195px;\r
 318         padding: 0; margin: 10px 0 0 0; \r
 319         color: #777;    \r
 320 }       \r
 321 #sidebar h2 {\r
 322         margin: 15px 5px 10px 5px;\r
 323         font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;\r
 324         color: #555;    \r
 325 }\r
 326 #sidebar p {\r
 327         margin-left: 5px;\r
 328 }\r
 329 \r
 330 #sidebar ul.sidemenu {\r
 331         list-style: none;\r
 332         text-align: left;\r
 333         margin: 7px 10px 8px 0; padding: 0;\r
 334         text-decoration: none;  \r
 335         border-top: 1px solid #A9D4EF;  \r
 336 }\r
 337 #sidebar ul.sidemenu li {\r
 338         list-style: none;\r
 339         padding: 4px 0 4px 5px;\r
 340         margin: 0 2px;  \r
 341         color: #777;    \r
 342         border-bottom: 1px solid #D2E8F7; \r
 343 }\r
 344 * html body #sidebar ul.sidemenu li {\r
 345         height: 1%;\r
 346 }\r
 347 #sidebar ul.sidemenu li a {\r
 348         text-decoration: none;  \r
 349         color: #1773BC;                         \r
 350 }\r
 351 #sidebar ul.sidemenu li a:hover {       \r
 352         color: #333;\r
 353 }\r
 354 #sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }\r
 355 #sidebar ul.sidemenu ul li { border: none; }\r
 356 \r
 357 /* Footer */    \r
 358 #footer {\r
 359         color: #C6DDEE;\r
 360         background: #caced1 url(/images/footer.jpg) no-repeat center top;\r
 361         clear: both;\r
 362         width: 790px;\r
 363         height: 57px;\r
 364         text-align: center;     \r
 365         font-size: 90%; \r
 366 }\r
 367 #footer p { \r
 368         padding: 10px 0;\r
 369         margin: 0;\r
 370 }\r
 371 #footer a { \r
 372         color: #fff;\r
 373         text-decoration: none; \r
 374 }\r
 375 \r
 376 /* post footer */\r
 377 .post-footer {\r
 378         background: #F4F8FD;\r
 379         padding: 5px; margin: 20px 25px 0 25px;\r
 380         border: 1px solid #E5F0FB; \r
 381         font-size: 95%; \r
 382 }\r
 383 .post-footer .date {    padding-left: 0px; margin: 0 5px; }\r
 384 .post-footer .comments { padding-left: 0px; margin: 0 5px; }\r
 385 .post-footer .readmore { padding-left: 0px; margin: 0 5px; }\r
 386 \r
 387 .post-by { font-size: .95em;    margin-top: 0;  }\r
 388 \r
 389 /* alignment classes */\r
 390 .float-left  { float: left; }\r
 391 .float-right { float: right; }\r
 392 .align-left  { text-align: left; }\r
 393 .align-right { text-align: right; }\r
 394 \r
 395 /* display and additional classes */\r
 396 .clear { clear: both; }\r
 397 \r
 398 \r