<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* current web */

.dark{ /* not used? */
	padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:10px;
  margin-bottom:10px;
}

.slogan_right{
	display: block;
	float: right; 
	width: 25%; 
	max-width:160px;
	border-radius: 10px;
	margin:10px;
	padding:2px 6px 2px 6px; 
	font-family: "Times New Roman", Georgia, Serif;
 	font-weight:normal;
//	background:#ddff99;  
	background-color:gold;
	color:black;
	text-align:left;
	box-shadow:2px 2px 2px grey;
//	text-shadow:4px 4px 4px grey;
}
.slogan_left{
	display: block;
	float: left; 
	width: 25%; 
	max-width:160px;
	border-radius: 10px;
	margin:10px;
	padding:2px 6px 2px 6px; 
	font-family: "Times New Roman", Georgia, Serif;
	font-weight:bold;
//	background:#a9b3bc; 
background-color:gold;
	color:black;
	text-align:left;
	box-shadow:2px 2px 2px grey;
//	text-shadow:3px 3px 2px grey;
}
.slogan_right h4, .slogan_left h4{
	padding-left:6px;
	padding-right:6px;
}

/* Services */
ul#services li{
  list-style: none;
  padding:20px;
  border: #cccccc solid 1px;
  margin-bottom:5px;
  background:#e6e6e6;
}
/* no longer used
.page-title{
	display:block;
	width:80%;
	padding:10px 40px 0px 40px;
	margin:0 auto;
}
*/
.page-email-icon{
	color:blue;
//	font-size:30px; /* not working for some reason, had to style it in the html... */
	padding-top:10px; 
	left:calc(100% - 40px); 
	position:fixed;" 
}
.page-email-icon:hover{
	cursor:pointer;
} 

/* Main-col */
article#main-col{
  float:left;
  width:65%;
}

.container{
  width:80%;
	min-height:50px;
  margin:auto;
  overflow:hidden;
}

/* Newsletter */
#newsletter{
  padding:15px;
  color:#ffffff;
  background:#3a4b35; /* original = #35424a; */
}


/*
#newsletter h1{
  float:left;
}

#newsletter form {
  float:right;
  margin-top:15px;
}

#newsletter input[type="email"]{
  padding:4px;
  height:25px;
  width:250px;
}

*/
/******** CODE ABOVE FROM PREVIOUS VERSIONS***********************************/

/* Start globals */
*{
	margin:0;
	padding:0;
}

body{
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

#back_image{
	min-height:700px; /* @@ */
/*	background: url('../img/bill-gates-summer-books4.png') no-repeat top; */
background: url('../img/eintein-summer-books1c.png') no-repeat top;

	background-size:90%;

//	width:90%;
	
//	height:auto;
	margin:0 auto;
//	background-position:cover;
//	background-attachment: fixed;
	border:1px solid transparent; /* necessary to bring the image to the bottom of menu bar */
}
/* End globals */

/* ===================== START HEADER AND MENU PC ======================= */
/* Start header */
header{
	position:relative;
	display:flex;
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	background-color:#3a4b35; /* original = #35424a; */
	border-bottom:3px solid red;
	justify-content: center;
}

/* logo */
.logo{
	flex:0 25%;
	color:gold;
	text-shadow:2px 2px 4px black;
	text-align:center;
	padding-left:30px;
}

/* nav bar */ 
header nav{
	flex:1;
	text-align:right;
	padding-right:20px;
}

/* End header */

/* Start menu  */
.menu{
	position:relative;
	list-style-type:none;
	font-family:arial;
	font-size:14px;
}

.menu li{
	display:inline-block;
	width:95px;
	height:42px;
	//margin:2px auto 0px auto;
	//border:1px solid lightblue;
}

.menu li.larger{ /* needed to make this item a little wider */
	width:150px;
}

.menu li a{
	position:relative;
	display:block;
	text-decoration:none;
	color:white;
	background-color:#3a4b35;
	text-align:center;
//	padding-top:10px;
	margin-top:12px; 
	text-transform:uppercase;
}

.menu li:hover .submenu{
	display:block;
}
.menu li:hover &gt; a{
	text-shadow:2px 2px 4px black;
	color:gold;
	font-weight:bold;
}

/* End menu */

/* Start submenu */
.submenu{
	display:none;
	position:absolute;
	margin:8px 0 0 20px; 
	padding:2px;
//	background-color:lightblue;
	background-color:#3a4b35;
//	border:2px solid blue;
	border:2px solid red;
	border-radius:10px;
	z-index:100;
	width:110px;
	box-shadow:6px 6px 10px #20282d;
}
.submenu li{
	width:110px;
	display:block;
	height:14px;
	margin-bottom:10px;
}
.submenu li a{
	text-transform:capitalize;
	text-align:left;
	padding-left:12px;
	color:white;
//	background-color:blue;
	background-color:#3a4b35;
	border-radius:5px;
}

#current{
	color:lightgreen;
}
#current:hover{
	color:gold;
}
/* End submenu */

