DESK TEMPLATES

3/30/2017 - 11:51 PM

/*=============================================================================

CSS RESET

=============================================================================*/

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { border: 0; margin: 0; padding: 0; font-size: 100%; zoom: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; }

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote { list-style:none; }

h1, h2, h3, h4, h5, h6 { line-height:normal; font-weight:normal; }

a { text-decoration: none; outline:none; cursor:pointer; }

b, strong { font-weight: bold; }

img { color: transparent; font-size: 0; vertical-align: middle; border:none; -ms-interpolation-mode: bicubic; max-width:100%; height:auto !important; }

ul, li { display: list-item; list-style:none; }

table { border-collapse: collapse; border-spacing: 0; }

th, td, caption { font-weight: normal; vertical-align: top; text-align: left; }

svg { overflow: hidden; }

input[type="checkbox"] { margin:0 4px; width: 13px; height: 13px; padding: 0; vertical-align: middle; position: relative; top: -1px; *overflow: hidden;}

input, textarea, select { outline:none; margin:0; font-family:inherit;}

textarea{ overflow:auto; resize:none;}




*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html{-webkit-text-size-adjust: none; text-size-adjust: none;}

a, img, input, select, textarea, ._transition, button, .button, :before, :after{-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

a:active, .button:active, button:active{-webkit-transition: all 0.05s ease-out; -moz-transition: all 0.05s ease-out; transition: all 0.05s ease-out;}

._no-transition{-webkit-transition: none; -moz-transition: none; transition: none;}



/*=============================================================================

TYPOGRAPHY

=============================================================================*/



  html { height: 100%; }
  body { font:16px/1.5 Arial, 'Helvetica Neue', 'Helvetica', sans-serif; background: #F8F8F8; color: #272727; text-align:left;}
  h1, h2, h3, h4, h5, h6 { color: #000; }
  h1 { font-size: 36px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
  h4 { font-size: 18px; }
  h5 { font-size: 14px; }
  h6 { font-size: 14px; }
  a img { border: 0; }
  p { color: #535353; margin: 0 0 20px; }
  a { color: #254689; text-decoration: none; }
  a:hover { color: #254689; text-decoration: underline; }

.block{ padding-top: 80px; padding-bottom:80px;}

.block.-padding-top{ padding-bottom: 0;}

.block.-padding-bottom{ padding-top: 0;}


/* spacing */

.gap-10{ height:10px;}

.gap-20{ height:20px;}

.gap-30{ height:30px;}

.gap-40{ height:40px;}

.gap-50{ height:50px;}

.gap-60{ height:60px;}

.gap-70{ height:70px;}

.gap-80{ height:80px;}


/*floats*/

._float-right, float-right { float:right; }

._float-left, float-left { float:left; }

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.clearfix:before, .clearfix:after, .grid:before, .grid:after, .wrap:before, .wrap:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.clearfix:after, .grid:after, .wrap:after { clear: both; }

.clearfix, .grid, .wrap { zoom: 1; }


/* helpers */

._center-block{ margin-left:auto; margin-right:auto;}

._align-left { text-align: left; }

._align-center { text-align: center; }

._align-right { text-align: right; }

._uppercase{ text-transform:uppercase;}

._normalcase{ text-transform:none;}

._lowercase{ text-transform:lowercase;}

._underline{
  text-decoration: underline;
}

._vertical-align{ display:table; width:100%; height: 100%;}

._vertical-align > *{ display:table-cell; vertical-align:middle;}

._justify-content {
    text-align: justify;
}

._justify-content > * {
    display: inline-block;
    position: relative;
}

._justify-content:before{
    content: '';
    display: block;
    width: 100%;
}

._justify-content:after {
    content: '';
    display: inline-block;
    width: 100%;
}

._overflow-hidden{
  overflow: hidden;
}


._mg-b-xs{margin-bottom: 10px !important;}

._mg-b-sm{margin-bottom: 30px !important;}

._mg-b-md{margin-bottom: 50px !important;}

._mg-b-lg{margin-bottom: 75px !important;}

._mg-b-xl{margin-bottom: 120px !important;}

._mg-t-xs{margin-top: 10px !important;}

._mg-t-sm{margin-top: 30px !important;}

._mg-t-md{margin-top: 50px !important;}

._mg-t-lg{margin-top: 75px !important;}

._mg-t-xl{margin-top: 120px !important;}

._no-mg{ margin:0 !important;}

._no-mg-b{ margin-bottom:0 !important;}

._no-mg-t{ margin-top:0 !important;}

._pd-b-xs{padding-bottom: 10px !important;}

._pd-b-sm{padding-bottom: 30px !important;}

._pd-b-md{padding-bottom: 50px !important;}

._pd-b-lg{padding-bottom: 75px !important;}

._pd-b-xl{padding-bottom: 120px !important;}

._pd-t-xs{padding-top: 10px !important;}

._pd-t-sm{padding-top: 30px !important;}

._pd-t-md{padding-top: 50px !important;}

._pd-t-lg{padding-top: 75px !important;}

._pd-t-xl{padding-top: 120px !important;}

._no-pd{ padding:0 !important;}

._no-pd-b{ padding-bottom:0 !important;}

._no-pd-t{ padding-bottom:0 !important;}


/* responsive videos */

.responsive-video{position: relative; display: block; height: 0; padding: 0; overflow: hidden; padding-bottom: 56.25%;}

.responsive-video iframe, .responsive-video object { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }

.responsive-video.aspect-4by3{padding-bottom: 75%;}


/*=============================================================================

MAIN STYLES

=============================================================================*/



/* Support Forms */

input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea {
    background: #FFFFFF;
    color: #aaaaaa;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 5px 10px;
    height: 34px;
    max-width: 100%;
    width: 100%;
    margin-bottom: 15px;
    vertical-align: top;
    font-size: 14px;
    font-weight: normal;
}
textarea{ height:200px; width:100%; padding: 10px;}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    border-color: #39ABDD;
    color: #39ABDD;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

::-webkit-input-placeholder {color:#359AD6;}

:-moz-placeholder {color:#359AD6;}

:-ms-input-placeholder{color:#359AD6;}

:focus::-webkit-input-placeholder {color:#86bce3;}

:focus:-moz-placeholder {color:#86bce3;}

:focus:-ms-input-placeholder{color:#86bce3;}

.recaptcha_theme_blackglass #recaptcha_response_field, .recaptcha_theme_white #recaptcha_response_field{height: 20px}

#form {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

  #form .label {
    display: block;
    font-weight: bold;
    margin: 0 0 5px;
  }

  #form .label span {
    color: #999;
  }

  #form .input-block .input-radio-group {
    margin: 0 0 20px;
  }

  #form .input-button{
    margin-top: 0;
  }

  #form .input-button input {
    cursor: pointer;
  }

  #form .input-button .disabled {
    background-position: 0 -38px;
  }

  #form .input-button img {
    display: none;
    margin: 7px 0 0 5px;
    position: absolute;
  }

  #form label.invalid {
    color: #f26832;
    display: block;
    position: relative; 
    top:-14px;
    font-size: 12px;
    font-weight: normal;
    text-align: right;
    
  }


/* Buttons */ 


.button{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 14px;
}

.button.-radius{ border-radius: 3px;}

.button.-primary{
  background: #30AADF;  
}

.button.-primary:hover{
  background: #428bca;
}

.button.-secondary{
  background: #ccc;  
  color: #A0A0A0;
}

.button.-secondary:hover{
  background: #ccc; 
  color: #333;
}

.button.-ghost-light{}

.button.-ghost-light:hover{}

.button.-ghost-dark{}

.button.-ghost-dark:hover{}

.button.-full-width{}

.button.-size-sm{}

.button.-size-md{}

.button.-size-xl{}


  /* Flash Messages */

  #flash {
    font-size: 20px;
    text-align: center;
    display:none;
  }

  .flash_html {
    display: inline;
  }

  .flash_ajax{
    display:block;
    margin:0 auto 0 -200px;
    position:fixed;
    top:0px;
    left:50%;
    width:400px;
    z-index:1003;
    color:#222;
  }

  .flash_html div, .flash_ajax div {
    text-align: center;
    font-size: 14px;
    margin: 0px auto;
    width: 400px;
    padding: 5px 40px;
    background-color: #FFFDD7;
    border-bottom: 3px solid #FDFBA8;
    border-left: 3px solid #FDFBA8;
    border-right: 3px solid #FDFBA8;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
  }

  .flash_ajax div.flash_error,
  .flash_html div.flash_error,
  .flash_ajax div.flash_critical,
  .flash_html div.flash_critical {
    border-color: #FF0000;
    background-color: #FFBABA;
  }

  /* Portal Wrappers */

  .wrapper {
    margin: 0 auto;
    width: 950px;
  }

  #company-support-portal {
    padding: 0 0 30px;
    overflow: hidden;
  }

  /* Breadcrumbs */

  #breadcrumbs {
    color: #666;
    float: left;
    font-weight: bold;
    line-height: 30px;
    margin: 0 0 10px;
    width: 40%;
  }

  #status-update {
    float: right;
    margin-right: 250px;
  }

  #status-update .myaccount-form {
    padding-top: 0;
  }

  /* Portal Company Header */

  #company-header {
    background: #000;
    padding: 12px 0;
  }

  #company-header h1 {
    color: #FFF;
    font-size: 25px;
    padding: 0 0 0 35px;
    float: left;
  }

  .powered_by_desk{
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    width: 176px;
  }

  .powered_by_desk a{
    margin-top: 3px;
    position: absolute;
    margin-left: 72px;
  }

  .powered_by_logo{
    width: 100px;
    height: 50px;
  }

  #company-header a {
    color: #FFF;
  }

  #company-header a:hover {
    color: #999;
    text-decoration: none;
  }

  #customer-account {
    float: right;
    color: #FFF;
    margin: 3px 0 0;
  }

  #customer-account span {
    float: left;
    padding: 4px 9px;
    font-weight: bold;
  }

  #customer-account a {
    float: left;
    display: inline-block;
    padding: 4px 9px;
    background: #2B2B2B;
  }

  #customer-account a:hover {
    background: #3B3B3B;
    color: #FFF;
  }

  /* Portal Support Header */

  #support-header {
    background: #E5E5E5;
    border-bottom: 1px solid #ACACAC;
    margin: 0 0 30px;
    padding: 20px 0;
  }

  #support-header .wrapper {
    position: relative;
  }

  #support-header h2 {
    font-size: 32px;
    text-shadow: 0 1px 0 #FFF;
  }

  /* Support Side Column */

  #support-side {
    float: left;
    margin: 0 0 0 20px;
    width: 230px;
  }

  #support-side .content {
    margin: 0 0 40px;
  }

  #support-side h3 {
    border-bottom: 1px solid #ccc;
    margin: 21px 0 30px 0;
    padding: 0 0 20px 0;
  }

  #support-side ul {
    list-style: none;
  }

  #support-side li {
    margin: 0 0 5px;
  }

  /* Support Side Column Twitter */

  #tweets .tweet_avatar {
    display: none;
  }

  #tweets .tweet_time a {
    color: #999;
    display: block;
  }

  #tweets li {
    margin: 0 0 20px;
    line-height: 18px;
  }

    /* Support Side Twitter Widget */

  #support-side .twitter-timeline-rendered {
      margin-top: 20px;
  }

  #support-side .twitter-timeline {
      clear: both;
      display: block;
      margin-top: 20px;
  }

  /* Support Main Column */

  #support-main {
    float: left;
    width: 700px;
  }

  #support-main.main-customer-feedback {
    float: none;
    margin: 60px auto;
  }

  #support-main.main-customer-feedback .complete{
    font-size: 20px;
    font-weight: bold;
  }

  #support-main.main-customer-feedback .error{
    font-size: 20px;
    font-weight: bold;
  }

  #support-main .support-body {

  }

  #support-main .content {
    overflow: hidden;
    padding: 20px;
  }

  #support-main .headline-image {
    margin-top: 5px;
  }

  /* Support Main Column Headers */

  #support-main h3 {
    margin: 0 0 20px;
    padding: 0 0 20px;
  }

  #support-main h3.verify-title {
    padding-left: 35px;
  }

  #support-main h4 {
    margin: 0 0 30px;
  }

  #support-main h5 {
    margin: 0 0 9px;
  }

  #support-main h5 a {
    background: #EEE;
    color: #666;
    font-size: 11px;
    padding: 3px 7px;
    margin: -2px 0 0 9px;
    position: absolute;
    text-decoration: none;
  }

  /* Dashboard */

  #support-main .dashboard h5 a:hover {
    text-decoration: none;
    color: #FFF;
    background: #254689;
  }

  #support-main .dashboard td {
    border-bottom: 1px solid #CCC;
    padding: 20px 0 10px;
  }

  #support-main .dashboard .row1 td {
    padding: 0 0 10px;
  }

  #support-main .dashboard .last td {
    border-bottom: none;
  }

  #support-main .dashboard .topic {
    margin: 0;
  }

  #support-main .dashboard .topic ul {
    color: #254689;
    margin: 0 15px 20px 0;
    list-style: none;
  }

  #support-main .dashboard .topic li {
    margin: 0 0 5px;
    padding: 0 0 0 15px;
  }

  #support-main .dashboard .topic li.featured a {
    background: #FAFBCA;
    font-weight: bold;
  }

  #support-main .dashboard h5 {
    height: 16px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0 0 0 20px;
  }


  /* Article Lists */

  #support-main .articles ul {
    list-style: none;
  }

  #support-main .articles h4 {
    margin: 0 0 5px;
    font-weight: normal;
  }

  #support-main .articles li {
    margin: 0 0 30px;
  }

  #support-main .articles li.question {
    padding: 0 0 0 40px;
  }

  #support-main .articles li.article {
    padding: 0 0 0 40px;
  }

  #support-main .articles li.question.featured {
    background-position: 0 -138px;
  }

  #support-main .articles li.article.featured {
    background-position: 0 -415px;
  }

  #support-main .articles li.featured h4 a {
    font-weight: bold;
    background: #FAFBCA;
  }

  #support-main .articles li p {
    margin: 0 0 5px;
    color: #777;
  }

  #support-main .articles .condensed {
    background: #FFFDF4;
    border: 1px solid #E3DEBF;
    margin: 0 0 30px;
    padding: 20px 20px 0;
  }

  #support-main .articles .condensed li {
    margin: 0;
    padding: 0;
  }

  #support-main .articles .condensed h4 {
    font-size: 15px;
  }

  #support-main .articles .condensed p {
    margin: 0 0 20px 30px;
    color: #777;
  }

  #support-main .articles .condensed a {
    margin: 0 0 20px 30px;
  }

  /* Article List Metas */

  #support-main #search-results .meta,
  #support-main .articles .meta {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    color: #333;
    margin: 5px 0;
  }

  #support-main .articles .meta .answered {
    border-right: 1px solid #DDD;
    color: #549b07;
    padding: 0 5px 0 14px;
    margin: 0 5px 0 0;
  }

  #support-main .articles .meta .count,
  #support-main .articles .meta .date,
  #support-main .question-details .meta .name {
    margin: 0 5px 0 0;
    padding: 0 5px 0 0;
    border-right: 1px solid #DDD;
  }

  /* Article List Toggles */

  #toggle div {
    float: right;
    margin: -62px 0 0 0;
  }

  #toggle a {
    background: #FFF;
    color: #666;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 7px;
    text-decoration: none;
    text-transform: uppercase;
  }

  #toggle a:hover {
    text-decoration: none;
    color: #FFF;
    background: #254689;
  }

  #toggle .active, #toggle a.active:hover {
    background: #DDD;
    color: #000;
  }

  /* Page Title */

  #support-main .title {
    border-bottom: 1px solid #CCC;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
  }

  #support-main .title h3 {
    margin: 0 0 3px;
    padding: 0;
    border: 0;
  }

  #support-main .title .meta {
    margin: 0;
    font-weight: bold;
  }

  /* Article View & Question View */

  #support-main .article-content h1,
  #support-main .article-content h2,
  #support-main .article-content h3,
  #support-main .article-content h4,
  #support-main .article-content h5,
  #support-main .answer-details h1,
  #support-main .answer-details h2,
  #support-main .answer-details h3,
  #support-main .answer-details h4,
  #support-main .answer-details h5 {
    margin: 0 0 20px;
  }

  #support-main .article-content h1, #support-main .answer-details h1 {
    font-size: 22px;
  }

  #support-main .article-content h2, #support-main .answer-details h2 {
    font-size: 20px;
  }

  #support-main .article-content h3, #support-main .answer-details h3 {
    font-size: 18px;
  }

  #support-main .article-content h4, #support-main .answer-details h4 {
    font-size: 16px;
  }

  #support-main .article-content h5, #support-main .answer-details h5 {
    font-size: 15px;
  }

  #support-main .article-content ul, ol, #support-main .answer-details ul, #support-main .answer-details ol {
    margin-left:20px;
    margin-bottom:20px;
    list-style-position:inside;
  }
  #support-main .article-content ul li{
    list-style-type:disc;
  }

  #support-main .article-content ol li{
    list-style-type:decimal;
  }
  #support-main .article-content p {
    margin:0;
  }
  #support-main .article-content blockquote, #support-main .article-content q,
  #support-main .answer-details blockquote, #support-main .answer-details q {
    margin: 0.80em 0 0.80em 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    quotes: "" "";
  }
  #support-main .article-content blockquote p, #support-main .article-content q p,
  #support-main .answer-details blockquote p, #support-main .answer-details q p {
    margin: 0;
    padding: 0.80em;
    color: #666;
    background: inherit;
  }

  /* Article View Attachments */

  #attachments {
    border-bottom: 1px solid #CCC;
    padding: 0 0 20px;
    margin: 20px 0 0;
  }

  #attachments strong {
    display: block;
    margin: 0 0 10px;
    padding: 0 0 0 16px;
  }

  #attachments ul {
    list-style: none;
  }

  /* Article View Rating */

  #rate_article_container {
    margin: 50px 0 0 0;
    border-top: 1px solid #e5e3e3;
    overflow: hidden;
    padding: 55px 5px 0;
  }

  #rate_article div {
    color: #265007;
    float: left;
    width: 50%;
    margin: 0 0 6px;
    font-style: italic;
  }

  #rate_article_container a {
    width: 25px;
    height: 30px;
    overflow: hidden;
    text-indent: -999px;
    margin: 0 8px 0 0;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
  }

  #rate_article_container a:hover{
    background-position: left bottom;
}

  #rate_article_container .rate-link-down {
    text-align: right;
  }

  #rate_article_container .rate-link-down a {
    background-position: right bottom;
  }

  #rate_article_container .rate-link-down a:hover{
    background-position: right top;
}

  #rate_article_container span {
    position: relative;
    top: 3px;
    color: #454241;
  }

  #rate_article_container span:before{
    content:"Yes!";
    color:#2fc26c;
    font-style:normal;
  }

  #rate_article_container .rate-link-down span:before{
    content:"No!";
    color:#f96067;
  }

  /* Question Answers */

  #support-main .question .replies {
    padding: 0 20px;
    margin: 0 0 20px;
  }

  #support-main .question .replies h4 {
    border-bottom: 1px solid #CCC;
    font-size: 15px;
    margin: 0;
    padding: 10px 0;
    text-transform: uppercase;
  }

  #support-main .question .replies.agents h4 {
    padding: 10px 0 10px 20px;
  }

  #support-main .question .replies.agents .reply {
    background: #FFF;
    padding: 20px 0 0;
  }

  #support-main .question .reply {
    margin: 0;
    overflow: hidden;
    height: 1%;
    padding: 20px 0 0 70px;
    position: relative;
  }

  #support-main .question .answer-details,
  #support-main .myportal .interaction-details {
    padding: 0 0 0 70px;
  }

  #support-main .question .answer-details .meta {
    float: left;
    width: 100%;
    margin: 0;
  }

  #support-main .question .answer-details .meta span {
    display: block;
  }

  #support-main .question .answer-details .meta span.date {
    float: none;
    display: block;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
  }

  #support-main .question .answer-details .meta span.date-short {
    float: none;
    display: block;
    margin: 0;
    font-size: 11px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
  }

  #support-main .question .answer-details .answer-body {
    margin-bottom: 20px;
  }

  #support-main .interactions .interaction-details .interaction-body {
    margin-top: 10px;
  }

  /* Question View Rating */

  #support-main .question .answer-rating {
    font-size: 20px;
    height: 53px;
    line-height: 20px;
    position: absolute;
    margin: 0 0 0 -70px;
    text-align: center;
    width: 54px;
  }

  #support-main .question .answer-rating div {
    border: 1px solid #CCC;
    padding: 4px;
    height: 48px;
    overflow: hidden;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
  }

  #support-main .question .answer-rating a {
    display: block;
    height: 14px;
    text-align: center;
    text-indent: -900px;
    overflow: hidden;
  }

  #support-main .question .answer-rating .decrement {
    background-position: center -25px;
  }

  #support-main .question .dialog {
    display: none;
  }

  #support-main .question .rating-true .score {
    display: inline-block;
    margin: 5px 0 0 0;
  }

  #support-main .question .rating-true .dialog {
    display: inline-block;
    color: #999;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
  }

  #support-main .question .score-positive {
    color: #396905;
  }

  #support-main .question .score-negative {
    color: #69050c;
  }

  /* Question View and Private Portal Reply Form */

  /* Question View and Private Portal Reply Form */

  #support-main .question #form,
  #support-main .myportal #form {    
    margin: 20px auto;

  }

  #support-main .question .form-notice,
  #support-main .myportal .form-notice {
    border-top: 1px solid #DDD;
    margin: 0 20px 20px;
    padding: 15px 0 0 0;
  }

  #support-main .question #form h4,
  #support-main .myportal #form h4 {
    font-size: 15px;
    text-transform: uppercase;
    margin: 0 0 20px;
    padding: 0;
  }

  #support-main .question #form .input-block input[type=text],
  #support-main .question #form .input-block textarea,
  #support-main .myportal #form .input-block textarea {
    width: 610px;
  }


  /* Pre Create Headers */

  #support-main .pre-create h4 {
    margin: 0 0 30px 0;
  }

  #support-main .pre-create ul h4 {
    margin: 0;
  }

  /* Support Forms */

  #form .label {
    display: block;
    font-weight: bold;
    margin: 0 0 5px;
  }

  #form .label span {
    color: #999;
  }


  #form .input-block textarea {
    height: 200px;
  }

  #form .input-block .input-radio-group {
    margin: 0 0 20px;
  }

  #form .input-button{
    margin-top: 20px;
  }
  
  #form .input-button input {
    border: 0;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    padding: 0 6px;
    height: 32px;
    text-transform: uppercase;
    cursor: pointer;
  }

  #form .input-button img {
    display: none;
    margin: 7px 0 0 5px;
    position: absolute;
  }

  #form label.invalid {
    color: red;
    display: inline-block;
    margin: -20px 0 20px 0;
  }

    /* Pagination */

  #paginate_block {
    margin: 0;
    text-align: center;
    width: 100%;
  }

  #paginate_block .pagination {
    height: auto;
    margin: 0;
    padding-top: 0;
    width: auto;
    background: none;
  }
  
  #paginate_block .pagination .disabled{
    opacity:0.2;
  }

  #paginate_block .current, #paginate_block a{
    padding: 2px;
    border-radius: 2px;
    font-style: normal;
    display: inline-block;
    border: 1px solid #EDEDED;
    min-width: 30px;
   }

  #paginate_block .current {
    background-color: #218EEB;
    border: 1px solid #218EEB;
    color: #fff;
  }

  #paginate_block a:hover{    
    background: #ffbf00;    
    border-color: #ffbf00;    
    color: #fff;    
    text-decoration: none;
  }

  /* search form */
  
  #support-search{ border:none; padding: 0; background: none; margin:0; position: relative;}

  #support-search .outer{height: auto; width: auto; margin:0 100px 0 0; padding: 0; border: none; background: none; border-radius: 0; overflow: hidden; }

  #support-search #q{ padding: 13px; font-size: 22px; font-family: inherit; background: #fff; background: rgba(255, 255, 255, 0.9); border: none; height: 60px; width: 100%; margin: 0; border-radius: 8px 0 0 8px; outline: none; outline-width: 0;}

  #support-search #support-search-submit{ width: 100px; height: 60px; text-indent: -9999px; overflow: hidden; font-size: 0; border-radius:0 8px 8px 0; color: #FFF;
      cursor: pointer; position: absolute; right: 0; top: 0; padding: 0; border: 0; margin: 0; text-transform: uppercase; font-weight: bold; text-overflow: ellipsis; white-space: nowrap;}

  #support-search #support-search-submit{ background-repeat: no-repeat !important; background-position: center center !important; background-color: #464648 !important; }

 #support-search #support-search-submit:hover{background-color: #f1b717 !important;}


  #support-search #question-mask{width: auto; right: 115px; top:0; left:15px; height: 60px; line-height: 58px; font-size: 22px;}


  /* Footer */

  #footer {
    display: block;
    clear: both;
    color: #999;
    padding: 20px 0 30px;
  }

  #footer a {
    color: #999;
    text-decoration: none;
  }

  #question-mask {
    color: #AAA;
    position: absolute;
    width: 90%;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    display: block;
    text-overflow: ellipsis;
  }

  .question-big {
    font-size: 18px;
    top: 8px;
    left: 10px;
  }

  .question-small {
    font-size: 13px;
    top: 0;
    left: 0;
    padding: 8px;
    font-weight: bold;
  }

  .search-bg {
    display: none;
  }

  .highlight{
    background-color: #FFFAE1;
  }

  /* Modals */

  #modal-screen {
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
  }

  #modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
  }

  #modal .inner {
    background: rgba(0,0,0,0.4);
    width: 700px;
    left: 50%;
    top: 50%;
    margin: -230px 0 0 -350px;
    position: absolute;
    padding: 5px;
    border-radius: 7px;
  }

  #modal .inner h1 {
    text-align: center;
    font-size: 27px;
    padding: 25px 0 0;
  }

  #modal .inner .subheader {
    font-size: 18px !important;
    color: #767676 !important;
    text-align: center;
    margin: 4px 0 30px 0;
  }

  #modal .inner .input-button {
    text-align: center;
    padding: 0 0 30px;
    font-size: 12px;
    font-weight: bold;
  }

  #modal .inner .input-button input {
    margin: 0 0 0 10px;
  }

  #modal .inner .note {
    text-align: center;
    color: #616161;
    margin: 0 0 20px 0 !important;
    font-size: 15px;
    font-style: italic;
  }

  #modal .main {
    background: #FFF;
    border-radius: 5px;
  }

  #modal .close {
    float: right;
    margin: -16px -16px 0 0;
  }

  /* Auto Completion */

  .ui-autocomplete {
    background: #FFF;
    border: 2px solid #9ac13b;
    border-radius: 5px;
    width: 100% !important;
    top: 65px !important;
    left: 0 !important;
    list-style: none;
    margin: 0 !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    font-family: inherit !important;
    padding: 0;
  }

  .ui-autocomplete a {
    padding: 7px 12px !important;
    cursor: pointer;
    display: block;
  }

  .ui-autocomplete a:hover,
  .ui-autocomplete a.ui-state-hover {
    background: #9ac13b !important;
    text-decoration: none;
    margin: 0 !important;
    border: none;
  }

  .ui-autocomplete a:hover *,
  .ui-autocomplete a.ui-state-hover *{ color:#fff !important;}

  .ui-autocomplete li a {
    border-radius: 0;
    font-family: inherit;
  }

  .ui-autocomplete .KbArticle,
  .ui-autocomplete .QnaThread {
    display: block;
    overflow: hidden;
  }

  .ui-autocomplete .QnaThread {
    background-position: 0 -106px;
  }

  .ui-autocomplete .article-autocomplete-subject {
    display: block;
    font-weight: bold;
    font-size: 15px !important;
    color: #9ac13b !important;
    text-transform: uppercase;
    font-family: inherit !important;
  }

  .ui-autocomplete .article-autocomplete-body {
    display: block;
    font-size: 13px !important;
    color: #666;
    font-family: inherit !important;
  }

  /* Get Satisfaction Styles */
  

  .gs_search_result {
    width:100% !important;
  }

  #gs_Sidebar_Results .tweet_time, .gs-search-result {
    padding-left: 20px;
  }

  #gs_search_title h5 {
    font-size:20px;
    border-bottom:1px solid #DDDDDD;
    margin:0 0 20px;
    padding:0 0 20px;
  }

  #question-best-answer {
  border: 1px solid #ddd;
  background: #FFF;
  border-radius: 5px;
  margin: 0 0 25px 70px;
  border-radius: 5px;
  padding: 20px 20px 0;
  }

 #support-main .agent-answer-label {
  margin: 0 0 10px;
 }

 #support-main #question-best-answer .reply {
  height: 1%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
 }

