/* wh-mobile.css - base CSS for smart phones (ipads/tablets tend to use desktop aspect ratios)  */

/* Browser reset code - Yahoo */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}


body { margin: 0px; padding: 0px; background-color: #000000; font-size: 62.5%; overflow-x: hidden; overflow-y: scroll; }
   
/* Global settings  */
h1 { color: #990000; font: bold 32px "Comic Sans MS", sans-serif; }
h2 { color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif; }
h3 { color: #009999; font: bold 18px "Comic Sans MS", sans-serif; }
h5 { color: #000066; font: 12px "Comic Sans MS", sans-serif; }


/* **********  Image classes  **********  */
img {
    border: none;
}

img.centeredImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

ximg.r80w500 {
    width: 80%;
    max-width: 500px;
    height: auto;
}

img.r80w500 {
    width: 80%;
    max-width: 500px;
    height: auto;
}

img.r60w400 {
    width: 60%; /* 40%; */
    max-width: 400px;
    height: auto;
}

img.r40w300 {
    width: 40%;
    max-width: 300px;
    height: auto;
}
        
ximg.r40w300 {
    width: 40%;
    max-width: 300px;
    height: auto;
}
        
img.r30w200 {
    width: 30%;
    max-width: 200px;
    height: auto;
}
        
img.r20w100 {
    width: 20%;
    max-width: 100px;
    height: auto;
}
        
/* img.te   { display: block; top:0px; margin-top:0px; } */ /* top edge of subcontent boxes */
/* img.be   { display: block; bottom:-5px; top:auto; margin-top: 0; } */ /* bottom edge of subcontent boxes */
/* img.te240   { display: block; top:0px; margin-top:0px; } */ /* top edge of thumb boxes */
/* img.be240   { display: block; bottom:-5px; top:auto; margin-top: 0; } */ /* bottom edge of thumb boxes */

img.iconsnoborder {
    width: 32px;
    height: 32px;
}
    
img.credits {
    margin-left: 50px; }

.boldp {
    font-weight: bold;  
}

.spacer80 {
    height: 80px;
}

.sp {
    position: relative;
    left: 20%;
    width: 100%;
}


/* **********  Grid Layout  **********  */

.item1 { grid-area: menu; position: sticky; top: 0; min-height: 160px; background: black; z-index: 100; border: 0px solid red; overflow: hidden; width: calc(100% - 50px);}
.item2 { grid-area: header; min-height: 8000px; border: 0px solid gold; }
.item3 { grid-area: main; position: relative; top: -10px; border: 0px solid silver; width: 100%;}
.item4 { grid-area: footer; color: red; border: 0px solid blue; }

.grid-container {
    display: grid;
    grid-template-areas:
    'menu'
    'header'
    'main'
    'footer';
    grid-gap: 5px;
    background-color: black; /* #2196F3; */
    padding: 0px;
    z-index: 100;
}

.grid-container > div {
  background-color: black;  /* rgba(255, 255, 255, 0.8); */
}

/* ****************************   Menu Area  ******************************* */

/* Position the Unite logo  */

.lbk {
    position: absolute;
    background: #000000;
    border: 2px solid #5E5E5E;
    top: 13px;
    left: 5px;
    width: 51px;
    height: 64px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px; 
    z-index: 105;   
}

.unite {
    position: absolute; top: 15px; left: 8px; width: 50px; height: 63px;
    font: 12px Verdana, sans-serif; text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden; 
    z-index: 105;   
}

/* **********  Position side title  ********* */

div#sidetitle { position: absolute; top: 12px; left: 65px; width: 17px; height: 512px; background-image: url("../images/indexv.png"); text-align: center; }

/* **********  Links  ********* */

div#linkback {
    position: absolute;
    top: 20px;
    left: 105px;
    width: 80%;
    height: auto;
    background: #2D2D2D;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;              
}

div#links { position: relative; top: 5px; left: 88px; width: 90%; height: 50px; }
div#links a {
    display: block; float: left;
    padding: 8px 8px 8px 8px; margin: 0px 8px 8px 0px;
    border: solid #456789; border-width: 1px; border-radius: 10px; 
    text-decoration: none; color: #1E90FF; text-align: center; background:#000000;
    font: 1.3em Verdana, sans-serif; line-height: 30px; width: 100px; height: 30px;
}
div#links a span { display: none; }
div#links a:hover {
    color: #FF0000; text-decoration: none;
    border-color: #FF0000; border-width: 1px;
}
div#links a:hover span {
    display: block; text-decoration: none;
    position: absolute; top: 105px; left: 0px; width: auto; height: 20px;
    padding: 5px; margin: 5px; border: 1px solid #FFD700; 
    color: #DEB887; background: black;
    font: 0.9em Verdana, sans-serif; text-align: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* ****************************   Header Area  ******************************* */

/* **********  Mail Bar  *********** */
/*   mailrule.gif is a double width image so overflow hidden is used  */
div#massageHolder {
    position: fixed;
    top: 85px;       
    left: 5px;
    height: 17px;
    width: 57px;
    background: black;
    text-align: center;
    z-index: 100;
}

div#massage {
    position: relative; display: inline-block; top: 0px; height: 17px; width: 57px; overflow: hidden; background: black; background-color: black; z-index: 100;
}
div#massage a {
    background: url(../images/mailrule.gif) 0px 0px no-repeat; text-decoration: none; margin-left: 0px; display: inline-block; width: 90px; height: 17px;
}
div#massage a:hover {
    background: url(../images/mailrule.gif) -488px 0px no-repeat;
}

.headershell {
    position: relative;
    top: 0px;
    left: 0px;
    background: black;
    height: auto;
/*    width: -webkit-calc(100% - 155px);
    width: -moz-calc(100% - 155px);
    width: calc(100% - 155px); */
    width: 100%;  
    z-index: 99;
    border: 0px solid blue;
}

#ptitle {
    position: relative;
    top: 5px;
    font-size: 1.8em;
}

.rt  {
    position: relative;
 /*   width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    width: calc(100% - 60px); */
    width: 100%;
    height: 70px;
    background: #8B0000;
    text-align: center;
    border-top: 3px solid #006400;
    border-right: 3px solid #006400;
    border-left: 3px solid #006400;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 9px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.rt h1 {
    display: inline-block;
    color: #ffd700;
    position: relative;
    top: 10px;
}

/* hover button - sitemap   */
div#sitemap {position: absolute; top: 20px; left: 8px; width: 50px; height: 15px;
             font: 12px Verdana, sans-serif; 
             }
div#sitemap a {display: block;
               padding: 5px 5px; margin: 0px 5px 10px 5px; /*0 0 2px 2px; */
               border: solid #A52A2A; border-width: 1px; 
               text-decoration: none; color: #B8860B; background: #590000; text-align: center;
               -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
               border-radius: 5px;
}
div#sitemap a:link {color: #B8860B;}
div#sitemap a:hover {color: #B8860B; text-decoration: none;
                     border-color: red; border-width: 1px; cursor: pointer;}
div#sitemap a:visited {color: #B8860B;}
div#sitemap a:hover.smlk {color: #FF6E1F;}

/* *********  hover button - guestbook  ********** */
div#gb {position: absolute; top: 30px; left: 65px; width: 100px; height: 15px;
             font: 12px Verdana, sans-serif; z-index: 99;}
div#gb a {display: block;
               padding: 5px 5px 0px 5px; margin: 5px 5px 10px 5px;
               border: 1px solid #A52A2A; width: 70px; height: 20px; 
               text-decoration: none; color: #B8860B; background: #590000; text-align: center;
               -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
               border-radius: 5px;}
div#gb a span {display: none;}
div#gb a:link :visited {color: #B8860B;}
div#gb a:hover {color: #B8860B; text-decoration: none;
                     border-color: red; border-width: 1px; cursor: pointer;}
div#gb a:hover span {display: block; background: black; text-decoration: none;
                  position: absolute; top: 40px; left: 0px; width: 230px; height: 30px;
                  padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                  font: 9px Verdana, sans-serif; color: #DEB887; text-align: left; z-index: 100;}
div#gb a:hover.gblk {color: #FF6E1F;}

/* ****************************   Main Content Area  ******************************* */

div#outershell {
    position: relative;
    top: 0px;
    width: 98%;
    min-width: 200px;
    color: #0000FF;
}

/*   Container for main page content */
div#content {
    position: relative; margin-top: -10px; left: 0px; min-width: 200px;
    width: 100%; /* 98%; */
    padding: 0px 0px 30px 0px;
    border: 3px solid #006400; background-color: #000000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 9px;
    border-radius: 10px;
}
div#content p {margin: 0px; padding: 0px 10px 0px 10px; color: #000066; font: 1.3em "Comic Sans MS", Helvetica, Georgia, Verdana, sans-serif;}
/* div#content p {margin: 0px; padding: 0px 10px 0px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;} */
/* div#content h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: 546px; height: 60px; vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;} BLAT */
div#content h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: 100%; height: 60px; vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
div#content h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
div#content h3 {margin-left: 10px; color: #1E90FF; font: bold 18px "Comic Sans MS", sans-serif;}
div#content h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
div#content h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
div#content h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}

/* special class for widegames - no links */
.wgb { display: none; }  /* turn off links on narrow view  */
.wgo {margin-left: -130px; width: 868px; }
div#content.wgc {width: 678px; }
div#content.wgc h1 {width: 676px; }

.co {position: relative; margin-top: 0px; left: 0px; min-width: 200px; width: 98%;
             padding: 0px 0px 30px 0px;
             border: 3px solid #006400; background-color: #000000;}

.subtleline { margin-left: 15px; width: 95%; opacity: 0.05; }

/* Bloghead for hippoblog pages  */

.sct { position: relative;
        background: #C9C7C7; /* #8B0000; */
        width: 95%;
        max-width: 300px;
        margin: 5px 0px 0px 5px;
        color: #1E90FF; font: 1.3em "Comic Sans MS", sans-serif; padding: 5px; 
        text-align: left;   
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;                 
}

.anum { position: relative;
        background: #C9C7C7;
        width: 20px;
        height: 20px;
        top: -58px;
        left: 470px;
        color: #1E90FF; font: 1.2em "Comic Sans MS", sans-serif; padding: 5px; 
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;              
}
        
.bh { position: relative;
        height: 3.5em;
        width: 520px;
        background: #FFFFFF;
        margin-left: 15px;
/*      color: #808080; font: 1.3em Verdana, sans-serif; padding: 5px; */
        display: block; margin-left: auto; margin-right: auto; text-align: center;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;                 
}

.bh table { border: none; position: relative; width: 98%; background: #FFFFFF; 
        margin-left: auto; margin-right: auto; text-align: center; top: 4px;            
        }

.bh td { border: none;  color: #FFD700; font: 1.3em "Comic Sans MS", sans-serif; padding: 5px; }
* html body .bh td { line-height: 1.2em; }

.bh td.bh1 { width: 250px; background: #8B0000;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;              
}
.bh td.bh2 { width: 40px;}
.bh td.bh3 { width: 130px; background: #8B0000; text-align: center;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;              
}
.bh td.bh4 { width: 30px;}
.bh td.bh5 { width: 25px; background: #8B0000; text-align: center;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;              
}

/* Step 10 - Clearing the float */
#navlist {position: absolute;
    display: block;
/*  width:922px; */
    width: 520px;
    margin-left: 15px;
    height: 30px;
    margin-top: 0px;
    padding-left: 0px;
    padding-top: 3px;
    background-image: none;
    background: #FFFFFF;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;                 
    
    z-index: 99;
}

/* Step 3 - get rid of the bullets and margin */
#navlist ul {margin:0; padding:0; list-style-type:none;}

/* Step 4 and 7 - make the list horizontal and giving a 1px gap */
#navlist li {float:left; margin-left: 5px; background: #FFFFFF; padding: 0px; line-height: 2.0em;}
* html body div#navlist li { line-height: 1.8em; }

/* Step 5 - Adding the initial images */
#navlist li.list1 {background: #FFFFFF; width: 25em;    }
#navlist li.list2 {background: #FFFFFF; width: 4em; }
#navlist li.list3 {background: #FFFFFF; width: 13em;    }
#navlist li.list4 {background: #FFFFFF; width: 3em; }
#navlist li.list5 {background: #FFFFFF; width: 3.3em; } 
/* #navlist li.list6 {background:transparent url(../images/latecss50.gif);} */

/* Step 6 - General link styling */

#navlist a {display:block; height:22px; padding-top: 5px; font: 1.3em "Comic Sans MS", Verdana, sans-serif; color:#FFFF00; text-decoration: none; overflow:hidden;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;              
}

/* Step 8 - Adding the background images to the link tags */
#navlist a#item1 {background: #8B0000; width: 250px; padding-left: 5px; }
#navlist a#item2 {background: #FFFFFF; }
#navlist a#item3 {background: #8B0000; width: 130px; text-align: center; }
#navlist a#item4 {background: #FFFFFF; }
#navlist a#item5 {background: #8B0000; width: 35px; text-align: center; }
/* #navlist a#item6 {background:transparent url(../images/earlycss50.gif) -50px -67px no-repeat;} */

/* Step 9 - Adding the :hover style */

#navlist a#item1:hover {background-position:0 0; z-index:50;}
#navlist a#item2:hover {background-position:0 0; z-index:50;}
#navlist a#item3:hover {background-position:0 0; z-index:50;}
#navlist a#item4:hover {background-position:0 0; z-index:50;}
#navlist a#item5:hover {background-position:0 0; z-index:50;}
#navlist a#item6:hover {background-position:0 0; z-index:50;}

