html,
body {
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
}

body {
	background: #647D89;
	font-family: "Quicksand",sans-serif;
	font-size: 15px;
	font-style: normal;
	color: #fff;
	margin: 0;
	padding: 0;

}

div {
	margin: 0
}

.center {
	width: 1100px;
	margin: 0 auto;
	display: block;
}


a {
	color: #fff;
	outline: none;
	text-decoration: none;
	transition:all 0.5s;
}

a:hover {
	color: #000;
	text-decoration: none
}

a img {
	border: none;
}

.width {
	text-align: left;
	width: 100%;
	display: block;
}

.align_right {
	text-align: right
}

.align_left {
	text-align: left
}

.align_center {
	text-align: center
}

.align_justify {
	text-align: justify
}

ul {
	list-style: square;
}

ul li {}

ul li a {
	color: #fff;
	text-decoration: none;
}

ul li a:hover {
	text-decoration: underline;
	color: #999;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: bold;
	margin: 5px 0;
	background: #0C3752;
	color: white;
	text-align: center;
	padding: 15px;
	border-radius: 4px;
}

h1 {
	font-size: 22px;
}

h2 {
	font-size: 20px;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 15px;
}

#contenu strong {color:black;}


/* Header */

#header {
	display: block;
	background: #0C3752;
	text-align: center;
	border-bottom: 1px solid #fff;
}

#header .toptoptop {
    background: #647D89;
    color: white;
    display: block;
    padding: 15px;
    font-size: 16px;
}

.lelogo img {
		height: auto;
	}

#header h1,
.likeh {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 20px;
}

h1 a,
#header h1 a,
.likeh a {
	color: white;
	text-decoration: none;
}

h1 a,
#header h1 a:hover,
.likeh a:hover {
	color: white;
	text-decoration: underline;
}

h1.annuaire_titre a:hover{color:#eee;}

#breadcrumb {
	display: block;
	margin: 0;
	padding: 0;
	background: #647D89;
	border: 1px solid #eee;
	border-radius: 5px;
}

#fil_ariane {
	font-size: 14px;
	font-style: italic;
	margin: 1px 0;
	padding: 14px;
	text-align: center;
}


/* Footer */

#footer {
	border-top: 1px solid #fff;
	text-align: center;
	width: 100%;
	color: #eee;
	display: block;
	clear: both;
	position: relative;
	min-height: 100px;
	padding: 10px 0;
	background: #0C3752;
}

#footer a {
	color: #eee;
}


/* Content */

#contenu {
	margin: 20px 0;
	width: 700px;
	display: inline-block;
	padding: 20px;
	border: 1px solid #eee;
	background: #647D89;
	border-radius: 4px;
}


/* Sidebar */

#colonne {
	width: 300px;
	display: inline-block;
	margin: 20px auto;
	background: #647D89;
	float: right;
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 4px;
}

.titre_colonne {
	font-weight: bold;
	font-size: 16px;
	margin: 5px 0;
	background: #0C3752;
	color: white;
	text-align: center;
	padding: 15px;
	border-radius: 4px;
}


/* Homepage */

#jh_recat {
	display: block;
}

.jh_minicat {
	width: 30%;
	display: inline-grid;
	padding: 1%;
	text-align: center;
	background: #647D89;
	border-radius: 4px;
	margin: 5px 0;
	border: 1px solid #fff;
}

.jh_minicat h3 {
	font-size: 16px;
	font-weight: normal
}

.jh_minicat h3 a {
	color: white;
	text-decoration: none;
}

.jh_minicat h3 a:hover {
	color: white;
	text-decoration: underline;
}

/* Tableau Derniers Sites en HP */
ul#lastsite,
ul#coup2coeur,
ul#incontournables,
ul#popstars {
	list-style:none;
	margin:20px 0 0;
	padding:0;
}

#lastsite li,
#coup2coeur li,
#incontournables li,
#popstars li {
	display:inline-block;
	list-style:none;
	margin:0;
	padding:0;
	width:15.5%;
	text-align:center;
}

#lastsite li img,
#coup2coeur li img,
#incontournables li img,
#popstars li img {
		width:100%;
		padding:0;
		margin:0;
}



/* Page Site */

.j_site_description {
	text-align: left;
}

