chapter info table

by Stephen Lujan

HTML

<link rel="stylesheet" href="//assets.acs.org/v2.0/acs-bootstrap/css/acs-bootstrap.css">
<link rel="stylesheet" href="//assets.acs.org/v2.0/cq5/css/main.css">
<link rel="stylesheet" href="//assets.acs.org/v2.0/cq5/css/responsive.css">
<form action="">
    <fieldset>
        <legend>Chapter Info</legend>
        <div class="row-fluid">
            <div class="span6">ChapterName
                <br/>chapterAddress
                <br/>
                <br/>
                <table>
                    <tr>
                        <th>Date Chartered</th>
                        <td>5/1/1969</td>
                    </tr>
                    <tr>
                        <th>Status</th>
                        <td>active</td>
                    </tr>
                    <tr>
                        <td>
                            <br/>
                        </td>
                    </tr>
                    <tr>
                        <th>Academic Year</th>
                        <td>2012-2013</td>
                    </tr>
                    <tr>
                        <th>Report Status</th>
                        <td>Pending</td>
                    </tr>
                </table>
            </div>
            <div class="span6">
                <table class="grayHeaders">
                    <tr>
                        <th colspan="2">Chapter Officers</th>
                        <tr>
                            <td>Co-President</td>
                            <td>Christine Cheng</td>
                        </tr>
                        <tr>
                            <td>President</td>
                            <td>Christine Cheng</td>
                        </tr>
                        <tr>
                            <td>Secretary</td>
                            <td>Christine Cheng</td>
                        </tr>
                        <tr>
                            <th colspan="2">Members</th>
                        </tr>
              ...

CSS

th {
    font-weight: bold;
}
table {
    width: 100%;
}
.grayHeaders th {
    background-color: #CCC;
}
body {
    /*font-family: helvetica;*/
}
fieldset {
    border-radius: 10px;
    margin: 1em;
    padding: 2.0em 2.0em 2.0em 2.0em;
    position: relative;
    border: 3px solid #797979;
}
legend {
    position: relative;
    top: -0.5 em;
    color: #fff;
    background-color: #2A6FBA;
    margin: 0;
    padding: 0.5em 1.0em;
    /*border: 1px solid black;*/
    border-radius: 10px;
    box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .3), inset 0 5px 5px rgba(0, 0, 0, .3), inset 5px 0px 5px rgba(0, 0, 0, .3), inset -5px 0px 5px rgba(0, 0, 0, .3);
    text-shadow: 0px 0px 1px #fff; /*smooth text*/
        /*0.1em 0.1em 0.2em rgba(0, 0, 0, .3);*/
    font-weight: bold;
    letter-spacing:0.05em;
    width: auto;
    min-width: 10em;
}

.sectionFooter {
    font-size: 0.9em;
}