.toggleDiv {
    padding:20px;
    margin-top:10px;
}

.slideToggle {
    padding: 0px;
    margin-top: 0px;
}

.show_hide {
 /*   display:none;  */
    color: #FF2200;
}

div#ugly { position: relative; top: 30px; left: 15px; width: 514px; height: 30px; padding: 3px; background: #FFFFFF;
        font: 1.3em "Comic Sans MS", Verdana, sans-serif; color: #FFD700;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;                 
}

.ux { float: left; padding: 9px; background: #8B0000; line-height: 0.8em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.ux1 { width: 47%;  max-width: 280px; background: #8B0000;  text-align: left;}  /*  title  */
.ux2 { width: 10px; padding: 10px 2px 10px 2px; background: #F4F4F4; }
.ux3 { width: 20%; max-width: 100px; background: #8B0000; text-align: center; }  /*  timestamp  */
.ux4 { width: 10px; padding: 10px 2px 10px 2px; background: #F4F4F4; }
.ux5 { position: relative; display: block; width: 5%; max-width: 30px; padding-left: 5px; background: #8B0000; text-align: center; }  /*  item nunber  */



.cc1  h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}



/*  ************************************   Sub Content Boxes   *********************************** */

div#subcontentHolder {
    text-align: center;
}

/* Subcontent class 1  - standard white boxes */
/* .sc1 {position: relative; top: 0px; margin-left: 15px; width: 520px; */
.sc1 {
    position: relative; top: 0px; margin-left: 10px; min-width: 150px;
    width: 95%;
    color: #008080; font: 1.3em Verdana, sans-serif; padding: 0px; 
    border: none; background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.sc1 p {margin-left: 5px; padding: 10px 10px 10px 10px; color: #000066; font: 1.2em "Comic Sans MS", Helvetica, Georgia, Verdana, sans-serif;}
.sc1 h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc1 h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc1 h3 {margin-left: 10px; color: #0274e3; font: bold 18px "Comic Sans MS", sans-serif;}
.sc1 h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc1 h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc1 h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc1 a:link {color: blue;}
.sc1 a:visited {color: #8B0000;}
.sc1 a:link:hover {color: red;}
.sc1 a:visited:hover {color: red;}
.sc1 ul {margin-left: 3em; padding: 0px 10px 0px 10px; color: #000066; font: 1.2em "Comic Sans MS", Georgia, Verdana, sans-serif;}


/* tweak for wide games */
.wgs {width: 650px;}

/* Subcontent class 2 - used for links tables  */
/* .sc2 {position: relative; top: 0px; margin-left: 15px; width: 520px; */
.sc2 {position: relative; top: 0px; margin-left: 15px; min-width: 200px; width: 95%; 
                 color: #008080; font: 13px Verdana, sans-serif; padding: 0px; 
                 border: none; background-color: white;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;}
.sc2 p {margin-left: 5px; padding: 0px 10px 0px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc2 h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc2 h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc2 h3 {margin-left: 10px; color: #1E90FF; font: bold 18px "Comic Sans MS", sans-serif;}
.sc2 h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc2 h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc2 h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc2 a:link {color: blue;}
.sc2 a:visited {color: #8B0000;}
.sc2 a:link:hover {color: red;}
.sc2 a:visited:hover {color: red;}
.sc2 table {border-collapse: collapse; border: solid 2px; border-color: #6699FF;}
.sc2 table {font-size: 16px; margin-left: 20px; width: 480px;} /* 320px;}  */
.sc2 table td {font-size: 0.8em}  
.sc2 table td {color: #000066; border: solid 1px; border-color: #6699FF; padding: 5px;}

/* CSS based winpop for snaps- not used as yet */
.sc3 {background-color: #000000; position: relative; }
.sc3 a .large {display: block; height: 1px; left: 201px; position: absolute; top: 1px; width: 1px; }
.sc3 a img {display: block; margin-left: auto; margin-right: auto; text-align: center;}
.sc3 a.p1 {background: black; border: 1px solid #000000; display: block; height: 0px; text-decoration: none; top: 0; }
.sc3 a.p1:hover {background-color: #000000; color: #000000; text-decoration: none; }
.sc3 a.p1:hover .large {border: 2px solid #006400; display: block; height: 269px; left: -40px; position: absolute; top: -300px; width: 400px; }

/* Class for winpop links from thumbs  */
.sc4 {padding:0; margin: 0 0 0 0; background: black;}
.sc4 a img {display: block; margin-left: auto; margin-right: auto; text-align: center;}

/* Subcontent class 5 - used for credits  */
/* .sc5 {position: relative; top: 0px; margin-left: 15px; width: 520px; */
.sc5 {position: relative; top: 0px; margin-left: 15px; min-width: 200px;
                 color: #008080; font: 13px Verdana, sans-serif; padding: 0px; 
                 border: none; background-color: white;
                 -webkit-border-radius: 10px;
                 -moz-border-radius: 10px;
                 border-radius: 10px;
                 }
.sc5 p {margin-left: 5px; padding: 0px 10px 0px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc5 h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc5 h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc5 h3 {margin-left: 10px; color: #1E90FF; font: bold 18px "Comic Sans MS", sans-serif;}
.sc5 h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc5 h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc5 h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc5 a:link {color: blue;}
.sc5 a:visited {color: #8B0000;}
.sc5 a:link:hover {color: red;}
.sc5 a:visited:hover {color: red;}
.sc5 table {border-collapse: collapse; border: solid 2px; border-color: #6699FF; font-size: 1.0em; margin-left: 10px;}
.sc5 table td {font-size: 0.8em; color: #000066; border: solid 1px; border-color: #6699FF; padding: 5px;}

/* Subcontent class 6  - sitemap box */
.sc6 {position: relative; top: 0px; margin-left: 5px; min-width: 200px; width: 95%; height: 505px;
                 color: #008080; font: 1.3em Verdana, sans-serif; padding: 0px; 
                 border: none; display: block;
                 -webkit-border-radius: 10px;
                 -moz-border-radius: 10px;
                 border-radius: 10px;} 
.sc6 p {margin-left: 5px; padding: 10px 10px 10px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc6 h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc6 h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc6 h3 {margin-left: 10px; color: #1E90FF; font: bold 18px "Comic Sans MS", sans-serif;}
.sc6 h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc6 h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc6 h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.xsc6 a:link {color: blue;}
.xsc6 a:visited {color: #8B0000;}
.sc6 a:link:hover {color: red;}
.xsc6 a:visited:hover {color: red;}
.sc6 ul {margin-left: 3em; padding: 0px 10px 0px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}
/* handle hdpi 
.hdpi {
  display: block;
  background: url('../images/bsm.jpg') gray;
  background-size: 597px 510px;
}
@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .hdpi {
    display: block;
      background: url('../images/bsm@2x.jpg') gray;
      background-size: 597px 510px;
  }
}
*/
/* Subcontent class 6  - ????? sitemap box */
.sc7 {position: relative; top: 0px; margin-left: 15px; width: 520px; height: auto;
                 color: #008080; font: 1.3em Verdana, sans-serif; padding: 0px; 
                 border: none; background: #FFFFFF;
                 -webkit-border-radius: 10px;
                 -moz-border-radius: 10px;
                 border-radius: 10px;} 

.subbox1 {
         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;}

.nob table td {border: none;}

/* Subcontent class 8  - hippo log content boxes */
/* .sc8 {position: relative; top: 0px; margin-left: 15px; width: 520px; */
.sc8 {position: relative; top: 0px; margin-left: 15px; min-width: 200px; width: 93%;
                 color: #008080; font: 1.3em Verdana, sans-serif; padding: 0px;  
                 color: #008080; font: 1.3em Verdana, sans-serif; padding: 0px; 
                 border: none; background-color: white;
                 -webkit-border-radius: 10px;
                 -moz-border-radius: 10px;
                 border-radius: 10px;}
.sc8 p {margin-left: 5px; padding: 10px 10px 10px 10px; color: #000066; font: 1.0em "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc8 h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc8 h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc8 h3 {margin-left: 10px; color: #1E90FF; font: bold 18px "Comic Sans MS", sans-serif;}
.sc8 h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc8 h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc8 h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc8 a:link {color: blue;}
.sc8 a:visited {color: #8B0000;}
.sc8 a:link:hover {color: red;}
.sc8 a:visited:hover {color: red;}
.sc8 ul {margin-left: 3em; padding: 0px 10px 0px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc8 table {border: none;}

/* Subcontent class 9 - hippo Techo Blog content boxes   - modelled on sc1 */
/* .sc9 {position: relative; top: 0px; margin-left: 15px; width: 520px; */
.sc9 {position: relative; top: 0px; margin-left: 15px; min-width: 200px; width: 93%;
                 color: #008080; font: 1.3em Verdana, sans-serif; padding: 0px; 
                 border: none; background-color: #F4F4F4;
                 -webkit-border-radius: 10px;
                 -moz-border-radius: 10px;
                 border-radius: 10px;
                 
}
.sc9 p {margin-left: 5px; padding: 10px 10px 10px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc9 h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc9 h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc9 h3 {margin-left: 10px; color: #1E90FF; font: bold 18px "Comic Sans MS", sans-serif;}
.sc9 h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc9 h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc9 h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc9 a:link {color: blue;}
.sc9 a:visited {color: #8B0000;}
.sc9 a:link:hover {color: red;}
.sc9 a:visited:hover {color: red;}
.sc9 ul {margin-left: 3em; padding: 0px 10px 0px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}

/* Subcontent class 12 - used for software links tables  */
/* .sc12 {position: relative; top: 0px; margin-left: 15px; width: 520px; */
.sc12 {position: relative; top: 0px; margin-left: 15px; min-width: 200px; width: 95%;
                 color: #008080; font: 13px Verdana, sans-serif; padding: 0px; 
                 border: none; background-color: white;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;}
.sc12 p {margin-left: 5px; padding: 0px 10px 0px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc12 h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc12 h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc12 h3 {margin-left: 10px; color: #1E90FF; font: bold 18px "Comic Sans MS", sans-serif;}
.sc12 h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc12 h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc12 h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc12 a:link {color: blue;}
.sc12 a:visited {color: #8B0000;}
.sc12 a:link:hover {color: red;}
.sc12 a:visited:hover {color: red;}
.sc12 table {border-collapse: collapse; border: solid 2px; border-color: #6699FF; font-size: 16px; margin-left: 20px; width: 95%;}
.sc12 table td {font-size: 0.8em color: #000066; border: solid 1px; border-color: #6699FF; padding: 5px;}

/* Class for xpan frame graphics  */
.sc14 {padding:0; margin: 0 0 0 0; background: black;}
.sc14 a img {display: block; margin-left: auto; margin-right: auto; text-align: center;}

/* Subcontent class 60  - horizontal sitemap box */
.sc60 {position: relative; top: 0px; width: 320px; height: 795px;
                 color: #008080; font: 1.3em Verdana, sans-serif; padding: 0px; 
                 border: none; display: inline-block; background: url('../images/bsm.jpg') gray;
                 -webkit-border-radius: 10px;
                 -moz-border-radius: 10px;
                 border-radius: 10px;} 
.sc60 p {margin-left: 5px; padding: 10px 10px 10px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc60 h1 {text-align: center; margin: 0px 0px 0px 0px; padding: 10px 0px 0px; width: auto; height: 60px;vertical-align: middle; white-space: nowrap;
                background: #8B0000; color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc60 h2 {color: #FFD700; font: bold 25px "Comic Sans MS", sans-serif;}
.sc60 h3 {margin-left: 10px; color: #1E90FF; font: bold 18px "Comic Sans MS", sans-serif;}
.sc60 h4 {margin-left: 0px; color: #008080; font: bold 16px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc60 h5 {margin-left: 0px; color: #000066; font: 14px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.sc60 h6 {margin-left: 0px; color: #00008B; font: bold 10px "Comic Sans MS", Georgia, Verdana, sans-serif;}
.xsc6 a:link {color: blue;}
.xsc6 a:visited {color: #8B0000;}
.sc60 a:link:hover {color: red;}
.xsc6 a:visited:hover {color: red;}
.xsc60 ul {margin-left: 3em; padding: 0px 10px 0px 10px; color: #000066; font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;}

/* sc indents  */

.sci li {
}

ul.scb {
    list-style-type: circle;
}

div#subcontentex {
    opacity: 0.01;
}

/* Statbar for hippolog pages */
.hlsb {
    width: 95%;
    margin-left: 10px;
    height: 45px;
    background-color: #8B0000;
    border: 2px solid #006400;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
}

.tsb {
    width: 95%;
    padding: 0px;
    height: 30px;
    margin-top: 8px;
    margin-left: 10px;
    margin-right: 10px;
    border: none;
    border-radius: 7px;
}

.sbf {font: 0.8em Arial; text-align: center;}

/* hover button - hippolog sign   */
div#hlsign {position: absolute; top: 30px; left: 65px; width: 100px; height: 15px;
             font: 12px Verdana, sans-serif;}
div#hlsign a {display: block;
               padding: 5px 5px 0px 5px; margin: 5px 5px 10px 5px;
               border: 1px solid #A52A2A; width: 70px; height: 20px; 
               text-decoration: none; color: #B8860B; background: #590000; text-align: center;
               -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
               border-radius: 5px;}
div#hlsign a span {display: none;}
div#hlsign a:link :visited {color: #B8860B;}
div#hlsign a:hover {color: #B8860B; text-decoration: none;
                     border-color: red; border-width: 1px; cursor: pointer;}
div#hlsign a:hover span {display: block; background: black; text-decoration: none;
                  position: absolute; top: 40px; left: 0px; width: 230px; height: 40px;
                  padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px;
                  font: 9px Verdana, sans-serif; color: #DEB887; text-align: left; z-index: 100;}
div#hlsign a:hover.gblk {color: #FF6E1F;}

/* Classes for layout of thumb pages */
/*.outer {position: relative; height: 90px; left: -10px; min-height: 90px; max-height: 90px; width: 90%; max-width: 300px; border: 0px solid green; margin-left: 30px;
       }
.box1 {position: absolute; height: auto; width: 40px; left: 0px; border: none;
       color: #FF0000; font: 24px "Comic Sans MS", Verdana, sans-serif; text-align: center;
       margin-top: 25px;}
.box2 {position: absolute; height: auto; width: 120px; left: 43px; border: none;
       margin-top: 10px;}
.box3 {position: absolute; height: 90px; width: 280px; margin-left: 166px; border: none;
       background-color: #FFFFFF;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;}
*/
.outer {position: relative; display: inline-block; height: auto; left: 20px; top: -80px; min-height: 90px; width: 90%; max-width: 700px; border: 0px solid green;
       }
.box1 {position: relative; height: auto; width: 10px; left: 0px; border: none;
       color: #FF0000; font: 24px "Comic Sans MS", Verdana, sans-serif; text-align: center;
       margin-top: 25px; float: left;
   }
.box2 {position: relative; max-height: 120px; width: 120px; left: 43px; border: 0px solid pink;
       margin: 10px 30px 10px 0px; float: left;
   }
.box3 {position: relative; height: auto; min-height: 90px; width: 280px; max-width: 280px; left: 10px; margin-right: 20px; border: 0px solid red;
       background-color: #FFFFFF;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px; float: left;
    }

/* xpan frames  */       
.xpanouter {position: relative; display: inline-block; height: auto; left: 20px; top: 0px; min-height: 90px; width: 90%; max-width: 700px; border: 0px solid green;
       }
.box4 {position: absolute; height: auto; min-width: 100px; width: 80%; left: 43px;  border: 0px solid red;
       margin-top: 20px;}
.box6 {position: relative; display: block; text-align: center; height: 100px; width: 260px; margin-left: 5%; padding-top: 20px;  border: 1px solid blue;
       background-color: #FFFFFF;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        float: right;
}

.box6 img {
    width: 240px;
    height: 81px;
}

/* Thumb class 2 - used for horizontal thumbs*/
.thc2 { position: relative;
        border: none;
        width: 520px;
        background-color: black;
        top: 0px;
        margin-left: 30px;
        margin-bottom: 0px;
        color: #008080;
        font: 13px Verdana, sans-serif;
        padding: 0px;
        }
.thc2 table { position: relative;
              border-collapse: collapse;
              border-spacing: 0px;
              width: 420px;
              height: 70px;
              } 
.thc2 table td { padding: 0px 0px 0px 0px;
                 color: #000066;
                 font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;
                 } 
.thc2 table td img { vertical-align: bottom;
                     }
.thc2 table p { } 
.thc2 a { position: relative;
          background-color: black;
          border: none;
          width: 100px;
          }

/* Thumb class 2 - used for vertical thumbs*/
.tvc2 { position: relative;
        border: none;
        width: 520px;
        background-color: black;
        top: 0px;
        margin-left: 30px;
        margin-bottom: 0px;
        color: #008080;
        font: 13px Verdana, sans-serif;
        padding: 0px;
        }
.tvc2 table { position: relative;
              border-collapse: collapse;
              border-spacing: 0px;
              width: 420px;
              height: 70px;
              } 
.tvc2 table td { padding: 0px 0px 0px 0px;
                 color: #000066;
                 font: 13px "Comic Sans MS", Georgia, Verdana, sans-serif;
                 } 
.tvc2 table td img { vertical-align: bottom;
                     }
.tvc2 table p { } 
.tvc2 a { position: relative;
          display: block;
          background-color: black;
          border: none;
          width: 100px;
          margin-left: auto;
          margin-right: auto;}

/* table classes  */
table td { border: 0px solid black;
        text-align: left;
        color: #000066;
        font: 8pt Verdana, sans-serif;
       }
.uxw {
    border: 1px solid black;
}

.tsb table td { border: none; }

.t1 table  td { text-align: center; }

.t2 table  td p{ padding-left: 10px;}

.t3 table tbody tr td {border: none; text-align: center;} /* games */
.t3 table {margin-left: auto; margin-right: auto;}
/*  credits page  */
.td1 table td { width: 25px;}
.td2 table td { width: 50px;}
.td3 table td { width: 25%;}
/*  software page  */
.td4 table td { width: 30px;}
.td5 table td { width: 60px;}

.t4 table {margin-left: 40px;}
.t4 table td{padding: 5px;}

.noborders  td {border: none;}

.cclue {border: none; padding: 0px 5px 0px 5px;}

.clues {text-decoration: none;}

/* Winpic layout */
.wpcontainer {display: block; margin-left: auto; margin-right: auto; text-align: center;
            background-color: black;
            } 
.wpimg {border: solid #006400 4px;
        display: block; margin-top: 10px; margin-left: auto; margin-right: auto; text-align: center;
        }
        
/* standard generic spacer  */
div#spacer { position: relative; top: 32px; margin-left: 0px; width: 10px; height: 30px;
             border: none; background-color: black;}

/* rss button  */
div#rss {position: relative; top: 20px; left: 30px; padding-bottom: 10px;}
div#rss p {color: #088808; font: 12px Verdana, sans-serif;}


/* hover button - close winpops   */
div#closeme {position: relative; top: -65px; left: 5px; width: 60px; height: 25px;
             font: 12px Verdana, sans-serif;}
div#closeme a {display: block;
               padding: 5px 5px; margin: 0 0 2px 2px;
               border: solid #A52A2A; border-width: 1px; 
               text-decoration: none; color: #B8860B; text-align: center;}
div#closeme a:link {color: #B8860B;}
div#closeme a:hover {color: red; text-decoration: none;
                     border-color: red; border-width: 1px; cursor: pointer;}
div#closeme a:visited {color: #B8860B;}

div#bgsnd {
    position: fixed; top: 520px; margin-left: 5px; z-index: 100;
}

#bgsndc { 
    height: 20px;
    width: 130px;
} 
 
#emblems {
    text-align: center;
} 

#poppy {
    position: relative;
} 

/* ****************************   Footer Area  ******************************* */

/* **********  insert the copyright notice here  *********** */
div#footer {position: relative; top: 20px; padding-bottom: 0px;}
div#footer p {color: goldenrod; font: 14px Verdana, sans-serif; text-align: center;}

/* ************************    Floating fixed nav bar   ********************************* */


div#navholder {
    display: none;
    position: fixed; 
    background: #2D2D2D;
    top: 180px;
    right: 15px;  
    width: 48px;
    height: 535px;
    font: 1.1em Verdana, sans-serif;
    z-index: 800;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0.3; 
}

div#navholder p {
    display: block;
    height: 605px;
    padding: 3px 3px;
    margin: 0 0 2px 3px;
    border: none; 
    text-decoration: none;
    color: #228622;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#nav {
    display: none;
    position: fixed;
    top: 210px;
    right: 20px;
    width: 40px;
    height: auto;
    font: 1.1em Verdana, sans-serif;
    color: blue;
    z-index: 800;
    background: #2D2D2D;
}

div#nav a {
    display: block;
    background:#000000;
    padding: 8px 8px 8px 8px;
    margin: 0px 0px 15px 2px; 
    border: solid #456789;
    border-width: 1px;
    border-radius: 7px;
    text-decoration: none;
    color: #1E90FF;
    text-align: center;
    line-height: 30px;
    height: 30px;
}

div#nav a span {
    display: none;
}

div#nav a:hover {
    color: #FF0000;
    text-decoration: none;
    border-color: #FF0000;
    border-width: 1px;
}

div#nav a:hover span {
    display: block;
    position: absolute;
    top: 530px;
    right: 0px;
    width: 60px;
    height: 60px;
    padding: 5px;
    margin: 0px;
    border: solid #FFD700;
    border-width: 1px;
    border-radius: 5px;
    text-decoration: none;
    color: #DEB887;
    background: black;
    font: 0.8em Verdana, sans-serif;
    text-align: left;
}

/* ************************    Browser Note button (index.php)   ********************************* */


div#browser {position: absolute; top: 35px; right: 20px; width: 90px; height: 15px;
             font: 10px Verdana, sans-serif; z-index: 100;}
div#browser a {display: block;
               padding: 5px 5px; margin: 0 0 2px 2px;
               border: solid #A52A2A; border-width: 1px; 
               text-decoration: none; color: #B8860B; text-align: center;
               -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
               border-radius: 5px;}
div#browser a span {display: none;}
div#browser a:link {color: #B8860B;}
div#browser a:hover {color: #B8860B; text-decoration: none;
                     border-color: red; border-width: 1px;}
div#browser a:hover span {display: block; text-decoration: none;
                        position: absolute; top: 60px; left: -170px; width: 230px; height: 270px;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
div#browser a:visited {color: #B8860B;}


div#browserok {position: absolute; top: 35px; right: 20px; width: 90px; height: 15px;
             font: 10px Verdana, sans-serif; z-index: 99;}
div#browserok a {display: block;
               padding: 5px 5px; margin: 0 0 2px 2px;
               border: solid #A52A2A; border-width: 1px; 
               text-decoration: none; color: #B8860B; text-align: center;}
div#browserok a span {display: none;}
div#browserok a:link {color: #B8860B;}
div#browserok a:hover {color: #B8860B; text-decoration: none;
                     border-color: red; border-width: 1px;}
div#browserok a:hover span.main {display: block; text-decoration: none;
                        position: absolute; top: 60px; left: -170px; width: 230px; height: 270px;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left; z-index: 99;}
div#browserok a:visited {color: #B8860B;}


/* ************************    User Agent detect (index.php)   ********************************* */

/* div#uadisplay {position: absolute; left: 50px; top: 85px; width: 450px; height: 40px; */
div#uadisplay {position: relative; top: 0px; width: 270px; height: 40px; margin-left: auto; margin-right: auto; text-align: center;
             font: 10px Verdana, sans-serif; z-index: 59;}
div#uadisplay p {display: block;
               padding: 5px 5px; margin: 0 0 2px 2px;
               border: solid green; border-width: 1px; 
               text-decoration: none; color: #B8860B; text-align: center;}
div#uadisplay p span {display: none; text-decoration: none;
                        position: absolute; top: 30px; left: 5px; min-width: 190px; height: 20px;
                        padding: 0px; margin: 0px;
                        color: #FF7C4F; font: 14px Verdana, sans-serif; text-align: center; z-index: 59;}



/* Software hover Links */
.softlinks {position: relative; margin-top: 20px; margin-left: 15px; height: auto;  
           padding-top: 0px; font: 12px Verdana, sans-serif;
           }
.softlinks table {position:relative; left: 0px;
              border-collapse: collapse; border: solid 2px; border-color: #6699FF;
              font-size: 16px; margin-left: 0px;}
.softlinks table td {font-size: 0.8em}  
.softlinks table td {color: #000066; border: solid 1px; border-color: #6699FF; padding: 5px;}
.softlinks a {display: block; position: relative; z-index: 24;
             padding: 2px 2px; margin: 0 0 -1px -1px;
             border: solid #FFFFFF; border-width: 1px; 
             text-decoration: none; color: #1E90FF; text-align: left;}
.softlinks a:link {color: blue;}
.softlinks a:visited {color: #8B0000;}
.softlinks a:link:hover {color: red;}
.softlinks a:visited:hover {color: red;}
.softlinks a span {display: none;}
.softlinks a:hover {z-index: 25; color: #FF0000; text-decoration: none;
                   border: solid #FF0000; border-width: 1px;}
.softlinks a:hover span {display: block; text-decoration: none;
                        position: absolute; top: -70px; left: -5px; width: 200%; height: 50px;  
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}

/* Ensure all content of winpop viewable */
div#logs { width: 900px;}
div#logs p {background: white;
            color: black;
            font: 10px Verdana, sans-serif;
            margin-left: 10px;
            }

div#toggle {display: block;
            height: 35px;
            margin-left: 30px;
            }
div#toggle p {margin-left: -5px;
            }
div#toggle h5 {margin-left: 5px;
            }
            
/*  Test cylon bar  */
/*div#cylon {position: absolute; top: 40px; left: 720px; width: 25px; height: 100px; 
           font: 10px Verdana, sans-serif; color: blue;} */
div#cylon {top: 40px; margin-left: 720px; width: 25px; height: 100px; 
          font: 10px Verdana, sans-serif; color: blue; }
div#cylon a { display: block;
             padding: 0px 0px; margin: 0px 0px 2px 3px;
             border: 1px solid #456789; 
             text-decoration: none; color: #000000; text-align: center;}
div#cylon a span {display: none;}
div#cylon a:hover {display: block; 
                 border: 1px solid #FF0000; width: 20px; height: 20px;
                 text-decoration: none; color: #FF0000; 
                 }
div#cylon a:hover span {display: block; position: relative; top: 0px; left: 30px; width: 60px; height: 0px;
                    padding: 5px; margin: 0px;
                    border: 1px solid #FFD700; border-collapse: collapse;
                    background: black;
                    text-decoration: none; color: #DEB887; font: 10px Verdana, sans-serif; text-align: left;
                    }
div#cylon h2 {margin: 5px; text-align: center;
              font: bold 14px Verdana, sans-serif; color: #FFD700;}
div#cylonholder {position: absolute; top: 20px; left: 715px; width: 35px; 
               font: 9px Verdana, sans-serif; color: blue;}
div#cylonholder p {display: block; height: 110px;
             padding: 3px 3px; margin: 0 0 2px 3px;
             border: solid #006400; border-width: 1px; 
             text-decoration: none; color: #006400; text-align: center;}
             
#popuparea img {border: 2px solid #FF0000;}          
#popuparea a    {margin-left: 60px;}         
#popuparea a:visited {position: relative;
                    display: block;
                    width: 200px;
                    margin: 0px;
                    text-decoration: none; 
                    color: green;
                    }
#popuparea a span {display: none;
                }
#popuparea a:hover span {
                    display: block;
                    position: relative;
                    width: 380px;
                    color: #000000;
                    font: 11px/13px Verdana;
                    margin-top: 100px;
                    margin-left: -60px;
                    padding: 10px;
                    background-color: #E4D78F;
                    border: 1px solid #000000;
                    }
#popuparea a span img{  
                    border: 1px solid #000000;
                    float: right;
                    margin-left: 10px;
                    margin-bottom: 5px;
                    }
#popuparea a:hover {text-indent: 0;
                    color: #FF0000;
                    text-decoration: none;
                   border-color: #FF0000;
                   border-width: 1px;
                   border-collapse: collapse;
                   }


/* *************************    Styling for NEW Sitemap graphic  ******************************** */

.smWrapper {
    position: relative;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.nsm {
    position: absolute;
    display:block;
    padding:2px;
    margin:0.4em;
    width: 4em;
    height: 3em;
}

.nsm a, .nsm a:visited {
  position:relative;
  display:block;
  width:4em;
  height: 3em;
  top: 0em;
  left: 0em;
  border:1px solid #456789;
  border-radius: 5px;
  font-family:verdana, sans-serif;
  font-size:1.0em;
  text-align:center;
  text-decoration:none;
  background:#FFE168; 
  color: blue; 
  padding: 0.38em;
  margin: 0.3em;
  }

.nsm a span {
  display:none;
  }

.nsm a:hover {
  background:#FAD12B;
  color:#808;
  border:1px solid red;
}

.nsm a:hover span.nsm_5 { /* basic column outline */
    position: absolute; 
    display: block;
    text-align: left;
    top: -0.4em;
    left: 6.0em;
    padding: 0.5em; 
    width: 15em;
    height: 7.4em;
    background-color: #0f0f0f;  /* #F1F1F1; */
    color:#DEB887; 
    border:1px solid #FAD12B; border-radius: 5px;
    z-index: 1;
    opacity: 0.2;
}

.nsm a:hover span.nsm_6 { /* basic column outline */
    position: absolute; 
    display: block;
    text-align: left;
    top: -0.4em;
    left: 6.0em;
    padding: 0.5em; 
    width: 15em;
    height: 7.4em;
    background-color: #0f0f0f;  /* #F1F1F1; */
    color:#DEB887; 
    border:1px solid #FAD12B; border-radius: 5px;
    z-index: 1;
    opacity: 0.2;
}

.nsm a:hover span.nsm_8 { /* basic column outline */
    position: absolute; 
    display: block;
    text-align: left;
    top: -0.4em;
    left: 6.0em;
    padding: 0.5em; 
    width: 15em;
    height: 12.0em;
    background-color: #0f0f0f;  /* #F1F1F1; */
    color:#DEB887; 
    border:1px solid #FAD12B; border-radius: 5px;
    z-index: 1;
    opacity: 0.2;
}

.xxxnsm a:hover span.xxxmsm3 { /* mod column outline when column 3 hovered */
  display:block;
  text-align:left;
  position:absolute; 
  left:5.2em; 
  top:13.5em;  /* 14.3em without CC */
  padding:0.5em; 
  width:4.4em;
  height:22.8em; /* 22.5em without CC */
  background-color: #F1F1F1;
  color:#DEB887; 
  border:1px solid #FAD12B; border-radius: 0px 5px 5px 0px;
  border-left-color: #F1F1F1;
  }

.xxxnsm a:hover span.xxxmsm4 { /* mod column outline when column 4 hovered */
  display:block;
  text-align:left;
  position:absolute; 
  left:-0.3em; 
  top:5.8em; 
  padding:0.5em; 
  width:4.4em;
  height:3.7em;
  background-color: #F1F1F1;
  color:#DEB887; 
  border:1px solid #FAD12B; border-radius: 5px;
  }

.nsm a:hover span.rm { /* row marker */
    display:block;
    position:absolute; 
    left:5.1em; 
    top:2em; 
    padding:0em; 
    width:1.0em;
    height:0em;
    border:1px solid #3333FF;
}
 
.nsm1 {
    top: 0px;
    left: 0px;
}

.nsm2 {
    top: 120px;  /* 60px; */
    left: 0px;
}

.nsm3 {
    top: 240px;  /* 120px; */
    left: 0px;
}

.nsm4 {
    top: 420px;  /* 240px; */
    left: 0px;
}

.nsm5 {
    top: 540px; /* 300px; */
    left: 0px;
}

.nsm6 {
    top: 660px; /* 360px; */
    left: 0px;
}

/* z-index set to allow group highlight and item span hover  */
.pg1 {
    position: absolute;
    top: 8px;
    left: 90px;
    z-index: 99;
}

.pg2 {
    position: absolute;
    top: 128px;  /* 68px; */
    left: 90px;    
    z-index: 98;
}

.pg3 {
    position: absolute;
    top: 248px; /* 128px; */
    left: 90px;
    z-index: 97;
}

.pg4 {
    position: absolute;
    top: 428px; /* 248px; */
    left: 90px;
    z-index: 96;
}

.pg5 {
    position: absolute;
    top: 548px; /* 308px; */
    left: 90px;
    z-index: 95;
}

.pg6 {
    position: absolute;
    top: 668px; /* 368px; */
    left: 90px;
    z-index: 94;
}

.pago {
    width: 60px;
    height: 45px;
    background: #ffe168;
    margin: 4px;
    border: 1px solid green;
    border-radius: 7px;
    z-index: 5000;
}

.pago a {
    display: block;
    position: relative;
    padding: 2px 2px 2px 2px;
    height: 40px;
    font-size: 0.8em; text-decoration: none; text-align: center;
    color: #1E90FF;
}

.pago a span {
    display: none;
}

.pago a:hover {
    position: relative;
    top: -1px;
    left: -1px;
    height: 41px;
    width: 56px;
    background-color: #FAD12B;
    color: #FF0000;
    text-align: center;
    text-decoration: none;
    border: 1px solid #456789;
    border-radius: 7px;
    padding: 2px 2px 2px 2px;
 }

.pago a:hover span {
    position: absolute;
    display: block;
    text-decoration: none;
    top: 55px;
    left: -10em;
    width: 170px;
    height: auto;
    padding: 5px; margin: 0px;
/*    border: solid #FFD700; border-width: 1px; border-radius: 5px; */
    border: solid #8b0000; border-width: 1px; border-radius: 5px;
    color: #DEB887; background: black;
    font: 10px Verdana, sans-serif; text-align: left;
    z-index: 5000;
}

.pagoFirstline a:hover span:first-line {
    font-weight:bold; 
    font-size:1.0em;
    color: gold; /* #006400; */
}

.smAlignLeft {
    float: left;
}

.pago a:hover span.vshell {display: block; text-decoration: none;
                        position: absolute;
                        top: 55px;
                        left: -17em;
                        width: 360px; /* 540px; */
                        height: 800px; /* 400px; */
                        padding: 3px; margin: 0px; border: 1px solid #8b0000;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                    }                        

.pago a:hover span.vshell2 {display: block; text-decoration: none;
                        position: absolute;
                        top: 55px;
                        left: -24em;
                        width: 360px; /* 540px; */
                        height: 800px; /* 400px; */
                        padding: 3px; margin: 0px; border: 1px solid #8b0000;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                    }                        

.pago a:hover span.vshell3 {display: block; text-decoration: none;
                        position: absolute;
                        top: 55px;
                        left: -12em; /* -31em; */
                        width: 360px; /* 540px; */
                        height: 800px; /* 400px; */
                        padding: 3px; margin: 0px; border: 1px solid #8b0000;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                    }                        

.pago a:hover span.vshell4 {display: block; text-decoration: none;
                        position: absolute;
                        top: 55px;
                        left: -19em; /* -38em; */
                        width: 360px; /* 540px; */
                        height: 800px; /* 400px; */
                        padding: 3px; margin: 0px; border: 1px solid #8b0000;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                    }                        

.pago a:hover span.v1 {display: block; text-decoration: none;
                        position: absolute; top: 2px; left: 0em; width: 180px; height: 398px;
                        padding: 0px; margin: 0px; border: none;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
  
.pago a:hover span.v2 {display: block; text-decoration: none;
                        position: absolute; top: -178px; left: 0em; width: 180px; height: 398px;
                        padding: 0px; margin: 180px; border: none;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
  
.pago a:hover span.v3 {display: block; text-decoration: none;
                    /*    position: absolute; top: -358px; left: 0em; width: 180px; height: 398px; */
                        position: absolute; top: 40px; left: -35em; width: 180px; height: 398px;
                        padding: 0px; margin: 360px; border: none;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}  
                        
.pago a:hover span.cat {display: block; text-decoration: none;
                        position: relative; top: -10px; left: 0em; width: 170px; height: auto;
                        padding: 5px; margin: 0px; border: none;
                        color: #DEB887; background: black; float: left;
                        font: 10px Verdana, sans-serif; text-align: left;}  


.xxxpagoBlank a {
    display: block;
    position:relative;
    padding: 2px 2px; margin: 0.25em; height: 4.2em;
    background: red; /* #FFE168; */
    font-size: 0.8em; text-decoration: none; color: #1E90FF; text-align: center;
}







/* *************************    Styling for Sitemap graphic  ******************************** */

#sm {
  padding:2px;
  margin:0.4em;
/*  border:1px solid green; */ /* not required with curly corners */
  width: 38.8em;
  height: 38.5em;
/*  background-image: url('../images/bsm.jpg'); */ /* not required with curly corners */
  }
#sm ul {
  float: left;
  width: 100%;
  }
#sm li {
  float: left;
  list-style-type:none;
  margin:0 0 0 0;
  }
#sm a, #sm a:visited {
  position:relative;
  display:block;
  width:4em;
  height: 3em;
  top: 0em;
  left: 0em;
  border:1px solid #456789;
  border-radius: 5px;
  font-family:verdana, sans-serif;
  font-size:1.0em;
  text-align:center;
  text-decoration:none;
  background:#FFE168; 
  color: blue; 
  padding: 0.38em;
  margin: 0.3em;
  }
#sm a span {
  display:none;
  }
#sm a:hover {
  background:#FAD12B;
  color:#808;
  border:1px solid red;
}
#sm a:hover span.sm_main { /* basic column outline */
  display:block;
  text-align:left;
  position:absolute; 
  left:-0.3em; 
  top:5.8em; 
  padding:0.5em; 
  width:4.4em;
  height:30.5em; /* 31em without CC  */
  background-color: #F1F1F1;
  color:#DEB887; 
  border:1px solid #FAD12B; border-radius: 5px;
  }
#sm a:hover span:first-line {
  font-weight:bold; 
  font-size:1.0em;
  color:#006400;
  }
#sm img {
  border:1px solid #000; 
  float:left; 
  margin:0.25em 1em 0.5em 0;
  }
#sm a:hover span.msm3 { /* mod column outline when column 3 hovered */
  display:block;
  text-align:left;
  position:absolute; 
  left:5.2em; 
  top:13.5em;  /* 14.3em without CC */
  padding:0.5em; 
  width:4.4em;
  height:22.8em; /* 22.5em without CC */
  background-color: #F1F1F1;
  color:#DEB887; 
  border:1px solid #FAD12B; border-radius: 0px 5px 5px 0px;
  border-left-color: #F1F1F1;
  }
#sm a:hover span.msm4 { /* mod column outline when column 4 hovered */
  display:block;
  text-align:left;
  position:absolute; 
  left:-0.3em; 
  top:5.8em; 
  padding:0.5em; 
  width:4.4em;
  height:3.7em;
  background-color: #F1F1F1;
  color:#DEB887; 
  border:1px solid #FAD12B; border-radius: 5px;
  }

#sm a:hover span.cm { /* column marker */
  display:block;
  position:absolute; 
  left:2.3em; 
  top:4em; 
  padding:0em; 
  width:0em;
  height:1.2em;
  border:1px solid #3333FF;
  }
 
#sm1 {position: absolute; top: 90px; left: 9px; width: 5.3em; height: 10em; /* left: 10px; top: 120px if cc not used */
           font-family: Verdana, sans-serif; color: blue; z-index: 100;}
#sm1 a {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4em; /* 4.5em for IE5  */
             border: solid #456789; border-width: 1px; border-radius: 5px;
             background: #FFE168;
             font-size:0.8em; text-decoration: none; color: #1E90FF; text-align: center;
             }
#sm1 a span {display: none;}
#sm1 a:hover {background-color: #FAD12B; color: #FF0000; text-decoration: none;
                   border-color: #FF0000; border-width: 1px;
                   }
#sm1 a:hover span {display: block; text-decoration: none;
                        position: absolute;
                        top: 75px;
                        left: -1em;
                        width: 170px;
                        height: auto;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                        }
