You are here

Home » API reference » Media Gallery 7.2

media_gallery.css in Media Gallery 7.2

Same filename and directory in other branches
  1. 7 media_gallery.css
/* @group Node edit form styles */

.settings-group {
  clear: both;
  margin-top: 1.5em;
}

.settings-group > img {
  float: left;
  margin-bottom: 2em;
  margin-right: 2em;
}

.settings-group .group-label {
  font-weight: bold;
  margin-bottom: 0.75em;
}

.settings-group .form-item {
  padding: 0;
}

.settings-group .form-item label {
  font-weight: normal;
}

.settings-group .form-item label.option {
  font-size: 1em;
  vertical-align: middle;
}

.settings-group .form-item div.description {
  font-size: 0.87em;
  margin-top: 0;
}

.settings-group .form-inline {
  float: left;
}

.settings-group .form-inline label {
  display: none;
}

.settings-group .form-inline select {
  margin: 2em 1em 0 0;
}

.settings-group .form-inline.label label {
  display: block;
  position: absolute;
}

.settings-group .form-select.enhanced {
  margin-right: 1em;
}

.no-overflow {
  overflow: hidden;
}

.field-name-media-gallery-format .form-type-radio label.option,
.field-name-media-gallery-lightbox-extras .form-type-checkbox label.option {
  font-size: 0.94em;
  line-height: 1.2em;
}

.field-name-media-gallery-format .form-type-radio label.option .description {
  color: #666666;
  display: block;
  font-size: 0.86em;
}

.no-label label,
.no-group-label > .form-item > label {
  display: none;
}

.setting-icon {
  background: url('images/gallery-icon-sprite.png') no-repeat left top transparent;
  display: block;
  float: left;
  height: 44px;
  margin: 0 0.5em;
  width: 42px;
}

.settings-group .setting-icon {
  height: 109px;
  width: 104px;
}

.gallery-settings .setting-icon {
  background-position: -442px -57px;
}

.presentation-settings .setting-icon {
  background-position: 0 -57px;
}

.block-settings .setting-icon {
  background-position: -331px -57px;
}

.galleries-settings .setting-icon {
  background-position: -552px -57px;
}

/* @end */

/* @group Galleries form styles */

.form-media-gallery-collection .field-name-field-license {
  clear: both;
}

#edit-media-gallery-lightbox-extras {
  margin-left: 2em;
  margin-top: -1em;
}

.presentation-settings .setting-icon.display-page {
  background-position: -221px -57px;
}

.presentation-settings .setting-icon.display-lightbox {
  background-position: 0 -57px;
}

.presentation-settings .setting-icon.display-extras {
  background-position: -110px -57px;
}

/* @end */

/* @group Gallery thumbnail styles */

.media-gallery-collection a.media-gallery-thumb,
.media-gallery-media a.media-gallery-thumb,
.media-gallery-thumb img {
  display: block;
  overflow: hidden;
  position: relative;
}

.media-gallery-media > .field-items > .field-item {
  float: left;
  position: relative;
}

.media-gallery-media .media-gallery-item-wrapper {
  margin: 0.5em;
  position: relative;
}

.media-gallery-media .media-gallery-item {
  background: #FFFFFF;
  border: 1px solid #666666;
  padding: 2%;
}

.meta-wrapper,
.meta-wrapper:link,
.meta-wrapper:hover,
.meta-wrapper:visited,
.meta-wrapper:active {
  font-size: 0.8462em;
  line-height: 1.5em;
  min-height: 3em;
  vertical-align: top;
}

.meta-wrapper .media-title * .field-item,
.meta-wrapper .media-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  -moz-binding: url('ellipsis.xml#ellipsis');
}

.meta-wrapper {
  display: block;
  padding: 0 9%;
}

.meta-wrapper.hover {
  line-height: 1em;
  padding: 0;
}

.meta-wrapper .media-description span {
  white-space: nowrap;
}

.media-license {
  display: block;
  float: right;
  font-size: 0;
  line-height: 14px;
}

.media-gallery-media .media-license {
  float: left;
  margin: 4px 0 0;
}

.media-license span {
  background: url('images/creative-commons-sprite.png') no-repeat left top transparent;
  display: inline-block;
  font-size: 1em;
  height: 0;
  padding: 7px;
  width: 0;
}

.media-license span + span {
  margin-left: 3px;
}

