/** postbridge css for styling specific to postbridge **/

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.sample-body{
  background-color: #d8dfda;  
  margin: 8px 0px 8px 0px;
}	

.sample-content { 
  max-width: 14.35cm;  
  padding: 60px 55px 55px 55px;
  margin-top: .27cm; 	 
  margin-left: auto; 
  margin-right: auto; 
  background-color: #f9f9f9;
  animation: fadeIn 3s;	 
}

.sample-subtitle {
  font-size: 20px;
  margin: 20px 10px 25px 10px; 	
  max-width: 16cm;	
}

.placeholder {
  height: 3em;	
  margin-top: 11px;
}

.chapter-heading{
  padding-bottom: 25px;
  padding-top: 25px;
  font-size: 13px;
  size: 3;
  font face="Lora";  
}	

.chapter-title {
  font-size: 18px;
  line-height: 16px;
  margin-bottom: 0cm; 
  text-align: center;  
}	

.quote {        
  font-family:'Lora';   
  margin-left: 2em; 
  margin-right: 3em;   
  text-align:justify ! important; 	   
}	

.mainquote {      
  color: #abb4bd;
  line-height:130%; 
  letter-spacing: -0.025em;	 
}

.links-list .inactive a {
  color: #888888; 
}	

.blurb-link a {
  background-color: transparent;
  color: #abb4bd;	
  text-decoration: none; 	
}	  

#booklife a {
  background-color: transparent;
  color: #47bec7; 	
  text-decoration: none; 	
}	

.blurb-right {  
  
}	

.auth-avatar{
  float: left;	
  width: 100px;
  height: 100px;
  padding-right: 15px;
}  

.ed-avatar{
  float: right;	
  width: 100px;
  height: 100px;
  padding-left: 15px;
}  

span.rotate {
  transform: rotate(90deg);
  display: inline-block;
  font-size: 135%;
  vertical-align: sub;  
}

span.normal {
  transform: none;
  display: inline-block;
  font-size: 135%;  
}

/* 'desktop' width will start at 950px */
@media screen and (min-width: 950px) {
	.column {
	  float: left;	  
	}
	
	.background{
	  background-color: #d8dfda;
	}
	
	.centered{
	  text-align: center;
	}
	
	.choice-container{	  
      display: inline; 
    } 
	
	.choices{
	  padding-left: calc((100% - 240px) / 2);
	}  
	
	.readability{
      min-width: 260px;	  
    }
	
	.reading-choice{
	  font-size: 14px; 
	  margin-left: 15px;
	  margin-right: 5px;
	  padding: 5px;
	  border-radius: 50%;
	  border: 2px solid gray;	  
    } 	
	
	p.helptext{	
	  font-family: Inter, sans-serif;
	  font-size: 12pt;
	  color: #303030;
	  margin-bottom: 2.5em;
	  margin-left: 5px;
    }
}	


/* make right and left columns the same width */
@media screen and (min-width: 1067px) {
   .readability{
	  width: calc((100% - (14.35cm + 110px)) / 2);	      
   }	   
   
}	

/* global styles unless overridden. But maybe better to always specify with width */
  	.choices{
	  float:left;
	}	
  	
  .reading-choice:hover {
    cursor: pointer;	
  }	
   
  .read-1{
    background-color: #151c22;	  	  
	color: #C3D2DC; 
  }
   
  .read-2{
    background-color: #a0ccdb;	  
	color: #000000;
  }
      
  .read-3{
    background-color: #deddc6;	  
	color: #101010;
  }
      
  .read-4{
    background-color: #f9f9f9;	  
	color: #000000;
  }
      
  .icon {
	width: 42px;
    height: 42px;   
  }
  
  .bottom-row{
	height: 42px;
	display: flex;
	margin: 5px 0px 30px 0px;
  }  
  
  .back-icon{
	background-image: url("../images/Arrow_Left_42_Noun_Project.png");	
  }

  .up-icon{
	background-image: url("../images/Arrow_Up_42_Noun_Project.png");	  
  } 	

  .icon-holder {
	padding-top: 10px;
	padding-left: 8px;
  }	  

