Innovative Activities Grant Application Confirmation

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">
<fieldset>
    <legend>General Information</legend>
    <div class="row-fluid">
        <div class="span3">
            <p class="field-header">Project Title</p>
        </div>
        <div class="span9">
            <p>Chemistry In Motion</p>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            <p class="field-header">Project Goal</p>
        </div>
        <div class="span9">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam orci eget lorem condimentum luctus et sed eros. Maecenas laoreet mattis metus nec mattis. Vestibulum et purus quis lectus interdum interdum eu quis ipsum. In hac habitasse platea dictumst.</p>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            <p class="field-header">Number of Faculty Members Participating</p>
        </div>
        <div class="span9">
            <p>5</p>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            <p class="field-header">Number of Chapter Members Participating</p>
        </div>
        <div class="span9">
            <p>14</p>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            <p class="field-header">Student Director</p>
        </div>
        <div class="span9">
            <p>John Doe
                <br/>Jane Doe</p>
        </div>
    </div>
</fieldset>
<fieldset>
    <legend>Proposal</legend>filename.docx (99kb) Uploaded 10/14 11:57 PM &nbsp &nbsp<a><img src="openIcon.png"/> Open</a>

</fieldset>
<fieldset>
    <legend>Budget Information</legend>
    <div class="row-fluid">
        <div class="span3">
            <p class="field-header">Budget</p>
        </div>
       ...

CSS

.field-header {
    font-weight: bold;
}
th {
    font-weight: bold;
    min-width:10em;
}
table {
    width: 100%;
}
.grayHeaders th {
    background-color: #CCC;
}
body {
    /*font-family: helvetica;*/
}
fieldset {
    border-radius: 10px;
    margin: 1em;
    padding: 1.0em 2.0em 1.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;
}