eForm Demonstration

by erick

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700"></script>
  <div id="OuterContainer">

    <header>
      <div id="header">
        <div id="CompleteDiv">Complete</div>
        <div id="headerText">eForm Title Here</div>
        <h4>Secondary text or sub heading</h4>
      </div>
    </header>

    <div class="nav-container">
      <div id="buttonBar">
        <div><a href="#">Quest History</a></div>
        <div><a href="#">Form History</a></div>
      </div>
      <div id="buttonBar02">
        <div id="SaveButton"><a href="#">Save<span class="save">%</span></a></div>
        <div><a href="#">Print<span class="print">d</span></a></div>
        <div><a href="#">Close<span class="close">x</span></a></div>
      </div>
    </div>
    <br class="clear" />

    <ul id="PageNav">
      <li><a href="#">Link One</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Number 3</a></li>
      <li><a href="#">No. Four</a></li>
      <li><a href="#">The Last One</a></li>
    </ul>

  </div><!-- /#OuterContainer -->

CSS

@font-face {
 font-family: ModernPics;
 src: url("http://dl.dropbox.com/u/1621719/development/JSFiddle/fonts/modernpics.otf")
}
@media screen {
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url('http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff') format('woff');
}
}
a {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;-ms-transition: all 0.15s ease-in-out;-o-transition: all 0.15s ease-in-out;}

header {background:url('http://dl.dropbox.com/u/1621719/development/JSFiddle/images/backgrounds/whitey.png')}
#header {
  height:115px;
  color:#333;
  background: url('http://dl.dropbox.com/u/1621719/development/JSFiddle/images/research-admin.png') no-repeat right;
}
#header #CompleteDiv {
  position:absolute;
  z-index:2;
  right:20px;
  top:20px;
  font-weight:bold;
  text-transform:uppercase;
  text-shadow:0 0 1px #fff;
  padding:5px 10px;
  border-radius:0.7em;
  background:rgba(255,255,255,0.7);
  
  box-shadow:0 0 10px rgba(0,0,0,0.3);
}
#header #headerText {
  font-family: "Open Sans", sans-serif;
  font-size: 2.5em;
  padding: 10px 0 0 20px;
}
#header h4 {padding:0 0 0 24px;margin:-4px 0 0 0;font-weight:normal;font-size:1.2em}
html, body {
  margin:0;
  padding:0;
  color:#fff;
  font:normal 300 1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  height:100%;
  background: rgb(73,161,229);
  background: -moz-radial-gradient(center, ellipse cover, rgba(73,161,229,1) 3%, rgba(35,89,155,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(3%,rgba(73,161,229,1)), color-stop(100%,rgba(35,89,155,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(73,161,229,1) 3%,rgba(35,89,155,1) 100%);
  background:...