/* modal page styles */
#modalPage
{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px; left: 0px;
}
.modalBackground
{
    filter: Alpha(Opacity=90); -moz-opacity:0.90; opacity: 0.90;
    width: 100%; height: 100%; background-color: #EFECEE;
    position: absolute;
    z-index: 500;
    top: 0px; left: 0px;
}
.modalContainer
{
    position: absolute;
    left: 30%;
    top:25px;
    z-index: 750;
    width: 35%;          
}
.modal
{
    background-color: #ccffcc;        
    left: 0px;
    z-index: 1000;
    padding: 0px;    
    position: absolute;    
    width:100%;
    border:solid 2px darkgray;
    border-radius:10px;
}
.modalTop
{
    width: 100%;        
    background:linear-gradient(#ccffcc,#99ff99);     
    color: black;
    text-align: right;    
    border-top-left-radius:10px;
    border-top-right-radius: 10px;
}
.modalTop a, .modalTop a:visited
{
    color: black;
}
.modalBody {
    padding: 0px;
    width: 100%;
    overflow: hidden;
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


/* --------- iphone portrait -----------  */
/*@media screen and (max-width: 320px) {*/
/*@media screen and (max-width: 540px) {*/
@media screen and (max-width: 540px) {
    .modalContainer {
        left: 0;
        top: 0;
        width: 100%;
    }
}

/* --------- ipad portrait -------------  */
/*@media screen and (min-width: 481px) and (max-width: 1366px) {*/
@media screen and (min-width: 481px) and (max-width: 1366px) {
    .modalContainer {
        left: 5%;
        top: 0;
        width: 90%;
    }
}