chameth.com/site/assets/style/legacy.css

body {
  -webkit-text-size-adjust: none
}

/* hire */
.hire {
  background-color: #afb6d9;
  border-radius: 10px;
  padding: 1em 1.5em;
  margin-bottom: 2em;
}

.hire h3, .hire p {
  margin: 0;
}

.hire a, .hire a:hover, .hire a:active {
  color: #4565ad !important;
}

summary {
  cursor: pointer;
}


/* Basic */

  body {
    background: #ffffff;
    min-width: 400px;
  }

p { margin: 0 0 2em 0; }


hr {
    border: 0;
    border-bottom: solid 2px #efefef;
    margin: 2em 0;
  }

  blockquote {
    border-left: solid 6px #efefef;
    font-style: italic;
    margin: 0 0 2em 0;
    padding: 0.5em 0 0.5em 1.5em;
  }

  blockquote p {
    margin-bottom: 0.5em;
  }

  blockquote p:last-child {
    margin-bottom: 0;
  }

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

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

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

/* Section/Article */

  article + article {
    padding-top: 100px;
    border-top: 10px solid rgba(200, 200, 200, 0.3);
    margin-top: 100px;
  }

  header p {
    color: #d2d2d2;
    position: relative;
    margin: 0 0 1.5em 0;
  }

  header h2 + p {
    color: #939393;
    font-size: 1.25em;
    margin-top: -1em;
    line-height: 1.5em;
  }

  header h3 + p {
    font-size: 1.1em;
    margin-top: -0.8em;
    line-height: 1.5em;
  }

  header h4 + p,
  header h5 + p,
  header h6 + p {
    font-size: 0.9em;
    margin-top: -0.6em;
    line-height: 1.5em;
  }

/* Image */

article img {
  max-width: 100%;
}

.image {
  border-radius: 0.35em;
  border: 0;
  display: inline-block;
  position: relative;
}

    .image:before {
      -moz-transition: opacity 0.2s ease-in-out;
      -webkit-transition: opacity 0.2s ease-in-out;
      -ms-transition: opacity 0.2s ease-in-out;
      transition: opacity 0.2s ease-in-out;
      background: url("/res/images/overlay.png");
      border-radius: 0.35em;
      content: '';
      display: block;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .image.thumb {
      text-align: center;
    }

      .image.thumb:after {
        -moz-transition: opacity 0.2s ease-in-out;
        -webkit-transition: opacity 0.2s ease-in-out;
        -ms-transition: opacity 0.2s ease-in-out;
        transition: opacity 0.2s ease-in-out;
        border-radius: 0.35em;
        border: solid 3px rgba(255, 255, 255, 0.5);
        color: #fff;
        content: 'View';
        display: inline-block;
        font-size: 0.8em;
        font-weight: 400;
        left: 50%;
        line-height: 2.25em;
        margin: -1.25em 0 0 -3em;
        opacity: 0;
        padding: 0 1.5em;
        position: absolute;
        text-align: center;
        text-decoration: none;
        top: 50%;
        white-space: nowrap;
      }

      .image.thumb:hover:after {
        opacity: 1.0;
      }

      .image.thumb:hover:before {
        background: url("/res/images/overlay.png"), url("/res/images/overlay.png");
        opacity: 1.0;
      }

    .image img {
      border-radius: 0.35em;
      display: block;
    }

    .image.left, figure.left {
      float: left;
      margin: 0 1.5em 1em 0;
      top: 0.25em;
    }

    .image.right, figure.right {
      float: right;
      margin: 0 0 1em 1.5em;
      top: 0.25em;
    }

    .image.left, .image.right, figure.left, figure.right {
      max-width: 40%;
    }

      .image.left img, .image.right img, figure.left img, figure.right img {
        width: 100%;
      }

    .image.fit {
      display: block;
      margin: 0 0 2em 0;
      width: 100%;
    }

      .image.fit img {
        width: 100%;
      }

/* List */

  ol {
    list-style: decimal;
    margin: 0 0 2em 0;
    padding-left: 1.25em;
  }

    ol li {
      padding-left: 0.25em;
    }

  ul {
    list-style: disc;
    margin: 0 0 2em 0;
    padding-left: 1em;
  }

    ul li {
      padding-left: 0.5em;
    }

/* Table */

  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  table {
    margin: 0 0 2em 0;
    width: 100%;
  }

    table tbody tr {
      border: solid 1px #efefef;
      border-left: 0;
      border-right: 0;
    }

      table tbody tr:nth-child(2n + 1) {
        background-color: #f7f7f7;
      }

    table td {
      padding: 0.75em 0.75em;
    }

    table th {
      color: #787878;
      font-size: 0.9em;
      font-weight: 400;
      padding: 0 0.75em 0.75em 0.75em;
      text-align: left;
    }

    table thead {
      border-bottom: solid 2px #efefef;
    }

    table tfoot {
      border-top: solid 2px #efefef;
    }

    table.alt {
      border-collapse: separate;
    }

      table.alt tbody tr td {
        border: solid 2px #efefef;
        border-left-width: 0;
        border-top-width: 0;
      }

        table.alt tbody tr td:first-child {
          border-left-width: 2px;
        }

      table.alt tbody tr:first-child td {
        border-top-width: 2px;
      }

      table.alt thead {
        border-bottom: 0;
      }

      table.alt tfoot {
        border-top: 0;
      }

/* Main */

  #main {
    margin-left: calc(60% - 27em);
    max-width: 54em;
    padding: 8em 4em 4em 4em;
    width: calc(100% - 20%);
  }

    #main > section {
      border-top: solid 2px #efefef;
      margin: 4em 0 0 0;
      padding: 4em 0 0 0;
    }

      #main > section:first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
      }

