/**********************************************************************************************

  CSS on Sails
  Title: Profusion
  Author: XHTMLized (http://www.xhtmlized.com/)
  Date: February 2010

***********************************************************************************************

  1. BASE
      1.1 Reset
      1.2 Accessibility Navigation & Hide
      1.3 Clearfix
      1.4 Default Styles

  2. LAYOUT
      2.1 Structure
      2.2 Header
      2.3 Navigation
      2.4 Content
      2.5 Sidebar
      2.6 Footer

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 1.1 Reset
-----------------------------------------------------------------------------------------------*/

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
a, ins, del { text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { text-align: left; }

/* 1.2 Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/

ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }

/* 1.3 Clearfix
-----------------------------------------------------------------------------------------------*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

/* 1.4 Default Styles
-----------------------------------------------------------------------------------------------*/
body {
  color: #666;
  font-size: 11px;
  font-family: Arial, sans-serif;
  background: #000 url(../images/bg2.jpg) no-repeat 0 0;
}
body.inbox {
  background: #000 url(../images/bg1.jpg) no-repeat 0 0;
}
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
th { font-weight: normal; }
address, cite, dfn { font-style: normal; }
li { list-style: none; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font-family: Arial, sans-serif; font-size: 11px; }
a, a:visited { color: #7dc042; text-decoration: none; }
a:hover, a:active { color: #7dc042; text-decoration: underline; }

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/

/* 2.1 Structure
-----------------------------------------------------------------------------------------------*/

/* 2.2 Header
-----------------------------------------------------------------------------------------------*/

#header {
  height: 119px;
  position: relative;
}

  #header h1 {
    padding: 87px 0 0 132px;
  }

    #header h1 a {
      display: block;
    }

/* 2.3 Navigation
-----------------------------------------------------------------------------------------------*/

/* 2.4 Content
-----------------------------------------------------------------------------------------------*/

