Can anyone explain why the content below the "content" class in each column is faded? I would like only the active column to be visible (works somewhat) and the non-active columns to be faded.
Live Test Version: http://jsfiddle.net/Gc68V/
HTML Code:
<div id="container">
<div id="header-bar">
<ul>
<li>
<a href="gallery.html">Gallery</a>
</li>
<li>
<p>| Dare.me |</p>
</li>
<li>
<a href="leaderboard.html">Leaderboard</a>
</li>
</ul>
</div><!--header-bar-->
<div class="columns">
<div id="left-column">
<p class="title left">Easy</p>
<p class="content">Feeling like a whimp?<br/>
Take one of our easy dares.</p>
<div class="circle-text"><div><a href="php/easy.php">Click <span class="bold">Here</span> For An Easy Dare</a></div></div>
<div id="test"><p>Test Text</p></div>
</div><!--left-column-->
<div id="centre-column">
<p class="title centre">Medium</p>
<p class="content">Feeling adventurous<br /> are we?</p>
<div class="circle-text"><div><a href="php/medium.php">Click <span class="bold">Here</span> For A Medium Dare</a></div></div>
</div><!--centre-column-->
<div id="right-column">
<p class="title right">Hard</p>
<p class="content">Feeling lucky?<br /> prepare yourself!</p>
<div class="circle-text"><div><a href="php/hard.php">Click <span class="bold">Here</span> For A Hard Dare</a></div></div>
</div><!--right-column-->
</div><!--columns-->
</div><!--container-->
Here's the CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Fonts */
@font-face {
font-family: 'code_boldregular';
src: url('../fonts/code_bold-webfont.eot');
src: url('../fonts/code_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts...