/*
the premise here is to provide a sheet for the formatting of complex widgets ( motifElements,  dueling list boxes etc)
This should contain rules that would otherwise be in common.css, but are skin independent
This prevent us from having to duplicate css.
*/

/* used by user-defined motifs to clear image backgrounds */
.userDefinedMRU img.userDefinedImage { background-image:none; }
.userDefinedMotif img.userDefinedImage { background-image:none; }
.userDefinedRL img.userDefinedImage { background-image:none;}
.userDefinedRL .pbHeader .pbTitle h3 { margin-left: 4px; }
/* end user-defined motifs */

/* begin motifElement */
.motifElement {
  border: 1px solid black;
  width: 150px;
  margin-right: .3em;
  text-decoration: none;
  padding: 0;
  overflow: hidden;
  height: 1.5em;
  display: block;
  text-decoration: none;
  cursor: default;
  background-color:#fff;
}

a.motifElement:hover {
  text-decoration: none;
}

.motifElement .iconChoice,
.motifElement .iconChoice img {
  width: 19px;
  height: 100%;
  background-color: #fff;
  float:left;
}

.motifElement .colorChoice {
  margin: 0;
  width: 128px;
  height: 100%;
  float:right;
  text-align:center;
  overflow: hidden;
}

.motifColorElement,
.motifColorElement .colorChoice {
  width:48px;
}

.motifColorElement .iconChoice {
  display: none;
}

.customDefinedMotif .iconChoice img.mruIcon {
  background-image: none;
}

/* this applies by default when the element is empty */
.motifElement .mruIcon {
  height: 16px;
  width: 16px;
}

/* begin motifInputElement */
.motifInputElement .motifElement,
.pickableMotifElement {
  cursor: pointer;
}

.motifInputElement {
  width: 170px;
  height: 20px;
  margin: 2px 10px 2px 0;
}

.motifInputElement .motifElement {
  position:absolute;
}

.motifInputElement .lookup {
  position: relative;
  left: 155px;
  top: 1px;
  padding: 0;
}

/* end motifInputElement */

/* begin MotifColorInputElement */
.motifColorInputElement {
  width: 70px;
  height: 20px;
  margin: 2px 10px 2px 0;
}
.motifColorInputElement .motifColorElement {
  position:absolute;
}
.motifColorInputElement .lookup {
  position: relative;
  top: 1px;
}
/* end MotifColorInputElement */

.bPageBlock .detailList .motifElement td {
  color: #fff;
}

.apexp .bPageBlock p {
      margin-bottom: 0px;
}

.apexp .bPageBlock .detailList .list table td,
.apexp .bPageBlock .detailList .list table th {
    border-bottom: 1px solid #E3DEB8;
}

.apexp .bPageBlock .detailList {
    width:100%;
}

.apexp .bPageBlock .detailList .list {
    width:100%;
}

.apexp .bPageBlock .error {
    border: 2px solid #CC0000;
}

.apexp .detailList .list td,
.apexp .detailList .list th,
.apexp .editPage .bPageBlock .detailList .list tr td,
.apexp .editPage .bPageBlock .detailList .list tr th {
    padding: 4px 2px 4px 5px;
    color: #333;
    border-bottom: 1px solid #E3DEB8;
}

.apexp .bPageBlock .detailList .list .last td,
.apexp .bPageBlock .detailList .list .last th,
.apexp .detailList .list .totalRow td,
.apexp .detailList .list .totalRow th
{
    border-bottom-width: 0;
}

.apexp .totalRow {
    font-weight:bold;
    background-color:#E3E3D7;
}

.apexp .detailList .list .headerRow th {
    border-bottom: 2px solid #CCC;
    white-space: nowrap;
}


/* Mouseover info element */
.mouseOverInfoOuter {
    position: relative;
    display: inline;
}



.mouseOverInfo{
    position: absolute;
    display: none;
    left: 22px;
    bottom: 20px;
    width: 20em;
    background-color: #FEFDB9;
    padding:  2px;
    border: 1px solid black;
    z-index: 11;
    /*Mozilla:*/
    opacity: 0;
    white-space: normal;
    font-weight: normal;
    color: #000;
}


