html { margin:0; padding:0 }

body {
  background:#f2f2f2 url(/images/triopticon/bgloop.gif) repeat-x top;
  background-attachment: fixed;
  text-align:center;
  margin: 0;
  padding: 0;
}

div#container {
  background:transparent url(/images/triopticon/bg.gif) no-repeat top center;
  background-attachment: fixed;
  text-align: center;
  width: 928px;
  padding: 0;
  padding-top: 64px;
  margin: 0 auto;
}
div#wrapper {
  width:800px;
  background-color:white;
  margin: 0 auto;
  padding-top: 1em;
}
/*    background: transparent url(/images/triopticon/logo.jpg) no-repeat top left; */
div#header {
  padding: 0px 10px;
  margin: 0;
  text-align: left;
}
div#header a {text-decoration:none; background-color:transparent; }
#triopticon-logo {
  background:transparent none repeat scroll 0 0;
  font-family:times;
  height:54px;
  margin:70px 0 0 10px;
  padding:0;
}
div#clearing { 
  overflow:hidden;
  padding-top:1em;
}
div#content {
  background:white;
  border-right: thin solid #186086;
  float:left;
  width:580px;
  text-align:left;
  padding-left: 10px;
  padding-bottom:2000px;
  margin-bottom:-2000px;
}
div#content p {line-height:1.4}

div#navigation {
  float:right;
  width:200px;
  background-color:white;
  padding-bottom:2000px;
  margin-bottom:-2000px;
}
div#pictureframe {
  padding:10px;
  text-align:center;
}
div#extra{clear:both;width:100%}

div#footer {
  background: #186086;
  color: #FFF
}
div#footer p {
  margin:0;
  padding:5px 10px
}
#footer a { color:white; }
#footer a:hover {color:#FFC600;}
p {margin:0 10px}
/*    display:block;color:#981793;padding:10px; */
a {
}
.pagination {
  font-size:xx-small;
}
.pagination a {
  display: inline;
  padding: 4px;
  color: black;
  border: thin solid #176083; /* triopticon blue */
  text-decoration: none;
}
.pagination a:hover {
  color: white;
}
.disabled {
  display: inline;
  padding: 4px;
  color: #999;
  border: thin solid #999;
}

div#textile_block {
  line-height: 92%;
}
div#textile_block ul { margin-top:-1em;}
div#textile_block p { margin: 0;}
div#textile_block li { margin: 0; line-height: 92%;}

div#shouts { background-color:#cce; border:thin solid #aac; padding: 4px 1em; }

.birdback { background-color:#ddd; }
.whiteback { background-color:#fff; }

div#narrative { padding:0 2em; text-align:left; }

div#replies { 
  padding: 4px 1em; 
}
div#replies h3 {
  text-align: left;
  font-family: monospace;
  color: #006;
}
div#shoutbox { 
  border:medium solid #cce;
  padding:.5em 1em;
  margin:1em;
}
div#header_links_bar {
  text-align:center;
  font-family:sans-serif;
  font-style:bold;
  letter-spacing:5px;
}
div#header_links_bar ul { margin-left:-3em; }
div#header_links_bar li {
  display:inline;
  z-index:5;
}
div#header_links_bar li a {
  border:medium solid #7AC0E4;
  background-color:#176083;
  padding: 4px 10px 4px 14px;
  color:white;
}
div#header_links_bar a:hover {
  color:#FFC600;
}

div#about p {
  line-height: 150%;
  margin-top: 1em;
}


/* following was in scaffold.  I'm removing scaffold now. */
pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a { color: #176083; }
a:visited { color: #666; }
a:hover { color: #F00; background-color:#000; }

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}
/* end of scaffold */

/* yeah, whatever. Adding cruft */
.caption {
  font-size:x-small;
  color:#333;
}
#webcam_control {
    margin: 1em;
    text-align: center;
}
#the_image {
    clear:both;
    margin-right: 1em;
    margin-left: 1em;
    padding: 2px;
    text-align: center;
}

#user_bar {
  font-size:xx-small;
  text-align:right;
}
#user_bar_greeting {}
#user_bar_action {}

.flash { color:green; }
.byline_image { float:right; margin-left:1em; margin-top: -1em;}
#byline { margin-top: 2em; text-align:right; }