.media-license.dark .copyright {
  background-position: -95px -1px;
}

.media-license.dark .attribution {
  background-position: -2px -1px;
}

.media-license.dark .non-commercial {
  background-position: -25px -1px;
}

.media-license.dark .share-alike {
  background-position: -49px -1px;
}

.media-license.dark .no-deriv {
  background-position: -72px -1px;
}

.media-license.light .copyright {
  background-position: -95px -51px;
}

.media-license.light .attribution {
  background-position: -2px -51px;
}

.media-license.light .non-commercial {
  background-position: -25px -51px;
}

.media-license.light .share-alike {
  background-position: -49px -51px;
}

.media-license.light .no-deriv {
  background-position: -72px -51px;
}

.media-license.medium .copyright {
  background-position: -95px -26px;
}

.media-license.medium .attribution {
  background-position: -2px -26px;
}

.media-license.medium .non-commercial {
  background-position: -25px -26px;
}

.media-license.medium .share-alike {
  background-position: -49px -26px;
}

.media-license.medium .no-deriv {
  background-position: -72px -26px;
}

.meta-wrapper.hover {
  color: #666;
  display: none;
  left: -2px;
  line-height: 1.25em;
  margin: -7px 0 0;
  min-height: 0;
  min-width: 100%;
  position: absolute;
  *right: -2px;
  top: 100%;
  z-index: 1;
}

.meta-wrapper.hover .slider {
  background: url('images/hover-bubble.png') no-repeat left top transparent;
  display: block;
}

.meta-wrapper.hover .slider.top {
  padding-left: 53px;
}

.meta-wrapper.hover .slider.top-inner {
  background-position: right -48px;
  height: 14px;
}

.meta-wrapper.hover .slider.meta-outer {
  background: url('images/hover-bubble-middle.png') repeat-y left top transparent;
  padding-left: 0.5em;
}

.meta-wrapper.hover .slider.meta-inner {
  background: url('images/hover-bubble-middle.png') repeat-y right top transparent;
  padding-right: 0.5em;
}

.meta-wrapper.hover .slider.bottom {
  background-position: left -42px;
  padding-left: 53px;
}

.meta-wrapper.hover .slider.bottom-inner {
  background-position: right bottom;
  height: 5px;
}

.meta-wrapper .media-title {
  display: block;
  font-size: 12px;
  font-weight: bold;
  height: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
}

.meta-wrapper.hover .media-title {
  color: #000;
}

.meta-wrapper.hover .media-title a,
.meta-wrapper.hover .media-title a:hover {
  color: #000;
}

.media-gallery-item-wrapper:hover .meta-wrapper.hover,
.media-collection-item-wrapper:hover + .meta-wrapper.hover,
.meta-wrapper.hover:hover {
  display: block;
}

.meta-inner span {
  display: block;
}

.media-description span {
  display: inline;
  line-height: 1em;
}

/* @end */

/* @group Gridding styles */

.media-gallery-media {

}

.mg-col {
  display: inline-block;
  margin: 0 -0.5em 3em;
  width: 100%;
}

.mg-col > .field-items {
  width: 100%;
}

a.media-gallery-thumb img,
.media-gallery-detail img {
  height: auto;
  overflow: auto;
  width: 100%;
}

/**
 * The following widths are inflected with !important to
 * prevent users in the ThemeBuilder from destroying the
 * presentation of their galleries if they alter the width
 * of items with the .field class.
 */
.mg-col-1 > .field-items > .field-item,
.mg-col-1 .mg-gallery,
.media-gallery-detail .field-items > .field-item {
  width: 100% !important;
}

.mg-col-2 > .field-items > .field-item,
.mg-col-2 .mg-gallery {
  width: 50% !important;
}

.mg-col-3 > .field-items > .field-item,
.mg-col-3 .mg-gallery {
  width: 33.3% !important;
}

.mg-col-4 > .field-items > .field-item,
.mg-col-4 .mg-gallery {
  width: 24.96% !important;
}

.mg-col-5 > .field-items > .field-item,
.mg-col-5 .mg-gallery {
  width: 20% !important;
}

.mg-col-6 > .field-items > .field-item,
.mg-col-6 .mg-gallery {
  width: 16.6666666665% !important;
}

.mg-col-7 > .field-items > .field-item,
.mg-col-7 .mg-gallery {
  width: 14.2857142857% !important;
}

