芝麻web文件管理V1.00

编辑当前文件:/home/asmplong/www/sdfoiuhzufgh/css/style.css

/* ------------------------------------------------------------------------ */
/* -------------------------------- POLICES ------------------------------- */
/* ------------------------------------------------------------------------ */

@font-face {
    font-family: 'alpha';
    src: url('police/alpha_echo-webfont/alpha_echo-webfont.eot');
    src: url('police/alpha_echo-webfont/alpha_echo-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/alpha_echo-webfont/alpha_echo-webfont.woff') format('woff'),
         url('police/alpha_echo-webfont/alpha_echo-webfont.ttf') format('truetype'),
         url('police/alpha_echo-webfont/alpha_echo-webfont.svg#alpha_echoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'balooregular';
    src: url('police/Baloo-Regular-webfont/Baloo-Regular-webfont.eot');
    src: url('police/Baloo-Regular-webfont/Baloo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/Baloo-Regular-webfont/Baloo-Regular-webfont.woff') format('woff'),
         url('police/Baloo-Regular-webfont/Baloo-Regular-webfont.ttf') format('truetype'),
         url('police/Baloo-Regular-webfont/Baloo-Regular-webfont.svg#balooregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arch';
    src: url('police/SF_Arch_Rival-webfont/SF_Arch_Rival-webfont.eot');
    src: url('police/SF_Arch_Rival-webfont/SF_Arch_Rival-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/SF_Arch_Rival-webfont/SF_Arch_Rival-webfont.woff') format('woff'),
         url('police/SF_Arch_Rival-webfont/SF_Arch_Rival-webfont.ttf') format('truetype'),
         url('police/SF_Arch_Rival-webfont/SF_Arch_Rival-webfont.svg#sf_arch_rivalregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cartoonist';
    src: url('police/SF_Cartoonist_Hand-webfont/SF_Cartoonist_Hand-webfont.eot');
    src: url('police/SF_Cartoonist_Hand-webfont/SF_Cartoonist_Hand-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/SF_Cartoonist_Hand-webfont/SF_Cartoonist_Hand-webfont.woff') format('woff'),
         url('police/SF_Cartoonist_Hand-webfont/SF_Cartoonist_Hand-webfont.ttf') format('truetype'),
         url('police/SF_Cartoonist_Hand-webfont/SF_Cartoonist_Hand-webfont.svg#sf_cartoonist_handregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'acme';
    src: url('police/acme/Acme-Regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'alice';
    src: url('police/alice/Alice-Regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'comic-relief';
    src: url('police/comic-relief/ComicRelief-webfont.woff') format('woff');
}

@font-face {
    font-family: 'concert-one';
    src: url('police/concert-one/concertone-regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'lilly';
    src: url('police/Lilly/Lilly__-webfont.woff') format('woff');
}

@font-face {
    font-family: 'salsa';
    src: url('police/salsa/Salsa-Regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'wonder-comic';
    src: url('police/SF-Wonder-Comic/SF_Wonder_Comic-webfont.woff') format('woff');
}

/* ------------------------------------------------------------------------ */
/* ---------------------------- PAGE ACCEUIL ------------------------------ */
/* ------------------------------------------------------------------------ */

.index-body{
	overflow: hidden;
	margin: 0;
}

.index-fond{
	width: 100%;
	margin: auto;
	transform: rotate(0.5turn);

z-index: 0;
}

.index-bulle{
	position: absolute;

display: flex;
	flex-direction: column;
	justify-content: center;

background: url('../images/blue-200.png') no-repeat;
	background-size: cover;

z-index: 3;
}

.index-bulle a{
	display: block;

text-align: center;
	font-family: alpha;
	text-decoration: none;

color: #fff;
}

.index-bulle a:hover{
	color: #E14938;
}

.bulle-club{
	width: 200px;
	height: 200px;
	left: 10%;
	top: 50%;
}
.bulle-club a{
	font-size: 2em;
}

.bulle-contact{
	width: 150px;
	height: 150px;
	left: 40%;
	top: 30%;
}
.bulle-contact a{
	font-size: 1.6em;
}

.bulle-partenaire{
	width: 150px;
	height: 150px;
	left: 15%;
	top: 20%;
}
.bulle-partenaire a{
	font-size: 1.3em;
}

.index-logo-asm{
	max-width: 35%;
	max-height: 20%;

position: absolute;
	right: 20px;
	bottom: 20px;

z-index: 3;
	padding: 0;
}

.index-logo-asm img{
	width: 100%;
}

.bulles{
	z-index: 4;
}

.acceuil-miniature-choix{
	display: block;	
	box-shadow: 3px 3px 3px black;
	z-index: 3;

cursor: pointer;

width: 60px;
	height: 40px;
	position: absolute;
}

.choix-0{
	top: 10px;
	right: 10px;
}

.choix-0 img {
	width: 60px;
	height: 40px;
	transform: rotate(0.5turn);
}

.choix-1{
	top: 60px;
	right: 10px;
}

.choix-1 img{
	width: 60px;
	height: 40px;
}

/* ------------------------------------------------------------------------ */
/* ------------------------------- GENERAL -------------------------------- */
/* ------------------------------------------------------------------------ */

:root {
	--bleu-site: rgb(42, 141, 222);
}

body{
	margin: 0;
	font-family: cartoonist, Trebuchet MS, calibri, arial, serif;
}

.corps_site
{
	max-width: 1400px;
	margin: auto;
	text-align: justify;
}

.corps_contenu
{
	max-width: 1200px;
	margin: auto;
	word-break: break-word;
	font-size: 1.2em;
}

.center {text-align: center;}
.droite {text-align: right;}
.gauche {text-align: left;}

.block {display: block;}

.admin
{
	text-decoration: none;
	color: var(--bleu-site);
}

.souligner {text-decoration: underline;}
.bleuSite {color: var(--bleu-site);}

.boutton_val{
	background-color: var(--bleu-site);

color: #fff;
	border: 2px solid var(--bleu-site);
	border-radius: 5px;
	padding: 5px 15px;

cursor: pointer;
}
.boutton_val:hover{
	background-color: transparent;
	color: var(--bleu-site);
}

.boutton_annul{
	background-color: #E14938;

color: #fff;
	border: 2px solid #E14938;
	border-radius: 5px;
	padding: 5px 15px;

cursor: pointer;
	text-decoration: none;
}
.boutton_annul:hover{
	background-color: transparent;
	color: #E14938;
}

.zone_boutton {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.zone_boutton button{
	display: block;
	margin-bottom: 40px;
}

/* ------------------------------------------------------------------------ */
/* ---------------------------- MENU PRINCIPAL ---------------------------- */
/* ------------------------------------------------------------------------ */

.header{
	background-color: var(--bleu-site);
	font-family: alpha;
	margin-top: -18px;
}

.header-bar{
	max-width: 1200px;
	height: 150px;

display:flex;
	justify-content: space-between;
	align-items: center;

padding: 0 15px;
	margin: 0 auto 50px auto;
}

.header-logo{
	height:100px;
}

.nav-princ{
	margin-left: 20px;

display: flex;
	align-items: center;
}

.nav-princ a{
	display: inline-block;
	margin: 0 20px;

text-decoration: none;
	font-size: 1.8em;
	color: #fff;

vertical-align: top;
}

.nav-princ a:hover{
	color: #E14938;
}

.header-admin{
	color: #000000;
	text-align: right;
}

.header-admin a{
	text-decoration: none;
	font-size: 0.7em;
	color: #fff;
}

.header-admin a:hover{
	color: #E14938;
}

/*
.logos
{
	display: flex;
}

.logos a
{
	display: inline-block;
}

.logo_ville
{
	flex: 2;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.sessionMenu
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	flex: 1;
}

.sessionMenu p
{
	text-align: right;
	padding-right: 10px;
	
}

.sessionMenu span
{
	font-size: 1.2em;
}

.sessionMenu a
{
	font-size: 1em;
}

.logo_autre
{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.nav_princ
{
	display: flex;
	justify-content: space-between;
	text-decoration: none;
}

.nav_princ a
{
	text-decoration: none;
	font-family: alpha;
	font-size: 2.5em;
	text-align: right;
	color: var(--bleu-site);
}

.nav_princ a:hover
{
	background-image: url("logo.jpg"); 
	background-repeat: no-repeat;
	background-position: bottom left; 
	background-size: 80px;
	color: red;

text-shadow: 2px 2px 2px white;
}*/

/* ------------------------------------------------------------------------ */
/* ---------------------------- MENU SECONDAIRE --------------------------- */
/* ------------------------------------------------------------------------ */

.nav_sec
{
	width: 25%;
	text-align: right;
	padding-top: 20px;
	margin: 0;

display: inline-block;
	vertical-align: top;

position: sticky;
	top: 20px;

}

.nav_sec ul
{
	list-style-type: none;
}

.nav_sec li
{
	margin: 5px 10px 5px 0;
	padding: 10px;

border: 1px var(--bleu-site) solid;
	border-radius: 15px 0 0 15px;

font-size: 1.2em;
	font-family: wonder-comic;

background-image: linear-gradient(var(--bleu-site), white);
	position: relative;
	
}

.nav_sec a
{
	text-decoration: none;
	color: black;
}

.nav_sec a:hover
{
	color: #E14938;

}

.selectPresentation
{
	position: relative;
	left: 14px;
}

/* ------------------------------------------------------------------------ */
/* ----------------------------- PIED DE PAGE ----------------------------- */
/* ------------------------------------------------------------------------ */

footer
{
	text-align: center;
	color: grey;
	font-size: 0.9em;
	margin-top: 50px;
}

/* ------------------------------------------------------------------------ */
/* ----------------------------- PRESENTATION ----------------------------- */
/* ------------------------------------------------------------------------ */

.corps_pres
{
	width: 70%;
	margin: 0;
	
	padding: 20px;

text-align: justify;
	border: 1px var(--bleu-site) solid;
	border-radius: 15px;
	box-shadow: 5px 5px 15px rgb(68, 181, 230);

display: inline-block;
	vertical-align: top;
	word-break: break-word;
}

/* ------------------------------------------------------------------------ */
/* ----------------------------- ACTUALITEES ------------------------------ */
/* ------------------------------------------------------------------------ */

.corpsactu
{
	max-width: 850px;
	margin: 20px auto 20px auto;
	border: 1px var(--bleu-site) solid;
	border-radius: 15px;
	box-shadow: 5px 5px 15px rgb(68, 181, 230);
	padding: 0px 10px 10px 10px;
	color: rgb(79,129,189);
	text-align: justify;
	font-size: 1.2em;
}

.corpsactu h2
{
	padding-left: 30px;
	padding-top: 0px;
}

.corpsactu hr
{
	color: var(--bleu-site);
}

.pied_de_page_actu
{
	display: flex;
	justify-content: space-between;
	color: var(--bleu-site);
}

/* ------------------------------------------------------------------------ */
/* ------------------------------ LISTE MODIF ----------------------------- */
/* ------------------------------------------------------------------------ */

table
{
	margin: auto;
	border-collapse: collapse;
	padding: 0 10px 0 10px;
}

td
{
	border-bottom: 1px black solid;
	padding: 3px 3px 3px 3px;
}

th
{
	color: red;
}

.colonne_ordre {}
.colonne_etat {width: 100px;}
.colonne_titre {width: 250px;}
.colonne_date_modif {width: 250px;}
.colonne_nom_modif {width: 150px;}
.colonne_icone_modif {}
.colonne_icone_suppr {}

.colonne_num_actu {width: 40px;}
.colonne_date_creation {width: 150px;}
.colonne_nom_creation {width: 180px;}

.boutonValiderRapide
{
	display: inline-block;
	display: none;
	font-size: 1.4em;
}

.lienpage
{
	text-decoration: none;
	color: var(--bleu-site);
}

/* ------------------------------------------------------------------------ */
/* ----------------------------- MODIFICATION ----------------------------- */
/* ------------------------------------------------------------------------ */

fieldset
{
	border: 2px solid var(--bleu-site);
}

legend
{
	color: var(--bleu-site);
	text-decoration: underline;
}

figure
{
	margin: 1px 1px 5px 1px;
	border-bottom: 1px var(--bleu-site);
}

figcaption
{
	text-align: center;
	color: var(--bleu-site);
	font-weight: bold;
}

#mirroirModif
{
	display: none;
}

.message-alert {
	border: #C0392B 1px solid;
	background-color: #E74C3C;
	text-align: center;
	height: 25px;
	width: 80%;
	border-radius: 25px;
	margin: auto;

color: #fff;
}

/* ------------------------------------------------------------------------ */
/* -------------------------------- EDITEUR ------------------------------- */
/* ------------------------------------------------------------------------ */

#contenuModif {
	border : 1px solid var(--bleu-site);
	box-shadow: 5px 5px 15px rgb(68, 181, 230);
	border-radius: 0 0 15px 15px;
	padding: 5px 10px 5px 10px;
	margin-top: 0;
	min-height: 300px;
	font-family: cartoonist;
	margin-bottom: 30px;}

#divBoutons {
	margin-top: 10px;
	display: flex;
	justify-content: center;
	width: 70%;
	height: 30px;
	border: 1px solid var(--bleu-site);
	box-shadow: 5px 5px 15px rgb(68, 181, 230);
	border-bottom: 0;
	border-radius: 15px 15px 0 0;
	background-color: rgb(253, 252, 252);

position: sticky;
	top: 0;
	padding: 0 10px 0 10px;}

#divBoutons img {
	height: 22px;
	margin: auto 2px auto 2px;}

#divBoutons img:hover {
	margin: auto 1 auto 1;
	border: 1px solid rgb(255, 216, 23);
	border-radius: 5px;
	background-color: rgb(255, 216, 23);}

.separateur {
	margin: auto 10px auto 10px;}

.boutons {
	display: flex;
	height: 22px;
	margin: auto 2px auto 2px;}

#control a {
	display: block;}

#control button {
	display: block;}

#control {
	margin-top : 30px;
	padding: 0 10px 0 10px;
	display: flex;
	justify-content: space-between;
	width: 70%;}

.actif {
	border: 1px solid rgb(255, 201, 14);
	border-radius: 5px;}

/* ------------------------------------------------------------------------ */
/* -------------------------- PORTRAIT ENCADRANT -------------------------- */
/* ------------------------------------------------------------------------ */

#lienEncadrant
{
	font-size: 1.2em;
}

#divFormulaireCreaEncadrant
{
	display: none;
}

#divFormulaireCreaEncadrant div
{
	display: flex;
	font-size: 0.7em;
}

#divFormulaireCreaEncadrant div label
{
	width: 20%;
}

/* ------------------------------------------------------------------------ */
/* ------------------------ FORMULAIRE INSCRIPTION ------------------------ */
/* ------------------------------------------------------------------------ */

.cadreFormInscr
{
	width: 450px;
}

.legendeFormInscr
{
	text-decoration: underline;
}

.labelFormInscr
{
	display: inline-block;
	width: 200px;
	text-align: right;
	margin: 5px 0 5px 0;
}

#passDiff
{
	display: inline-block;
	width: 450px;
	text-align: right;
}

/* ------------------------------------------------------------------------ */
/* ------------------------ POP-IN ------------------------ */
/* ------------------------------------------------------------------------ */

.popin{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

z-index: 498;

display: none;
}

.popin-aplat{
	background-color: rgba(88, 88, 88, 0.5);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

z-index: 499
}

.popin-contenu{
	width: 1000px;
	height: 600px;

position: fixed;
	top: 10px;
	left: 200px;

background-color: #fff;
	z-index: 500;
}

.popin-contenu-image{
	overflow: auto;
}

.popin-close{
	width: 16px;
	height: 16px;

position: absolute;
	top : -8px;
	right: -8px;

cursor: pointer;
}