/* global site styles

   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */


/* ==========================================================================
   site setup
   ========================================================================== */
body {
    color: #656565;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    font-size: 16px;
}
section, main header { 
    border-bottom: 1px solid #b3b3b3; 
    margin: 0 auto;
    max-width: 62.5rem;
    padding: 0 2rem; 
}
.inner {
    font-size: 1rem;
    margin: 0 auto;
    max-width: 50rem;
    padding: 3rem 0 3.25rem;
}

main p {
    font-size: 0.9375rem;
    line-height: 1.9;
    font-weight: 400;
    margin-top: 0.3125rem;
}
main p.intro { font-size: 1rem; }

/*headings*/
main h1 {
    color: #dd1100;
    font-size: 3.125rem;
    font-weight: 700;
    margin-top: 3rem;
    text-align: center;
}
main h2 {
    color: #f71900;
    font-size: 2.1875rem;
    font-weight: 300;
    margin: 0rem 0 0.25rem 0;
}
main h2.smaller { font-size: 1.5rem; }
main h3 {
    color: #f57300;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 2.1875rem;
    text-transform: uppercase;
}

main a { color: #dd1600; }
main a:hover { color: #f57300; }

main .orange { color: #f57300 !important; }



/* ==========================================================================
   header
   ========================================================================== */
#hero p.orange {
    /*font-weight: 300;*/
    font-size: 1.5rem;
    line-height: 1.75;
    margin: 1.5rem 0;

}
#hero .mini-t p { padding: 0 2rem 0.25rem 0; }
a.dev-resources { 
    border-left: 1px solid #d0d0d0;
    color: #484848; 
    font-weight: 700; 
    padding: 0.5rem 0 0.5rem 2rem;
    text-align: center;
}
a.dev-resources:hover { color: #f57300; }



/* ==========================================================================
   content columns
   ========================================================================== */
.less-margin-top { margin-top: 1.25rem; }
.details.cols-2 {
    margin-left: -1.5rem;
    width: calc(100% + 3rem);
}
.details.cols-2 .col {
    padding: 0 1.5rem;
    width: calc(50%);
}
.details img { margin-top: 2.5rem; max-width: 100%; }



/* ==========================================================================
   language table
   ========================================================================== */
.language-intro { width: 74%; }
.language-intro p { padding-right: 14%; }
.language-intro li { padding-top: 8px; }
.language-logo { width: 24%; text-align: right; }
.language-logo img { max-width: 100%; }

ul.links { margin-top: 0.625rem; }
ul.links a { display: block; }
ul.links li.ref-link a { 
    background: #eee;
    color: #1a1a1a; 
    font-size: 0.75rem;
    margin: 0 2px 2px 0;
    padding: 0.375rem 0.625rem;
}
ul.links li.ref-link:hover a { background: #f8802d;  color: #fff; }
ul.links li.width-full a { padding: 0.3125rem 0 0; }



/* ==========================================================================
   CTA footer
   ========================================================================== */
footer#cta {
    background: #dd1100;
    bottom: 0;
    color: white;
    position: fixed;
    text-align: center;
    width: 100%;
}
#cta .inner { padding: 0.625rem 0 0.875rem; }
#cta h2 { 
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
}
#cta h3 {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 0;
    text-transform: none;
}
#cta a { color: #fff; }
#cta a:hover { color: #fef37e; }

.cta-links { margin-top: 0.75rem; }
.cta-links, .cta-links div { 
    display: inline-block; 
    text-align: left;
    vertical-align: middle;
}
.cta-links .icon { padding: 0.25rem 0.75rem 0 0; }
.cta-links .text.sandbox { padding-right: 3.5rem; }
.cta-links .icon.sandbox { padding-left: 3.5rem; }
.cta-links .text.wolfram-one a { 
    font-size: 0.875rem; 
    font-weight: 300;
    padding-right: 1rem;
}



/* ==========================================================================
   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) {
    main h1 { margin-top: 0; }
    .cta-links .text.sandbox { padding: 0 3.5rem; }
}
	


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    /*setup*/
    section, main header, main footer { padding: 0 1.5rem; }

    /*header*/
    #hero .mini-t p, a.dev-resources { 
        border: none;
        display: block; 
        float: none; 
        padding-left: 0; padding-right: 0;
        text-align: left;
    }
    #hero .mini-t p { padding-bottom: 1rem; }
    a.dev-resources * { display: inline-block; vertical-align: middle; }
    a.dev-resources span { padding: 0 0 1rem 0.75rem; }
    a.dev-resources img { }

    /*content columns*/
    .details.cols-2, .details.cols-2 .col { margin: 0; padding: 0; width: 100%; }

    /*language table*/
    ul.links li.ref-link { width: calc(50% - 4px); }
    
    /*CTA footer*/
    .cta-links .text { text-align: center; width: 100%; }
    .cta-links .text.sandbox { padding: 0.5rem 0 0.5rem; }
    .cta-links .text.sandbox br, .cta-links .text.gear br { display: none; }
    .cta-links .text.wolfram-one * { display: inline; padding-right: 0.75rem; }
    .cta-links .text.wolfram-one a:last-child { padding-right: 0; }
}


/* exception (400px)
   ========================================================================== */
@media all and (max-width: 400px) {}
    


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {}


/* printer styles
   ========================================================================== */
@media print {}