/* Wolfram WSTPServer product page style.

   @file        styles.css.ja
   ========================================================================== */

header *,
section * {
    box-sizing: border-box;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
}

header {
    background: linear-gradient(#ffffff 0%, #ececec 100%);
}

.inner {
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 50px;
}

.inner a {
    text-decoration: none;
}

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

#wstpserver header .inner {
    padding-top:0;
    padding-bottom:37px;
}

a.badge {
    background: #1d96bd;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 20px 7px 20px;
    text-transform: uppercase;
}

a.badge:after {
    content: '\203A';
    display: inline-block;
    margin: 0 0 0 3px;
}

a.badge:hover {
    background: #1284a9;
}

#wstpserver header h1 {
    color: #000;
    font-size: 44px;
    font-weight: 400;
    margin: 50px 0 0;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

#wstpserver header h1 span {
    color: #656565;
    font-size: 33px;
}

#wstpserver header .subheading {
    color: #656565;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
}

/* Sections
-------------------------------------*/

section {
    border-bottom: 1px solid #b7b7b7;
    color: #656565;
    font-size: 15px;
}

#wstpserver header+section .inner {
    padding-top: 45px;
    padding-bottom: 45px;
}

section .intro {
    color: #1d96bd;
    font-size: 22.4px;
    font-weight: 300;
    line-height: 1.7;
    margin: 0 0 21px;
}

section h2 {
    color: #1d96bd;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    margin: 0 0 25px;
}

section h3 {
    color: #f77700;
    font-size: 18px;
    font-weight: 600;
}

section#features h3 {
    color: #f57300;
    font-size: 15px;
    font-weight: 600;
    line-height: 17px;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

section#features h3>p {
    color: #636363;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 30px 0;
}

section#examples h3 {
    margin-top: 50px;
}

section h3+.caption {
    margin: 0 0 15px;
}

section p {
    line-height: 1.7;
    margin: 0 0 30px;
    font-size: 14px;
}

section p:last-child {
    margin: 0;
}

section a {
    color: #dd1100;
}

section a:hover {
    color: #f77700;
}

section .green {
    color: #42821f;
    font-size: 14px;
}

section h3.green {
    margin: 40px 0 20px 0;
    text-transform: none;
}

section code .green {
    font-style: italic;
}

.half {
    display: inline-block;
    margin: 0 9% 0 0;
    vertical-align: top;
    width: 45.2%;
}

.half+.half {
    margin: 0;
}

.half p {
    font-size: 15px;
}

.grey {
    background: #f2f2f2;
    border: 0;
}

section ul {
    display: inline-block;
    list-style: none;
    margin: 0 8% 0 8px;
    margin: 0;
    padding: 0;
}

section ul+ul {
    margin: 0;
}

section li {
    color: #808080;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 10px;
}

section li:before {
    background-color: #f77700;
    content: '';
    display: inline-block;
    height: 5px;
    margin: 8px 6px 0 0;
    vertical-align: top;
    width: 5px;
}

#script-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

#script-buttons .button:first-child {
    margin-right: 15px;
}

a.button {
    color: #fff;
    background: #dd1100 url('/wstpserver/img/book.png') no-repeat 10px center;
    background-size: 24px;
    padding: 7px 13px 7px 40px;
    border-radius: 4px;
    border: 1px solid #b00f00;
}

a.button:hover {
    background-color: #fe0000;
    color: #fff;
}

a.button:active {
    background-color: #b00f00;
}

a.button.secondary {
    background: #dd1100;
    border: 1px solid #dd1100;
    color: #fff;
    padding: 7px 45px;
}

a.button.secondary:hover {
    background: #fe0000;
    border: 1px solid #b00f00;
    color: #fff;
}

a.button.secondary:active {
    background-color: #b00f00;
}

.margin-t-1 {
    margin-top: 16px;
}

/* Example */

#examples img {
  width: 100%;
  max-width: 531px;
  height: auto;
}

/* Code
-------------------------------------*/

p.caption {
    color: #808080;
    font-size: 14px;
    margin: 40px 0 15px 0;
}

.half p.caption {
    margin: 0 0 15px 0;
    white-space: nowrap;
}

section code,
section code * {
    color: #1d1d1d;
    font-family: 'Source Code Pro', 'Consolas', 'Menlo' !important;
    font-size: 13px;
    line-height: 1.2;
    white-space: pre-line;
}

section pre {
    background: #f2f2f2;
    border: 1px solid #d5d5d5;
    margin: 0;
    padding: 10px;
}

.with-file {
    border: 1px solid #d5d5d5;
    margin: 10px 0 13px;
    position: relative;
}

.with-file pre {
    background: #fff;
    border: 0;
    margin: 0;
    padding: 10px;
}

.file-name {
    background: #fff url('/wstpserver/img/file-folder-icon-small.png') no-repeat left center;
    color: #5893cf;
    display: inline-block;
    font-size: 13px;
    margin: 0 0 0 10px;
    padding: 0 0 0 15px;
    position: absolute;
    top: -9px;
}


/* Misc */

.columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px;
}

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

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

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

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

@media all and (max-width: 900px) {
    .inner {
        max-width: 700px;
    }
}

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

@media all and (max-width: 600px) {
    .inner {
        padding: 40px 30px;
    }
    .columns {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }

    #wstpserver header + section .inner {
        padding-top: 35px;
    }

    section .intro {
        font-size: 19.2px;
    }

    #script-buttons .button {
        margin-bottom: 15px;
    }
}