/* Touch */

  body.is-touch .image.thumb:before {
    opacity: 0.5 !important;
  }

  body.is-touch .image.thumb:after {
    display: none !important;
  }

  body.is-touch #header {
    background-attachment: scroll;
    background-size: auto, cover;
  }

/* XLarge */

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

    /* Basic */

      body, input, select, textarea {
        font-size: 12pt;
      }

  }

/* Large */

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

    /* Header */

      #header {
        padding: 6em 3em 3em 3em;
        width: 30%;
      }

        #header h1 {
          font-size: 1.25em;
        }

          #header h1 br {
            display: none;
          }

    /* Main */

      #main {
        margin-left: 30%;
        max-width: none;
        padding: 6em 3em 3em 3em;
        width: calc(100% - 30%);
      }

  }

/* Medium */

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

    /* Basic */

      h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {
        display: none;
      }

    /* List */

      ul.icons li .icon {
        font-size: 1.25em;
      }

    /* Header */

      #header {
        background-attachment: scroll;
        background-position: top left, center center;
        background-size: auto,    cover;
        left: auto;
        padding: 6em 4em;
        position: relative;
        text-align: center;
        top: auto;
        width: 100%;
        display: block;
      }

        #header h1 {
          font-size: 1.75em;
        }

          #header h1 br, #posts .recent *, #posts .recent a {
            display: inline;
            padding: 0;
            width: auto;
          }

          #posts ul {
            padding-left: 0;
          }

          #posts ul li {
            text-align: left;
            margin: 0;
          }

    /* Main */

      #main {
        margin: 0;
        padding: 6em 4em;
        width: 100%;
      }

  }

/* Small */

  @media screen and (max-width: 736px), screen and (max-height: 700px) {

    /* Basic */

      h1 {
        font-size: 1.5em;
      }

      h2 {
        font-size: 1.2em;
      }

      h3 {
        font-size: 1em;
      }

    /* Section/Article */

      section.special, article.special {
        text-align: center;
      }

      header.major h2 {
        font-size: 1.35em;
      }

    /* List */

      ul.labeled-icons li {
        padding-left: 2em;
      }

        ul.labeled-icons li h3 {
          line-height: 1.75em;
        }

    /* Header */

      #header {
        padding: 2.25em 1.5em;
        min-height: 18em;
      }

      #header section {
        padding: 10px 0;
      }

        #header h1 {
          font-size: 1.35em;
        }


        #header ul {
          margin-bottom: 20px;
        }

        #posts {
          position: absolute;
          bottom: 20px;
          right: 20px;
        }

        #posts li.recent {
          display: none;
        }

        #posts ul li {
          margin: 0 0;
          font-size: 0.9em;
          line-height: 1.3em;
        }

    /* Main */

      #main {
        padding: 2.25em 1.5em 0.25em 1.5em;
      }

        #main > section {
          margin: 2.25em 0 0 0;
          padding: 2.25em 0 0 0;
        }

  }

/* XSmall */

  @media screen and (max-width: 480px), screen and (max-height: 700px)  {

    /* List */

      ul.actions {
        margin: 0 0 2em 0;
      }

        ul.actions li {
          display: block;
          padding: 1em 0 0 0;
          text-align: center;
          width: 100%;
        }

          ul.actions li:first-child {
            padding-top: 0;
          }

          ul.actions li > * {
            margin: 0 !important;
            width: 100%;
          }

            ul.actions li > *.icon:before {
              margin-left: -2em;
            }

        ul.actions.small li {
          padding: 0.5em 0 0 0;
        }

          ul.actions.small li:first-child {
            padding-top: 0;
          }

    /* Header */

      #header {
        padding: 2.25em 1.5em 2em;
        min-height: 18em;
      }

      #header section {
        padding: 0;
      }

        #header h1 br {
          display: none;
        }

        #posts li.recent {
          display: none;
        }

        #header ul {
          margin-bottom: 20px;
        }

        #posts {
          position: absolute;
          bottom: 20px;
          right: 20px;
        }

        #posts ul li {
          margin: 0 0;
          font-size: 0.9em;
          line-height: 1.3em;
        }

  }