@import includes/settings
@import includes/mixins
@import includes/colors
/* Reveal Modals */
.reveal-modal-bg
  position: fixed
  height: 100%
  width: 100%
  background: #000
  background: rgba(0,0,0,0.8)
  z-index: 100
  display: none
  top: 0
  left: 0

.reveal-modal
  visibility: hidden
  top: 100px
  left: 50%
  margin-left: -300px
  width: 520px
  background: #eee image-url('misc/modal-gloss.png') no-repeat -200px -80px
  position: absolute
  z-index: 101
  padding: 30px 40px 34px
  +border-radius(5px)
  +box-shadow(0 0 10px rgba(0,0,0,0.4))
  &.small
    width: 200px
    margin-left: -140px
  &.medium
    width: 400px
    margin-left: -240px
  &.large
    width: 600px
    margin-left: -340px
  &.xlarge
    width: 800px
    margin-left: -440px
  .close-reveal-modal
    +font-size(22)
    line-height: .5
    position: absolute
    top: 8px
    right: 11px
    color: #aaa
    text-shadow: 0 -1px 1px rgba(0,0,0,0.6)
    font-weight: bold
    cursor: pointer

/* Mobile */
@media only screen and (device-width: 768px), (device-width: 800px)
  .reveal-modal-bg
    position: absolute
  .reveal-modal
    &.small, &.medium, &.large, &.xlarge
      width: 60%
      top: 30%
      left: 15%
      margin-left: 0px
      padding: 5%
      height: auto
@media only screen and (max-width: 767px)
  .reveal-modal-bg
    position: absolute
  .reveal-modal
    &.small, &.medium, &.large, &.xlarge
      width: 80%
      top: 15%
      left: 5%
      margin-left: 0px
      padding: 5%
      height: auto


/* NOTES */
/* Close button entity is × */
	
/* Example markup */
/* <div id="myModal" class="reveal-modal"> */
/* 	<h2>Awesome. I have it.</h2> */
/* 	<p class="lead">Your couch.  I it's mine.</p> */
/* 	<p>Lorem ipsum dolor sit amet...</p> */
/* 	<a class="close-reveal-modal">&#215;</a> */
/* </div> */