/*! 

/* ==========================================================================
   Custom styles for individual pages
   ========================================================================== */



/** Intro **/

.home section.intro{
    padding: 1em; 
    margin: 0em;
}
.home section.intro img {
    margin-top: -1em;
}
.home section.intro h1 {
    font-size: 4.4em;
    margin: 1em 0 0.5em 0;
    color: #fff;
}
.home section.intro p {
    font-size: 1.9em;
    margin: 0.5em 0 1em 0;
}
    @media (max-width: 75rem){
      .home section.intro { 
        font-size: 0.8em;
        padding-top:5em;  
        }
    }
    @media (max-width: 60rem){
      .home section.intro {
        padding-top: 5em;
        margin-bottom: 2em; 
        }
    }
    @media (max-width: 56rem){
      .home section.intro {
        padding-top: 12em;
        margin-bottom: 2em; 
        }
    }
    @media (max-width: 53rem){
      .home section.intro {
        padding-top:0;
        padding-bottom: 2em;  
        }
      .home section.intro p {
        transition: 0.3s;
        /*margin-left: -55%;*/ 
        }
    }
    @media (max-width: 52rem){
      .home section.intro {
        padding-top:8em; 
      }
      .home section.intro blockquote {padding: 2em; margin:0;}
    }
    @media (max-width: 41rem){
      .home section.intro {        
        padding-top: 12em; 
        }
      .home section.intro img{
        width: 100%;
        margin: 0 
      }
      .home section.intro div {
        position: relative;
        top: 0; left: 0;
        transform: none;
        margin: 0; padding: 0;
        width: 100%;
      }
      .home section.intro h1 {
        font-size: 3em;
        }
      .home section.intro p {
        margin-left: 0% 
        }
    }
    @media (max-width: 32rem){
      .home section.intro {
        padding-top: 18em;
      }
    }

.chai section.intro {
  width: 60%;
  margin-left: 25rem;
}
.chai section.intro div {
  position: relative;
  float: left;
  top: 0; left: 0%;
  width: 60%;
  transform: none;
  transition: 0.4s;}
.chai section.intro img {
  width: 40%;
  margin: 0;
  float: left;
}
    @media (max-width: 60rem){
      .chai section.intro { 
        width: 50%;
        margin: 0 0 0 25rem;
        padding: 1rem 5rem;
      }
      .chai section.intro img { width: 60%; }
      .chai section.intro div { width: 100%}
    }
    @media (max-width: 50rem){
      .chai section.intro { 
        width: auto;
        margin: 0;
        padding: 1rem 5rem;
        clear: left;
      }
      .chai section.intro img { float: right;}
    }
    @media (max-width: 43rem){
      .chai section.intro img { 
        float: left;
        margin-top: 34rem;
      }
    }



.about section.intro {
  width: auto;
}
.about section.intro div {
  position: relative;
  float: left;
  top: 0; left: 0%;
  width: 60%;
  transform: none;
  transition: 0.4s;}
.about section.intro img {
  width: 40%;
  margin: 0;
  float: left;
}
    @media (max-width: 60rem){
      .about section.intro { 
      }
      .about section.intro h1 { font-size: 2.8em; }
      .about section.intro img { width: 40%; }
      .about section.intro div { width: 60%; }
    }
    @media (max-width: 50rem){
      .about section.intro { 
        width: auto;
        margin: 0;
        padding: 1rem 5rem;
        clear: left; 
      }
    }
    @media (max-width: 43rem){
      .about section.intro img { 
        float: none;
        clear: left; 
        width: 60%;
      }
      .about section.intro div { 
        float: left;
        clear: left; 
        width: auto; 
      }
    }




/* Terms & Conditions */
.terms section.intro {
  width: 73%;
  margin:0;
  margin-left: 25rem;
  padding: 1em;
}
.terms section.intro div.introtext {
  position: relative;
  float: none; 
  top: 0; left: 0%;
  width: 100%;
  transform: none;
  transition: 0.4s; }
.terms section.intro div.introtext div {
  position: relative; top: 0; left: 0;
  margin: 0; padding: 0;
  width: all;
  transform: none; 
}
.terms section.intro div.introtext div.row {
  width: 100%
}
.terms section.intro div.introtext h1 {font-size: 4em;}


