@charset "utf-8";
/* CSS Document */

/*
This CSS file belongs to - page-name and it's by Eric Miner and The Miner Bits - eric@minerbits.com
*/

/* =============================================================================
Begin THE TOP OF THE TREE
   ========================================================================== */
html {font-size: 16px;}

* {box-sizing: border-box;}
 
 body {
	 margin: 0 auto;
	 position: relative;
	 background: #C4C4D4;
	 background: #DBDBED;
	 color: #181922;}
 #container {
	 width: 100%;
	 margin: 0 auto;
	 position: relative;}

.group:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;}

h1, h2, h3 {margin: 0}

.my-cite {font-style: italic;}
q::before {content: no-open-quote;}
q::after {
	content: no-close-quote;
    }
.center-image {
	display: block;
    margin: 0 auto;
    position: relative;}
/* =============================================================================
Begin PAGE HEADER
   ========================================================================== */
.page-header {
	width: 100%;
	height: 10rem;
	font: 16px/1.5 "tablet-gothic-wide", Arial, Gadget, sans-serif;
	font-size: 1rem;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255, 1);}
.page-header h1 {
	font-size: 80px;
	font-size: 5rem;
	font-weight: 600;}
.page-header h2 {
	font-size: 40px;
	font-size: 2.5rem;
	font-weight: 600;
	margin-top: -1rem;}
/* =============================================================================
Begin MAIN NAV
   ========================================================================== */
.main-nav {
	width: 60%;
	position: relative;
	left: 7.5rem;
	font: 400 20px/1.5 "tablet-gothic-wide", Arial, Helvetica, sans-serif;
	font-size: 1.25rem;}
.main-nav a {font-weight: 400;}
/* =============================================================================
Begin MAIN CONTENT
   ========================================================================== */
