/* Styles for the Server Options landing page.

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


/* ==========================================================================
   setup the environment
   ========================================================================== */
main { 
    color: #656565;
    font-family: 'Source Sans Pro', Arial, sans-serif; 
}

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

main img { height: auto; max-width: 100%; }

/*section*/
section { 
    border-top: 1px solid #b7b7b7; 
    padding: 0 1.5rem; 
    width: 100%; 
}

header + section, footer section { border: none; }

div[id$="-content"] {
    margin: 0 auto;
    max-width: 60rem; /*960*/
    padding: 4.75rem 0 4.375rem;
    width: 100%;
}



/* ==========================================================================
   shared
   ========================================================================== */
/*headings*/
div[id$="-content"] h2 {
    color: #f71900;
    font-weight: 300;
    font-size: 2.1875rem;
    padding-bottom: 0.75rem;
}

div[id$="-content"] h2 span { 
    color: #999; 
    font-size: 1.475rem; 
}

div[id$="-content"] h3 {
    color: #f57300;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.4375rem;
    text-transform: uppercase;
}


/*structure*/
main .mini-t .img {
    font-size: 0;
    padding-top: 0.5rem;
    text-align: right;
    width: 8.6875rem; /*width of biggest icon in rem: 139px*/
}
/*.mini-t.icon img { height: auto; width: 6.625rem; }*/
main .mini-t .txt { padding-left: 2rem; }


/*text*/
main p {
    line-height: 1.5;
    padding: 0.3125rem 0 1.875rem;
}

main p.subtitle {
    font-size: 1.3125rem;
    font-weight: 300;
    line-height: 2rem;
    padding-bottom: 0.875rem;
}

main p.subtitle + p + p { margin-top: -1rem; }

main .details {
    column-count: 2;
    column-gap: 2rem;
    padding-bottom: 1rem;
}

main .details div { break-inside: avoid; }

main .details p {
    font-size: 0.9375rem;
    line-height: 1.4;
    padding: 0.125rem 0 1.5rem;
}

main .product-links {
    display: flex;
    font-size: 1.25rem;
    font-weight: 600;
}

main .product-links a { display: inline-block; }
main .product-links a + a { 
    border-left: 1px solid #a4a4a4;
    margin-left: 0.5rem;
    padding-left: 0.5rem;
}



/* ==========================================================================
   header
   ========================================================================== */
#hero {  background: linear-gradient(to bottom, #FFFFFF 0%, #ececec 100%); }

#hero-title-content { padding: 3.5rem 0 2.25rem; }

#hero h1 {
    color: #000;
    font-size: 2.75rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

#hero h1 span { 
    color: #dd1600;
    display: block; 
}

#hero p.tagline { 
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.9;
    padding: 0.5rem 0 0;
}



/* ==========================================================================
   footer
   ========================================================================== */
#cta { 
    background: #ef6000; 
    color: #fff; 
    padding: 0 3rem;
}

#cta-content { padding: 2.5rem 0 2.25rem; }

#cta a { color: #fff; }

#cta a.button {
    background: #fff;
    color: #ef6000;
    display: inline-block;
    font-weight: 600;
    padding: 0.3125rem 1.25rem;
}

#cta a:hover { color: #732d00; }


/*parts*/
#cta .mini-t, #cta .mini-m {}
#cta .contact { font-size: 0.875rem; padding: 0.375rem 1rem 0 0; }
#cta .purpose { font-size: 0.8125rem; line-height: 1.5rem; width: 12.5rem; }
#cta .questions { font-size: 0.75rem; line-height: 1.375rem; padding-left: 1rem; }
#cta .questions span { letter-spacing: 1px; }



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

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
    /*footer:parts*/
    #cta .contact { font-size: 14px; }
    #cta .purpose { font-size: 13px; line-height: 24px; }
    #cta .questions { font-size: 12px; line-height: 22px; }
}


/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    /*footer:parts*/
    #cta-content { text-align: center; }
    #cta .mini-t, #cta .mini-m { display: inline-block; }
    #cta .mini-t > *, #cta .mini-m > * { text-align: left; }
    #cta .contact { display: inline-block; padding: 0 0 12px; }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    /*setup:section*/
    section, #cta { padding: 0 15px; }
    div[id$="-content"] { padding: 40px 0; }
    div[id$="-content"] h2 { text-align: center; }

    /*shared:text*/
    main p { font-size: 1.1rem; }
    main .details { column-count: 1; padding-bottom: 0; }
    main .details p { font-size: 0.9875rem; padding: 0.125rem 0 1.35rem; }
    main .product-links, main .product-links a { display: block; }
    main .product-links a + a { border: none; margin: 0; padding: 0; }


    /*shared:structure*/
    main .mini-t.icon .img { display: block; padding: 0 0 1rem; text-align: center; width: auto; }
	main .mini-t.icon img { height: auto; max-width: 6.625rem; }
    main .mini-t.icon .txt { padding-left: 0; }

    /*header*/
    #hero-title-content { padding-top: 28px; text-align: center; }
    #hero h1 { font-size: 26px; }
    #hero p.tagline { font-size: 15px; line-height: 1.5; padding-top: 10px; }
    #hero .mini-t { display: inline-block; }
    #hero .mini-t > * { text-align: left; vertical-align: middle; }
    #hero .mini-t .img, #hero .mini-t img { width: 70px; }
    #hero .mini-t .txt { padding-left: 15px; }

    /*footer*/
    #cta-content { padding: 20px 0; }
    #cta .mini-t > *, #cta .mini-m > * { display: block; text-align: center; width: auto; }
    #cta .purpose br { display: none; }
    #cta .questions { padding: 0; }

    /*section exception*/
    #wstp-server-evaluator-content { padding-bottom: 18px; }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    /*header*/
    #hero h1 { font-size: 22px; }
    #hero .mini-t .img, #hero .mini-t img { width: 60px; }
}


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