#support-main .best-answer-green {
  position: absolute;
  right: 0;
  padding: 0 0 0 15px;
  color: #6db400;
  font-weight: bold;
}

#support-main .best-answer-green a {
  color: #6db400;
}

#support-main .best-answer-green a:hover {
  text-decoration: none;
}

#support-main #question-best-answer-heading {
  margin: 30px 0 10px 0;
}

#social-share {
  float: left;
  width: 80px;
  margin-left: -90px;
}

#social-share .share-btn {
  margin: 0 auto 15px auto;
  width: 60px;
  text-align: center;
}

#social-share .share-btn .fb-like {
  margin-left: 6px;
}

  /* Private Portal */

  #support-main .myportal .content {
    background: #FFF;
  }

  .myportal-label {
    margin: 0 0 8px 0;
    padding-left: 22px;
  }

  .myportal .mycases-filters {
    margin: 20px 0;
    height: 41px;
  }

  .myportal .a-selectbox {
    border: 1px solid #BEBEBE;
    border-radius: 4px;
    border-radius: 4px;
    background: #FFF;
    -webkit-border-image: none;
    display: block;
    float: left;
    padding: 0;
    text-decoration: none;
    zoom: 1;
  }

  .myportal .a-selectbox select {
    border: none;
    box-sizing: border-box;
    white-space: pre;
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;    
    font-size: 12px;
    width: 190px;
  margin:0;
  height:29px;
  }

  .myportal .a-checkbox {
    float: left;
    margin: 6px 10px;
    color: #333;
    font-size: 12px;
  }

  .myportal-button {
    float: right;    
  }


  .myportal .mycases {
    background:#E5E5E5;
    width: 100%;
    border-collapse:collapse;
    font:normal 12px verdana, arial, helvetica, sans-serif;
    margin: 0px 0px 30px 0px;
   
  }

  .myportal .mycases caption {
    border:1px solid #5C443A;
    color:#5C443A;
    font-weight:bold;
    letter-spacing:20px;
    padding:6px 4px 8px 0px;
    text-align:center;
    text-transform:uppercase;
  }

  .myportal .mycases td, th {
    color:#363636;
    padding: 11px 5px;
  }

  .myportal .mycases tr {
    background: #FFF;
    border: 1px solid #ccc;
  }

  .myportal .mycases tbody tr:hover {
    cursor: pointer;
  }

  .myportal .mycases thead th, tfoot th {
    background: #E8E8E8;
    font-size: 10px;
    font-weight: bold;
    color:#666;
    padding: 6px 5px;
    text-align:left;
    text-transform:uppercase;
  }

  .myportal .mycases a {
    text-decoration:none;
  }

  .myportal .mycases a:hover {
    text-decoration: underline;
  }

  .myportal .mycases tbody th, .myportal .mycases tbody td {
    text-align:left;
    vertical-align:middle;
  }

  .myportal .mycases tfoot td {
    background:#5C443A;
    color:#FFFFFF;
    padding-top:3px;
  }

  .myportal .mycases .a-casechannel {
    text-align: center;
    vertical-align: middle;
    width: 20px;
    padding: 11px 0 11px 11px;
  }

  .myportal .case-block{
    float: left;
    margin-right: 60px;
  }

  .myportal .a-caseid {
    padding-left: 15px;
  }

  .myportal .a-caseid, .myportal .a-casestatus {
    width: 70px;
  }

  .myportal .a-casecreated {
    width: 60px;
  }

  #support-main .case {
    padding: 0;
  }

  #support-main .myportal .case-details, #support-main .myportal .interaction {
    padding: 25px 0;
  }

  #support-main .myportal .interaction {
    min-height: 60px;
    padding-bottom: 0;
  }

  #support-main .myportal .case-details {
    
  }

  #support-main .myportal .case-details h3 {
    border: 0;
    margin: 0 0 25px;
    padding: 0;
    width: 510px;
    font-size: 18px;
    vertical-align: top;
    text-align: left;
  }

  #support-main .myportal .status {
    font-weight: bold;
  margin-bottom:25px;
  }

  #support-main .myportal .status img {
    vertical-align: middle;
  }

  #support-main .myportal .status .a-New,
  #support-main .myportal .status .a-Open,
  #support-main .myportal .status .a-Pending,
  #support-main .myportal .status .a-Resolved,
  #support-main .myportal .status .a-Closed {
    color: #fff;
    padding: 2px 8px;
    font-weight:bold;
    border-radius: 4px;
  }

  #support-main .myportal .status .a-New {
    background-color: #5B75AF;
    border: #465A86 1px solid;
  }

  #support-main .myportal .status .a-Open {
    background-color: #61A00F;
    border: #4A7B0B 1px solid;
  }

  #support-main .myportal .status .a-Pending {
    background-color: #DE901B;
    border: #AA6E14 1px solid;
  }

  #support-main .myportal .status .a-Resolved {
    background-color: #A5A5A5;
    border: #7E7E7E 1px solid;
  }

  #support-main .myportal .status .a-Closed {
    background-color: #DE901B;
    border: #AA6E14 1px solid;
  }

  #support-main .myportal .meta {
    clear: both;
    color: #888;
  font-size:14px;
    
  }

  #support-main .myportal .meta strong {
    color: #000;
  }

  .myportal #paginate_block .pagination {
    background-color: transparent;
  }

