* {
	margin:0; padding:0;border:none;
}
html,textarea {
	font-family:Arial, Helvetica, sans-serif;
	font-size:90%;
}
body {
	overflow-y:scroll;
}
footer {
	float:right;
}
footer img {
	border-top-left-radius:120px; 
	border-bottom-left-radius:120px;
}
h1 {
	margin:0 auto 20px;
}
a {
	outline:none;text-decoration:none;
}
li {
	list-style-type:none;
}
input[type=submit]:hover,
button:hover {
	cursor:pointer;
}
input[type=submit] {
	border-top-right-radius : 15px;	
	border-bottom-left-radius : 15px;	
}
header 			{
	position:fixed; top:0;left:0;
	padding:10px 0 0 10px;
	background-color:white;
	z-index:9;
}
nav a:hover, 
nav button:hover {
	/*opacity:0.5;*/
	-webkit-filter: saturate(500%);
    filter: saturate(500%);
}
nav button {
	background-color:transparent;
	width:50px;height:50px;
	box-shadow:none;
}
nav li {
	border:1px solid rgba(80,112,109,1.00);
	margin:0 10px 10px 0; padding:5px;
}
fieldset {
	margin:15px;padding:5px;
	min-width:400px;
}
legend {
	padding:0 15px;
}
/***************************************/
/*  Partitions                         */
/***************************************/
.cartouche, .parole {
	position:relative;
}
.parole fieldset{min-width:200px;display:inline-block;}
.parole div {display:inline-block;vertical-align:middle;}
.parole span {display:block;vertical-align:top;width:100px;}
.parole input[type=checkbox] {margin-right:5px;}
.parole img {vertical-align:middle;margin-left:5px;}
.auteurs + img, .lien img {
	border-top-right-radius:8px;
	float:right;
	margin-top:-5px;
	margin-right:5px;
	margin-bottom:20px;
}

.auteurs {
	float:left;
}
table {
	clear:both;
	margin:auto;
}
.cartouche table {
	border-collapse: separate;
    border-spacing: 10px; 
}
span img,
.cartouche td {
	border-radius :8px;
	z-index:8;
	width:60px;	
	height:60px;
}
.cartouche td a {
	display:block;
	width:60px;	
	height:60px;
}
.pdf td {background-image:url(../img/pdf.png);background-position:center center;}
.mp3 td {background-image:url(../img/mp3.png);background-position:center center;}
.mp4 td {background-image:url(../img/mp4.png);background-position:center center;}

.mscz td a{
	margin:15px auto 0;
}
#news {
	width:500px;
	height:80px;
	overflow-Y:scroll;
	margin: 0 auto 20px;
	/*border-top:1px solid #F3F3F3;*/
	/*border-left:1px solid #F3F3F3;*/
	padding-left:5px;
}
#news ul{
	display:inline-block;
	vertical-align:top;
}
#news li li{
	padding-left: 15px;
	font-style:italic;
}
#search {
	height:80px;
	z-index:9;
}
/***************************************/
/*  Contact                            */
/***************************************/
textarea {
	resize:vertical;
	height:150px;
}
select,
textarea,
input {
	padding:3px 1%;
	margin: 5px 1%;
	box-shadow:2px 2px 2px rgba(80,112,109,0.8);
}
input[type=tel],
input[type=mail],
.simple {
	width:46%;
}
textarea,
.double {
	width:96%;
}
.no {
	width:12%;
}
.ville {
	width:80%;
}
.contact fieldset {
	margin:50px auto;
	max-width:800px;
}

.contact input[type=submit] {/*
	border-top-left-radius:15px;
	border-bottom-right-radius:15px;
	border:1px solid rgba(80,112,109,1.00);*/
}
.contact input[type=submit]:hover {
	/*color:rgba(80,112,109,1.00);
	cursor:pointer;*/
}
/***************************************/
/*  Accueil                            */
/***************************************/
.index div {
	display:inline-block;
	width:40%;
	vertical-align:middle;	
}
.index input[type=text],
.index input[type=password] {	
	width:98%;
}
.index input[type=text] {
	margin:70px 0 20px;
}
.index input[type=password] {	
	margin:20px 0 30px;
}
.index input[type=submit] {	
	margin:20px 0 70px;
}
.index {
	width:90%;
	margin:auto;
	background: -moz-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.9), rgba(255,255,255,0.1)),url(../img/zik.png) no-repeat center center;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.9), rgba(255,255,255,0.1)),url(../img/zik.png) no-repeat center center;
	background: -o-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.9), rgba(255,255,255,0.1)),url(../img/zik.png) no-repeat center center;
	background:-ms-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.9), rgba(255,255,255,0.1)),url(../img/zik.png) no-repeat center center;
	background: linear-gradient(to right,rgba(255,255,255,0.1), rgba(255,255,255,0.9), rgba(255,255,255,0.1)),url(../img/zik.png) no-repeat center center;
	background-size:100% 100%;
}
/***************************************/
/*  Paroles                            */
/***************************************/
.marlyse {
	padding:5px;
	margin:40px auto 60px;
	width:80%;
}
.marlyse h2 {font-size:1.2em;}
.marlyse a {
	display:inline-block;
	padding:6px; 
	/*border:1px solid rgba(80,112,109,0.50);*/
	background-color:rgba(80,112,109,0.10);
	margin:7px;
	color:black;
}
.marlyse a:hover{
	background-color:rgba(80,112,109,0.20);
}
.marlyse p {margin-bottom:10px;}
/***************************************/
/*  Gestion                            */
/***************************************/
.gestion th {
	padding:3px 5px;
}
.gestion td {
	padding:5px;
}
.gestion button {
	border-radius:22px;	
	padding:5px;
}
.titre {
	width:200px;
}
/***************************************/
/*  Aide                               */
/***************************************/
.aide img {
	vertical-align:middle;
	}
