/*----------------------------------main--------------------------------------*/

body {
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	color: #000;
	background: #fff;
	margin: 0 auto;
	font-size: 0.9em;
	line-height: 1.75em;
	}

/*----------------------------------general styling--------------------------------------*/

a {
	color: #316896;
	text-decoration: none;
}

a img {
	border: none;
}

a:hover {
	color: indianred;
	text-decoration: underline;
}

acronym, abbr {
	border-bottom: 1px dashed #333;
	letter-spacing: .07em;
	cursor: help;
}

.caps {
	font-variant: small-caps;
	font-size: 0.8em;
	letter-spacing: 0.1em;
}

h2 {
	font-weight: normal;
	margin: 0.2em 0 0.5em 0;
	color: black;
}

h2 a, a.link_in_cours_content {
	color: black;
}

.coursnumber {
	display: inline-block;
	height: 1.65em;
	width: 1.65em;
	font-size: 1.9em;
	line-height: 1.65em;
	margin: 1px 0;
	
	color: white;	
	background-color: gray; /*in case all else fails*/
	background-image: -webkit-radial-gradient(rgb(37,37,37) 0%, rgb(0,0,0) 100%);	
	background-image: -moz-radial-gradient(rgb(37,37,37) 0%, rgb(0,0,0) 100%);	
	background-image: radial-gradient(rgb(37,37,37) 0%, rgb(0,0,0) 100%); /* in case loading of circle.svg fails*/
	background-image: url(circle.svg);
	background-position: center 0px;
	background-repeat: no-repeat;
	background-size: auto, contain;
	border-radius: 1.8em;

	vertical-align: middle;
	text-align: center;
	
	font-family: serif;
}


/*----------------------------------content--------------------------------------*/


#head_box {	
	padding: 1em 0 2em 0;
	border-bottom: 15px silver solid;
	background: white;
	line-height: 2em;
	text-align: center;

	background-image: -o-linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);
	background-image: -moz-linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);
	background-image: -webkit-linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);
	background-image: -ms-linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);
	background-image: linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);	
}

	h1 {
		font-size: 3em;
		font-weight: normal;
		line-height: 1.3em;

		font-family: serif;
		text-shadow: 0 2px 0 rgba(255,255,255,0.75);
	}


	#head_box p {
		width: 40em;
		max-width: 90%;
		margin-right: auto;
		margin-left: auto;
	}
	
	#head_box #lead_picture {
		max-width: 80%;
		height: auto;
		}

	.credit_box {
		width: 30em;
		max-width: 90%;
		margin: 2em auto 2em auto;
		padding-top: 0.8em;
	}

	.attribution_text {
		font-size: 1.5em;
	}

	.attribution_text a{
		color: black;
		border-bottom: 1px silver solid;
	}

	.attribution_text a:hover{
		text-decoration: none;
	}

	.main_download_links {
			margin-top: 5em;
			padding-top: 3em;
			padding-bottom: 1em;

			text-align: center;
			border-top: 15px silver solid;
		}

	.main_download_links .main_cours_link {
			width: 18em;
			padding: 10px 0;
		}

	div.main_site_link {
		padding: 0.5em;
		display: inline-block;
		min-width: 17em;
	}

	.main_site_link a img{
		border: 1px gray solid;
		border-radius: 4px;
		box-shadow: silver 0 0 10px;
	}

	.main_site_link a:hover img{
		background-color: rgba(255,255,255,0.6);
		box-shadow: white 0 0 20px;
		border: 1px rgba(255,255,255,0.1) solid;
		border-radius: 15px;	
	}



/* -- sommaire -- */

