[[?
  [[?xpersonalx::x[[S334:pg]]x::T::]]
  [[?xfr_personalx::x[[S334:page_type]]x::T::]]
::T::
  <div id="scroll-container">
    <style type="text/css">

#scroll-container {
	padding: 50 20 20 0;
}


.vScroll {
    background-color: #ffffff;
    border: 0;
    margin: 10px;
    padding: 10 10 200 10;
    width: 201px;
    border:3px solid #4899d2;
}

.vScroll .title {
    font-family: verdana;
    font-weight: bold;
    margin: 0;
    text-align: left;
    color: #4899d2;
    font-size: 11pt;
}

.vScroll .scrollContent {
    background-color: #ffffff;
    height: 212px;
    margin-top: 10px;
    padding: 10px;
}

.vScroll p {
    color: #4899d2;
    font-weight: bold;
    font-size: 13pt;
}

#ppBadges {
   position: absolute; 
   top: -50px; 
   left: 10px; 
   width:550px; 
   height: 105px;
   background: #fff;
   border: 4pt solid #4899d2;
   padding: 2px;
   text-align: center;}
   
#ppBadges p {
   color: #1c4072;
   font-size:12px;
   font-family:Georgia, "Times New Roman", Times, serif;
   
   margin:0;
   line-height:1.6em;}
  
.caption p, .caption {font-size: 10px; font-weight: bold; font-style: italic; color: #A74728; margin: 10px;}

#badgestest {border: 2pt solid #000;}

.trPage .sideBar object {
    float: left;

    width: 335px;
}
.TrAchievementBadgeIconListLarge {display:none;}
.appArea {
	width:890px;
}
</style>
<style type="text/css">
 button.prev {
	 display:block; 
	 border:none; 
	 position: absolute;
    top: 3px;
    left: 5px;
    width: 28px;
    height: 68px;
    cursor: pointer;
    background: transparent url(../badges/images/left_border_states_arrows.gif) no-repeat -28px 0;
	z-index:999;}
 button.prev:hover {background-position:0px 0;}
 button.next {
	display:block;
	border:none;
	position: absolute;
    top: 3px;
    right: 5px;
    width: 28px;
    height: 68px;
    cursor: pointer;
    background: transparent url(../badges/images/right_border_states_arrows.gif) no-repeat -28px 0;
    z-index:999;}
 button.next:hover {background-position:0px 0;}
 div.jCarouselLite { left:20px !important; width:510px !important;}
#jCarouselLiteDemo div.primaryContent {position:absolute; left:0px; top:25px;}
@-moz-document url-prefix() { #jCarouselLiteDemo div.primaryContent { top:0px; } }
td#FBHolder { height:150px; padding:500px 0px 180px 110px;}
</style>

<!--[if IE]>
 <style type="text/css">
   #jCarouselLiteDemo div.primaryContent {position:absolute; left:0px;top:20px;}
   td#FBHolder { height:150; padding:0px 0px 80px 110px;}
 </style>
<![endif]-->

<script src="../badges/css_and_js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../badges/css_and_js/jcarousellite_1.0.1.min.js" type="text/javascript"></script>
<script src="../badges/css_and_js/jquery.mousewheel.js" type="text/javascript"></script>
<link media="screen" href="../badges/css_and_js/carousellitestyle.css" type="text/css" rel="stylesheet" />

<div style="position: relative; top: 0px; left: 0px;">
<div id="ppBadges">
<p>Badges I've earned. Help me earn more!</p>
<div id="content">
<div id="jCarouselLiteDemo" class="cEnd">
<div class="primaryContent">
<div id="demo" class="cEnd tabs-container">
<div class="carousel default"><button class="prev"></button>
<div class="jCarouselLite">
<ul>
[[S51:reus_badgeconditionals]]
</ul>
</div>
<button class="next"></button>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[

	$(".default .jCarouselLite").jCarouselLite({
        btnNext: ".default .next",
        btnPrev: ".default .prev",
				mouseWheel:true
    });										 

// ] ]></script>
    </div>
<div style="height:75px"></div>
::]]