/*-----------------------------------------------------------------------------
 * Begin page layout
 *
 * Provides for a header, a body with a single pane or dual panes, and a 
 * footer.  Navigation can be added but wasn't needed initially.
 *
 * Taken from: http://www.maxdesign.com.au/articles/css-layouts/one-liquid/
 *---------------------------------------------------------------------------*/
#container {
  margin: 0 30px;
}

#header {
  padding: 10px;
  height: 55px;
}

#header h1 {
  margin: 0;
  position: relative;
  top: 10px;
  width: auto;
  float: left;
  z-index: 100;
}

#header h1 a {
  text-decoration: none;
}

#header h1 span {
  font-size: .6em;
}

span#instance {
  position: absolute;
  font-size: 4em;
  font-weight: bold;
  transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  color: #F00;
  font-family: Helvetica, sans-serif;
  top: 24px; /*21px;*/
  opacity: .2;
  margin-left: 285px;
}

/*
#navigation {
  float: left;
  width: 100%;
  background: #333;
}

#navigation ul {
  margin: 0;
  padding: 0;
}

#navigation ul li {
  list-style-type: none;
  display: inline;
}

#navigation li a {
  display: block;
  float: left;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}

#navigation li a:hover { 
  background: #383; 
}
*/

#content {
  clear: left;
  padding: 10px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
}

#content h2 {
  font-size: 160%;
  margin: 0 0 .5em;
}

.singlePane {
  width: auto;
  padding: 6px;
  clear: both;
  background-position: initial;
  font-weight: normal;
}

/*
.ui-dialog .singlePane {
  padding: 6px;
  width: auto;
}
*/

#rightPane {
  width: 78%;
  float: right;
  background-position: initial;
  font-weight: normal;
}

#leftPane {
  float: left;
  width: 18%;
  padding: .714em;
  display: inline;
  background-position: initial;
  font-weight: normal;
}

#footer {
  display: none;
  text-align: right;
  padding: 4px;
  position:absolute;
  bottom: 0;
  left: 0;
  width: 99%
}
/*-----------------------------------------------------------------------------
 * End page layout
 *---------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
 * begin jquery-ui overrides 
 *---------------------------------------------------------------------------*/
.ui-state-highlight, .ui-state-error {
  /*padding: 4px;*/
  /*padding: .286em;*/
  padding: 6px;
}

.ui-tabs .ui-tabs-panel {
  padding: 0;
}

#dialog-link {
  padding: .4em 1em .4em 1.429em;
  text-decoration: none;
  position: relative;
}

#dialog-link span.ui-icon {
  margin: 0 5px 0 0;
  position: absolute;
  left: .2em;
  top: 50%;
  margin-top: -8px;
}

#icons {
  margin: 0;
  padding: 0;
}

.ui-icon {
  float: left;
  margin-right: .3em;
}

div#message span.ui-icon {
  margin-top: .5em;
}

.ui-widget {
  font-size: 1em;
}

/*-----------------------------------------------------------------------------
 * end jquery-ui overrides 
 *---------------------------------------------------------------------------*/

html, body, h1, form, fieldset, legend, ol, li {
  margin: 0;
  padding: 0;
}

body {
  font: 14px "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  padding: 1.5em;
  width: 950px; /* This is size needed for ipad */
  margin: 0 auto;
  background-color: #FFF;
}

.hidden {
  display: none;
}

.center {
  margin: 0 auto !important;
  text-align: center !important;
}

.right {
  text-align: right !important;
}

.left {
  text-align: left !important;
}

.top {
  vertical-align: top;
}

.bold {
  font-weight: bold !important;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

.clear {
  clear: both;
}

.pointer { 
  cursor: pointer
}

.strikethrough {
  text-decoration: line-through;
}

.underline {
  text-decoration: underline;
} 

.highlight {
  color: red !important;
  font-weight: bold;
} 

.nowrap {
  white-space: nowrap;
}

.wrap {
  white-space: normal;
}

.indent {
  margin-left: 10px !important;
}

div#loginInfo {
  line-height: 1.2em;
  text-align: left;
}

div#headerInfo, div#headerCustomerInfo {
  position: relative;
  font-weight: normal;
}

