:root {
  --main-bg-color: coral;
  --main-txt-color: blue;  
  --main-padding: 15px;  
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);  
  padding: var(--main-padding);
}



* {
box-sizing: border-box;
font-size:1em; 
font-weght:100;
margin:0;
padding:0;

}


.main h1{	
ext-transform: uppercase;
}

.up{
text-transform:capitalize;
	
}


.row::after {
 content: "";
clear: both;
display: table;
}


[class*="col-"] {
float: left;
padding: 10px;
order:1px solid lime;

}

ol, ul{
order:1px solid dodgerblue;
}


html {
 
}


body{
font-family: verdana, sans-serif;
background:#feb236;
}


div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 50px;
font-size: 20px;
}


#header{
ine-height:200%;
background:#F9F9F9;
padding:5px;
width:100%;

}	

.name{
font-weight:900;
font-size:1.1em;
}

.eu{
color:#6b5b95;
}

.motto{
text-transform: uppercase;
	}
	

#footer{
	
eight:30px;
text-align:center;
color:white;
background:#6b5b95;
padding: 10px 0;
width:100%;
clear:both;
osition: fixed;
bottom:0;
}
	

	
.main{

border-radius:4px;
ox-shadow: 4px 4px 5px #BABABA;
padding:20px;
width:85%;
margin:20px auto;
min-height:500px;
overflow:auto;

color:#18142F;
font-size:16px;
line-height:200%;
word-wrap: break-word;
list-style-position:inside;

background:white;

border: 1px solid #E6E6E6;
}



.main p{
text-align:justify;
margin:0;
padding:0;
ext-indent:30px;
	}

/* Les titres */	

	
h1, h2, h3, h4, h5, .clear{
clear:both;
ont-family: verdana;

}

	
p.lettrine:first-letter{
font-size:2em;
}



.aoriste button {
padding:0px 7px;
margin:0 20px 0 5px;
	}
	
.helios button {
color:white;
border-width:0px;
width:25px;
height:25px;
background-color: #ff7b25;
}
	
.helios button:hover {
background-color:#feb236;
color:;
	}
	
/*Pagination*/

.center {
text-align: center;
clear:both;
padding-top:40px;
}

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
order: 1px solid #ddd;
argin: 1px;
}

