National Meeting Travel Grant Application

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>
    <fieldset>
        <legend>Application</legend>
        <p>This grant requires at least one student from your chapter to be presenting a research or chapter activities poster. Please enter at least one of the student's names and poster numbers. -CONFIGURABLE</p>
        <div class="row-fluid">
            <div class="span3">
                <label for="presentingStudent" class="require">Presenting Student</label>
            </div>
            <div class="span9">
                <button id="presentingStudent" class="btn">Search</button>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span3">
                <label for="" class="require">Abstract Number</label>
            </div>
            <div class="span9">
                <input type="text"></input>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span3">
                <label for="" class="require">Abstract Title</label>
            </div>
            <div class="span9">
                <input type="text"></input>
            </div>
        </div>
        <hr/>
        <div class="row-fluid">
            <div class="span3">
                <label for="presentingStudent2" class="">Presenting Student 2</label>
            </div>
            <div class="span9">
                <button id="presentingStudent2" class="btn">Search</button>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span3">
                <label for="" class="">Abstract Number</label>
            </div>
            <div class="span9">
                <input type="text"></input>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span3">
    ...

CSS

textarea {
    width:100%;
}
label.require::after {
    color: #e32;
    content:' *';
    display: inline;
}
.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;
}