@font-face
{
	font-family:'opensans';
	src:url('l/OpenSans-Regular-webfont.woff');
	font-weight:normal;
	font-style:normal;
}

:root{--c1:#1e65a8;--c2:#e8eff6;}

*{margin:0;padding:0;box-sizing:border-box;font-family:opensans;}
a{color:inherit;text-decoration:inherit;}
i{color:inherit;text-decoration:inherit;}
b{color:inherit;text-decoration:inherit;}

body{font-family:opensans;}
body>header{position:relative;width:100%;}
body>header>nav>a{font-size:0.7em;padding:0 5px;border:solid 1px grey;background:#eeeeee;cursor:pointer;}

body>header>aside{position:absolute;width:50%;top:0;right:0;font-weight:bold;text-align:center;font-size:1.3em;}
body>header>aside>i{font-size:0.8em;opacity:0.0;cursor:pointer;transition:opacity 0.5s;}
body>header>aside:hover>i{opacity:1.0;}
body>header>footer{position:absolute;width:50%;top:22px;right:0;text-align:center;font-size:0.9em;}

#Modele
{
	position:fixed;
	display:block;
	width:calc(100% - 8px);
	-height:calc(100vh - 80px);
	top:40px;
	bottom:12px;
	margin:4px;
	background:#f0f0f0;
	border:solid 2px grey;
	overflow:auto;
	white-space:nowrap;
}

#Modele>canvas
{
	
}

.Entite
{
	display:inline-block;
	position:absolute;
}

.Entite>aside
{
	display:block;
	position:absolute;
	width:80px;
	top:-18px;
	-left:-10px;
	padding:0 0 3px 10px;
	font-size:0.7em;
	opacity:0;
	transition:opacity 0.5s;
}

.Entite>aside>i
{
	cursor:pointer;
	margin-right:10px;
}


.Entite:hover>aside
{
	-display:block;
	opacity:1;
}

.Entite>header
{
	border:solid 1px black;
	border-bottom:none;
	background:#ffdf80;
	padding:3px 13px;
	font-weight:bold;
	text-align:center;
}

.Entite>header>input
{
	display:inline-block;
	border:none;
	background:transparent;
	border-bottom:dashed 1px black;
	outline:none;
	-padding:3px;
	width:100%;
	font-weight:bold;
	font-size:1em;
}

.Entite>.Attributs input
{
	border:none;
	outline:none;
	background:transparent;
	border-bottom:dashed 1px black;
	font-size:1em;
}


.Association
{
	display:inline-block;
	position:absolute;
	border-radius:20px;
}

.Association>aside
{
	display:block;
	position:absolute;
	width:80px;
	top:-18px;
	-left:-10px;
	padding:0 0 3px 10px;
	font-size:0.7em;
	opacity:0;
	transition:opacity 0.5s;
}

.Association>aside>i
{
	cursor:pointer;
	margin-right:10px;
}


.Association:hover>aside
{
	-display:block;
	opacity:1;
}

.Association>header
{
	border:solid 1px black;
	border-bottom:none;
	background:#00d7ff;
	padding:3px 13px;
	font-weight:bold;
	text-align:center;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
}

.Association>header>input
{
	display:inline-block;
	border:none;
	background:transparent;
	border-bottom:dashed 1px black;
	outline:none;
	-padding:3px;
	width:100%;
	font-weight:bold;
	font-size:1em;
}

.Association>.Attributs input
{
	border:none;
	outline:none;
	background:transparent;
	border-bottom:dashed 1px black;
	font-size:1em;
}

.Entite .Attributs
{
	background:#ffff80;
}

.Association .Attributs
{
	background:#00f7ff;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	min-height:30px;
}

.Attributs
{
	border:solid 1px black;
	padding:3px;
	font-weight:normal;
}

.Attributs>.Attribut>header>input
{
	display:inline-block;
	border:none;
	background:transparent;
	border-bottom:dashed 1px black;
	outline:none;
	-padding:3px;
	width:100%;
	font-size:1em;
}

.Attribut>aside
{
	display:block;
	position:absolute;
	padding:4px 0 3px 10px;
	font-size:0.7em;
	opacity:0;
	transition:opacity 0.5s;
}

.Attribut>aside>i
{
	cursor:pointer;
	margin-right:8px;
}

.Entite .Attribut>aside
{
	width:80px;
	left:-63px;
}

.Association .Attribut>aside
{
	width:60px;
	left:-43px;
}

.Attribut:hover>aside
{
	opacity:1;
}

.Attribut.Cle
{
	font-weight:bold;
	text-decoration:underline;
}

.Cardinalites
{
	position:absolute;
	background:#f0f0f0;
	font-size:0.8em;
}

.Cardinalites>aside
{
	display:block;
	position:absolute;
	width:80px;
	top:-18px;
	left:-10px;
	padding:0 0 3px 10px;
	font-size:0.7em;
	opacity:0;
	transition:opacity 0.5s;
}

.Cardinalites>aside>i
{
	cursor:pointer;
	margin-right:10px;
}

.Cardinalites:hover>aside
{
	-display:block;
	opacity:1;
}

body>footer
{
	display:flex;
	position:fixed;
	bottom:0;
	width:100%;
	height:20px;
	padding:4px;
	font-size:0.7em;
	color:grey;
}

body>footer>div:first-child
{
	width:50%;
}

body>footer>div:last-child
{
	width:50%;
	text-align:right;
}