/**
 * CSS Modal Themes
 * http://drublic.github.com/css-modal
 *
 * @author Hans Christian Reinl - @drublic
 */

/*
 * Global Theme Styles
 */

.css-modal {
  color: var(--modal--color);
  line-height: 1.3;
}

/* Content Area */
.css-modal_inner {
  border-radius: var(--modal--border-radius) 0 var(--modal--border-radius) var(--modal--border-radius);
  background: var(--modal--inner-background);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);

  max-width: 100%;

  transition: max-width 0.25s linear,
              margin-left 0.125s linear;
}


/* Header */
.css-modal_header {
  border-bottom: 1px solid var(--modal--border-color);
  padding: 0 1.2em;
}

.css-modal_header > h2 {
  margin: 0.5em 0;
}

/* Content */
.css-modal_content {
  border-bottom: 1px solid var(--modal--border-color);
  padding: var(--modal--content-margin);
}


/* Footer */
.css-modal_footer {
  border-top: 1px solid var(--modal--border-color);
  padding: 0 var(--modal--content-margin) var(--modal--content-margin);
  background: #f0f0f0;
  border-radius: var(--modal--border-radius);
}


/* Close button */
.css-modal_close {
  text-indent: -100px;
}

/* Background as close */
.css-modal_close::before {
  background: rgba(0, 0, 0, 0.7);
}

  /* Actual close button on modal */
.css-modal_close::after {
  content: '\00d7';
  background: var(--modal--inner-background);

  border-radius: var(--modal--border-radius) var(--modal--border-radius) 0 0;
  font-size: 1.2rem;
  text-decoration: none;
  text-indent: 0;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  vertical-align: middle;
}


/* For small screens adjust the modal */
@media (max-width: 30em) {
  .css-modal_inner {
    padding-top: 3em;
    box-shadow: none;
  }

  .css-modal_close {
    text-decoration: none;
  }

  .css-modal_close::before {
    background: var(--modal--mobile-header);

    height: 3em;
    box-shadow: 0 0 5px rgba(0,0,0,0.6);
  }

  .css-modal_close::after {
    content: attr(data-close);
    font-size: 1em;
    padding: 0.5em 1em;
  }
}