section a[href=""] { background:greenyellow; }


/* page styles

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

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

.page-width {
    max-width: 57rem; /*912px*/
    min-width: 294px;
    padding: 2.5rem 1.666667rem 0;
}

/*headings*/
main h2 {
    color: #2b96b8;
    font-size: 2rem;
    font-weight: 300;
}
main h3 { color: #222; font-weight: 600; }


/*uniform grids*/
#authoring h2 + div .img, 
#deployment h2 + div .img, 
#resources h2 + div .img { 
    font-size: 0;
    text-align: right; 
    width: 54px; 
}

#authoring h2 + div .img img, 
#deployment h2 + div .img img, 
#resources h2 + div .img img{ 
    position: relative;
}

#authoring h2 + div .txt,
#deployment h2 + div .txt,
#resources h2 + div .txt { 
    padding-left: 0.875rem;
}


/*column padding*/
main .heirs-width-1-2  { margin-left: -1.5rem; }
main .heirs-width-1-2 > * { margin: 0 1.5rem; width: calc(50% - 3rem) !important; }


/*misc*/
p.bars { font-size: 0; }
p.bars * { font-size: 1rem; }
p.bars a { padding-right: 0.5rem; }
p.bars .sep { border-left: 1px solid #a5a5a5; }
p.bars a + .sep { padding-right: 0.5rem; } 
.mobile-alert {
  background: #fff;
  color: #d10;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 20px auto;
  max-width: 85%;
  padding: 20px 15px;
  position: relative;
  text-align: center;
  width: 360px;
}



/* ==========================================================================
   header
   ========================================================================== */
#intro { padding-bottom: 3.75rem; }
#intro h1 {
    color: #111;
    font-size: 3.75rem;
    font-weight: 600;
    line-height: 1;
    padding-top: 2.25rem;
}
#intro h1 small { 
    color: #7c7c7c; 
    font-size: 3.125rem;
    font-weight: 400;
    margin-bottom: -0.1875rem;
}
#intro h1 + p { 
    color: #727272;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 300;
    padding: 1rem 0 3.125rem;
}
#intro .grid { display: flex; }
#intro .grid .chevron-after:after { color: #d40707; font-style: normal !important; font-weight: 600; } 

#intro a:hover { color: #d40707 !important; }


/*download*/
#intro .download-engine { padding: 0 2.25rem 0 1rem; white-space: nowrap; }
#intro .download-engine a { 
    color: #000; 
    font-size: 1.1875rem; 
    font-weight: 600;
}
#intro .download-engine a small {
    color: #d40707;
    font-size: 1rem;
    line-height: 1;
    padding: 0.1875rem 0 0.125rem;
    text-transform: uppercase;
}
#intro .download-engine a small#macarm-download {
    color: #3a3a3a;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
}

/*abouts*/
#intro .abouts {
    border: solid #bdbdbd;
    border-width: 0 1px;
    font-size: 1.125rem;
    line-height: 2.375;
    padding: 0 2.25rem; 
    white-space: nowrap; 
}
#intro .abouts li { border-bottom: 1px solid #ccc; }
#intro .abouts li:last-child { border: none;  }
#intro .abouts a { color: #000; }
#intro .abouts a.font-style-i { color: #434343; }


/*gets*/
#intro .gets { padding-left: 1.5rem; }
#intro .gets a { 
    color: #1d1d1d; 
    font-size: 1.125rem; 
    line-height: 1.25; 
    padding-bottom: 2.375rem;
}
#intro .gets a small { 
    color: #3a3a3a; 
    font-size: 0.9375rem; 
    line-height: 1.4; 
}
#intro .gets a:hover small { color: #d40707; }

#intro .gets .img { text-align: right; width: 60px; }
.sandbox .img { padding: 1.375rem 0.25rem 0 0; }
.w-one .img { padding-top: 0.375rem; }
#intro .gets .txt { padding-left: 0.5rem; }

/* ==========================================================================
   why
   ========================================================================== */
#why {
    background: #ffe4a3;
    border-top: none;
    font-size: 1.25rem;
    padding-bottom: 1.375rem;
}
#why h2 { color: #000; padding: 0.875rem 0 1.625rem; }
#why h3 { font-size: 1.125rem; padding-bottom: 0.1875rem; }
#why p { 
    color: #414141;
    font-size: 1.0625rem;
    font-weight: 300; 
    line-height: 1.625rem;
    padding-bottom: 1.875rem; 
}
#why p img { margin-top: 0.25rem; width:100%;}

#why a { color: #2b96b8; font-weight: 600; }
#why a.more { font-size: 0.875rem; text-transform: uppercase; }
#why .chevron-after:after { color: #2b96b8; } 
#why a:hover, #why a:hover:after { color: #d40707; }



/* ==========================================================================
   authoring
   ========================================================================== */
#authoring { padding-bottom: 0.625rem; }
#authoring h2 { padding: 1rem 0 1.625rem; }
#authoring h3 { 
    color: #2b96b8; 
    font-size: 1.1875rem; 
    padding: 0.75rem 0 1.25rem; 
}
#authoring a h3 { 
    color: #222; 
    font-size: 1.25rem; 
    padding: 0 0 0.125rem;
}
#authoring a p { 
    color: #696969; 
    line-height: 1.5; 
    padding-bottom: 0.5rem; 
}
#authoring p a { padding-right: 0.5rem; }

#authoring .mini-t .img { padding-top: 2px; }