.mg-col-8 > .field-items > .field-item,
.mg-col-8 .mg-gallery {
  width: 12.5% !important;
}

.mg-col-9 > .field-items > .field-item,
.mg-col-9 .mg-gallery {
  width: 11.1111111111% !important;
}

.mg-col-10 > .field-items > .field-item,
.mg-col-10 .mg-gallery {
  width: 10% !important;
}

.mg-col .mg-gallery.mg-teaser {
  float: left;
}

.mg-col .mg-gallery.mg-teaser,
.mg-col .mg-gallery.mg-teaser .content {
  margin: 0;
  outline: none;
  position: relative;
}

.mg-col .mg-gallery.mg-teaser h2 {
  display: none;
}

.mg-col .mg-gallery.mg-teaser .float-overflow {
  margin: 0.5em;
  overflow: visible;
  position: relative;
}

/* @end */

/* @group Detail page styles */

.media-gallery-detail-wrapper {
  margin-top: 1em;
}

.media-gallery-detail {
  float: left;
  margin-right: 1em;
  line-height: normal;
  max-width: 70%;
}

.media-gallery-detail-wrapper .field-name-media-description .field-item {
  word-wrap: break-word;
}

.media-gallery-detail-info {
  clear: both;
  display: inline-block;
  margin-top: 0.5em;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.media-gallery-detail-info .media-license {
  position: absolute;
  top: 0;
  right: 0;
}

.media-gallery-detail-info + .media-gallery-detail-info {
  margin-top: 1em;
}

.media-gallery-detail-image-info-wrapper {
  clear: right;
  float: right;
}

.media-gallery-image-count {
  padding-right: 1em;
}

/* @end */

/* @group Lightbox styles */

#cboxSlideshow {
  right: 40px;
}

.mg-lightbox-wrapper {
  color: #666666;
}

.mg-lightbox-wrapper a,
.lightbox-stack a {
  color: #0074BD;
}

.mg-lightbox-wrapper a:link,
.mg-lightbox-wrapper a:visited,
.mg-lightbox-wrapper a:active,
.mg-lightbox-wrapper a:hover,
.lightbox-stack a:link,
.lightbox-stack a:visited,
.lightbox-stack a:active,
.lightbox-stack a:hover{
  color: #0074BD;
}

.mg-lightbox-wrapper a:hover,
.lightbox-stack a:hover {
  text-decoration: underline;
}

.mg-lightbox-wrapper .lightbox-title {
  font-size: 1.8em;
  font-weight: bold;
  padding-bottom: 0.2em;
  padding-top: 0.2em;
}

.mg-lightbox-detail {
  float: left;
  padding-right: 320px;
}

.mg-lightbox-description {
  width: 300px;
  margin-left: -300px;
  float: left;
}

.lightbox-stack {
  min-width: 250px;
}

/* @end */

/* @group Gallery of Galleries styles */

.media-collection-item-wrapper {
  padding: 9%;
  position: relative;
}