/* Private #status-updatePortal - Case Detail */

  #support-main .myportal .case-details .meta span.date,
  #support-main .myportal .interaction-details span.date {
    margin: 0;
    color: #888;
  }

  #support-main .myportal .interaction-details span.date {
    float: right;
    text-align: right;
  }

  #support-main .myportal .meta .case-data {
    list-style: none;
    width: 50%;
    float: left;
    position: relative;
  }

  #support-main .myportal .meta .case-dates {
    list-style: none;
    width: 50%;
    float: right;
    position: relative;
  text-align:right;
  }

  #support-main .myportal .meta .case-dates strong {
    display: inline-block;
    text-align: right;    
  }

  #support-main .myportal .meta .name {
    font-weight: bold;
    text-transform: uppercase;
  }

  #support-main .myportal .interactions {
    border-top: 1px solid #e8e8e8;
    padding-bottom: 20px;
  }

  #customer-account a {
    margin-left: 9px;
  }

  #support-main .myportal .gravatar-wrapper {
    position: absolute;
    border: 1px solid #CCC;
    width: 56px;
    height: 56px;
  }

  #support-main .myportal .gravatar {
    float: left;
    border: 3px solid #FFF;
  }

  #support-main .myportal .gravatar.twitter-avatar {
    border: 4px solid #fff;
  }

  #support-main .myportal .interaction-details .meta {
    width: 100%;
    margin: 0;
  }

  #support-main .myportal .interactions .system-message {
    padding: 15px 20px 0 20px;
    color: #aaa;
    font-size: 12px;
  }

  #support-main .myportal .interactions .chat {
    padding: 18px 20px 10px;
  }

  #support-main .myportal .interactions .chat .interaction-details {
    padding: 0;
  }

  #support-main .myportal .interactions .chat .interaction-details .meta span {
    color:#000;
    font-weight:bold;
  }

  #support-main .myportal .interactions .chat .interaction-details .meta span.date {
    color: #888;
    font-weight: normal;
  }

  #support-main .myportal .interactions .chat .interaction-body {
    padding-right: 50px;
    margin-top: 5px;
  }

  #support-main .myportal .case-footer {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding: 25px 20px 0;
  }

  #support-main .myportal .case-footer p {
    margin-bottom: 5px;
  }