#sm1 a:hover span:first-line {
  font-weight:bold; 
  font-size:1.0em;
  color:#006400;
  }

#sm2 {position: absolute; top: 90px; left: 81px; width: 5.3em; height: 10em;
           font-family: Verdana, sans-serif; color: blue; z-index: 99;}
#sm2 a {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4em; /* 2em for IE  */
             border: solid #456789; border-width: 1px; border-radius: 5px;
             background: #FFE168;
             font-size:0.8em; text-decoration: none; color: #1E90FF; text-align: center;
             }
#sm2 a span {display: none;}
#sm2 a:hover {background-color: #FAD12B; color: #FF0000; text-decoration: none;
                   border-color: #FF0000; border-width: 1px;
                   }
#sm2 a:hover span {display: block; text-decoration: none;
                        position: absolute;
                /*        top: -40px;
                        left: 6.5em;  */
                        top: 75px;
                        left: -1em;
                        width: 170px;
                        height: auto;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                        }
#sm2 a:hover span:first-line {
  font-weight:bold; 
  font-size:1.0em;
  color:#006400;
  }


#sm3 {position: absolute; top: 90px; left: 153px; width: 5.3em; height: 10em;
           font-family: Verdana, sans-serif; color: blue; z-index: 98;}
#sm3 a {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4em;
             border: solid #456789; border-width: 1px; border-radius: 5px;
             background: #FFE168;
             font-size:0.8em; text-decoration: none; color: #1E90FF; text-align: center;}