.whatIsThisElement {
  margin-left: 0.5em;
  vertical-align: bottom;
}
/* End mouseover info element */

/* A tip, i.e. Tip: Don't tread on me */

.tipArea {
    padding-top: 5px;
    color:#999;
}

/* For tags */

.tagEditArea {
    margin:0;
    background-color: #fff;
    padding:5px;
    border:dotted 1px #ccc;
}

.tagSelectionList A.tag_selector {
    padding: 0 2px;
    white-space:nowrap;

    color:#666;
    text-decoration:none;
}

.tagSelectionList A.tag_selector.selected {
    background-color:#FCC;
    color:#333;
    text-decoration:none;
}

.tagSelectionList A:hover.tag_selector {
    background-color:#eee;
    color:#333;
    text-decoration:none;
}

.tagSelectionList A:hover.tag_selector.selected {
    background-color:#e88;
    color:#333;
    text-decoration:none;
}

.tagSelectionList {
    line-height:1.5em;
    margin:0 0.75em 0.75em;
}

/* ManageableInfoElement */
.manageableInfo {
background-color:#ffc;
border:1px solid #aa8;
color:#000;
margin:4px 20px 16px;
padding:8px 8px 6px;
}

.manageableMoreInfo ul {
    list-style-type: disc;
}

.manageableInfo img {
padding-right: 6px;
}

.manageableMoreInfo {
background-color:#fff;
border:1px solid #dda;
font-weight:normal;
margin:12px 0 2px;
padding:10px 8px 6px 18px;
display:none;
}

.manageableMoreInfo th {
font-weight: bold;
vertical-align: top;
}

/*End ManageableInfoElement */

/* Begin VerticallyArrangableSelectElement */
.verticalSelectElement .upDownButtons {
  vertical-align: middle;
}

.verticalSelectElement .upDownButtons img {
  display: block;
}

.verticalSelectElement label {
  display:block;
  text-align:center;
  font-weight: bold;
}
/* End VerticallyArrangableSelectElement */

/*Begin number-label image (just like the one used in custom webTab wizard) */
img.numberLabel {
    float: right;
}
/*End number-label image */
.radioGroup {
    padding:0;
    margin:0;
}

.radioGroup li {
    padding-left:2em;
    list-style-type:none;
    margin-left:0;
    text-indent:-2em;
}

/* Date Picker */
.datePicker {
    z-index: 100;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 17em;
    background-color: #b7c6b2;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    margin: 0;
    /* check this */
    padding: 1px 1px 2px 2px;
}

.datePicker .dateBar {
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    padding: 1px 2px;
}

.datePicker select {
    vertical-align: top;
}

.datePicker .calBody {
    border: 1px solid #7b829d;
    border-bottom: none;
}

.datePicker .calDays {
    font-family: 'Verdana', 'Geneva', sans-serif;
    font-size: .8em;
    font-weight: normal;
    color: #333;
    width: 100%;
}

.datePicker .calDays .prevMonth,
.datePicker .calDays .nextMonth {
    color: #999;
}

.datePicker .calDays th,
.datePicker .calDays td {
    text-align: center;
    width: 14%;
}

.datePicker .calDays .dayOfWeek {
    background: #ececec url(http://thegrid.itsonthegrid.com/img/func_icons/cal/dp_daysbg.gif) repeat-x top;
    padding: 3px 0;
    border-bottom: 1px solid #e0dee0;
}

.datePicker .calDays .weekend,
.datePicker .calDays .weekday {
    border-right: 1px solid #e0f0fb;
    border-bottom: 1px solid #e0f0fb;
    padding: 5px 0;
    cursor: pointer;
}

.datePicker .calDays .weekend {
    background-color: #f2f3f7
}


.datePicker .calDays .weekday {
    background-color: #fff;
}

.datePicker .calDays .dueDate {
    font-weight: bold;
    color: #000;
    background-color: #f10;
}