/* Private Portal - My Profile */

  .myaccount-form {
    padding-top: 20px;
  }

  .myaccount-form .new_customer_contact_email {
    padding: 30px 0;
    border-top: 1px solid #DDD;
  }

  .myaccount-form div img {
    vertical-align: middle;
  }

  .myaccount-form div[id^="email_"],
  .myaccount-form div[id^="twitter_user_"],
  .myaccount-form div[id^="facebook_user_"],
  .myaccount-form div[id^="add_"] {
    padding: 15px 0;
    font-size: 14px;
    color: #666;
    position: relative;
    border-top: 1px solid #DDD;
  }

  .myaccount-form div[id^="twitter_user_"] form div,
  .myaccount-form div[id^="facebook_user_"] form div {
    position: absolute;
    top: 10px;
    right: 0px;
  }

  .myaccount-form div[id^="email_"] div[id^="delete_"] form div {
    position: absolute;
    top: 10px;
    right: 78px;
  }

  .myaccount-form input[id^="update_status"]:disabled {
    cursor: help;
  }

  .myaccount-form div[id^="verified_"] input,
  .myaccount-form div[id^="delete_"] input,
  .myaccount-form input[id^="update_status"],
  .myaccount-form input[id^="update_status"]:disabled {
    background-color: #f9f9f9;
    border: 1px solid #cfcfcf;
    color: #666;
    border-radius: 3px;
    cursor: pointer;
    padding: 6px 15px 7px;
    height: 30px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px;
  }

  .myaccount-form div[id^="verified_"] input:hover,
  .myaccount-form div[id^="delete_"] input:hover,
  .myaccount-form input[id^="update_status"]:hover {
    background-color: #fff;
    border-color: #b4b4b4;
  }

  .myaccount-form div[id^="email_"]:hover,
  .myaccount-form div[id^="twitter_user_"]:hover,
  .myaccount-form div[id^="facebook_user_"]:hover,
  .myaccount-form div[id^="add_"]:hover {
    background-color:#f9f9f9;
  }

  #authentication-verification-copy {
    display: inline-block;
    padding-left: 20px;
    width: 50%;
    zoom: 1;
  }

  .authentication_verification-form {
    display: inline-block;
    height: 100px;
    zoom: 1;
  }

  .authentication_verification-form form {
    background-color: #eefaff;
    display: inline-block;
    padding: 25px 20px;
    zoom: 1;
  }

  .myaccount-form .verified,
  .authentication_verification-form .verified {
    position: absolute;
    top: 10px;
    right: 0;
    color: #3d8933;
    padding: 7px 1px 0 0;
    font-weight: bold;
    font-size: 13px;
  }

  .myaccount-form div[id^="email_"] .verified form div,
  .myaccount-form div[id^="twitter_user_"] .verified form div,
  .myaccount-form div[id^="facebook_user_"] .verified form div {
    margin-top: -7px;
  }

  .myaccount-form input[type="text"],
  .authentication_verification-form input[type="text"] {
    font-size: 12px;
    border: 1px solid #C0C0C0;
    float: left;
    margin: 0 5px 8px 0;
    width: 195px;
    padding: 8px 4px;
    border-radius: 3px;
  }

  .myaccount-form button,
  .authentication_verification-form button {
    height: 32px;
    padding: 0 6px;
    color: #FFF;
    cursor: pointer;
    border: none;
    float: left;
    margin: 0;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    border-radius: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .myaccount-form label.invalid,
  .authentication_verification-form label.invalid {
    font-weight: normal;
    display: block !important;
    clear: both;
    margin: 10px 0 20px 0;
  }


/* Private Portal - Login and Registration */

  .login-form, .registration-form, .forgotpw-form, .alternatelogins {
    padding: 20px 0;
  }

  .alternatelogins {
    float: right;
    padding: 20px 0;
  }

  .login-form .field label, .registration-form .field label, .forgotpw-form .field label {
    font-weight: bold;
    font-size: 14px;
    display: block;
  }

  .login-form .field input, .registration-form .field input, .forgotpw-form .field input {
    font-size: 14px;
    border: 1px solid #999;
    display: block;
    margin: 4px 0 15px 0;
    width: 250px;
    padding: 8px 4px;
    border-radius: 3px;
  }

  .login-form .actions input {
    width: 80px;
    margin-bottom: 40px;
  }

  .login-form .newaccount, .login-form .forgotpw {
    font-weight: bold;
    float: left;
  }

  .login-form .forgotpw {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #999;
  }

  .registration-form label.invalid,
  .forgotpw-form label.invalid {
    font-weight: normal;
    display: block;
    margin: -10px 0 20px 0;
  }

  .login-form form {
    float: left;
    width: 330px;
  }

  .left-divider {
    border-left: 1px solid #ccc;
  }

  .alternatelogins {
    float: left;
    height: 200px;
    padding-left: 25px;
  }

  .alternatelogins div {
    margin: 0 0 20px 0;
  }

  .alternatelogins a,
  #add_facebook input,
  #add_twitter input {
    position: relative;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    font-size: 20px;
    padding: 0 1em;
    border: 1px solid #999;
    border-radius: 2px;
    margin: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    color: #222;
    background: #fff;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: none;
  }

  .alternatelogins a:hover,
  .alternatelogins a:focus,
  .alternatelogins a:active,
  #add_facebook input,
  #add_twitter input {
    color: #222;
    text-decoration: none;
  }

  .alternatelogins a:before {
    content: "";
    float: left;
    width: 36px;
    height: 36px;
  }

  .alternatelogins #twitter,
  #add_twitter input {
    border-color: #a6cde6;
    color: #327695;
    background: #cfe4f0;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f5f7), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(#f1f5f7, rgba(255,255,255,0));
    background-image: -moz-linear-gradient(#f1f5f7, rgba(255,255,255,0));
    background-image: -ms-linear-gradient(#f1f5f7, rgba(255,255,255,0));
    background-image: -o-linear-gradient(#f1f5f7, rgba(255,255,255,0));
    background-image: linear-gradient(#f1f5f7, rgba(255,255,255,0));
    box-shadow: inset 0 1px 0 #fff;
  }

  .alternatelogins #twitter:hover,
  .alternatelogins #twitter:focus,
  .alternatelogins #twitter:active,
  #add_twitter input:hover,
  #add_twitter input:focus,
  #add_twitter input:active {
    color: #327695;
    border-color: #8dc2e4;
    background-color: #cadde9;
  }

  .alternatelogins #twitter:active,
  #add_twitter input:active {
    background: #cadde9;
    box-shadow: inset 0 1px 0 #bbd6e7;
  }

  .alternatelogins #twitter:before {
    margin: 0 0.6em 0 -0.6em;
    background-position: -36px -22px;
  }

  .alternatelogins #facebook,
  #add_facebook input {
    border-color: #29447e;
    border-bottom-color: #1a356e;
    color: #fff;
    background-color: #5872a7;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
    background-image: -webkit-linear-gradient(#637bad, #5872a7);
    background-image: -moz-linear-gradient(#637bad, #5872a7);
    background-image: -ms-linear-gradient(#637bad, #5872a7);
    background-image: -o-linear-gradient(#637bad, #5872a7);
    background-image: linear-gradient(#637bad, #5872a7);
    box-shadow: inset 0 1px 0 #879ac0;
  }

  .alternatelogins #facebook:hover,
  .alternatelogins #facebook:focus,
  #add_facebook input:hover,
  #add_facebook input:focus {
    color: #fff;
    background-color: #3b5998;
  }

  .alternatelogins #facebook:active,
  #add_facebook input:active {
    color: #fff;
    background: #4f6aa3;
    box-shadow: inset 0 1px 0 #45619d;
  }

  .alternatelogins #facebook:before {
    border-right: 1px solid #465f94;
    margin: 0 1em 0 -1em;
    background-position: 0 -22px;
  }

  #add_facebook input,
  #add_twitter input {
    height: 22px;
    font-size: 11px;
    line-height: 22px;
    padding-left: 35px;
  }



  #registration-in-progress {
    display: none;
    padding: 5px;
    background-color: #fffdef;
    border: 2px solid #ede9c2;
  }

   #registration-in-progress img {
       float: left;
       margin-right: 5px;
   }



  .desk-external-variables {
    display: none;
  }

.hidden {
  display: none;
}

.desk_file_upload {
  overflow: hidden;
}

.desk_file_upload input[type=file] {
  float: left;
  outline:none;
  position: relative;
  text-align: right;
  -moz-opacity:0;
  filter:alpha(opacity= 0);
  opacity: 0;
  z-index: 2;
  width:100%;
  height:100%;
  margin-left: -99999px;
}

.desk_file_upload input[type=button] {
  float: left;
}

.desk_file_upload .faux-file-field {
  padding: 0 8px 0 0;
  margin: 0;
  z-index: 1;
  float: left;
}

.desk_file_upload .faux-file-field input[type=text] {
  width:180px !important;
}

.radio-label-rating-type {
    margin-right: 12px;
    vertical-align: middle;
}



/*=============================================================================

MEDIA QUERIES

=============================================================================*/


@media only screen and (max-width: 1500px) {

}


@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 599px) {
  .block {
    padding-top: 40px;
    padding-bottom: 40px;
  }

}

@media only screen and (max-width: 450px) {

}







/*=============================================================================

GRIDS

=============================================================================*/

/* 
grid sizes suffixes:

xl < 1500px
lg < 1200px
md < 1024px
sm < 768px
xs < 600px
xxs < 450px

*/

.grid { position: relative; }

[class*='grid_'] {float: left; position: relative;}

.grid.-spacing-sm{margin-left: -2px; margin-right: -2px;}

.grid.-spacing-sm > [class*='grid_'] {padding-left: 2px; padding-right: 2px; margin-bottom:4px;}

.grid.-spacing-md{margin-left: -14px; margin-right: -14px;}

.grid.-spacing-md > [class*='grid_'] {padding-left: 14px; padding-right: 14px;}

.grid.-spacing-lg{margin-left: -25px; margin-right: -25px;}

.grid.-spacing-lg > [class*='grid_'] {padding-left: 25px; padding-right: 25px; }

.float-right[class*='grid_'] { float: right; }

.grid_1 { width: 100%; }

.grid_1-2 { width: 50%; }

.grid_1-3 { width: 33.33%; }

.grid_2-3 { width: 66.66%; }

.grid_1-4 { width: 25%; }

.grid_3-4 { width: 75%; }

.grid_1-5 { width: 20%; }

.grid_4-5 { width: 80%; }

.grid_1-6 { width: 16.66%; }

._invisible{ display:none;}