#sommairewrap1 {
	display: table;
	position: fixed;
	top: 0; right:0;
	height: 100%;
	width: 4em; /*in case calc() not supported*/
	width: -webkit-calc(7px + (1.65 * 1.9em));
	width: calc(7px + (1.65 * 1.9em)); /*one column: .sommaire 2px border + 2× .sommaire.a padding + computed .coursnumber width + 1px rounding error (?)*/
	max-width: 50%;
	z-index: 2;
}

	#sommairewrap2 {
		display: table-cell;
		vertical-align: middle;
	}

		.sommaire {
			text-align: center;
			padding: 0;
		
			border: 2px gray solid;
			border-right: none;
			border-top-left-radius: 8px;
			border-bottom-left-radius: 8px;
		
			background: white;
			background-image: -moz-linear-gradient(to left, rgb(243,243,243) 0%, rgb(226,226,226) 100%);
			background-image: -webkit-linear-gradient(to left, rgb(243,243,243) 0%, rgb(226,226,226) 100%);
			background-image: linear-gradient(to left, rgb(243,243,243) 0%, rgb(226,226,226) 100%);
			box-shadow: silver 0 0 3px;		
		}
	
			.sommaire_title {
				display: none; /* text-based visitors will find it useful */
			}
	
			.sommaire a {
				display: inline-block;
				margin: 0;
				padding: 0 3px;
			}
			
			.sommaire a:focus {
				outline: none; /* otherwise messes up with JS animations */
			}
	
			.sommaire .coursnumber{
				transform: -ms-rotate(-10deg);
				transform: -webkit-rotate(-10deg);
				transform: rotate(-10deg); /*wee*/
				opacity: 0.8;
			}
		
			.sommaire a:hover .coursnumber{
				background-color: rgb(143,10,10);
				/*background-image: radial-gradient(center, rgb(143,10,10) 0%, rgb(51,28,28) 100%); what it should look like without SVG*/
				background-position: center -74px;
				box-shadow: black 0 0 8px;
				}
	
			.sommaire a.highlighteditem {
				background-color: #bf7070;
				box-shadow: gray 0 0 7px;
				transition: all 1.5s ease-out;
			}



/* -- main column -- */

.main_column {
	width: 60em;
	max-width: -webkit-calc(100% - 50px);
	max-width: calc(100% - 50px);
	margin: 4em auto 3em;
	padding-bottom: 1em;
	
	border-right: 2px silver solid;
	border-left: 2px silver solid;
}



/*------------------------------------- */

	.un_cours_container {
		margin: 4em 20px;
		border-top: 2px black solid;
	}

		.un_cours {
			width: 100%;
			max-width: 40em;

			margin: 0 auto;
		}

		h2 {
			font-size: 2em;
			padding-top: 0.6em;
			text-align: center;
			}

		.un_cours .coursnumber{
			font-size: -webkit-calc(1.8em / 2);
			font-size: calc(1.8em / 2);
		}

		.ds_title_box .coursnumber{
			font-size: -webkit-calc(1.8em / 1.5);
			font-size: calc(1.8em / 1.5);
		}

		.cours_content{
			font-size: 0.9em;
			padding: 0.9em 20px 0 20px;

			border-top: 1px grey solid;
			font-style: italic;
			text-align: justify;
		}

		.coming{
			text-align: center;
			padding: 4em 0;
			border: none;
		}


			.blurb_cours{
				font-size: 1.2em;
				padding: 15px 20px 0 75px;
				
				background: url(hand.svg) center left+20px no-repeat;
				
				border-top: 1px grey solid;
				text-align: justify;
				-ms-hyphens:auto;
				-webkit-hyphens:auto;
				-moz-hyphens:auto;
				hyphens:auto;
			}

			.main_two_cours_links {
				margin-top: 1em;
				padding-top: 0.5em;

				text-align: center;
				border-top: 1px grey solid;
			}


			.main_cours_link {
				padding: 1em;
				display: inline-block;

			}

			.main_cours_link img {
				border: 1px gray solid;
				height:auto;
			}

			.main_cours_link a img {
				-moz-box-shadow: silver 0 0 7px;
				-webkit-box-shadow: silver 0 0 7px;
				box-shadow: silver 0 0 7px;
			}

			.main_cours_link a:hover img {
				-moz-box-shadow: gray 0 0 16px;
				-webkit-box-shadow: gray 0 0 16px;
				box-shadow: gray 0 0 16px;
			}

			.more_cours_link { /* slides + videos */
				padding: 1em 0 0.5em 0;
				line-height: 2.5em;
			
				opacity: 0.8;
				border-top: 1px grey solid;
			}

			.more_cours_link a{
				display: block;
			}

			.more_cours_link img {
				border: 1px silver solid;
				padding: 3px;
				border-radius: 3px;
				margin: 0 0 -9px 0;
			}

			.more_cours_link:hover {
				opacity: 1;
			}



/* -- Boxes for DS & BE -- */

.ds_title_box {
	background: white;
	width: 90%;
	max-width: 30em;
	margin: 2em auto -4em auto;
	padding: 0 1em 1em 1em;
}

	.ds_title_box h2 {
		font-size: 1.5em;
		margin: 0;
		padding-top: 0.5em;
	}

	.ds_title_box p {
		font-size: 0.9em;
		text-align: center;
		font-style: italic;
		margin-top: 0;
	}


