/* Styling applied to classes only */

/*  Pop-up content shifted off-screen when not in view.
    Still readable by screen-reader software.
    When targeted it fills the browser window.
*/
    .pop-up {position:absolute; top:0; left:-500em;}
    .pop-up:target {position:static; left:0;}


/* The pop-up itself */
    .popBox {
      background:#ffffff;

    /* alternatively fixed width / height and negative margins from 50% */
      position:absolute; left:20%; right:20%; top:10%; bottom:10%;

      z-index:6000;
      /* padding:1%; removed 17/07/2012 */
      border:1px solid #3a3a3a;

    /* CSS3 where available: rounded corners, drop-shadow, and fade in. */
      -moz-border-radius:5px;
      border-radius:5px;
      -webkit-box-shadow:2px 2px 4px #3a3a3a;
      -moz-box-shadow:2px 2px 4px #3a3a3a;
      box-shadow:2px 2px 4px #3a3a3a;
      opacity:0;
      -webkit-transition: opacity 0.5s ease-in-out;
      -moz-transition: opacity 0.5s ease-in-out;
      -o-transition: opacity 0.5s ease-in-out;
      -ms-transition: opacity 0.5s ease-in-out;
      transition: opacity 0.5s ease-in-out;
    }

    :target .popBox {position:fixed; opacity:1;}

/* Light box properties */
    .lightbox {display:none; text-indent:-200em; background:#000; opacity:0.8; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0; z-index:5000;}
    :target .lightbox {display:block;}
    .lightbox:hover {background:#000;}

/* The pop-ups close link, moved via CSS to the top right of the pop-up */
    .tutup:link,
    .tutup:visited {
      position:absolute; top:-0.75em; right:-0.75em; display:block; width:2em; height:2em; z-index:1000;
      padding:8px 0;
      font:bold large/1 arial, sans-serif; text-align:center; text-decoration:none; vertical-align:middle;
      background:#E25050; border:0px solid #E25050; color:#fff;
      -moz-border-radius: 2em;
      -webkit-border-radius: 2em;
      border-radius: 2em;
      -moz-box-shadow: 0 0 1px 1px #3a3a3a;
      -webkit-box-shadow: 0 0 1px 1px #3a3a3a;
      box-shadow: 0 0 1px 1px #3a3a3a;
    }
    .tutup:before {content:"X";}
    .tutup:hover,
    .tutup:active,
    .tutup:focus {box-shadow:0 0 1px 1px #3a3a3a; background:#E25050; color: #fff;}
    .tutup span {text-indent:-200em; display:block;}

/* The pop-up content div will scroll if it has too much content */
    /* .popScroll {max-height:99%; overflow:hidden; overflow-y:scroll;} removed 17/07/2012 */
    .popScroll {position:absolute; top:10%; left:5%; right:5%; bottom:10%; overflow-y:auto; *overflow-y:scroll; padding-right:0.5em}