css/layout.css

   1 /*
   2  Tenative color scheme:
   3  #0074C6        #95B2C6 #639DC6         #162F42 #2C5F84
   4  4A7695 819BAD
   5  */
   6
   7 html {
   8         margin: 0;
   9         height: 100%;
  10                 overflow:hidden;
  11 }
  12 body {
  13         height: 100%;
  14         margin: 0;
  15         font-size: 62.5%;
  16         background-color: #d4d0c8;
  17 }
  18
  19 #top, #left, #bottom, div.title, div.mceToolbarExternal, ul.tabstrip, div.field label, #separator {
  20
  21 /*-moz-user-select: none;*/ /*need to explicitly allow input box selection becuase of this */
  22
  23 }
  24
  25
  26
  27
  28 form fieldset {
  29         margin: 0;
  30         padding: 0;
  31         border-style: none;
  32 }
  33 form#Form_EditForm fieldset {
  34         height: 100%;
  35 }
  36
  37
  38 body.stillLoading select {
  39         display: none;
  40 }
  41
  42
  43
  44 /** 3-PANEL LAYOUT **/
  45 #top {
  46         font-size: 1.4em;
  47         height: 51px;
  48         padding: 3px;
  49         background: url(../images/mainmenu/top-bg.gif) top left repeat-x;
  50         color: #FFF;
  51         border-bottom: 3px solid #d4d0c8;
  52         overflow: hidden;
  53 }
  54 #left {
  55         position: absolute;
  56         top: 51px;
  57         left: 3px;
  58         width: 205px;
  59         height: 92%;
  60         z-index: 50;
  61         border : 1px #808080 solid;
  62         background-color:#FFFFFF;
  63 }
  64 #right, #rightbottom {
  65         position: absolute;
  66         left: 208px;
  67         top: 51px;
  68         height: 92%;
  69         width: 600px;
  70         overflow: auto;
  71         z-index: 50;
  72         border: 1px #808080 solid;
  73         background-color: white;
  74         margin-right : 3px;
  75 }
  76
  77 #rightbottom {
  78         height: 30%;
  79 }
  80
  81 #separator {
  82         position: absolute;
  83         top: 51px;
  84         left: 205px;
  85         height: 92%;
  86         width: 3px;
  87         cursor: e-resize;
  88         border-left : 1px solid #ffffff;
  89 }
  90
  91
  92 /**
  93  * Hidden left-hand panel
  94  */
  95 #left.hidden form, #left.hidden .title, #left.hidden #TreeActions {
  96         display: none;
  97 }
  98
  99 #left.hidden {
 100         width: 18px;
 101         display: block;
 102 }
 103 #separator.hidden {
 104         display: none;
 105 }
 106
 107
 108 #left div.title, #right div.title, #rightbottom div.title{
 109         border-top: 1px #77BBEE solid;
 110         background-image:url(../images/textures/obar.gif);
 111         height : 22px !important;
 112         background-color : #0075C9;
 113         background-repeat : repeat-x !important;
 114         background-position: 0px 0px;
 115
 116
 117
 118 }
 119
 120 #rightbottom div.light {
 121
 122         background-image: url(../images/textures/obar-light.png) !important;
 123
 124 }
 125
 126
 127 #left div.title div, #right div.title div, #rightbottom div.title div{
 128         font-size : 14px;
 129         font-weight : bold;
 130         color: white;
 131         padding: 2px 0 0 4px;
 132         background-position: 2px 2px;
 133         background-repeat:no-repeat;
 134         padding-left : 20px;
 135         border-top: 1px #77BBEE solid;
 136
 137 }
 138
 139 #left h2 {
 140         margin: 0;
 141         background-image:url(../images/textures/obar-18.gif);
 142         height: 18px;
 143         line-height: 18px;
 144         color: white;
 145         font-size: 12px;
 146         padding-left: 3px;
 147 }
 148
 149
 150
 151 /** TOP PANEL **/
 152 #top #MainMenu {
 153         margin: 0;
 154         padding: 0;
 155 }
 156 #top #MainMenu li {
 157         margin: 8px 8px 0 8px;
 158         padding: 6px 8px 0 28px;
 159         list-style-type: none;
 160         float: left;
 161         height: 32px;
 162         background-repeat: no-repeat;
 163         cursor: pointer;
 164 }
 165 html>body #top #MainMenu li {
 166         height: 28px; /* 32 - 6 from the padding */
 167 }
 168
 169 #top #MainMenu a {
 170         color: white;
 171         text-decoration: none;
 172 }
 173         #top #MainMenu a:hover {
 174                 text-decoration: underline;
 175         }
 176
 177 #top #MainMenu .current {
 178         background-color: #d4d0c8;
 179         background-position: 5px 5px;
 180         position: relative;
 181         top : -7px;
 182         height : 31px;
 183         padding-top : 12px;
 184         padding-left : 30px;
 185         -moz-border-radius-topright : 8px;
 186         -moz-border-radius-topleft : 8px;
 187         border : 1px solid #65686e;
 188         border-bottom : none;
 189
 190
 191 }
 192
 193 #top #MainMenu .current A:link,#top #MainMenu .current A:visited {
 194
 195         color : black;
 196
 197 }
 198
 199
 200
 201 #top #MainMenu #Menu-content {  background-image: url(../images/mainmenu/content.gif); }
 202 #top #MainMenu #Menu-statistics { background-image: url(../images/mainmenu/statistics.gif); }
 203 #top #MainMenu #Menu-security { background-image: url(../images/mainmenu/members.gif); }
 204 #top #MainMenu #Menu-report { background-image: url(../images/mainmenu/reports.gif); }
 205 #top #MainMenu #Menu-newsletter { background-image: url(../images/mainmenu/emails.gif); }
 206 #top #MainMenu #Menu-files { background-image: url(../images/mainmenu/files.gif); }
 207
 208 #top #MainMenu #Menu-help { background-image: url(../images/mainmenu/help.gif);
 209         float: right;
 210         /*padding: 6px 28px 0 8px;
 211         background-position: 100% 0;*/
 212         margin-right: 60px;
 213 }
 214
 215
 216 #top #Logo {
 217         float: right;
 218         margin: 0;
 219         padding: 16px 60px 16px 0;
 220         height: 32px;
 221         font-size: 16px;
 222         background: url(../images/mainmenu/logo.gif) right top no-repeat;
 223 }
 224 html>body #top #Logo {
 225         padding-bottom: 0;
 226 }
 227
 228 #top #Logo a {
 229         color: white;
 230 }
 231
 232
 233
 234
 235
 236 #bottom {
 237         width: 100%;
 238         position: absolute;
 239         bottom: 0;
 240         left: 0;
 241         border-top: 3px solid #d4d0c8;
 242         background-color:#81858d;
 243         height: 18px;
 244         overflow:hidden;
 245         background-image:url(../images/textures/bottom.png);
 246
 247 }
 248
 249 #bottom .holder {
 250
 251         text-align: center;
 252         padding-top : 3px;
 253         padding-left : 3px;
 254         padding-right : 6px;
 255         font-size: 10px;
 256         color: white;
 257         border-top: 1px solid #555555;
 258
 259 }
 260
 261 #bottom #logInStatus {
 262         float: right;
 263 }
 264         #bottom #logInStatus a {
 265                 color: #FFFFFF;
 266                 text-decoration: underline;
 267         }
 268         #bottom #logInStatus a:hover {
 269                 color: #CDC9C1;
 270                 text-decoration: underline;
 271         }
 272
 273 #bottom #switchView {
 274         float: left;
 275
 276 }
 277
 278 #bottom .bottomTabs a {
 279         display: block;
 280         float : left;
 281         height : 13px;
 282         padding-left : 12px;
 283         padding-right : 12px;
 284         position:relative;
 285         top : -3px;
 286         border : 1px solid #65686e;
 287         border-top : none;
 288         cursor:pointer;
 289         background-color: #cdc9c1;
 290         color : #333333;
 291         -moz-border-radius-bottomright : 4px;
 292         -moz-border-radius-bottomleft : 4px;
 293 }
 294
 295 #bottom .bottomTabs div.blank {
 296         display: block;
 297         float : left;
 298         height : 13px;
 299         padding-left : 12px;
 300         padding-right : 12px;
 301         position:relative;
 302         top : -3px;
 303         border : 1px solid #65686e;
 304         border-top : none;
 305         cursor:pointer;
 306         background-color: #cdc9c1;
 307         color : #333333;
 308
 309         border : none;
 310         background-color: transparent;
 311         padding-right: 2px;
 312         padding-left: 2px;
 313         padding-top : 2px;
 314         color:#FFFFFF;
 315 }
 316
 317
 318 #bottom .bottomTabs a.current {
 319         background-color : #d4d0c8;
 320         padding-top : 1px;
 321         top : -5px;
 322         height : 15px;
 323         font-weight:bold;
 324         font-size : 11px;
 325         border : 1px solid #555555;
 326 }
 327
 328
 329 /** LEFT PANEL **/
 330
 331 #sitetree_holder {
 332         height: 80%;
 333         width: 100%;
 334         overflow-y: auto;
 335         overflow-x: hidden;
 336 }
 337 #sitetree {
 338         margin-top: 2px;
 339         width: 500px; /* IE's chocking right now */
 340 }
 341 html>body #sitetree {
 342         width: auto;
 343 }
 344
 345 div.spacer, li.spacer {
 346         list-style-type: none;
 347         float: none;
 348         clear: both;
 349         background-color: transparent;
 350         border-style: none;
 351         padding: 0;
 352         margin: -1px 0 0 0;
 353         height: 1px;
 354         font-size: 1px;
 355         width: auto;
 356 }
 357 /** RIGHT PANEL **/
 358
 359 .mceToolbarExternal {
 360         background-color: #EEE;
 361         border-bottom: 1px #CCC solid;
 362         /*position: absolute;
 363         top: 23px;
 364         left: 0;*/
 365         display: block;
 366 }
 367
 368         .mceToolbarExternal a {
 369                 text-decoration: none;
 370         }
 371
 372
 373 #right form#Form_EditorToolbarLinkForm,
 374 #right form#Form_EditorToolbarImageForm,
 375 #right form#Form_EditorToolbarFlashForm {
 376         background-color: #EEE;
 377         border-bottom: 1px #CCC solid;
 378         display: none;
 379         margin: 1px 0 0 0;
 380         padding: 5px;
 381         height: 115px;
 382         /*
 383          * HACK IE (all versions): container needs to be higher stacking order
 384          * than any DOM-elemnt under it.
 385          * @see http://www.aplus.co.yu/lab/z-pos/
 386          */
 387         z-index: 1001;
 388 }
 389
 390 #right form#Form_EditorToolbarImageForm {
 391         height: 160px;
 392 }
 393 #right form#Form_EditorToolbarFlashForm {
 394         height: 130px;
 395 }
 396
 397
 398 #right form#Form_EditorToolbarLinkForm ul.optionset {
 399         height: 1em;
 400         margin: 0;
 401 }
 402 #right form#Form_EditorToolbarLinkForm ul.optionset li {
 403         float: left;
 404 }
 405
 406 .thumbnailstrip {
 407         height: 58px;
 408         overflow: auto;
 409         white-space: nowrap;
 410         width: 100%;
 411         float: left;
 412         border : 1px solid #AAAAAA;
 413 }
 414
 415 .thumbnailstrip ul {
 416         margin: 0;
 417         padding: 0;
 418         list-style: none;
 419 }
 420
 421 .thumbnailstrip li {
 422         float: left;
 423         margin-right: 4px;
 424 }
 425
 426 .indicator.inline {
 427         display: inline;
 428         margin-left: 5px;
 429         vertical-align: middle;
 430 }
 431
 432 p.Actions {
 433         vertical-align: middle;
 434 }
 435
 436 .indicator.block {
 437         display: inline;
 438 }
 439
 440 /* CMS specific icons for the tree */
 441
 442
 443 ul.tree li.Root span.Root span.c a {
 444
 445         background-image : url(../../cms/images/treeicons/root.png) !important;
 446
 447 }