/**
 * The CSS values that are wrapped in /*variable comments are intended for use
 * by https://www.drupal.org/project/style_settings. Enable that module to
 * have those CSS variables exposed in the settings UI.
 */

.flickr-photo-img {
  vertical-align: text-bottom;
}

.flickr-photo-box {
  float: left; /* LTR */
  width: 260px;
  height: 260px;
  padding: 10px;
  text-align: center;
}

.flickr-photoset-img {
  vertical-align: text-bottom;
}

.flickr-photoset-box {
  float: left; /* LTR */
  padding: 10px;
  text-align: center;
}

span.flickr-wrap,
span.flickr-photoset-single {
  position: relative;
  display: inline-block;
  margin: 0 5px 5px 0; /* LTR */
  vertical-align: top;
}

span.flickr-credit {
  display: block;
  overflow: hidden;
  padding: 0 0 4px 4px;
  font-size: /*variable:flickr_capsize*/80%/*variable*/;
  line-height: 100%;
}

.flickr-slideshow {
  position: relative;
  overflow: hidden;
  width: /*variable:flickr_sswidth*/100%/*variable*/;
  height: 0;
  /*The percentage is the height/width ratio. Defaults to 3:4.*/
  padding-bottom: /*variable:flickr_slideshow_ratio*/75%/*variable*/;
}

.flickr-slideshow object {
  position: absolute;
  top: 0;
  left: 0; /* LTR */
  max-width: 100%;
  max-height: 100%;
}

.flickr-block-photosets .flickr-block-photoset {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid #dfdfdf;
}

span.floatleft {
  float: left; /* LTR */
  margin: 5px 5px 0 0; /* LTR */
}
span.floatright {
  float: right; /* LTR */
  margin: 5px 0 0 10px; /* LTR */
}

span.flickr-tags {
  font-style: italic;
}

.flickr-wrap,
.flickr-wrap img,
.flickr-wrap .flickr-credit {
  /*See http://stackoverflow.com/a/11390432/523688*/
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
}

div.flickr-photoset {
  clear: both;
}

span.flickr-empty {
  display: inline-block;
  margin: 10px;
}

.page-flickr-sets h1#page-title {
  display: none;
}

.tips span.ctools-toggle {
  float: none !important;
}

span.grayed-out,
.form-disabled label,
input[disabled=disabled] label {
  color: darkgray;
}

span.grayed-out-help {
  color: #666;
}

.flickr-form-align {
  text-align: right; /* LTR */
}

.form-item.form-type-textfield.form-item-flickr-sswratio {
  float: left; /* LTR */
}

/*Puts a preview template next to the preview itself.*/
.flickr-preview {
  float: left; /* LTR */
  margin: 0 12px 15px 0; /* LTR */
  padding: 10px;
  border: 1px solid #ccc;
}