* {
}
html, body {
height:100%;
}

#wrap {
min-height:100%; 
width:905px; 
margin:-1px auto 0;
background:#D5EAF9;
border:1px solid #000;
border-bottom:0;
}
#content h1 {
padding:40px 80px 0;
}
#content h2, #content p {
padding:15px 80px;
}
/* ---------- Mega Drop Down --------- */
#mega {
list-style:none;
font-weight:bold;
height:2em;
margin:60px -1px 0 0;
}
#mega li {
background:#5E9BD9;
border:1px solid #000;
margin-left:-1px;
float:left;
width:150px;
text-align:center;
position:relative;
}
#mega li:hover {
background:#fff;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
padding:12px 0 1px 0;
margin-top:-12px;
z-index:1; /* shadow above adjacent li */
box-shadow:0 1px 8px #000;
border-radius:6px 6px 0 0;
}
#mega a {
color:#000;
outline:0;
text-decoration:none;
display:block;
line-height:2em;
}
#mega li:hover a { /* hide top shadow on div */
background:#fff;
padding-bottom:10px;
margin-bottom:-10px;
position:relative;
z-index:1;
}
/* ----------- Hide/Show Div ---------- */
#mega div {
position:absolute;
left:-999em;
margin-top:1px;
width:350px;
padding:0 10px 10px;
border:1px solid #000;
border-top:0;
font-weight:normal;
text-align:left;
background:#fff;
}
#mega li:hover div {
left:-1px;top:auto;
box-shadow:0 2px 8px #000;
border-radius:0 0 6px 6px;
}
#mega li.dif:hover div {
left:-221px;
}
/* -------- CSS3 Transform FadeIn ------- */
@-moz-keyframes fadeIn {0%{opacity:.1;}100%{opacity:1;}}
@-webkit-keyframes fadeIn {0%{opacity:.1;}100%{opacity:1;}}
@-ms-keyframes fadeIn {0%{opacity:.1;}100%{opacity:1;}}
@keyframes fadeIn {0%{opacity:.1;}100%{opacity:1;}}
#mega li:hover {
-moz-animation:fadeIn .75s ease-in-out; 
-webkit-animation:fadeIn .75s ease-in-out; 
-o-animation:fadeIn .75s ease-in-out; 
-ms-animation:fadeIn .75s ease-in-out; 
animation:fadeIn .75s ease-in-out; 
}
#mega li:hover div {
-moz-animation:fadeIn .5s ease-in-out; 
-webkit-animation:fadeIn .5s ease-in-out; 
-o-animation:fadeIn .5s ease-in-out; 
-ms-animation:fadeIn .5s ease-in-out; 
animation:fadeIn .5s ease-in-out; 
}
/* --------- Within Div Styles --------- */
#mega div h2 {
font-size:1em;
padding:0 10px;
margin:10px 0 5px 0;
clear:both;
float:left;
width:330px;
}
#mega div p {
float:left;
width:106px;
padding-left:10px;
}
#mega div p a {
text-decoration:underline;
float:left;
clear:left;
line-height:1.4;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}





/* over rides for Bear Pile */ 

    #wrap {
      width: 980px;
      background: transparent;
      height: auto;
      min-height: 0;
      border: none;
      background: url(https://www.bearpile.com/images/menu_bg_30.gif);
      background-position: left top;
      background-repeat: repeat-x;
      height: 30px;
      border-radius: 8px;
      margin-top: 5px;
    }

    #mega {
        padding: 0;
        width: 100%;
        display: table;
        margin: 0;
    }
    #mega li { 
      display: table-cell;
      width: auto;
      float: none;
      background: transparent;
      box-shadow: 0 10px 8px -4px rgba(0, 0, 0, 0.0);
      border: 1px solid rgba(0, 0, 0, 0.0);
      border-bottom: none;
      vertical-align: middle;
      height: 30px;
      padding: 0;
    }
    #mega li table {
      margin: auto;
      font-size: 14px;
      font-weight: bold;
    }
    #mega li:hover, #mega li.active {
      padding: 0 !important;
      margin: 0 !important;
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 -2px 8px -4px rgba(0, 0, 0, 1);
      background: #fdfdfd;
      border-radius: 6px 6px 0 0;
      z-index: 1;
    }
    #mega li:hover a, #mega li.active a {
      padding-bottom: 0;
      margin-bottom: 0;
      background: #fff;
      color: inherit;
    }
    #mega li:hover div {
      box-shadow: 0 2px 8px -4px rgb(0, 0, 0);
      background: #fdfdfd;
    }
    #mega li a {
      display: block;
      vertical-align: middle;
      color: #fff;
      font-family: tahoma;
      font-size: 14px;
    }
    #mega div {
      box-shadow: 0 2px 8px -4px rgb(0, 0, 0);
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-top: none;
      width: 830px;  /* to make more columns */
    }
    #mega div p {
      margin: 0px;
    }
    #mega div h2 {
      color: #000000;
      font-size: 14px;
      background: #ffffff;
      padding-top: 2px;
      padding-bottom: 0px;
      width: 800px;  
      text-transform: uppercase; 
    }
    #mega div a {
      background: #fdfdfd;
      z-index: 1;
      box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 0);
      border-radius: 6px;
      display: block;
      padding: 0px 0px;
      line-height: 1;
      transition: all ease 200ms;
      text-decoration: none !important;
      position: relative;
      top: 0;
    }
    #mega div a:hover {
      box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 1);
      top: -2px;
      background:#eee;
    }