You are here

black.css in The Better Mega Menu 7

Same filename and directory in other branches
  1. 8 css/styles/black.css
  2. 2.x css/styles/black.css
.tb-megamenu.style-black {
  background-color: #333;
  background-image: -moz-linear-gradient(top,#333,#444);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#333),to(#444));
  background-image: -webkit-linear-gradient(top,#333,#444);
  background-image: -o-linear-gradient(top,#333,#444);
  background-image: linear-gradient(to bottom,#333,#444);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff444444', GradientType=0);
  color: #aaa;
}
.tb-megamenu.style-black .nav > li > a {
  background: url(../../images/line.png) no-repeat 100% 0;
  border-right: none;
  color: #aaa;
  font-weight: bold;
}
.tb-megamenu.style-black .nav > li > a:focus,
.tb-megamenu.style-black .nav > li > a:hover {
  background-color: #222;
  color: #7bb9e0;
}
.tb-megamenu.style-black .nav > .active > a,
.tb-megamenu.style-black .nav > .active > a:hover,
.tb-megamenu.style-black .nav > .active > a:focus {
  background-color: inherit;
  color: #7bb9e0;
}
.tb-megamenu.style-black .nav-collapse .nav > li.active > a:hover,
.tb-megamenu.style-black .nav-collapse .nav > li.active > a:focus {
  background-color: inherit;
  color: #7bb9e0;
}
.tb-megamenu.style-black .row-fluid + .row-fluid {
  border-color: #333;
}
.tb-megamenu.style-black .dropdown .caret {
  margin-left: 5px;
}
.tb-megamenu.style-black .dropdown-menu {
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.tb-megamenu.style-black .dropdown-menu li > a {
  border-top: 1px solid #444;
  padding: 5px 20px;
  text-shadow: none;
}
.tb-megamenu.style-black .dropdown-menu li:first-child > a {
  border-top: 0;
}
.tb-megamenu.style-black .navbar .nav > li > .dropdown-menu:before {
  display: none;
}
.tb-megamenu.style-black .navbar .nav > li > .dropdown-menu:after {
  display: none;
}
.tb-megamenu.style-black .dropdown-menu .disabled > a,
.tb-megamenu.style-black .dropdown-menu .disabled > a:hover {
  color: #999;
}
.tb-megamenu.style-black .dropdown-menu .disabled > a:hover {
  background-color: transparent;
}
.tb-megamenu.style-black .nav li.dropdown.open > .dropdown-toggle {
  background-color: #666;
  color: #aaa;
}
.tb-megamenu.style-black .nav li.dropdown.active > .dropdown-toggle {
  background-color: inherit;
  color: #7bb9e0;
}
.tb-megamenu.style-black .nav > li.dropdown.open.active > a:hover,
.tb-megamenu.style-black .nav > li.dropdown.open.active > a:focus {
  background-color: #222;
  color: #7bb9e0;
}
.tb-megamenu.style-black .dropdown-menu {
  background-color: #222;
  border: none;
}
.tb-megamenu.style-black .dropdown-menu li > a {
  color: #aaa;
  border-top: 1px solid #333;
}
.tb-megamenu.style-black .dropdown-menu li > a:hover,
.tb-megamenu.style-black .dropdown-menu li > a:focus,
.tb-megamenu.style-black .dropdown-submenu:hover > a {
  background: none;
  color: #7bb9e0;
}
.tb-megamenu.style-black .nav li.dropdown.open > .dropdown-toggle,
.tb-megamenu.style-black .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: #222;
  color: #7bb9e0;
}
.tb-megamenu.style-black .mega-nav .mega-group > .mega-group-title,
.tb-megamenu.style-black .dropdown-menu .mega-nav .mega-group > .mega-group-title,
.tb-megamenu.style-black .dropdown-menu .active .mega-nav .mega-group > .mega-group-title {
  color: #ddd;
}
.tb-megamenu.style-black .tb-block {
  background: transparent;
  color: inherit;
}
.tb-megamenu.style-black .tb-block .block-inner {
  padding: 0;
}
.tb-megamenu.style-black .tb-block .block-title {
  background: inherit;
  color: #ddd;
}
.tb-megamenu.style-black .block-ct {
  background: inherit;
  color: inherit;
  padding: 0;
  *zoom: 1;
}
.tb-megamenu.style-black .block-ct:before,
.tb-megamenu.style-black .block-ct:after {
  display: table;
  content: "";
  line-height: 0;
}
.tb-megamenu.style-black .block-ct:after {
  clear: both;
}
.tb-megamenu.style-black .tb-block ul.unstyled,
.tb-megamenu.style-black .tb-block ol.unstyled,
.tb-megamenu.style-black .tb-block ul.nav,
.tb-megamenu.style-black .tb-block ol.nav {
  margin-left: 0;
}
.tb-megamenu.style-black .block_menu .nav {
  margin-bottom: 20px;
}
.tb-megamenu.style-black .block_menu .nav > li {
  border-top: 1px solid #444;
}
.tb-megamenu.style-black .block_menu .nav > li > a {
  padding: 5px;
}
.tb-megamenu.style-black .block_menu .nav > li:first-child {
  border-top: 0;
}
.tb-megamenu.style-black .block_menu .nav > li:first-child > a {
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 979px) {
.tb-megamenu.style-black {
  background-image: none;
  background-color: inherit;
}

.tb-megamenu.style-black .nav-collapse,
.tb-megamenu.style-black .nav-collapse .dropdown-menu {
  background-color: #333;
}
.tb-megamenu.style-black .nav-collapse .nav > li > a,
.tb-megamenu.style-black .nav-collapse .dropdown-menu a {
  border-bottom-color: #444;
  border-top-color: #444;
  color: #eee;
}
.tb-megamenu.style-black .nav > li > a {
  color: #eee;
  border-right: 1px solid #444;
}
}

@media (max-width: 738px) {
  .tb-megamenu.style-black .nav-collapse .nav li a {
	 border-top-color: #444;
  }
  .tb-megamenu.style-black .nav-collapse .nav > li > a,
  .tb-megamenu.style-black .nav-collapse .dropdown-menu a {
    border-bottom: none;
    border-top-color: #444;
    color: #eee;
  }
  .tb-megamenu.style-black .row-fluid + .row-fluid {
	border-top-color: #444;
  }
}

.block-view-demo .views-field-field-image img {
  border: 1px solid #333;
}

.block-view-demo .item-list ul li {
  border-bottom: 1px solid #333;
}

.block-view-demo .views-field-title a:hover,
.block-view-demo .views-field-title a:focus {
  color: #7bb9e0;
}

File

css/styles/black.css
View source
  1. .tb-megamenu.style-black {
  2. background-color: #333;
  3. background-image: -moz-linear-gradient(top,#333,#444);
  4. background-image: -webkit-gradient(linear,0 0,0 100%,from(#333),to(#444));
  5. background-image: -webkit-linear-gradient(top,#333,#444);
  6. background-image: -o-linear-gradient(top,#333,#444);
  7. background-image: linear-gradient(to bottom,#333,#444);
  8. background-repeat: repeat-x;
  9. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff444444', GradientType=0);
  10. color: #aaa;
  11. }
  12. .tb-megamenu.style-black .nav > li > a {
  13. background: url(../../images/line.png) no-repeat 100% 0;
  14. border-right: none;
  15. color: #aaa;
  16. font-weight: bold;
  17. }
  18. .tb-megamenu.style-black .nav > li > a:focus,
  19. .tb-megamenu.style-black .nav > li > a:hover {
  20. background-color: #222;
  21. color: #7bb9e0;
  22. }
  23. .tb-megamenu.style-black .nav > .active > a,
  24. .tb-megamenu.style-black .nav > .active > a:hover,
  25. .tb-megamenu.style-black .nav > .active > a:focus {
  26. background-color: inherit;
  27. color: #7bb9e0;
  28. }
  29. .tb-megamenu.style-black .nav-collapse .nav > li.active > a:hover,
  30. .tb-megamenu.style-black .nav-collapse .nav > li.active > a:focus {
  31. background-color: inherit;
  32. color: #7bb9e0;
  33. }
  34. .tb-megamenu.style-black .row-fluid + .row-fluid {
  35. border-color: #333;
  36. }
  37. .tb-megamenu.style-black .dropdown .caret {
  38. margin-left: 5px;
  39. }
  40. .tb-megamenu.style-black .dropdown-menu {
  41. -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  42. -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  43. box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  44. }
  45. .tb-megamenu.style-black .dropdown-menu li > a {
  46. border-top: 1px solid #444;
  47. padding: 5px 20px;
  48. text-shadow: none;
  49. }
  50. .tb-megamenu.style-black .dropdown-menu li:first-child > a {
  51. border-top: 0;
  52. }
  53. .tb-megamenu.style-black .navbar .nav > li > .dropdown-menu:before {
  54. display: none;
  55. }
  56. .tb-megamenu.style-black .navbar .nav > li > .dropdown-menu:after {
  57. display: none;
  58. }
  59. .tb-megamenu.style-black .dropdown-menu .disabled > a,
  60. .tb-megamenu.style-black .dropdown-menu .disabled > a:hover {
  61. color: #999;
  62. }
  63. .tb-megamenu.style-black .dropdown-menu .disabled > a:hover {
  64. background-color: transparent;
  65. }
  66. .tb-megamenu.style-black .nav li.dropdown.open > .dropdown-toggle {
  67. background-color: #666;
  68. color: #aaa;
  69. }
  70. .tb-megamenu.style-black .nav li.dropdown.active > .dropdown-toggle {
  71. background-color: inherit;
  72. color: #7bb9e0;
  73. }
  74. .tb-megamenu.style-black .nav > li.dropdown.open.active > a:hover,
  75. .tb-megamenu.style-black .nav > li.dropdown.open.active > a:focus {
  76. background-color: #222;
  77. color: #7bb9e0;
  78. }
  79. .tb-megamenu.style-black .dropdown-menu {
  80. background-color: #222;
  81. border: none;
  82. }
  83. .tb-megamenu.style-black .dropdown-menu li > a {
  84. color: #aaa;
  85. border-top: 1px solid #333;
  86. }
  87. .tb-megamenu.style-black .dropdown-menu li > a:hover,
  88. .tb-megamenu.style-black .dropdown-menu li > a:focus,
  89. .tb-megamenu.style-black .dropdown-submenu:hover > a {
  90. background: none;
  91. color: #7bb9e0;
  92. }
  93. .tb-megamenu.style-black .nav li.dropdown.open > .dropdown-toggle,
  94. .tb-megamenu.style-black .nav li.dropdown.open.active > .dropdown-toggle {
  95. background-color: #222;
  96. color: #7bb9e0;
  97. }
  98. .tb-megamenu.style-black .mega-nav .mega-group > .mega-group-title,
  99. .tb-megamenu.style-black .dropdown-menu .mega-nav .mega-group > .mega-group-title,
  100. .tb-megamenu.style-black .dropdown-menu .active .mega-nav .mega-group > .mega-group-title {
  101. color: #ddd;
  102. }
  103. .tb-megamenu.style-black .tb-block {
  104. background: transparent;
  105. color: inherit;
  106. }
  107. .tb-megamenu.style-black .tb-block .block-inner {
  108. padding: 0;
  109. }
  110. .tb-megamenu.style-black .tb-block .block-title {
  111. background: inherit;
  112. color: #ddd;
  113. }
  114. .tb-megamenu.style-black .block-ct {
  115. background: inherit;
  116. color: inherit;
  117. padding: 0;
  118. *zoom: 1;
  119. }
  120. .tb-megamenu.style-black .block-ct:before,
  121. .tb-megamenu.style-black .block-ct:after {
  122. display: table;
  123. content: "";
  124. line-height: 0;
  125. }
  126. .tb-megamenu.style-black .block-ct:after {
  127. clear: both;
  128. }
  129. .tb-megamenu.style-black .tb-block ul.unstyled,
  130. .tb-megamenu.style-black .tb-block ol.unstyled,
  131. .tb-megamenu.style-black .tb-block ul.nav,
  132. .tb-megamenu.style-black .tb-block ol.nav {
  133. margin-left: 0;
  134. }
  135. .tb-megamenu.style-black .block_menu .nav {
  136. margin-bottom: 20px;
  137. }
  138. .tb-megamenu.style-black .block_menu .nav > li {
  139. border-top: 1px solid #444;
  140. }
  141. .tb-megamenu.style-black .block_menu .nav > li > a {
  142. padding: 5px;
  143. }
  144. .tb-megamenu.style-black .block_menu .nav > li:first-child {
  145. border-top: 0;
  146. }
  147. .tb-megamenu.style-black .block_menu .nav > li:first-child > a {
  148. padding-top: 0;
  149. border-top: 0;
  150. }
  151. @media (max-width: 979px) {
  152. .tb-megamenu.style-black {
  153. background-image: none;
  154. background-color: inherit;
  155. }
  156. .tb-megamenu.style-black .nav-collapse,
  157. .tb-megamenu.style-black .nav-collapse .dropdown-menu {
  158. background-color: #333;
  159. }
  160. .tb-megamenu.style-black .nav-collapse .nav > li > a,
  161. .tb-megamenu.style-black .nav-collapse .dropdown-menu a {
  162. border-bottom-color: #444;
  163. border-top-color: #444;
  164. color: #eee;
  165. }
  166. .tb-megamenu.style-black .nav > li > a {
  167. color: #eee;
  168. border-right: 1px solid #444;
  169. }
  170. }
  171. @media (max-width: 738px) {
  172. .tb-megamenu.style-black .nav-collapse .nav li a {
  173. border-top-color: #444;
  174. }
  175. .tb-megamenu.style-black .nav-collapse .nav > li > a,
  176. .tb-megamenu.style-black .nav-collapse .dropdown-menu a {
  177. border-bottom: none;
  178. border-top-color: #444;
  179. color: #eee;
  180. }
  181. .tb-megamenu.style-black .row-fluid + .row-fluid {
  182. border-top-color: #444;
  183. }
  184. }
  185. .block-view-demo .views-field-field-image img {
  186. border: 1px solid #333;
  187. }
  188. .block-view-demo .item-list ul li {
  189. border-bottom: 1px solid #333;
  190. }
  191. .block-view-demo .views-field-title a:hover,
  192. .block-view-demo .views-field-title a:focus {
  193. color: #7bb9e0;
  194. }