/*
Theme Name: twentyten-enfant
Description: Theme enfant de contraceptionmasculine.fr
Author: ardecom
Author URI: https://www.contraceptionmasculine.fr
Template: twentyten 
Version: 0.1.0
*/

/* habillage encarts de texte */
/* ----------------------------- */
p.cadre {
background:#dbe0ef;
border:2px dotted #aeb8de;
padding:1em 1em 1em 1em;
}

p.encart {
background:#000000;
border:2px solid #ffffff;
}

.one-column #content {
	margin: 0 auto;
	width: 100%;  /* initialement 640px */;
}
p.encart-gauche {
	font-style: italic;
background:#ffffff;
border:2px solid #000000;
padding:1em 2em 1em 2em;
margin-right: 350px;
}

/* ------------------------------ */
/* note */
/* ------------------------------ */

.note {
	text-align: left !important;
	font-size: small !important;
}

/* ------------------------------ */
/* bouton haut de page */
/* ------------------------------ */

a.hautdepage {
	text-decoration: none;
    background-color: #4f070e;
	background-image: linear-gradient(20deg, rgba(255,255,255,0), rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 90%)
		!important;
    font-weight: normal;
	font-size: medium;
    display: inline-block;
    border-radius: 40px;
    padding: 5px 15px 5px 15px;
	float: right  !important;
	text-align: center;
    color: #fff !important;
   
}

a.hautdepage:hover {
    background-color: #cc3333;
    color: #fff;
}

/* ------------------------------ */
/* sous-titre */
/* ------------------------------ */
p.subtitle {
	background-image: linear-gradient(10deg, rgba(137, 21, 32,0.9) 20%, rgba(137, 21, 32,0.1) 80%);
    border-radius: 10px;
    color: #E8C5C5;
    padding: 18px;
    /*width: 100%;*/
    text-align: left;
	font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
	font-weight: bold;
	font-size: medium ;

}
/* ------------------------------ */
/* accordéon */
/* ------------------------------ */
.accordion {
	font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
	font-weight: bold;
	font-size: medium;
    color: #E8C5C5;
    background-color: #891520;
	/* background-image: linear-gradient(90deg, rgba(137, 21, 32,0.9), rgba(137, 21, 32,0.7) 70%, rgba(137, 21, 32,0.9) 100%),
		linear-gradient(20deg, rgba(255,255,255,0), rgba(255,255,255,0.3) 30%, rgba(255,255,255,0) 90%)
		!important; */
		background-color: #891520 !important;
	background-image:
		linear-gradient(90deg, rgba(137, 21, 32,1), rgba(137, 21, 32,0) 30%, rgba(137, 21, 32,1) 100%),
		linear-gradient(20deg, rgba(255,255,255,0), rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 90%)
		!important;
    border-radius: 10px;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    margin: 5px;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.2s;
}

.active, .accordion:hover {
	font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
	font-weight: bold;
	font-size: medium;
	color: #FFFFFF;
	background-color: #4f070e !important;
	background-image: linear-gradient(rgba(255,255,255,0.05) 5%, rgba(255,255,255,0) 50%),
		linear-gradient(90deg, rgba(79,7,14,1), rgba(79,7,14,0) 30%, rgba(79,7,14,1) 100%),
		linear-gradient(20deg, rgba(255,255,255,0), rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 90%)
		!important;
}

.accordion:after {
    content: '\2228';
    color: #E8C5C5;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2227";
    color: #FFFFFF;
}

