trunk/NP_TinyMCE2j/tinymce2j/plugins/ibrowser/css/style.css

   1 /* ================================================
   2 // PHP image browser - iBrowser
   3 // ================================================
   4 // iBrowser - style definitions
   5 // ================================================
   6 // Developed: net4visions.com
   7 // Copyright: net4visions.com
   8 // License: GPL - see license.txt
   9 // (c)2005 All rights reserved.
  10 // ================================================
  11 // Revision: 1.0                   Date: 08/03/2005
  12 // ================================================*/
  13
  14 body {
  15    margin: 5px;
  16    padding: 0px;
  17    color: #333333;
  18         background-color: #efefef;
  19         scrollbar-3dlight-color:#f5f5f5;
  20         scrollbar-arrow-color:#666666;
  21         scrollbar-base-color:#F0F0EE;
  22         scrollbar-darkshadow-color:#DDDDDD;
  23         scrollbar-face-color:#E0E0DD;
  24         scrollbar-highlight-color:#F0F0EE;
  25         scrollbar-shadow-color:#F0F0EE;
  26         scrollbar-track-color:#F5F5F5;
  27 }
  28 /* ---------------------------------------------------------------
  29 - font settings
  30 */
  31 body, form, table {
  32         font-size:10px;
  33         font-family:Verdana,Arial,Helvetica,sans-serif;
  34         font-weight: normal;
  35 }
  36 body {
  37         color: #000000;
  38         background-color: #efefef;
  39         filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#D7D7D7,endcolorstr=#FCFBFF);
  40 }
  41 body p {
  42         line-height: 18px;
  43         margin-top: 0px;
  44 }
  45 /* ---------------------------------------------------------------
  46 - links
  47 */
  48 a:link, a:visited, a:active {
  49         color: #666666;
  50         background-color: transparent;
  51 }
  52 a:hover {
  53         color: #000000;
  54         background-color: transparent;
  55         text-decoration: none;
  56 }
  57 /* ---------------------------------------------------------------
  58 - page layout
  59 */
  60 /* outer div */
  61 #outerDivWrap {
  62         width: 640px;
  63 }
  64 /* main- and sub content */
  65 #mainDivWrap {
  66         margin-left: 110px;
  67 }
  68 /* menu- and main div */
  69 #menuDiv, #mainDiv { /* Firefox */
  70         min-height: 320px;
  71 }
  72 *html #menuDiv, *html #mainDiv { /* IE */
  73         height: 320px;
  74 }
  75 /* footer div */
  76 #ftDivWrap {
  77         margin-left: 110px;
  78         margin-top: 10px;
  79         padding: 10px;
  80 }
  81 #ftDiv {
  82         text-align: center;
  83 }
  84 /* menu wrap */
  85 #menuDivWrap {
  86         width: 100px;
  87         position: absolute;
  88         z-index:1;
  89 }
  90 /* border and padding */
  91 div.brdPad {
  92         padding: 10px;
  93         border: 1px solid #003399;
  94 }
  95 /* headers */
  96 #outerDivWrap .headerDiv {
  97         background-image:url(../images/buttonbar.gif);
  98         background-repeat:repeat-x;
  99         color: #003399;
 100         background-color: #96b3de;
 101 }
 102 #menuDivWrap .headerDiv, #mainDivWrap .headerDiv, #dialog .headerDiv {
 103         background-image:url(../images/buttonbar_gs.gif);
 104         background-repeat:repeat-x;
 105         color: #003399;
 106         background-color: #ff9900;
 107 }
 108 div.headerDiv {
 109         padding-left: 10px;
 110         padding-right: 10px;
 111         border: 1px solid #003399;
 112         border-bottom: none;
 113         line-height: 22px;
 114         font-weight: bold;
 115         vertical-align: middle;
 116 }
 117 /* columns */
 118 div.colLeft {
 119         float: left;
 120         width: 300px;
 121         margin-right: 10px;
 122 }
 123 div.colRight {
 124         margin-left: 310px;
 125         width: 176px;
 126 }
 127 * html div.colLeft {
 128         margin-right: 7px;
 129 }
 130 * html div.colRight {
 131         margin-left: 307px;
 132 }
 133 /* float wrap */
 134 div.floatWrap {
 135         display: inline-block;
 136         margin-bottom: 10px;
 137 }
 138 /* IE Win only Hack \*/
 139 * html div.floatWrap {
 140         height: 1%;
 141 }
 142 div.floatWrap {
 143         display: block;
 144 }
 145 /* end IE Hack */
 146 div.floatWrap:after {
 147         content: ".";
 148         display: block;
 149         height: 0px;
 150         clear: both;
 151         visibility: hidden;
 152 }
 153 /* ---------------------------------------------------------------
 154 - main menu buttons
 155 */
 156 #menuBarDiv {
 157         color:#000000;
 158         background-color:transparent;
 159         border-top:1px solid threedshadow;
 160         border-bottom:1px solid threedhighlight;
 161         border-left:1px solid threedshadow;
 162         border-right:1px solid threedhighlight;
 163 }
 164 #menuBarDiv ul {
 165         list-style-type:none;
 166         margin: 0px;
 167         padding: 0px;
 168 }
 169 #menuBarDiv li {
 170         text-align: center;
 171         height: 75px;
 172         cursor: pointer;
 173 }
 174 #menuBarDiv li img {
 175         margin-top: 10px;
 176 }
 177 #menuBarDiv li div {
 178         margin-bottom: 0px;
 179 }
 180 /* ---------------------------------------------------------------
 181 - menu buttons
 182 */
 183 li.btnUp {
 184         border: 1px solid threedface;
 185         /* background-color: threedface; */
 186         background-color: #efefef;
 187         filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#FCFBFF,endcolorstr=#D7D7D7);
 188 }
 189 li.btnDown {
 190         border-top: 1px solid buttonshadow;
 191         border-left: 1px solid buttonshadow;
 192         border-bottom: 1px solid buttonhighlight;
 193         border-right: 1px solid buttonhighlight;
 194         background-color: #efefef;
 195         filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#D7D7D7,endcolorstr=#FCFBFF);
 196 }
 197 li.btnOver {
 198         border-bottom: 1px solid buttonshadow;
 199         border-right: 1px solid buttonshadow;
 200         border-top: 1px solid buttonhighlight;
 201         border-left: 1px solid buttonhighlight;
 202         background-color: threedface;
 203         filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#D7D7D7,endcolorstr=#FCFBFF);
 204 }
 205 /* ---------------------------------------------------------------
 206 - form settings
 207 */
 208 form, fieldset, label, input, select {
 209         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 210         font-size: 10px;
 211         font-weight: normal;
 212 }
 213 fieldset {
 214         border: none;
 215         padding: 0px;
 216         margin: 0px;
 217 }
 218 div.rowDiv {
 219         clear: left;
 220         float: none;
 221 }
 222 div.rowDiv label, div.rowDiv input, div.rowDiv select, span.frmText {
 223         display: block;
 224         float: left;
 225         margin-bottom: 2px;
 226 }
 227 div.rowDiv label {
 228         width: 100px;
 229         margin-right: 5px;
 230         padding-top: 3px;
 231         padding-bottom: 3px;
 232 }
 233 div.rowDiv label span.title {
 234         color: #666666;
 235         background-color:transparent;
 236         font-weight: bold;
 237 }
 238 div.rowDiv input, div.rowDiv select {
 239         border: 1px solid #cccccc;
 240         color: #333333;
 241         background-color: #ffffff;
 242 }
 243 div.rowDiv input {
 244         height: 14px;
 245 }
 246 * html div.rowDiv input {
 247         height: 19px;
 248 }
 249 div.rowDiv input.chkBox {
 250         border: none;
 251         background-color: transparent;
 252 }
 253 * html div.rowDiv input.chkBox {
 254         margin-left: -3px;
 255 }
 256 div.rowDiv input.readonly {
 257         color: #666666;
 258         background-color: #efefef;
 259         border: 1px solid #cccccc;
 260 }
 261 div.rowDiv input[type="file"] { /* firefox */
 262         background-color: #efefef;
 263         height: auto;
 264 }
 265 div.rowDiv span.frmText {
 266         margin-left: 5px;
 267         padding-top: 3px;
 268         padding-bottom: 3px;
 269 }
 270 div.rowDiv input.fldlg, div.rowDiv select.fldlg {
 271         width: 355px;
 272 }
 273 * html div.rowDiv input.fldlg, * html div.rowDiv select.fldlg {
 274         width: 357px;
 275 }
 276 div.rowDiv input.fldmlg {
 277         width: 334px;
 278 }
 279 *html div.rowDiv input.fldmlg {
 280         width: 336px;
 281 }
 282 div.rowDiv input.fldm, div.rowDiv select.fldm {
 283         width: 98px;
 284 }
 285 *html div.rowDiv input.fldm, *html div.rowDiv select.fldm {
 286         width: 100px;
 287 }
 288 div.rowDiv input.fldsm, div.rowDiv select.fldsm {
 289         width: 58px;
 290 }
 291 * html div.rowDiv input.fldsm, * html div.rowDiv select.fldsm {
 292         width: 60px;
 293 }
 294 /* save/cancel buttons */
 295 input.btn {
 296         width: 70px;
 297         color: #666666;
 298         border: 1px solid #cccccc;
 299         cursor: pointer;
 300         padding-top: 1px;
 301         padding-bottom: 1px;
 302         filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#D7D7D7,endcolorstr=#FCFBFF);
 303         margin-left: 0px;
 304 }
 305 /* ---------------------------------------------------------------
 306 - preview frames
 307 */
 308 #inPrevDiv, #atPrevDiv {
 309         width: 150px;
 310         height: 150px;
 311         margin: 0px;
 312         border: 1px solid #cccccc;
 313         color: #333333;
 314         background-color: #ffffff;
 315         overflow: hidden;
 316 }
 317 /* attributes preview */
 318 #atPrevDiv {
 319         line-height: normal;
 320 }
 321 #atPrevDiv p {
 322         padding: 5px;
 323         margin: 0px;
 324         font-size: 8px;
 325         line-height: normal;
 326 }
 327 * html #inPrevDiv, * html #atPrevDiv {
 328         float: left;
 329 }
 330 /* ---------------------------------------------------------------
 331 - image selection
 332 */
 333 #inSelDiv {
 334         width: 274px;
 335         height: 150px;
 336         margin: 0px;
 337         border: 1px solid #cccccc;
 338 }
 339 /* ---------------------------------------------------------------
 340 - image list (frame)
 341 */
 342 div#iselDiv { /* IE, Firefox */
 343         color: #000000;
 344         background-color: #ffffff;
 345         margin: 0px;
 346         height: 150px;
 347         width: 274px;
 348         overflow: auto;
 349 }
 350 * html div#iselDiv {
 351         margin-left: -1px;
 352 }
 353 div#iselDiv ul {
 354         white-space: nowrap;
 355         line-height: 12px;
 356         list-style: none;
 357         cursor: pointer;
 358         margin: 0px;
 359         padding: 0px;
 360         margin-top: 2px;
 361         margin-bottom: 2px;
 362 }
 363 li.cimgover {
 364         color: #000000;
 365         background-color: #e4e4e4;
 366 }
 367 li.cimgout {
 368         color: #000000;
 369         background-color: #ffffff;
 370 }
 371 li.cimgdown {
 372         color: #000000;
 373         background-color: #e4e4e4;
 374 }
 375 li.cimgup {
 376         color: #000000;
 377         background-color: #ffffff;
 378 }
 379 /* ---------------------------------------------------------------
 380 - select image formats
 381 */
 382 #fmtDiv {
 383         margin-top: 0px;
 384         margin-bottom: 0px;
 385         margin-right: 0px;
 386         width: 357px;
 387         height: auto;
 388         clear: none;
 389         float: left;
 390 }
 391 #fmtDiv div {
 392         float:left;
 393         clear: none;
 394         margin-right: 10px;
 395         margin-bottom: 5px;
 396         white-space: nowrap;
 397         width: 90px;
 398         display: block;
 399         overflow: hidden;
 400 }
 401 #fmtDiv input.chkBox {
 402         margin-left: 0px;
 403 }
 404 * html #fmtDiv input.chkBox {
 405         margin-left: -3px;
 406 }
 407 #fmtDiv img {
 408         cursor: pointer;
 409         margin-left: 5px;
 410 }
 411 #fileDiv {
 412         margin-top: 10px;
 413 }
 414 /* ---------------------------------------------------------------
 415 - load message
 416 */
 417 #dialogLoadMessage {
 418         position:absolute;
 419         z-index:1000;
 420         display:block;
 421         width:100%;
 422         height:100%;
 423 }
 424 #loadMessage {
 425         background-color:#96b3de;
 426         border:1px solid #003399;
 427         padding: 10px;
 428         width: 150px;
 429         color:#ffffff;
 430         font-family: verdana,arial,helvetica,sans-serif;
 431         font-size:12px;
 432         font-weight:bold
 433 }
 434 /* ---------------------------------------------------------------
 435 - info div
 436 */
 437 #infoDiv {
 438         position: absolute;
 439         width:140px;
 440         z-index:1;
 441         left: 0px;
 442         top: 0px;
 443         border: 1px solid #cccccc;
 444         color: #000000;
 445         background-color: #f1f1f1;
 446         padding: 5px;
 447         font-size: 9px;
 448         filter:alpha(opacity=90);
 449         -moz-opacity:0.9;
 450 }
 451 * html div#infoDiv {
 452         width: 150px;
 453 }
 454 #infoDiv div {
 455         clear: both;
 456         margin-bottom: 2px;
 457 }
 458 #infoDiv label  {
 459         width: 55px;
 460         display: block;
 461         float: left;
 462         overflow: hidden;
 463         padding: 0px;
 464 }
 465 #infoDiv span {
 466         width: 75px;
 467         display: block;
 468         text-align: right;
 469         overflow: hidden;
 470 }
 471 /* ---------------------------------------------------------------
 472 - popupWrap
 473 */
 474 div#poDelDiv {
 475         clear: left;
 476 }
 477 div.poPrevDiv {
 478         background-color: #ffffff;
 479         border: 1px solid #cccccc;
 480         width: 80px;
 481         height: 60px;
 482         float: right;
 483         overflow: hidden;
 484         margin-bottom: 2px;
 485 }
 486 /* ---------------------------------------------------------------
 487 - version info
 488 */
 489 span.ver {
 490         font-size: 9px;
 491         color: #adadad;
 492         background-color: transparent;
 493 }
 494 /* ---------------------------------------------------------------
 495 - show/hide
 496 */
 497 .showit {
 498         display: inline-block;
 499 }
 500 .hideit {
 501         display: none;
 502 }
 503 /* ---------------------------------------------------------------
 504 - padding
 505 */
 506 .pad5 {
 507         padding-left: 5px;
 508 }
 509 .pad10 {
 510         padding-left: 10px;
 511 }
 512 .pad20 {
 513         padding-left: 20px;
 514 }
 515 .pad30 {
 516         padding-left: 30px;
 517 }
 518 /* ---------------------------------------------------------------
 519 - margin
 520 */
 521 .mtop5 {
 522         margin-top: 5px;
 523 }
 524 .mtop10 {
 525         margin-top: 10px;
 526 }
 527 .mtop15 {
 528         margin-top: 15px;
 529 }
 530 .mbottom5 {
 531         margin-bottom: 5px;
 532 }
 533 /* ---------------------------------------------------------------
 534 - clear floats
 535 */
 536 .clrFloat {
 537         clear: both;
 538         visibility: hidden;
 539 }
 540 .clrFloatRight {
 541         clear: right;
 542         visibility: hidden;
 543 }
 544 /* ---------------------------------------------------------------
 545 - image buttons
 546 */
 547 div.btnRight {
 548         float: right;
 549 }
 550 div.btnRight img {
 551         cursor: pointer;
 552         margin-left: 5px;
 553         margin-top: 1px;
 554 }
 555 /* - help button - */
 556 div.btnRight img.hlpBtn {
 557         cursor: help;
 558         margin-left: 8px;
 559 }
 560 div.btnRight span img {
 561         margin-bottom: 5px;
 562 }
 563 /* ---------------------------------------------------------------
 564 - image orientation
 565 */
 566 img.left {
 567         float: left;
 568         margin-bottom: 5px;
 569         margin-right: 5px;
 570 }
 571 img.right {
 572         float: right;
 573         margin-bottom: 5px;
 574         margin-left: 5px;
 575 }
 576 /* ---------------------------------------------------------------
 577 - symbols (special characters
 578 */
 579 .charmap, .charmapOver {
 580         color: #000000;
 581         border: 1px solid #cccccc;
 582         cursor: pointer;
 583         text-align: center;
 584         vertical-align: middle;
 585 }
 586 .charmapOver {
 587         border: 1px solid #ff9900;
 588         background-color: #efefef;
 589 }
 590 a.charmap {
 591         color: #000000;
 592         text-decoration: none
 593 }
 594 /* - character preview - */
 595 td.charPrev {
 596          font-size: 25px;
 597          height: 60px;
 598          background-color: #ffffff;
 599          border: 1px solid #cccccc;
 600          text-align: center;
 601          vertical-align: middle;
 602 }
 603 /* ---------------------------------------------------------------
 604 - hilight color
 605 */
 606 .hilight {
 607         color: #FF9933;
 608 }
 609 /* ---------------------------------------------------------------
 610 - image caption
 611 */
 612 div.capDivRightBrd {
 613         float: right;
 614         border: 1px solid #666666;
 615         background-color: #efefef;
 616         padding: 5px;
 617         height: auto;
 618         margin-left: 10px;
 619         margin-bottom: 5px;
 620 }
 621 div.capDivRight {
 622         float: right;
 623         padding: 5px;
 624         height: auto;
 625         margin-left: 10px;
 626         margin-bottom: 5px;
 627 }
 628 div.capDivLeftBrd {
 629         float: left;
 630         border: 1px solid #666666;
 631         background-color: #efefef;
 632         padding: 5px;
 633         height: auto;
 634         margin-right: 10px;
 635         margin-bottom: 5px;
 636 }
 637 div.capDivLeft {
 638         float: left;
 639         padding: 5px;
 640         height: auto;
 641         margin-right: 10px;
 642         margin-bottom: 5px;
 643 }
 644 div p.caption {
 645         font-family: Geneva, Arial, Helvetica, sans-serif;
 646         font-size: 10px;
 647         text-align: center;
 648         line-height: 12px;
 649         color: #333333;
 650         background-color: transparent;
 651         margin: 0px;
 652         margin-top: 5px;
 653         padding: 0px;
 654 }
 655 /* EOF STYLES */