@media all {
	html {
		height: 100%;
		overflow: hidden;
	}
	a {
		color: #000;
		text-decoration: none;
	}
	body {
		height: 98%;
		font-family: Arial;
		font-size: 11pt;
		background: rgb(2,0,36);
		background: linear-gradient(343deg, rgba(2,0,36,1) 0%, rgba(121,41,9,1) 35%, rgba(161,113,76,1) 100%);
	}
	img.btnclose {
		width: 30px;
		position: absolute;
		right: 5px;
		top: 5px;
		z-index: 51;
	}
	.col {
		display: flex;
		flex-direction: column;
	}
	/* login */
	.loginframe {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.loginbox {
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(39,97,125);
		background: linear-gradient(336deg, rgba(39,97,125,1) 21%, rgba(0,7,36,1) 65%, rgba(76,98,161,1) 79%);
		color: #fff;
		padding: 22px;
		border-radius: 15px;
		border: 2px solid #444;
	}
	/* search */
	.search {
		position: fixed;
		top: 0;
		right: 0;
		border-left: 2px solid;
		border-bottom: 2px solid;
		border-radius: 0 0 0 15px;
		box-shadow: 0 0 10px 5px #000;
		width: 40px;
		height: 40px;
		overflow: hidden;
		transition: width 0.5s, height 0.7s;
		transition-timing-function: ease;
		z-index: 2;
		background-color: white;
	}
	.search:hover {
		width: 320px;
		height: 95%;
		overflow: auto;
	}
	.search .heading {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}
	.search .heading .form {
		padding: 5px;
		border: 1px solid;
	}
	.search .heading input {
		border: none;
		border-bottom: 1px solid grey;
		width: 95%;
		margin: 5px;
		background-color: #c3d6cc;
		display: none;
	}
	.search .heading img {
		width: 30px;
		margin: 3px;
		cursor: pointer;
	}
	.opensearch {
		width: 320px;
	}
	.search .result {
		margin: 5px;
		border-top: 1px solid;
		
	}
	.search .result .row {
		display: flex;
		border: 1px solid;
		margin: 3px 0;
		border-radius: 5px;
		background-color: #f3f1d8;
		width: 290px;
		cursor: pointer;
	}
	.search .result .row:hover {
		background-color: #dbd6a9;
	}
	.search .result .title {
		border-bottom: 1px solid lightgrey;
	}
	.search .result .sentence {
		font-weight: bold;
		color: #4c0c14;
	}
	.search .result .date {
		width: 80px;
		border-left: 1px solid;
		padding: 2px;
	}
	.search .result .titles {
		width: 200px;
		margin-right: 5px;
	}
	.search .result .title {
		padding: 2px;
	}
	.search .result .subtitle {
		padding: 2px;
	}
	/* menu */
	.menu {
		position: fixed;
		top: 0;
		left: 0;
		border-right: 2px solid;
		border-bottom: 2px solid;
		border-radius: 0 0 15px 0;
		box-shadow: 0 0 10px 5px #000;
		width: 40px;
		height: 40px;
		overflow: hidden;
		transition: width 0.5s, height 0.7s;
		transition-timing-function: ease;
		z-index: 2;
		background-color: #fff;
	}
	.menu img {
		width: 30px;
		padding: 4px;
		cursor: pointer;
	}
	.menu:hover {
		height: 250px;
	}
	/* body */
	.mainbody {
		margin: 5px 50px;
		height: 95%;
		overflow: auto;
		padding-bottom: 0;
		padding: 5px;
		background-color: #979281;
		border-radius: 10px;
		box-shadow: 0 0 10px 5px #000;
	}
	/* entête */
	.mainbody .heading {
		height: 40px;
		color: #fff;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px;
	}
	.mainbody .heading h1 {
		margin: 0;
		font-size: 16pt;
		text-shadow: 0 0 3px #000;
	}
	/* mainbody */
	.mainbody .main {
		margin: 10px 0;
	}
	/* mainbody sous menu */
	.mainbody .header {
		border: 1px solid #000;
		border-radius: 10px;
		background-color: #b29b78;
		margin: 10px 0;
		min-height: 35px;
		display: flex;
		justify-content: flex-start;
	}
	.mainbody .header #articlesmenu, .mainbody .header #categoriemenu, .mainbody .header #auteurmenu, .mainbody .header #usersubmenu {
		display: none;
	}
	.mainbody .header img {
		width: 30px;
		margin: 5px;
		cursor: pointer;
	}
	.mainbody .header #datelist {
		position: absolute;
		width: 200px;
		display: none;
		flex-wrap: wrap;
		background-color: #fff;
		border: 1px solid #000;
		border-radius: 0 0 8px 8px;
	}
	.mainbody .header #datelist a {
		margin: 2px 4px 2px 2px;
		cursor: pointer;
	}
	/* mainbody body */
	.mainbody .body {
		margin: 10px 0;
		min-height: 35px;
		background-color: #dfc8a4;
		border: 1px solid #514611;
		border-radius: 10px;
		overflow: auto;
	}
	.mainbody .body #bodyframe {
		padding: 10px;
		overflow: auto;
		background: rgb(39,97,125);
		background: linear-gradient(343deg, rgba(39,97,125,1) 35%, rgba(0,7,36,1) 75%, rgba(76,98,161,1) 100%);
	}
	.mainbody .body #bodyframe .row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 2px;
	}
	.mainbody .body #bodyframe .row .cell {
		border: 1px solid #000;
		background-color: #f9e5c7;
		padding: 3px;
		cursor: pointer;
		border-radius: 5px;
	}

	.mainbody .body #bodyframe .head {
		font-weight: bold;
		color: #fff;
		text-shadow: 0 0 3px #000;
	}
	.mainbody .body #bodyframe .row .titles {
		width: 50%;
		min-width: 195px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.mainbody .body #bodyframe .row .titles .title {
		border-bottom: 0.5px solid grey;
	}
	.mainbody .body #bodyframe .row .cataut {
		min-width: 195px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.mainbody .body #bodyframe .row .cataut .categorie {
		border-bottom: 0.5px solid grey;
		display: flex;
		flex-direction: column;
	}
	.mainbody .body .bodyframe .row .date {
		width: 80px;
		text-align: right;
	}
	.mainbody .body .bodyframe .delete {
		width: 35px;
		padding: 2px;
	}
	.mainbody .body .bodyframe .delete img {
		width: 30px;
		cursor: pointer;
		z-index: 3;
	}
	.mainbody .footer {
		margin: 10px 0;
		border: 1px solid #514611;
		border-radius: 10px;
		overflow: hidden;
		min-height: 35px;
		background-color: #b29b78;
	}
	/* Footer */
	.mainbody .footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		padding: 10px;
	}
	.mainbody .footer .centerfooter {
		display: flex;
		justify-content: space-around;
	}
	.mainbody .footer .centerfooter img {
		width: 50px;
		margin: 0 5px;
	}
	/* forms */
	.form {
		position: absolute;
		top: 10px;
		left: 50px;
		right: 50px;
		border: 2px solid #000;
		z-index: 3;
		background-color: #fff;
		border-radius: 15px;
		box-shadow: 0 0 10px;
		display: none;
		overflow: hidden;
		height: 95%;
	}
	.form input {
		border: none;
		border-bottom: 1px solid #000;
		background-color: #c3d6cc;
		font-weight: bold;
		padding: 3px;
		margin: 3px;
	}
	.form .header {
		background-color: #979281;
		color: #fff;
		text-align: center;
		border: 1px solid #514611;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 40px;
		position: relative;
	}
	.form .header h2 {
		margin-block-start: 0em;
		margin-block-end: 0em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		text-shadow: 0 0 3px #000;
	}
	.form .body {
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		overflow: auto;
		position: relative;
		height: 90%;
	}
	.form .body div {
		margin: 5px;
	}
	.form .body .titles {
		width: 30%;
		min-width: 220px;
	}
	.form .body .titles input {
		width: 98%;
	}
	.form .body .titles #titlesearch {
		position: absolute;
		width: 300px;
		display: none;
		flex-wrap: wrap;
		background-color: #fff;
		border: 1px solid #000;
		border-radius: 0 0 8px 8px;
		margin-top: 49px;
		margin-left: 3px;
	}
	.form .body .titles #titlesearch .sentence {
		font-weight: bold;
	}
	.form .body .titles #titlesearch .l1 {
		background-color: #fef2dc;
		width: 100%;
	}
	.form .body .titles #titlesearch .l2 {
		background-color: #cdc5b7;
		width: 100%;
	}
	.form .body .auteurscategories img {
		width: 15px;
		padding-left: 5px;
	}
	.form .body .auteurscategories .formcataut {
		display: none;
		flex-wrap: wrap;
		padding: 10px;
		background-color: #fff;
		border: 1px solid #000;
	}
	.form .published {
		display: flex;
		align-items: center;
	}
	.form .published img {
		width: 15px;
		height: 15px;
	}
	.form .language {
		display: flex;
		align-items: center;
	}
	.form .language img {
		width: 15px;
		height: 15px;
		margin-right: 3px;
	}
	.form .body .pagedate input {
		width: 90px;
		text-align: right;
	}
	.form .body .autredate input {
		width: 90px;
		text-align: right;
	}
	.form .body .autredateitem img {
		width: 20px;
	}
	.form .body label {
		padding: 3px;
		font-weight: bold;
	}
	.form .body .note {
		width: 100%;
	}
	.form .body .note textarea {
		background-color: #c3d6cc;
		padding: 3px;
		border-radius: 5px;
		border: 1px solid #000;
		height: 50px;
	}
	.form .body .texte {
		width: 100%;
		padding-bottom: 30px;
	}
	.form .body .texte textarea {
		background-color: #c3d6cc;
		padding: 3px;
		border-radius: 5px;
		border: 1px solid #000;
		height: 300px;
	}
	.form .body .list {
		display: flex;
		justify-content: flex-start;
		overflow: auto;
		max-width: 1200px;
		flex-wrap: wrap;
	}
	.form .body .list .row {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: space-between;
		border: 1px solid #000;
		border-radius: 5px;
		margin: 3px 0;
		padding: 3px;
		background-color: #cdc5b7;
		justify-content: space-between;
		cursor: pointer;
		width: 150px;
		padding: 0 7px 0 4px;
		margin: 3px;
	}

	/* messagebox */
	.message {
		min-height: 50px;
		display: none;
		position: fixed;
		top: 5px;
		left: 50px;
		right: 50px;
		background-color: #f00;
		color: #fff;
		border: 2px solid #000;
		border-radius: 10px;
		box-shadow: 0 0 10px 10px grey;
		z-index: 50;
		padding: 10px
	}
	/* Stats */
	.stats {
		display: flex;
		flex-direction: column;
		color: #fff;
	}
}
/*@media (min-height: 600px) and (max-height: 800px) {
	.form .body .list {
		height: 450px;
	}

}
@media (min-height: 300px) and (max-height: 600px) {
	.form .body .list {
		height: 250px;
	}

}
@media (max-height: 300px) {
	.form .body .list {
		height: 150px;
	}

}*/