.panel {
    padding: 0 18px;
    text-align: justify;
	background: rgba(255, 255, 255, 0.7);
	margin: 5px;
	border-radius: 10px;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* ------------------------------ */
/* boîtes */
/* ------------------------------ */

/* placement des boîtes */
/*               ------------------------------ */

/* bloc texte fond blanc */

/* boîte de texte blanche au centre */
.blocwht {
	text-align: justify;
	background: rgba(255, 255, 255, 0.5);
	/* border: 2px solid #000000;*/
	padding: 1em 2em 1em 2em;
	border-radius: 20px;
	box-shadow: 0px 0px 20px rgba(255,  255, 255, 1);
	width: 90%;
	/* margin-left: 10%;
	margin-right: 10%; */
}



/* encart de texte transparent sur la gauche avec ombre */
p.encart {
text-align: justify; font-style: italic; background: rgba(255, 255, 255, 0.7); border: 2px solid #000000; padding: 1em 2em 1em 2em; border-radius: 10px; box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2); float: left; width: 220px; margin-right: 2em;}

.box-txt-rg-gch {
	text-align: justify;
	font-style: italic;
	color:white;
	background: rgba(152, 5, 5, 0.4);
	border: 2px solid #ffffff;
	border-radius: 10px;
	padding: 1em 2em 1em 2em;
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
	margin-right: 2em;
	width: 220px;
	float: left;
	/* largeur à ajuster -> style="width: 320px !important;" */
	
}
/* cadre rouge */
.framered {
	text-align: justify;
	font-style: italic;
	color:white;
	background:rgba(152, 5, 5, 0.8);
	border-radius: 10px;
	padding:1em 1em 1em 1em;
}

/* boîte de texte blanche au centre */
.boxtxtwhtc {
	text-align: justify;
	font-style: italic;
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid #000000;
	padding: 1em 2em 1em 2em;
	border-radius: 10px;
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}


/* boîte de texte blanche sur la gauche */
.boxtxtwhtl {
	text-align: justify;
	font-style: italic;
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid #000000;
	padding: 1em 2em 1em 2em;
	border-radius: 10px;
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
	float: left;
	width: 220px;
	margin-right: 2em;
}

/* boîte de texte blanche sur la droite */
.boxtxtwhtr {
	text-align: justify;
	font-style: italic;
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid #000000;
	padding: 1em 2em 1em 2em;
	border-radius: 10px;
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
	float: right;
	width: 220px;
	margin-left: 2em;
	
}

/* boîte de texte rouge à gauche */
.boxtxtredl {
	text-align: justify;
	font-style: italic;
	color:white;
	background: rgba(152, 5, 5, 0.4);
	border: 2px solid #ffffff;
	border-radius: 10px;
	padding: 1em 2em 1em 2em;
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
	margin-right: 2em;
	width: 220px;
	float: left;
	/* largeur à ajuster -> style="width: 320px !important;" */
	
}

/* boîte de texte rouge à droite */
.boxtxtredr {
	text-align: justify;
	font-style: italic;
	color: white;
	background: rgba(152, 5, 5, 0.4);
	border: 2px solid #ffffff;
	border-radius: 10px;
	padding: 1em 2em 1em 2em;
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
	margin-left: 2em;
	width: 220px;
	float: right;
	/* largeur à ajuster -> style="width: 320px !important;" */
	
}

/* boîte de texte rouge à droite */
.boxtxtredc {
	text-align: justify;
	font-style: italic;
	color:white;
	background: rgba(152, 5, 5, 0.4);
	border: 2px solid #ffffff;
	border-radius: 10px;
	padding: 1em 2em 1em 2em;
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
	width: 360px;
	margin: 0 auto;
	
}
/* ----------------------------- */
/* habillage images */
/* ----------------------------- */

/* habillage image*/
.box-img {
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2); border: 2px solid #000000;
	/* display: block;
    margin: 0 auto; */
}

.boximg {
	box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2); border: 2px solid #000000;
	 opacity: 0.8;
	/* display: block;
    margin: 0 auto; */
}
/* ----------------------------- */
/* Habillage site */
/* ----------------------------- */
/* Changer la couleur du menu */
/*              ----------------------------- */
 /* fond du menu */
#access {
	background-color: #891520 !important;
	border-radius: 0 0 10px 10px;
}
  /* étiquette survolée */
#access li:hover > a, #access ul ul :hover > a {
    background-color: #4f070e !important;
	background-image: linear-gradient(rgba(255,255,255,0.05) 5%, rgba(255,255,255,0) 50%),
		linear-gradient(90deg, rgba(79,7,14,1), rgba(79,7,14,0) 30%, rgba(79,7,14,1) 100%),
		linear-gradient(20deg, rgba(255,255,255,0), rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 90%)
		!important;
}

  /* fond des étiquettes du menu*/
#access a, #access ul ul a {
    background-color: #891520 !important;
	background-image:
		linear-gradient(90deg, rgba(137, 21, 32,1), rgba(137, 21, 32,0) 30%, rgba(137, 21, 32,1) 100%),
		linear-gradient(20deg, rgba(255,255,255,0), rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 90%)
		!important;
    transition: background-color 0.2s ease;
}
  /* suppression des bordures de l'image d'en-tête */
#branding img {
    border-bottom: none !important;
	border-top: none !important;
	border-radius: 10px 10px 0 0;
	
}

/* police menu */
.menu {
font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-weight: bold;
font-size: medium ;
}

#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
color: #FFFFFF;
}

/* couleur texte menu inactif */
#access a {
color: #E8C5C5 !important;
}

#access li:hover > a, #access ul ul:hover > a {
color: #FFFFFF !important;
}

/* ombrage sous-menu */
#access ul ul {
	box-shadow: 20px 5px 10px 5px rgba(0,0,0,0.2) !important;
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
}

/* image d'arrière plan visible */
#wrapper {
  background: rgba(255,255,255,0.6) !important;
	margin-top: 20px;
	padding: 0 20px;
	border-radius: 20px;
	
}

/*          ----------------------------- */

/* suppression du titre et de la description du site =Header
            ------------------------------- */

#header {
	padding: 0px 0 0 0 !important;
}
#site-title {
	float: left;
	font-size: 0px !important;
	line-height: 0px !important;
	margin: 0 0 20px 0 !important;
	width: 700px;
}
#site-title a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
#site-description {
	clear: right;
	float: right;
	font-style: italic;
	margin: 0px 0 5px 0 !important;
	width: 220px;
}
/* ----------------------------- */