.j_thumbs {
	float: left;
	margin: 0 15px 5px 0;
}

.j_thumbs img {
	width:160px;
	height:auto;
}

.j_go2site {
	background: #0C3752;
	padding: 25px;
	border-radius: 4px;
	color: white;
	text-align: center;
	font-size: 24px;
}

.j_go2site a {
	color: white;
	text-decoration: underline;
}

.j_go2site a:hover {
	text-decoration: none;
}

.upwork {
	background: #eee;
	padding: 25px;
	border-radius: 4px;
	color: black;
	text-align: center;
}


/* Page Section */

ul.liste_site {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.liste_site li {
	margin: 15px 0;
	padding: 15px;
	border-radius: 5px;
}

ul.liste_site li.site_modulo {
	background: #647D89;
}

ul.liste_site li h2 {
	font-weight: normal;
	font-size: 18px;
	text-align: left;
}

ul.liste_site li h2 a:before {
	content: "⭐";
}

ul.liste_site li h2 a {
	color: white;
	text-decoration: none;
}

ul.liste_site li h2 a:hover {
	color: white;
	font-weight: bold;
}

ul.liste_site li div.thumbsection {
	float: left;
	margin: 0 15px 5px 0;
}

.thumbsection img {
	width:120px;
	height:auto;
}

ul.liste_site li p.descri_section {
	text-align: left;
}

ul.liste_site li .lurl {
	text-align: right;
	color: blue;
	text-decoration: underline;
}

.boom {
	display: inline-block;
    margin: 20px 0;
}

.boom b.active {
	margin: 10px 5px;
}

a.navp {    
	border: 1px solid #999;
	padding: 10px;
	color: #000;
	margin: 10px 5px;
	border-radius: 5px;
	background: #eee;
	display:inline-block;
}

a.navp:hover {    
	background:#fff;
}


/* Page Catégorie */

#j_category h2 {
	font-weight: normal;
	font-size: 18px;
}

#j_category h2 a {
	color: #eee;
	text-decoration: none;
	text-shadow: 0 0 2px white;
}

#j_category h2 a:hover {
	color: white;
	text-decoration:underline;
}


/* Page Ajouter un site */

#j_join input {
	width: 100%;
}

span.conseil {
	background: #f74d6b;
	color: white;
	padding: 15px;
	display: block;
	border-radius: 3px;
	margin:10px 0;
}

textarea {
	display: block;
	width: 100%;
	height: 300px;
	border-radius: 5px;
	border: 1px solid #f74d6b;
	font-family: "Segoe UI", Calibri, "Myriad Pro", Myriad, "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 18px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     	/* Opera/IE 8+ */
}

textarea.backlinkcode {
	
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	font-style: italic;
	font-family: Courier;
	margin-top: 10px;
	background: black;
	color: #eee;
	border: 0;

}

fieldset {
	border: 0;
	margin: 0;
	padding:0;
}

input::placeholder {text-indent:6px;}
input:required {border-color: #145fbf;}

input.soumettre_input {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     	/* Opera/IE 8+ */
	border-radius:2px;
}

input[type="submit"] {
	margin-top: 3px;
	background: #59a959;
	width: 100%;
	height: 43px;
	color: white;
	font-size: 20px;
	border-radius: 8px;
	border: 0;
	font-weight: bold;
	cursor: pointer;
}

input[type="submit"]:hover {
	opacity: 0.8;
}

input[type="text"] {
	width: 100%;
	font-size: 18px;
}

input[type="mail"], input[type="url"] {
	font-size: 18px;
}

input[type="checkbox"] {
	display:inline-block;
	width:auto!important;
}

#cgv-u {display:none!important;}

select {
	font-size: 18px;
	width: 100%;
}

.info_jaune {
	background:#fff;
	font-size:17px;
	font-weight:bold;
	color:#ac2020;
	text-align:center;
	padding:20px;
	margin: 20px 0;
}

/* Admin */

table#listisite {
	text-align: center;
}

table#listisite thead,
table#listisite thead a {
	background: #181818;
	color: wheat;
}

table#listisite tbody tr:nth-child(2n+1), table.tablecat tbody tr:nth-child(2n+1) {background:#eee;}
table#listisite.doublesaut tbody tr:nth-child(4n+0){background:#eee;}


table#listisite tbody tr td a.settingsite {
	color:black;
}
	