#sm3 a span {display: none;}
#sm3 a:hover {background-color: #FAD12B; color: #FF0000; text-decoration: none;
                   border-color: #FF0000; border-width: 1px;}
#sm3 a:hover span {display: block; text-decoration: none;
                        position: absolute;
                /*        top: -40px;
                        left: 6.5em;  */
                        top: 75px;
                        left: -1em;
                        width: 170px;
                        height: auto;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                        }
#sm3 a:hover span:first-line {
  font-weight:bold; 
  font-size:1.0em;
  color:#006400;
  }


#sm3 a:hover span.vshell {display: block; text-decoration: none;
                        position: absolute;
                /*        top: -40px;
                        left: 6.5em;  */
                        top: 75px;
                        left: -1em;
                        width: 540px;
                        height: 400px;
                        padding: 3px; margin: 0px; border: 1px solid #FFD700;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                    }

#xxxsm3 a:hover span.v1 {display: block; text-decoration: none;
                        position: absolute; top: 0px; left: 0em; width: 170px; height: 390px;
                        padding-left: 5px; margin: 0px; border: 1px dotted #FF0000;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
  
#xxxsm3 a:hover span.v2 {display: block; text-decoration: none;
                        position: absolute; top: -180px; left: 0em; width: 170px; height: 390px;
                        padding-left: 5px; margin: 180px; border: 1px dotted #FFCC00;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
  
