/*{margin:0;padding:0;}*/
#overlay{ /* we set all of the properties for are overlay */
    height:auto;
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:fixed;
    top:20%;
    left:6%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:9px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}
#open-overlay{ /* open the overlay */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

/*{margin:0;padding:0;}*/
#overlay1{ /* we set all of the properties for are overlay1 */
    height:auto;
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:fixed;
    top:30%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:1px;
}
/*{margin:0;padding:0;}*/
#overlay2{ /* we set all of the properties for are overlay1 */
    height:auto;
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:fixed;
    top:30%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:1px;
}
/*{margin:0;padding:0;}*/
#overlay3{ /* we set all of the properties for are overlay1 */
    height:auto;
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:fixed;
    top:30%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:1px;
} 
#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay1 then we find are mask */
#overlay1:target, #overlay1:target + #mask{
    display:block;
    opacity:1;
}
/* use :target to look for a link to the overlay1 then we find are mask */
#overlay2:target, #overlay2:target + #mask{
    display:block;
    opacity:1;
}
/* use :target to look for a link to the overlay1 then we find are mask */
#overlay3:target, #overlay3:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}
#open-overlay1{ /* open the overlay1 */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}
#open-overlay2{ /* open the overlay1 */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}
#open-overlay3{ /* open the overlay1 */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}