@media only screen and (max-width: 1500px) {
  
  /* grids */

  .grid_1-xl{ width:100%;}
  .grid_1-2-xl{ width:50%;}
  .grid_1-3-xl{ width:33.33%;}
  .grid_2-3-xl{ width: 66.66%;}
  .grid_1-4-xl{ width:25%;}
  .grid_3-4-xl{ width: 75%;}
  .grid_1-5-xl{ width:20%;} 
  .grid_4-5-xl { width: 80%; }
  .grid_1-6-xl{ width:16.66%;}

  ._invisible-xl{ display:none !important;}
  ._visible-xl{ display:block !important;}
  ._visible-xl-inline{ display:inline-block !important;}
  
  ._no-pd-xl{ padding:0 !important;}
  ._no-mg-xl{ margin:0 !important;}
  
}


@media only screen and (max-width: 1200px) {
  
  /* grids */

  .grid_1-lg{ width:100%;}
  .grid_1-2-lg{ width:50%;}
  .grid_1-3-lg{ width:33.33%;}
  .grid_2-3-lg{ width: 66.66%;}
  .grid_1-4-lg{ width:25%;}
  .grid_3-4-lg{ width: 75%;}
  .grid_1-5-lg{ width:20%;} 
  .grid_4-5-lg { width: 80%; }
  .grid_1-6-lg{ width:16.66%;}

  ._invisible-lg{ display:none !important;}
  ._visible-lg{ display:block !important;}
  ._visible-lg-inline{ display:inline-block !important;}
  
  ._no-pd-lg{ padding:0 !important;}
  ._no-mg-lg{ margin:0 !important;}
  
}

@media only screen and (max-width: 1024px) {
  
  /* grids */

  .grid_1-md{ width:100%;}
  .grid_1-2-md{ width:50%;}
  .grid_1-3-md{ width:33.33%;}
  .grid_2-3-md{ width: 66.66%;}
  .grid_1-4-md{ width:25%;}
  .grid_3-4-md{ width: 75%;}
  .grid_1-5-md{ width:20%;}   
  .grid_4-5-md { width: 80%; }
  .grid_1-6-md{ width:16.66%;}

  ._invisible-md{ display:none !important;}
  ._visible-md{ display:block !important;}
  ._visible-md-inline{ display:inline-block !important;}
  
  ._no-pd-md{ padding:0 !important;}
  ._no-mg-md{ margin:0 !important;}

}

@media only screen and (max-width: 768px) {
  
  /* grids */

  .grid_1-sm{ width:100%;}
  .grid_1-2-sm{ width:50%;}
  .grid_1-3-sm{ width:33.33%;}
  .grid_2-3-sm{ width: 66.66%;}
  .grid_1-4-sm{ width:25%;}
  .grid_3-4-sm{ width: 75%;}
  .grid_1-5-sm{ width:20%;}   
  .grid_4-5-sm { width: 80%; }
  .grid_1-6-sm{ width:16.66%;}

  ._invisible-sm{ display:none !important;}
  ._visible-sm{ display:block !important;}
  ._visible-sm-inline{ display:inline-block !important;}

  ._no-pd-sm{ padding:0 !important;}
  ._no-mg-sm{ margin:0 !important;}

}

@media only screen and (max-width: 599px) {

  /* grids */
  
  .grid_1-xs{ width:100%;}
  .grid_1-2-xs{ width:50%;}
  .grid_1-3-xs{ width:33.33%;}
  .grid_2-3-xs{ width: 66.66%;}
  .grid_1-4-xs{ width:25%;}
  .grid_3-4-xs{ width: 75%;}
  .grid_1-5-xs{ width:20%;}   
  .grid_4-5-xs { width: 80%; }
  .grid_1-6-xs{ width:16.66%;}

  ._invisible-xs{ display:none !important;}
  ._visible-xs{ display:block !important;}
  ._visible-xs-inline{ display:inline-block !important;}

  ._no-pd-xs{ padding:0 !important;}
  ._no-mg-xs{ margin:0 !important;}

  ._mg-b-xs{margin-bottom: 7px !important;}

  ._mg-b-sm{margin-bottom: 15px !important;}

  ._mg-b-md{margin-bottom: 25px !important;}

  ._mg-b-lg{margin-bottom: 40px !important;}

  ._mg-b-xl{margin-bottom: 60px !important;}

  ._mg-t-xs{margin-top: 7px !important;}

  ._mg-t-sm{margin-top: 15px !important;}

  ._mg-t-md{margin-top: 25px !important;}

  ._mg-t-lg{margin-top: 40px !important;}

  ._mg-t-xl{margin-top: 60px !important;}


  ._pd-b-xs{padding-bottom: 7px !important;}

  ._pd-b-sm{padding-bottom: 15px !important;}

  ._pd-b-md{padding-bottom: 25px !important;}

  ._pd-b-lg{padding-bottom: 40px !important;}

  ._pd-b-xl{padding-bottom: 60px !important;}

  ._pd-t-xs{padding-top: 7px !important;}

  ._pd-t-sm{padding-top: 15px !important;}

  ._pd-t-md{padding-top: 25px !important;}

  ._pd-t-lg{padding-top: 40px !important;}

  ._pd-t-xl{padding-top: 60px !important;}

  /* general styles */

  .wrap{ padding-left:15px; padding-right:15px;}

}

@media only screen and (max-width: 450px) {

  /* grids */

  .grid_1-xxs{ width:100%;}
  .grid_1-2-xxs{ width:50%;}
  .grid_1-3-xxs{ width:33.33%;}
  .grid_2-3-xxs{ width: 66.66%;}
  .grid_1-4-xxs{ width:25%;}
  .grid_3-4-xxs{ width: 75%;}
  .grid_1-5-xxs{ width:20%;}   
  .grid_4-5-xxs { width: 80%; }
  .grid_1-6-xxs{ width:16.66%;}
  
  ._invisible-xxs{ display:none !important;}
  ._visible-xxs{ display:block !important;}
  ._visible-xxs-inline{ display:inline-block !important;}

  ._no-pd-xxs{ padding:0 !important;}
  ._no-mg-xxs{ margin:0 !important;}
  
}

my-cases-list.html

<div id='breadcrumbs'>
  <a href='{{desk.system.links.home}}'>{{desk.system.snippets.home}}</a> &rsaquo; {{desk.system.snippets.my_cases}}