#xxxsm3 a:hover span.v3 {display: block; text-decoration: none;
                        position: absolute; top: -182px; left: 0em; width: 170px; height: 250px;
                        padding: 5px; margin: 180px; border: 1px dotted #FF2200;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}  
                        

#sm3 a:hover span.v1 {display: block; text-decoration: none;
                        position: absolute; top: 2px; left: 0em; width: 180px; height: 398px;
                        padding: 0px; margin: 0px; border: none;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
  
#sm3 a:hover span.v2 {display: block; text-decoration: none;
                        position: absolute; top: -178px; left: 0em; width: 180px; height: 398px;
                        padding: 0px; margin: 180px; border: none;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
  
#sm3 a:hover span.v3 {display: block; text-decoration: none;
                        position: absolute; top: -358px; left: 0em; width: 180px; height: 398px;
                        padding: 0px; margin: 360px; border: none;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}  
                        
#sm3 a:hover span.cat {display: block; text-decoration: none;
                        position: relative; top: -10px; left: 0em; width: 170px; height: auto;
                        padding: 5px; margin: 0px; border: none;
                        color: #DEB887; background: black; float: left;
                        font: 10px Verdana, sans-serif; text-align: left;}  
                        
#sm4 {position: absolute; top: 90px; left: 225px; width: 5.3em; height: 10em;
           font-family: Verdana, sans-serif; color: blue; z-index: 97;}
#sm4 a {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4em;
             border: solid #456789; border-width: 1px; border-radius: 5px;
             background: #FFE168;
             font-size: 0.8em; text-decoration: none; color: #1E90FF; text-align: center;}
#sm4 a span {display: none;}
#sm4 a:hover {background-color: #FAD12B; color: #FF0000; text-decoration: none;
                   border-color: #FF0000; border-width: 1px;}
#sm4 a:hover span {display: block; text-decoration: none;
                        position: absolute;
                /*        top: -40px;
                        left: 6.5em;  */
                        top: 75px;
                        left: -1em;
                        width: 170px;
                        height: auto;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                    }
#sm4 a.smblank {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4.2em;
             background: #FFE168;
             font-size: 0.8em; text-decoration: none; color: #1E90FF; text-align: center;}
#sm4 a:hover span:first-line {
  font-weight:bold; 
  font-size:1.0em;
  color:#006400;
  }


#sm5 {position: absolute; top: 90px; left: 297px; width: 5.3em; height: 10em;
           font-family: Verdana, sans-serif; color: blue; z-index: 96;}
#sm5 a {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4em;
             border: solid #456789; border-width: 1px; border-radius: 5px;
             background: #FFE168;
             font-size: 0.8em; text-decoration: none; color: #1E90FF; text-align: center;}
#sm5 a span {display: none;}
#sm5 a:hover {background-color: #FAD12B; color: #FF0000; text-decoration: none;
                   border-color: #FF0000; border-width: 1px;}
#sm5 a:hover span {display: block; text-decoration: none;
                        position: absolute;
                /*        top: -40px;
                        left: 6.5em;  */
                        top: 75px;
                        left: -1em;
                        width: 170px;
                        height: auto;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                    }
#sm5 a:hover span:first-line {
  font-weight:bold; 
  font-size:1.0em;
  color:#006400;
  }

#sm6 {position: absolute; top: 90px; left: 369px; width: 5.3em; height: 10em;
           font-family: Verdana, sans-serif; color: blue; z-index: 95;}
#sm6 a {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4em;
             border: solid #456789; border-width: 1px; border-radius: 5px;
             background: #FFE168;
             font-size: 0.8em; text-decoration: none; color: #1E90FF; text-align: center;}
#sm6 a span {display: none;}
#sm6 a:hover {background-color: #FAD12B; color: #FF0000; text-decoration: none;
                   border-color: #FF0000; border-width: 1px;}
#sm6 a:hover span {display: block; text-decoration: none;
                        position: absolute;
                /*        top: -40px;
                        left: 6.5em;  */
                        top: 75px;
                        left: -1em;
                        width: 170px;
                        height: auto;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                    }
#sm6 a:hover span:first-line {
  font-weight:bold; 
  font-size:1.0em;
  color:#006400;
  }
#sm6 a.smblank {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4.2em;
             background: #FFE168;
             font-size: 0.8em; text-decoration: none; color: #1E90FF; text-align: center;}

#sm7 {position: absolute; top: 90px; left: 441px; width: 5.3em; height: 10em;
           font-family: Verdana, sans-serif; color: blue; z-index: 94;}
#sm7 a {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4em;
             border: solid #456789; border-width: 1px; border-radius: 5px;
             background: #FFE168;
             font-size: 0.8em; text-decoration: none; color: #1E90FF; text-align: center;}
#sm7 a span {display: none;}
#sm7 a:hover {background-color: #FAD12B; color: #FF0000; text-decoration: none;
                   border-color: #FF0000; border-width: 1px;}
#sm7 a:hover span {display: block; text-decoration: none;
                        position: absolute;
                /*        top: -40px;
                        left: 6.5em;  */
                        top: 75px;
                        left: -1em;
                        width: 85px;
                        height: auto;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                        color: #DEB887; background: black; 
                        font: 10px Verdana, sans-serif; text-align: left;
                        z-index: 500;
                }
#sm7 a.smblank {display: block;
             position:relative;
             padding: 2px 2px; margin: 0.25em; height: 4.2em;
             background: #FFE168;
             font-size: 0.8em; text-decoration: none; color: #1E90FF; text-align: center;}

/*  Machine page - emergency stop  */
#smred a {display: block;
             position:relative;
             width: 60px; 
             margin-left: auto; margin-right: auto;
             background: none;
             text-decoration: none;
            }
#smred a span { display: none;}
#smred a:hover {background-color: #000000; color: #000000; text-decoration: none;
                   border-color: none; 
                   }
#smred a:hover span {display: block; text-decoration: none;
                        position: absolute; top: -90px; left: -4.9em; width: 170px; height: auto; 
                        padding: 5px; margin: 0px; border: dotted #FFD700; border-width: 1px;
                        color: #DEB887; background: #000000;
                        font: 10px Verdana, sans-serif; text-align: center; z-index: 100;
                        -webkit-border-radius: 5px;
                        -moz-border-radius: 5px;
                        border-radius: 5px;              
                        }
#smred a:hover span:first-line {
  font-weight:bold; 
  font-size:2.0em;
  color:#006400;
  }

.itemref {
    color: #FFD700;
}
             
/*  Generic button  */
div#butt { position: relative; top: 35px; left: 29%; width: 30px; height: 20px; }
div#butt a {display: block;
             padding: 5px; margin: 0px 0px 0px 0px;
             border: solid 1px #456789;
             border-radius: 7px;
             text-decoration: none; color: #1E90FF; text-align: center;}
div#butt a span {display: none;}
div#butt a:hover {color: #FF0000; text-decoration: none;
                   border-color: #FF0000; border-width: 1px;}
div#butt a:hover span {display: block; text-decoration: none;
                        position: absolute; top: -80px; left: 10px; width: 200px; height: 60px;
                        padding: 5px; margin: 0px; border: solid #FFD700; border-width: 1px; border-radius: 5px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
div#butt img {vertical-align: bottom;}  /* required for FF 5px bug  */



/* **********************************   Form field layout for hippomail  *******************************  */


div#xxxhippomail input,textarea {font-family: Verdana; }
div#xxxhippomail .t1 p {position: absolute; display: block; margin-left: 10px; margin-top: 20px; height: 20px; width:100px; text-align: right; padding-right: 20px;}
div#xxxhippomail .i1 input { position: absolute; width: 300px ; margin-left: 155px; margin-top: 20px; color: #0000FF;}
div#xxxhippomail .t2 p {position: absolute; display: block; margin-left: 10px; margin-top: 50px;  height: 20px; width:100px; text-align: right; padding-right: 20px;}
div#xxxhippomail .i2 input { position: absolute; width: 300px ; margin-left: 155px; margin-top: 50px; color: #0000FF;}
div#xxxhippomail .t3 p {position: absolute; display: block; margin-left: 10px; margin-top: 90px;  height: 20px; width:100px; text-align: right; padding-right: 20px;}
div#xxxhippomail .ta textarea { position: relative; overflow: auto ; width: 300px ; margin-left: 155px; margin-top: 90px; color: #0000FF;}
div#xxxhippomail .i3 input { position: relative; width: 80px ; margin-left: 135px; margin-top: -10px;}
div#xxxhippomail .i4 input { position: absolute; width: 150px ; margin-left: 260px; margin-top: -22px;}

/* Form field layout for hippomail 1 */
div#hippomail1 input,textarea {font-family: Verdana; }
div#hippomail1 .t11 p {position: absolute; display: block; margin-left: 10px; margin-top: 20px; height: 20px; width:90px; text-align: right; padding-right: 20px;}
div#hippomail1 .i11 input { position: absolute; width: 45%; max-width: 400px; margin-left: 135px; margin-top: 20px; color: #0000FF;}
div#hippomail1 .t12 p {position: absolute; display: block; margin-left: 10px; margin-top: 50px;  height: 20px; width:90px; text-align: right; padding-right: 20px;}
div#hippomail1 .i12 input { position: absolute; width: 45%; max-width: 400px; margin-left: 135px; margin-top: 50px; color: #0000FF;}
div#hippomail1 .t13 p {position: absolute; display: block; margin-left: 10px; margin-top: 80px;  height: 20px; width:90px; text-align: right; padding-right: 20px;}
div#hippomail1 .i13 input { position: absolute; width: 45%; max-width: 400px; margin-left: 135px; margin-top: 80px; color: #0000FF;}
div#hippomail1 .t14 p {position: absolute; display: block; margin-left: 10px; margin-top: 120px;  height: 20px; width:90px; text-align: right; padding-right: 20px;}
div#hippomail1 .t1a textarea { position: relative; overflow: auto ; width: 45%; max-width: 400px; margin-left: 135px; margin-top: 120px; color: #0000FF;}
div#hippomail1 .sp p {position: relative; display: block; margin-left: 20px; margin-top: 30px;  height: 100px; width:55%; text-align: center; padding-right: 20px;}
div#hippomail1 .i14 input { position: relative; width: 80px; margin-left: 20px; margin-top: 0px;}
div#hippomail1 .i15 input { position: absolute; width: 150px; margin-left: 120px; margin-top: -20px;}

