<a class="button" href="#openModal">Open it up!</a>

<div id="openModal" class="modalbg">
  <div class="dialog">
    <a href="#close" title="Close" class="close">X</a>
    <h2>Holy Crap!!!</h2>
    <p>You freakin' did it!</p>
    <p>You opened up the freakin' modal window! Now close it, ya dingus.</p>
    <p class="fineprint">Based on the article "Creating a modal window with HTML5 & CSS3" at <a href="webdesignerdepot.com">Webdesigner Depot</a></p>
    <p class="fineprint">p.s. Sorry for calling you a dingus earlier.</p>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

.transition (@time: .5s, @range: all, @ease: ease-out) {
  -moz-transition: @range @time @ease;
  -webkit-transition: @range @time @ease;
  -o-transition: @range @time @ease;
  transition: @range @time @ease;
}

.transition-delay (@time: .4s) {
  -webkit-transition-delay: @time;  
  -moz-transition-delay: @time;  
  -o-transition-delay: @time;  
  -transition-delay: @time; 
}

.border-radius(@radius) {
  -moz-border-radius:@radius;
  -webkit-border-radius:@radius; 
  border-radius: @radius;
}

.gradient (@coler1: #fff, @coler2: #ccc) {
    background: @coler1;
    background: -moz-linear-gradient(@coler1, @coler2);
    background: -webkit-linear-gradient(@coler1, @coler2);
    background: -o-linear-gradient(@coler1, @coler2);
}

.box-shadow(@dims:0 0 10px, @color:#000) {
  box-shadow: @dims @color; // Opera, FFX4
  -moz-box-shadow:@dims @color; // FFX3.5
  -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
  .ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); }
}

.inset(@dims:1px 1px 1px, @color:#fff) {
    box-shadow: @dims @color; // Opera, FFX4
    -moz-box-shadow:@dims @color; // FFX3.5
    -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
}

body { 
  width: 100%; 
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}


.button {
  margin: 40px auto;
  font-size: 72px;
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
  text-decoration: none;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 400; 
  color: #666;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 20px 70px 30px;
  position: relative;
  top: 50px;
  background: #eee;
  width: 300px;
  display: block;
  text-align: center;
  .inset;
  .border-radius(5px);
  .transition;
  &:hover{ color: #333; background: #eeffff; .transition;}
}

.modalbg {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0);
  z-index: 99999;
  .transition(2s);
  .transition-delay(.2s);
  display: block;
  pointer-events: none;
  .dialog {
    width: 400px;
    position: relative;
    top: -1000px;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    .border-radius(10px);
    .gradient;
    .box-shadow;
  }
}

.modalbg:target {
  display: block;
  pointer-events: auto;
  background: rgba(4, 10 ,30, .8);
  .transition();
  .dialog {
    top: -20px;
    .transition(.8s);
    .transition-delay;
  }
}



.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  .box-shadow;
  .transition;
  .transition-delay(.2s);
  &:hover { background: #00d9ff; .transition; }
}

.fineprint {
  font-style: italic;
  font-size: 10px;
  color: #646;
}
a { color: #333; text-decoration: none; }

/* sorry for the sloppy less. */
/* don't tell Jen Myers */