.stack-image {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.media-collection-item-wrapper .media-gallery-item {
  border: none;
  position: relative;
}

.mg-gallery img.stack-image,
.mg-gallery .media-gallery-thumb img {
  border: 0;
  padding: 0;
}

/* @end */

/* @group Gallery node styles */

.colorbox-supplemental-links {
  display: none;
}

/* @end */

/* @group Overrides */

a.contextual-links-trigger {
  background-position: 2px -18px;
}

a.contextual-links-trigger:hover,
div.contextual-links-active a.contextual-links-trigger {
  background-position: 2px 0;
}

/* remove extra padding around the iframe */
.ui-dialog .media-modal-frame {
  padding: 0 !important;
}

/* @end */

File

media_gallery.css
View source 
  1. 

  2. /* @group Node edit form styles */

  3. 

  4. .settings-group {

  5.   clear: both;

  6.   margin-top: 1.5em;

  7. }

  8. 

  9. .settings-group > img {

  10.   float: left;

  11.   margin-bottom: 2em;

  12.   margin-right: 2em;

  13. }

  14. 

  15. .settings-group .group-label {

  16.   font-weight: bold;

  17.   margin-bottom: 0.75em;

  18. }

  19. 

  20. .settings-group .form-item {

  21.   padding: 0;

  22. }

  23. 

  24. .settings-group .form-item label {

  25.   font-weight: normal;

  26. }

  27. 

  28. .settings-group .form-item label.option {

  29.   font-size: 1em;

  30.   vertical-align: middle;

  31. }

  32. 

  33. .settings-group .form-item div.description {

  34.   font-size: 0.87em;

  35.   margin-top: 0;

  36. }

  37. 

  38. .settings-group .form-inline {

  39.   float: left;

  40. }

  41. 

  42. .settings-group .form-inline label {

  43.   display: none;

  44. }

  45. 

  46. .settings-group .form-inline select {

  47.   margin: 2em 1em 0 0;

  48. }

  49. 

  50. .settings-group .form-inline.label label {

  51.   display: block;

  52.   position: absolute;

  53. }

  54. 

  55. .settings-group .form-select.enhanced {

  56.   margin-right: 1em;

  57. }

  58. 

  59. .no-overflow {

  60.   overflow: hidden;

  61. }

  62. 

  63. .field-name-media-gallery-format .form-type-radio label.option,

  64. .field-name-media-gallery-lightbox-extras .form-type-checkbox label.option {

  65.   font-size: 0.94em;

  66.   line-height: 1.2em;

  67. }

  68. 

  69. .field-name-media-gallery-format .form-type-radio label.option .description {

  70.   color: #666666;

  71.   display: block;

  72.   font-size: 0.86em;

  73. }

  74. 

  75. .no-label label,

  76. .no-group-label > .form-item > label {

  77.   display: none;

  78. }

  79. 

  80. .setting-icon {

  81.   background: url('images/gallery-icon-sprite.png') no-repeat left top transparent;

  82.   display: block;

  83.   float: left;

  84.   height: 44px;

  85.   margin: 0 0.5em;

  86.   width: 42px;

  87. }

  88. 

  89. .settings-group .setting-icon {

  90.   height: 109px;

  91.   width: 104px;

  92. }

  93. 

  94. .gallery-settings .setting-icon {

  95.   background-position: -442px -57px;

  96. }

  97. 

  98. .presentation-settings .setting-icon {

  99.   background-position: 0 -57px;

  100. }

  101. 

  102. .block-settings .setting-icon {

  103.   background-position: -331px -57px;

  104. }

  105. 

  106. .galleries-settings .setting-icon {

  107.   background-position: -552px -57px;

  108. }

  109. 

  110. /* @end */

  111. 

  112. /* @group Galleries form styles */

  113. 

  114. .form-media-gallery-collection .field-name-field-license {

  115.   clear: both;

  116. }

  117. 

  118. #edit-media-gallery-lightbox-extras {

  119.   margin-left: 2em;

  120.   margin-top: -1em;

  121. }

  122. 

  123. .presentation-settings .setting-icon.display-page {

  124.   background-position: -221px -57px;

  125. }

  126. 

  127. .presentation-settings .setting-icon.display-lightbox {

  128.   background-position: 0 -57px;

  129. }

  130. 

  131. .presentation-settings .setting-icon.display-extras {

  132.   background-position: -110px -57px;

  133. }

  134. 

  135. /* @end */

  136. 

  137. /* @group Gallery thumbnail styles */

  138. 

  139. .media-gallery-collection a.media-gallery-thumb,

  140. .media-gallery-media a.media-gallery-thumb,

  141. .media-gallery-thumb img {

  142.   display: block;

  143.   overflow: hidden;

  144.   position: relative;

  145. }

  146. 

  147. .media-gallery-media > .field-items > .field-item {

  148.   float: left;

  149.   position: relative;

  150. }

  151. 

  152. .media-gallery-media .media-gallery-item-wrapper {

  153.   margin: 0.5em;

  154.   position: relative;

  155. }

  156. 

  157. .media-gallery-media .media-gallery-item {

  158.   background: #FFFFFF;

  159.   border: 1px solid #666666;

  160.   padding: 2%;

  161. }

  162. 

  163. .meta-wrapper,

  164. .meta-wrapper:link,

  165. .meta-wrapper:hover,

  166. .meta-wrapper:visited,

  167. .meta-wrapper:active {

  168.   font-size: 0.8462em;

  169.   line-height: 1.5em;

  170.   min-height: 3em;

  171.   vertical-align: top;

  172. }

  173. 

  174. .meta-wrapper .media-title * .field-item,

  175. .meta-wrapper .media-title {

  176.   overflow: hidden;

  177.   text-overflow: ellipsis;

  178.   white-space: nowrap;

  179.   width: 100%;

  180.   -moz-binding: url('ellipsis.xml#ellipsis');

  181. }

  182. 

  183. .meta-wrapper {

  184.   display: block;

  185.   padding: 0 9%;

  186. }

  187. 

  188. .meta-wrapper.hover {

  189.   line-height: 1em;

  190.   padding: 0;

  191. }

  192. 

  193. .meta-wrapper .media-description span {

  194.   white-space: nowrap;

  195. }

  196. 

  197. .media-license {

  198.   display: block;

  199.   float: right;

  200.   font-size: 0;

  201.   line-height: 14px;

  202. }

  203. 

  204. .media-gallery-media .media-license {

  205.   float: left;

  206.   margin: 4px 0 0;

  207. }

  208. 

  209. .media-license span {

  210.   background: url('images/creative-commons-sprite.png') no-repeat left top transparent;

  211.   display: inline-block;

  212.   font-size: 1em;

  213.   height: 0;

  214.   padding: 7px;

  215.   width: 0;

  216. }

  217. 

  218. .media-license span + span {

  219.   margin-left: 3px;

  220. }

  221. 

  222. .media-license.dark .copyright {

  223.   background-position: -95px -1px;

  224. }

  225. 

  226. .media-license.dark .attribution {

  227.   background-position: -2px -1px;

  228. }

  229. 

  230. .media-license.dark .non-commercial {

  231.   background-position: -25px -1px;

  232. }

  233. 

  234. .media-license.dark .share-alike {

  235.   background-position: -49px -1px;

  236. }

  237. 

  238. .media-license.dark .no-deriv {

  239.   background-position: -72px -1px;

  240. }

  241. 

  242. .media-license.light .copyright {

  243.   background-position: -95px -51px;

  244. }

  245. 

  246. .media-license.light .attribution {

  247.   background-position: -2px -51px;

  248. }

  249. 

  250. .media-license.light .non-commercial {

  251.   background-position: -25px -51px;

  252. }

  253. 

  254. .media-license.light .share-alike {

  255.   background-position: -49px -51px;

  256. }

  257. 

  258. .media-license.light .no-deriv {

  259.   background-position: -72px -51px;

  260. }

  261. 

  262. .media-license.medium .copyright {

  263.   background-position: -95px -26px;

  264. }

  265. 

  266. .media-license.medium .attribution {

  267.   background-position: -2px -26px;

  268. }

  269. 

  270. .media-license.medium .non-commercial {

  271.   background-position: -25px -26px;

  272. }

  273. 

  274. .media-license.medium .share-alike {

  275.   background-position: -49px -26px;

  276. }

  277. 

  278. .media-license.medium .no-deriv {

  279.   background-position: -72px -26px;

  280. }

  281. 

  282. .meta-wrapper.hover {

  283.   color: #666;

  284.   display: none;

  285.   left: -2px;

  286.   line-height: 1.25em;

  287.   margin: -7px 0 0;

  288.   min-height: 0;

  289.   min-width: 100%;

  290.   position: absolute;

  291.   *right: -2px;

  292.   top: 100%;

  293.   z-index: 1;

  294. }

  295. 

  296. .meta-wrapper.hover .slider {

  297.   background: url('images/hover-bubble.png') no-repeat left top transparent;

  298.   display: block;

  299. }

  300. 

  301. .meta-wrapper.hover .slider.top {

  302.   padding-left: 53px;

  303. }

  304. 

  305. .meta-wrapper.hover .slider.top-inner {

  306.   background-position: right -48px;

  307.   height: 14px;

  308. }

  309. 

  310. .meta-wrapper.hover .slider.meta-outer {

  311.   background: url('images/hover-bubble-middle.png') repeat-y left top transparent;

  312.   padding-left: 0.5em;

  313. }

  314. 

  315. .meta-wrapper.hover .slider.meta-inner {

  316.   background: url('images/hover-bubble-middle.png') repeat-y right top transparent;

  317.   padding-right: 0.5em;

  318. }

  319. 

  320. .meta-wrapper.hover .slider.bottom {

  321.   background-position: left -42px;

  322.   padding-left: 53px;

  323. }

  324. 

  325. .meta-wrapper.hover .slider.bottom-inner {

  326.   background-position: right bottom;

  327.   height: 5px;

  328. }

  329. 

  330. .meta-wrapper .media-title {

  331.   display: block;

  332.   font-size: 12px;

  333.   font-weight: bold;

  334.   height: 1.5em;

  335.   line-height: 1.5em;

  336.   white-space: nowrap;

  337. }

  338. 

  339. .meta-wrapper.hover .media-title {

  340.   color: #000;

  341. }

  342. 

  343. .meta-wrapper.hover .media-title a,

  344. .meta-wrapper.hover .media-title a:hover {

  345.   color: #000;

  346. }

  347. 

  348. .media-gallery-item-wrapper:hover .meta-wrapper.hover,

  349. .media-collection-item-wrapper:hover + .meta-wrapper.hover,

  350. .meta-wrapper.hover:hover {

  351.   display: block;

  352. }

  353. 

  354. .meta-inner span {

  355.   display: block;

  356. }

  357. 

  358. .media-description span {

  359.   display: inline;

  360.   line-height: 1em;

  361. }

  362. 

  363. /* @end */

  364. 

  365. /* @group Gridding styles */

  366. 

  367. .media-gallery-media {

  368. 

  369. }

  370. 

  371. .mg-col {

  372.   display: inline-block;

  373.   margin: 0 -0.5em 3em;

  374.   width: 100%;

  375. }

  376. 

  377. .mg-col > .field-items {

  378.   width: 100%;

  379. }

  380. 

  381. a.media-gallery-thumb img,

  382. .media-gallery-detail img {

  383.   height: auto;

  384.   overflow: auto;

  385.   width: 100%;

  386. }

  387. 

  388. /**

  389.  * The following widths are inflected with !important to

  390.  * prevent users in the ThemeBuilder from destroying the

  391.  * presentation of their galleries if they alter the width

  392.  * of items with the .field class.

  393.  */

  394. .mg-col-1 > .field-items > .field-item,

  395. .mg-col-1 .mg-gallery,

  396. .media-gallery-detail .field-items > .field-item {

  397.   width: 100% !important;

  398. }

  399. 

  400. .mg-col-2 > .field-items > .field-item,

  401. .mg-col-2 .mg-gallery {

  402.   width: 50% !important;

  403. }

  404. 

  405. .mg-col-3 > .field-items > .field-item,

  406. .mg-col-3 .mg-gallery {

  407.   width: 33.3% !important;

  408. }

  409. 

  410. .mg-col-4 > .field-items > .field-item,

  411. .mg-col-4 .mg-gallery {

  412.   width: 24.96% !important;

  413. }

  414. 

  415. .mg-col-5 > .field-items > .field-item,

  416. .mg-col-5 .mg-gallery {

  417.   width: 20% !important;

  418. }

  419. 

  420. .mg-col-6 > .field-items > .field-item,

  421. .mg-col-6 .mg-gallery {

  422.   width: 16.6666666665% !important;

  423. }

  424. 

  425. .mg-col-7 > .field-items > .field-item,

  426. .mg-col-7 .mg-gallery {

  427.   width: 14.2857142857% !important;

  428. }

  429. 

  430. .mg-col-8 > .field-items > .field-item,

  431. .mg-col-8 .mg-gallery {

  432.   width: 12.5% !important;

  433. }

  434. 

  435. .mg-col-9 > .field-items > .field-item,

  436. .mg-col-9 .mg-gallery {

  437.   width: 11.1111111111% !important;

  438. }

  439. 

  440. .mg-col-10 > .field-items > .field-item,

  441. .mg-col-10 .mg-gallery {

  442.   width: 10% !important;

  443. }

  444. 

  445. .mg-col .mg-gallery.mg-teaser {

  446.   float: left;

  447. }

  448. 

  449. .mg-col .mg-gallery.mg-teaser,

  450. .mg-col .mg-gallery.mg-teaser .content {

  451.   margin: 0;

  452.   outline: none;

  453.   position: relative;

  454. }

  455. 

  456. .mg-col .mg-gallery.mg-teaser h2 {

  457.   display: none;

  458. }

  459. 

  460. .mg-col .mg-gallery.mg-teaser .float-overflow {

  461.   margin: 0.5em;

  462.   overflow: visible;

  463.   position: relative;

  464. }

  465. 

  466. /* @end */

  467. 

  468. /* @group Detail page styles */

  469. 

  470. .media-gallery-detail-wrapper {

  471.   margin-top: 1em;

  472. }

  473. 

  474. .media-gallery-detail {

  475.   float: left;

  476.   margin-right: 1em;

  477.   line-height: normal;

  478.   max-width: 70%;

  479. }

  480. 

  481. .media-gallery-detail-wrapper .field-name-media-description .field-item {

  482.   word-wrap: break-word;

  483. }

  484. 

  485. .media-gallery-detail-info {

  486.   clear: both;

  487.   display: inline-block;

  488.   margin-top: 0.5em;

  489.   position: relative;

  490.   overflow: hidden;

  491.   width: 100%;

  492. }

  493. 

  494. .media-gallery-detail-info .media-license {

  495.   position: absolute;

  496.   top: 0;

  497.   right: 0;

  498. }

  499. 

  500. .media-gallery-detail-info + .media-gallery-detail-info {

  501.   margin-top: 1em;

  502. }

  503. 

  504. .media-gallery-detail-image-info-wrapper {

  505.   clear: right;

  506.   float: right;

  507. }

  508. 

  509. .media-gallery-image-count {

  510.   padding-right: 1em;

  511. }

  512. 

  513. /* @end */

  514. 

  515. /* @group Lightbox styles */

  516. 

  517. #cboxSlideshow {

  518.   right: 40px;

  519. }

  520. 

  521. .mg-lightbox-wrapper {

  522.   color: #666666;

  523. }

  524. 

  525. .mg-lightbox-wrapper a,

  526. .lightbox-stack a {

  527.   color: #0074BD;

  528. }

  529. 

  530. .mg-lightbox-wrapper a:link,

  531. .mg-lightbox-wrapper a:visited,

  532. .mg-lightbox-wrapper a:active,

  533. .mg-lightbox-wrapper a:hover,

  534. .lightbox-stack a:link,

  535. .lightbox-stack a:visited,

  536. .lightbox-stack a:active,

  537. .lightbox-stack a:hover{

  538.   color: #0074BD;

  539. }

  540. 

  541. .mg-lightbox-wrapper a:hover,

  542. .lightbox-stack a:hover {

  543.   text-decoration: underline;

  544. }

  545. 

  546. .mg-lightbox-wrapper .lightbox-title {

  547.   font-size: 1.8em;

  548.   font-weight: bold;

  549.   padding-bottom: 0.2em;

  550.   padding-top: 0.2em;

  551. }

  552. 

  553. .mg-lightbox-detail {

  554.   float: left;

  555.   padding-right: 320px;

  556. }

  557. 

  558. .mg-lightbox-description {

  559.   width: 300px;

  560.   margin-left: -300px;

  561.   float: left;

  562. }

  563. 

  564. .lightbox-stack {

  565.   min-width: 250px;

  566. }

  567. 

  568. /* @end */

  569. 

  570. /* @group Gallery of Galleries styles */

  571. 

  572. .media-collection-item-wrapper {

  573.   padding: 9%;

  574.   position: relative;

  575. }

  576. 

  577. .stack-image {

  578.   left: 0;

  579.   position: absolute;

  580.   top: 0;

  581.   width: 100%;

  582.   z-index: 0;

  583. }

  584. 

  585. .media-collection-item-wrapper .media-gallery-item {

  586.   border: none;

  587.   position: relative;

  588. }

  589. 

  590. .mg-gallery img.stack-image,

  591. .mg-gallery .media-gallery-thumb img {

  592.   border: 0;

  593.   padding: 0;

  594. }

  595. 

  596. /* @end */

  597. 

  598. /* @group Gallery node styles */

  599. 

  600. .colorbox-supplemental-links {

  601.   display: none;

  602. }

  603. 

  604. /* @end */

  605. 

  606. /* @group Overrides */

  607. 

  608. a.contextual-links-trigger {

  609.   background-position: 2px -18px;

  610. }

  611. 

  612. a.contextual-links-trigger:hover,

  613. div.contextual-links-active a.contextual-links-trigger {

  614.   background-position: 2px 0;

  615. }

  616. 

  617. /* remove extra padding around the iframe */

  618. .ui-dialog .media-modal-frame {

  619.   padding: 0 !important;

  620. }

  621. 

  622. /* @end */