/** 
*User Guide 
**/

/* Remove the header */
.userguide #headerimg, .userguide #main-nav {display: none;}
.userguide #content { margin-top: 5rem;} /* Shrink Up Gap under header */
    @media (max-width: 50rem){
      .userguide #content  {margin-top: 3rem;}
    }




/* Custom intro stuff */
.userguide section.intro {
  width: 73%;
  margin:0;
  margin-left: 25rem;
  padding: 1em;
}
.userguide section.intro div.introtext {
  position: relative;
  float: left;
  top: 0; left: 0%;
  width: 100%;
  transform: none;
  transition: 0.4s; }
.userguide section.intro img {
  width: 100%;
  margin: 0;
  float: left;
}
.userguide section.intro div.introtext div {
  position: relative; top: 0; left: 0;
  margin: 0; padding: 0;
  width: all;
  transform: none; 
}
.userguide section.intro div.introtext div.row {
  width: 100%
}
.userguide section.intro div.introtext div.col-1-2 {
  width: 48%; margin-right: 1em;
}
.userguide section.intro a {color: #FFDF91}
.userguide section.intro a:hover {color: #444}

.userguide section.intro details.faq div.faq-content {
  width: auto;
  display: block;
  color: #424242;
  padding: 0.8em;  
}


div.spritemap.mylist {background-image: url(../images/community-my-list.png) 0 0}

div.spritemap.mylist a {
  background: none;
  display: block;
  position: absolute;
  xborder: 1px solid red
}
div.spritemap.mylist a:hover {
  background: url(../images/community-my-list.png) 0px 0px no-repeat;
}
div.spritemap.mylist a.spriteheader {
  width: 25rem; height: 2.9rem;
  top: 0;
}
div.spritemap.mylist a.spriteheader:hover {
  background-position: 0px -28.1rem ;
}
div.spritemap.mylist a.spritebanner {
  width: 25rem; height: 5.1rem;
  top: 7rem;
}
div.spritemap.mylist a.spritebanner:hover {
  background-position:  0px -35.1rem ;
}
div.spritemap.mylist a.spriteglyph {
  width: 15rem; height: 5rem;
  top: 15rem;
}
div.spritemap.mylist a.spriteglyph:hover {
  background-position:  0px -43.1rem ;
}
div.spritemap.mylist a.spritelist {
  width:10.1rem; height: 21.4rem;
  top: 2.9rem; right: 0;
}
div.spritemap.mylist a.spritelist:hover {
  background-position:  -24.9rem -31rem ;
}
div.spritemap.mylist a.spriteshortcuts {
  width: 8.7rem; height: 7.5rem;
  top: 20rem; left: 17rem;
}
div.spritemap.mylist a.spriteshortcuts:hover {
  background-position:  -17rem -48.1rem ;
}
    @media (min-width: 50rem) {
      .userguide section.intro div.introtext div.col-1-2 {width: 48%;}
    }

    @media (max-width: 60rem){
      .userguide section.intro { 
        width: 55%;
        margin: 0 0 0 25rem;
        padding: 1rem 1rem;
      }
      .userguide section.intro img { width: 100%; }
    }

    @media (max-width: 50rem) {
      .userguide section.intro div.introtext div.col-1-2 {width: 100%; margin: 0;}
      .userguide section.intro { 
        width: auto;
        margin: 0;
        margin-top: 39rem;
        padding: 1rem 1rem;
        clear: left;
      }
    }

    @media (max-width: 43rem){
      .userguide section.intro { margin-top: 40rem;}
    }

    @media (max-width: 30rem){
      .userguide section.intro { margin-top: 60rem;}
    }

/** Sprite Maps  **/

/* My List on User Guide */

.intro div.spritemap.mylist {
  background: url(../images/community-my-list.png) 0 0;
  margin: 0; padding: 0;
  width: 35rem; height: 27.7rem;
}

div.spritemap.mylist a {
  background: none;
  display: block;
  position: absolute;
  xborder: 1px solid red
}
div.spritemap.mylist a:hover {
  background: url(../images/community-my-list.png) 0px 0px no-repeat;
}
div.spritemap.mylist a.spriteheader {
  width: 25rem; height: 2.9rem;
  top: 0;
}
div.spritemap.mylist a.spriteheader:hover {
  background-position: 0px -28.1rem ;
}
div.spritemap.mylist a.spritebanner {
  width: 25rem; height: 5.1rem;
  top: 7rem;
}
div.spritemap.mylist a.spritebanner:hover {
  background-position:  0px -35.1rem ;
}
div.spritemap.mylist a.spriteglyph {
  width: 15rem; height: 5rem;
  top: 15rem;
}
div.spritemap.mylist a.spriteglyph:hover {
  background-position:  0px -43.1rem ;
}
div.spritemap.mylist a.spritelist {
  width:10.1rem; height: 21.4rem;
  top: 2.9rem; right: 0;
}
div.spritemap.mylist a.spritelist:hover {
  background-position:  -24.9rem -31rem ;
}
div.spritemap.mylist a.spriteshortcuts {
  width: 8.7rem; height: 7.5rem;
  top: 20rem; left: 17rem;
}
div.spritemap.mylist a.spriteshortcuts:hover {
  background-position:  -17rem -48.1rem ;
}

/* Summary Page on User Guide */

.intro div.spritemap.summary {
  background: url(../images/community-summary.png) 0 0;
  width: 35rem; height: 24.1rem;
}

div.spritemap.summary a {
  background: none;
  display: block;
  position: absolute;
  xborder: 1px solid red
}
div.spritemap.summary a:hover {
  background: url(../images/community-summary.png) 0px 0px no-repeat;
}
div.spritemap.summary a.spritesummary {
  width: 25rem; height: 2.3rem;
  top: 0; right: 0rem;
}
div.spritemap.summary a.spritesummary:hover {
  background-position: -10rem -24.5rem ;
}
div.spritemap.summary a.spritebanner {
  width: 26rem; height: 4.1rem;
  top: 2rem;
}
div.spritemap.summary a.spritebanner:hover {
  background-position: 0px -26.6rem ;
}
div.spritemap.summary a.spritemenu {
  width: 14.3rem; height: 17.8rem;
  top: 6.1rem;
}
div.spritemap.summary a.spritemenu:hover {
  background-position: 0px -30.7rem ;
}
div.spritemap.summary a.spriteinfo {
  width: 20.5rem; height: 5.1rem;
  top: 6.3rem; right: 0
}
div.spritemap.summary a.spriteinfo:hover {
  background-position: -14.5em -30.9rem ;
}
div.spritemap.summary a.spritenotes {
  width: 20.5rem; height: 12.5rem;
  top: 11.5rem; right: 0;
}
div.spritemap.summary a.spritenotes:hover {
  background-position: -14.5em -36.1rem ;
}


 /** Frailty Icons **/
 ul.iconlist.frailty li:before {
  background-image: url(../images/Frailty-01-NG.svg);
  height: 3em; background-size: 3.5em
 }
 ul.iconlist.frailty li.frailty1:before {
  background-image: url(../images/Frailty-01-NG.svg);
  height: 3em; 
 }
 ul.iconlist.frailty li.frailty2:before {
  background-image: url(../images/Frailty-02-NG.svg);
  height: 3em; 
 }
 ul.iconlist.frailty li.frailty3:before {
  background-image: url(../images/Frailty-03-NG.svg);
  height: 3em; 
 }
 ul.iconlist.frailty li.frailty4:before {
  background-image: url(../images/Frailty-04-NG.svg);
  height: 3em; 
 }
 ul.iconlist.frailty li.frailty5:before {
  background-image: url(../images/Frailty-05-NG.svg);
  height: 3em; 
 }
 ul.iconlist.frailty li.frailty6:before {
  background-image: url(../images/Frailty-06-NG.svg);
  height: 3em; 
 }
 ul.iconlist.frailty li.frailty7:before {
  background-image: url(../images/Frailty-07-NG.svg);
  height: 3em; 
 }
 ul.iconlist.frailty li.frailty8:before {
  background-image: url(../images/Frailty-08-NG.svg);
  height: 3em; 
 }
 ul.iconlist.frailty li.frailty9:before {
  background-image: url(../images/Frailty-09-NG.svg);
  height: 3em; 
 }