.puppy-logo:before {
    background-image: url('puppylogo96.png');
    background-size: 32px 32px;
    display: inline-block;
    width: 32px; 
    height: 32px;
    content:"";
}
#boxbar {
	float: right;
	height: 32px;
	margin-left: 1em;
}
#boxbar ul {
	list-style: none;
}
#boxbar ul li {
	float: left;
}
li.nav {
    width: 84px;
}
li.nav:hover {
    background: #f5f5f5;
}
li.nav a {
    display:block;
    text-decoration:none;
}
.nav-icons {
	height: 24px;
	width: 24px;
	margin-left: 30px;
}
noscript p {
	color:#FF518E
	border: 1px solid;
	padding: 1em;
	text-align: center;
	font-size: 0.8em;
}
.puppy-bar-bg { 
	margin-top: 3em;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding-top: 2em;
	padding-bottom: 1.5em;
	text-align: center;
	font-size: 0.8em;
}
/*=================POPUP=======================================================
 */
a.hideDisplay{
	position: relative; /* This makes everything work.*/
	/* Allows you to layer overlapping elements. */
	z-index: 20; 
	color: #000;
	text-decoration: none;
}
a.hideDisplay:hover{
	/* Allows you to layer overlapping elements. */
	cursor: help;
	z-index: 30; 
}
a.hideDisplay span.showDisplayOnHover {
	display: none;
}
/* This will only display itself when the
* user hovers the mouse over the anchor. */
a.hideDisplay:hover span.showDisplayOnHover{ 
	display: block;
	position: absolute;
	/* This sets the height of a line of text in the box. */
	line-height: 20px;
	/* These position the box where it needs to go. */
	top: 5px; 
	margin-left: auto;
	margin-right: auto;
	/* These adjust the size of the box when it appears. */
	width: 500px;
	padding: 10px;
	border: 1px solid #666666;
	background:  rgba(78,78,78,0.85);
	color: #FFFFEA;
	text-align: center;
}
@media all and (max-width: 600px) {
th.nav {
    width: 36px;
}
li.nav {
    width: 44px;
}
.nav-icons {
	margin-left: 10px;
}
a.hideDisplay:hover span.showDisplayOnHover{
	width: 300px;
}
}