/* ******************  Picture Gallery CSS ********************************************* */
/* This section for the Applications pictures */

/* The containing box for the gallery. */
#apps {
    position:relative; 
    width:500px; 
    height:430px; 
    margin:20px auto 0 auto; 
    padding: 5px 5px 5px 5px;
     /* border:1px solid #aaa; */
   }

/* Removing the list bullets and indentation */
#apps ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }

/* Remove the images and text from sight */
#apps a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:11em;
    left:0;
    overflow:hidden; 
    background:#fff;
    }

#apps a.gallery:hover span {
    position:absolute; 
    width:550px; 
    height:300px; 
    top:17em;
    color:#000; 
    background:#fff;
    }

#apps a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}

#apps a.gallery:hover span {visibility:visible; z-index:100;}

#apps a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}

#apps a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}

#apps a.gallery:active span, #apps a.gallery:focus span {
    position: absolute;
    width:550px; 
    height:300px; 
    top:17em;
    visibility:visible; z-index:10;}

 #apps a.gallery:active span img, a.gallery:focus span img {
    border:1px solid #000;
    position:relative;
    margin:10px; z-index:10;}

    

/* *************************************************************** */

/* ******************  Picture Gallery CSS ********************************************* */
/* This section for the Package and Mounting pictures */


/* The containing box for the gallery. */
#package {
    position:relative; 
    width:450px; 
    height:620px;
    left:10px;
    margin:0px auto 0 auto; 
    padding: 5px 5px 5px 5px;
     /* border:1px solid #aaa; */
   }

/* Removing the list bullets and indentation */
#package ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }

/* Remove the images and text from sight */
#package a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:15px; 
    overflow:hidden; 
    background:#fff;
    left:-50px;
    }

#package a.gallery:hover span {
    position:absolute; 
    width:540px; 
    height:500px; 
    top:8em; 
    left:-50px;
    color:#000; 
    background:#fff;
    }

#package a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}

#package a.gallery:hover span {visibility:visible; z-index:100;}

#package a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative;  z-index:100;}

#package a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}

#package a.gallery:active span, #package a.gallery:focus span {
    position: absolute;
    width:550px; 
    height:500px; 
    left:-50px;
    top:8em; 
    visibility:visible; z-index:10;}

 #package a.gallery:active span img, a.gallery:focus span img {
   border:1px solid #000;
   position:relative;
   margin:10px;
   z-index:10;
 }

    

/* *************************************************************** */