table#listisite tbody tr td a.settingsite:hover {
	opacity:0.6;
	margin-left:5px;
}	
	
table#listisite tbody tr td  a.newtab {
	text-decoration: underline;
	font-size: 13px;
	font-style: italic;}
	
table#listisite tbody tr td a.maildepot {
	font-size: 13px;
}

a.newtab::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  margin: 0 0.05em 0 0.1em;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: text-bottom;
}

table#tab4backlink {
	border-bottom: 1px dotted #e5e5e5;
	background: #bbf2ff;
	padding: 10px;
	border-radius: 0 0 10px 10px;
	width:100%;
	text-align:center;
	margin-bottom:5px;
}

table#tab4backlink thead{
	background: #647D89;
	color:#000;
	border-radius:3px;
}


table.tablecat{
	width:100%;
	text-align:center;
} 

table.tablecat thead{
	background:#181818;
	color:#fff;
} 

.catousect{
	background:#eee;
	text-align:center;
	padding:10px 0;
	margin: 10px 0;
} 

.fastadmin{
	text-align: center;
	background: #9dea9d;
	padding: 10px 40px;
	border-radius: 8px;
}

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

.fastadmin a:hover{
	text-decoration:underline;
}

.secsec a strong{
	color:black;
}

#mes_sites_saved ol {
	padding:0;
	list-style:none;
}

a.homethuglife{
	background:#3e3799;
	color:white;
	display:block;
}

a.homethuglife:hover{
	background:#bf1b1b;
}

a.thuglife{
	font-size:16px;
	text-align:left;
	background:#3e3799;
	color:white;
	display:block;
	padding:10px;
}

a.thuglife:hover{
	background:#bf1b1b;
}

/* Edit PRO */

.editer_mon_site, .booster_mon_site {display:inline-block;}
.editer_mon_site button {
	background: #3e46ac;
	border: 0;
	border-radius: 3px;
	color: white;
	font-weight: bold;
	padding: 5px;
	margin:3px;
	display: inline-block;
	cursor: pointer;
}

.editer_mon_site button:hover {
	background: blue;
}

.booster_mon_site button {
	background: red;
	border: 0;
	border-radius: 3px;
	color: white;
	font-weight: bold;
	padding: 5px;
	margin:3px;
	display: inline-block;
	cursor: pointer;
}

.booster_mon_site button:hover {
	background: brown;
}

/* Cool CSS Effect */

a.shine img {
	-webkit-filter: blur(0);
	filter: blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
a.shine img:hover {
	-webkit-filter: blur(2px);
	filter: blur(2px);
}



@media only screen and (max-width: 1100px) {
	body {
		-webkit-appearance: none;
		border-radius: 0;
		background:#647D89;
	}
	.center {
		width: 100%;
		background:white;
	}
	#contenu {
		width: 66%;
		margin: 0;
		border: 0;
		padding: 1.5%;
	}
	#colonne {
		width: 27%;
		margin: 0 0 0 1%;
		border: 0;
		padding: 1.5%;
	}
	.lelogo img {
		max-width: 100%;
	}
	ul.liste_site li p.descri_section {
		margin: 0;
	}
	.jh_minicat {
		width: 47%;
		padding: 1%;
	}
	.space img {width:100%;}

}

@media only screen and (max-width: 767px) {	
	#contenu,
	#colonne {
		width: 100%;
		margin: 0;
		border: 0;
		padding: 0;
	}
	
	.space {padding:0 10px;}
	#page_content,
	#j_join {
		padding:10px;
	}

	ul.liste_site li p.descri_section {
		margin: 10px 0 0 0;
	}
	.jh_minicat {
		width: 47%;
		padding: 1%;
	}
	#footer{
		min-height:0;
		padding:20px;
		width:auto;
	}
	
	/* Tableau Derniers Sites en HP */
	#lastsite li, #coup2coeur li, #incontournables li, #popstars li{width:49%;padding:0;margin:0;}
	
	ul.liste_site li div.thumbsection, .j_thumbs  {
	float: none;
	margin: 0;
	display:block;
	}
	
	.lelogo img {
		width: 100%;
	}
	
	.j_thumbs img, .thumbsection img{width:100%;}
	.j_site_description {margin-top:15px;}
}