@media screen and (max-width: 949.98px) {
	.icon {
	  width: 32px;
      height: 32px;	
	}
	
	.bottom-row{
	  height: 32px;
	  display: flex;
	  margin: 5px 0px 25px 10px;
	}  
	
	.back-icon {
	  background-image: url("../images/Arrow_Left_32_Noun_Project2.png");	
    }

	.up-icon {
	  background-image: url("../images/Arrow_Up_32_Noun_Project2.png");	
    }	  	
	
	.icon-holder {	
	  min-width: calc((100% - 11.35cm) / 2);	  
	  padding-left: 10px;
	  padding-top: 10px;
	  float: left;	  
    }
	
	.placeholder{
	  height: 7em;	  
	}
	
	.column {
	  float: left;	  
	}
	
	.choice-container{
	  width: 5em;
      display: block;	  
	  height: 50px;
	  margin-left: auto;
	  margin-right: auto;
    } 
	
	.readability{
		width: calc((100% - (14.35cm + 110px)) / 2);
		min-width: 72px; 
		margin-left: 0px;
		margin-right: 0px;
		float: left;
	}
	
	.reading-choice{
	  font-size: 13px; 
	  margin-left: 15px;
	  margin-right: 5px;
	  padding: 5px;
	  border-radius: 50%;
	  border: 2px solid gray;	  
    } 	
	
}	

/* annoying but have to account for weird width behaviour and calculations because of max width */
@media screen and (max-width: 740px) {
    .sample-content {
	  max-width: none;  
      padding: 40px 35px 55px 35px;	
  	  margin-left: auto; 
	  margin-right: auto; 
	  /* background-color: transparent; */
	  background-color: #f9f9f9;
	  animation: fadeIn 3s;	 
    }  
  
	.reading-choice{
	  font-size: 14px; 
	  margin-left: 15px;
	  margin-right: 5px;
	  padding: 5px;
	  border-radius: 50%;
	  border: 2px solid gray;	  
    } 	
}

@media screen and (min-width: 700.02px) and (max-width: 760px){
	.back-icon {
	  width: 32px;
      height: 32px;	
	  background-image: url("../images/Arrow_Left_32_Noun_Project2.png");	
    }	  
	
	.icon-holder {	
	  min-width: calc((100% - 11.35cm) / 2);	  
	  padding-left: 10px;
	  padding-top: 8px;
	  float: left;	  
    }
	
	.placeholder{
	  height: 7em;	  
	}		
	
	.readability{
	  width: calc((100% - 12.35cm) / 2);
	  margin-left: 0px;
	  margin-right: 0px;
	  float: left;
	}
	
    .sample-content {
 	  max-width: 12.35cm;
    }
	
	.sample-subtitle {
	  font-size: 18px;
      margin: 20px 8px 15px 8px; 	
	  max-width: 13.8cm;	
    }
	
	.reading-choice{
	  font-size: 14px; 
	  margin-left: 15px;
	  margin-right: 5px;
	  padding: 5px;
	  border-radius: 50%;
	  border: 2px solid gray;	  
    } 	

}


@media screen and (min-width: 612px) and (max-width: 700px){
	.back-icon {
	  width: 32px;
      height: 32px;	
	  background-image: url("../images/Arrow_Left_32_Noun_Project2.png");	
    }	  
	
	.icon-holder {	
	  min-width: calc((100% - 11.35cm) / 2);	  
	  padding-left: 10px;
	  padding-top: 8px;
	  float: left;	  
    }
	
	.placeholder{
	  height: 7em;	  
	}		
	
	.readability{
	  min-width: calc((100% - 11.35cm) / 2);	  
	  margin-left: 0px;
	  margin-right: 0px;
	  float: left;
	}
	
	.reading-choice{
	  font-size: 14px; 
	  margin-left: 15px;
	  margin-right: 5px;
	  padding: 5px;
	  border-radius: 50%;
	  border: 2px solid gray;	  
    } 	
	
    .sample-content {
	  max-width: 11.5cm;
    }
	
	.sample-subtitle {
	  font-size: 18px;
      margin: 20px 8px 25px 8px; 	
	  max-width: 11.5cm;	
    }
}


