/* BRIEF DESCRIPTION OF STYLESHEET'S PURPOSE.

   developer:   EstevaoT
   requires:    /common/framework/css/framework.css
   ========================================================================== */

/* ==========================================================================
  All
 ========================================================================== */

  * { font-family: 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;} 

  h1, h1 a {
    display: block;
    margin: 0 auto;
    color: #3d3d3d;
    font-size: 2.375rem;
    line-height: 2.375rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-decoration: none; 
  }

  .wrapper {
    max-width: 1152px;
    padding-top: 50px;
    padding-bottom: 40px; 
    margin: 0 auto;
  }

/* Page description (What's new in Mathematica X)
   ========================================================================== */
  
  .page-description .wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: repeat(4,auto);
    grid-column-gap: 100px;
    border-bottom: 1px solid #ddd;
    padding: 3.125rem 0 30px 0;
  }

  .page-description h1 {    
    color: #d51100;
    font-size: 2.525rem;
    font-weight: 400;
    line-height: 2.9375rem;
    margin: 0;
    margin-bottom: 1.25rem;
  }

  .page-description .subtitle {
    grid-column: 1;
    grid-row: 2;
  }

  .page-description .subtitle p {
    color: #ef4900;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5;
    padding-bottom: 1.5rem  ;
    margin-bottom: .625rem;
  }

  .page-description ul {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    grid-row-gap: 10px;
  }

  .page-description .wrapper > ul > li:first-of-type {
    align-self: flex-start;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
  }

  .page-description ul li {
    flex-basis: 100%;
    position: relative;
  }

  .page-description ul li > a,
  .page-description ul li > div {
    display: flex;
    flex-basis: 100%;
    align-items: center;
  }

  .page-description ul li > a img,
  .page-description ul li > div img {
    margin-right: 10px;
  }

  .page-description ul li,
  .page-description ul li a {
    color: #222;
    font-size: 0.923rem;
  }

  .page-description ul li.popup a {
    color: #535353;
  }

  .page-description > ul > li:hover,
  .page-description .new-features:hover p,
  .page-description ul > li a:hover,
  .page-description .popup li:hover a {
    color: #f77700;
  }

  .page-description .popup {
    cursor: pointer;
  }

  .page-description .popup .dropdown-wrapper {
    position: absolute;
    left: 35px;
    top: 23px;
    bottom: -30px;
  }

  .page-description .popup .dropdown-wrapper ul {
    background: #fff;
    border: 1px solid #f77700;
    box-shadow: 0 0 10px #ddd;
  }

  .popup:hover ul,
  .popup > ul:hover {
    display: block;
    bottom: 0;
  }

  .page-description .popup li {
    padding: 10px 20px;
  }

  .page-description .popup li:hover {
    background: #f2f2f2;
    color: #f77700;
  }
  

/* Featured areas
   ========================================================================== */

  #featured h2 {
    color: #222;
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.5rem;
  }

  #featured .tiles-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
    grid-row-gap: 50px;
    justify-content: center;    
    align-content: center;
    margin-top: 2rem;
  }

  #featured img {
    width: 100%;
    max-width: 300px;
    border: 1px solid #c7c7c7;
    margin-bottom: 5px;
  }

  #featured h3,
  #featured h3 a {
    font-size: 1.1rem;
    color: #dd1100;
  }

  #featured a:hover {
    color: #f77700;
  }

  #featured li a {
    color: #222;
    font-size: 0.9rem;
  }

  #featured li {
    margin-top: 10px;
  }

  #featured li a:hover { color: #f77700; }