/* ===================== END HEADER AND MENU PC ======================= */

/* ===================== START BODY PC ================================ */

#motto{ 
	width:80%;
	margin:15px auto; 
	text-align:center;
//	border:2px solid red;

}
#motto h1{ /* No need to make responsive */
	font-size:22px;
	font-weight:bold;
}

#main{
	width:80%;
	margin:20px auto;
}
#main li {  /* No need to make responsive */
	line-height:1.2;
	font-size:18px;
	margin:10px auto 15px 40px;;
	color:brown;
	text-align:left;
	font-weight:bold;
	font-style:italic;
}
#main h2{ /* No need to make responsive */
	font-size:28px;
	color:red;
	text-align:center;
	text-shadow:
							1px 1px #802000, /* to obtain 3D look */
							2px 2px #802000,
							20px 20px 20px black;
	padding-top:10px;
}
#main h3{
	margin:0 auto;
	font-size:20px;
	font-weight:normal;
	text-align:justify;
	padding:40px 20px 20px 20px;
}
/* ===================== END BODY PC ================================ */
#separating_bar1{
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	background-color:#3a4b35; /* original = #35424a; */
  text-align:center;
	margin-bottom:20px;
	margin-top:20px;
	color:gold;
	text-shadow:2px 2px 4px black;
	border-bottom:3px solid red;
	border-top:3px solid red;
}
/* ===================== START FIELD BOXES PC ======================= */
.fields1{
	display:flex;
	justify-content:space-between;
	margin-bottom:30px; /* vertical box separation */
}
.fields1 h3{
	text-align: center;
	margin-bottom:5px;
}	
.fields1 &gt; div{
//	width: 30%px;
  margin:0 15px 0 15px; /* Horizontal separation between boxes */
//		margin:0 1% 0 1%; /* Horizontal separation between boxes */
}
.fields1 p{
	line-height:1.15;
	margin-bottom:5px;
	text-align:left;
	font-weight:normal;
}
#field1, #field2, #field3{
	flex:1;
//	border:1px solid red;

}
.fields2{
	display:flex;
	justify-content:space-between;
	margin-bottom:30px; /* vertical box separation */
}
.fields2 h3{
	text-align: center;
	margin-bottom:5px;
}	
.fields2 p{
	line-height:1.15;
	margin-bottom:5px;
	text-align:left;
	font-weight:normal;
}
.fields2 &gt; div{
//  width: 30%px;
  margin:0 15px 0 15px; /* Horizontal separation between boxes */
//	margin:0 1% 0 1%;	/* Horizontal separation between boxes */
  text-align: center;
}
#field4, #field5, #field6{
	flex:1;
//	border:1px solid red;
}
.field{
	text-align:center;
	padding:20px;
	background-color:white;
	border:3px solid #3a4b35;
	border-radius:10px;
}
.field a{
	display:block; 
	text-decoration:none;
}

/* Not used for the time being 
.field_empty{
	padding:20px;
	border:3px solid transparent;
	border-radius:10px;
}
*/

/* ===================== END FIELD BOXES PC ======================= */
/* ===================== START PANELS PC ======================= */
.panel{
	width:80%;
	margin:auto;
	list-style-type:none;
}
.panel h1{
	line-height:1;
	padding-top:10px;
	padding-left:10px;
	color:green;
}	
.panel li{
	margin:10px auto 10px auto;
	padding:10px;
//	border:1px solid red;
	background-color:#e6e6e6; 
}
.panel p{
	font-size:16px;
	margin-bottom:10px;
}
.panel ol{
	type="1";
	padding:0; 
	margin-left:20px;
	font-size:16px; 
	line-height:1.5;
}
.panel ol li{
	padding:0px;
}

.panel ul{
	padding:0; 
	margin-left:20px;
	font-size:16px; 
	line-height:1.5;
	list-style-type:square;
}
.panel ul li{
	padding:0px;
}
/* ===================== END PANELS PC ======================= */
/* ===================== START FOOTER PC ======================= */
footer{
  padding:20px;
  margin:20px auto;
  color:#ffffff;
  background-color:#e8491d;
  text-align:center;
	font-size:24px;
}
/* ===================== END FOOTER PC ======================= */
/* ===================== START FLOATING EMAIL DIV (blue envelope) PC ====== */
#floating-email{
	display:none;
	position:absolute;
	width:240px;
	left: calc(50% - (120px * 1.1));
	top:10px;
	padding:0px; 
	margin:10px 10px 10px 10px;
	background-color:gold;
	color:black;
	border-radius:10px;
	border:2px solid darkblue;
	box-shadow:4px 4px 20px black;
}
#floating-email input{
	width:190px;
	height:30px;
	margin-left:24px;
}
#floating-email textarea{
	width:190px;
	margin-left:24px;
}