.pagination a.active {
background-color: #d64161;
color: white;
order: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {
background-color: #feb236;
}
	


/*accordéon*/

.accordion {
background-color:#f1eff5;/*#eee;*/
olor: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
ont-size: 15px;
transition: 0.4s;
border: 1px solid white;
border-width:1px 0;
}

.activ, .accordion:hover {
background-color:#e3dfec;#b9b0cf; /*#ccc;*/
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.activ:after {
content: "\2212";
}

.panel {
padding: 0 0px;
background-color:white;#fff0e6;#fff5e6;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;

}

.panel table.helios {
	

}

/*fin accordéon*/

table{
lne-height:normal;
}

.cocoon {
overflow-x:auto;
clear:both;
eight:800px;

}


/* tableaux de prononciation anglais*/	
	
table.voyelles{
border-collapse:collapse;
table-layout:fixed;
min-width:800px;
width:100%;
/*900px pour les voyelles mais 800px pour les autres tableaux eg consonnes pas de min-width car table-fixed est out*/
margin:30px auto 20px;
order:1px solid #ff7b25;
text-align:center;
background-color: white;


}	


.voyelles th{

font-size:12px;
border:1px solid #555;
vertical-align:top;


}	

	
.voyelles td{
border:1px solid #555;
text-align:center;
}

	

/* tableaux de 5 mots exemples ou des conjugaisons françaises*/	

/*darkslategray*/


.ocoa {
max-width: 100%;
white-space: nowrap;
overflow-x:auto;
margin:10px auto 40px;
border:1px solid #ddd;
}

table.amon-ra{	
border-collapse:collapse;
table-layout:auto;
min-width:170px;
float: left;
margin:10px ;
clear:right;
white-space: nowrap;
background:#fff5e6;
text-align:left;
}


table.amon-ra td{
padding: 5px 10px;
border: 1px solid white ;
}

	
table.amon-ra tr:first-child{
background:#fbeaee;florawhite;#fefbd8;
font-weight: bold;

}

	
able.amon-ra tr:last-child{	
background:#fbeaee;florawhite;#fefbd8;
order:1px solid #ddd;
isplay:none;
}


table.amon-ra caption{	
text-align:left;
padding-left:40px;
}


.thru{
background:#f1eff5;
}


table.hathor td, table.hathor caption {

padding-left:2px;
}

.rose1{

etter-spacing:1px;
font-family:monospace;
font-size:17px;
}
	
.rose, .rose1{

etter-spacing:1px;
font-family:monospace;
ont-size:16px;
/*tahoma, helvetica, sans-serif, Armata, "Lucida Sans", sans-serif;

color:#666;
color: #d64161;
color:#6b5b95;
color: #ff7b25;*/
	}	




table.helios{

border-collapse:collapse;
table-layout:auto;
min-width:200px;
background:#fbeaee;
float: left;
margin:10px ;
order:1px solid turquoise;
clear:right;
white-space: nowrap;
}

.elios:nth-child(5n +1){clear:left;}


.helios td:nth-child(1){font-weight:900;color: #ff7b25;}


	
table.large{
min-width:250px;
}

	
table.larger{
min-width:300px;
}

table.helios caption{	
text-align:left;
text-transform: capitalize;
}

		
table.long{	
margin-bottom:10px;
order:1px solid turquoise;
border-collapse:collapse;
border-spacing: 15px 0;
display:inline-table;
}
	
	
	
table.long td{
order:1px solid turquoise;
}
	
.inside{
width:100%;
overflow-x:auto;
order: 1px solid orange;
}


.helios th{
background:#fbeaee;florawhite;#fefbd8;
display:none;
height:30px;
ext-align:left;
}


.helios td{
border-bottom: 1px solid white;
height:60px;
padding:10px;
vertical-align:bottom;
}


table.helios tr td:first-child{
olor:#d64161;
}

	

table.aoriste tr:first-child, table.elios tr:first-child, table.imparfait tr:first-child{
background:#fbeaee;florawhite;#fefbd8;
}



/* tableaux de conjugaisons françaises*/	


table.aoriste{
idth:170px;
margin: 10px 10px 10px 0;
float:left;
ont-size:14px;

}

.aoriste th, .imparfait th{
border:1px solid #ddd;
padding: 10px;
text-align:left;
eight:30px;
background:#fbeaee;florawhite;#fefbd8;
}

	
.aoriste td, .imparfait td {
padding: 10px;
border:1px solid #ddd;
eight:35px;
}
	


table.imparfait{
idth:220px;
margin: 10px 20px 10px 0;
float:left;
}


.imparfait td, .imparfait th{
height:30px;
ont-size:15px;

}

.aoriste caption, .imparfait caption{
text-align:left;
	}


.cecle{
width:33%;
float:left;
margin-bottom:40px;
order:1px solid dodgerblue;


}	
	
/*
table.helios tr:nth-child(even){background-color:#FDF5E2}

table.helios tr:nth-child(odd){background-color:#FEE8C1}

table.helios tr:first-child{
	text-align:left;
	background-color:#FCD999;	
	height:70px;
	}*/
	

.start{
background:#deeaee;
padding:5px 10px;
font-size:15px;

	
}	
	

.rien th, .rien td{
border:  none;
order-style:dotted;
}
	
.alles th, .alles td{
border:1px solid #6D6F68; 
}
	
	
.trtle{
background-color:#ddd;
}



	
/*temps*/


.ps, .is, .ii, .urple {
fnt-style:italic;
}	

.is{
background:#fff0e6;
}

.ii{	
background:#f1eff5
}

.ps{	
background:#f6d5dc;
}


.orangeclair{
background:#fff5e6;
}

.purple{
color:;
}

.song{
letter-spacing:1px;
font-family:monospace;
}	
	
.i{
background:cornsilk;
}

.oriste{
background:lightyellow;
}

.s{
background:snow;	
}
	

	
.down{
font-size:12px;
}

.soft{
font-style:oblique;
}

	
#boy.rose, #boy.voyelle td{	
font-size:16px;
	}

	
.letters label {
float: left;
padding: 0px;
text-decoration: none;
transition: background-color .3s;
utline:1px solid #ddd;
margin-right: 4px;
	}	

.letters a {
color: inherit;
float: left;
adding: 8px 12px;
txt-decoration: none;
transition: background-color .3s;
}

.letters a.active {
background-color: dodgerblue;
color: white;
}

.letters a:hover:not(.active) {
background-color: lavender;
}


.quart{
list-style-position:inside;
adding:20px;
ont-size:15px;
background:lavender;
background:#fbeaee;florawhite;#fefbd8;
utline:1px solid darkslateblue;
background-clip:content-box;
}



.tiers1{
margin:0px 20px 0px  0;
clear:both;
utline:1px solid coral;

padding:10px;
}

	
.tiers2{
argin-bottom:10px;
background:#fbeaee;
background-color: #375493;
/*florawhite;*/

padding:10px;
font-size:15px;
}



/* tableaux de prononciation japonais*/
 
table.kaze{
border-collapse:collapse;
table-layout:auto;
border: 1px solid #555;
margin: 0px auto 10px;
text-align:center;
width:100%;
font-size:25px;

}



.kaze td{
border: 1px solid #555;
border-style: dashed solid;
height:50px;
padding:10px 10px 7px;
vertical-align:top;
vertical-align: baseline;
}

	
	
.iragana{
float:left;
width:48%;
}

.atakana{
float:right;
width:48%;
}

.intro{
margin-bottom:40px;
font-size:14px;
list-style-position:inside;
	
}


.in{
margin-bottom:40px;
list-style-position:inside;
	
}

[class*="col-12"] {

order:1px solid magenta;
argin:10px 0;
border-radius:8px;
}

.showcase{
margin:20px 0;
border: 1px solid  #ddd;
box-shadow: 4px 4px 5px #BABABA;
border-radius:8px;
overflow:auto;
}

.hiragana, .katakana{
clear:both;
}


.content4{
padding:10px;
min-height:400px;
border: 1px solid  #ddd;
box-shadow: 4px 4px 5px #BABABA;
border-radius:8px;
overflow:auto;
}


.content4 h1 a{
color:#DA2622;
text-decoration:none;
}	

.content4 h1 a:hover{
color:#DA2622;magenta;
text-decoration:underline;
color:steelblue;
}	

/* For mobile phones: */

[class*="col-"] {
width: 100%;

}


}

@media only screen and (min-width: 600px) {
   /* For tablets: 600px*/
 	.col-s-1 {width: 8.33%;}
   .col-s-2 {width: 16.66%;}
   .col-s-3 {width: 25%;}
 	.col-s-4 {width: 33.33%;}
 	.col-s-5 {width: 41.66%;}
   .col-s-6 {width: 50%;}
   .col-s-7 {width: 58.33%;}
   .col-s-8 {width: 66.66%;}
   .col-s-9 {width: 75%;}
   .col-s-10 {width: 83.33%;}
   .col-s-11 {width: 91.66%;}
  	.col-s-12 {width: 100%;}

  /* table.voyelles{min-width:800px;}*/

	}	



@media only screen and (min-width: 960px) {

#wrapper{

   
}
    /* For desktop: 960px 768px*/
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

   /*table.voyelles{width:100%;}*/

}

	
@media only screen and (orientation: landscape) {

    	body {
    		background-color: lightblue;#F5F5F5;
    	}
}

