You are here

Home » API reference » Popup 7.x

popup-element.css in Popup 7.x

Same filename in this branch
  1. 7.x styles/black/popup-element.css
  2. 7.x styles/McPopup/popup-element.css
  3. 7.x styles/bent_white/popup-element.css
  4. 7.x styles/white/popup-element.css
  5. 7.x styles/obsidian/popup-element.css
Same filename and directory in other branches
  1. 8 styles/white/popup-element.css
  2. 7 styles/white/popup-element.css
  3. 6.x styles/white/popup-element.css

/* ---- Border ---- */

.popup-style-white .popup-element-body table.popup-layout{ margin: 0; padding: 0; position: relative;}
.popup-style-white .popup-element-body table.popup-layout tbody{ border: none; border-collapse: collapse;}
.popup-style-white .popup-element-body table.popup-layout td{ margin: 0; padding: 0;}

.popup-style-white .popup-element-body .top .left{ background: url('images/top-left.png') no-repeat; height: 55px; width: 55px; padding-left: 55px;}
.popup-style-white .popup-element-body .top .right{ background: url('images/top-right.png') no-repeat; height: 55px; width: 55px; padding-right: 55px;}
.popup-style-white .popup-element-body .top .center{ background: url('images/top.png') repeat-x top; height: 55px;}

