/*
 * xpancenet.css - Styles for XpanceNET.
 *
 * This style sheet is organized as follows:
 *   - first:  default element settings
 *   - second: style classes
 *   - third:  unique element id settings
 *
 * Each section is alphabetically organized.  Please keep it that way!
 */

/* Global/default settings for all elements */
*
{
   font-family: Verdana, sans-serif;
   line-height: 100%;
   color: #333;
}

.advertisertable
{
  display: table;
  border: 1px solid #aaa;
  width: 100%;
}
.advertisertable div
{
  display: table-row;
  border: 1px solid #aaa;
}
.advertisertable .header
{
  display: table-row;
  border: 1px solid #aaa;
  background-color: #ccc;
}
.advertisertable div div
{
  display: table-cell;
  padding: 5px;
  border: 1px solid #aaa;
}
.advertisertable .oddrow
{
  display: table-row;
  padding: 5px;
  border: 1px solid #aaa;
  background-color: white;
}
.advertisertable .evenrow
{
  display: table-row;
  padding: 5px;
  border: 1px solid #aaa;
  background-color: #eee;
}

.badge
{
  border-radius: 100%;
  background: maroon;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  padding: 3px;
  position: relative;
  top: -7px;
  left: -10px;
  text-align: center;
  display: inline-block;
  min-width: 10px;
  font-size: 8pt;
  margin: 0px;
}


.instructions
{
    font-family: Arial;
    font-weight: bold;
    border: 0;
}

.instructions li
{
    font-weight: normal;
    list-style: none;
    padding: 5px;
    display: block
}

.instructions em
{
    color: red;
    font-weight: bold;
}

.instructions li label
{
  width: 100px;
	padding: 5px;
    display: inline-block !important;
}

.instructions textarea
{
    /*height: 200px;*/
   /* resize: none;*/
}

#object
{
	pointer-events: none;
}


a:link, a:visited
{
   color: blue;
   text-decoration: none;
}

a:hover, a:active
{
   text-decoration: underline;
}

body
{
   margin: 0px;

   background-color: #fff;
}

/* Border definitions */
div, table, th, td
{
   border-color: #aaa;
   border-style: solid;
   border-width: 0px;
}

input.Button
{
    border: solid 1px #777;
    font-size: 8pt;
    font-weight: bold;
}

input.ButtonDisabled
{
    border: solid 1px #777;
    font-size: 8pt;
    font-weight: bold;
    color: #aaa;
}

h1
{
   font-size:      14pt;
   font-weight:    bold;
   letter-spacing: 2px;
   text-transform: uppercase;

   margin-top: 0px;
}

/* Trying to minimize number of spots where colors are set. */
h1, .DimText, .TabMiddleBackground, .IconListing td.Heading
{
   color: #777;
}

/* Make horizontal rulers thin, lightly grey lines. */
hr
{
   height: 1px;
   margin: 0.3cm 0cm 0.3cm 0cm;

   border-width: 0px;

   background-color: #aaa;
    color: #aaa;
}

img
{
   /* To prevent links from adding borders to images. */
   border-width: 0px;

   margin: 0px;

   vertical-align: middle;
}

table
{
   border-spacing: 0px;
}

td
{
   padding: 0px;
}


/*****************
 * Style Classes *
 *****************/

.ActionButton
{
   border: solid 1px #777;

   font-size: 8pt;
}

table.AdStatusTable
{
    width: 300px;
}

table.AdStatusTable td
{
    border-width: 0px;
}

tr.Alternate td
{
   background-color: #eee;
}

p.CalmNotice
{
    font-size: 8pt;
    font-weight: bold;
    color: maroon;
}

.ContentArea
{
   padding: 0.3cm 0cm 0cm 0.3cm;
   vertical-align: top;
}

.ContentAreaHeader {
    width: 100%;
    margin-bottom: 10px;
}

.ContentAreaHeader tr td
{
   height: 24px;

   vertical-align: middle;
}

.ContentAreaHeader tr td h1
{
   margin: 0px;
}

.ContentAreaHeaderRight { text-align: right; }

.HelpfulInformation {
    font-size: 8pt;
    line-height: 125%;
}

/* START: JSMenu */

