You are here

Home » API reference » OM Maximenu 6

om_maximenu.css in OM Maximenu 6

Same filename and directory in other branches
  1. 8 css/om_maximenu.css
  2. 7 css/om_maximenu.css

OM Maximenu css

@author: Daniel Honrade http://drupal.org/user/351112

File

css/om_maximenu.css
View source 
  1. /* $Id$ */

  2. 

  3. /**

  4.  * @file

  5.  * OM Maximenu css

  6.  *

  7.  * @author: Daniel Honrade http://drupal.org/user/351112

  8.  *

  9.  */

  10. 

  11. /* Admin */

  12. #om-maximenu-admin table .col-link { width: 75%; } 

  13. #om-maximenu-blocks-get .edit-block { display: inline; }

  14. #om-maximenu-blocks-get .edit-block a { font-weight: bold; }

  15. 

  16. /* Default OM Maximenu style */

  17. .om-maximenu { height: auto; position: relative; z-index: 100; }

  18. .om-maximenu-content { display: none; }

  19. .om-maximenu .om-maximenu-content { position: absolute; top: 30px; left: 0; min-width: 300px; z-index: 500; }

  20. .om-maximenu .om-maximenu-content .block { position: relative; }

  21. .om-maximenu .om-maximenu-content.open { display: block !important; }

  22. .om-maximenu .om-maximenu-open { position: absolute; bottom: -10px; right: 0; font-size: 9px; height: 15px; line-height: 15px; }

  23. .om-maximenu .om-maximenu-open input { margin: 0 5px 0 0; float: left; }

  24. 

  25. /* Edit Link */

  26. .om-maximenu .om-maximenu-edit { display: none; position: absolute; top: 0; right: 0; font-size: .7em; background-color: #fff; }

  27. .om-maximenu:hover .om-maximenu-edit { display: block; z-index: 1000; }

  28. .om-maximenu .om-maximenu-edit a { display: block; float: left; margin-left: 3px; height: 0; width: 16px; padding: 16px 0 0; overflow: hidden; background: url(images/icons.gif) 0 0 scroll no-repeat; }

  29. .om-maximenu .om-maximenu-edit a:hover { background-position: 0 -16px; }

  30. 

  31. /* Blocks Edit */

  32. .om-maximenu-content .edit-block { display: none; position: absolute; top: 0; right: 0; font-size: .7em; background-color: #fff; }

  33. .om-maximenu-content .block:hover .edit-block { display: block; z-index: 1000; }

  34. .om-maximenu-content .block .edit-block a { display: block; float: left; margin-left: 3px; height: 0; width: 16px; padding: 16px 0 0; overflow: hidden; background: url(images/icons.gif) 0 0 scroll no-repeat; }

  35. .om-maximenu-content .block .edit-block a.block-config { background-position: 0 0; }

  36. .om-maximenu-content .block .edit-block a.block-config:hover { background-position: 0 -16px; }

  37. .om-maximenu-content .block .edit-block a.block-edit-menu { background-position: -16px 0; }

  38. .om-maximenu-content .block .edit-block a.block-edit-menu:hover { background-position: -16px -16px; }

  39. .om-maximenu-content .block .edit-block a.block-edit-view { background-position: -32px 0; }

  40. .om-maximenu-content .block .edit-block a.block-edit-view:hover { background-position: -32px -16px; }

  41. 

  42. /* General */

  43. .om-maximenu ul.om-menu { display: block; padding: 0; margin: 0; height: 30px; position: relative; z-index: 20; }

  44. .om-maximenu ul.om-menu li.om-leaf { display: block; padding: 0; margin: 0; height: 30px; list-style: none; list-style-image: none; position: relative; z-index: 5; }

  45. .om-maximenu ul.om-menu li.om-leaf.om-leaf-icon .om-link { padding: 0; }

  46. .om-maximenu ul.om-menu li.om-leaf .om-link { display: block; padding: 0 15px; margin: 0; height: 30px; line-height: 30px; }

  47. .om-maximenu ul.om-menu li.om-leaf .om-link:hover { cursor: pointer; text-decoration: none; }

  48. .om-maximenu ul.om-menu li.om-leaf:hover .om-maximenu-content-nofade { display: block; } 

  49. .om-maximenu ul.om-menu li.om-leaf .om-link .om-subtitle { line-height: normal; display: block; margin-top: -2px; font-size: .9em; }

  50. .om-clearfix { clear: both; }

  51. 

  52. .om-maximenu .om-maximenu-content .om-maximenu-top { position: relative; }

  53. .om-maximenu .om-maximenu-content .om-maximenu-bottom { position: relative; }

  54. 

  55. /* Main Menu */

  56. .om-maximenu.om-maximenu-main-menu .om-maximenu-content {}

  57. .om-maximenu.om-maximenu-main-menu ul.om-menu { float: left; }

  58. .om-maximenu.om-maximenu-main-menu ul.om-menu li.om-leaf { float: left; }

  59. .om-maximenu.om-maximenu-main-menu ul.om-menu li.om-leaf .om-link { float: left; }

  60. 

  61. /* Stacking */

  62. .om-maximenu.om-maximenu-block.om-maximenu-row ul.om-menu li.om-leaf { float: left; }

  63. .om-maximenu.om-maximenu-block.om-maximenu-row ul.om-menu li.om-leaf .om-link { float: left;  }

  64. .om-maximenu.om-maximenu-block.om-maximenu-column { height: auto; }

  65. .om-maximenu.om-maximenu-block.om-maximenu-column ul.om-menu { float: none; height: auto; }

  66. .om-maximenu.om-maximenu-block.om-maximenu-column ul.om-menu li.om-leaf { float: none; height: auto; }

  67. .om-maximenu.om-maximenu-block.om-maximenu-column ul.om-menu li.om-leaf .om-link { float: none; height: auto; }

  68. 

  69. .om-maximenu.om-maximenu-float.om-maximenu-row ul.om-menu li.om-leaf { float: left; }

  70. .om-maximenu.om-maximenu-float.om-maximenu-row ul.om-menu li.om-leaf .om-link { float: left;  }

  71. .om-maximenu.om-maximenu-float.om-maximenu-column { height: auto; }

  72. .om-maximenu.om-maximenu-float.om-maximenu-column ul.om-menu { float: none; height: auto; }

  73. .om-maximenu.om-maximenu-float.om-maximenu-column ul.om-menu li.om-leaf { float: none; height: auto; }

  74. .om-maximenu.om-maximenu-float.om-maximenu-column ul.om-menu li.om-leaf .om-link { float: none; height: auto; }

  75. 

  76. /* Orientation */

  77. .om-maximenu.om-maximenu-horizontal {}

  78. .om-maximenu.om-maximenu-vertical { height: auto; width: 30px; }

  79. .om-maximenu.om-maximenu-vertical ul.om-menu { height: auto; width: 30px; }

  80. .om-maximenu.om-maximenu-vertical ul.om-menu li.om-leaf { height: auto; width: 30px; }

  81. .om-maximenu.om-maximenu-vertical ul.om-menu li.om-leaf .om-link { height: auto; width: 30px; padding: 30px 0; line-height: normal; }

  82. .om-maximenu.om-maximenu-vertical.om-maximenu-left ul.om-menu li.om-leaf .om-link { -webkit-transform: rotate(-270deg); -moz-transform: rotate(-270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

  83. .om-maximenu.om-maximenu-vertical.om-maximenu-left .om-maximenu-content { margin-left: 15px; }

  84. 

  85. .om-maximenu.om-maximenu-vertical.om-maximenu-right ul.om-menu li.om-leaf .om-link { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }

  86. .om-maximenu.om-maximenu-vertical.om-maximenu-right .om-maximenu-content { margin-right: 15px; }

  87. 

  88. .om-maximenu.om-maximenu-float.om-maximenu-column.om-maximenu-vertical.om-maximenu-left .om-maximenu-content,

  89. .om-maximenu.om-maximenu-float.om-maximenu-column.om-maximenu-vertical.om-maximenu-right .om-maximenu-content { top: -20px; }

  90. 

  91. /* Dock Effect */

  92. .om-maximenu.om-maximenu-dock { height: auto; }

  93. .om-maximenu.om-maximenu-dock ul.om-menu { height: auto; }

  94. .om-maximenu.om-maximenu-dock ul.om-menu li.om-leaf-icon { height: auto; }

  95. .om-maximenu.om-maximenu-dock ul.om-menu li.om-leaf-icon .om-link { height: auto; }

  96. .om-maximenu.om-maximenu-dock ul.om-menu li.om-leaf-icon .om-link img {}

  97. .om-maximenu.om-maximenu-dock.om-maximenu-vertical ul.om-menu li.om-leaf-icon .om-link { padding: 0; }

  98. .om-maximenu.om-maximenu-dock.om-maximenu-left ul.om-menu li.om-leaf-icon { text-align: left; }

  99. .om-maximenu.om-maximenu-dock.om-maximenu-right ul.om-menu li.om-leaf-icon { text-align: right; }

  100. .om-maximenu.om-maximenu-dock.om-maximenu-middle ul.om-menu { width: auto; }

  101. .om-maximenu.om-maximenu-dock.om-maximenu-middle ul.om-menu li.om-leaf-icon { text-align: center;  }

  102. 

  103. .om-maximenu.om-maximenu-dock.om-maximenu-bottom,

  104. .om-maximenu.om-maximenu-dock.om-maximenu-bottom ul.om-menu,

  105. .om-maximenu.om-maximenu-dock.om-maximenu-bottom ul.om-menu li.om-leaf-icon,

  106. .om-maximenu.om-maximenu-dock.om-maximenu-bottom ul.om-menu li.om-leaf-icon .om-link,

  107. .om-maximenu.om-maximenu-dock.om-maximenu-bottom ul.om-menu li.om-leaf-icon .om-link img { vertical-align: bottom; float: none; display: inline; }

  108. .om-maximenu.om-maximenu-dock.om-maximenu-bottom ul.om-menu li.om-leaf-icon .om-maximenu-content { bottom: 50px; }

  109. 

  110. .om-maximenu.om-maximenu-dock.om-maximenu-top ul.om-menu li.om-leaf-icon .om-maximenu-content { top: 50px; }

  111. .om-maximenu.om-maximenu-dock.om-maximenu-top.om-maximenu-column ul.om-menu li.om-leaf-icon .om-maximenu-content { top: -30px; }

  112. .om-maximenu.om-maximenu-dock.om-maximenu-top { height: 30px; }

  113. 

  114. .om-maximenu.om-maximenu-dock.om-maximenu-column.om-maximenu-top { height: auto; }

  115. .om-maximenu.om-maximenu-dock.om-maximenu-column.om-maximenu-top.om-maximenu-column ul.om-menu { height: auto; }

  116. 

  117. /* Float */

  118. .om-maximenu.om-maximenu-float {}

  119. .om-maximenu.om-maximenu-float .om-maximenu-content { text-align: left; }

  120. 

  121. .om-maximenu.om-maximenu-float.om-maximenu-left { right: auto; }

  122. .om-maximenu.om-maximenu-float.om-maximenu-left ul.om-menu { position: relative; left: 0; }

  123. .om-maximenu.om-maximenu-float.om-maximenu-left .om-maximenu-content { left: 10px; right: auto; }

  124. .om-maximenu.om-maximenu-float.om-maximenu-right { left: auto; }

  125. .om-maximenu.om-maximenu-float.om-maximenu-right ul.om-menu { position: relative; right: 0; }

  126. .om-maximenu.om-maximenu-float.om-maximenu-right .om-maximenu-content { right: 10px; left: auto; }

  127. 

  128. .om-maximenu.om-maximenu-float.om-maximenu-middle { bottom: 0; left: 0; right: 0; margin: 0 auto; z-index: 190; text-align: center; }

  129. .om-maximenu.om-maximenu-float.om-maximenu-middle .om-maximenu-content {}

  130. .om-maximenu.om-maximenu-float.om-maximenu-middle ul.om-menu { width: auto; margin: 0 auto; text-align: center; }

  131. .om-maximenu.om-maximenu-float.om-maximenu-middle ul.om-menu li.om-leaf { display: inline-block; float: none; }

  132. .om-maximenu.om-maximenu-float.om-maximenu-middle ul.om-menu li.om-leaf .om-link { display: inline-block; float: none; }

  133. 

  134. .om-maximenu.om-maximenu-float.om-maximenu-top { height: 30px; }

  135. .om-maximenu.om-maximenu-float.om-maximenu-top .om-maximenu-content { bottom: auto; top: 30px; }

  136. .om-maximenu.om-maximenu-float.om-maximenu-bottom {}

  137. .om-maximenu.om-maximenu-float.om-maximenu-bottom .om-maximenu-content { top: auto; bottom: 30px; }

  138. 

  139. .om-maximenu.om-maximenu-float.om-maximenu-row {}

  140. .om-maximenu.om-maximenu-float.om-maximenu-column {}

  141. 

  142. .om-maximenu.om-maximenu-float.om-maximenu-column.om-maximenu-left .om-maximenu-content { top: -50px; left: 100%; right: auto; }

  143. .om-maximenu.om-maximenu-float.om-maximenu-column.om-maximenu-right .om-maximenu-content { top: -50px; right: 100%; left: auto; }

  144. 

  145. /* Block */

  146. .om-maximenu.om-maximenu-block {}

  147. .om-maximenu.om-maximenu-block .om-maximenu-content { z-index: 500; }

  148. .om-maximenu.om-maximenu-block ul.om-menu { float: left; }

  149. .om-maximenu.om-maximenu-block ul.om-menu li.om-leaf { float: left; }

  150. .om-maximenu.om-maximenu-block ul.om-menu li.om-leaf .om-link { float: left; }

  151. 

  152. .om-maximenu.om-maximenu-block-down .om-maximenu-content {}

  153. .om-maximenu.om-maximenu-block.om-maximenu-block-up .om-maximenu-content { top: auto; bottom: 30px; }

  154. 

  155. .om-maximenu.om-maximenu-block.om-maximenu-block-right .om-maximenu-content { top: -50px; left: 100%; right: auto; }

  156. .om-maximenu.om-maximenu-block.om-maximenu-block-left .om-maximenu-content { top: -50px; right: 100%; left: auto; }

  157. 

  158. /* Slider */

  159. .om-maximenu ul.om-menu li.backLava { position: absolute; top: 5px; height: 20px; background: #f2f2f2; z-index: 10; z-index: 3; }

  160. .om-maximenu ul.om-menu li.backLava .leftLava {}

  161. .om-maximenu ul.om-menu li.backLava .bottomLava {}

  162. .om-maximenu ul.om-menu li.backLava .cornerLava {}

  163. 

  164. /* OM Maximenu Content - no style */

  165. .om-maximenu .om-maximenu-content { left: 0; top: 30px; padding: 0;  }

  166. 

  167. *+html .om-maximenu .om-maximenu-content { width: 300px; } /* IE 7 */

  168. 

  169. .om-maximenu .om-maximenu-arrow { }

  170. 

  171. .om-maximenu .om-maximenu-top { width: 100%; }

  172. .om-maximenu .om-maximenu-top-left {}

  173. .om-maximenu .om-maximenu-top-right {}

  174. 

  175. .om-maximenu .om-maximenu-middle { background: none #fff; width: 100%; }

  176. .om-maximenu .om-maximenu-middle-left {}

  177. .om-maximenu .om-maximenu-middle-right { padding: 10px; }

  178. 

  179. *+html .om-maximenu .om-maximenu-middle-right { width: 300px; margin-left: 20px; padding-left: 0; } /* IE 7 */

  180. 

  181. .om-maximenu .om-maximenu-bottom { width: 100%; }

  182. .om-maximenu .om-maximenu-bottom-left {}

  183. .om-maximenu .om-maximenu-bottom-right {}

  184. 

  185. /* Link Slider */

  186. .om-link-slider { display: block; height: 30px; line-height: 30px; margin: 0;  padding: 0 15px; overflow: hidden; }

  187. 

  188. /* Displace */

  189. .om-maximenu .om-maximenu-content.om-maximenu-displace { top: 0; margin-left: 0; /* IE7 */ left: 0; } /* should be set to no style */

  190. .om-maximenu .om-maximenu-content.om-maximenu-displace .om-maximenu-open { display: none; }

  191. .om-maximenu-row .om-link { position: relative; } 

  192. .om-maximenu-row .om-maximenu-content.om-maximenu-displace { float: left; }

  193. 

  194. /* Tabbed */

  195. .om-maximenu-float .om-maximenu-tabbed-content { width: 480px; }

  196. .om-maximenu-tabbed-content { clear: both; }

  197. .om-maximenu-tabbed-scrollh .om-maximenu-tabbed-content,

  198. .om-maximenu-tabbed-scrollv .om-maximenu-tabbed-content { height: 100px; overflow: hidden; }

  199. .om-maximenu-tabbed-content-inner {}

  200. .om-tabbed-content { float: left; }

  201. .om-tabbed-content-hide { display: none; }

  202. 

  203. /* Accordion */

  204. .easy-accordion { display: block; position: relative; overflow: hidden; padding: 0; margin: 0; background-color: #f2f2f2; }

  205. .easy-accordion dt,.easy-accordion dd { margin: 0; padding: 0; position: absolute; }

  206. .easy-accordion dt { position: absolute !important; background-color: #f2f2f2; height: 46px; line-height: 44px; padding: 0 15px 0 0; text-align: right; margin-bottom: 0; margin-left: 0; z-index: 5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); cursor: pointer; }

  207. .easy-accordion dt.active { cursor: pointer; color: #fff; background-color: #666; }

  208. .easy-accordion dt.hover { color:#fff; background-color: #999; }

  209. .easy-accordion dd { z-index: 1; opacity: 0; overflow: hidden; padding: 10px; background: #fff; }

  210. .easy-accordion dd.active { opacity: 1; z-index: 3; }

  211. .easy-accordion dd.no-more-active { z-index: 2; opacity: 1; }

  212. .easy-accordion dd.plus { z-index: 4 }

  213. .easy-accordion .slide-number { position: absolute; bottom: 0; left: 10px; font-weight: normal; font-size: 1.1em; /* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }

  214. .om-maximenu-style-accordion.om-maximenu-float { width: 480px; }

  215. .om-maximenu-style-accordion { height: 245px; }

  216. 

  217. /* Round About */

  218. .om-maximenu-style-roundabout.om-maximenu-float { width: 480px; }

  219. .roundabout-holder { height: 200px; display: block; padding: 0; margin: 0; }

  220. .roundabout-holder .om-leaf { list-style: none; list-style-image: none; display: block; padding: 0; margin: 0; }

  221. .om-maximenu-roundabout-content { padding: 10px; border: 1px solid #999; background-color: #fff; }

  222. 

  223. /* Long Menu */

  224. .om-menu-ul-wrapper { position: relative; }

  225. .om-menu-scroller { z-index: 100; font-weight: bold; background-color: #ccc; cursor: pointer; text-align: center; }

  226. .om-menu-scroller:hover { color: #fff; }

  227. 

  228. .om-maximenu-row .om-menu-scroller {  position: absolute; height: 30px; width: 30px; line-height: 30px; }

  229. .om-maximenu-row .om-menu-previous { top: 0; left: 0; }

  230. .om-maximenu-row .om-menu-next { top: 0; right: 0; }

  231. .om-maximenu-column .om-menu-scroller { height: 20px; line-height: 20px; }

  232. .om-maximenu-column .om-menu-previous {}

  233. .om-maximenu-column .om-menu-next {}

  234. 

  235. /* Modal */

  236. #om-maximenu-mask { position: absolute; left: 0; top: 0; z-index: 2990; background-color: #000; display: none; }

  237. #om-maximenu-modal-widows .om-maximenu-modal-content { position: fixed; z-index: 3000 !important; padding: 20px; height: auto; width: auto; }

  238. #om-maximenu-modal-widows .om-maximenu-modal-content .om-maximenu-close { color: #fff; cursor: pointer; text-align: right; }

  239. #om-maximenu-modal-widows .om-maximenu-modal-content .block { position: relative; }

  240.