.datePicker .calDays .todayDate {
    border: 1px solid #000;
}

.datePicker .calDays .startDate,
.datePicker .calDays .endDate {
    text-decoration: underline;
}

.datePicker .calDays .startDate,
.datePicker .calDays .endDate,
.datePicker .calDays .selectedDate {
    font-weight: bold;
    background-color: #fbfae3;
    color: #000;
    font-weight: bold;
}

.datePicker .calDays .highlight {
    background-color: #e0f0fd;
    color: #000;
}

.datePicker .buttonBar {
    background-color: #ececec;
    border-top: 1px solid #e1e2e9;
    padding: 2px 0;
    text-align: center;
    clear: both;
}

.datePicker .buttonBar .calToday {
    font-weight: bold;
    text-decoration: underline;
    font-size: 91%;
}

.datePicker .dateBar .calLeft,
.datePicker .dateBar .calLeftOn,
.datePicker .dateBar .calRight,
.datePicker .dateBar .calRightOn {
    margin: 2px 2px 0 2px;
}

.datePicker .dateBar .calLeft { background-image: url(http://thegrid.itsonthegrid.com/img/func_icons/cal/dp_left.gif);
	background-position: 0px 0px;width:13px;
	height:21px;
    background-position: top left;
}

.datePicker .dateBar .calLeftOn { background-image: url(http://thegrid.itsonthegrid.com/img/func_icons/cal/dp_left.gif);
	background-position: 0px 0px;width:13px;
	height:21px;
    background-position: top right;
}

.datePicker .dateBar .calRight { background-image: url(http://thegrid.itsonthegrid.com/img/func_icons/cal/dp_right.gif);
	background-position: 0px 0px;width:13px;
	height:21px;
    background-position: top left;
}

.datePicker .dateBar .calRightOn { background-image: url(http://thegrid.itsonthegrid.com/img/func_icons/cal/dp_right.gif);
	background-position: 0px 0px;width:13px;
	height:21px;
    background-position: top right;
}
/* end Date Picker */

/* Time Picker */
.timeInput {
    white-space: nowrap;
}

.hourPicker {
    height: 12.7em;
    width: 7.5em;
    overflow-y: scroll;
    overflow-x: hidden;
    white-space: pre;
    border: 1px solid #b7c6b2;
    display: none;
    position: absolute;
    z-index: 51;
    top: 0;
    left: 0;
    background: #fff;
}

.hourPicker .hour {
    text-align: right;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 12px;
    background: url(http://thegrid.itsonthegrid.com/img/func_icons/arrowright10.gif) no-repeat right center;
    margin-right: 4px;
}

.hourPicker .simpleHour {
    text-align: left;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 12px;
    margin-right: 4px;
}

.hourPicker div.hover {
    background-color: #e0f0fb;
}

.hourPicker .arrow {
    background: url(http://thegrid.itsonthegrid.com/img/func_icons/arrowright10.gif);
    width: 10px;
    height: 10px;
}

.minutePicker {
    display: none;
    position: absolute;
    z-index: 51;
    top: 0;
    left: 0;
    border: 1px solid #e0f0fb;
    background-color: #fff;
}

.minutePicker .minutes {
    width: 2em;
    font-weight: bold;
    padding: 1px 2px;
    border-left: 1px solid #e0f0fb;
    text-align: center;
    float: left;
}

.minutePicker div.hover {
    background-color: #e0f0fb;
    text-decoration: underline;
}

/* end Time Picker */

/* Color Picker */
.colorPicker {
    display: none;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    z-index: 20;
    background-color: #BCBCBC;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color:  #000;
    width: 230px;
}

.colorPickerHeader {
    text-align: center;
}

.colorPickerColorView,
.colorPickerHexView {
    border: 1px solid black;
    cursor: default;
    margin: 4px 3px 2px;
}

.colorPickerColorView {
    width: 3em;
}

.colorPickerHexView {
    background-color: #FFF;
    color: #000;
    padding-left: 5px;
    width: 7em;
}

.colorPickerContent {
    background-color: #FFF;
    border: 1px inset #8E8C8F;
    margin: 2px;
}

.colorPickerPalette {
    border: 2px solid #FFF;
    margin: 2px auto;
}

.colorPickerPalette td {
    cursor: pointer;
}

.colorPickerPaletteChoice {
    display: block;
    height: 7px;
    margin: 2px;
    width: 7px;
}

td.highlight .colorPickerPaletteChoice {
    border-width: 1px;
    border-style: solid;
    border-color: #FFF;
    margin: 1px;
}
/* end Color Picker */

/* Color Input */
.colorBox {
    border: 1px solid #000;
    cursor: pointer;
    float: left;
    height: 1em;
    margin: 4px;
    width: 1em;
}

.errorColorBox {
     background-image: url(http://thegrid.itsonthegrid.com/img/x.gif);
     background-position: center center;
     border-color: #F00;
}
/* end Color Input */

/* style for a 'hightlighted' header msg to show above entity detail (added for partner network 'entity shared' message) */
.detailHeaderHighlightMsg{
    background-color: #FFFFCC;
    padding: 5px;
    margin-top: 20px;
    margin-bottom: 10px;
}


/* style to use for a name within a 'hightlighted' header message (see detailHeaderHighlightMsg above).  This will be, for instance, a company name or other name you would like to draw attention to */
.detailHeaderHighlightMsgName{
    font-weight: bold;
}

/* Begin MailmergeTemplateSelectElement */
.mailmergeTemplateSelectElement .mmtse_title,
.mailmergeTemplateSelectElement .mmtse_description {
  font-weight: bold;
}

.mailmergeTemplateSelectElement .descriptionDiv {
  padding-top: 10px;
}

.mailmergeTemplateSelectElement .mmtse_preview {
  padding-top: 10px;
}

.mailmergeTemplateSelectElement .mmtse_selectEle {
  width: 300px;
}
/* End MailmergeTemplateSelectElement */

/* Begin MailToElement */
.gmailLink {
    white-space: nowrap;
    display: inline;
}

.gmailIcon { background-image: url(http://thegrid.itsonthegrid.com/img/google/gmail_M_icon.gif);
	background-position: 0px 0px;width:16px;
	height:12px;
    vertical-align: middle;
    margin-right: 0.25em;
}
/* End MailToElement */


/* OverlayDialog */

.dialogClose, .dialogCloseOn { background-image: url(http://thegrid.itsonthegrid.com/img/func_icons/util/dialogClose16.gif);
	background-position: 0px 0px;width:16px;
	height:16px;
    float: right;
    cursor: pointer;
    background-position: top left;
    line-height:100em;
    overflow:hidden;
}

.dialogCloseOn {
    background-position: top right;
}

.dialogCloseOn:focus {
	outline:1px dotted #000;	
}

.dialogResize {
    background: transparent url(http://thegrid.itsonthegrid.com/img/func_icons/util/rescale11.gif) no-repeat bottom right;
    cursor: se-resize;
    position: absolute;
    bottom: 5px;
    right: 5px;
    height: 11px;
    width: 11px;
}

.overlayBackground {
    background-color: #fff;
    border: none;
    display: none;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    /* Ext 3.x Ext.WindowMgr creates new windows starting at 9000 for Guided Tours, etc. Ext 4.x Ext.ZIndexManager starts around 20000 and adds 10000 for each group of windows. This must be on top of all those. */
    z-index: 50100;
}

.overlayDialog {
    position: fixed;
    display: none;
    visibility: hidden;
    z-index: 50101;
    top: 40px;
    left: 150px;
}

.absolutePositionedOverlayDialog {
    position: absolute;
}

.cssDialog {
    top: 25%;
    left: 50%;
}

.inlineOverlayDialog {
}

.overlayDialog .topLeft,
.inlineOverlayDialog .topLeft {
    padding: 4px 2px 6px 12px;
    background: transparent url(http://thegrid.itsonthegrid.com/img/overlaytopleft.gif) no-repeat top left;
}

.overlayDialog .movable {
    cursor: move;
}

.overlayDialog .topLeft h2,
.inlineOverlayDialog .topLeft h2 {
    color: #fff;
    font-size: 1.1em;
}

.overlayDialog .topRight,
.inlineOverlayDialog .topRight {
    padding-right: 6px;
    background: transparent url(http://thegrid.itsonthegrid.com/img/overlaytopright.gif) no-repeat top right;
}

.overlayDialog .middle,
.inlineOverlayDialog .middle {
    background-color: #f5f5f5;
    border-left: 1px solid #393A3C;
    border-right: 1px solid #393A3C;
}

.overlayDialog .innerContent,
.inlineOverlayDialog .innerContent {
    padding: 12px 16px 8px 20px;
}

.overlayDialog .innerContent h2,
.inlineOverlayDialog .innerContent h2 {
    font-family: 'Arial';
    font-size: 1.4em;
}

.overlayDialog .innerContent p,
.inlineOverlayDialog .innerContent p {
    margin: 8px 0;
}

.overlayDialog .innerContent .split,
.inlineOverlayDialog .innerContent .split {
    border-left: 1px solid #919191;
    border-right: 1px solid #919191;
    background: transparent url(http://thegrid.itsonthegrid.com/img/overlaysplit.gif) repeat-x top;
    height: 16px;
    padding-left: 20px;
}

.overlayDialog .innerContent .pointer,
.inlineOverlayDialog .innerContent .pointer {
    background: url(http://thegrid.itsonthegrid.com/img/overlaypointer.gif) no-repeat;
    width: 27px;
    height: 16px;
}

.overlayDialog .innerContent .infoImage,
.inlineOverlayDialog .innerContent .infoImage {
    float: left;
    height: 100%;
    width: 60px;
}

.overlayDialog .innerContent .buttons,
.inlineOverlayDialog .innerContent .buttons {
    text-align: center;
    padding-top: 12px;
}

.overlayDialog .innerContent .buttons .btn,.overlayDialog .innerContent .buttons .btnDisabled,
.inlineOverlayDialog .innerContent .buttons .btn,.overlayDialog .innerContent .buttons .btnDisabled{
    margin: 0 10px 0 0;
    min-width: 50px;
}

.overlayDialog .scrollableArea, .overlayDialog .scrollableAreaBottomBorder,
.inlineOverlayDialog .scrollableArea, .overlayDialog .scrollableAreaBottomBorder {
    border: 1px solid #919191;
    background-color: #fff;
    overflow-y: auto;
}

.overlayDialog .scrollableArea ,
.inlineOverlayDialog .scrollableArea{
    border-bottom: none;
}

.overlayDialog .summaryArea ,
.inlineOverlayDialog .summaryArea{
    margin-top: -13px;
    border: 1px solid #919191;
    border-top: none;
    padding: 12px 8px 4px 8px;
    background-color: #f3f3ec;
    height: 50px;
}

.overlayDialog .bottomLeft ,
.inlineOverlayDialog .bottomLeft{
    height: 4px;
    background: transparent url(http://thegrid.itsonthegrid.com/img/overlaybottomleft.gif) no-repeat bottom left;
}

.overlayDialog .bottomRight ,
.inlineOverlayDialog .bottomRight{
    height: 4px;
    padding-right: 4px;
    background: transparent url(http://thegrid.itsonthegrid.com/img/overlaybottomright.gif) no-repeat bottom right;
}

.accessibleDialogPopup {
    margin: 12px;
    padding: 12px;
}

.accessibleDialogPopup .buttons {
    text-align: center;
    padding-top: 12px;
}

.accessibleDialogPopup .buttons .btn, .accessibleDialogPopup .buttons .btnDisabled  {
    margin: 0 10px 0 0;
    min-width: 50px;
}

.backgroundConfirm{
    background-color: #e7f8e6;
}

.backgroundWarn{
    background-color: #f7f2d8;
}

.backgroundInfo{
    background-color: #dae5f2;
}

.backgroundError{
    background-color: #f1d7d7;
}

.contentConfirm{
    border: 1px solid #3ca500;
}

.contentWarn{
    border: 1px solid #ff9900;
}

.contentInfo{
    border: 1px solid #287fe1;
}

.contentError{
    border: 1px solid #cc0000;
}

/* END OverlayDialog */

/* BEGIN Messaging */

.message {
    background-color: #ffc;
    border-style: solid;
    border-width: 1px;
    color: #000;
    padding: 6px 8px 6px 6px;
    margin: 4px 20px;
}

.confirmM5,
.warningM5,
.infoM5,
.errorM5 {
    border: none;
}

.confirmM6,
.confirmM4,
.confirmM3,
.confirmM2,
.confirmS1 {
    border-color: #390;
}

.confirmM4 .msgIcon,
.confirmSmall { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/confirm16.png);
	background-position: 0px 0px;width:16px;
	height:16px; }

.confirmM3 .msgIcon,
.confirmMedium { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/confirm24.png);
	background-position: 0px 0px;width:24px;
	height:24px; }

.confirmM2 .msgIcon,
.confirmLarge { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/confirm32.png);
	background-position: 0px 0px;width:32px;
	height:32px; }

.confirmS1 .msgIcon { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/securityconfirm48.gif);
	background-position: 0px 0px;width:48px;
	height:48px; }

.errorM6,
.errorM4,
.errorM3,
.errorM2,
.errorS1 {
    border-color: #c00;
}

.errorM4 .msgIcon,
.errorSmall { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/error16.png);
	background-position: 0px 0px;width:16px;
	height:16px; }

.errorM3 .msgIcon,
.errorMedium { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/error24.png);
	background-position: 0px 0px;width:24px;
	height:24px; }

.errorM2 .msgIcon,
.errorLarge { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/error32.png);
	background-position: 0px 0px;width:32px;
	height:32px; }

.errorS1 .msgIcon { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/securityerror48.gif);
	background-position: 0px 0px;width:48px;
	height:48px; }

.infoM6,
.infoM4,
.infoM3,
.infoM2,
.infoS1 {
    border-color: #39f;
}

.infoM4 .msgIcon,
.infoSmall { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/info16.png);
	background-position: 0px 0px;width:16px;
	height:16px; }

.infoM3 .msgIcon,
.infoMedium { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/info24.png);
	background-position: 0px 0px;width:24px;
	height:24px; }

.infoM2 .msgIcon,
.infoLarge { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/info32.png);
	background-position: 0px 0px;width:32px;
	height:32px; }

.infoS1 .msgIcon { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/securityinfo48.gif);
	background-position: 0px 0px;width:48px;
	height:48px; }

.warningM6,
.warningM4,
.warningM3,
.warningM2,
.warningS1 {
    border-color: #f90;
}

.warningM4 .msgIcon,
.warningSmall { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/warning16.png);
	background-position: 0px 0px;width:16px;
	height:16px; }

.warningM3 .msgIcon,
.warningMedium { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/warning24.png);
	background-position: 0px 0px;width:24px;
	height:24px; }

.warningM2 .msgIcon,
.warningLarge { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/warning32.png);
	background-position: 0px 0px;width:32px;
	height:32px; }

.warningS1 .msgIcon { background-image: url(http://thegrid.itsonthegrid.com/img/msg_icons/securitywarning48.gif);
	background-position: 0px 0px;width:48px;
	height:48px; }

.bPageBlock .message {
    margin: 0 0 4px 0;
}

body.lookupTab .bPageBlock .message {
    margin: 0;
}

.lookup .message {
    margin: 0 0px 12px;
}

.message .messageTable .messageCell {
    vertical-align: middle;
}

.pbError .message {
        text-align: left;
        font-weight: normal;
}

.message .messageText {
    margin-left: 8px;
}

.message .messageText h4 {
    font-weight: bold;
    display: block;
}

.message .messageText a {
    margin: 0 8px;
    color: #333;
    font-size: 91%;
}

.message .messageTextAndLinks a {
    margin: 0 0;
    font-size: 100%;
}

/* END Messaging */

/* HTML Detail Element*/

.htmlDetailElementTable {
    width: 100%;
}

.htmlDetailElementTable td {
    padding: 1px;
}

.htmlDetailElementDiv {
    display: none;
}

#recaptcha_image {
    margin-bottom: 6px;
}

#recaptcha_response_field {
    width: 250px;
    display: block;
}

