/* Container */
.modal{
    /* Overlay page content */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
	overflow: auto;

    /* Transition opacity on open */
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;

    /* Hide for now */
    opacity: 0;
    pointer-events: none;
}

/* Show modal */
.modal:target {
    opacity: 1;
    pointer-events: auto;
    /* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
}

/* Content */
.modal > div {
	background:#fff;
    width: 700px;
    position: relative;
    margin: 50px auto;

    /* Default minimise animation */
    -webkit-animation: minimise 500ms linear;
    -moz-animation: minimise 500ms linear;

    /* Prettify */
    padding: 10px;
	border:10px solid #37577D;
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
	
	/*CURVED EDGES*/
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
}

/* Override animation on modal open */
.modal:target > div {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
}

.modal h2 {
    font-size: 36px;
    padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale3d(0.1,0.1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    -webkit-transform: scale3d(1.08,1.08,1);
    box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    -webkit-transform: scale3d(0.95,0.95,1);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
    -webkit-transform: scale3d(1,1,1);
  }
  100% {
    -webkit-transform: scale3d(0.1,0.1,1);
  }
}

@-moz-keyframes bounce {
  0% {
    -moz-transform: scale3d(0.1,0.1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    -moz-transform: scale3d(1.08,1.08,1);
    box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    -moz-transform: scale3d(0.95,0.95,1);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    -moz-transform: scale3d(1,1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-moz-keyframes minimise {
  0% {
    -moz-transform: scale3d(1,1,1);
  }
  100% {
    -moz-transform: scale3d(0.1,0.1,1);
  }
}

/* Modal close link */
.modal a[href="#close"]{
    position: absolute;
    right: 0;
    top: 0;
    color: transparent;
}

/* Reset native styles */
.modal a[href="#close"]:focus {
    outline: none;
}

/* Create close button */
.modal a:after {
    content: 'X';
    display: block;

    /* Position */
    position:absolute;
    right:2px;
    top:2px;
    width:22px;
    height:22px;
    padding:0px;

    /* Style */
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    font-weight: bold;
    background: #fff;
    color:#f00;
    border:2px solid #37577D;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	
	/*CURVED EDGES*/
	-moz-border-radius:20px;
    -webkit-border-radius:20px;
	-khtml-border-radius:20px;
	border-radius:20px;
}

    .modal a[href="#close"]:focus:after,
    .modal a[href="#close"]:hover:after {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
    outline: 1px solid #000;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
	.modal > div{width:90%;box-sizing:border-box;}
}
fieldset{border-top:none;-moz-border-radius:0 0 6px 6px;-webkit-border-radius:0 0 6px 6px;-khtml-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;}
.modal .details{border:1px solid #E7EBEA;}
.modal .details .top{background:#F8FAF9;padding:10px;border-bottom:3px solid #f00;font-weight:bold;}
.modal .details .top .title{color:#648FFF;font-size:20px;font-stretch:ultra-condensed;text-align:center;}
.modal .details .mid{padding:10px;}
.modal .details .mid .img{margin-top:20px;}
.modal .details .mid li{list-style:url(../img/images/arrow.png);}
.success_message{background:#D2FFD1 url(../img/images/success_icon.png) 10px 10px no-repeat;text-align:left;color:#25A678;font-size:12px;padding:10px 10px 10px 35px;margin-bottom:10px;border:1px solid #76D874;}
.error_message{text-align:center;background:#fc9;color:#900;font-size:12px;font-weight:normal;padding:10px;margin-bottom:10px;}