<div class="modal">
  <header>
  	<h1>Modal Window
      <span class="close"></span>
    </h1>
	  <h2>Some more info here</h2>
  </header>
  <img src="http://turbo.premiumpixels.com/wp-content/uploads/2012/07/preview3.jpg">
</div>

<!-- image from http://www.premiumpixels.com/freebies/settings-panel-psd/ -->

@import "compass/css3";

@import "compass/css3";

* { 
  margin:0;
  padding:0;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}

body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  background:#e9e7df;
}

.modal {
	
  width:675px;
  height:425px;
  margin:50px auto;
  	
  	header {
    	
    	padding:18px 20px 20px 23px;
	    height:75px;
	    background:#fff;
    
    	h1 {
      	
	      position:relative;
      	font-size:16px;
      	line-height:20px;
      	font-weight:bold;
        color:rgba(0,0,0,0.8);
      
    	}
    
    	h2 {
      	
	      font-weight:bold;
      	font-size:14px;
      	color:rgba(0,0,0,0.3);
      
    	}
    	
  	}
  
}

.close {
  
  cursor:pointer;

  &:after, &:before {
    
    content:"";
    height:20px;
    width:20px;
    border-top:1px solid #000;
    position:absolute;
    top:7px;
    right:-8px;
    @include rotate(-45deg);
  
  }
      
  &:before {
		
    right:6px;
    @include rotate(45deg);
  
  }
  
  &:hover {
 		
    @include opacity(0.3);
    
  }
  
}