/* Form field layout for crossword 2 */
div#cw2 input,textarea {font-family: Verdana; }
div#cw2 .t11 p {position: absolute; display: block; margin-left: 10px; margin-top: 20px; height: 20px; width: 90px; text-align: right; padding-right: 20px;}
div#cw2 .i11 input { position: absolute; width: 45%; max-width: 400px; margin-left: 135px; margin-top: 20px; color: #0000FF;}
div#cw2 .t12 p {position: absolute; display: block; margin-left: 10px; margin-top: 50px;  height: 20px; width: 90px; text-align: right; padding-right: 20px;}
div#cw2 .i12 input { position: absolute; width: 45%; max-width: 400px; margin-left: 135px; margin-top: 50px; color: #0000FF;}
div#cw2 .t13 p {position: absolute; display: block; margin-left: 10px; margin-top: 80px;  height: 20px; width: 90px; text-align: right; padding-right: 20px;}
div#cw2 .i13 input { position: absolute; width: 45%; max-width: 400px; margin-left: 135px; margin-top: 80px; color: #0000FF;}
div#cw2 .t14 p {position: absolute; display: block; margin-left: 10px; margin-top: 120px;  height: 20px; width: 90px; text-align: right; padding-right: 20px;}
div#cw2 .t1a textarea { position: relative; overflow: auto ; width: 45%; max-width: 400px; margin-left: 135px; margin-top: 120px; color: #0000FF;}
div#cw2 .sp p {position: relative; display: block; margin-left: 20px; margin-top: 30px;  height: 100px; width:55%; text-align: center; padding-right: 20px;}
div#cw2 .i14 input { position: relative; width: 80px ; margin-left: 20px; margin-top: 0px;}
div#cw2 .i15 input { position: absolute; width: 150px ; margin-left: 120px; margin-top: -22px;}

/*  *************************************    Credit button  ********************************* */

.credit {position: relative; top: 0px; left: 10px; width: 80px; height: 3em;}
.credit a {display: block; padding: 0px 0px; margin: 0px 0px 0px 0px;
             border: 1px solid #006400; border-radius: 5px; text-decoration: none; text-align: center; font-size: 12px;}
.credit a span {display: none;}
.credit a:link {color: #006400;}
.credit a:visited {color: #456789;}
.credit a:hover {text-decoration: none;}
.credit a:hover span {display: block; text-decoration: none; z-index: 100;
                        position: absolute; top: -40px; left: 5px; width: 80px; height: auto;
                        padding: 5px; margin: 0px; border: 1px solid #FFD700; border-radius: 5px;
                        color: #DEB887; background: black;
                        font: 1em Verdana, sans-serif; text-align: left;}


/*  *************************************    Euro Trip Selector  ********************************* */

#ets {
  padding:5px;
  margin-left:0em; /*7em; */   
  border:  none; /*1px solid green; */
  width: 29em;
  background: none; /*black; */
/*  background-image: url('../images/euback2.gif'); */
}
#ets li {
  list-style-type:none;
  margin:0 0 0 0;
  }
#ets a {
  position:relative;
  display:block;
  width:2em;
  border:1px solid #456789;
  font-family: Verdana, sans-serif;
  font-size:12px;
  text-align:center;
  text-decoration:none;
  background:#000000; 
  color: green; 
  padding:0.25em;
  margin: 0.1em;
  }
#ets a span {
  display:none;
  }
#ets a:hover {
  background:#000000;
  color: red;
  border:1px solid red;
}
#ets a:hover span {
  display:block;
  text-align:left;
  position:absolute;
  left:3em; 
  top:-1px; 
  padding:0.21em; 
  width:20em;
  background-color:#000000;
  color:#DEB887; 
  border:1px solid #FFD700;
  opacity: 0.4;
  }
#ets a:hover span:first-line {
  /* font-weight:bold; */ 
  font-size:1.0em;
  color:#FFD700;
  }
#ets a:hover span.loc1 {
  left:16.7em; 
  top: 7.8em; 
  width: 0.1em;
  height: 0.1em;
  background-color: red;
  border: none;
  border-radius: 3px;
  opacity: 1.0;
  }
#ets a:hover span.loc2 {
  left:17.9em; 
  top: 4.6em; 
  width: 0.1em;
  height: 0.1em;
  background-color: red;
  border: none;
  border-radius: 3px;
  opacity: 1.0;
  }
#ets a:hover span.loc3 {
  left:2em; 
  top: 4.6em; 
  width: 0em;
  height: 0em;
  background-color: black;
  border: none;
  border-radius: 3px;
  opacity: 1.0;
  }
#ets a:hover span.loc4 {
  left:2em; 
  top: 4.6em; 
  width: 0.1em;
  height: 0.1em;
  background-color: black;
  border: none;
  border-radius: 3px;
  opacity: 1.0;
  }
#ets a:hover span.loc5 {
  left:2em; 
  top: 4.6em; 
  width: 0.1em;
  height: 0.1em;
  background-color: black;
  border: none;
  border-radius: 3px;
  opacity: 1.0;
  }
#ets a:visited {
  color: #456789;
}
#ets img {
  border:1px solid #000; 
  float:left; 
  margin:0.25em 1em 0.5em 0em;
  }

#bcc {
    width: 29em; border: 2px solid #656565;
    background: #000000;  background-image: url('../images/euback.png');
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;    
}  

/* **************  Christmas Tree  ****************** */

.hollybar {
    height: 16px;
    width: 100%;
    background: url("../images/xmasbar543w.gif");
    border: 0px solid red;
}

.hollybar2 {
    height: 35px;
    width: 100%;
    background: url("../images/barxmas.gif");
    border: 0px solid red;
}

.hollybar3 {
    height: 35px;
    width: 100%;
    background: url("../images/barxmas2.gif");
    border: 0px solid red;
}

.tableWrapper {
    position: relative;
    width: 98%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 0px solid red;
}

.tableWrapper:after {  /* ensure following div doesn't paint over this div  */
  content: "";
  display: table;
  clear: both;
}

.xa{
    position: relative;
    width: 33%;
    float: left;
}

.xb{
    position: relative;
    top: 30px;
    width: 33%;
    float: left;
}

.xc{
    position: relative;
    top: 40px;
    width: 33%;
    float: left;
}

/* common styling for all galleries */
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}
a.slidea {background:url(../london/thumb2.jpg);}
a.slideb {background:url(../london/thumb3.jpg);}
a.slidec {background:url(../london/thumb4.jpg);}
a.slided {background:url(../london/thumb5.jpg);}
a.slidee {background:url(../london/thumb6.jpg);}
a.slidef {background:url(../london/thumb7.jpg);}
a.slideg {background:url(../london/thumb8.jpg);}
a.slideh {background:url(../london/thumb9.jpg);}
a.slidei {background:url(../london/thumb10.jpg);}
a.slidej {background:url(../london/thumb11.jpg);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}

/* styling for LEFT gallery */
#container_left {position:relative; width:350px; height:305px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;}
#container_left img {border:0; width: 200px;}
#container_left .thumbs {width:170px; position:absolute; left:0; top:0;}
#container_left a.gallery:hover span {display:block; position:absolute; width:302px; height:50px; top:265px; left:5px; padding:5px; font-style:italic; color:#fff;  z-index:100;}
#container_left a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#container_left a.gallery:active, #container_left a.gallery:focus {border:1px solid #000;}
#container_left a.gallery:active em, #container_left a.gallery:focus em {display:block; position:absolute; width:302px; height:250px; top:5px; left:50px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}
#container_left h1 {clear:both; margin:0; padding-top:80px; padding-left:50px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}
#container_left h1 em {font-size:0.6em; color:#000;}

/* styling for BOTTOM gallery */
/* #container_bottom {position: absolute; width:425px; height:425px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;} */
#container_bottom {position: absolute; width:425px; height:425px; background:#cccfff; border:1px solid #a49188; margin:1em auto; padding-top: 0px;}
#container_bottom img {border:0;}
#container_bottom span.big {visibility: hidden; width: 10px; height: 10px;}
#container_bottom .thumbs {position:absolute; left:0; bottom:0; height:114px;}
#container_bottom a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:-45px; left:5px; padding:5px; font-style:italic; color:#fff;  z-index:100;}
#container_bottom a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#container_bottom a.gallery:active, #container_bottom a.gallery:focus {border:1px solid #000;}
#container_bottom a.gallery:active em, #container_bottom a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:-305px; left:5px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}
#container_bottom h1 {clear:both; margin:0; padding-top:80px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}
#container_bottom h1 em {font-size:0.6em; color:#000;}

#container_bottom span.slidea:active {visibility: visible;}
#container_bottom span.slideb:active {visibility: visible;}
#container_bottom span.slidec:active {visibility: visible;}
#container_bottom span.slided:active {visibility: visible;}
#container_bottom span.slidee:active {visibility: visible;}

/* mouseover gallery  */
#container {position:relative; width:500px; height:500px; background:#888; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 11px; display:inline; color:#000; text-decoration:none; width:75px; height:55px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; width:480px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:152px; z-index:10; height:340px;}

#container a.pics:active img.thumb {border:1px solid #fc0;} 
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #fc0}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:500px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}

/* scrolling thumbs for photo display */
#outerg {
    position: relative;
    border: 1px solid blue;
    width: 425px;
    height: 130px;
    margin-top: 50px;
    overflow: scroll;
}

#innerg {
    position: relative;
    background: red;
    border: 1px solid yellow; 
}

/* External links on Links page */
.xlinkbox {border: 1px solid #006400; border-radius: 5px;
           margin: 15px;
           height: 200px;
           max-width: 34em; /* 51.5em; */
           margin: auto;
           text-align: center;
}
 .xlinks {
  position:relative;
  float:left; 
  top: 5em; /* 25px; */
  margin-left: 0.5em;
  border: none; 
  width: auto;
  }
.xlinks li {
  list-style-type:none;
  margin:0 0 0 0;
  margin-left: 0em; 
  }
.xlinks a {
  position:relative;
  display:block;
  width:13.1em;
  border:1px solid #006400;
  font-family: Verdana, sans-serif;
  font-size:12px;
  text-align:left;
  text-decoration:none;
  background:#000000; 
  color:#0066CC; 
  padding:0.25em;
  margin-bottom: 4px;
  }
