/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
  FAQ list
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
ul#faq_list {
  position: relative;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

  ul#faq_list li {
    position: relative;
    margin-bottom: 10px;
    padding: 0px;
    font-size: 16pt;
    border: 1px solid gray;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    background-image: url('/GCOM_C/users_portal/images/icon_link.png');
    background-repeat: no-repeat;
    background-position: 99% 50%;
    transition: 0.1s;
  }

    ul#faq_list li > a > div {
      position: absolute;
      top: 3px;
      left: 5px;
      width: 50px;
      border-radius: 3px;
      color: rgb(253,123,0);
      padding: 5px;
      margin: 0px 0px;
      vertical-align: middle;
      font-size: 16pt;
      border: 2px solid rgb(253,123,0);
      text-align: center;
      transition: 0.1s;
    }

    ul#faq_list li a {
      position: relative;
      top: 0px;
      left: 0px;
      padding: 10px 50px 10px 90px;
      text-decoration: none;
      display: block;
      width: calc(100% - 140px);
      height: 100%;
      color: rgb(50, 50, 50);
    }

    ul#faq_list li:hover {
      background-color: rgb(223,234,243);
    }
    ul#faq_list li:hover a {
      text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    }
    ul#faq_list li:hover > a > div {
      background-color: rgb(253,123,0);
      color: rgb(255,255,255);
    }
    ul#faq_list li:active {
      box-shadow: 0px 0px 2px rgba(0,0,0,0.4) inset;
    }

/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
  FAQ Contents
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
/* Question
---------------------------------------------------- */
div.question {
  position: relative;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 16pt;
  border: 1px solid gray;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

  div.question > div#qnum {
    position: absolute;
    top: 3px;
    left: 10px;
    width: 50px;
    border-radius: 3px;
    padding: 5px;
    margin: 0px 0px;
    vertical-align: middle;
    font-size: 16pt;
    background-color: rgb(253,123,0);
    color: rgb(255,255,255);
    border: 2px solid rgb(253,123,0);
    text-align: center;
  }

  div.question div#qtitle {
    position: relative;
    top: 0px;
    left: 80px;
    text-decoration: none;
    display: block;
    width: calc(100% - 100px);
    height: auto;
    color: rgb(50, 50, 50);
  }

/* Answer
---------------------------------------------------- */
div.answer {
  position: relative;
  margin-bottom: 0px;
  padding: 10px;
  font-size: 16pt;
  border: 1px solid gray;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

  div.answer > div#anum {
    position: absolute;
    top: 3px;
    left: 10px;
    width: 50px;
    border-radius: 3px;
    color: rgb(255,255,255);
    padding: 5px;
    margin: 0px 0px;
    vertical-align: middle;
    font-size: 16pt;
    border: 2px solid rgb(0,0,200);
    background-color: rgb(0,0,255);
    text-align: center;
  }

  div.answer div#atitle {
    position: relative;
    top: 0px;
    left: 80px;
    text-decoration: none;
    display: block;
    width: calc(100% - 100px);
    height: auto;
    color: rgb(50, 50, 50);
  }

  div.answer ul li {
    margin-bottom: 5px;
  }

  div.answer span {
    font-size: 12pt;
  }

  div.doclink {
    width: 100%;
    margin: 30px auto;
    text-align: center;
  }

  div.doclink a.pdflink {
    width: 60%;
    height: 40px;
    margin: 0px auto;
    line-height: 40px;
    border-radius: 1.0em;
    display: block;
    text-decoration: none;
    border: 2px solid rgb(14,118,67);
    background: -moz-linear-gradient(top, rgb(14,118,67), rgb(120,184,81));
    background: -webkit-linear-gradient(top, rgb(14,118,67), rgb(120,184,81));
    background: linear-gradient(to bottom, rgb(14,118,67), rgb(120,184,81));
    color: white;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.6);
  }
    div.doclink a.pdflink:hover {
      background: -moz-linear-gradient(top, rgb(120,184, 81), rgb(193,203, 21));
      background: -webkit-linear-gradient(top, rgb(120,184, 81), rgb(193,203, 21));
      background: linear-gradient(to bottom, rgb(120,184, 81), rgb(193,203, 21));
      background-color: rgb(255,255,255);
    }

  div.answer div#update {
    clear: both;
    font-size: 12pt;
    color: rgb(80, 80, 80);
    text-align: right;
    margin-top: 10px;
  }

  div.imgbox {
    margin: 20px auto;
    text-align: center;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    border-radius: 3px;
  }
    div.imgbox img {
      width: auto;
      margin: 10px auto;
    }

  div.codebox {
    margin: 10px auto;
    text-align: left;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    border-radius: 3px;
    padding: 0px;
  }
    div.codebox pre {
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      padding: 0px 10px;
      background-color: rgb(0,0,0);
      color: rgb(255,255,255);
      white-space: pre-wrap;
    }

/*  product table
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
table#prdlist {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgb(212,181,134);
}

  table#prdlist th {
    background-color: rgb(34,177,76);
    border: 1px solid rgb(212,181,134);
    font-size: 14pt;
    width: calc(100% / 6);
  }
  table#prdlist td {
    border: 1px solid rgb(212,181,134);
    font-size: 10pt;
    padding: 5pt;
  }
    table#prdlist td:first-child {
      font-size: 12pt;
    }

    table#prdlist td div {
      border-radius: 2.0em;
      text-align: center;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
      color: rgb(255,255,255);
    }
    table#prdlist td div:first-line {
      font-size: 12pt;
    }

      table#prdlist div.l1 {
        background: -moz-linear-gradient(top, rgb(0,0,0), rgb(100,100,100));
        background: -webkit-linear-gradient(top, rgb(0,0,0), rgb(100,200,100));
        background: linear-gradient(to bottom, rgb(0,0,0), rgb(100,100,100));
      }
      table#prdlist div.atm {
        background: -webkit-linear-gradient(top, rgb(0,0,0), rgb(100,200,100));
        background: linear-gradient(to bottom, rgb(0,0,0), rgb(100,100,100));
        box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
      }
      table#prdlist div.ocn {
        background: -webkit-linear-gradient(top, rgb(0,0,0), rgb(100,200,100));
        background: linear-gradient(to bottom, rgb(0,0,0), rgb(100,100,100));
        box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
      }
      table#prdlist div.lnd {
        background: -webkit-linear-gradient(top, rgb(0,0,0), rgb(100,200,100));
        background: linear-gradient(to bottom, rgb(0,0,0), rgb(100,100,100));
        box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
      }
      table#prdlist div.cry {
        background: -webkit-linear-gradient(top, rgb(0,0,0), rgb(100,200,100));
        background: linear-gradient(to bottom, rgb(0,0,0), rgb(100,100,100));
        box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
      }