/*---- Layout CSS file
       Contains site-wide page layout
---- */

#header, #upper-footer,#middle-footer, #lower-footer {
  width: 100%;
  min-width: 320px;
} 

.inner {
  width: 320px;
  margin: 0 auto;
  padding: 15px 0;
}

/* ---- Header ---- */

#header {
  background: url(../images/gradient-dark.png) top left repeat-x  #060606;
}

#header .inner {
  padding: 1px 0 5px 0;
}

/* Navigation */

#header .nav {
  float: right;
  margin-top: 34px;
}

#header .nav li {
  float: left;
  margin-left: 44px;
}

#header .nav li a {
  color: #fff;
  font-family: "Helvetica Neue Light",HelveticaNeue-Light,"HelveticaNeueLT Std Lt",Helvetica,"DejaVu Sans Light",sans-serif;
  font-size: 18px;
  text-decoration: none;
}

#header .nav li a:hover {
	color:#8fc63f;
}

/* ---- Content ---- */

#content {
  background: #fff;
  min-height: 520px;
  min-width: 320px;
  overflow: auto;
  width: 100%;
}

.basicpage #content {
  min-height: 0;
}

/* Lower content area (used on standard pages) */

.lower-content {
  background: url(../images/gradient-lighter.png) top left repeat-x #fff;
  min-width: 320px;
  width: 100%;
}


.lower-content .inner {
  background: url(../images/howitworks-triangle.png) top center no-repeat;
  position: relative;
  padding-top: 100px;
}

.lower-content h2 {
  color: #000;
  font-size: 30px;
  font-weight: bold; 
  letter-spacing: -.05em;
  line-height: .9em;
  margin-bottom: 8px;

}

.lower-content h3 {
  font-family: "Helvetica Neue Light",HelveticaNeue-Light,"HelveticaNeueLT Std Lt",Helvetica,"DejaVu Sans Light",sans-serif;
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 30px;
}

.lower-content h2:first-letter,
.lower-content h3:first-letter {

}

/* ---- All Footers ---- */

#upper-footer,
#lower-footer,
#upper-footer a,
#lower-footer a {
  color: #fff;
  text-decoration: none;
}

#upper-footer a {
  text-decoration: underline;
}

#upper-footer a:hover,
#lower-footer a:hover {
  text-decoration: underline;
}

/* ---- Upper Footer ---- */

#upper-footer {
  background: url(../images/gradient-light.png) top left repeat-x #2cabe0;
}

#upper-footer .inner {
  overflow: auto;
  padding-top: 30px;
}

#upper-footer .inner div {
  float: left;
  margin-right: 30px;
  width: 290px;
}

#upper-footer div h2 {
  color: #fff;
  font-family: "Helvetica Neue Light",HelveticaNeue-Light,"HelveticaNeueLT Std Lt",Helvetica,"DejaVu Sans Light",sans-serif;
  font-size: 24px;
  line-height: 1.1em;
  min-height: 60px;
  margin-bottom: 0px;  
}

#upper-footer #canada h2 {
  background: url(../images/canada-map.png) top left no-repeat;
  padding-right: 40px;
}

#upper-footer #canada h2,
#upper-footer #canada h2 p {
  padding-left: 89px;
}

#upper-footer #world h2 {
  background: url(../images/globe.png) top left no-repeat;
}

#upper-footer #world h2,
#upper-footer #world p {
  padding-left: 64px;
}

#upper-footer #keep h2 {
  background: url(../images/circle-arrows.png) top left no-repeat;
}

#upper-footer #keep h2,
#upper-footer #keep p {
  padding-left: 82px;
}

#upper-footer p {
  font-size: 12px;
  line-height: 1.2em;
}

#upper-footer #canada p {
  margin-left: 89px;
}

/* ---- Middle footer ---- */

#middle-footer {
  background: #8fc63f;
  color: #fff;
}

#middle-footer .inner {
  margin: 0 auto;
  overflow: hidden;
    width: 300px;
    padding: 5px;
}

#middle-footer ul {
}

#middle-footer li {
  float: left;
  font-family: "Helvetica Neue Light",HelveticaNeue-Light,"HelveticaNeueLT Std Lt",Helvetica,"DejaVu Sans Light",sans-serif;
  font-size: 20px;
  padding: 10px 30px 0;
}

#middle-footer li a {
  background: url(../images/platform-sprites.png) no-repeat;
  color: #fff;
  padding: 8px 0 0 34px;
  text-decoration: none;
}

#middle-footer li#apple a {
  background-position: 0px 0;
  padding-left: 32px;
}

#middle-footer li#android a {
  background-position: 0px -57px;
  padding-left: 30px;
}

#middle-footer li#blackberry a {
  background-position: 0px -110px;
  padding-left: 38px;
}

#middle-footer li#windows a {
  background-position: 0px -163px;
}

#middle-footer li#homephone a {
  background-position: 0px -214px;
  padding-left: 36px;
}


/* ---- Lower Footer ---- */

#lower-footer {
  background: url(../images/gradient-dark1.png) top left repeat-x  #060606;
  overflow: auto;
  padding-bottom: 150px;
}

#lower-footer ul.nav {
  float: left;
}

#lower-footer ul.nav li {
  display: block;
  float: left;
  font-size: 13px;
}

#lower-footer ul.nav li:after {
  content: '|';
  padding: 0 6px;
}

#lower-footer ul.nav li:last-child:after {
  content: '';
}

#lower-footer ul.navnew {
  width:100px;
  float:left;
}

#lower-footer ul.navnew li {
  font-size: 13px;
}

#lower-footer #social {
  float: right;
}

#lower-footer #social img {
  margin-left: 8px;
}

@media (prefers-color-scheme:dark){
    #content {
        background: #010001;
        color: #AAA;
    }  
        
}