/* @override http://localhost:8081/static/style.css */

/* @group CSS Reset */

/*  Eric Meyer's CSS reset 
    http://meyerweb.com/eric/tools/css/reset/
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* @end */

/* The real stylesheet begins here */

html {
    background-color: #f4eed9;
}

body, body.admin {
    font-family: Georgia, Times, 'Times New Roman', serif;
    width: 960px;
    margin: 32px auto 64px;
}
body.admin {
    margin-top: 64px;
}

h1, h2 {
    font-family: 'Baskerville', 'Palatino Linotype', 'Times New Roman', serif;
    font-weight: normal;
}

h1 {
    font-size: 56px;
}
h2 {
    font-size: 32px;
    font-style: italic;
}
h3 {
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 16px;
}

#header {
    line-height: 1.25;
    overflow: hidden;
    padding-bottom: 32px;
}
#logo {
    width: 240px;
    height: 218px;
    float: left;
    background: url('logo.png') 0px 0px;
}
#header h1, #header h2 {
    float: left;
}
#header h1 {
    padding-top: 48px;
}
#header h2 {
    padding-left: 64px;
}

#navigation {
    float: left;
    width: 240px;
    font-size: 24px;
    margin-right: 64px;
}
#navigation li {
    margin-bottom: 4px;
}
#navigation li a {
    border-left: 12px solid #2b060a;
    display: block;
    padding: 8px 16px;
    text-decoration: none;
}
#navigation li a:hover,
#navigation li a:focus {
    color: #2b060a !important;
}
#navigation li a:active {
    margin-left: 2px;
}
#navigation li.current a {
    background-color: #2b060a;
    color: #fff !important;
    -webkit-border-radius: 0 0 16px 0;
    -moz-border-radius: 0 0 16px 0;
    border-radius: 0 0 16px 0;
}

#content, #footer, #attribution {
    margin-left: 304px;
    font-size: 20px;
    line-height: 1.5;
    color: #2b060a;
}

a:hover, a:focus {
    color: #2b060a !important;
}
a:active {
    text-decoration: none;
}

#content {
    padding-bottom: 64px;
    border-bottom: 2px solid #2b060a;
}

#content p {
    margin-bottom: 20px;
}

#content ul {
    list-style: disc;
    margin: 0 0 20px 20px;
}
#content li {
    margin-bottom: 10px;
}
#content li ul {
    list-style: circle;
}

#footer {
    padding: 32px 0;
    background: #fff;
    width: 656px;
    overflow: auto;
    line-height: 1.25;
    -webkit-border-radius: 0 0 16px 0;
    -moz-border-radius: 0 0 16px 0;
    border-radius: 0 0 16px 0;
}
#footer dt {
    float: left;
    text-align: right;
    width: 40%;
    margin-right: 10%;
    margin-bottom: 10px;
    font-weight: bold;
    color: #000;
}
#footer dd {
    display: block;
    float: left;
    width: 50%;
    margin-bottom: 10px;
}

#documents {
    margin: 0;
    overflow: auto;
}
#documents li {
    list-style: none;
    float: left;
    width: 196px;
    margin-right: 32px;
    margin-bottom: 32px;
}
#documents li:nth-child(3n) {
    margin-right: 0;
}
#documents li a.main {
    position: relative;
    display: block;
    float: left;
    padding: 16px;
    height: 200px;
    width: 164px;
    background: #fff;
    border: 2px solid #2b060a;
    text-decoration: none;
    font-size: 24px;
}
#documents li a.main:hover,
#documents li a.main:focus {
    -webkit-border-radius: 0 32px 0 0;
    -moz-border-radius: 0 32px 0 0;
    border-radius: 0 32px 0 0;
}
#documents li a.main:active {
    top: 2px;
}

/* The following isn't in use currently */
#content dl {
    overflow: auto;
}
#content dt {
    display: block;
    width: 424px;
    float: left;
    padding: 0 32px 32px 0;
    border-right: 2px solid #2b060a;
}
#content dt:hover+dd,
#content dd:hover {
    background: #fff;
}
#content dt p {
    font-size: 24px;
    margin-bottom: 8px;
}
#content dd {
    display: block;
    float: right;
    margin-bottom: 32px;
    width: 124px;
    padding: 8px 16px;
    font-size: 24px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

blockquote {
    padding-left: 48px;
    background: url('quote.png') no-repeat;
}
.admin blockquote:hover {
	cursor: move;
    background-color: #fff;
}

cite {
    display: block;
    text-align: right;
    margin: 0 0 32px 48px;
}

#resources #content ul {
    margin: 0;
    overflow: hidden;
}
#resources #content li {
    list-style: none;
    float: left;
    width: 312px;
    margin: 0 8px 16px;
}

#resources #content ul a.main {
    display: block;
    padding: 8px 16px;
    color: #fff;
    text-decoration: none;
    position: relative;
    -webkit-border-radius: 16px 0 16px 0;
    -moz-border-radius: 16px 0 16px 0;
    border-radius: 16px 0 16px 0;
}
#resources #content ul a.main:hover,
#resources #content ul a.main:focus {
    background-color: #2b060a;
    color: #fff !important;
}
#resources #content ul a.main:active {
    top: 2px;
}

