RPG Character Statistics

by Mardonis

HTML

<body>
        <div id="container">
            <h3><strong>Character</strong></h3>
            <div class="border">
                <p>Health:</p>
                <p>Stamina:</p>
                <p>Mana:</p>
                <p>Level:</p>
                <p>Experience:</p>
            </div>
            <h3><strong>Professions</strong></h3>
            <div class="border">
                <p>Mining:</p>
                <p>Skinning:</p>
                <p>Tailoring:</p>
                <p>Blacksmith:</p>
                <p>First-Aid:</p>
            </div>
        </div>
	</body>

CSS

#container{
    width:150px;
    border:1px solid black;
    border-radius:5px;
    background-color:gray;
}

h3{
    text-align:center;
    text-decoration:underline;
    border:1px solid black;
    border-radius:5px;
    padding:3px;
    margin:3px;
    background-color:white;
}

p{
    width:auto;
    background: white;
	border-radius: 5px;
	border: 1px solid black;
	margin: 3px;
	padding: 3px;
	font-size: 8px;
	font-family: Verdana, Arial, Sans-Serif;
    text-align:left;
}

.border{
    border:1px solid black;
    border-radius:5px;
    padding:3px;
    margin:3px;
}

JavaScript

$(document).ready(function(){
    $('#container').draggable();
    $('#container').accordion({collapsible:true, active:false});
    $("p").hover(function () {
        $(this).css({'background-color' : 'orange', 'font-weight' : 'bolder'});
        }, function () {
        var cssObj = {
            'background-color' : '',
            'font-weight' : ''
        };
        $(this).css(cssObj);
    });
});