#content {
  position: relative;
  padding: 0 0 80px 59px;
}

  #content div.toplayer {
    position: absolute;
    /*
    top: 50%;
    left: 50%;
    margin: -434px 0 0 -370px;
    */
    width: 740px;
    height: 630px;
    background: url(../images/overlay.png) no-repeat 0 0;
    z-index: 100;
  }

    #content div.toplayer h2 {
      position: absolute;
      top: 30px;
      left: 30px;
    }

      #content div.toplayer h3 {
        font-size:26px;
        left:30px;
        position:absolute;
        top:77px;
      }

      #content div.toplayer .qabox {
        position: absolute;
        top: 119px;
        left: 23px;
        width: 382px;
        height: 467px;
        padding: 4px 4px 4px 4px;
        background: url(../images/overlay_box1.png) no-repeat 0 0;
      }

        #content div.toplayer .qabox .qa-view {
          margin: 0 0 0 10px;
          height: 457px;
          padding: 5px 0;
          overflow: auto;
          position: relative;
        }
        
        #content div.toplayer .qabox .qa-view .spacer {
          height: 457px;
          width: 300px;
        }

      #content div.toplayer p.infobox {
        position: absolute;
        top: 44px;
        right: 82px;
        display: block;
        width: 221px;
        height: 60px;
        padding: 0; /*16px 0 0 19px;*/
        background: none; /*url(../images/overlay_infobox.png) no-repeat 0 0;*/
        font-size: 15px;
        line-height: 1.1em;
      }

      #content div.toplayer .infopic {
        position: absolute;
        top: 42px;
        right: 45px;
        display: block;
      }

      #content div.toplayer form {
        position: absolute;
        top: 119px;
        right: 44px;
        display: block;
        width: 261px;
        height: 489px;
        background: url(../images/overlay_box2.png) no-repeat 0 0;
      }

        #content div.toplayer form fieldset {
          padding: 8px 11px 0 10px;
        }

          #content div.toplayer form fieldset label {
            display: block;
          }

          #content div.toplayer form fieldset .fieldWithErrors label {
            color: #f00;
            font-weight: bold;
          }

          #content div.toplayer form fieldset label.textarea {
            padding-top: 11px;
          }

          #content div.toplayer form fieldset input[type="text"] {
            border:1px solid #CCCCCC;
            display:block;
            font-size:12px;
            height:22px;
            line-height:22px;
            margin:0 0 2px;
            padding:0 4px;
            width:230px;
          }

          #content div.toplayer form fieldset .fieldWithErrors input[type="text"], #content div.toplayer form fieldset .fieldWithErrors textarea {
            border: solid 1px #f00;
          }

          #content div.toplayer form fieldset textarea {
            display: block;
            width: 234px;
            height: 244px;
            font-size: 12px;
            border: solid 1px #ccc;
            padding: 4px 0 4px 4px;
          }

          #content div.toplayer form fieldset p {
            font-size: 9px;
            padding: 3px 0 0 2px;
            width: 140px;
            float: left;
            line-height: 10px;
          }

          .opera #content div.toplayer form fieldset p {
            line-height: 90%;
          }

          #content div.toplayer form fieldset input[type="submit"] {
            display: block;
            float: right;
            width: 86px;
            height: 23px;
            text-indent: -8000px;
            line-height: 23px;
            background: url(../images/button_submit.png) no-repeat 0 0;
            border: none;
            margin: 10px 0 0 0;
            cursor: pointer;
          }

      #content div.toplayer dl.webshots {
        position: absolute;
        top: 515px;
        right: 25px;
        width: 280px;
      }

        #content div.toplayer dl.webshots dt {
          color: #999;
          font-size: 12px;
          padding: 0 0 4px 0;
        }

        #content div.toplayer dl.webshots dd {
        }

          #content div.toplayer dl.webshots dd img {
            display: block;
            float: left;
            margin-right: 6px;
          }


      #content div.toplayer a.close {
        position: absolute;
        top: 14px;
        right: 25px;
        display: block;
        padding: 2px 26px 10px 0;
        background: url(../images/icon_close.png) no-repeat 100% 0;
        font-size: 10px;
      }

        #content div.toplayer a.close span {
          cursor: pointer;
        }

        #content div.toplayer a.close:hover span {
          text-decoration: underline;
        }

  #content div.box1 {
    width: 738px;
    height: 791px;
    padding: 5px;
    background: #ffffff url(../images/box1mid.png) repeat-y 0 0;
    padding-top: 0;
  }

    #content div.box1 .header {
      height: 68px;
      border-bottom: solid 1px #ccc;
      position: relative;
      background-color: #f3f3f3;
    }

      #content div.box1 .header h2 {
        height: 41px;
        padding: 9px 0 0 125px;
        font-size: 42px;
        letter-spacing: -2px;
      }

      .inbox #content div.box1 .header h2 {
        padding: 9px 0 0 120px;
      }

        #content div.box1 .header h2 img {
          position: absolute;
          top: 21px;
          left: 25px;
          display: block;
        }

      #content div.box1 .header a {
        display: block;
        position: absolute;
        top: 14px;
        right: 36px;
      }

    #content div.box1 table {
      width: 699px;
    }

        #content div.box1 table tr td {
          width: 330px;
          padding: 5px 0 9px 14px;
          text-align: right;
        }

        #content div.box1 table tr td:first-child {
          width: 308px;
          padding: 5px 14px 9px 28px;
        }

          #content div.box1 table tr td label {
            display: block;
            font-size: 12px;
            font-weight: bold;
            padding: 0 0 1px 0;
            text-align: left;
          }

          #content div.box1 table tr td textarea {
            width: 319px;
            height: 120px;
            padding: 7px 0 0 8px;
            border: solid 3px #999;
            margin-bottom: 6px;
            font-size: 12px;
            line-height: 120%;
          }


          #content div.box1 .content-top table tr td textarea {
            background: #ffffcc;
          }

          #content div.box1 table tr td:first-child textarea {
            width: 294px;
            height: 120px;
            padding: 7px 0 0 8px;
            border: solid 3px #999;
            margin-bottom: 6px;
            font-size: 12px;
            line-height: 120%;
          }

          #content div.box1 table tr td a {
            padding: 0 0 0 9px;
          }


    #content div.box1 .content-top {
      height: 306px;
    }

    .current #content div.box1 .content-top {
      background: #e1e1e1;
      border-bottom: solid 1px #ccc;
    }

    .host #content div.box1 .content-top {
      border-bottom: dashed 1px #ccc;
    }

      #content div.box1 .content-top div.hr {
        border-bottom: dotted 3px #fff;
        height: 6px;
        text-indent: -8000px;
        margin: 0 5px 0 5px;
      }

        #content div.box1 .content-top div.hr hr {
          display: none;
        }

    #content div.box1 p.infobar {
      border-bottom: solid 1px #ccc;
      padding: 2px 0 1px 28px;
      white-space: pre;
    }

      #content div.box1 .content-top fieldset.comment {
        padding: 10px 0 0 28px;
        width: 672px;
      }

      .host #content div.box1 .content-top fieldset.comment {
        padding: 4px 0 0 28px;
      }

        #content div.box1 .content-top fieldset.comment label {
          display: block;
          font-weight: bold;
          font-size: 12px;
          padding: 0 0 3px 1px;
        }

        #content div.box1 .content-top fieldset.comment input[type="text"] {
          display: block;
          border: solid 3px #ccc;
          width: 650px;
          padding: 0 8px 0 8px;
          height: 33px;
          margin: 0 0 5px 0;
          font-size: 21px;
          line-height: 33px;
        }

        .host #content div.box1 .content-top fieldset.comment input[type="text"] {
          height: 29px;
          line-height: 29px;
        }

        #content div.box1 .content-top fieldset.comment a {
          float: right;
        }

    #content div.box1 .content-bottom {
      height: 348px;
      overflow: auto;
      padding: 24px 0 0 0;
    }

    .host #content div.box1 .content-bottom {
      height: 373px;
    }

    #content div.box1 .content {
      height: 678px;
      overflow: auto;
      padding-left: 16px;
    }

      #content div.box1 .content dl {
        padding: 28px 196px 25px 49px;
      }

        #content div.box1 .content dl dt {
          font-size: 14px;
          font-weight: bold;
          padding: 0 0 1px 0;
        }

        #content div.box1 .content dl dd {
          font-size: 14px;
          color: #989898;
          line-height: 120%;
        }

      #content div.box1 .content ul {
        width: 608px;
        height: 26px;
        background: url(../images/toolbar.png) no-repeat 0 0;
      }

        #content div.box1 .content ul li {
          height: 26px;
          float: left;
        }

        #content div.box1 .content ul li.reject {
          padding: 0 0 0 51px;
        }

        #content div.box1 .content ul li.approved {
          padding: 0 0 0 289px;
        }

          #content div.box1 .content ul li a {
            display: block;
            height: 21px;
            padding: 5px 10px 0 13px;
            float: left;
            font-size: 12px;
            color: #fff;
            border-left: solid 2px #fff;
            border-right: solid 2px #fff;
            background-image: url(../images/toolbar.png);
            background-position: 50% 0;
            background-repeat: no-repeat;
          }

          #content div.box1 .content ul li.reject a {
            background-position: 50% -52px;
            border-right: none;
          }

          #content div.box1 .content ul li.approved a {
            background-position: 50% -26px;
          }

  #content div.box2 {
    position: absolute;
    top: 0px;
    left: 873px;
    width: 418px;
    height: 791px;
    padding: 5px;
    background: url(../images/box2.png) no-repeat 0 0;
  }

    #content div.box2 .header {
      height: 68px;
      border-bottom: solid 1px #ccc;
      position: relative;
    }

      #content div.box2 .header h2 {
        height: 41px;
        padding: 9px 0 0 125px;
        font-size: 42px;
        letter-spacing: -2px;
      }

        #content div.box2 .header h2 img{
          position: absolute;
          top: 21px;
          left: 25px;
          display: block;
        }

      #content div.box2 .header a {
        display: block;
        position: absolute;
        top: 14px;
        right: 13px;
      }

    #content div.box2 .content {
      padding: 7px 0 0 23px;
      overflow: auto;
      height: 715px;
    }

  #content div.qa-view {
  }

    #content div.qa-view p {
      padding: 10px 40px 10px 33px;
    }

    #content div.qa-view strong {
      color: #444;
    }

    #content div.qa-view dl {
      width: 342px;
    }

      #content div.qa-view dl span {
        display: block;
        padding: 11px 11px 13px 12px;
        margin: 0 0 0 32px;
      }

      #content div.qa-view dl dt {
        background: url(../images/icon_q.png) no-repeat 0 0;
        margin: 0 0 4px 0;
      }

        #content div.qa-view dl dt span {
          background: url(../images/icon_q_bottom.png) no-repeat 100% 100%;
        }

      #content div.qa-view dl dd {
        background: url(../images/icon_a.png) no-repeat 0 3px;
        margin: 0 0 8px 0;
      }

        #content div.qa-view dl dd span {
          background: url(../images/icon_a_bottom.png) no-repeat 100% 100%;
        }

