/*var faqTop_noshadow = RUZEE.ShadedBorder.create({ corner:8, border:7.8, borderOpacity: 0.8 });
        TO HAVE THE WHOLE FAQ BOX TRANSPARENT I BELIEVE YOU NEED TO USE THE BORDER OPACITY AND SOMEHOW
        FIND THE RIGHT SETTINGS TO HAVE THE BORDER CONNECT WITH THE INSIDE TRANS BG. (i think)
*/
var faqTop_noshadow = RUZEE.ShadedBorder.create({ corner:8, border:1 });
var faqTop = RUZEE.ShadedBorder.create({ corner:8, shadow:24, edges:"tlr"});
var faqBottom = RUZEE.ShadedBorder.create({ corner:8, shadow:24, edges:"blr"});

$(document).ready(function() 
{
    faqTop_noshadow.render($("#faq-box > .faq-title"));
    
    // create clone of faq title because it has a different border style
    $("#faq-box > .faq-title").clone().insertBefore("#faq-box > .faq-content").addClass("faq-title-clone");
    
    // IE needs the containers to be showing to add the corners and shadows corectly
    /*@cc_on
		$("#faq-box > .faq-content, #faq-box > .faq-title-clone").show();
    @*/
    faqTop.render($("#faq-box > .faq-title-clone"));
    faqBottom.render($("#faq-box > .faq-content"));
	
	$("#faq-box > .faq-content, #faq-box > .faq-title-clone").hide();
    
    $("#faq-box").hover(function () 
		{
			showAnswer();
		}, function ()
		{
			hideAnswer();
		}
    );
});

function showAnswer() 
{
    $("#faq-box > .faq-title:first").hide();
    $("#faq-box > .faq-content, #faq-box > .faq-title-clone").show();
}

function hideAnswer() 
{
    $("#faq-box > .faq-content, #faq-box > .faq-title-clone").hide();
    $("#faq-box > .faq-title:first").show();
}