/* Sets box sizing: width = border + padding + element   */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Flex positions footer at page bottom regardless of content height */
form { display:flex; min-height:100vh; flex-direction:column;
        background-image:url(../pix/layout16/surface.jpg);
        font-family: Verdana; font-size:12pt; position:relative; }
p { padding:.3rem 0; }
    

/*-- Popup --------------------------------------------*/
/*-- z-index: 
	999 #IG-Logo img
	998 header span
        header
    998 #IG-Menu
	997 #IG-Nav ul.Tabs 
	995 #IG-Nav 
	996 #IG-Nav div.Tabbed 
	  1 #IG-Mask
	  0 #IG-Nav div.Panel
--*/
#IG-Nav { position:absolute; z-index:985;
        transition: transform 0.3s;
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        top:0px; left:0;  
        width:400px; height:590px;
        overflow:auto;
        background-color: #efefef; 
        box-shadow: inset 0 20px 20px -20px rgba(119, 119, 119, 0.33);
        /*border:1px solid #666666;*/
        padding-top:16px;
}
#IG-Nav.Visible { transform: translateY(0); -webkit-transform: translateY(0); }

/*-- Tabs --*/
#IG-Nav ul.Tabs { position:absolute; z-index:987; top:0px; left:0px;  height:100%; margin:0; padding-top:8px; border-right:1px dotted #cccccc; background-color:#e1e1e1; text-align:center; color:#666666; font-size:.8rem;  }
#IG-Nav ul.Tabs li { display:block; cursor:pointer; width:60px; height:72px; padding-top:12px; }
#IG-Nav ul.Tabs li i {  text-align:center; font-size:2rem; color:#666666; }
#IG-Nav ul.Tabs li.Tabbed, #IG-Nav ul.Tabs li.Tabbed i { color:#b9c774; }  

/*-- Panels --*/
/*-- Link color: #275B8A;  Green: #b9c774; */
#IG-Nav div.Panel { position:absolute;  top:0px; left:0px; width:100%; padding-left:60px;  opacity:0; z-index:0; transition: all linear 0.1s;  color:#666666;   }
#IG-Nav div.Tabbed { opacity:1; z-index:986; }
#IG-Nav div.Panel ul { margin:0; padding:0; list-style:none; }
#IG-Nav div.Panel ul li { font-size:1.1rem; padding:12px 0 12px 18px; margin:0; border-top:1px dotted #cccccc;   }
#IG-Nav div.Panel ul li:last-child { border-bottom:1px dotted #cccccc; }
#IG-Nav div.Panel ul li p { font-size:.9rem; /*padding-left:12px;*/ }
#IG-Nav div.Panel a { color: #666666; text-decoration:none; border:none; }
#IG-Nav div.Panel h5 { font-family:'Arvo'; font-size:1.2rem; text-align:center; padding:8px 0 8px 0; color:#696969; }
#IG-Nav div.Panel input { border-color:#cccccc; padding:4px 8px; border-style:solid; font-size:1.2rem; border-radius:10px; }
#IG-Nav div.Panel input:focus { outline:none; background-color:#ffffff; }

/* -webkit-flex is needed for ios8 browsers only */
#IG-Nav div.Panel ul li.Buttons { display:-webkit-flex; display:flex; text-align:center; margin:0; margin-left:-16px; }
#IG-Nav div.Panel ul li.Buttons a  { -webkit-flex: 1; flex: 1;  vertical-align:top; font-size:.8rem; line-height:.8rem; text-align:center;  }
#IG-Nav div.Panel ul li.Buttons i  { color:#666666; }

/* Google Custom Search Logo */
#IG-Custom-Search { background-image: url("http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif"); background-repeat:no-repeat; background-position:left 4px; height:30px; padding:8px 0 0 57px; font-family:Arial; font-size:.65rem; }

/*-- Background mask --*/
#IG-Mask { position:fixed; z-index:1; top:50px; left:0; overflow:hidden; width:0; height:0; background-color:#000; opacity:0; transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;}
#IG-Mask.Visible { width:100%; height:100%; opacity:0.7; transition: opacity 0.3s; }

/*-- Header -------------------------------------------*/
header { 
 justify-content: center;   
 position:relative; display:flex; 
 z-index: 997;
 
 width:100%; max-width:1024px; margin:0 auto; color:#666666; 
 background-image: url(../pix/layout16/nav-bg.png); background-repeat:repeat-x; 


} /* max-width = iPad horiz */
header span { align-self:center;   
    justify-content: center;
    position:relative; z-index:998; display: inline-flex;  white-space:nowrap;  padding-right:16px; 
}
header span a { color:#666666; text-decoration:none; border:none;  }
header span a:hover { text-decoration:none; border:none; }
#IG-Logo { flex-grow:1; height:50px;  position:relative; overflow:visible; }
#IG-Logo img { z-index:999;  position:absolute; top:4px; left:0; /*opacity:0.7;*/ }
/* HeadBg is only used to display full-width nav background image */
#IG-HeadBg { background-color:#efefef; background-image: url(../pix/layout16/nav-bg.png); background-repeat:repeat-x; height:60px; position:absolute; top:0; left:0; width:100%; }

#IG-Peep { font-size:.9rem; white-space:nowrap; max-width:300px; text-overflow:ellipsis; overflow:hidden; }
#IG-Peep-Av { padding-right:4px;  }

#IG-Alert { padding:0 8px; font-size:1.3rem; }
#IG-Alert a { display:inline-block; padding:0 12px;}

/*-- Content ------------------------------------------*/
main { position:relative; flex: 1; width:100%; max-width:1024px; margin:0 auto; padding-top:16px;  }
#IG-Content { display:flex; margin-top:8px; } /* Contains article and skyscraper ad */
#IG-Page, article { display:inline-block;  vertical-align:top; max-width:716px; }
article { width:100%; background-color:#ffffff; padding:16px; border:1px solid #cccccc; /*border-radius:24px;*/  } 

#IG-Page {   }

/*-- Footer -------------------------------------------*/
footer { border-top:1px solid #ededed; background-color:#cccccc; text-align:center; color:#666666; font-size:.8rem; box-shadow: inset 0 20px 20px -20px rgba(119, 119, 119, 0.33); margin-top:16px; padding-bottom:16px; }
footer a { display:inline-block; margin:8px; color:#666666; text-decoration:none; border:none; }

/*-- Ads --*/
#IG-Sky160 { display:inline-block; margin-left:8px; max-width:160px; }
/*#IG-Banner {  margin-bottom:16px;    }
div.G-Banner { max-width:728px; height:90px; background-color:aqua;  opacity:.25; text-align:center; display:inline-block; vertical-align:top;}
div.G-Button { width:120px; height:90px; background-color:aqua; opacity:.25; text-align:center; display:inline-block; vertical-align:top; margin-left:8px;}*/


/*-- Menu Icon --------------------------------------------*/
/* Credit: callmenick.com */
/* #IG-Menu { cursor:pointer; padding:2px 10px 2px 10px; font-size:1.5rem; } */
#IG-Menu {
  z-index:998; display:inline-flex; position: relative; overflow: hidden;
  margin: 0; padding: 0;
  width: 50px; height: 50px;
  font-size: 0; text-indent: -9999px;
  /*appearance: none;*/ box-shadow: none; border-radius: 0; border: none;
  cursor: pointer;
  background-image: url(../pix/layout16/nav-bg.png); background-repeat:repeat-x;  
}
#IG-Menu:focus { outline: none; }

/*-- Menu bars --*/
#IG-Menu b { /* Center menu bar */
  display: block; position: absolute;
  top: 23px; /* top of center bar */
  left: 14px; right: 14px; height: 3px;
  background-color: #666666;
  transition: background 0s 0.3s;
}

#IG-Menu b::before, #IG-Menu b::after { /* Top/bottom menu bars */
  position: absolute; display: block;
  left: 0; width: 100%; height: 3px;
  background-color: #666666;
  content: "";
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

#IG-Menu b::before { /* Top menu bar */ 
  top: -7px; transition-property: top, transform; }

#IG-Menu b::after { /* Bottom menu bar */
  bottom: -7px; transition-property: bottom, transform; }

/*-- Menu animation --*/
#IG-Menu.Visible b { background: none; } /* Hide middle bar */
#IG-Menu.Visible b::before { top: 0; transform: rotate(45deg); } /* Rotate top bar */
#IG-Menu.Visible b::after  { bottom: 0; transform: rotate(-45deg); } /* Rotate bottom bar */
#IG-Menu.Visible b::before, #IG-Menu.Visible b::after { transition-delay: 0s, 0.3s; }

/*-- Alert badge --*/
b.Badge {
    display:inline-block; opacity:.8;
	background: #ff3019; background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */ background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
    border: 2px solid white; border-radius: 12px;
    box-shadow: 1px 1px 1px #999999;
    color: #ffffff;
    font: normal .8rem Helvetica, Verdana, Tahoma;
    text-align: center;
    padding: 2px 6px 2px 6px; vertical-align:middle;
}

/*-----------------------------------------------------*/
/*-- Responsive ---------------------------------------*/
/*-----------------------------------------------------*/
@media (height:667px) {
    #IG-Nav { height: 617px; }  
}
@media screen and (max-width:815px) {
    #IG-Sky160 { display:none; }
}
@media screen and (max-width: 727px) {
    div.G-Leaderboard { width:100%; }
}
@media screen and (max-width: 665px) { 
        #IG-Peep, #IG-Peep-Av, .WideOnly { display:none; }
        #IG-Nav { width:100%; background-color:#efefef; }
} 
@media screen and (max-width : 375px) {
    #IG-Logo img { width:190px; padding-top:6px; }
}
@media screen and (max-width:320px) {
	 #IG-Logo img { width:160px; padding-top:8px; }
}