mod/template/templates/Default_Template/css

   1 /*
   2 Elgg general CSS
   3 CSS last updated 16/01/07
   4 Theme adapted from:
   5 Theme Name: Light
   6 Theme URI: http://vaguedream.com/wordpress-themes/
   7 Description: A theme created by <a href="http://vaguedream.com" target="_blank">Stephen Reinhardt</a>.
   8 Version: 1.0
   9 Author: Stephen Reinhardt
  10 Author URI: http://vaguedream.com/
  11 */
  12
  13 /*
  14    GLOBALS: used to set all the general elements
  15 */
  16
  17 body {
  18         background:#e5e5e5; url({{url}}mod/template/templates/Default_Template/images/wrap.gif) repeat-y;
  19 color:#697C83;
  20 font-family:'Trebuchet MS','Lucida Grande', Arial, sans-serif;
  21 text-align:left;
  22 margin:0 auto;
  23 padding:0;
  24 font-size: 80%;
  25 }
  26
  27 p {
  28   color:#555;
  29   margin:0 0 10px 0;
  30 }
  31
  32 a {
  33   text-decoration:none;
  34   color:#555;
  35 }
  36
  37 ol, ul {
  38   color:#697C83;
  39 }
  40
  41 h1 {
  42   font-size:130%;
  43 }
  44
  45 h2, h3, h4, h5 {
  46    font-size:100%;
  47 }
  48
  49 blockquote{
  50         background: #EEE url({{url}}mod/template/templates/Default_Template/images/blockquote.png) no-repeat bottom left;
  51         padding: 10px;
  52         padding-bottom: 40px;
  53         margin: 1em;
  54 }
  55
  56 /*
  57    TABLES IN ELGG
  58 */
  59
  60 td {
  61   border:1px solid #eee;
  62   padding:0;
  63   margin:0;
  64 }
  65
  66 td h4, h3, h5 {
  67   padding:0;
  68   margin:0;
  69 }
  70
  71 /*
  72    CONTAINER: WRAPS THE HEADER AND MAIN CONTENT AREA BELOW THE USER TOOLBAR
  73 */
  74
  75 div#container {
  76         width:940px;
  77         margin:0 auto;
  78         padding:0;
  79         background:#fff;
  80         border-top:1px solid #fff;
  81 }
  82
  83 /*
  84    HEADER: THE HEADER INCLUDES THE LOGO AND SEARCH BAR
  85 */
  86
  87 div#header {
  88    margin:0;
  89    padding:0;
  90    text-align:left;
  91    background:url({{url}}mod/template/templates/Default_Template/images/header-bg.gif) repeat-x;
  92    position:relative;
  93    width:940px;
  94    height:120px;
  95  }
  96
  97 /*
  98    LOGO: LOCATED WITHIN HEADER
  99 */
 100
 101 div#header #logo{
 102         margin: 0px;
 103         padding:10px;
 104         float:left;
 105 }
 106
 107 div#header #logo h1 {
 108    font-size:30px;
 109    padding:0;
 110    margin:10px 0 6px 0;
 111 }
 112
 113 div#header #logo h1 a{
 114    color:#fff;
 115    font-family:Helvetica, "Myriad Web", Arial, sans-serif;
 116 }
 117
 118 div#header #logo h2{
 119    color:#F17D00;
 120    padding:0;
 121    margin:0;
 122    font-size:1.2em;
 123 }
 124
 125 /*
 126    SEARCH BAR: LOCATED WITHIN HEADER
 127 */
 128
 129 div#header #search-header {
 130    float:right;
 131    background:url({{url}}mod/template/templates/Default_Template/images/search_icon.gif) no-repeat left top;
 132    width:330px;
 133    margin:0;
 134    padding:0;
 135    position:absolute;
 136    top:10px;
 137    right:0;
 138 }
 139
 140 div#header #search-header img {
 141    margin:0 0 0 10px;
 142 }
 143
 144 div#header #search-header p {
 145    padding:0 0 0 15px;
 146    margin:0;
 147 }
 148
 149 div#header #search-header span a {
 150    color:#fff;
 151 }
 152
 153 /*
 154    CONTENT-HOLDER: WRAPS THE MAIN PAGE CONTENT. THIS CAN INCLUDE
 155    THE SINGLE PAGE LAYOUT AND THE SPLIT PANE (CONTENT AND SIDEBAR)
 156 */
 157
 158 #content-holder {
 159    padding:0px;
 160    margin:0px;
 161    width:940px;
 162    min-height:500px;
 163    overflow:hidden;
 164    position:relative;
 165  }
 166
 167 div#content-holder a:hover {
 168     text-decoration:underline;
 169 }
 170
 171 div#content-holder h1 {
 172     font-size:150%;
 173 }
 174
 175 div#content-holder h2 {
 176           border:0;
 177           border-bottom:1px solid #eee;
 178           padding:0;
 179           margin:0 0 10px 0;
 180           color:#666;
 181           background:#fff;
 182          font-size:1.1em;
 183 }
 184
 185 /*
 186    VARIOUS LAYOUTS WITHIN CONTENT-HOLDER
 187 */
 188
 189 /*
 190    THE MAIN CONTENT AREA WHEN IT IS A SINGLE PAGE, NO SIDEBAR
 191 */
 192
 193 div#single-page {
 194     margin: 0;
 195     padding: 0 15px 0 0;
 196     width:900px;
 197     text-align: left;
 198     background-color: #fff;
 199     color:#000;
 200     border:1px solid #eee;
 201 }
 202
 203 /*
 204    THE MAIN CONTENT AREA WHEN THE SIDEBAR IS IN PLACE
 205 */
 206
 207 div#splitpane-content {
 208     margin: 0;
 209     padding: 0 0 0 10px;
 210     width:690px;
 211     text-align: left;
 212     float: left;
 213     background-color: #fff;
 214     color:#000;
 215     overflow-x:hidden;
 216 }
 217
 218 /*
 219    SIDEBAR: THIS IS ONLY PRESENT WHEN SPLITPANE-CONTENT IS IN USE
 220 */
 221
 222 div#splitpane-sidebar {
 223    width: 220px;
 224    margin:0;
 225    padding:0;
 226    background:#fff url({{url}}mod/template/templates/Default_Template/images/side-back.gif) repeat-y;
 227    margin:0;
 228    float: right;
 229 }
 230
 231 /*
 232    THE SIDEBAR CONTENTS
 233 */
 234
 235 div#splitpane-sidebar td {
 236    width: 200px;
 237    background:#fff;
 238    margin:0 0 0 20px;
 239   }
 240
 241 div#splitpane-sidebar ul {
 242     margin: 0;
 243     padding: 0;
 244     list-style: none;
 245 }
 246
 247 div#splitpane-sidebar ul li {
 248     margin:10px 0;
 249     padding-left: 5px;
 250     border-bottom:1px dashed #eee;
 251 }
 252
 253 div#splitpane-sidebar ul li ul li a {
 254      padding:0 0 0 5px;
 255 }
 256
 257 div#splitpane-sidebar h2 {
 258     text-align:left;
 259     border-bottom:1px solid #ccc;
 260     color:#777;
 261     font-size:0.9em;
 262     width:200px;
 263 }
 264
 265 /*
 266    FOOTER
 267 */
 268
 269 div#footer {
 270     background:url({{url}}mod/template/templates/Default_Template/images/footer.gif) repeat-x top;
 271     text-align: center;
 272     padding:10px 0 0 0;
 273     font-size:1em;
 274     height:80px;
 275     margin:0;
 276     color:#fff;
 277     width:100%;
 278 }
 279
 280 div#footer a {
 281    color:#fff;
 282 }
 283 div#footer img {
 284    margin:20px 0 0 0;
 285 }
 286
 287 div#footer a:hover {
 288    text-decoration:underline;
 289  }
 290
 291 div#footer a:link, div#footer a:visited {
 292     text-align:right;
 293 }
 294
 295 /*
 296    SYSTEM MESSAGES
 297 */
 298
 299 div#system-message{
 300     border:1px solid #D3322A;
 301     background:#F7DAD8;
 302     color:#000;
 303     padding:3px 50px;
 304     margin:20px 20px 0 20px;
 305 }
 306
 307 div#system-message p{
 308    padding:0px;
 309    margin:2px;
 310  }
 311
 312 /*
 313   CLEAR BOTH
 314 */
 315
 316 .clearing {
 317     clear:both;
 318 }
 319
 320 /*
 321    THIS IS THE END OF THE MAIN PAGE COMPONENTS - EVERYTHING BELOW THIS IS ASSOCIATED WITH VARIOUS ELEMENTS
 322    WITHIN ELGG, THIS INCLUDES THE BLOG CLASSESS, PROFILE, FILES, SIDEBAR WIDGETS, PROFILE WIDGETS ETC.
 323 */
 324
 325 /*
 326    BLOGGING ENGINE
 327 */
 328
 329 .weblog-post {
 330    margin:20px 0 10px 0;
 331 }
 332
 333 .user {
 334   float:left;
 335   margin:5px 10px 10px 0;
 336   height:120px;
 337 }
 338
 339 .user img {
 340    border:1px solid #eee;
 341    padding:2px;
 342 }
 343
 344 .weblog-keywords p a {
 345    margin:20px 0 0 0;
 346    padding:0;
 347    clear:both;
 348 }
 349
 350 .weblog-title {
 351    margin:10px 0 10px 105px;
 352 }
 353
 354 .post {
 355    margin:10px 0 10px 105px;
 356    background:url({{url}}mod/template/templates/Default_Template/images/infoholder_bg.gif) left repeat-y;
 357 }
 358
 359 .info {
 360   border:1px solid #ccc;
 361   margin:10px 0 10px 105px;
 362   clear:both;
 363 }
 364
 365 .info p {
 366    padding:0 0 0 10px;
 367    margin:0;
 368    color:#99000;
 369 }
 370
 371 .info p a {
 372    font-size:0.9em;
 373    color:#555;
 374 }
 375
 376 /* this is the thin line between the actual post and comments */
 377
 378 #comments-divide {
 379    height:1px;
 380    background:#ccc;
 381 }
 382
 383 .comment-owner {
 384     border:1px solid #eee;
 385     background:#f2f7fb;
 386     padding:5px;
 387     margin:20px 0 5px 0;
 388     height:50px;
 389     width:550px;
 390 }
 391
 392 .comment-owner img {
 393    margin:0px 5px 0px 0px;
 394    text-align:left;
 395 }
 396
 397 .comment-owner a {
 398    background:#f2f7fb;
 399 }
 400
 401 .comment-owner p {
 402   padding:0;
 403   margin:0;
 404 }
 405
 406 /* END OF BLOGGING ENGINE */
 407
 408 /*
 409    SUB MENU OPTIONS: THESE WILL BE MOVED TO THE NEW SIDEBAR SHORTLY
 410 */
 411
 412 div#sub-menu p {
 413   margin:10px 0 10px 0;
 414   padding:3px;
 415   background:#efefef;
 416   border:1px solid #ccc;
 417 }
 418
 419 /* END OF SUB-MENU DIV */
 420
 421 /*
 422   INFOHOLDER: this holds profile data, account settings and administration content
 423 */
 424
 425 .infoholder {
 426    margin:10px 0 20px 0;
 427 }
 428
 429 .infoholder p {
 430    padding:5px 0 5px 10px;
 431    background:url({{url}}mod/template/templates/Default_Template/images/infoholder_bg.gif) left repeat-y;
 432 }
 433
 434 /* the end of INFOHOLDER */