/* BEGIN FIXES: These fixes based on a 7px baseline grid */ 
/* Note that when it is at full size, the fonts */
/* fall nicely onto the 7px lines (all multiples of 7px).  */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 42px; line-height: 49px;  margin-bottom:14px; margin-top: 7px; }
h2 { font-size: 35px; line-height: 42px;  margin-bottom:7px;  margin-top: 7px; }
h3 { font-size: 28px; line-height: 35px;  margin-bottom:7px;  margin-top: 7px; }
h4 { font-size: 21px; line-height: 28px;  margin-bottom:7px;  margin-top: 7px; }
h5 { font-size: 21px; line-height: 21px;  margin-bottom:7px;  margin-top: 7px; }
h6 { font-size: 14px; line-height: 14px;  margin-bottom:7px;  margin-top: 7px; }

p{ margin: 0 0 21px 0; 
  column-count: 2;
}
p.lead { line-height: 28px; }

blockquote, blockquote p { line-height: 21px; }
blockquote { margin: 0 0 21px; padding: 7px 20px 0 19px; }

hr{ margin: 14px 0 28px; }
img{ margin: 14px 0 7px 0; }

ul, ol { margin-bottom: 21px; }
ul ul, ul ol,
ol ol, ol ul { margin: 7px 0 7px 30px; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 7px; }
li{ line-height: 21px; margin-bottom: 14px; }

html, body{
  height:100%;
}

body{ 
  font-size: 14px; 
  line-height: 21px;
}

/* END 7px baseline grid fixes FIXES */


.container{
  max-width: 400px; /* or 960px? */


  text-align: left;

  /* dont use text align */
  -moz-text-align-last: ; 
  text-align-last: ;  /* this isn't working in Chrome. */

}

.biocontainer{
  max-width: 900px; /* or 960px? */


  text-align: left;

  /* dont use text align */
  -moz-text-align-last: ; 
  text-align-last: ;  /* this isn't working in Chrome. */

}


.containertitle{
  max-width: 400px; /* or 960px? */



  text-align: left;

  /* dont use text align */
  -moz-text-align-last: ; 
  text-align-last: ;  /* this isn't working in Chrome. */

}

.pagecontainer{
  max-width: 400px; /* or 960px? */

  padding-top: 5px;
  text-align: left;

  /* dont use text align */
  -moz-text-align-last: ; 
  text-align-last: ;  /* this isn't working in Chrome. */

}

.proconpagecontainer{
  max-width: 800px; /* or 960px? */

  padding-top: 5px;
  text-align: left;

  /* dont use text align */
  -moz-text-align-last: ; 
  text-align-last: ;  /* this isn't working in Chrome. */

}


/* when Skeleton pops into grid-mode, show the background grid */

@media screen and ( min-width: 550px ){
  .container{
    text-align:left;
    background-image:url(../images/960-grid-vertical.png);
    background-size: 100% 960px ;

  }

  .pagecontainer{
    text-align:left;
    background-image:url(../images/960-grid-vertical.png);
    background-size: 100% 960px ;

  }

}

/* Now it's wide enough to use text align 'justify' */

@media screen and ( min-width: 1000px ){
  h1 , h4 , {
    text-align: center;
    text-align-last: center; /* this isn't working in Chrome. */
  }

  p{
    text-align: left;
    text-align-last: left; /* this isn't working in Chrome. */
  }


  .buttons a{
    text-align: center;
  }
}