/* 2.5 Sidebar
-----------------------------------------------------------------------------------------------*/

/* 2.6 Footer
-----------------------------------------------------------------------------------------------*/

.error {
  color: #FF0000;
}
#thanks {
  background:transparent url(../images/overlay_box2.png) no-repeat scroll 0 0;
  display:block;
  height:478px;
  position:absolute;
  right:44px;
  top:119px;
  width:261px;
}
#thanks .thanks-inner {
  padding:15px 11px 0 10px;
  text-align: center;
}
.inbox-header {
  padding-left: 64px !important;
}
.expert_question {
  border:3px solid #999999;
  font-size:12px;
  height:120px;
  line-height:120%;
  margin-bottom:6px;
  padding:7px 0 0 8px;
  width:319px;
  text-align:left;
}

#content div.box1, #content div.box1 .content, #content div.box1 .content-bottom {
  height: auto;
}

.inline-message-edit lobal, .inline-message-edit input, .inline-message-edit textarea {
  display: block;
}
.inline-message-edit {
  margin-top: 10px;
  margin-left: 49px;
}
.notice {
  color:#FF0000;
  font-size:12px;
  height:14px;
  line-height:1em;
  margin-bottom:5px;
}
.timestamp {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  display: inline !important;
  font-size: 9px;
}
.box1top {
  background: transparent url(../images/box1top.png) no-repeat scroll 0 0;
  height: 8px;
}
.box1bot {
  background: transparent url(../images/box1bot.png) no-repeat scroll 0 0;
  height: 8px;
}
.note {
  bottom:22px;
  color:#999999;
  font-size:10px;
  left:30px;
  position:absolute;
}
.live-message {
  position: relative;
}
.unpublish-from-live {
  position: absolute;
  bottom: 10px;
  left: 2px;
}
.typing {
  float: right;
  margin-right: 15px;
}
.jobtitle, .chatname {
  font-size: 11px;
  display: block;
  line-height: 1.4em;
}
.chatname {

}
.chatdate {
  color: #666666;
}