.main-content {
	width: 100%;
	font: 400 18px/1.5 "ff-basic-gothic-web-pro", "lemonde-sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1.125rem;}
.main-content section {
	 width: 35%; 
	 position: relative; 
	 margin: 6rem auto;
	 padding: 0 10px;}

.main-content h2, h3 {
	font: 600 32px/1.5  "jubilat", Georgia, "Times New Roman", Times, serif;
	font-size: 2rem;}
.main-content h3 {font-size: 1.25rem;}
	
.main-content h1, h2, h3, h4 {margin-top: 1.5rem;}

.main-content li {margin-top: 1.5rem;}
div [class*="example"] {
	font: 400 16px/1.5  "jubilat", Georgia, "Times New Roman", Times, serif;
	margin-top: 4rem;}
	
/*.undo-example-pseudo {
	font: 400 16px/1.5 "ff-basic-gothic-web-pro", "lemonde-sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1rem;}
div>p [class*="example"] {
	font: 400 16px/1.5 "ff-basic-gothic-web-pro", "lemonde-sans" "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1rem;} */
.intro {}
.intro ul {
	margin: 2rem 0 2rem 2rem;
	padding: 0;}			
.intro li {margin: .5rem 0;}
.intro>p>span {
	text-shadow: 0 1px 0 rgba(255,255,255, 1);
	padding-top: 1rem;}
.intro p {
/*font-size: 1rem;
line-height: 1.5rem;*/
margin: 1.6rem 0;
text-align: left;
}
.intro p:first-line {
font-weight: 700;
font-variant: small-caps;
}
.intro p:first-letter {
	font-size: 4rem;
	line-height: 3rem;
	font-weight: 400;
	float: left;}
.intro p +.intro p:first-letter {
	font-size: 1rem;
	line-height: 2.5rem;
	float: none;
	margin: 0;}
.intro p + p:first-letter {
	font-size: 1rem;
	line-height: 1.25rem;
	float: none;
	margin: 0;
	text-indent: hanging;}
.intro p + p:first-line {
	font-weight: 400;
	font-variant: normal;}
.toc p {margin: 0 auto;}
.unknown-typo {margin-left: 37.5rem;}
/* =============================================================================
BeginIndividual Topic Sections
========================================================================== */
.topics>section:nth-child(even) {right: -6rem;}
.topics>section:nth-child(odd)  {left: -6rem;}
.hierarchy {}
.hierarchy-intro {}
.hierarchy h1 {font-size: 2.5rem;}
.headings-example hr {
		margin: 3rem 0;
	    }
.contrast {}
.const-example {
		width: 100%; 
		background: rgba(255,255,255,.24); 
		position: relative; 
		padding: 0 10px; 
		border: 6px double #C0C0C0;}
.leading {}
		
.leading-intro {
		width: 100%
		position: relative;}
		
		
.leading-example {
		padding: 0 10px; 
		background: rgba(255,255,255,.24)/*#FFF*/; 
		border: 8px double #DCDCDC; 
		border-radius: 8px;
		}
			
.measure {
		
		}
		
.measure-intro {
		position: relative;}
		
		
.measure-example {
		width: 120%; 
		padding: 0 10px; 
		background: rgba(255,255,255,.24); 
		border: 8px double #DCDCDC;
		border-radius: 8px;}
		
		
.measure-80pnct {
		width: 90%; 
		/*border: 1px dotted #666; */
		border-radius: 8px; 
		padding: 0 1em; 
		margin-bottom: 24px;}
.measure-60pnct {
		width: 60%; 
		/*border: 1px dotted #666; */
		border-radius: 8px; 
		padding: 0 1em; 
		margin-bottom: 24px;}
.measure-40pnct {
		width: 40%; 
		/*border: 1px dotted #666; */
		border-radius: 8px; 
		padding: 0 1em; 
		margin-bottom: 24px;}
.measure-30pnct {
		width: 30%; 
		/*border: 1px dotted #666;*/ 
		border-radius: 8px; 
		padding: 0 1em; 
		margin-bottom: 24px;}
	
		
.justification {
		}
		
.justification-intro {
		width: 100%; 
		position: relative;}
	
.justification-example {
	padding: 24px 24px; 
	background: rgba(255,255,255,.24)/*#FFF*/; 
	border: 8px double #DCDCDC; 
	border-radius: 8px; 
	text-align: justify;}
	/*.not-good-p {word-spacing: .05em;}*/
.cheat {
	font-size: .75em; 
	line-height: 1.2em;}
		
.justification-example {}
		
		
.punctuation {
	
	}
.punctuation-intro {
	width: 100%; 
	position: relative;}
.punctuation-example {
	width: 100%; 
	padding: 24px 24px; 
	background: rgba(255,255,255,.24)/*#FFF*/; 
	border: 8px double #DCDCDC; 
	border-radius: 8px; 
	/*margin-left: -174px;*/} 
.punctuation-example li {margin-bottom: 24px;}
		
			
.resources {
	
	}
.resources h2 {width: 140%;
	}
	
		/*@media screen and (max-width: 800px), (orientation:portrait) {
			.resources {
				width: 60%; 
				left: 32%;}
			.resources h2 {
				width: 140%; 
				font-size: 2.8em; 
				line-height: 1.2em; 
				text-align: right; 
				position: relative; 
				right: 32%;}}
				
		@media screen and (max-width: 800px), (orientation:portrait) {
			.resources img {margin-left: -30%;}
			}*/

/* =============================================================================
Begin PAGE FOOTER
   ========================================================================== */
			
#main-footer {
	width: 100%;
	/*background: #C4C4D4;*/ 
	font: 400 16px/1.5 "lemonde-sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1rem; /*Workaround for IE9&10's "problem" with properly using the REM unit*/
	color: #040404; 
	margin-top: 100px; 
	margin-bottom: 100px;}
.fonts-used {
	width: 100%; 
	font-size: 1rem; 
	text-align: center;}
	
	

/* =============================================================================
Begin EXTRAS! EXTRAS! EXTRAS! 
   ========================================================================== */
/* Andy Clarke's LINKS */
a {
	font: italic 600 16px/1.5 "ff-basic-gothic-web-pro", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1rem;
    color: #364C83;
	text-shadow: 4px 2px 1px rgba(0,0,0, 0);
	text-decoration: none;
	word-spacing: -2px;
	border-bottom: 1px dotted transparent;
    transition: all .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;}
a:visited {
	color: #5B5B6E;
	text-shadow: 0 1px 0 rgba(255,255,255, 1);}

a:hover {
   border-bottom-color: #364C83; 
   text-decoration : none;
   color: #364C83;
   text-shadow: 0 1px 0 rgba(255,255,255, 1);}

a:active, a:focus { 
  position: relative; 
  top : 4px; 
  color : rgb(255,255,255);
  }

/*a.action {
padding : .5em 20px;
background-color : rgb(143,58,58); 
color : rgb(255,255,255);
font-size : .875em;  
text-shadow : 0 1px 1px rgb(0,0,0); }*/

/*a.action:hover {
background-color : rgb(119,48,48); 
text-decoration : none; }*/

/*a.action:active,
a.action:focus {
background-color : rgb(44,18,18); 
color : rgb(255,255,255); 
text-decoration : none; }*/
/*End of Andy's Links*/


/*.intro a:link {
	color: #181922;
	text-shadow: 4px 2px 1px rgba(0,0,0, 0);
	font-size: 1.12rem;
	text-decoration: none; 
    transition: all .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    }

.intro a:visited {
	color: #364C83;
	text-shadow: 0 1px 0 rgba(255,255,255, 1);
	}

.intro a:hover {
	color: #364C83;
	text-shadow: 4px 4px 1px rgba(0,0,0, .3);
	text-shadow: 0 1px 0 rgba(255,255,255, 1);
	}*/

hr.Red {border: 0; border-bottom: 4px dashed #CC3D3D; background: #800000;}
hr.Blue {border: 0; border-bottom: 4px dashed #7178D8; background: #1F278C;}
hr.Green {border: 0; border-bottom: 4px dashed #0D7F2D; background: #084C1B;}
hr.Gold {border: 0; border-bottom: 4px dashed #FFD700; background: #D4BD3F;}
hr.Purple {border: 0; border-bottom: 4px dashed #DFADFA; background: #9271A3;}
hr.Orange {border: 0; border-bottom: 4px dashed #EEA565; background: #EB7D1D;}
hr.Grey-Darker {border: 0; border-bottom: 6px dashed #595959; background: #737373;}
hr.Grey-Lighter {border: 0; border-bottom: 6px dashed #D9D9D9; background: #F2F2F2;}
hr.Background-Blue-Wide {}
hr.Background-Blue-Narrow {border: 0; border-bottom: 4px dashed #A19685; background: #D9C593;}

hr.style-two {
    border: 0;
    height: 3px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	margin-bottom: 12.5em; /*200/1920   10.41666666666667%*/
}

/* =============================================================================
Begin Transitions and Transforms from Original Webtype Page 
   ========================================================================== */

#No2:hover #No2-mark {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	}

#No2-mark {
	/*float: left;
	margin: 0 15px 0 0;*/
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	}

#Hire-mark {-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;}
	
#Hire:hover #Hire-mark {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	}
	
#Const {-webkit-transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;}
	
#Const {color: #040404;

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
	
#Const-mark {-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;}
	
#Const:hover #Const-mark {color: #E7E7FA/*rgba(255, 255, 255, 0.7)*/;
	/*-webkit-transform: scale(1.5);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);*/
	}

#Leading {-webkit-transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;}
	
#Leading-mark {-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;}
	
#Leading:hover #Leading-mark {
	-webkit-transform: translate(0px,  70px);
	-moz-transform: translate(0px,  70px);
	-o-transform: translate(0px,  70px);
	transform: translate(0px,  70px);}
	
/* =============================================================================
Begin MEDIA QUERIES
   ========================================================================== */
    @media screen and (min-width: 700px) and (max-width: 800px) {
		.main-content section {
			width: 80%;
			margin: 6rem auto; ; 
			padding: 0 1rem; 
			}}
	
	
	@media screen and (min-width: 1350px) and (max-width: 1442px) {
		.main-content section {
			width: 40%;
			margin: 6rem auto; ; 
			padding: 0 1rem; 
			}}


	@media screen and (max-width: 1300px) {
			.intro {
			width: 70%; 
			margin-top: 20%; 
			padding: 0 10px; 
			margin-left: 8%;}}
	@media screen and (min-width: 700px) and (max-width: 800px) {
		.intro {
			width: 80%; 
			margin-top: 20%; 
			padding: 0 10px; 
			margin-left: 8%;}}


		
	@media screen and (max-width: 800px), (orientation:portrait) {
				.hierarchy h1 {font-size: 3.5em;}}
					
		@media screen and (max-width: 800px), (orientation:portrait) {
		.fonts-used {
			font-size: 1em; 
			padding: 1em;}
			}