.listing {
	background: #ffffff;
	width: -webkit-calc(100% - 50px);	
	width: calc(100% - 50px);
	max-width: 60em;
	
	font-size: 0.8em;
	padding: 1em;
	margin: 3em auto 1em auto;
	text-align: center;
	line-height: 3.5em;

	border: 1px gray solid;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

	.handout_link, .handout_link_ds, .handout_link_be {
		-webkit-width: calc(49% - 5em);
		width: calc(49% - 5em);
		min-width: max-content;
		display: inline-block;
		text-align: right;
	}

	.solution_link {
		width: 9em;
		min-width: max-content;
		display: inline-block;
	}

	.entry_description {
		width: -webkit-calc(49% - 5em);
		width: calc(49% - 5em);
		min-width: max-content;
		display: inline-block;
		text-align: left;
	}

		.handout_link_ds a {
			background: url(icons/ds_icon.png) left center no-repeat;
			padding: 22px 1em 22px 45px;
		}

		.handout_link_be a {
			background: url(icons/td_icon.png) left center no-repeat;
			padding: 22px 2em 22px 45px;
		}

		.solution_link a {
			background: url(icons/solution_icon.png) left center no-repeat;
			padding: 22px 1em 22px 45px;
		}


/* -- Contact & credit blurb -- */


.vendeurs{
	margin-top: 3em;
}

.footer_box, .vendeurs {
	font-size: 1.2em;
	padding: 1em;
	border-top: 15px silver solid;
	background: white;
	line-height: 2em;
	text-align: center;
	background-image: -o-linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);
	background-image: -moz-linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);
	background-image: -webkit-linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);
	background-image: -ms-linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);
	background-image: linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);	
}


	.acheter_sub {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
	}


		.footer_box .footerlink a {
			display: block;
			max-width: 30em;
			margin: 0 auto;
			padding: 1em;
		}

		.footer_box .footerlink a:hover {
			-moz-box-shadow: gray 0 0 3px;
			-webkit-box-shadow: gray 0 0 3px;
			box-shadow: gray 0 0 3px;
			text-decoration: none;
		}

		.footer_box .feed_link span {
			padding-left: 25px;
			background: url(icons/feed.png) center left no-repeat;
		}

		.footer_box .log_link span {
			padding-left: 30px;
			background: url(icons/flag_blue.png) center left no-repeat; /* awsome icons CC-by Mark James, famfamfam.com */
		}

		.footer_box .contact_link span {
			padding-left: 30px;
			background: url(icons/email.png) center left no-repeat; /* awsome icons CC-by Mark James, famfamfam.com */
		}

		.footer_box .flattr_link span {
			padding-left: 30px;
			background: url(icons/flattr.png) center left no-repeat;
		}

		.footer_box .github_link span {
			padding-left: 30px;
			background: url(icons/git.png) center left no-repeat;
		}

		.footer_box .citation_link span {
			padding-left: 30px;
			background: url(icons/citation.png) center left no-repeat;
		}


		.footer_box .interview_link span {
			padding-left: 30px;
			background: url(icons/comment.png) center left no-repeat;
		}

		.footer_box p {
			font-size: 0.8em;
			max-width: 50em;
			margin: 2em auto 2em auto;
			font-style: italic;
		}

.footer_box .colophon{
	   font-size: 0.7em;
	width: 35em;
	max-width: 90%;
	margin: 2em auto;
	sborder-top: 1px gray solid;
	padding-top: 1em;
}


/*--------- responsive layout --------- */

/* if 1-column sommaire won’t fit vertically,
or if it obfuscates the title and lead,
we switch it to two-column */

@media all and (max-height: 580px), all and (max-width: 550px) {

	html{
		font-size: 0.9em; /* shrink, shrink */
	}

	h2 {
		-ms-hyphens:auto;
		-webkit-hyphens:auto;
		-moz-hyphens:auto;
		hyphens:auto;
	}
	
	#sommairewrap1 {
		font-size: 0.8em;
		width: -webkit-calc(2 * (8px + 1.65 * 1.9em));
		width: calc(2 * (7px + (1.65 * 1.9em))); /*two columns*/
	}
	
	#sommairewrap2 {
		vertical-align: bottom;
	}
}

/* if screen becomes narrow, do not justify text */

@media all and (max-width: 41em) {

	.blurb_cours{
		text-align: left;
		background-size: 6vw;
		padding-left: 15vw;
		}

	.cours_content {
		text-align: left;
		}
}

/* if screen becomes very narrow */

@media all and (max-width: 350px) {

	 /* stop scaling down the hand pictogram now */
	.blurb_cours {
		background-position: top+22px left+10px; /* put it top left */
		background-size: 15px;
		padding-left: 35px;
		padding-right: 5px;
		}
	
	/* limit the width of the individual image link to PDF*/
	.main_cours_link img {
		max-width: 38vw;
		min-width: 100px; /* not too small, though */
		height:auto;
		}
	
	/* reduce padding around descriptions */
	.cours_content{
		padding-left: 10px;
		padding-right: 10px;
		}
}

