/* 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; }
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 */

@font-face{
	font-family: 'AvenirNext';
	src: url(AvenirNextLTPro-Regular.otf);
	font-family: 'PermanentMarker';
	src: url(PermanentMarker.ttf);
	
}


.text{
   font-family: 'AvenirNext', sans-serif;
   font-size: 1.2em;
   color: rgb(0,0,0);
}

.h4{
	font-family: 'PermanentMarker', cursive;
	font-size: 2.3em;
	color: rgb(0,0,0);
}

.h5{
	font-family: 'AvenirNext', sans-serif;
	font-size: 1.3em;
	color: rgb(0,0,0);
}

.h6{
	font-family: 'AvenirNext', sans-serif;
	font-size: .74em;
	color: rgb(0,0,0);
}

a:link {
text-decoration: none;
color: black;
}

.container{
    max-width:960px;
	border: solid 1px white;    
	text-align: justify;
	-moz-text-align-last: left; 
	text-align-last: left;  /* 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 ;
	}
}

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

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