.xlinks a span {display:none;}
.xlinks a:visited {color: #FF3300;}
.xlinks a:hover {
  background:#000000;
  color:#FF0000;
  border:1px solid #009900;
}
.xlinks a:hover span {
  display:block;
  text-align:left;
  position:absolute; 
  padding:0.5em; 
  width:22em; /* 33em; */
  height: auto;
  background-color:#000000;
  color:#DEB887; 
  border:1px solid #FFD700; border-radius: 5px;
  }


.xlinks a:hover.l1 span {top:-3.6em; left: 1em;}
.xlinks a:hover.l2 span {top:-5.8em; left: 1em;}
.xlinks a:hover.l3 span {top:-7.9em; left: 1em;}
.xlinks a:hover.l4 span {top:-10.1em; left: 1em;}
.xlinks a:hover.l5 span {top:-12.3em; left: 1em;}
.xlinks a:hover.l6 span {top:-14.4em; left: 1em;}
.xlinks a:hover.l7 span {top:-16.6em; left: 1em;}
.xlinks a:hover.l8 span {top:-18.8em; left: 1em;}
.xlinks a:hover.l9 span {top:-20.9em; left: 1em;}
.xlinks a:hover.l10 span {top:-23.1em; left: 1em;}
.xlinks a:hover.m1 span {top:-3.6em; left: 1em;}
.xlinks a:hover.m2 span {top:-5.8em; left: 1em;}
.xlinks a:hover.m3 span {top:-7.9em; left: 1em;}
.xlinks a:hover.m4 span {top:-10.1em; left: 1em;}
.xlinks a:hover.m5 span {top:-12.3em; left: 1em;}
.xlinks a:hover.m6 span {top:-14.4em; left: 1em;}
.xlinks a:hover.m7 span {top:-16.6em; left: 1em;}
.xlinks a:hover.m8 span {top:-18.8em; left: 1em;}
.xlinks a:hover.m9 span {top:-20.9em; left: 1em;}
.xlinks a:hover.m10 span {top:-23.1em; left: 1em;}
.xlinks a:hover.r1 span {top:-3.6em; left: 1em;}
.xlinks a:hover.r2 span {top:-5.8em; left: 1em;}
.xlinks a:hover.r3 span {top:-7.9em; left: 1em;}
.xlinks a:hover.r4 span {top:-10.1em; left: 1em;}
.xlinks a:hover.r5 span {top:-12.3em; left: 1em;}
.xlinks a:hover.r6 span {top:-14.4em; left: 1em;}
.xlinks a:hover.r7 span {top:-16.6em; left: 1em;}
.xlinks a:hover.r8 span {top:-18.8em; left: 1em;}
.xlinks a:hover.r9 span {top:-20.9em; left: 1em;}
.xlinks a:hover.r10 span {top:-23.1em; left: 1em;}
.xlinks .blank {color: #000000;}
.xlinks a:visited.blank  {color: #000000;}
.xlinks a:hover.blank {color: #000000;
                      border:1px solid #006400;}
.xlinks a:hover.blank  span {display:none;}

/* External links double lists */
.xlinks a:hover.dl1 span {top:-3.6em; left: 1em;}
.xlinks a:hover.dl2 span {top:-5.8em; left: 1em;}
.xlinks a:hover.dl3 span {top:-7.9em; left: 1em;}
.xlinks a:hover.dl4 span {top:-10.1em; left: 1em;}
.xlinks a:hover.dl5 span {top:-12.3em; left: 1em;}
.xlinks a:hover.dl6 span {top:-14.4em; left: 1em;}
.xlinks a:hover.dl7 span {top:-16.6em; left: 1em;}
.xlinks a:hover.dl8 span {top:-18.8em; left: 1em;}
.xlinks a:hover.dl9 span {top:-20.9em; left: 1em;}
.xlinks a:hover.dl10 span {top:-23.1em; left: 1em;}
.xlinks a:hover.dr1 span {top:-3.6em; left: 1em;}
.xlinks a:hover.dr2 span {top:-5.8em; left: 1em;}
.xlinks a:hover.dr3 span {top:-7.9em; left: 1em;}
.xlinks a:hover.dr4 span {top:-10.1em; left: 1em;}
.xlinks a:hover.dr5 span {top:-12.3em; left: 1em;}
.xlinks a:hover.dr6 span {top:-14.4em; left: 1em;}
.xlinks a:hover.dr7 span {top:-16.6em; left: 1em;}
.xlinks a:hover.dr8 span {top:-18.8em; left: 1em;}
.xlinks a:hover.dr9 span {top:-20.9em; left: 1em;}
.xlinks a:hover.dr10 span {top:-23.1em; left: 1em;}
.double a {width: 20.2em;}

/*
.xlinks a:hover.l1 span {top:-3.6em; left: 4em;}
.xlinks a:hover.l2 span {top:-5.8em; left: 4em;}
.xlinks a:hover.l3 span {top:-7.9em; left: 4em;}
.xlinks a:hover.l4 span {top:-10.1em; left: 4em;}
.xlinks a:hover.l5 span {top:-12.3em; left: 4em;}
.xlinks a:hover.l6 span {top:-14.4em; left: 4em;}
.xlinks a:hover.l7 span {top:-16.6em; left: 4em;}
.xlinks a:hover.l8 span {top:-18.8em; left: 4em;}
.xlinks a:hover.l9 span {top:-20.9em; left: 4em;}
.xlinks a:hover.l10 span {top:-23.1em; left: 4em;}
.xlinks a:hover.m1 span {top:-3.6em; left: -10.3em;}
.xlinks a:hover.m2 span {top:-5.8em; left: -10.3em;}
.xlinks a:hover.m3 span {top:-7.9em; left: -10.3em;}
.xlinks a:hover.m4 span {top:-10.1em; left: -10.3em;}
.xlinks a:hover.m5 span {top:-12.3em; left: -10.3em;}
.xlinks a:hover.m6 span {top:-14.4em; left: -10.3em;}
.xlinks a:hover.m7 span {top:-16.6em; left: -10.3em;}
.xlinks a:hover.m8 span {top:-18.8em; left: -10.3em;}
.xlinks a:hover.m9 span {top:-20.9em; left: -10.3em;}
.xlinks a:hover.m10 span {top:-23.1em; left: -10.3em;}
.xlinks a:hover.r1 span {top:-3.6em; left: -24.7em;}
.xlinks a:hover.r2 span {top:-5.8em; left: -24.7em;}
.xlinks a:hover.r3 span {top:-7.9em; left: -24.7em;}
.xlinks a:hover.r4 span {top:-10.1em; left: -24.7em;}
.xlinks a:hover.r5 span {top:-12.3em; left: -24.7em;}
.xlinks a:hover.r6 span {top:-14.4em; left: -24.7em;}
.xlinks a:hover.r7 span {top:-16.6em; left: -24.7em;}
.xlinks a:hover.r8 span {top:-18.8em; left: -24.7em;}
.xlinks a:hover.r9 span {top:-20.9em; left: -24.7em;}
.xlinks a:hover.r10 span {top:-23.1em; left: -24.7em;}
.xlinks .blank {color: #000000;}
.xlinks a:visited.blank  {color: #000000;}
.xlinks a:hover.blank {color: #000000;
                      border:1px solid #006400;}
.xlinks a:hover.blank  span {display:none;} */
/* External links double lists */
/*.xlinks a:hover.dl1 span {top:-3.6em; left: 4em;}
.xlinks a:hover.dl2 span {top:-5.8em; left: 4em;}
.xlinks a:hover.dl3 span {top:-7.9em; left: 4em;}
.xlinks a:hover.dl4 span {top:-10.1em; left: 4em;}
.xlinks a:hover.dl5 span {top:-12.3em; left: 4em;}
.xlinks a:hover.dl6 span {top:-14.4em; left: 4em;}
.xlinks a:hover.dl7 span {top:-16.6em; left: 4em;}
.xlinks a:hover.dl8 span {top:-18.8em; left: 4em;}
.xlinks a:hover.dl9 span {top:-20.9em; left: 4em;}
.xlinks a:hover.dl10 span {top:-23.1em; left: 4em;}
.xlinks a:hover.dr1 span {top:-3.6em; left: -17.1em;}
.xlinks a:hover.dr2 span {top:-5.8em; left: -17.1em;}
.xlinks a:hover.dr3 span {top:-7.9em; left: -17.1em;}
.xlinks a:hover.dr4 span {top:-10.1em; left: -17.1em;}
.xlinks a:hover.dr5 span {top:-12.3em; left: -17.1em;}
.xlinks a:hover.dr6 span {top:-14.4em; left: -17.1em;}
.xlinks a:hover.dr7 span {top:-16.6em; left: -17.1em;}
.xlinks a:hover.dr8 span {top:-18.8em; left: -17.1em;}
.xlinks a:hover.dr9 span {top:-20.9em; left: -17.1em;}
.xlinks a:hover.dr10 span {top:-23.1em; left: -17.1em;}
.double a {width: 20.2em;} */


#linksA {
    height: 600px;
}

#linksB {
    height: 430px;

}

#linksC {
    height: 590px;
}

#linksD {
    height: 330px;
}

#linksE {
    height: 170px;
}

#linksF {
    height: 480px;
}

#linksG {
    height: 430px;
}

#linksH {
    height: 430px;
}

#linksI {
    height: 430px;
}

#linksJ {
    height: 430px;
}





 .lightboxgallery span {
display: none;
}

#TB_notes  {display: none; text-decoration: none;
                        position: fixed; top: 200px; left: 0; width: 200px; height: 100px;
                        padding: 5px; margin: 5px; border: solid #FFD700; border-width: 1px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}

/* .lightboxgallery span:hover {
display: block; text-decoration: none;
                        position: fixed; top: 200px; left: 0; width: 200px; height: 100px;
                        padding: 5px; margin: 5px; border: solid #FFD700; border-width: 1px;
                        color: #DEB887; background: black;
                        font: 10px Verdana, sans-serif; text-align: left;}
*/

/* ****************   Games stuff  ***************** */

/* Minesweeper styling */
.div-game {
  margin: 5% auto;
  width: 480px;
  height: 410px;
}
.div-score {
  position: relative;
  top: 0px;
  left: 1px;
  height: 30px;
  color: #000000;
  background: #C0C0C0;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}
.img-mines, .div-mines, .img-time, .img-smiley, .div-time, .lb-level, .bn-reset {
  position: absolute;
}
.img-mines {
  top: 6px;
  left: 10px;
}
.div-mines {
  top: 6px;
  left: 29px;
  width: 40px;
  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #0000CF;
  background: transparent;
}
.img-time {
  top: 6px;
  left: 80px;
}
.div-time {
  top: 6px;
  left: 100px;
  width: 60px;
  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #007F00;
  background: transparent;
}
.img-smiley {
  top: 6px;
  left: 240px;
}
.lb-level {
  top: 4px;
  left: 330px;
  width: 80px;
  font-family: Arial;
  font-size: 12px;
}
.bn-reset {
  top: 3px;
  left: 420px;
  width: 50px;
  font-family: Arial;
  font-size: 12px;
  text-align: center;
}
.div-board {
  position: relative;
  width: 480px;
  height: 320px;
  color: #000000;
  background: #7F7F7F;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
}

.cell {
  position: absolute;
  overflow: hidden;
}

#resultms {
  margin-left:auto;
  margin-right: auto;
  text-align: left;
  width: 80%;
}

.wl table { z-index: 101;}

#marqueecontainer {
    width: 520px;
}

.hango {
    height: 350px;
}

.hango:after {  /* ensure following div doesn't paint over this div  */
  content: "";
  display: table;
  clear: both;
}

.gallows {
    position: relative; 
    display: block;
    text-align: center;
}

.hControl {
    position: relative; 
    display: block;
    left: 10%;
}

.hControl table {
    position: relative;
}

.hAnswer {
    text-align: center;
    width: 50%;
    min-width: 250px;
}

.hHint {
    position: relative; 
    display: block;
    left: 10%;
}


/* Browser selector bits */
.ie6 #sm a:hover span.msm3 {left: 5.1em; width: 4.5em;}
/* OK for K3.5  */
.konqueror3 #sm a {margin:0.4em}
.konqueror3 #sm a:visited {margin:0.4em}
.konqueror3 #sm a:hover span {left:-0.5em;} 
.konqueror3 div#links {margin-top: 215px;}
.konqueror3 #sm a:hover span.cm {left: 2.4em;} /* sitemap tweak for Konqueror*/
.konqueror3 #sm1 {left: 12px;}
.konqueror3 #sm2 {left: 84px;}
.konqueror3 #sm3 {left: 156px;}
.konqueror3 #sm4 {left: 228px;}
.konqueror3 #sm5 {left: 300px;}
.konqueror3 #sm6 {left: 372px;}
.konqueror3 #sm7 {left: 444px;}
.konqueror3 #sm a:hover span.msm3 { /* mod column outline when column 3 hovered */
  left:4.95em; 
  top:13.9em; 
  width:4.55em;
  height:22.95em;
  }
/* K442 */
.konqueror4 #sm1 {width: 5.7em; font-size: 0.7em; height: 9.5em; top: 84px;}
.konqueror4 #sm2 {width: 5.7em; font-size: 0.7em; height: 9.5em; top: 84px; left: 81px;}
.konqueror4 #sm3 {width: 5.7em; font-size: 0.7em; height: 9.5em; top: 84px; left: 153px;}
.konqueror4 #sm4 {width: 5.7em; font-size: 0.7em; height: 9.5em; top: 84px; left: 225px;}
.konqueror4 #sm5 {width: 5.7em; font-size: 0.7em; height: 9.5em; top: 84px; left: 297px;}
.konqueror4 #sm6 {width: 5.7em; font-size: 0.7em; height: 9.5em; top: 84px; left: 369px;}
.konqueror4 #sm7 {width: 5.7em; font-size: 0.7em; height: 9.5em; top: 84px; left: 441px;}
/* ETS adjust width */
.konqueror4 #bcc {width: 23em;}

.konqueror3 div#links {top: 5px;} 
/* .konqueror div#links a:hover span{top: 435px;} */
/* .webkit div#links a:hover span {top: 440px;} */
/* .webkit div#links a:hover span {top: 230px;} */
.webkit  #sm a {margin: 0.4em;}
.webkit #sm a:visited{margin: 0.4em;}
.webkit #sm a:hover span{left:-0.4em;}
.webkit #sm a:hover span.cm {left: 2.4em;} /* sitemap tweak for Safari */
.webkit #sm {width: 40em;} /* sitemap tweak for Safari */
.webkit #sm a {width: 3.81em;} /* sitemap tweak for Safari */
.webkit #sm a:hover span.msm3 { /* mod column outline when column 3 hovered */
  left:5em; 
  top:13.5em; /*14.1em; same as normal */
  width:4.7em;
  height:22.8em; /*22.7em;  same as normal */
  }
.ie7 #outershell    {z-index: 100;} /* to avoid sitemap hover span from underlapping NAV */
.ie6 #outershell {overflow: auto;} /* avoids EW2 overflow rendering issue when FIXED hack used in CSS */
.ie5 #outershell {overflow: auto;} /* avoids EW2 overflow rendering issue when FIXED hack used in CSS */

.opera div#links { margin-top: 0px; }  /* 12px old  */
.opera div#nback { margin-top: 0px; }  /* 25px old */


/* Javascript enabled/disabled detection */
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