.captchaContent tr td {
    padding: 4px;
    border: 1px solid #bfbfbf;
}

/* END HTML Detail Element*/

.spanIcon {
        background-image: url(http://thegrid.itsonthegrid.com/img/func_icons/ispan12.gif);
	background-position: 0px 0px;width:12px;
	height:12px;
        margin-left: 4px;
}

.twistyHeader .twistyText{
        text-decoration: underline;
}


.scheduledIcon { background-image: url(http://thegrid.itsonthegrid.com/img/func_icons/schedReport34.gif);
	background-position: 0px 0px;width:17px;
	height:16px;
    vertical-align: middle;
    margin-right: 0.25em;
    background-position: left top;
}

a.scheduleLink{

}

a.scheduleLink:hover img { background-image: url(http://thegrid.itsonthegrid.com/img/func_icons/schedReport34.gif);
	background-position: 0px 0px;width:17px;
	height:16px;
        background-position: -17px top;
}

/* ContentDocumentOverlayElement */
h2#docViewerOverlayTitle div {
    overflow : hidden;
    margin-right : 35px;
}

.overlayDialog.docViewerOverlay {
    position: fixed;
}

.docViewerOverlay .innerContent {
    padding:4px 4px 0;
}

.docViewerContainerParent {
    height: 484px;
    margin-left: auto;
    margin-right: auto;
}

.docViewerContainer {
    width:100%;
    height:100%;
}
/* END ContentDocumentOverlayElement */

/* ContentThumbnailElement */
a .contentThumbnail {
    padding: 3px;
    border: 1px solid #d0d0d0;
}

a:hover .contentThumbnail {
    padding: 2px;
    border: 2px #1797c0 solid;
}

img.contentThumbnail {
    margin: 4px 3px 3px 0;
}

img.contentThumbnailNoPreview {
    margin: 0 0 0 10px;
}

/* END ContentThumbnailElement */

.contentActionIcon {
    width: 16px;
    padding-right: 2px;
    margin-left: -1px;
}

.contentActionElement {
    width: 18px;
    vertical-align: middle;
    display: inline-block;
}

.contentActionLabel {
    white-space: nowrap;
    vertical-align: top;
    font-size: 0.9em;
    line-height: 18px;
}
/* END ContentActionElement */

/* ContentPostElement */
.contentPost {
    width: 100%;
}

.contentPost .rightSideCell {
    vertical-align: top;
    padding-left: 9px;
}

.contentPost .thumbnailCell {
    vertical-align: top;
    width: 1px; /* Fit thumbnail */
}

.contentPost .linkCell {
    padding-right: 4px;
    white-space : nowrap;
}

.contentTitle {
    font-weight: bold;
    color: #333435;
    font-size: 1em;
}

.contentTitleLink {
    font-weight: bold;
    font-size: 1em;
}

.contentDescription {
    vertical-align: top;
    color: #222;
    font-size: 1em;
}
/* END ContentPostElement */

/* Import Wizard Pages */
.importWizTable {
    width: 100%;
}
.importWizTable td.wizStepInfo {
    padding: 10px 15px;
}
.importWizTable td.stepNum,
.importWizTable td.stepDir {
    padding: 8px 5px;
    vertical-align: top;
}
.orgimport_format td.stepNum,
.orgimport_format td.stepDir {
    padding-top: 3px;
    padding-bottom: 3px;
}
.importWizTable td.matchOption {
    padding-top: 12px;
}
.stepNum {
    text-align: right;
    font-weight: bold;
}
.importWizTable .stepDir > label {
    font-size: 1em;
}
.importWizTable .stepDir > .mouseOverInfoOuter {
    bottom: -3px;
}
.stepBtns {
    text-align: right;
}
.importWizTable .importWizOptTable {
    margin-top: 5px;
}
.importWizTable .importWizOptTable td.radioOption {
    padding: 2px 0;
    vertical-align: middle;
}
.importWizTable .importWizOptTable td.radioOption input {
    margin: 0 5px 0 0;
    vertical-align: middle;
}
/* #W-794174 - may have to find another fix for this depending on which import wizards are affected */
body.setupTab #stageForm > div.bWizardBlock.tertiaryPalette {
    background-color: transparent;
    border: 0 none;
    margin-right: 0;
}
body.setupTab div.bWizardBlock .pbWizardBody table.list div.mouseOverInfoOuter {
    display: inline-block;
    vertical-align: middle;
    left: 5px;
}
#divMatch,
#divStyle {
    margin-top: 10px;
}
tr.newWizRow td {
    padding-top: 10px;
}