.JSMenu_Root
{
   margin: 0px;
}

.JSMenu_Root, .JSMenu_Root ul
{
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

.JSMenu_Items ul
{
   display: none;
}

.JSMenu_Label, .JSMenu a
{
   display: block;
   padding: 3px 3px 3px 3px;

   font: 11px/13px Verdana, Lucida, sans-serif;
   text-decoration: none;
}

li.JSMenu div.JSMenu_Label
{
   background-color: #ccc;

   font-weight: bold;
   text-transform: uppercase;
   color: #000;

   cursor: default;
}

li.JSMenu li.JSMenu div.JSMenu_Label,
li.JSMenu li a:link, li.JSMenu li a:visited
{
   background-color: #678;

   font-weight: normal;
   text-transform: none;
   color: #ddd;

   border-top: solid 1px #aab;

   cursor: pointer;
}

li.JSMenu li.JSMenu div.JSMenu_Label:hover,
li.JSMenu li a:hover
{
   background-color: #456;
   color: #fff;

    text-decoration: none;
}

li.JSMenu li.JSMenu li.JSMenu div.JSMenu_Label,
li.JSMenu li.JSMenu li a:link, li.JSMenu li.JSMenu li a:visited
{
   background-color: #bcd;

   font-weight: normal;
   font-size: 9px;
   color: #333;

   border: none;
}

li.JSMenu li.JSMenu li.JSMenu div.JSMenu_Label:hover,
li.JSMenu li.JSMenu li a:hover
{
   background-color: #9ac;
   color: #911;
}

li.JSMenu li.JSMenu li.JSMenu li.JSMenu div.JSMenu_Label,
li.JSMenu li.JSMenu li.JSMenu li a:link, li.JSMenu li.JSMenu li a:visited
{
   background-color: #cde;

   font-weight: normal;
   font-size: 9px;
   color: #333;

   border: none;
}

li.JSMenu li.JSMenu li.JSMenu li.JSMenu div.JSMenu_Label:hover,
li.JSMenu li.JSMenu li.JSMenu li a:hover
{
   background-color: #abd;
   color: #911;
}

/* END: JSMenu */

.NullSpace, .DetailedListing tr th, #SideBar
{
   background-color: #ddd;
}

.SearchField
{
   font-size: 8pt;
}

.TabBlender
{
   background-color: #e9e8e9;
}

.TabLeftForeground, .TabLeftBackground, .TabRightForeground, .TabRightBackground
{
   padding: 0px;
   height:  21px;
   width:   10px;

   background-repeat: no-repeat;

   cursor: pointer;
}

.TabLeftForeground
{
   background-image: url( "../images/TabLeftForeground.png" );
}

.TabLeftBackground
{
   background-image: url( "../images/TabLeftBackground.png" );
}

.TabRightForeground
{
   background-image: url( "../images/TabRightForeground.png" );
}

.TabRightBackground
{
   background-image: url( "../images/TabRightBackground.png" );
}

.TabMiddleForeground, .TabMiddleBackground
{
   font-size: 10pt;

   background-repeat: repeat-x;

   padding: 0px;

   text-align:     center;
   vertical-align: middle;

   cursor: pointer;
}

.TabMiddleForeground
{
   background-image: url( "../images/TabMiddleForeground.png" );
}

.TabMiddleBackground
{
   background-image: url( "../images/TabMiddleBackground.png" );
}

#Layout
{
   display: block;
   margin:  0px;
   margin:  auto; /* Centers the content in the window. */
}

#Layout, #SiteBanner img
{
   width: 980px;
}

#QuickSearchForm
{
   padding: 0px;
   margin:  0px;
}

#SearchBar
{
   border-bottom-width: 1px;

   line-height: 100%;

   padding: 3px 10px 2px 10px;

   vertical-align: middle;
}

#SearchBar table
{
   margin: 0px;
   width:  100%;
}

#SearchBar table tr td
{
   font-size: 9pt;
   line-height: 100%;

   vertical-align: middle;
}

#SearchBar table tr td.SearchBarRight { text-align: right; }

#SideBar
{
   padding: 0px;
   width:   140px;

   vertical-align: top;
}

.Footer
{
    text-align: center;
    font-size: 9px;
    padding-top: 5px;
}

.Footer a
{
   color: #903;
}

.Footer p
{
    line-height: 150%;
}

div.Success
{
   font-weight: bold;
   font-size: 8pt;
   margin-top: 15px;
   color: #00F;
}

/* This is for the "sales_rep_filter" template */
.SalesRepFilterTable
{
   width: 100%;
   padding: 0px;
   margin: 0px 0px 10px 0px;
}

#SalesRepFilterHeader
{
   line-height: 100%;
   height: 26px;
   vertical-align: middle;
   font: bold 9pt Verdana, Helvetica, sans-serif;
   background-color: #eee;
   border-width: 1px 1px 0px 1px;
   padding-left: 5px;
}

#SalesRepFilterBodyLeft
{
   vertical-align: middle;
   border-width: 1px;
   padding: 5px;
   width: 215px;
}

#SalesRepFilterBodyRight
{
   vertical-align: top;
   border-width: 1px 1px 1px 0px;
   padding: 5px;
   width: 100%;
}

/* TODO: is this needed?
#SiteBanner img
{
   text-align:     left;
   vertical-align: top;
}
 */

@media print {
   #SideBar
   {
      display: none;
   }
}

.HomeDateField
{
	background-color: #efefef;
	border: solid 1px #777;
	color: #777;
	margin-bottom: 3px;
	padding: 0px 3px 0px 3px;
	cursor: pointer;
	font: bold 8pt Arial, sans-serif;
}

.ProofGroupDialog
{
  display: table;
}

.ProofGroupInnerDiv
{
  overflow: scroll;
  background: #555;
}

.ProofGroupInnerRow
{
  display: inline-block;
  background: #555;
  float: left;
}

.ProofGroupThumbnailContainer
{
  padding-left: 55px;
  float: left;
  padding-bottom: 40px;
}

.ProofGroupThumbnailImageContainer
{
  background: #555;
  width: 288px;
  height: 288px;
  margin: auto;
  padding: 0px;
}

.ProofGroupLabel
{
  margin: auto;
  color: #fff;
  text-shadow: 0 0 20px black;
  font-family: Verdana;
  font-size: 12pt;
}

.ProofGroupLabelDone
{
   margin: auto;
  color: #71ea88;
  text-shadow: 0 0 20px black;
  font-family: Verdana;
  font-size: 12pt;
}

.ProofGroupLabelContainer
{
  text-align: center;
  width: 288px;
  max-width: 288px;
  word-wrap: break-word;
}

.ConversationGroup
{
  position: relative; 
  width: 100%; 
  box-sizing: border-box; 
  padding: 0px;
  font-family: helvetica,sans-serif;
}

.ConversationGroup .TimeStamp
{
  top: 0px;
  left: -5px; 
  box-sizing: border-box; 
  text-align: right;
  line-height: 20px;
  font-family: helvetica,sans-serif;
  width: 79px;
  padding: 0px;
  float: left;
}

.ConversationGroup .Message
{
margin-left: 85px; 
box-sizing: border-box; 
position: relative; 
width: 90%  
padding: 0px;
}

.ConversationGroup .Message .User
{
box-sizing: border-box; 
font-weight: bold; 
line-height: 20px ;
padding: 0px;
padding-right: 10px;
}

.ConversationGroup .Message .MessageText
{
  line-height: 20px;
  font-family: helvetica, sans-serif;
  padding: 0px;
}

.DateDivider
{
  padding: 0px;
  width: 100%;
  border-bottom: 1px solid black;
  line-height: 0.1em;
  text-align: center;
}

.DateDivider span
{
  line-height: 0px;
  background: white;
  padding: 0 10px;
}

.ConversationForm
{
  position: relative;
  height: 20%;
}

.ConversationForm textarea
{
  position: absolute;
  top: 0px;
  left: 59px;
  height: 54px;
  width: 90%;
  border-radius: 0px 10px 10px 0px;
  border: 1px solid lightgray;
  padding: 10px 10px 10px 10px;
  resize: none;
  overflow: scroll;
}

.ConversationForm button
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 76px;
  border-radius: 10px 0px 0px 10px;
  background-color: white;
  border: 1px solid lightgray;
}