/* Inherited from old page */
.ds_link a {
		background: url(icons/ds_icon.png) left center no-repeat;
		padding: 22px 2em 22px 45px;
		line-height: 4em;
}

.ds_solution_link a {
		background: url(icons/solution_icon.png) left center no-repeat;
		padding: 22px 2em 22px 45px;
}

.diapos_link a {
		background: url(icons/diapos_icon.png) left center no-repeat;
		padding: 22px 2em 22px 45px;
}

#past_examinations {
	margin: 0 20px;
	text-align: center;
	font-size: 0.9em;
}

#past_examinations h2 {
	margin-bottom: 1.5em;
}

#past_examinations span.desc{
	display: block;
	margin: 0 auto 1em 0
}

#announce {
	background-color: #deb5b5;
	box-shadow: gray 0 0 7px;
	border-radius: 5px;
	margin: 2em auto;
	max-width: 40em;
	padding: 0.2em;
}

/*-------------------------------------*/

.niousletter{
	padding: 2em;
	border: none;
}

	.niouslettersignup{
		text-align: left;
	}

	.niouslettersignup input{
		display: inline-block;
		height: 3.1em;
		margin: 0;
		padding: 0 0.5em;
		font-size: 1em;
		line-height: 1.5em;
	}

	input.emailsub{
		width: 55%;
		min-width: 20em;
	}

	input.pouf{
		float: right;
		width: 25%;
		min-width: 8em;
		margin-bottom: 1em;
	}

	.pouf:hover{
		cursor: pointer;
	}

/*-------------------------------------*/


/* Dark Mode Styling */
@media (prefers-color-scheme: dark) {
    body {
        color: #ddd;
        background: #333333;
        background-image: none;
    }
	
	  img{
		  filter: brightness(0.8)
	  }

    .sanspub img{
      filter: none;
    }
	
		h1{
			text-shadow: none;
		}
	
		#head_box #lead_picture{
			opacity: 0.8;
			}

    a {
        color: #79b8ff;
    }

    a:hover {
        color: #ff6b6b;
    }

    h2 {
        color: #fff;
    }

    .credit_box {
        border: 2px #444 solid;
        background-color: #494949;
        box-shadow: #222 0 0 7px;
    }

    .biigbutton a {
        border: 1px #888 solid;
        color: #fff;
    }

    .biigbutton a:hover, .biigbutton a:active {
        background: #007a5e;
        border-color: #007a5e;
    }

    blockquote {
        background: #333;
        color: #bbb;
    }

    .cours_content {
        color: #aaa;
        border-right: 1px #555 solid;
    }

    .promptbox a:hover img {
        background-color: rgba(255, 255, 255, 0.1);
			  border-color: rgba(255, 255, 255, 0);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
       
    }

    input, textarea {
        background: #222;
        color: #ddd;
        border: 1px solid #555;
    }

    input::placeholder, textarea::placeholder {
        color: #888;
    }

	
	    #mainwrap {
        background-color: rgba(50, 50, 50, 0.5);
        border: 2px #444 solid;
        border-top-color: rgba(100, 100, 100, 0.5);
        padding: 0 2em 3em 2em;
    }
	
	  .chaptercontents{
	    border: 1px gray solid;
	    background: #4b4b4b;
    }
	
	  .chaptercontents li a{
		  border-color: #4b4b4bff;
	  }
	  
	  .anexample{
		  background: #4b4b4bff;
	  }
	 
	 .vocab,.desclist .descitem {
      color: #ff8c42;
    }
	
	 .specialquote{
	  	background: #3e3e3e;
	  }
	
	
	  #head_box, .footer_box {	
	    border-bottom: 15px silver solid;
	    background: black;
      background-image: linear-gradient(to right, rgb(40,40,40) 0%, rgb(60,60,60) 50%, rgb(40,40,40) 100%);
    }
	
    #sommairewrap1 {
        background: #222; /* Subtle background to blend with dark mode */
    }

    .sommaire {
        border-color: #777; /* Lighter border for contrast */
        background: #333;
        background-image: linear-gradient(to left, rgb(50, 50, 50) 0%, rgb(70, 70, 70) 100%);
        box-shadow: black 0 0 5px;
    }

    .sommaire a {
        color: #ddd; /* Lighter text for readability */
    }

    .sommaire a:hover .coursnumber {
        background-color: rgb(200, 50, 50);
        box-shadow: red 0 0 10px;
    }

    .sommaire a.highlighteditem {
        background-color: #804040;
        box-shadow: gray 0 0 10px;
    }
	
	
}