/* Responsive layout - when the screen is less than 610px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 611.98px) {	
  .icon-holder {	
	/* width: calc((100% - 180px) / 2);  /** dots in the middle **/
	/* width: calc(100% - 200px);  /** dots to the right **/
	padding-left: 8px;
	padding-top: 0px;
	float: left;
  }	  
  
  .icon {
	width: 32px;
    height: 32px;	
  }
	
  .back-icon {
	background-image: url("../images/Arrow_Left_32_Noun_Project2.png");	
  }

  .up-icon {
	background-image: url("../images/Arrow_Up_32_Noun_Project2.png");	
  }	 

  .column {
    width: 100%;
  }
  
  .placeholder{
	height: 0em;
    margin-top: 0px;
  }
     
  .helptext{
	display: none;  
  }	  
	 
  .choices{
	float:right;
  }		 
	 
  .choice-container{	  
    display: inline; 
  } 
  
  .readability{	  
	padding-top: 0.5rem;	  
    margin-top: 5px; 
	margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;    
  }
   
  .reading-choice{
	font-size: 13px; 
	margin-left: 6px;
	margin-right: 6px;
	padding: 5px;
	border-radius: 50%;
	border: 2px solid gray;	  
  }
  
  .sample-content {
    padding: 30px 17px 55px 17px;
	margin: 0px;
	/* background-color: transparent; */
	background-color: #f9f9f9;
	animation: fadeIn 3s;	 
  }
  
  .sample-subtitle {
	font-size: 18px;
    margin: 20px 15px 25px 15px; 	
	max-width: 100%;	
  }
  
}


/* font styles from libreoffice conversion */

@media screen and (min-width: 482px){
	.paragraph-book_5f_paragraph{ 
	  font-size:11pt; 
	  font-family:'Lora'; 
	  writing-mode:horizontal-tb; 
	  direction:ltr;
	  margin-left:0cm; 
	  margin-right:0cm; 
	  line-height:130%; 
	  text-align:justify ! important; 
	  text-indent:0.635cm; 
	}
	
	.paragraph-book_5f_section{ 
	  font-size:11pt; 
	  font-family:'Lora'; 
	  writing-mode:horizontal-tb; 
	  direction:ltr;
	  line-height:130%; 
	  text-align:justify ! important; 
	}
	
	.blockquote{
	  font-size:10.5pt; 
	  line-height:130%; 	    
      letter-spacing: -0.025em;	
	}
	
	.mainquote {      
	  color: #abb4bd;
	  line-height:125%; 
      letter-spacing: -0.025em;	
	  padding-right: 30px;
	}	
		
	p.indexed {
	  display: block;
      margin-block-start: 0.2em;
      margin-block-end: 0em;
	  clear: both;
	}	
	
	p.index-letter {
	  font-size:13pt; 
	  font-family:'Lora'; 	
	  margin-left:0cm; 	  	  
	}

	p.main-entry {
	  font-size:12pt; 
	  font-family:'Lora'; 	
	  margin-left:0cm; 	  	  
	}		
	
	p.sub-entry {
	  font-size:11pt; 
	  font-family:'Lora'; 	
	  margin-left:0.4cm; 	
	}	
	
	.index-number{
	  float: right;
	  text-align: right;
	  max-width: 8em;
	}	
	
	.index-cols{
	  column-count: 2; 
	  column-gap: 2em;
	  width: 100%;	
	}	
		
}