#floating-email p, #floating-email h4{
	padding-top:5px;
	margin-left:24px;
}
/* ===================== END FLOATING EMAIL DIV (blue envelope) PC ====== */
/* ===================== START CONTACT US EMAIL DIV PC ====== */
#contact-email{
	width:240px;
	left: calc(50% - (120px * 1.1));
	top:10px;
	padding:0 0 60px 0; 
	margin:10px 10px 50px 10px;
	color:black;
	border-radius:10px;
	border:2px solid darkblue;
//	box-shadow:4px 4px 20px black;
}
#contact-email input, #contact-email select{
	width:190px;
	height:30px;
	margin-left:24px;
}
#contact-email textarea{
	width:190px;
	margin-left:24px;
}

#contact-email p, #contact-email h4{
	margin:10px auto 0px 24px;
}
/* ===================== START CONTACT US EMAIL DIV PC ====== */

.button_red{
	display:inline;
	margin:10px 25px 10px 25px;
  height:38px;
  background:#e8491d;
  border:0;
  padding-left: 10px;
  padding-right:10px;
  color:#ffffff;
	border-radius:5px;
}

.button_green{
	display:inline;
	margin:10px 25px 10px 25px;
  height:38px;
  background:green;
  border:0;
  padding-left: 10px;
  padding-right:10px;
  color:#ffffff;
	border-radius:5px;
}

#faclose{
	float:right;
	margin-right:10px;
	margin-top:10px;
	width:30px; 
	height:30px;
	text-align:center;
}
#faclose:hover{
	cursor:pointer;
}
/* ===================== END EMAIL DIV (blue envelope) PC ============ */
/* ======= START INDIVIDUAL ITEMS PER PAGE PC ====================*/
#emails_vs_articles{
	display:block;
	margin:10px auto 10px auto;
	width: 65%;
}
/* in TOOLS */
.input_box{
	width:40%; 
	height:32px; 
	margin-bottom:5px; 
	font-size:16px;" 
} 

/* ======= END INDIVIDUAL ITEMS PER PAGE PC ====================*/

/* @@@@@@@@@@@ RESPONSIVE CSS BELOW @@@@@@@@@@@@@@@@@  */

@media only screen and (max-width: 768px)  {


/* ===================== START HEADER AND MENU PHONE ======================= */
/* Start menu and submenu */
	header{
		display:block;
		width:100%;
	}
	.logo{
		display:block;
	}
	nav{
		display:block;
	}
	
	.menu li{
		width:100%;
		height:25px;
		display:block;
		font-size:17px;
	}

	.larger{
		width:100%;
		margin:0 auto;
	}

	.submenu{
		box-shadow:6px 6px 10px black;
		width:120px;
		margin-top:-3px;
	}
	.submenu li{
		width:120px;
	}
	
	.submenu li a{
		text-align:center;
//		margin:0;
		padding:5px;
	}
	/* End menu and submenu */
	
	#newsletter{
		display:none;  /* to leave more room below menu */
	}
/* ===================== END HEADER AND MENU AND BANNER PHONE ================= */

/* ===================== START BODY PHONE ================================ */
	#back_image{
		background-size: auto;
	}
	#motto{ 
		width:90%;
	}
	#main{ 
		width:90%;
	}
	#main h3{
		text-align:left;
		padding:20px;
	}
/* ===================== END BODY PHONE ================================ */
/* ===================== START FIELD BOXES PHONE ======================= */
	.fields1{
		display:flex;
		flex-direction:column;
		margin-bottom:0;
	}
	.fields2{
		display:flex;
		flex-direction:column;
	}
/* not used for the time being	
	.field_empty{
	padding:0px;
	}
*/	
	#field1, #field2, #field3, #field4, #field5, #field6{
		margin-bottom:10px;
	}
/* reorder the fields to get both Publisher boxes together */	
	#field4{
		order:3;
	}
	#field5{
		order:2;
	}
	#field4{
		order:1;
	}
	footer{
		font-size:14px;
	}
	
	
/**CODE BELOW IS FROM PREVIOUS VERSIONS ************************/
	.container{ /* make band under menu font smaller to fit in 1 line */
		padding-top:10px;
		font-size:12px;
	}	
	/* hide slogans in phone version */
	.slogan_right{
	display:none;
	}
	.slogan_left{
	display:none;
	}

	.pjustify,
	div.pjustify p,
	header #branding,
	header nav,
	header nav li,
	#newsletter h1,
	#newsletter form,
	#boxes .box,
	article#main-col,
	aside#sidebar{
		float:none;
		text-align:center;
		width:100%;
	}
	/*	
			#newsletter button, .quote button{
			display:block;
			width:100%;
		}

		#newsletter form input[type="email"], .quote input, .quote textarea{
			width:100%;
			margin-bottom:5px;
		}
	*/	
	/***********************************************************/

	/* ======= START INDIVIDUAL ITEMS PER PAGE PHONE ====================*/
	#emails_vs_articles{
		width:100%;
	}
	.input_box{
		width:100%;
	}
/* ======= END INDIVIDUAL ITEMS PER PAGE PHONE ====================*/
}



</pre></body></html>