/* Welcome to Susy. Use this file to define screen styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */
/* @group 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,
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-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline; }

*:focus {
  outline: 0; }

body {
  line-height: 1em;
  color: black;
  background: white; }

ol, ul {
  list-style: none; }

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: "" ""; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: ""; }

img a {
  border: none; }

/* @end */
/* @group defaults */
body {
  font-family: Helvetica, Arial, sans-serif;
  color: #eeeeee; }

/* @group links */
:focus {
  outline: 1px dotted white;
  color: #eeeeee; }

a {
  text-decoration: none; }
  a:link {
    color: blue; }
  a:visited {
    color: #6600ff; }
  a:focus, a:hover, a:active {
    color: #eeeeee;
    text-decoration: none; }

/* @end */
/* @group headers */
h1, h2, h3, h4, h5, h6 {
  color: #dddddd;
  font-weight: bold; }

h1, h2, h3 {
  font-family: Baskerville, Palatino, serif; }

h1 {
  font-size: 1.5em; }

/* @end */
/* @group forms */
form *:focus {
  outline: none; }

fieldset {
  margin: 1.5em 0; }

legend {
  font-weight: bold;
  font-variant: small-caps; }

label {
  display: block;
  margin-top: 1.5em; }

legend + label {
  margin-top: 0; }

textarea, input[type="text"] {
  color: white;
  /* Mozilla (FireFox, Camino) */
  -moz-box-sizing: border-box;
  /* Webkit (Safari, Chrome) */
  -webkit-box-sizing: border-box;
  /* IE (8) */
  -ms-box-sizing: border-box;
  /* CSS3 */
  box-sizing: border-box;
  width: 100%; }

/* @end */
/* @group tables */
/* tables still need 'cellspacing="0"' in the markup */
table {
  width: 100%;
  border: 0.063em solid white;
    border-left: none;
    border-right: none;
  padding: 0.438em 0;
  margin: 0.5em 0; }

tbody {
  color: white; }

th {
  font-weight: bold; }

/* @end */
/* @group block tags */
p {
  margin: 1.5em 0; }

ol {
  list-style: decimal;
  margin: 0 1.5em 1.5em 1.5em; }

ul {
  list-style: disc;
  margin: 0 1.5em 1.5em 1.5em; }

blockquote {
  margin: 1.5em;
  color: white; }

/* @end */
/* @group inline tags */
cite {
  font-style: italic;
  color: white; }

em {
  font-style: italic; }

strong {
  font-weight: bold; }

ins {
  text-decoration: underline; }

del {
  text-decoration: line-through; }

q {
  font-style: italic; }
  q em {
    font-style: normal; }

/* @end */
/* @group replaced tags */
img {
  vertical-align: bottom; }

/* @end */
/* @end */
/* @group STRUCTURE */
body {
  text-align: center;
  font-size: 100%;
  line-height: 1.5em; }

#container {
  overflow: hidden;
  display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  width: 62em;
  max-width: 100%; }
  #container {
    display: block; }

#header {
  clear: both;
  margin-right: 2.419%;
  margin-left: 2.419%;
  height: 240px; }

#content {
  clear: both;
  margin-right: 2.419%;
  margin-left: 2.419%; }
  #content #identifier {
    clear: both;
    margin-right: 2.419%;
    margin-left: 2.419%;
    margin-top: 5px;
    margin-bottom: 15px; }
  #content #sidebar {
    width: 24.194%;
    display: inline;
    float: left;
    margin-right: 2.419%;
    margin-left: 2.419%; }
  #content #main {
    width: 68.548%;
    display: inline;
    float: left;
    margin-right: 2.419%;
    display: inline;
    float: right;
    margin-right: 2.419%;
    /* ugly hacks for IE6-7 */
    #margin-right: 1.419%;
    /* end ugly hacks */ }
    #content #main .partial {
      padding: 15px 20px;
      margin: 20px 0; }

#footer {
  clear: both;
  margin-right: 2.419%;
  margin-left: 2.419%;
  height: 75px; }
  #footer #toolbar {
    width: 24.194%;
    display: inline;
    float: left;
    margin-right: 2.419%;
    margin-left: 2.419%; }
  #footer #seals {
    width: 41.935%;
    display: inline;
    float: left;
    margin-right: 2.419%; }
  #footer #tech-support {
    width: 24.194%;
    display: inline;
    float: left;
    margin-right: 2.419%;
    display: inline;
    float: right;
    margin-right: 2.419%;
    /* ugly hacks for IE6-7 */
    #margin-right: 1.419%;
    /* end ugly hacks */
    padding-top: 10px;
    text-align: right; }
    #footer #tech-support p {
      margin: 0;
      font-family: monospace;
      color: #aaaaaa; }

/* @end */
/* @group COMPONENTS by type */
#identifier {
  text-align: center;
  font-size: 1.3em;
  line-height: 2em;
  background: url(/images/open-profile.png) no-repeat 10px 50%; }

#sidebar {
  margin-bottom: 20px;
  padding-bottom: 15px; }
  #sidebar img#avatar {
    display: block;
    width: 200px;
    margin: 15px auto; }
  #sidebar dl {
    padding: 0 15px 5px; }
    #sidebar dl dt {
      font-variant: small-caps;
      margin: 10px 0 5px; }
    #sidebar dl dd {
      text-align: center;
      font-weight: bold; }
    #sidebar dl ul {
      margin-bottom: 0; }
      #sidebar dl ul li {
        list-style-type: none;
        margin-left: 0px; }
    #sidebar dl dd.age {
      text-align: left;
      font-size: 12px; }

#main .partial h3 {
  font-size: 1.3em;
  margin-bottom: 0.5em; }
#main .partial p {
  margin: 0.5em 0; }
#main .partial ul.location li {
  list-style-type: none;
  margin-left: 0px; }

#nav {
  height: 5em;
  padding: 0.5em 0; }
  #nav ul {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    overflow: hidden;
    display: inline-block;
    margin: 0 20px; }
    #nav ul {
      display: block; }
    #nav ul li {
      list-style-type: none;
      margin-left: 0px;
      white-space: nowrap;
      display: inline;
      float: left;
      padding-left: 1em;
      padding-right: 1em; }
      #nav ul li.first {
        padding-left: 0px; }
      #nav ul li.last {
        padding-right: 0px; }
    #nav ul li {
      font-weight: bold; }
      #nav ul li a:visited {
        color: blue; }

/* TODO refactor to keep DRY with .partial */
#mission, #participants {
  padding: 15px 20px;
  margin: 20px 0; }

a.participant {
  display: block;
  width: 80px;
  margin: 0 10px;
  padding: 1px;
  border: 1px solid #999999; }
  a.participant img {
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px; }
  a.participant span {
    display: block;
    text-align: center; }

a.participant:hover {
  padding: 0;
  border: 2px solid #eeeeee; }

/* @end */
/* @group OVERRIDES by content */
html, body {
  background-color: #027b02; }

#header {
  background: transparent url(../images/header-v1.1.png) no-repeat 50% 0; }

.partial, #identifier, #nav, #sidebar, #mission, #participants {
  background-color: #011f01; }

/* @end */
/* @group OVERRIDES by page */
/* @end */
/* @group DEBUG */
/*   uncomment, adjust and use for debugging    */
/* #page
 *   +show-grid("grid.png") */
/* @end */