.popup-style-white .popup-element-body .center .center{ background: url('images/back.png');}
.popup-style-white .popup-element-body div.inner{ color: #444; margin: -20px -15px; position: relative;}
.popup-style-white .popup-element-body div.inner a{ color: #222; text-decoration: none;}
.popup-style-white .popup-element-body div.inner a:hover{ color: #000; text-decoration: underline;}

.popup-style-white .popup-element-body a.popup-close-button{ background: url('images/close.png') left top; display: block; height: 9px; position: absolute; top: -6px; right: -11px; width: 9px;}
.popup-style-white .popup-element-body a.popup-close-button:active{ background-position: left 9px;}
.popup-style-white .popup-element-body a.popup-close-button span{ display: none;}

.popup-style-white .popup-element-body .center .left{ background: url('images/left.png') repeat-y left; width: 55px;}
.popup-style-white .popup-element-body .center .right{ background: url('images/right.png') repeat-y right; width: 55px;}

.popup-style-white .popup-element-body .bottom .left{ background: url('images/bottom-left.png') no-repeat; height: 55px; width: 55px;}
.popup-style-white .popup-element-body .bottom .right{ background: url('images/bottom-right.png') no-repeat; height: 55px; width: 55px;}
.popup-style-white .popup-element-body .bottom .center{ background: url('images/bottom.png') repeat-x bottom;}


/* ---- Arrows ---- */

/* -- Top left -- */

.popup-style-white .popup-element-body.origin-top-left.expand-top-left table.popup-layout{ top: 20px; left: 20px;}
.popup-style-white .popup-element-body.origin-top-left.expand-top-left .bottom .right{ background-image: url('images/otl-etl.png');}
.popup-style-white .popup-element-body.origin-top-left.expand-top-right table.popup-layout{ top: 10px; left: -20px;}
.popup-style-white .popup-element-body.origin-top-left.expand-top-right .bottom .left{ background-image: url('images/otl-etr.png');}
.popup-style-white .popup-element-body.origin-top-left.expand-bottom-left table.popup-layout{ top: -30px; left: 5px;}
.popup-style-white .popup-element-body.origin-top-left.expand-bottom-left .top .right{ background-image: url('images/otl-ebl.png');}

.popup-style-white .popup-element-body.origin-top-left.expand-bottom-right table.popup-layout{ top: -20px; left: -20px;}

/* -- Top right -- */

.popup-style-white .popup-element-body.origin-top-right.expand-top-left table.popup-layout{ top: 10px; left: 20px;}
.popup-style-white .popup-element-body.origin-top-right.expand-top-left .bottom .right{ background-image: url('images/otr-etl.png');}
.popup-style-white .popup-element-body.origin-top-right.expand-top-right table.popup-layout{ top: 20px; left: -20px;}
.popup-style-white .popup-element-body.origin-top-right.expand-top-right .bottom .left{ background-image: url('images/otr-etr.png');}

.popup-style-white .popup-element-body.origin-top-right.expand-bottom-left table.popup-layout{ top: -20px; left: 20px;}

.popup-style-white .popup-element-body.origin-top-right.expand-bottom-right table.popup-layout{ top: -30px; left: -5px;}
.popup-style-white .popup-element-body.origin-top-right.expand-bottom-right .top .left{ background-image: url('images/otr-ebr.png');}

/* -- Bottom left -- */

.popup-style-white .popup-element-body.origin-bottom-left.expand-top-left table.popup-layout{ top: 35px; left: 5px;}
.popup-style-white .popup-element-body.origin-bottom-left.expand-top-left .bottom .right{ background-image: url('images/obl-etl.png');}

.popup-style-white .popup-element-body.origin-bottom-left.expand-top-right table.popup-layout{ top: 20px; left: -20px;}

.popup-style-white .popup-element-body.origin-bottom-left.expand-bottom-left table.popup-layout{ top: -20px; left: 15px;}
.popup-style-white .popup-element-body.origin-bottom-left.expand-bottom-left .top .right{ background-image: url('images/obl-ebl.png');}
.popup-style-white .popup-element-body.origin-bottom-left.expand-bottom-right table.popup-layout{ top: -5px; left: -20px;}
.popup-style-white .popup-element-body.origin-bottom-left.expand-bottom-right .top .left{ background-image: url('images/obl-ebr.png');}

/* -- Bottom right -- */

.popup-style-white .popup-element-body.origin-bottom-right.expand-top-left table.popup-layout{ top: 20px; left: 20px;}

.popup-style-white .popup-element-body.origin-bottom-right.expand-top-right table.popup-layout{ top: 35px; left: -10px;}
.popup-style-white .popup-element-body.origin-bottom-right.expand-top-right .bottom .left{ background-image: url('images/obr-etr.png');}
.popup-style-white .popup-element-body.origin-bottom-right.expand-bottom-left table.popup-layout{ top: -5px; left: 20px;}
.popup-style-white .popup-element-body.origin-bottom-right.expand-bottom-left .top .right{ background-image: url('images/obr-ebl.png');}
.popup-style-white .popup-element-body.origin-bottom-right.expand-bottom-right table.popup-layout{ top: -20px; left: -20px;}
.popup-style-white .popup-element-body.origin-bottom-right.expand-bottom-right .top .left{ background-image: url('images/obr-ebr.png');}


/* ---- Menus ---- */

.popup-style-white .popup-element-body .popup-menu-branch,
.popup-style-white .popup-element-body .popup-menu-item{ display: block;}

.popup-style-white .popup-element-body .popup-menu-branch div.inner{ width: 150px;}

.popup-style-white .popup-element-body div.inner .popup-menu-leaf-title,
.popup-style-white .popup-element-body div.inner .popup-menu-branch-title{ color: #444; margin: 0 0 0 -15px; padding: 0 0 0 15px; text-decoration: none !important;}
.popup-style-white .popup-element-body .popup-menu-branch-title{ background: url('images/menu-arrow.png') no-repeat right 5px;}

.popup-style-white .popup-element-body div.inner .popup-menu-leaf-title:hover,
.popup-style-white .popup-element-body div.inner .popup-menu-branch-title.popup-title-active{ color: #fff; background-color: #888; background-position: right -17px;}

File

styles/white/popup-element.css
View source 
  1. 

  2. 

  3. /* ---- Border ---- */

  4. 

  5. .popup-style-white .popup-element-body table.popup-layout{ margin: 0; padding: 0; position: relative;}

  6. .popup-style-white .popup-element-body table.popup-layout tbody{ border: none; border-collapse: collapse;}

  7. .popup-style-white .popup-element-body table.popup-layout td{ margin: 0; padding: 0;}

  8. 

  9. .popup-style-white .popup-element-body .top .left{ background: url('images/top-left.png') no-repeat; height: 55px; width: 55px; padding-left: 55px;}

  10. .popup-style-white .popup-element-body .top .right{ background: url('images/top-right.png') no-repeat; height: 55px; width: 55px; padding-right: 55px;}

  11. .popup-style-white .popup-element-body .top .center{ background: url('images/top.png') repeat-x top; height: 55px;}

  12. 

  13. .popup-style-white .popup-element-body .center .center{ background: url('images/back.png');}

  14. .popup-style-white .popup-element-body div.inner{ color: #444; margin: -20px -15px; position: relative;}

  15. .popup-style-white .popup-element-body div.inner a{ color: #222; text-decoration: none;}

  16. .popup-style-white .popup-element-body div.inner a:hover{ color: #000; text-decoration: underline;}

  17. 

  18. .popup-style-white .popup-element-body a.popup-close-button{ background: url('images/close.png') left top; display: block; height: 9px; position: absolute; top: -6px; right: -11px; width: 9px;}

  19. .popup-style-white .popup-element-body a.popup-close-button:active{ background-position: left 9px;}

  20. .popup-style-white .popup-element-body a.popup-close-button span{ display: none;}

  21. 

  22. .popup-style-white .popup-element-body .center .left{ background: url('images/left.png') repeat-y left; width: 55px;}

  23. .popup-style-white .popup-element-body .center .right{ background: url('images/right.png') repeat-y right; width: 55px;}

  24. 

  25. .popup-style-white .popup-element-body .bottom .left{ background: url('images/bottom-left.png') no-repeat; height: 55px; width: 55px;}

  26. .popup-style-white .popup-element-body .bottom .right{ background: url('images/bottom-right.png') no-repeat; height: 55px; width: 55px;}

  27. .popup-style-white .popup-element-body .bottom .center{ background: url('images/bottom.png') repeat-x bottom;}

  28. 

  29. 

  30. /* ---- Arrows ---- */

  31. 

  32. /* -- Top left -- */

  33. 

  34. .popup-style-white .popup-element-body.origin-top-left.expand-top-left table.popup-layout{ top: 20px; left: 20px;}

  35. .popup-style-white .popup-element-body.origin-top-left.expand-top-left .bottom .right{ background-image: url('images/otl-etl.png');}

  36. .popup-style-white .popup-element-body.origin-top-left.expand-top-right table.popup-layout{ top: 10px; left: -20px;}

  37. .popup-style-white .popup-element-body.origin-top-left.expand-top-right .bottom .left{ background-image: url('images/otl-etr.png');}

  38. .popup-style-white .popup-element-body.origin-top-left.expand-bottom-left table.popup-layout{ top: -30px; left: 5px;}

  39. .popup-style-white .popup-element-body.origin-top-left.expand-bottom-left .top .right{ background-image: url('images/otl-ebl.png');}

  40. 

  41. .popup-style-white .popup-element-body.origin-top-left.expand-bottom-right table.popup-layout{ top: -20px; left: -20px;}

  42. 

  43. /* -- Top right -- */

  44. 

  45. .popup-style-white .popup-element-body.origin-top-right.expand-top-left table.popup-layout{ top: 10px; left: 20px;}

  46. .popup-style-white .popup-element-body.origin-top-right.expand-top-left .bottom .right{ background-image: url('images/otr-etl.png');}

  47. .popup-style-white .popup-element-body.origin-top-right.expand-top-right table.popup-layout{ top: 20px; left: -20px;}

  48. .popup-style-white .popup-element-body.origin-top-right.expand-top-right .bottom .left{ background-image: url('images/otr-etr.png');}

  49. 

  50. .popup-style-white .popup-element-body.origin-top-right.expand-bottom-left table.popup-layout{ top: -20px; left: 20px;}

  51. 

  52. .popup-style-white .popup-element-body.origin-top-right.expand-bottom-right table.popup-layout{ top: -30px; left: -5px;}

  53. .popup-style-white .popup-element-body.origin-top-right.expand-bottom-right .top .left{ background-image: url('images/otr-ebr.png');}

  54. 

  55. /* -- Bottom left -- */

  56. 

  57. .popup-style-white .popup-element-body.origin-bottom-left.expand-top-left table.popup-layout{ top: 35px; left: 5px;}

  58. .popup-style-white .popup-element-body.origin-bottom-left.expand-top-left .bottom .right{ background-image: url('images/obl-etl.png');}

  59. 

  60. .popup-style-white .popup-element-body.origin-bottom-left.expand-top-right table.popup-layout{ top: 20px; left: -20px;}

  61. 

  62. .popup-style-white .popup-element-body.origin-bottom-left.expand-bottom-left table.popup-layout{ top: -20px; left: 15px;}

  63. .popup-style-white .popup-element-body.origin-bottom-left.expand-bottom-left .top .right{ background-image: url('images/obl-ebl.png');}

  64. .popup-style-white .popup-element-body.origin-bottom-left.expand-bottom-right table.popup-layout{ top: -5px; left: -20px;}

  65. .popup-style-white .popup-element-body.origin-bottom-left.expand-bottom-right .top .left{ background-image: url('images/obl-ebr.png');}

  66. 

  67. /* -- Bottom right -- */

  68. 

  69. .popup-style-white .popup-element-body.origin-bottom-right.expand-top-left table.popup-layout{ top: 20px; left: 20px;}

  70. 

  71. .popup-style-white .popup-element-body.origin-bottom-right.expand-top-right table.popup-layout{ top: 35px; left: -10px;}

  72. .popup-style-white .popup-element-body.origin-bottom-right.expand-top-right .bottom .left{ background-image: url('images/obr-etr.png');}

  73. .popup-style-white .popup-element-body.origin-bottom-right.expand-bottom-left table.popup-layout{ top: -5px; left: 20px;}

  74. .popup-style-white .popup-element-body.origin-bottom-right.expand-bottom-left .top .right{ background-image: url('images/obr-ebl.png');}

  75. .popup-style-white .popup-element-body.origin-bottom-right.expand-bottom-right table.popup-layout{ top: -20px; left: -20px;}

  76. .popup-style-white .popup-element-body.origin-bottom-right.expand-bottom-right .top .left{ background-image: url('images/obr-ebr.png');}

  77. 

  78. 

  79. /* ---- Menus ---- */

  80. 

  81. .popup-style-white .popup-element-body .popup-menu-branch,

  82. .popup-style-white .popup-element-body .popup-menu-item{ display: block;}

  83. 

  84. .popup-style-white .popup-element-body .popup-menu-branch div.inner{ width: 150px;}

  85. 

  86. .popup-style-white .popup-element-body div.inner .popup-menu-leaf-title,

  87. .popup-style-white .popup-element-body div.inner .popup-menu-branch-title{ color: #444; margin: 0 0 0 -15px; padding: 0 0 0 15px; text-decoration: none !important;}

  88. .popup-style-white .popup-element-body .popup-menu-branch-title{ background: url('images/menu-arrow.png') no-repeat right 5px;}

  89. 

  90. .popup-style-white .popup-element-body div.inner .popup-menu-leaf-title:hover,

  91. .popup-style-white .popup-element-body div.inner .popup-menu-branch-title.popup-title-active{ color: #fff; background-color: #888; background-position: right -17px;}

  92. 

  93.