/*
Theme Name: 
Site Name: Joe Locke France
Theme URI: http://joe-locke.fr
Author: Christophe
Author URI: joe-locke.fr
Version: 1.0
*/

/* General *************/
body {
	text-align:justify;
	font: 200 13px "Overpass";
	color: #4f4f4f;
	line-height:22px;
}

#site {
     overflow:hidden;
     z-index:1; 
     width:1000px;
     margin:0 auto;
} 

#nomsite { 
    background: url("https://joe-locke.fr/wp/wp-content/themes/wp01/images/sitetitre.png") no-repeat; 
    background-position:top center; 
    width: 1000px; 
    height: 123px; 
}

header { 
    background: url("https://joe-locke.fr/wp/wp-content/themes/wp01/images/header.png") no-repeat center; 
    width: 1000px; 
    height: 411px; 
}



/* Navigation *************/
#navigation { 
    padding: 0px 0px 10px 0px; 
    text-align: center; 
	font-family: "Josefin Sans";
    text-transform: uppercase; 
}
#navigation a {
    margin: 0px 10px;
	font: 200 15px "Overpass";
}


/* Elements *************/

b, strong{ 
    font-weight:400; 
    color: #3b3b3b;
}

/* Liens */
a {
    text-decoration:none; 
    color: #000000;
    font-weight:300;
}

tr.border td a {
    color: #4f4f4f;
    font-weight:300;
    text-transform: uppercase;
}

/* Blockquote */
blockquote { 
	margin:22px 0; 
	padding:5px 15px 5px 60px; 
	border: 1px dotted #dedede; 
	background: #fff url("https://joe-locke.fr/wp/wp-content/themes/wp01/images/citation.png") 15px 22px no-repeat; 
	color:#707070; 
}

/* Listes */
ul { 
    margin: 5px 0px; 
    padding:0px;
	list-style-type: none;
}
li:before {
   content: '- ';
}

/* Tables */
tr.border td {
	border-bottom: 1px solid #ddd; 
	padding: 10px 0px;
}
tr.border-titre td { 
	padding: 10px 0px;
	border-top:1px solid #848484; 
	border-bottom:1px solid #848484; 
	padding:10px 0px; 
	font-weight: 400; 
	text-align: left;
}

tr.border_bottom td {
	border-top:0px solid #848484;
	border-bottom:0px solid #848484;
	padding-top:10px;
	padding-bottom:10px;
	font-weight: 700;
	text-align: left;
}
tr.border_bottom2 td {
	border-bottom:0px dotted #C9C9C9;
	padding-top:5px;
	padding-bottom:5px;
	text-align: left;
}

/* Divers */
hr {
    border: 0;
    width: 100%;
    color: #e3e3e3;
    background-color: #e9e9e9;
    height: 1px;
    margin: 20px 0px 20px 0px;
}

.bouton-nav { 
	float: right;
	margin-top: -40px; 
	font-size: 8px; 
	color: #CDCDCD; 
}
.bouton-nav a { 
	border: 1px solid #d4d4d4; 
	padding: 10px 15px; 
	background-image: linear-gradient(#f7f7f7, #efefef); 
	font-weight: 900; 
	color: #707070; 
}
.bouton-nav span { 
	border: 1px solid #eaeaea; 
	padding: 10px 15px; 
	background-image: linear-gradient(#ffffff, #f3f3f3); 
	font-weight: 900; 
	color: #bbbbbb; 
}




/* Titres *************/
h1 {
	background-color: #ffffff;
	text-align: left;
	font: 100 31px "Overpass";
	color: #000000;
	text-transform: uppercase;
	margin: 0px 20px 10px 0px;
}

h2 {
	background-color: #ffffff;
	text-align: center;
	font: 200 16px "Overpass";
	color: #000000;
	text-transform: uppercase;
	margin: -39px 20px 30px 20px;
}

h3 { 
    margin-bottom: -8px; 
	font: 100 14px "Overpass";
	color: #000000;
	text-transform: uppercase;
}

h4 { 
    margin-bottom: -5px; 
	font: 300 13px "Overpass";
	color: #000000;
}



/* Contenu & Articles *************/
#contenu {
    float:left;
   	margin:0px 0px 20px 20px;
   	padding: 0px 30px 0px 30px; 
    width:580px;
}

.article, .page {
    padding: 30px 0px 15px 0px;
}

.date {
	background-color: #ffffff;
	text-align: left;
	font: 100 12px "Overpass";
	color: #848484;
	text-transform: uppercase;
	margin: -10px 20px 30px 0px;
	letter-spacing: 2px;
}



/* Sidebar *************/
#sidebar {
    float:right;
   	margin:40px 50px 20px 0px;
    width:280px;
}

.side {
    border: 1px solid #e8e8e8;
    padding: 30px;
    margin: 0px 0px 50px 0px;
}



/* Footer *************/

#footer {
   	margin:0px 50px 20px 0px;
    width:1000px;
    float:left;
    border-top: 1px solid #e8e8e8;
    padding: 20px 0px 0px 0px;
	font: 200 13px "Overpass";
	text-transform: uppercase;
    text-align: center;
}



/* Accordion *************/
details{
	margin-bottom: 5px;
	padding: 0.5em 0.5em 0;
}
details[open]{
	padding: 0.5em;
}
summary{
	font: 100 14px "Overpass";
	color: #000000;
	text-transform: uppercase;
	margin: -0.5em -0.5em 0em -0.5em;
	padding: 0.5em 0.5em 0.5em 0em;
	cursor: pointer;
	list-style: none;
}
details[open] summary{
	margin-bottom: 0.5em;
}
details > summary::after {
    content: '˅';
  float: right;
}
details[open] > summary::after {
    content: '˄';
}