/* Browser UA display  */
.gecko div#uadisplay p span.uat1  {display: block; background: #000000;}
.win.seam div#uadisplay p span.uat2  {display: block; background: #000000;}
.win.ff2 div#uadisplay p span.uat5  {display: block; background: #000000;}
.mac.ff2 div#uadisplay p span.uat6  {display: block; background: #000000;}
.win.ff div#uadisplay p span.uat7X  {display: block; background: #000000;}
.win.ff3_0 div#uadisplay p span.uat7  {display: block; background: #000000;}
.win.ff3_5 div#uadisplay p span.uat701  {display: block; background: #000000;}
.win.ff3_6 div#uadisplay p span.uat702  {display: block; background: #000000;}
.win.ff3_7 div#uadisplay p span.uat703  {display: block; background: #000000;}
.win.ff4_0 div#uadisplay p span.uat704  {display: block; background: #000000;}
.win.ff5_0 div#uadisplay p span.uat705  {display: block; background: #000000;}
.win.ff6_0 div#uadisplay p span.uat706  {display: block; background: #000000;}
.win.ff7_0 div#uadisplay p span.uat707  {display: block; background: #000000;}
.win.ff8_0 div#uadisplay p span.uat708  {display: block; background: #000000;}
.win.ff9_0 div#uadisplay p span.uat709  {display: block; background: #000000;}
.win.ff10_0 div#uadisplay p span.uat710  {display: block; background: #000000;}
.mac.ff div#uadisplay p span.uat8X  {display: block; background: #000000;}
.mac.ff3_0 div#uadisplay p span.uat8  {display: block; background: #000000;}
.mac.ff3_5 div#uadisplay p span.uat801  {display: block; background: #000000;}
.mac.ff3_6 div#uadisplay p span.uat802  {display: block; background: #000000;}
.mac.ff3_7 div#uadisplay p span.uat803  {display: block; background: #000000;}
.mac.ff4_0 div#uadisplay p span.uat804  {display: block; background: #000000;}
.mac.ff5_0 div#uadisplay p span.uat805  {display: block; background: #000000;}
.mac.ff6_0 div#uadisplay p span.uat806  {display: block; background: #000000;}
.mac.ff7_0 div#uadisplay p span.uat807  {display: block; background: #000000;}
.mac.ff8_0 div#uadisplay p span.uat808  {display: block; background: #000000;}
.mac.ff9_0 div#uadisplay p span.uat809  {display: block; background: #000000;}
.mac.ff10_0 div#uadisplay p span.uat810  {display: block; background: #000000;}
.mac.cam div#uadisplay p span.uat10  {display: block; background: #000000;}
.win.epic1 div#uadisplay p span.uat101 {display: block; background: #000000;}
.win.doczil div#uadisplay p span.uat12  {display: block; background: #000000;}
.win.kmel div#uadisplay p span.uat13  {display: block; background: #000000;}
.win.net8 div#uadisplay p span.uat14  {display: block; background: #000000;}
.win.net8ie div#uadisplay p span.uat15  {display: block; background: #000000;}
.win.opera9 div#uadisplay p span.uat20  {display: block; background: #000000;}
.win.opera10 div#uadisplay p span.uat21  {display: block; background: #000000;}
.win.opera11 div#uadisplay p span.uat22  {display: block; background: #000000;}
.win.opera7 div#uadisplay p span.uat24 {display: block; background: #000000;}
.win.opera8 div#uadisplay p span.uat25 {display: block; background: #000000;}
.win.ie.opera8 div#uadisplay p span.uat26 {display: block; background: #000000;}
.win.moz.opera8 div#uadisplay p span.uat27 {display: block; background: #000000;}
.win.ie.opera9 div#uadisplay p span.uat28 {display: block; background: #000000;}
.win.ff.opera9 div#uadisplay p span.uat29 {display: block; background: #000000;}
.win.opera div#uadisplay p span.uat2X  {display: block; background: #000000;}
.win.ie5 div#uadisplay p span.uat30  {display: block; background: #000000;}
.win.ie6 div#uadisplay p span.uat31  {display: block; background: #000000;}
.win.ie7 div#uadisplay p span.uat32  {display: block; background: #000000;}
.win.ie8 div#uadisplay p span.uat33  {display: block; background: #000000;}
.linux.konqueror3 div#uadisplay p span.uat50  {display: block; background: #000000;}
.linux.konqueror4 div#uadisplay p span.uat51  {display: block; background: #000000;}
.mac.webkit div#uadisplay p span.uat60  {display: block; background: #000000;}
.win.webkit div#uadisplay p span.uat61  {display: block; background: #000000;}
.mac.safari3 div#uadisplay p span.uat62  {display: block; background: #000000;}
.mac.safari4 div#uadisplay p span.uat63  {display: block; background: #000000;}
.ipad.webkit div#uadisplay p span.uat65  {display: block; background: #000000;}
.iphone.webkit div#uadisplay p span.uat66 {display: block; background: #000000;}
.win.chrome div#uadisplay p span.uat70X  {display: block; background: #000000;}
.win.chrome2 div#uadisplay p span.uat70  {display: block; background: #000000;}
.win.chrome4 div#uadisplay p span.uat71  {display: block; background: #000000;}
.win.chrome9 div#uadisplay p span.uat74  {display: block; background: #000000;}
.win.chrome10 div#uadisplay p span.uat741  {display: block; background: #000000;}
.win.iron4 div#uadisplay p span.uat75  {display: block; background: #000000;}
.win.iron6 div#uadisplay p span.uat751  {display: block; background: #000000;}

.xxie6 div#gb a:hover span {z-index: 100; background: red;}
.ie5 div#uadisplay {z-index: -1;}
.ie6 div#uadisplay {z-index: -1;}
.ie7 div#uadisplay {z-index: -1;}


.curvo {
  behavior:url(css/border-radius.htc);
  border-radius: 10px;
}

.curvo {
  behavior:url(css/border-radius.htc);
  border-radius: 7px;
}



/* Hack for sitemap - moz, seamonkey  - required for moz prior to FF3, bug 24998 background image spills over radius borders */
.gecko  .sc6 {background: url(../images/bsm520.jpg);}

/* Hacks for Safari - must remain at end of style-sheet  - superceded by Browser selector bits  */
/*div#links a:hover span {top: 440px;}   /*  sets for Safari  */                
/* #sm a, #sm a:visited {margin: 0.4em;}
#sm a:hover span {left:-0.4em;} 
/* Safari will ignore these following lines so values for FF, etc can be reset */
/* div#links a:hover span {top: 430px;#}    /* resets for FF, etc - Safari ignores  */               
/* #sm a, #sm a:visited {margin: 0.3em;}
#sm a:hover span {left:-0.3em;} */

/* CSSPlay stuff  */

.playbox img {border:1px solid #000; margin:5px;}

.lightbox {width:100%; height:100%; display:none; position:fixed; left:0; top:0; z-index:1000; padding:30px 0 0 0; font-family:arial, sans-serif;}
.lightbox .light {width:100%; height:100%; position:fixed; z-index:-1; top:0; left:0; background:#000; opacity:0.5; filter: alpha(opacity=50);
 text-align:center;}
/* this is for IE6 . If you want to have the lightbox scroll with the page in ALL browsers then remove the * html */
* html .lightbox {position:absolute;}
* html .lightbox .light {position:absolute; height:5000px;}

.lightbox .box {width:700px; background:#000; border:10px solid #fff; border-width:10px; margin:0 auto; padding:10px 10px 20px 10px; position:relative; overflow:hidden;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.lightbox .box img {display:block; margin:0 auto; position:relative;}
.lightbox .box p {width:700px; padding:20px 0; margin:0; color:#fff; text-align:left; font-size:12px;}
.lightbox .functions {position:absolute; bottom:0; left:0; height:30px; width:720px; background:#fff; text-align:center;}
.lightbox .box a {color:#000; font-weight:bold; font-size:25px; text-decoration:none; text-align:center; font-family:"times new roman", serif; padding:0 20px;}
.lightbox .box a.closebox:hover {color:#f00;}
.lightbox .previous:hover,
.lightbox .next:hover {color:#080;}

.lightbox .box2 {width:500px; background:#444; border:10px solid #fff; margin:0 auto; padding:10px; position:relative;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.lightbox .box2 h3 {color:#fff; font-size:22px; padding:10px 0; margin:0;}
.lightbox .box2 p {width:500px; padding:5px 0; margin:0; color:#fff; text-align:left; font-size:12px; line-height:18px;}
.lightbox .box2 a {color:#fc0;}
.lightbox .box2 a:hover {color:#ff0; text-decoration:none;}
.lightbox .box2 a.closebox {display:block; width:25px; height:30px; background:#444; color:#fff; font-weight:bold; font-size:26px; text-decoration:none; text-align:center; position:absolute; right:-1px; bottom:-1px; border:1px solid #fff;}
.lightbox .box2 a.closebox:hover {color:#f00;}

@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% { 
        opacity:100;
    }
}

#p001:target {display:block;}
#p002:target {display:block;}
#p003:target {display:block;}
#p004:target {display:block;}
#p005:target {display:block;}
#p006:target {display:block;}
#p007:target {display:block;}

#p001:target .box img,
#p002:target .box img,
#p003:target .box img,
#p004:target .box img,
#p005:target .box img,
#p006:target .box img {
    -webkit-animation-name: fadeIn; 
    -webkit-animation-duration: 1.5s; 
}


/*  Font Stuff    */

@font-face {
    font-family: 'ProclamateLight';
    src: url('../fonts/proclamate/proclamate_light-webfont.eot');
    src: url('../fonts/proclamate/proclamate_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proclamate/proclamate_light-webfont.woff') format('woff'),
         url('../fonts/proclamate/proclamate_light-webfont.ttf') format('truetype'),
         url('../fonts/proclamate/proclamate_light-webfont.svg#ProclamateLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BloodyNormal';
    src: url('../fonts/bloody/BLOODY-webfont.eot');
    src: url('../fonts/bloody/BLOODY-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bloody/BLOODY-webfont.woff') format('woff'),
         url('../fonts/bloody/BLOODY-webfont.ttf') format('truetype'),
         url('../fonts/bloody/BLOODY-webfont.svg#BloodyNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AngelinaRegular';
    src: url('../fonts/angelina/angelina-webfont.eot');
    src: url('../fonts/angelina/angelina-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/angelina/angelina-webfont.woff') format('woff'),
         url('../fonts/angelina/angelina-webfont.ttf') format('truetype'),
         url('../fonts/angelina/angelina-webfont.svg#AngelinaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.sbInput {
    width: 30px;
    padding: 2px;
}

.buttPad {
    padding: 5px;
}

div#homepano {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.homepano {
    position: relative;
    width: 100%;
}



div#grid-1 {
    position: fixed;
    left: 0px;
    border: 1px solid red;
    width: 140px;
}

div#grid-2 {
    position: relative;
    border: 1px solid green;
    width: 80%;
    left: 140px;
    width: -webkit-calc(100% - 220px);
    width: -moz-calc(100% - 220px);
    width: calc(100% - 220px);        
}

div#grid-3 {
    position: fixed;
    top: 0px;
    right: 0px;
    border: 2px solid blue;    
    width: 80px;
    height: 2000px;
}



/* *************************  DEV STUFF  ***************************  */


#menug1 {
  display: block;
  position: relative;
  padding: 5px;
  margin: 1em;   
  border: 0px solid green;
  width: 2em;
  height: 20em;
  }
#menug1 li {
  list-style-type: none;
  margin: 0 0 0 0;
  }
#menug1 a, #menug1 a:visited {
  display: block;
  width: 6em;
  height: 4em;
  border: 1px solid #456789;
  font-family: verdana, sans-serif;
  font-size: 0.5em;
  text-align: center;
  text-decoration: none;
  background: #000000; 
  color: #eee; 
  padding: 0.25em;
  }
#menug1 a span {
  display: none;
  }
#menug1 a:hover {
  background: #000000;
  color: #808;
  border: 1px solid red;
}
#menug1 a:hover span {
  display: block;
  text-align: left;
  position: absolute; 
  font-size: 1.4em;
  left: 14em; 
  top: 1em; 
  padding: 5px; 
  width: 37em;
  height: 27em;
  background-color: #000000;
  color: #DEB887; 
  border: 1px solid #FFD700;
  float: left;
               -webkit-border-radius: 10px;
               -moz-border-radius: 10px;
               border-radius: 10px;
  }
#menug1 xa:hover span:first-line {
  font-weight: bold; 
  font-size: 1.2em;
  color: #006400;
  background: red;
  }
#menug1 a:hover span.s1 {
    position: relative;
    height: 10px;
    top: 0px;
    left: 0em;
    width: 240px;
    color: #006400;
    border: none;
}
 #menug1 a:hover span.s2{
    position: relative;
    height: 0px;
    top: 0px;
    left: 0px;
    width: 240px;
    border: none;
}
#menug1 a:hover span.s3 {
    position: relative;
    height: 50px;
    top: -40px;
    left: 20em;
    border: none;
}

#menug1 img {
  border: 1px solid #000; 
  float: left; 
  margin-top: 0px;
  padding: 5px;
  }

#menu2g1 {
  display:block;
  position:relative;
  padding:5px;
  margin:6em;   
  margin-top: -21.6em;
  border:0px solid green;
  width: 16em;
  height: 20em;
  }
#menu2g1 li {
  list-style-type:none;
  margin:0 0 0 0;
  }
#menu2g1 a, #menu2g1 a:visited {
  display:block;
  width:6em;
  height: 4em;
  border:1px solid #456789;
  font-family:verdana, sans-serif;
  font-size:0.5em;
  text-align:center;
  text-decoration:none;
  background:#000000; 
  color:#eee; 
  padding:0.25em;
  }
#menu2g1 a span {
  display:none;
  }
#menu2g1 a:hover {
  background:#000000;
  color:#808;
  border:1px solid red;
}
#menu2g1 a:hover span {
  display:block;
  text-align:left;
  position: static; 
  font-size:1.2em;
  left:16em; 
  margin-top:-10em; 
  padding:0.5em; 
  width:40em;
  height:20em;
  background-color:#000000;
  color:#DEB887; 
  border:1px solid #FFD700;
  }
#menu2g1 a:hover span:first-line {
  font-weight:bold; 
  font-size:1.2em;
  color:#006400;
  }
#menu2g1 img {
  border:1px solid #000; 
  float:left; 
  margin:0.25em 1em 0.5em 0em;
  }