/* temporary <hr> style until all pages are converted to new zen markup */
hr.divider{
    height:0;
    border:none;
    margin:5px 0;
    border-top:1px dotted #D9D9D9;
}

/*Dev toolbar slider*/

#devSlide {
    position: fixed;
    width: 270px;
    top: 160px;
    right: -230px;
    z-index: 7;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -transition: all 0.5s ease-out;
    display: none;
}

#devSlide .handle {
    position: absolute;
    width: 20px;
    top: 0;
    left: 20px;
    background-color: #226B86;
    border-width: 4px;
    border-style: solid;
    border-right-style: none;
    border-color: #FFF;
    padding: 7px 0;
    padding-right: 2px;
    text-align: left;
    color: white;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-box-shadow: -2px 0 2px #A0A6AB;
    box-shadow: -2px 0 2px #A0A6AB;
    z-index: 10;
}

#devSlide .header {
    padding-bottom: 2px;
}


#devSlide .slideContainer{
    position: absolute;
    right: -2px;
    top: 0;
    width: 210px;
    background-color: #226B86;
    border: 4px solid #FFF;
    padding: 6px;
    padding-top: 3px;
    margin: 0;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-radius-left: 5px;
    -moz-box-shadow: 0 0 2px #A0A6AB;
    -webkit-box-shadow: 0 0 2px #A0A6AB;
    box-shadow: 0 0 2px #A0A6AB;
    z-index: 9;
}