@media screen and (max-width: 800px){
	p.main-entry {
	  font-size:11pt; 
	  font-family:'Lora'; 		      
	}		
	
	p.sub-entry {
	  font-size:10pt; 
	  font-family:'Lora';	  
	}
	
	.index-number{
	  float: right;
	  text-align: right;
	  max-width: 7em;
	}	

	.index-cols{
	  column-count: 2;
      column-gap: 1.5em;	  
	  width: 98%; 
      	  
	}

}	


@media screen and (max-width: 481.98px){
	.paragraph-book_5f_paragraph{ 
	  font-size:10.5pt; 
	  font-family:'Lora'; 
	  writing-mode:horizontal-tb; 
	  direction:ltr;
	  margin-left:0cm; 
	  margin-right:0cm; 
	  line-height:140%; 
	  text-align:justify ! important; 
	  text-indent:0.635cm;
      letter-spacing: -0.025em;
	}
	
	.paragraph-book_5f_section{ 
	  font-size:10.5pt; 
	  font-family:'Lora'; 
	  writing-mode:horizontal-tb; 
	  direction:ltr;
	  line-height:140%; 
	  text-align:justify ! important; 
	  letter-spacing: -0.025em;
	}
	
	.quote {
	  margin-left: 1em;
      margin-right: 1.5em;	  
	}	
	
	.blockquote {
	  font-size:10.5pt; 
	  line-height:130%; 	    
      letter-spacing: -0.05em;	
	}
	
	.mainquote {      
	  color: #abb4bd;
	  line-height:120%; 
      letter-spacing: -0.05em;	
      padding-right: 25px;	  
	}	
	
	p.indexed {
	  font-size: 11px;
	  display: block;
      margin-block-start: 0.2em;
      margin-block-end: 0em;
	  clear: both;
	}

    p.sub-entry {
	  margin-left:0.2cm; 	
	}

	.index-cols{
	  column-count: 1; 
	  column-gap: 2em;
	  width: 100%;	
	}

	p.main-entry {
	  font-size:11.5pt; 
	  font-family:'Lora'; 		      
	}		
	
	p.sub-entry {
	  font-size:10.5pt; 
	  font-family:'Lora';	  
	}	

}


@media screen and (max-width: 310.98px){
	p.main-entry {
	  font-size:10.5pt; 
	  font-family:'Lora'; 		      
	}		
	
	p.sub-entry {
	  font-size:10pt; 
	  font-family:'Lora';	  
	}		
}


/* crimson-text-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/crimson-text-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/crimson-text-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/** Index page styles here **/
  .mockup-container{ 
	width: 48%;
	float: left;
	background-color: #ffffff;
  }	

  .mockup-image {
	background-image: url('../images/diybookcovers-blossom-red-1454px.jpg');	
	background-size: 576px;
	background-color: #ffffff;
	min-height: 95vh;  	
	background-position: center;
	background-repeat: no-repeat;
	position: relative;  
  }

  .mockup-text {	
	text-align: center;
	position: absolute;
	top: 50%;
	left: 75%;
	transform: translate(-50%, -50%);
	color: white;
  }

  .blurb-container {
    max-width: 52%;
    float: right;  
	background-color: #151c22;
    height: 100vh;	
  }	

  .home-blurb {
	background-color: #151c22;
	overflow: auto;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 25px;
	padding-bottom: 60px;
	justify-content: center;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-self: center;
	flex: 1;
	animation: fadeIn 2s;
  }

  .home-body {
	display: block;
	max-height: 100vh;
    font-family: Inter, sans-serif;
	color: #abb4bd; 
    min-height: 100%;
	background-color: #fff;	
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;  
    -webkit-font-smoothing: antialiased;	
  }
  
  .tagline {
	margin-top: 20px;
    margin-bottom: 20px;
    color: #ddd;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: -2px;
  }	  
  