/*Menu*/


.topnav {
  overflow: hidden;
  background-color:#6b5b95;
  margin:0;

  
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  ext-transform: uppercase;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    utline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}



table.rght{

	margin-left:320px;
}


@media screen and (max-width: 450px) {
	
	.main {
		width: 85%;
		margin:20px auto;
   	 }

	table.right{
		margin-left:0px;
	}
	
	table.clear{
		clear:none;
	}
	

	.quart, .tiers1, .tiers2, .cercle{
		float:left;
		width:100%;
		adding:0;
		argin:0;
	}
	
	.content4{
		float:none;
		width:100%;
		margin:20px auto;
	}
	
	table.aoriste, table.imparfait {
		width:270px;
	}
	
	table.aoriste td,  table.imparfait td{
		padding:5px 30px;
	}
	
	table.aoriste, table.imparfait{
		float:none;
		margin:20px auto;
	}
	
	

	
/* menu*/	
	
	
	.topnav a:not(:first-child), .dropdown .dropbtn {
    		display: none;
  	}

	.topnav a.icon {
    		float: right;
    		display: block;
  	}
	
}/*fin de @media screen and (max-width: 450px)*/



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

   .topnav.responsive {
		position: relative;
	}

  	.topnav.responsive .icon {
    		position: absolute;
   		 right: 0;
    		top: 0;
 	 }

  	.topnav.responsive a {
    		float: none;
    		display: block;
    		text-align: left;
  	}

  	.topnav.responsive .dropdown {
		float: none;
	}

  	.topnav.responsive .dropdown-content {
		position: relative;
	}

  	.topnav.responsive .dropdown .dropbtn {
    		display: block;
    		width: 100%;
    		text-align: left;
  	}

}