/**
 * amflood.com chat interface style sheet.
 *
 * @package    AmFlood
 * @subpackage UI
 * @copyright  Copyright 2008 Spenlen Media (http://spenlen.com)
 * @license    This source code file is licensed for the exclusive internal use of
 *             America's Flood Services, Inc. and may not be used for any other purpose.
 * @version    $Id$
 */


/**** Global Rules ****/

/* Page Structure */

HTML, BODY, H1, H2, H3, H4, H5, H6, HR, DIV, P, PRE, UL, OL, LI, BLOCKQUOTE, FORM, FIELDSET, LEGEND, TABLE, TR, TH, TD, DL, DT, DD {
  margin: 0;
  padding: 0;
}

HTML, BODY {
  height: 100%;
}

BODY {
  background: #fff;
  font: normal normal normal 0.9em/1.3em Helvetica, Arial, sans-serif;
  color: #000;
  min-width: 350px;
  min-height: 300px;
  position: relative;
}

/* Headings */

H1, H2, H3, H4, H5, H6 {
  margin: 0 0 1em 0;
  font-size: 1em;
  font-weight: bold;
  color: #666;
}

H2 {
  margin-bottom: 0.8em;
  font-size: 1.3em;
}

H3 {
  font-size: 1.2em;
}

H4 {
  font-size: 1.3em;
}

/* Tables */

TABLE {
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
}

TH, TD {
  font-style: normal;
  font-weight: normal;
  text-align: left;
}

TR.odd {
  background: #fff;
}
TR.even {
  background: #ddd;
}

/* Paragraphs and Other Block-Level Elements */

P {
  margin-bottom: 1em;
  line-height: 1.4em;
}

OL, UL {
  margin: 2em 1em 1em 2em;
  list-style: none;
}

LI {
  margin-bottom: 1em;
}

BR.clear {
  clear: both;
}

HR {
  margin: 1em 0 1em 0;
  border: 1px solid #ccc;
}

HR.sectionBreak {
  margin: 2em 0 2em 0;
}

HR.separator {
  border-right: none;
  border-bottom: none;
  border-left: none;
}

/* Anchors (Hyperlinks) */

A, A:link, A:visited {
  color: #005e99;
  text-decoration: none;
}
A:hover {
  color: #093b5d;
}

A.readMore, A.addLink {
  font-size: 0.85em;
}

A.deleteLink {
  font-size: 0.8em;
  color: #999;
  text-decoration: underline;
}

/* Form Elements */

INPUT, TEXTAREA, SELECT, BUTTON {
  font: normal normal normal 1em Helvetica, Arial, sans-serif;
}

INPUT.fullWidth, TEXTAREA.fullWidth {
  width: 100%;
  max-width: 50em;
}

INPUT.cancelButton, BUTTON.cancelButton {
  margin-left: 2em;
}

/* Images and Other Inline Elements */

IMG {
  border: none;
}

ACRONYM, ABBR {
  text-decoration: none;
}

EM {
  font-style: italic;
}

STRONG {
  font-weight: bold;
}


/**** Site Layout ****/

/* Page Header */

#pageHeader {
  padding: 5px 10px 20px 10px;
  background: url('../images/separator.gif') left bottom repeat-x;
  height: 30px;
  position: relative;
}

#pageHeader H1 {
  background: url('../images/logo.gif') left center no-repeat;
  text-indent: -1000em;
  width: 205px;
  height: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
}
#pageHeader H2 {
  margin: 0;
  font-size: 1.3em;
  position: absolute;
  top: 10px;
  right: 10px;
}


/* Page Content Area */

#pageContent {
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  bottom: 2em;
  overflow: auto;
}

#contentFrame {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.content {
  padding: 10px;
}

#chatTranscriptFrame {
  width: 100%;
  height: 85%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
}

.chatMessage {
  padding-bottom: 0.5em;
}
.messageInfo {
  margin-bottom: 0;
  font-size: 0.8em;
}
.localMessage .messageInfo {
  color: #005e99;
}
.localMessage .messageText {
  color: #808080;
}
.remoteMessage .messageInfo {
  color: #c3102d;
}
.remoteMessage .messageText {
  color: #000;
}
.systemMessage .messageInfo {
  display: none;
}
.systemMessage .messageText {
  font-size: 0.8em;
  color: #b3b3b3;
  text-align: center;
}

.online {
  color: #20c32d;
}

#chatMessageFrame {
  background: url('../images/inside_top_gradient.gif') left top repeat-x;
  width: 100%;
  height: 15%;
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: auto;
}
#chatMessageFrame P {
  margin: 0;
}

#chatMessageTextContainer {
  position: absolute;
  top: 10px;
  left: 5px;
  right: 3.5em;
  bottom: 5px;
}
#chatMessageText {
  border: none;
  background: none;
  outline: none;
  width: 95%;
  height: 95%;
}

#chatMessageSend {
  padding: 0.2em 0.8em;
  background: #666;
  border: none;
  font-size: 0.9em;
  color: #fff;
  width: 5em;
  position: absolute;
  right: 5px;
  bottom: 5px;
}
#chatMessageSend:active {
  right: 4px;
  bottom: 4px;
}

#newChatSound, #newMessageSound {
  position: absolute;
  top: 0;
  left: -100px;
}


TABLE.dataTable {
  margin-bottom: 1.5em;
}

TABLE.dataTable TH, TABLE.dataTable TD {
  padding: 0.2em 1em;
}
TABLE.dataTable TH {
  background: #98cbff;
  font-weight: bold;
}

.pendingChat TD {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  background: #f3cfd5;
}


.alignLeft {
  text-align: left;
}

.alignCenter {
  text-align: center;
}

.alignRight {
  text-align: right;
}

.floatLeft {
  padding-right: 1em;
  padding-bottom: 1em;
  float: left;
}

.floatRight {
  padding-left: 1em;
  padding-bottom: 1em;
  float: right;
}

.noWrap {
  white-space: nowrap;
}

.hidden {
  visibility: hidden;
}

.validationError {
  color: #c3102d;
}



/* Page Footer */

#pageFooter {
  background: #98cbff url('../images/bottom_gradient.gif') left top repeat-x;
  height: 2em;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

#pageFooter P {
  margin: 0.8em 10px 0 10px;
  font-size: 0.7em;
  line-height: 1.8em;
  color: #d6eaff;
}

#pageFooter P.credit {
  float: right;
}
#pageFooter P.credit A {
  color: #d6eaff;
  text-decoration: none;
}
#pageFooter P.credit A:hover {
  color: #fff;
}