div#headerInfo {
  float: right;
  /*---------------------------------------------------------------------------
   * This is needed to ensure the customerInfo information stays behind the
   * logout link
   *-------------------------------------------------------------------------*/
  z-index: 100;
}

div#headerCustomerInfo {
  float: none;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  bottom: 50px;
}

.message {
  padding: 6px;
}

div.message {
  margin-bottom: 7px;
}

.error {
  background-color: #FDD !important;
  color: #CD0A0A !important;
}

div#errorStatus, div#warningStatus, div#infoStatus {
  margin-bottom: 15px;
  display: none;
}

div#errorStatus div.ui-state-error, 
div#warningStatus div.ui-state-error,
div#infoStatus div.ui-state-error {
  padding: 10px;
}

#overlay {
  /*---------------------------------------------------------------------------
   * We need the loading overlay to show up above an modal dialogs that may
   * be present
   *-------------------------------------------------------------------------*/
  z-index: 99999999;
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #000;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

#loader {
  /*---------------------------------------------------------------------------
   * We need the loading overlay to show up above an modal dialogs that may
   * be present
   *-------------------------------------------------------------------------*/
  z-index: 100000101;
  position: fixed;
  top: 0;
  left: 47%;
  -webkit-box-shadow: 0px 0px 7px 0px #818181;
  -moz-box-shadow: 0px 0px 7px 0px #818181;
  box-shadow: 0px 0px 7px 0px #818181;
  padding: 5px;
  border: 1px solid #FAD42E;
  border-top: none;
  background: #FFEF8F;
  width: 7em;
  opacity: 1;
  filter: alpha(opacity=100);
}

#loader div {
  background-image: url('/includes/assets/ajax-loader-ffef8f.gif');
  background-repeat: no-repeat;
  background-position: right center;
  width: 16px;
  height: 11px;
  float: right;
  margin-right: 8px;
}

/*-----------------------------------------------------------------------------
 * Begin general form styling
 *---------------------------------------------------------------------------*/
form {
  margin-left: auto;
  margin-right: auto;
}

form#login {
  width: 22.5em;
}

form fieldset {
  border: none;
  margin-bottom: .714em;
}

form#login label {
  width: 4.643em;
}

form#login table td {
  white-space: normal;
}

form input, form textarea {
  /*---------------------------------------------------------------------------
   * position: relative causes radio/checkbox buttons to show up in firefox
   * when jquery ui is in use
   *-------------------------------------------------------------------------*/
  /*position: relative !important;*/
  font-size: 1em;
  outline: none;
  padding: .357em;
}

form#login input, form#login textarea {
  width: 14.286em;
}

form table {
  margin: 0 auto;
  border-width: 2px;
  line-height: 2.143em;
  padding: .714em;
  border-spacing: 0 4px;
}

form table tr td {
  padding: 4px;
  white-space: nowrap;
}

form table tr td:first-of-type {
  text-align: right;
}
/*-----------------------------------------------------------------------------
 * End general form styling
 *---------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
 * Begin general dialog table styling
 *---------------------------------------------------------------------------*/
form.dialogForm table td {
  text-align: right;
}

form.dialogForm table td input,
form.dialogForm table td textarea {
  width: 24em;
} 
 
form.dialogForm table td select {
  width: 25em;
}

form.dialogForm table td textarea {
  height: 10em;
}

form.dialogForm table td:first-of-type {
  width: 9em;
}

table.tableSorter th span:nth-child(2) {
  display: block;
  float: right;
  width: 16px;
  height: 16px;
}

.ui-dialog table {
  /* Removing this fixed alignment issues in some dialgos, but may cause 
   * problems in others, so we'll need to keep an eye out and fix as necessary
   */
  /*width: 100%;*/
  border-spacing: 0 4px;
}

.ui-dialog table thead td, .ui-dialog table thead th {
  padding: 6px;
}

.ui-dialog table thead td:first-of-type, .ui-dialog table thead th:first-of-type {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}

.ui-dialog table thead td:last-of-type, .ui-dialog table thead th:last-of-type {
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
/*-----------------------------------------------------------------------------
 * End general dialog table styling
 *---------------------------------------------------------------------------*/