#portrait {
    width: 240px;
    height: 320px;
    float: right;
    margin: 16px 0 16px 32px;
    border: 16px solid #fff;
    -webkit-box-shadow: 0px 0px 16px #2b060a;
    -moz-box-shadow: 0px 0px 16px #2b060a;
    box-shadow: 0px 0px 16px #2b060a;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
}

#bad_browser, #admin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
}

#bad_browser {
    display: none;
}
#bad_browser:hover {
    cursor: pointer;
}
#bad_browser p {
    width: 960px;
    margin: 0 auto;
    padding: 16px 0;
    font-size: 20px;
    line-height: 1.5;
}

/* @group Colors */

a, 
h2 {
    color: #00f;
}
#logo {
    background-color: #00f;
}

#navigation li.home a {
    color: #00f;
}
#navigation li.home.current a,
#navigation li.home a:hover,
#navigation li.home a:focus {
    border-color: #00f;
}

#about a, 
#about h2 {
    color: #00a100;
}
#about #logo {
    background-color: #00a100;
}
#navigation li.about a {
    color: #00a100;
}
#navigation li.about.current a,
#navigation li.about a:hover,
#navigation li.about a:focus {
    border-color: #00a100;
}

#services a, 
#services h2 {
    color: #ac9e21;
}
#services #logo {
    background-color: #ac9e21;
}
#navigation li.services a {
    color: #ac9e21;
}
#navigation li.services.current a,
#navigation li.services a:hover,
#navigation li.services a:focus {
    border-color: #ac9e21;
}

#testimonials a, 
#testimonials h2 {
    color: #ea7500;
}
#testimonials #logo {
    background-color: #ea7500;
}
#navigation li.testimonials a {
    color: #ea7500;
}
#navigation li.testimonials.current a,
#navigation li.testimonials a:hover,
#navigation li.testimonials a:focus {
    border-color: #ea7500;
}

#information a, 
#information h2 {
    color: #ce0000;
}
#information #logo {
    background-color: #ce0000;
}
#navigation li.information a {
    color: #ce0000;
}
#navigation li.information.current a,
#navigation li.information a:hover,
#navigation li.information a:focus {
    border-color: #ce0000;
}

#forms a, 
#forms h2 {
    color: #7600f8;
}
#forms #logo {
    background-color: #7600f8;
}
#navigation li.forms a {
    color: #7600f8;
}
#navigation li.forms.current a,
#navigation li.forms a:hover,
#navigation li.forms a:focus {
    border-color: #7600f8;
}

#resources a, 
#resources h2 {
    color: #9f00cd;
}
#resources #logo,
#resources #content ul a.main {
    background-color: #9f00cd;
}
#navigation li.resources a {
    color: #9f00cd;
}
#navigation li.resources.current a,
#navigation li.resources a:hover,
#navigation li.resources a:focus {
    border-color: #9f00cd;
}

/* @end */

#admin p {
    font-size: 18px;
    width: 960px;
    margin: 0 auto;
    padding: 16px 0;
}
#admin #logout {
    display: block;
    float: right;
}

form {
    position: fixed;
    z-index: 3;
    width: 588px;
    background: #fff;
    padding: 16px 32px;
    margin-bottom: 32px;
    border: 2px solid #2b060a;
}
form label {
    display: block;
    float: left;
    width: 20%;
    padding: 5px 0;
}
form input[type='text'],
form input[type='file'],
textarea {
    width: 50%;
    border: 1px solid #2b060a;
    padding: 4px;
    font-size: 18px;
    font-family: inherit;
}
form div {
    margin-bottom: 16px;
}

input:hover, input:focus,
textarea:hover, textarea:focus {
    background: #f4eed9;
}

#submit, #cancel {
    font-size: 18px;
    color: #fff;
    font-family: inherit;
    border: 0;
    padding: 8px 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}
#submit {
    margin-left: 20%;
    background: #00a100;
}
#submit:hover, #cancel:hover {
    background: #2b060a;
}
#submit:active, #cancel:active {
    position: relative;
    top: 1px;
}
#cancel {
    margin-left: 5%;
    background: #ce0000;
}

#content .crud {
    position: absolute;
    z-index: 1;
    display: none;
    font-size: 18px;
}

#content .crud a {
    display: block;
    float: left;
    color: #fff;
    padding: 8px 16px;
}
#content .crud .edit {
    background: #00a100;
}
#content .crud .delete {
    background: #820000;
}
#content .crud a:hover,
#content .crud a:focus {
    background: #2b060a;
    color: #fff !important;
}

#content li:hover .crud,
#content blockquote:hover .crud {
    display: block;
}

#output {
    position: fixed;
    bottom: 32px;
    left: 32px;
    display: none;
    background: #fff;
    width: 320px;
    font-size: 20px;
    padding: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    line-height: 1.5;
}

#attribution {
    font-size: 18px;
    text-align: center;
    margin-top: 48px;
}

.editable:hover, .GENTICS_editable_active {
    background: #fff;
}