span img {
	border:none;
	background-color:rgba(190,200,150,1.00);
}

.aide ul { 
	width:80%;
	margin:auto;
}

.aide span {
	display:inline-block;
	vertical-align:middle;
	padding:5px;
}
/***************************************/
/*  Catégories                         */
/***************************************/
.tab_cat {width:80%;}
.th_10 {width:10%;}
.th_20 {width:20%;}
.th_70 {width:70%;}
.td_cat {width:50px;text-align:right;}
.cat_nom {width:95%;}
/***************************************/
/*  Couleurs                           */
/***************************************/
.contact input[type=submit],
h1,
legend,
.marlyse h2{
	color:rgba(80,112,109,1.00);
}
.alt {color:rgba(230,150,100,1.00);}
.bas {color:rgba(127,164,127,1.00);}
.sop {color:rgba(250,170,120,1.00);}
.ten {color:rgba(140,180,180,1.00);}
.tou {color:rgba(190,200,150,1.00);}
.gestion th {
	color:white;	
}
.error {color:red;}
.gris 		{background-color:rgba(0,0,0,0.05);}
.pdf .alto 	{background-color:rgba(230,190,100,1.00);}
.pdf .bass 	{background-color:rgba(180,220,180,1.00);}
.pdf .sopra {background-color:rgba(250,210,120,1.00);}
.pdf .tenor {background-color:rgba(190,230,220,1.00);}
.pdf .tous 	{background-color:rgba(220,230,190,1.00);}
.mp3 .alto 	{background-color:rgba(230,170,100,1.00);}
.mp3 .bass 	{background-color:rgba(150,190,150,1.00);}
.mp3 .sopra {background-color:rgba(250,190,120,1.00);}
.mp3 .tenor {background-color:rgba(160,200,200,1.00);}
.mp3 .tous 	{background-color:rgba(200,215,170,1.00);}
.mp4 .alto	{background-color:rgba(230,150,100,1.00);}
.mp4 .bass 	{background-color:rgba(127,164,127,1.00);}
.mp4 .sopra {background-color:rgba(250,170,120,1.00);}
.mp4 .tenor {background-color:rgba(140,180,180,1.00);}
.mp4 .tous 	{background-color:rgba(190,200,150,1.00);}

#news, fieldset, .marlyse {
	background-color:rgba(40,150,150,0.03);
}
.gestion th {
	background-color:rgba(80,112,109,1.00);	
}
.gestion td {
	background-color:rgba(80,112,109,0.2);
}
.gestion button:hover,
.pdf .alto:hover,
.pdf .bass:hover,
.pdf .sopra:hover,
.pdf .tenor:hover,
.pdf .tous:hover,
.mp3 .alto:hover,
.mp3 .bass:hover,
.mp3 .sopra:hover,
.mp3 .tenor:hover,
.mp3 .tous:hover,
.contact input[type=submit]:hover,
.mp4 .alto:hover,
.mp4 .bass:hover,
.mp4 .sopra:hover,
.mp4 .tenor:hover,
.mp4 .tous:hover {
    -webkit-filter: saturate(500%);
    filter: saturate(500%);
}
/***************************************/
/*  Fonts                              */
/***************************************/
h1,
.index input {
	font-size:1.5em;
}
.cartouche td{
	font-size:0.8em;
}
.gestion th {
	font-size:0.9em;
}
.error,
.contact input[type=submit] {
	font-weight:bold;
}
/***************************************/
/*  Shadows                            */
/***************************************/
#news, span img,
.auteurs + img,
.lien img,
.cartouche td,
nav li,
fieldset,
.gestion button,
.marlyse{
	box-shadow:1px 1px 1px rgba(0,30,30,0.5);
}
h1,
legend {
	text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
.mscz td {box-shadow:none;}
/***************************************/
/*  Border                             */
/***************************************/
nav li,
fieldset,
.marlyse{
	border-radius:15px;
}
/***************************************/
/*  Alignement                         */
/***************************************/
#search {
	position:relative;
	float:right;
}

.label {
	display:inline-block;
	width:80px;
	margin:4px 0;
    cursor: pointer;
    font-weight: bold;
	box-shadow:1px 1px 1px black;
	padding:2px 5px;
	border-top:1px solid white;
	border-left:1px solid white;
	color:rgba(80,112,109,1.00);
}
.label:hover {
    color: #25a5c4;
	background-color:rgba(0,0,0,0.2);
}
input[type=file] {
    display: none;
}
/***************************************/
/*  Textes                             */
/***************************************/
fieldset td,
.aide ul,
#search,
#news,
.auteurs,
.parole fieldset,
.gauche				{ text-align:left; }
#content,
nav li,
marlyse 			{ text-align:center; }

.ok {background-color:rgba(0,0,0,0.1);}
/****************************/
.grid_1 {
	display:grid; 
	grid-gap:5px;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr) );
}
.grid-box {background-color:rgba(80,112,109,0.9);color: #fff;border-radius: 5px;padding: 5px;}
.nok {background-color:rgba(255,0,0,0.4)}
/*********************************/
@media only screen
and (orientation : landscape) {
	#content {
		margin:68px 100px 50px;
	}
}
@media only screen
and (orientation : portrait) {
	#content {
		margin:90px 1% 20px;
	}
	header{
		background:-webkit-linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1)70px,rgba(255,255,255,0.5));
		background:-o-linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1)70px,rgba(255,255,255,0.5));
		background:-moz-linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1)70px,rgba(255,255,255,0.5));
		background:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1)70px,rgba(255,255,255,0.5));
	}
	nav li {display:inline-block;}
}