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



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

.orange { color: #f57721 !important; }

/*lists*/
#contact-info ul > li {
    line-height: 1.5;
    margin-left: 0.75rem;
    /*margin-bottom: 0.25rem;*/
}
#contact-info ul > li:before {
    color: #dd1100;
    content: "■";
    display: inline-block;
    font-family: Arial;
    font-size: 0.6875rem;
    margin-left: -0.75rem;
    margin-right: 0;
    position: relative;
    top: -0.125rem;
    width: 0.75rem; 
}



/* ==========================================================================
   sections
   ========================================================================== */
section, 
header#home {
    padding: 2rem 0.78125rem; /*12.5px*/
    width: 100%;
}
div[id$="-content"] {
    margin: 0 auto;
    max-width: 64.625rem; /*(1029px)*/
    padding: 0 0.78125rem; /*12.5px*/
    width: 100%;
}
div[id$="-content"] h1 {
    font-size: 2.8125rem;
    padding: 2rem 0 0.5rem;
    text-transform: uppercase;
}
div[id$="-content"] h2 {
    font-size: 1.6875rem;
    font-weight: 300;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 1.25rem;
    text-transform: none;
}
div[id$="-content"] h3 {
    color: #333;
    font-size: 1.3125rem;
    line-height: 1;
    margin-top: 0.25rem;
    margin-bottom: 0.625rem;
}
div[id$="-content"] h4 {
    font-style: italic;
    margin-top: 0.4375rem; 
    margin-bottom: 0.375rem;
}
div[id$="-content"] p,
div[id$="-content"] li {
    font-size: 0.9375rem;
    line-height: 1.5333333333rem;
}
div[id$="-content"] p { margin: 0 0 1rem; }
div[id$="-content"] img,
div[id$="-content"] iframe {
    max-width: 100%;
}



/* ==========================================================================
   head
   ========================================================================== */
#home-content { position: relative; }
#login {
    background: #d00;
    line-height: 1;
    margin-right: 0.78125rem; /*12.5px*/
    margin-top: 0;
    padding: 0.5rem 0.75rem;
    position: absolute;
    right: 0;
    top: -2rem;
}
#login:hover { background: #fe0000; }
#login span { padding: 0; }
#login span:first-child { 
    padding-right: 0.25rem; 
    position: relative;
    top: 1px;
}



/* ==========================================================================
   topics
   ========================================================================== */
#topics { 
    padding-bottom: 0; 
    padding-top: 0; 
}
#topics-content { 
    display: flex;
    font-size: 0.9375rem; 
    padding: 0 !important; 
}
#topics .subtitle {
    color: #636363;
    font-size: 0.75rem;
    line-height: 1;
    margin: 0.125rem 0 -0.875rem;
}
#topics a:hover .subtitle { color: inherit; }
#topics .grid { }
#topics .grid .inner {
    border: 1px solid #b3b3b3;
    border-radius: 5px;
    display: block;
    margin: 0.625rem 0.78125rem; /*10px 12.5px*/
    padding: 1.875rem 0.5rem; 
    text-transform: uppercase;
}



/* ==========================================================================
   find answers
   ========================================================================== */
#find-answers {
    padding-bottom: 0;
    padding-top: 3.5rem;
}
#find-answers-content { padding: 0 !important; }
#find-answers h2 { padding-left: 0.78125rem; /*12.5px*/ }
#find-answers .mini-m { 
    color: #535353;
    font-weight: 400;
    padding-bottom: 1.125rem;
    padding-left: 0.78125rem; /*12.5px*/ 
}
#find-answers .mini-m .img { font-size: 0; padding-right: 0.625rem; }
#find-answers .mini-m .txt { font-size: 1.125rem; }



/* ==========================================================================
   contact
   ========================================================================== */
#contact-info {
    padding-bottom: 3.625rem;
    padding-top: 1.875rem;
}
#contact-info .advanced { margin-top: 1.5rem; }
#contact-info h2 { 
    border-top: 1px solid #b3b3b3;
    padding-top: 2.875rem; 
}
#contact-info h3 small { font-size: 0.8125rem; }
#contact-info-content p { margin: 0 0 0.125rem; }
#contact-info .grid div:nth-child(odd) > * { padding-right: 3rem; }
#contact-info strong { font-weight: 700; }



/* ==========================================================================
   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) {
    section, 
    div[id$="-content"] {
        padding-left: 0.53571428571rem; /*7.5px*/
        padding-right: 0.53571428571rem; /*7.5px*/
    }
    #login { margin-right: 0.53571428571rem; /*7.5px*/ }

    /*head*/
    header#home { padding-bottom: 1rem; }

    /*topics*/
    #topics .grid .inner { margin: 0.53571428571rem; /*7.5px*/ }

    /*find answers*/
    #ans-kb img { margin: 0 2px; }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    section, 
    div[id$="-content"] {
        padding-left: 0.57692307692rem; /*7.5px*/
        padding-right: 0.57692307692rem; /*7.5px*/
    }
    #login { margin-right: 0.57692307692rem; /*7.5px*/ }
    div[id$="-content"] p,
    div[id$="-content"] li {
        font-size: 1rem;
    }

    /*topics*/
    #topics .grid .inner { margin: 0.57692307692rem; /*7.5px*/ }

    /*find answers*/
    #find-answers { padding-top: 2.5rem; }
    #ans-language img { margin: 0 6px; }
    #ans-kb img { margin: 0 8px; }

    /*contact*/
    #contact-info .advanced + .advanced { margin-top: 0; }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    div[id$="-content"] h1 { font-size: 2.5rem; }

    /*topics*/
    .cols-1__320 > * { clear: both; }
    .heirs-width-full__320 > * { width: 100% !important; }

    /*find answers*/
    #find-answers { padding-top: 2rem; }
}


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