Katting's Zodiac Popups [CSS]

/*---------------------------*/

#zodiac{
    margin-left:10px;
    margin-right:10px;
    margin-top:2px;
    margin-bottom:2px;
    padding:3px;
    text-align:center;
    border-radius:3px;
    border:1px solid #cccccc;
    background-color:#ffffff;
    font-family:'Roboto';
    font-size:10.5px;
    color:#cccccc;
        -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#zodiac:hover{
    background-color:#cccccc;
    color:#ffffff;
}

/*----------------------------*/

.popup_block{
    display:none; /*hides when not using*/
    position:fixed;
    top:50%;
    left:50%;
    z-index:99999999999999000000;
 }

#zodiacblock{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:20px;
    width:550px;
    background-color:#ffffff;
    border:1px solid #888888;
}

#ztitle{
    padding:5px;
    background-color:#363333;
    font-family:'Raleway';
    text-align:center;
    font-size:18px;
    color:#ffffff;
}

#pictures{
    margin-top:10px;
    width:320px;
    height:320px;
    padding:10px;
    overflow-y:auto;
    border:1px solid #cccccc;
    text-align:center;
}

#pictures img{
    height:100px;
    width:100px;
    margin:2px;
    border-radius:5px;
         -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#pictures img:hover{
    opacity:0.75;
}

#zinfo{
    position:fixed;
    bottom:20px;
    right:20px;
    width:175px;
    height:320px;
    padding:10px;
    overflow-y:auto;
    border:1px solid #cccccc;
    text-align:justify;
    font-family:'Roboto';
    font-size:11px;
    color:#888888;
}

#zinfo h2{
    text-align:center;
    margin-top:0px;
    margin-bottom:5px;
    padding:5px;
    background-color:#888888;
    font-family:'Roboto';
    font-size:13px;
    color:#ffffff;
}

#zinfo p{
    margin-top:2px;
    margin-bottom:2px;
    text-align:left;
}

#zinfo b{
    color:#cccccc;
}

#zinfo hr{
    border:none;
    height:1px;
    background-color:#888888;
}

#zfact{
    margin:2px;
    padding-left:2px;
    border-left:11px solid #cccccc;
}

#source{
    position:absolute;
    bottom:2px;
    right:2px;
    width:30px;
    height:30px;
    padding:5px;
    text-align:center;
    font-size:30px;
    font-family:'astroregular'; /*font needed for the zodiac signs, don't edit*/
    /*edit the following to your desired look*/
    background-color:#cccccc;
    border:3px solid #ffffff;
    border-radius:3px; /*rounded corners*/
        -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#source:hover{
    background-color:#363333;
}

#source a{
    color:#ffffff;
}

#fade { /*--background layer on pop-ups--*/
    display: none; /*--hidden by default--*/
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999900;
    /*--edit the following to how you want your fade to look--*/
    opacity: 1;
    background:#eeeeee;
}

img.btn_close {
display:none;
}

/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}

*html .popup_block{
position: absolute;
}

/*---------------------------*/