</div>
<div id='support-main'>

    <div id="registration-in-progress">
        <img alt='Ajax-loader-small' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' />
        {{desk.system.snippets.registration_in_progress}}
    </div>

  <div class='myportal' id="mycases">
    <div class='mycases-filters'>
      <div class='a-selectbox'>
            <select id="a-cases-filter">
              <option value="my">{{desk.system.snippets.show_my_cases}}</option>
              {% if desk.customer.can_access_company_tickets? %}
              <option value="company" selected="selected">{{desk.system.snippets.show_all_cases}}</option>
              {% endif %}
              <option value="7">{{desk.system.snippets.show_last_num_days | format_snippet: '"num":"7"' }}</option>
              <option value="30">{{desk.system.snippets.show_last_num_days | format_snippet: '"num":"30"' }}</option>
            </select>
          </div>
          <div class='a-checkbox'>
        <input id="a-active-only" type="checkbox">{{desk.system.snippets.active_only}}</input>
      </div>
      <a href='{{desk.system.links.email}}' class='myportal-button btn secondary'>{{desk.system.snippets.create_new_case}}</a>
    </div>
    <table class='mycases'>
      <thead>
        <tr>
          <th></th>
          <th>{{desk.system.snippets.case_id}}</th>
          <th>{{desk.system.snippets.subject}}</th>
          {% if desk.customer.can_access_company_tickets? %}<th>{{desk.system.snippets.from}}</th>{% endif %}
          <th>{{desk.system.snippets.updated}}</th>
          <th>{{desk.system.snippets.status}}</th>
        </tr>
      </thead>
      <tbody>
        {% for case in desk.page.content.cases %}
        <tr>
          <td class='a-casechannel'><img src='{{ case.channel_icon }}'/></td>
          <td class='a-caseid'>{{ case.id }}</td>
          <td class='a-casesubject'><a href="{{ case.portal_url }}">{{ case.subject }}</a></td>
          {% if desk.customer.can_access_company_tickets? %}<td class='a-casefrom'>{{case.customer.first_name}}</td>{% endif %}
          <td class='a-casecreated'>{{ case.updated_at | in_time_zone: site.timezone | date: '%b %d' }}</td>
          <td class='a-casestatus'>{% case case.status.id %}
            {% when 10 %}
              {{desk.system.snippets.case_new}}
            {% when 30 %}
              {{desk.system.snippets.case_open}}
            {% when 50 %}
              {{desk.system.snippets.case_pending}}
            {% when 70 %}
              {{desk.system.snippets.case_resolved}}
            {% when 90 %}
              {{desk.system.snippets.case_closed}}
            {% endcase %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <div id='pagination'>
      {{ desk.page.content.more_cases_block }}
    </div>
  </div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.myportal_index.js"></script>

index.html

<div id="desk-external-variables-page_index" class="desk-external-variables">
  <div id="system-snippets-just_moderated">{{just_moderated}}</div>
</div>

<div id='support-main'>
  {% if just_moderated %}
    <div id="modal-screen">&nbsp;</div>
    <div id="modal">
      <div class="inner">
        <div class="main">
          <h1>{{system.snippets.your_post_submitted}}</h1>
          <p class='subheader'>
            {{system.snippets.not_shown_until_reviewed}}
          </p>
          <div id='form'>
            <div class='input-button'>
              <input id='moderation_okay_button'  name='commit' type='submit'  value='{{system.snippets.okay}}' />
              <img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;'/>
            </div>
          </div>
        </div>
      </div>
    </div>

  {% endif %}
  
  <div class='support-body'>
    <div class='content dashboard'>
      <h3>{{system.snippets.browse_by_topic}}</h3>

      {% if topics_count > 0 %}        
        <div class="grid">
          {% for topic in topics %}
          
          <div class="grid_1-4 grid_1-3-sm grid_1-2-xs grid_1-xxs">
            <a href="{{ topic.public_articles_url }}" class='topic-card topic{{ topic.id }}'>
              <div class="_vertical-align">
                <div class="card-content">
                  <i class="topic-icon"></i>
                  <h4 class="_transition">{{ topic.name }}</h4>
                  
                  {% if topic.article_count > 0 %}
                    <h5 class='articles'>
                      {{ topic.article_count }}
                      {{ system.snippets.article | pluralize: topic.article_count, system.snippets.articles }}
                      <a href='{{ topic.public_articles_url }}'>{{system.snippets.view_all}}</a>
                    </h5>
                    <ul>
                      {% for article in topic.articles limit:5 %}
                        <li>
                          <a href='{{ article.public_url }}'>{{ article.subject_plain | clip:40 }}</a>
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                  
                </div>
              </div>
            </a>
          </div>

          {% endfor %}        
        </div>

      {% else %}
        <h4>{{system.snippets.no_topics_avail}}</h4>
      {% endif %}

    </div>
  </div>

  <!-- GS -->
  {% if desk.apps.get_satisfaction.enabled %}
  <div id='support-main' style='margin-top:20px;'>
    <div class='support-body'>
      <div class='content dashboard'>
        <h3>{{system.snippets.community_discussions}}</h3>
          <table id="gs-table" width='100%' cellspacing='0'>
          <tr class="row1">
            <td class="col1" width="50%">
              <div id="gs_questions">
                <img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display:block;margin:auto;' />
              </div>
            </td>
            <td class="col2">
              <div id="gs_ideas">
                <img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display:block;margin:auto;' />
              </div>
            </td>
          </tr>
          <tr class="row2 last">
            <td class="col1">
              <div id="gs_problems">
                <img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display:block;margin:auto;' />
              </div>
            </td>
            <td class="col2">
              <div id="gs_praises">
                <img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display:block;margin:auto;' />
              </div>
            </td>
          </tr>
      {{gs_scripting}}
        </table>
      </div>
    </div>
  </div>
  {% endif %}
  <!-- GS -->

  <!--
  ***************
  The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
  If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
  ****************
  -->
  <div id='footer'>
    {{ desk.page.theme.footer_content }}
    <div class="powered_by_desk">
      <a href='http://www.desk.com'><div class="powered_by_logo"></div></a>
      Powered by &nbsp;Desk.com
    </div>
  </div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.page_index.js"></script>

header.html

{% if desk.apps.get_satisfaction.enabled %}
{{ gsinit }}
{% endif %}

{% if favicon.size > 0 %}
<link rel='SHORTCUT ICON' type='image/ico' href='{{favicon}}' />
<link rel='icon' type='image/png' href='{{favicon}}' />
{% else %}
<link rel='icon' type='image/vnd.microsoft.icon' href='{{ "/favicon.ico" | portal_image_url: image_asset_host }}' />
<link rel='icon' type='image/png' href='{{ "/favicon.png" | portal_image_url: image_asset_host }}' />
{% endif %}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>
  {{ site.company_name }} |
  {% case page %}
  {% when 'page_index' %}
  {{desk.system.snippets.portal_title}}
  {% when 'page_search_result' %}
  {{desk.system.snippets.search_results}}
  {% when 'page_topic' %}
  {{ topic.name | clip:40 }}
  {% when 'page_article' %}
  {{ article.subject_plain | clip:40 }}
  {% when 'question_new' or 'question_pre_create' %}
  {{desk.system.snippets.post_public_question}}
  {% when 'question_show' %}
  {{ question.subject_plain | clip:40 }}
  {% when 'email_new' or 'email_pre_create' %}
  {{desk.system.snippets.email_us}}
  {% when 'email_submitted' %}
  {{desk.system.snippets.email_sent}}
  {% when 'chat_new' or 'chat_pre_create' %}
  {{desk.system.snippets.live_chat}}
  {% when 'myportal_index' %}
  {{desk.system.snippets.my_cases}}
  {% when 'myportal_show' %}
  {{desk.page.content.case.subject | clip:40 }}
  {% when 'login' %}
  {{desk.system.snippets.login_title}}
  {% when 'registration' %}
  {{desk.system.snippets.registration_title}}
  {% when 'forgot_password' %}
  {{desk.system.snippets.password_reset_title}}
  {% when 'myaccount' %}
  {{desk.system.snippets.account_title}}
  {% when 'authentication_verification' %}
  {{desk.system.snippets.auth_verification_title}}
  {% when 'customer_feedback' %}
  {{desk.system.snippets.customer_feedback_title}}
  {% when 'customer_feedback_completed' %}
  {{desk.system.snippets.customer_feedback_title}}
  {% when 'customer_feedback_invalid' %}
  {{desk.system.snippets.customer_feedback_title}}
  {% endcase %}
</title>

{% if page == 'page_article' %}
  <meta property="og:title" content="{{ article.subject_plain | clip:40 }}"/>
  <meta property="og:type" content="article"/>
  <meta property="og:site_name" content="{{ site.company_name }}"/>
  <meta property="og:description" content="{{ article.body_text | clip: 120}}"/>
{% endif %}

{% if page == 'page_topic' %}
{% if portal.questions_enabled and topic.question_exists and topic.allow_questions %}
<link rel='alternate' type='application/rss+xml' title='{{ topic.name | clip:40 }} - Questions (RSS 2.0)' href='{{ topic.public_url }}/questions.rss' />
{% endif %}
{% if topic.article_count > 0 %}
<link rel='alternate' type='application/rss+xml' title='{{ topic.name | clip:40 }} - Articles (RSS 2.0)' href='{{ topic.public_url }}/articles.rss' />
{% endif %}
{% endif %}


<style type='text/css'>

  #support-main h3.verify-title {
    background: url('{{ "/images/twitter-small.gif" }}') no-repeat 0 3px;
  }

  #attachments strong {
    background: url('{{ "/images/attachment.png" | portal_image_url: image_asset_host }}') -1px 0 no-repeat;
  }

  #support-main .question .replies.agents h4 {
    background: url('{{ "/images/portal/check.png" | portal_image_url: image_asset_host }}') 0 center no-repeat;
  }

  .gs-idea {
    background: url('{{ "/images/portal/getsatisfaction/idea_mini.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat !important;
    background-position: 0px 1px;
  }

  .gs-question {
    background: url('{{ "/images/portal/getsatisfaction/question_mini.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat !important;
    background-position: 0px 1px;
  }

  .gs-praise {
    background: url('{{ "/images/portal/getsatisfaction/praise_mini.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat !important;
    background-position: 0px 1px;
  }

  .gs-update {
    background: url('{{ "/images/portal/getsatisfaction/update_mini.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat !important;
    background-position: 0px 1px;
  }

  .gs-problem {
    background: url('{{ "/images/portal/getsatisfaction/problem_mini.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat !important;
    background-position: 0px 1px;
  }

  #support-main .best-answer-green {
    background: url('{{ "/images/portal/check.png" | portal_image_url: image_asset_host }}') 0 center no-repeat;
  }

  .myportal-label {
    background: url('{{ "/images/mail.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat;
  }

  .myportal .a-selectbox select {
    background: url('{{ "/images/arrow_down.png" | portal_image_url: image_asset_host }}') right 0px no-repeat;
  }

  .myportal-button, .myportal-button:visited {
    background: url('{{ "/images/portal/button.gif" | portal_image_url: image_asset_host }}') 0 0 repeat-x;
  }

  .myaccount-form button,
  .authentication_verification-form button {
    background: url('{{ "/images/portal/button.gif" | portal_image_url: image_asset_host }}') 0 0 repeat-x;
  }

  .alternatelogins a:before {
    background: url('{{ "/images/portal/auth-icons.png" | portal_image_url: image_asset_host }}') no-repeat 99px 99px;
  }

  #add_facebook input {
    background: url('{{ "/images/portal/auth-icons.png" | portal_image_url: image_asset_host }}') no-repeat -265px -25px #5872a7;
  }

  #add_twitter input {
    background: url('{{ "/images/portal/auth-icons.png" | portal_image_url: image_asset_host }}') no-repeat -261px 0 #cfe4f0;
  }


{% if verification_step == 1 %}
  #verification_step_1 { display: block; }
  #verification_step_2 { display: none; }
{% else %}
  #verification_step_1 { display: none; }
  #verification_step_2 { display: block; }
{% endif %}


/* theme images */

#support-header{background-image:url(/customer/portal/attachments/578403) !important;}
  
</style>


<link rel="stylesheet" href="https://dl.dropbox.com/style.css">

Q&A-new.html

<div id="desk-external-variables-question_new" class="desk-external-variables">
  <div id="qna-kb_topic_id">{{qna.kb_topic_id}}</div>
  <div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
  <div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
  <div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
  <div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
  <div id="system-snippets-subject_required">{{system.snippets.subject_required}}</div>
  <div id="system-snippets-question_required">{{system.snippets.question_required}}</div>
  <div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
</div>

<div id='breadcrumbs'>
  <a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.post_public_question}}
</div>
<div id='support-main'>
  <div class='support-body'>
    <div class='content'>
      <h3>{{system.snippets.post_public_question}}</h3>
      <div id='form'>
        {{form_begin}}
          <div class='input-block'>
            <span class='label'>{{system.snippets.topic}}</span>
            <div>
              <select id='qna_kb_topic_id' name='qna[kb_topic_id]'>
                {% for topic in topics %}
                <option value='{{ topic.id }}'>{{ topic.name | clip:30 }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          {% if current_user == nil or current_user.is_guest %}
            <div class='input-block'>
              <span class='label'>
                {{system.snippets.your_name}} <span>({{system.snippets.required}})</span>
              </span>
              <div>
                <input id='interaction_name' value='{{ interaction.name }}' maxlength='100' name='interaction[name]' type='text' />
              </div>
            </div>
            <div class='input-block'>
              <span class='label'>
                {{system.snippets.your_email}} <span>({{system.snippets.required}})</span>
              </span>
              <div>
                <input id='interaction_email' value='{{ interaction.email }}' maxlength='100' name='interaction[email]' type='text' />
              </div>
            </div>
          {% endif %}
          <div class='input-block'>
            <span class='label'>
              {{system.snippets.subject}} <span>({{system.snippets.required}})</span>
            </span>
            <div>
              <input id='qna_subject' maxlength='100' name='qna[subject]' type='text' value='{% if search_term and search_term != '' %}{{search_term}}{% else %}{{qna.subject}}{%endif%}' />
            </div>
          </div>
          <div class='input-block'>
            <span class='label'>
              {{system.snippets.your_question}} <span>({{system.snippets.required}})</span>
            </span>
            <div>
              <textarea id='qna_body' name='qna[body]'>{{qna.body}}</textarea>
            </div>
          </div>
          <div class='input-button'>
            <input class="btn primary" id='question_submit' name='commit' type='submit' value='{{system.snippets.ask_question}}' />
            <img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
          </div>
        {{form_end}}
      </div>
    </div>
  </div>
  <!--
  ***************
  The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
  If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
  ****************
  -->
  <div id='footer'>
    {{ desk.page.theme.footer_content }}
    <div class="powered_by_desk">
      <a href='http://www.desk.com'><div class="powered_by_logo"></div></a>
      Powered by &nbsp;Desk.com
    </div>
  </div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.question_new.js"></script>

my-cases-detail.html

{% assign case = desk.page.content.case %}
<div id="desk-external-variables-myaccount" class="desk-external-variables">
  <div id="system-snippets-reply_required">{{system.snippets.message_required}}</div>
</div>
<div id='breadcrumbs'>
  <a href='{{desk.system.links.home}}'>{{desk.system.snippets.home}}</a> &rsaquo; <a href='/customer/en/portal/private/cases?b_id=12296'>{{desk.system.snippets.my_cases}}</a> &rsaquo; {{case.subject | clip:30 }}
</div>


<div id='support-main'>
  <div class='support-body myportal'>
    <div class='content case'>
      <div class='case-details clearfix'>
        <div id="status-update">
          {{resolve_or_reopen_button}}
        </div>
        <h3>{{case.subject}}</h3>
        <div class='status'>
          <img src='{{ case.channel_icon }}'/>
          {% if case.is_twitter_channel? %}
          {% elsif case.is_facebook_channel? %}
          {% else %}
          <span class='a-{{case.status.name}}'>
            {% case case.status.id %}
              {% when 10 %}
                  {{desk.system.snippets.case_new}}
              {% when 30 %}
                  {{desk.system.snippets.case_open}}
              {% when 50 %}
                  {{desk.system.snippets.case_pending}}
              {% when 70 %}
                  {{desk.system.snippets.case_resolved}}
              {% when 90 %}
                  {{desk.system.snippets.case_closed}}
            {% endcase %}
          </span>
          {% endif %}
        </div>
        <div class='meta'>
          <ul class='case-data'>
            <li>
              <strong>{{desk.system.snippets.case_id}}:</strong>
              <span>{{case.id}}</span>
            </li>
            <li>
              <strong>{{desk.system.snippets.assigned_agent}}:</strong>
              <span>{{case.user.name_public | show_something: desk.system.snippets.unassigned}}</span>
            </li>
          </ul>
          <ul class='case-dates'>
            {% if case.is_twitter_channel? %}
              <li>
                <strong>{{desk.system.snippets.status}}:</strong>
                  {% case case.status.id %}
                    {% when 10 %}
                        {{desk.system.snippets.case_new}}
                    {% when 30 %}
                        {{desk.system.snippets.case_open}}
                    {% when 50 %}
                        {{desk.system.snippets.case_pending}}
                    {% when 70 %}
                        {{desk.system.snippets.case_resolved}}
                    {% when 90 %}
                        {{desk.system.snippets.case_closed}}
                  {% endcase %}
              </li>
            {% elsif case.is_facebook_channel? %}
              <li>
                <strong>{{desk.system.snippets.status}}:</strong>
                  {% case case.status.id %}
                    {% when 10 %}
                        {{desk.system.snippets.case_new}}
                    {% when 30 %}
                        {{desk.system.snippets.case_open}}
                    {% when 50 %}
                        {{desk.system.snippets.case_pending}}
                    {% when 70 %}
                        {{desk.system.snippets.case_resolved}}
                    {% when 90 %}
                        {{desk.system.snippets.case_closed}}
                  {% endcase %}
              </li>
            {% endif %}
            <li>
              <strong>{{desk.system.snippets.updated}}:</strong>
              <span class="date">{{case.updated_at | in_time_zone: site.timezone | date: '%b %d, %Y' }}</span>
            </li>
            <li>
              <strong>{{desk.system.snippets.created}}:</strong>
              <span class="date">{{case.created_at | in_time_zone: site.timezone | date: '%b %d, %Y' }}</span>
            </li>
          </ul>
          <div style="clear:both"></div>
        </div>
      </div>
      <div class='interactions'>
      {% if case.is_email_channel? %}
        {% for email in case.emails %}
        <div class='interaction'>
          <span class='gravatar-wrapper'>
            {% if email.inbound? %}
              {% if case.customer.facebook.profile_image_url != nil %}
                <img src="{{ case.customer.facebook.profile_image_url }}" class="gravatar" />
              {% elsif case.customer.twitter.profile_image_url != nil %}
                <img src="{{ case.customer.twitter.profile_image_url }}" width="48" height="48" class="gravatar twitter-avatar" />
              {% else %}
                {{ email.from | gravatar_image: gravatar_unknown_user,   ssl }}
              {% endif %}
            {% else %}
              {{ email.agent.email | gravatar_image: gravatar_unknown_user,   ssl }}
            {% endif %}
          </span>
          <div class='interaction-details'>
            <div class='meta'>
              {% if email.inbound? %}
                <span>{{email.from_name | show_something: case.customer.name}}</span>
              {% else %}
                <span>{{email.agent.name_public}}</span>
              {% endif %}
              <span class='date'>{{email.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p' }}</span>
            </div>
            {% if email.is_erased? %}
              {% capture params %}"name":"{{email.erased_by.name}}"{% endcapture %}
              <div class='interaction-body'>{{desk.system.snippets.content_erased | format_snippet: params }}</div>
            {% else %}
              <div class='interaction-body'>{{ email.new_html | escape_newlines }}</div>
            {% endif %}
            {% if email.attachments.size > 0 %}
              {{desk.system.snippets.attachments}}
              {% for attachment in email.attachments %}
                | <a target="_blank" href="{{attachment.url}}">{{attachment.file_name}}</a>
              {% endfor %}
            {% endif %}
          </div>
        </div>
        {% endfor %}
      {% elsif case.is_qna_channel? %}
        {% assign question = case.question %}
        {% if question.hidden? %}
          <div class='interaction'>
            <h1>{{system.snippets.not_posted_question_yet}}</h1>
          </div>
        {% else %}
          <div class='interaction'>
            <span class='gravatar-wrapper'>
              {% if case.customer.facebook.profile_image_url != nil %}
                <img src="{{ case.customer.facebook.profile_image_url }}" class="gravatar" />
              {% elsif case.customer.twitter.profile_image_url != nil %}
                <img src="{{ case.customer.twitter.profile_image_url }}" width="48" height="48" class="gravatar twitter-avatar" />
              {% else %}
                {{ question.from_email | gravatar_image: gravatar_unknown_user,   ssl }}
              {% endif %}
            </span>
            <div class='interaction-details'>
              <div class='meta'>
                <span>{{question.from_name | show_something: case.customer.name}}</span>
                <span class='date'>{{question.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}</span>
              </div>
              <div class='interaction-body'>{{ question.body_plain | escape_newlines }}</div>
            </div>
          </div>
          {% for answer in case.answers %}
          <div class='interaction'>
            <span class='gravatar-wrapper'>
              {% if answer.inbound? %}
                {% if answer.customer.facebook.profile_image_url != nil %}
                  <img src="{{ answer.customer.facebook.profile_image_url }}" class="gravatar" />
                {% elsif answer.customer.twitter.profile_image_url != nil %}
                  <img src="{{ answer.customer.twitter.profile_image_url }}" width="48" height="48" class="gravatar twitter-avatar" />
                {% else %}
                  {{ answer.from_email | gravatar_image: gravatar_unknown_user,   ssl }}
                {% endif %}
              {% else %}
                {{ answer.agent.email | gravatar_image: gravatar_unknown_user,   ssl }}
              {% endif %}
            </span>
            <div class='interaction-details'>
              <div class='meta'>
                {% if answer.inbound? %}
                  <span>{{answer.from_name | show_something: case.customer.name}}</span>
                {% else %}
                  <span>{{answer.agent.name_public}}</span>
                {% endif %}
                <span class='date'>{{answer.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p %Z' }}</span>
              </div>
              {% if answer.is_erased? %}
                {% capture params %}"name":"{{answer.erased_by.name}}"{% endcapture %}
                <div class='interaction-body'>{{desk.system.snippets.content_erased | format_snippet: params }}</div>
              {% else %}
                <div class='interaction-body'>{{ answer.body_plain | escape_newlines }}</div>
              {% endif %}
            </div>
          </div>
          {% endfor %}
        {% endif %}
      {% elsif case.is_chat_channel? %}
        {% assign chat = case.chat %}
        {% for message in chat.messages %}
          {% if message.from_system? %}
            <div class='system-message'>
              <span>{{message.text}}</span> at {{message.created_at | in_time_zone: site.timezone | date: '%I:%M%p' }}</span>
            </div>
          {% else %}
            <div class='interaction chat'>
              <div class='interaction-details'>
                <div class='meta'>
                  <span>{{message.user.name}}</span>
                  <span class='date'>{{message.created_at | in_time_zone: site.timezone | date: '%I:%M%p' }}</span>
                </div>
                 <div class='interaction-body'>{{ message.text | escape_newlines }}</div>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      {% elsif case.is_twitter_channel? %}
        {% for tweet in case.tweets %}
          {% assign reply_to = tweet.public_url %}
          {% assign tweet_dm = tweet.dm %}
          <div class='interaction'>
            <span class='gravatar-wrapper'>
              {% if tweet.inbound? %}
                <img src="{{ case.customer.twitter.profile_image_url }}" width="48" height="48" class="gravatar twitter-avatar" />
              {% else %}
                {{ tweet.agent.email | gravatar_image: gravatar_unknown_user,   ssl }}
              {% endif %}
            </span>
            <div class='interaction-details'>
              <div class='meta'>
                {% if tweet.inbound? %}
                  <span><a href="http://twitter.com/{{ tweet.twitter_customer.login }}" target="_blank">{{case.customer.name}}</a> via {{ tweet.twitter_customer.login }}</span>
                {% else %}
                  <span>{{tweet.agent.name_public}}</span>
                {% endif %}
                <span class='date'>{{tweet.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p' }}</span>
              </div>
              {% if tweet.is_erased? %}
                {% capture params %}"name":"{{tweet.erased_by.name}}"{% endcapture %}
                <div class='interaction-body'>{{desk.system.snippets.content_erased | format_snippet: params }}</div>
              {% else %}
                <div class='interaction-body'>{{ tweet.subject | escape_newlines }}</div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
        <div style="clear:both;"></div>
        <div class="case-footer">
          {% if tweet_dm %}
          <p>This is a private message (Direct Message). Please log into <a href="http://www.twitter.com" target="_blank">Twitter</a> to view and reply to this thread.</p>
          {% else %}
          <p><a href="{{ reply_to }}" target="_blank">View and reply to this tweet on Twitter</a></p>
          {% endif %}
        </div>
      {% elsif case.is_facebook_channel? %}
        {% for facebook_feeds in case.facebook_feed_items_non_draft %}
          {% assign thread_url = facebook_feeds.public_url %}
          <div class='interaction'>
            <span class='gravatar-wrapper'>
              {% if case.customer.id == facebook_feeds.from_customer.id %}
                {% if case.customer.facebook.profile_image_url != nil %}
                  <img src="{{ case.customer.facebook.profile_image_url }}" class="gravatar" />
                {% else %}
                  {{ facebook_feeds.agent.email | gravatar_image: gravatar_unknown_user,   ssl }}
                {% endif %}
              {% else %}
                {{ facebook_feeds.agent.email | gravatar_image: gravatar_unknown_user,   ssl }}
              {% endif %}
            </span>
            <div class='interaction-details'>
              <div class='meta'>
                {% if facebook_feeds.agent == nil %}
                  <span>{{ facebook_feeds.from_customer.name_public }}</span>
                {% else %}
                  <span>{{ facebook_feeds.agent.name }} via {{ facebook_feeds.from_customer.name_public }}</span>
                {% endif %}
                <span class='date'>{{facebook_feeds.created_at | in_time_zone: site.timezone | date: '%b %d, %Y %I:%M%p' }}</span>
              </div>
              {% if facebook_feeds.is_erased? %}
                {% capture params %}"name":"{{facebook_feeds.erased_by.name}}"{% endcapture %}
                <div class='interaction-body'>{{desk.system.snippets.content_erased | format_snippet: params }}</div>
              {% else %}
                <div class='interaction-body'>{{ facebook_feeds.message | escape_newlines }}</div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
        <div class="case-footer">
          <p><a href="{{ thread_url }}" target="_blank">View and reply to this thread on Facebook</a></p>
        </div>
      {% elsif case.is_phone_channel? %}
        <div class='interaction'>
          {{ case.description | escape_newlines }}
        </div>
      {% endif %}
      </div>
      {% if case.can_accept_replies and case.customer.id == desk.customer.id %}
        <div id="desk-external-variables-email_new" class="desk-external-variables">
          <div id="max_number_attachments">{{desk.system.max_attachments}}</div>
          <div id="system-snippets-add_attachment">{{system.snippets.add_attachment}}</div>
        </div>
        <div style="clear:both;"></div>
            <div id="form" class="{% if case.resolved? %}hidden{% endif %}">
            {% if case.is_email_channel? %}
              {{form_begin}}
                <div class='input-block'>
                  <h4>{{desk.system.snippets.reply_to_this_case}}</h4>
                  <div>
                    <textarea id="interaction_body" name="interaction[body]"></textarea>
                  </div>
                </div>
                <div class='input-block'>
                  <span class='label'>
                    {{system.snippets.file_attachment}}
                  </span>
                  <div class="desk_file_upload">
                    <input class="btn secondary" type="button" value="{{system.snippets.choose_file}}"/>
                    <input name="case_attachment[attachment]" size="84" type="file"/>
                    <div class="faux-file-field">
                      <input type="text" disabled="disabled"/>
                    </div>
                  </div>
                </div>
                <br/>
                <div class='input-button'>
                  <input class="btn primary" id='reply_submit' name='commit' type='submit' value='{{system.snippets.send_text}}' />
                </div>
              {{form_end}}
            {% else %}
              {{form_begin}}
                <div class='input-block'>
                  <h4>{{system.snippets.post_public_answer}}</h4>
                  <div>
                    <textarea id="interaction_body" name="interaction[body]"></textarea>
                  </div>
                </div><br/>
                <div class='input-button'>
                  <input class="btn primary" id='reply_submit' name='commit' type='submit' value='{{system.snippets.post_answer}}' />
                </div>
              {{form_end}}
            {% endif %}
          </div>
        {% endif %}
      </div>
    </div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.myportal_show.js"></script>

layout.html

<div id='company-support-portal' class="{{page}}">
  <div id='company-header'>
    <div class='wrapper'>
      {{ desk.page.theme.header_content }}
      <a class="site-logo" href="{{ desk.system.links.home }}"><img src="{{desk.page.theme.logo-img}}" alt="Site Logo"></a>
      
      {% if portal.authentication_enabled and page != 'customer_feedback' and page != 'customer_feedback_completed' and page != 'customer_feedback_invalid' %}
      <div id='customer-account'>
        {% if current_user and current_user.is_guest == false %}
        <span>
          {{system.snippets.welcome}} {{ current_user.customer.name }}
        </span>
        {% if site.myportal_enabled %}
        <a href='{{ desk.system.links.myportal }}'>{{system.snippets.my_cases}}</a>
        {% endif %}
        {% if site.portal_authentication_type_config == 'desk' %}
        <a href='{{ desk.system.links.myaccount }}'>{{system.snippets.my_account}}</a>
        {% endif %}
        {% if site.portal_logout_enabled_config %}
        <a href='{{ site.authentication_logout_url }}'>{{system.snippets.logout}}</a>
        {% endif %}
        {% else %}
        <span>
          {{system.snippets.welcome_guest}}
        </span>
        <a href='{{ site.authentication_login_url }}'>{{system.snippets.login}}</a>
        {% endif %}
      </div>
      {% endif %}
      <div style="float:right">{{langs_list}}</div>
      <div style="clear:both"></div>
    </div>
  </div>
  {% if page != 'customer_feedback' and page != 'customer_feedback_completed' and page != 'customer_feedback_invalid' %}
  <div id='support-header'>
    <div class='wrapper'>
      <h2>{{system.snippets.support_center}}</h2>
      {% if page != 'myportal_index' and page != 'myportal_show' and page != 'myaccount' %}
      {{ search_form_begin }}
        <div class='outer'>
          <div class='inner'>
            <input type='text' id='q' name='q' maxlength='100' value='' />
            {{template_form_params}}
            <div id='question-mask' class='question-big'>{{system.snippets.have_a_question}}</div>
            <button type="submit" id="support-search-submit">
              <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 22 22" enable-background="new 0 0 22 22" xml:space="preserve" fill="#ff7430">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M21.504,21.504c-0.661,0.661-1.734,0.661-2.395,0l-4.189-4.189
                c-1.537,1.068-3.401,1.698-5.414,1.698C4.256,19.013,0,14.757,0,9.506S4.256,0,9.506,0s9.506,4.256,9.506,9.506
                c0,2.013-0.63,3.877-1.697,5.414l4.189,4.189C22.165,19.771,22.165,20.843,21.504,21.504z M9.506,3.002
                c-3.592,0-6.504,2.912-6.504,6.504s2.912,6.504,6.504,6.504s6.505-2.912,6.505-6.504S13.099,3.002,9.506,3.002z"></path>
              </svg>
              </button>
          </div>
        </div>
      {{ search_form_end }}
    {% endif %}

    </div>
  </div>
  {% endif %}

  <div class='wrapper'>
    {{desk:body}}

    {% if page != 'customer_feedback' and page != 'customer_feedback_completed' and page != 'customer_feedback_invalid' %}
    <div id='support-side'>
      <div class='content'>
        <h3>{{system.snippets.contact_us}}</h3>
        <ul>
          {% if portal.questions_enabled %}
          <li>
            <a href='{{desk.system.links.question}}'>{{system.snippets.post_public_question}}</a>
          </li>
          {% endif %}

          <!-- GS -->
          {% if desk.apps.get_satisfaction.enabled %}
          <li>
            <a id='gs_link' target='_blank'>{{system.snippets.ask_community}}</a>
          </li>
          {% endif %}
          <!-- GS -->

          {% if site.email_enabled_config %}
          <li>
            <a href='{{desk.system.links.email}}'>{{system.snippets.email_us}}</a>
          </li>
          {% endif %}
          {% if site.chat_enabled_config %}
          <li>
            <a href='{{desk.system.links.chat}}'>{{system.snippets.live_chat}}</a>
          </li>
          {% endif %}
          {% if site.phone_enabled_config %}
          <li>
            {{ desk.page.theme.contact_us_content }}
          </li>
          {% endif %}
        </ul>
      </div>

      <!-- GS -->
      {% if desk.apps.get_satisfaction.enabled %}
      <div class='content'>
        <h3>{{system.snippets.recent_discussions}}</h3>
        <div id='gs_Sidebar_Results'>
          <img alt='Ajax-loader-small' id='question_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display:block;margin:auto;' />
        </div>
        {{gs_recent_activity_scripting}}
      </div>
      {% endif %}
      <!-- GS -->
    </div>
    {% endif %}
  </div>
</div>



<!-- Facebook Like Button -->
<div id="fb-root"></div>

<!-- External Variables for Portal Header -->
<div id="desk-external-variables-header" class="desk-external-variables">
 <div id="read_only">{{read_only}}</div>
 <div id="site-default_mailbox">{{site.default_mailbox}}</div>
 <div id="desk_javascript_host">{{desk_javascript_host}}</div>
 <div id="twitter_enabled">{{desk.apps.twitter.enabled}}</div>
 <div id="twitter_username">{{desk.apps.twitter.username}}</div>
 <div id="system-snippets-loading">{{system.snippets.loading}}</div>
 <div id="system-snippets-seconds_ago">{{system.snippets.seconds_ago}}</div>
 <div id="system-snippets-a_minute_ago">{{system.snippets.a_minute_ago}}</div>
 <div id="system-snippets-minutes_ago">{{system.snippets.minutes_ago}}</div>
 <div id="system-snippets-an_hour_ago">{{system.snippets.an_hour_ago}}</div>
 <div id="system-snippets-hours_ago">{{system.snippets.hours_ago}}</div>
 <div id="system-snippets-a_day_ago">{{system.snippets.a_day_ago}}</div>
 <div id="system-snippets-days_ago">{{system.snippets.days_ago}}</div>
 <div id="system-snippets-about">{{system.snippets.about}}</div>
 <div id="enable_gs">{{desk.apps.get_satisfaction.enabled}}</div>
 <div id="system-snippets-invalid_characters_found">{{system.snippets.invalid_characters_found}}</div>
 <div id="site-search_autocomplete_articles_url">{{site.search_autocomplete_articles_url}}</div>
 <div id="search-term">{{search_term}}</div>
 {% if desk.apps.get_satisfaction.enabled %}
 <div id="system-snippets-get_satisfaction_error">{{system.snippets.get_satisfaction_error}}</div>
 <div id="system-snippets-view_all">{{system.snippets.view_all}}</div>
 <div id="system-snippets-no_related_discussions">{{system.snippets.no_related_discussions}}</div>
 <div id="system-snippets-related_discussions">{{system.snippets.related_discussions}}</div>
 <div id="zero0">{{0}}</div>
 <div id="system-snippets-discussions">{{system.snippets.discussions}}</div>
 <div id="system-snippets-replies">{{system.snippets.replies}}</div>
 <div id="system-snippets-questions">{{system.snippets.questions}}</div>
 <div id="system-snippets-ideas">{{system.snippets.ideas}}</div>
 <div id="system-snippets-problems">{{system.snippets.problems}}</div>
 <div id="system-snippets-praise">{{system.snippets.praise}}</div>
 {% endif %}
</div>

<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.shared.js"></script>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.header.js"></script>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.layout_footer.js"></script>


<script>
  jQuery(function($){

    var $questionMark = $("#question-mask"), $q = $('#q');

    $q.autocomplete({ appendTo: '#support-search'});

    if(!$questionMark.is(":visible") && $q.val() != ''){
      $q.val('');
      $questionMark.show();
    }

  }); //end jQuery
</script>

email-new.html

<div id="desk-external-variables-email_new" class="desk-external-variables">
  <div id="system-snippets-name_required">{{system.snippets.name_required}}</div>
  <div id="system-snippets-email_required">{{system.snippets.email_required}}</div>
  <div id="system-snippets-invalid_email">{{system.snippets.invalid_email}}</div>
  <div id="system-snippets-subject_required">{{system.snippets.subject_required}}</div>
  <div id="system-snippets-question_required">{{system.snippets.question_required}}</div>
  <div id="system-snippets-exceeding_max_chars">{{system.snippets.exceeding_max_chars}}</div>
  <div id="max_number_attachments">{{desk.system.max_attachments}}</div>
  <div id="system-snippets-add_attachment">{{system.snippets.add_attachment}}</div>
</div>

<div id='breadcrumbs'>
  <a href='{{desk.system.links.home}}'>{{system.snippets.home}}</a> &rsaquo; {{system.snippets.email_us}}
</div>
<div id='support-main'>
  <div class='support-body'>
    <div class='content'>
      <div class="title">
        <h3>{{system.snippets.email_us}}</h3>
      </div>
      <div id='form'>
        {{form_begin}}
          {% if current_user == nil or current_user.is_guest %}
            <div class='input-block'>
              <span class='label'>
                {{system.snippets.your_name}} <span>{{system.snippets.required}}</span>
              </span>
              <div>
                <input value='{{ interaction.name }}' id='interaction_name' maxlength='100' name='interaction[name]' type='text' />
              </div>
            </div>
            <div class='input-block'>
              <span class='label'>
                {{system.snippets.your_email}} <span>{{system.snippets.required}}</span>
              </span>
              <div>
                <input value='{{ interaction.email }}' id='interaction_email' maxlength='100' name='interaction[email]' type='text' />
              </div>
            </div>
          {% endif %}
          <div class='input-block'>
            <span class='label'>
              {{system.snippets.subject}} <span>{{system.snippets.required}}</span>
            </span>
            <div>
              <input id='email_subject' maxlength='100' name='email[subject]' type='text' value='{% if search_term and search_term != '' %}{{search_term}}{% else %}{{email.subject}}{%endif%}'/>
            </div>
          </div>
          <div class='input-block'>
            <span class='label'>
              {{system.snippets.message}} <span>{{system.snippets.required}}</span>
            </span>
            <div>
              <textarea id='email_body' name='email[body]'>{{email.body}}</textarea>
            </div>
          </div>
          <div class='input-block'>
            <span class='label'>
              {{system.snippets.file_attachment}}
            </span>
            <div class="desk_file_upload">
              <input class="button -ghost-dark" type="button" value="{{system.snippets.choose_file}}"/>
              <input name="case_attachment[attachment]" size="84" type="file"/>
              <div class="faux-file-field">
                <input type="text" disabled="disabled"/>
              </div>
            </div>
          </div><br/>
          <div class='input-button'>
            <input class="button -primary -full-width -size-md" id='email_submit' name='commit' type='submit' value='{{system.snippets.send_email}}' />
            <img alt='Ajax-loader-small' id='email_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
          </div>
        {{form_end}}
      </div>
    </div>
  </div>
  <!--
  ***************
  The following attribution needs to remain as is in terms of wording with the appropriate link back to desk.com as per our terms of service: http://www.desk.com/terms
  If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
  ****************
  -->
  <div id='footer'>
    {{ desk.page.theme.footer_content }}
    {% if site.seo_footer %}
      <div class="powered_by_desk powered_by_desk_v2">Powered By
        <a class="powered_by_logo powered_by_logo_v2" href="http://www.desk.com">
          <div>Desk.com</div><div> Customer Service and Helpdesk Ticket Software</div></a>
      </div>
    {% else %}
      <div class="powered_by_desk">
        <a href='http://www.desk.com'><div class="powered_by_logo"></div></a>
        Powered by &nbsp;Desk.com
      </div>
    {% endif %}
  </div>
</div>
<script type="text/javascript" src="{{desk_javascript_host}}portal/desk.portal.body.email_new.js"></script>

<script>
  
  jQuery(function($){
    
    // Value not equal rule
    $.validator.addMethod("valueNotEqual", function(value, element, arg){
      return arg != value;
    }, "Value must not equal arg.");
    
    function setRequiredFields(){
    if($(".required-field select:visible, .required-field input:visible").length > 0){
      $(".required-field select:visible, .required-field input:visible").each(function(){
        $(this).rules("add", { 
          required:true, 
          messages: { required: "This field is required." },
          valueNotEqual: ""
        });    
      });
    }

  }
  setRequiredFields();
  });//end jQuery
  
</script>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

DESK TEMPLATES