@media screen and (min-width: 861.02px){
  .bold-text {
	font-weight: 500;  
  } 	    
}
  
  .subtitle{
	margin-bottom: 16px;
    color: #ddd;
    font-size: 22px;  
  }	  
  
  .links {
    min-width: 100%;
    padding-top: 20px;
    margin-bottom: 40px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  
  .links-sub {	
    margin-bottom: 20px;
    color: #7391b6;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: 2px;
    text-transform: uppercase; 
  }	  
  
  .links-list {
    font-family: Lora, sans-serif;
    color: #abb4bd;
    font-size: 18px;
    line-height: 175%;
	list-style: none;
	text-decoration: none;
	display: block; 
    margin-block-start: 0em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 4em;
    padding-inline-start: 0px;
  }
  
  
  .links-list a {
	background-color: transparent;
    color: #abb4bd;	
	text-decoration: none; 	
  }	  

  
  .copyright {
	color: #90a0a0;  
	font-size: 13px;	
  }	
  
@media screen and (min-width: 900px){ 
  .mainquote{
    font-size: 15px;	  
  }
}   
  
@media screen {
  .home-body {	
    margin: 0px; /** override user agent stylesheet adding 8px margin **/
  }
  
  .blurb {
	margin-bottom: 25px;
    font-family: Lora, sans-serif;
    color: #abb4bd; 
    line-height: 125%;  
	
  }	

  .name {  
    margin-bottom: 35px;
    color: #47bec7;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 1px;
    text-transform: uppercase; 		
  }
}  

  
@media screen and (max-width: 1199.98px){
  .mockup-image {
	background-image: url('../images/diybookcovers-blossom-red-1454px.jpg');	
	background-size: 576px;
  }	 

  .mockup-container {
    width: 48%;
    left: auto;
    right: auto;
	float: left;
	background-color: #ffffff;
  }
}	
  

@media screen and (min-width: 1200px){
  .mockup-image {
	background-image: url('../images/diybookcovers-blossom-red-1454px.jpg');	
	background-size: 100%;
  }	 

  .mockup-container {
    width: 48%;
    left: auto;
    right: auto;
	float: left;
	background-color: #ffffff;
  }
}	

@media screen and (min-width: 900px) and (max-width: 1199.98px){
  .mockup-image {
	background-image: url('../images/diybookcovers-blossom-red-1454px.jpg');	
	background-size: 100%;
  }	 
}


@media screen and (max-width: 899.98px) {
  .mockup-image {
 	background-image: url('../images/diybookcovers-blossom-red-2001px.jpg');
	min-height: 40vh;
    max-height: 45vh;
  }		
  
  .mockup-container {
    width: 100%;
    left: auto;
    right: auto;
	float: left;
	background-color: #ffffff;
  }
  
  .blurb-container {
    width: 100%;
	max-width: 100%;
    left: auto;
    right: auto;
	float: left;
  }	  
  
  .home-blurb {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	animation: fadeIn 4s;
  }	
  
  .name {
    margin-bottom: 10px;
  }
  
  .subtitle {
  	font-size: 18px;  
  } 

  .credit {
    font-size: 11px;
  }

  .rightcontent {
    padding: 40px;
	animation: fadeIn 3s;
  }
  
}

@media screen and (max-width: 481.98px) {
  .mockup-image {
    background-image: url('../images/diybookcovers-blossom-red-2001px.jpg');
    background-size: auto 90%;
	min-height: 45vh;
  }		
	
  .bold-text {
    font-size: 36px;
    line-height: 24px;
	font-weight: 600px;
  }
  
  .subtitle {
	font-size: 18px;
  }	 

  .copyright {
    font-size: 11px;
  }

  .rightcontent {
    padding: 25px;
  }

  .image {
    height: 267px;    
  }
  
  .links-list {
	font-size: 14px;
    margin-inline-end: 1.5em;	
  }	 

  .links-left {
    min-width: calc(90vw / 1.5);
  }	  
  

}