Глюкъ Виртуален

"Во-1 никогда не используй отвертку"
"Во-2 никогда не используй молоток"
"В-3 никогда..."
"В-4 всегда..."
Настолько категоричные советы обычно приходят от тех, кто никогда не использует мозг. Да еще и путает transparent с opacity ;)

Замените у себя:

.spoiler .text {
position: absolute;
bottom: -5px;
		font-family:"gotham_probold", sans-serif;
		font-size: 16px;
		text-transform: uppercase;
		background: #def;
		padding: 10px;
		color: #9c9c9c;
		border-bottom: 1px solid #f0f0f0;
		clear: both;
opacity: 0.6;
	}

Это то что вы хотели?
И второе: нестандартные шрифты нужно сначала откуда-то загрузить, но с этим вы справитесь самостоятельно, если погуглите.

Наверное где-то здесь:

<header>
            <nav class="content-nav">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#somestuff">Some stuff</a></li>
                    <li><a href="#querylib">Query lib</a></li>
                    <li><a href="#Embeds">Embeds</a></li>
                    <li><a href="#Inspiration">Inspiration</a></li>
                    <li><a href="#contact">contact</a></li>
                    <li><a href="#about">about</a></li>
                </ul>  
            </nav>
        </header>

header {
height: 50px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
margin-bottom: 40px;
}

.content-nav ul {
  padding: 0;
}

.content-nav ul li {
float: left;
list-style-type: none;
}

.content-nav ul li a {
display: block;
text-decoration: none;
margin: 0 10px;
text-transform: uppercase;
color: #303030;
font-family: "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
font-size: 0.7em;
letter-spacing: 1px;
line-height: 442%;
opacity: .5;
}

.content-nav ul li a:hover {
  border-bottom:2px solid black;
  opacity: 1;
}

.content-nav ul li a:active {
  font-weight: bold;
  letter-spacing: 0.5px;
  border-bottom:2px solid black;
  opacity: 1;
}

Если будете менять шрифт, придется подобрать line-height и letter-spacing.

и еще я долго игрался с позиционированием по горизонтали. Каким образом это более практично реализовывать?

Вот уж не знаю. Зависит от задачи.

Слишком агрессивный кэш.
На сервере отключите его совсем, в браузере сделайте так,как в первом комментарии.