/* ================================== 
   Misc
   ================================== */
  
  /* Dropdown and popup */
  .dropdown > a::after,
  .popup div > p::after {
    content: "";
    display: inline-block;
    height: 7px;
    margin-left: 5px;
    width: 10px;
  }

  .dropdown > a::after {
    background: url(/mathematica/img/icon-dropdown-gray.png) no-repeat;
    background-size: 10px 7px;
  }

  .dropdown .dropdown-wrapper,
  .popup .dropdown-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    visibility: hidden;
  }

  .dropdown.active .dropdown-wrapper,
  .popup:hover .dropdown-wrapper {
    opacity: 1; 
    transform: translateY(0);
    visibility: visible;
  }

  .mobile-dropdown ul { right: 0; }
  .popup { padding-bottom: 10px; }

  /* buttons */
  
  .btn.btn-red {
    padding: 5px 15px;
    color: #fff;
    background: #dc1001;
    border-radius: 4px;
  }

  .btn.btn-red:hover {
    background: #ac0000;
  }

  /* overlay */ 
  .overlay {
    display: none;
    cursor: pointer;
  }

  /* Colors */

  .divider { color: #aeaeae; }
  .c-orange, a.c-orange { color: #f77700 !important; }
  .c-orange:hover, a.c-orange:hover, a.c-orange:active { color: #dd1100 !important; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

  @media all and (max-width: 1200px) {

    .wrapper { margin: 0 50px; }

    /* page description */

    .page-description .wrapper {
      grid-column-gap: 50px;
    }

    .page-description .wrapper h1 {
      font-size: 2.525rem;
      grid-column: 1/-1;
      grid-row: 1;
    }

    .page-description ul {
      grid-row:2 / -1;
    }

    .page-description ul li a {
      font-size: 0.8rem;
    }

    /* Featured */
    #featured .tiles-grid {
      grid-gap: 16px;
      grid-row-gap: 40px;
    }

    #featured li h3 { font-size: 1.25rem; }
    #featured li a { font-size: 1.11rem; }

  }

/* styles for medium screens (900px)
   ========================================================================== */

  @media all and (max-width: 900px) {

    /* Main  */
    .wrapper { margin: 0 30px; }

    /* Page description */

    .page-description .wrapper { 
      grid-template-columns: 1fr; 
      grid-row-gap: 10px;
      padding-bottom: 8px;
    }

    .page-description .wrapper > ul {
      border-top: 1px solid #ddd;
      grid-row: 3;
      grid-column: 1/-1;
      grid-column-gap: 0;
      grid-row-gap: 0;
      padding-top: 30px;
      align-items: flex-start;
      padding-bottom: 3px;
    }

    .page-description .wrapper > ul > li:nth-of-type(-n+2) {
      margin-bottom: 20px;
    }

    .page-description .wrapper > ul > li:nth-of-type(odd) {
      margin-right: 10px;
    }

    .page-description .wrapper > ul li {
      flex-basis: 45%;
    }

    .page-description ul li,
    .page-description ul li a {
      font-size: 0.8rem;
      line-height: 1.2;
    }

    .page-description .wrapper > ul > li:first-of-type {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .page-description .wrapper > ul > li img { align-self: flex-start; }
    .page-description div > ul > li p {
      position: relative;
    }

    /* Featured  */
    
    #featured .tiles-grid {
      grid-template-columns: repeat(2,1fr);
    }
    #featured li h3 { line-height: 1.4rem; }
    #featured li a {
      font-size: 1rem;
      line-height: 1.25rem;
    }

  }

/* styles for small screens (600px)
   ========================================================================== */

  @media all and (max-width: 600px) {
    
    .wrapper { margin: 0 20px; }

    /* Page description */

    .page-description .subtitle p { line-height: 1.3; }
    .page-description .wrapper { 
      padding-top: 2rem; 
      padding-bottom: 0;
    }
    
    .page-description .popup .dropdown-wrapper { top: 42px; }
    .page-description .new-features .dropdown-wrapper ul {
      max-height: 300px;
      overflow-y: scroll;
    }
    
    /* Featured  */

    #featured .wrapper { padding-top: 2rem; }
    #featured .tiles-grid { margin-top: 2rem; }
    #featured li { margin-top: 13px; }
    #featured li a {
      font-size: 1.13rem;
      line-height: 1.25rem;
    }

    /* To work with different media queries */
    .display-b__600 { display: block !important; }
    .display-n__600 { display: none !important; }
    .justify-self-fe { justify-self: flex-end; }

  }

/* styles for minimum supported screen width (320px)
   ========================================================================== */

   @media all and (max-width: 320px) {}

/* printer styles
   ========================================================================== */

   @media print {}