#authoring .mini-m { 
    color: #303030; 
    font-size: 1.0625rem;
    font-weight: 600;
}
#authoring .mini-m > div:first-child { padding: .25rem 0; width: 40px; }
#authoring .mini-m img { vertical-align: middle; }

#authoring a:hover,
#authoring a:hover h3,
#authoring a:hover p span { 
    color: #d40707; 
}


/*add-ons*/
h3#add-ons, div#add-ons-grid { padding-left: 2rem; }
#add-ons-grid div.add-on { padding-bottom: 1.125rem; }
#add-ons-grid div.add-on:nth-child(3n+1),
#add-ons-grid div.add-on:nth-child(3n+3) { width: 30%; }
#add-ons-grid div.add-on:nth-child(3n+2) { width: 40%; }



/* ==========================================================================
   deployment
   ========================================================================== */
#deployment { padding-bottom: 4.5rem; }
#deployment hr { 
    background: #ccc; 
    border: none; 
    height: 1px;
    margin-bottom: 1.625rem;
}
#deployment h2 { padding-bottom: 2rem; }
#deployment h3 { font-size: 1.125rem; }
#deployment h3 span { color: #4e4e4e; font-weight: 400; }
#deployment a { color: #1d1d1d; }

#deployment p.bars { padding-bottom: 1rem; }
#deployment p.bars * { color: #6c6c6c; font-weight: 600; }
#deployment p.bars a { color: #1d1d1d; }

#deployment p.bars strong { color: #6c6c6c; padding-right: 0.25rem; }
#deployment p.bars span,
#deployment p.bars em { color: #6c6c6c; font-weight: 400; padding-right: 0.5rem; }
#deployment p.bars em a { font-weight: 400; padding-right: 0; }

/*

#deployment p.bars a em, #deployment p.bars a em span { color: #6c6c6c; font-weight: 400; }
*/



#deployment p.bars .sep { border-color: #848484; }

#deployment a:hover,
#deployment a:hover h3,
#deployment a:hover span,
#deployment a:hover em { 
    color: #d40707 !important; 
}



/* ==========================================================================
   resources
   ========================================================================== */
#resources {
    background: #f6f6f6;
    border-top: 0.375rem solid #e9e9e9;
    padding-bottom: 2.75rem;
}
#resources h2 { padding-bottom: 2rem; }
#resources h3 { font-size: 1.125rem; padding-bottom: 0.1875rem; }

#resources a { color: #1d1d1d; font-weight: 600; }
#resources .chevron-after:after { color: #ec6401; } 
#resources a:hover, 
#resources a:hover:after,
#resources a.hover,
#resources a.hover:after {
    color: #d40707 !important; 
}

#resources .mini-t { padding-bottom: 1.125rem; }
#resources .mini-t .img { padding-top: 3px; }

#resources p.bars * { font-size: 0.8125rem; line-height: 1.4375rem; }
#resources p.bars a { color: #666; }

#resources p.bars.more { padding: 0.25rem 0 0 calc(54px + 0.875rem); }
#resources p.bars.more * { font-size: 0.9375rem; line-height: 1.3125rem; }
#resources p.bars.more a { color: #1d1d1d; }



/* ==========================================================================
   more about
   ========================================================================== */
#more { padding-bottom: 1.375rem; }
#more h2 { font-size: 1.5rem; padding: 2.125rem 0 0.875rem; }
#more div { margin: 0 4rem; }
#more a { 
    color: #1d1d1d; 
    font-size: 1.125rem; 
    font-weight: 600; 
    line-height: 1.25; 
}
#more a span { color: #666; display: block; }
#more a:hover, #more a:hover span { color: #d40707; }

#more div.txt { padding-right: 1rem; }
#more div.img { width: calc(100px + 1rem); }
#more img { box-shadow: 0 0 0.25rem rgba(0,0,0,0.22); }



/* ==========================================================================
   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) {
    /*setup*/
    .page-width { padding: 1rem 1rem 0; }

    /*header*/
    #intro .grid { display: block; }
    #intro .download-engine, #intro .abouts { white-space: normal; }
    #intro .download-engine { padding-left: 0; width: 14rem; }
    #intro .abouts { border-right: 0; padding-right: 0; width: calc(100% - 14rem); }
    #intro .gets { border-top: 1px solid #bdbdbd; margin-top: 2rem; padding-top: 2rem; width: 100%; }
    #intro .gets a { display: block; float: left; padding-bottom: 0; width: 50%; }

    /*authoring*/
    ul.add-ons { columns: 2; }

    /*more about*/
    #more div { margin: 0 2rem; }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    /*setup*/
    main .heirs-width-1-2  { margin-left: 0; }
    main .heirs-width-1-2 > * { margin: 0; width: 100% !important; }

    /*header*/
    #intro { padding-bottom: 0.875rem; }
    #intro .download-engine { padding-bottom: 2rem; padding-right: 0; width: 100%; }
    #intro .abouts { border-width: 1px 0 0 0; padding-left: 0; padding-top: 2rem; width: 100%; }
    #intro .gets a { display: table; float: none; padding-bottom: 2.375rem; width: 100%; }

    /*more about*/
    #more a { font-size: 1.5rem; }
    #more a span { display: inline; }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    /*authoring*/
    ul.add-ons { columns: 1; }

    /*more about*/
    #more div { margin: 0; }
    #more a { font-size: 1.125rem; }
    #more a span { display: block; }
    #more div.img { width: calc(75px + 1rem); }
    #more img { max-width: calc(100% - 1rem); }
}


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