#devSlide .slideBody {
    background-color: white;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 3px solid #FFF;
}

#devSlide .slideList{
    background-color: white;
    margin: 0;
    padding: 0;
}

#devSlide hr {
    margin-left: 3px;
    margin-right: 3px;
    clear: both;
    color: #ccc;
}

#devSlide .slideList li{
    list-style-type: none;
    margin: 1px;
    -moz-border-radius: 9x;
    border-radius: 9px;
    clear: both;
}

#devSlide .slideList li a{
    line-height: 1.3em;
    padding: 5px;
}

#devSlide .helpIcon {
    background: transparent url(http://thegrid.itsonthegrid.com/img/alohaSkin/help_grey.png) no-repeat;
}

#devSlide .slideList li.hover{
    background-color: #cfeef8
}

#devSlide .slideList li.hover .toolLink{
    text-decoration: underline;
}

#devSlide .slideList li.hover .toolNewLink{
    text-decoration: none;
}



#devSlide .toolLink {
    color: #096186;
    text-decoration: none;
    float: left;
}

#devSlide .toolNewLink {
    color: #096186;
    margin-left: 3px;
    padding-left: 2px;
    display:none;
    float: right;
}

#devSlide .toolNewLink img {
    margin-right: 2px;
    vertical-align: text-bottom;
}

#devSlide .hover .toolNewLink {
    display:block;
}

#devSlide .footer {
    text-align: right;
    padding: 3px 1px;
}

#devSlide .footer a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

#devSlide .footer a:hover {
    text-decoration: underline;
}

#devSlide .helpLink {
    float: right;
    margin-top: 5px;
}