body {
font-family:'Open Sans', sans-serif;
}
h1 {
  text-align: center;
  font-weight:bold;
  margin-top:0;
}

a, a:hover { color:#f96200; }

hr { color:#000; }

#main {
	width:70%;
	margin:2em auto;
	background-color:#FFF;
	text-align:center;
	padding:2em 5em;
}

#content {
	width:100%;
	margin:0 auto;
	padding:0.5em 5em;
}

.large {
	width:100%;
	margin:0 auto;
	padding:0.5em 3em;
}

.main-roster {
	float:left;
	width:65%;
	padding:1em 2em 1em 0;
}

.right-sidebar {
	float:left;
	width:35%;
	padding:1em 2em 1em 2em;
	border-left:1px dotted #666;	
}

.classement, .classement2 {
	width:33%;
	float:left;
	padding:0 2em;
	border-right:1px solid #333;
	text-align:center;
}
.classement2 { border-right:none; }

.classement3 {
	width:50%;
	float:left;
	padding:0 2em;
	border-right:1px solid #333;
	text-align:center;
}

.classement3:last-child {
	border-right:none;
}

.points-forts2 {
	width:42%;
	float:left;
	padding:1em;
	margin:1em;
	text-align:center;
	background-color:#64c93d;
	color:#FFF;
	border:1px solid #090;
}

.points-forts2 span {
	font-size:3.5em;
	display:block;
	padding:0.2em;
}

.points-forts2 span:hover, .points-forts2:hover {
	color:#FFF;
	background-color:#090;
	/*TRANSISTIONS*/
	-webkit-transition: background 0.5s ease;
	   -moz-transition: background 0.5s ease;
	     -o-transition: background 0.5s ease;
	    -ms-transition: background 0.5s ease;
	        transition: background 0.5s ease;	
}

.points-forts {
	width:23%;
	float:left;
	padding:1em;
	margin:0 0.5em;
	text-align:center;
	background-color:#EEE;
}

.points-forts span {
	font-size:3.5em;
	display:block;
	padding:0.2em;
}

.points-forts span:hover {
	color:#000;
}

.connect {
	width:48%;
	float:left;
	padding:1em;
	margin:0 0.5em;
	text-align:center;
	background-color:#DDD;
}

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

#logo-fantasy {
	width:100%;
	margin:1em auto;
	text-align:center;
}

#rss-feeds {
	padding:0.5em;
}
#rss-feeds li a { 
	color:#000;
	text-decoration:none;
	padding:0.2em;
}
#rss-feeds li a:hover { 
	color:#FFF;
	background-color:#f96200;
	text-decoration:none;
}
#rss-feeds ul { margin-left:-1em; }
#rss-feeds li {
	padding:0.2em;
}

.button {
  font-size: 1em;
  padding: 0.5em;
  color: #fff;
  background-color:#fe6000;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #d35000;
  color:#FFF;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

.view_data:hover, .edit_data:hover, label {
	cursor:pointer;
}
#player-card  {
	margin:0 auto;
}
#player-card td {
	padding:0.2em;
}

#player-card tr td:first-child {
	font-weight:bold;
	text-align:right;
}

.add_player, .delete_player, .starting_five_player, .substitute_player, .inactive_player, .captain_player {
	width:100%;
	padding:1em;
	background-color:#ff5400;
	color:#FFF;
	display:block;	
	text-align:center;
	font-weight:bold;
}

.add_player:hover, .delete_player:hover, .starting_five_player:hover, .substitute_player:hover, .inactive_player:hover, .captain_player:hover  {
	text-decoration:none;
	color:#FFF;
	background-color:#F60;
}

.starting_five_player { background-color:#090; }
.starting_five_player:hover { background-color:#060; }

.substitute_player { background-color:#F60; }
.substitute_player:hover { background-color:#ff5400; }

.captain_player { background-color:#FC0; }
.captain_player:hover { background-color:#F90; }

.inactive_player { background-color:#F00; }
.inactive_player:hover { background-color:#900; }

.delete_player { background-color:#333; }
.delete_player:hover { background-color:#111; }

#erreur {
	padding:0.5em;
	background-color:#F00;
	color:#FFF;
	margin:0.5em 0;
}

.lastgames {
	font-size:1.5em;
	cursor:pointer;
}

.main-roster table { font-size:14px; }

#roster table, .modal-content table#roster , .main-roster table, .main-roster table#roster, #table-fantasy {
	border-collapse: collapse;
	width:100%;
}

#roster table th, .modal-content table#roster th, .main-roster table th, .main-roster table#roster th, #table-fantasy th {
	background-color:#101010;
	color:#FFF;
	padding:0.5em;
	text-align:center;
	border-right:1px solid #333;
}

#roster table th:first-child, .main-roster table th:first-child, #table-fantasy th:first-child { text-align:left; }

#roster table th span, .main-roster table th span, #table-fantasy th span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
}
#roster table th:hover span, .main-roster table th:hover span, #table-fantasy th:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
	font-weight:normal;
	font-size:0.8em;
}
#roster table th:hover, .main-roster table th:hover, #table-fantasy th:hover { cursor:help; }

#roster table td, .modal-content table#roster td, .main-roster table td, .main-roster table#roster td, #table-fantasy td {
	padding:0.3em;
	text-align:center;			
	color:#222222;
	border-bottom:1px solid #CCC;
}
.modal-content table#roster a, .main-roster table#roster a, #table-fantasy a { color:#000; }
.modal-content table#roster a:hover, .main-roster table#roster a:hover, #table-fantasy a:hover { color:#f96200; }

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
	border:none;
}

#header {
	width:100%;
	background-color:#111;
	color:#FFF;
	padding:1em 10em;
	text-align:center;
}

#header a { color:#f96200; }

.bg-clean {
	background-color:#fff;
	background-image:url(../img/bg-clean.jpg);
	background-repeat:no-repeat;
}

#roster tr:nth-child(odd), table.search tr:nth-child(odd), #table-fantasy tr:nth-child(odd) { background-color:#FFF; }
#roster tr:nth-child(even), table.search tr:nth-child(even), #table-fantasy tr:nth-child(even) { background-color:#F5F5F5; }

#roster table td:first-child, .main-roster table td:first-child, #table-fantasy td:first-child {
	text-align:left;
	font-weight:bold;
}

.nba-team-logo {
	width:25px;
	height:25px;	
}

#roster table td.sub-title, .main-roster table td.sub-title {
	background-color:#333;
	border-bottom:1px solid #111;
	color:#CCC;
}

.captain { color:#FC0; }
span:hover { color:#e25500; }

#roster table td.eval, table#roster td.eval, .main-roster table td.eval, .main-roster table#roster td.eval { 
background-color:#EEE;
color:#333;
font-weight:bold;
}

div.titulaire, div.inactif { width:12px; height:12px; border-radius:50%; display:inline-block; margin-left:0.5em; margin-top:0.4em; }
div.remplacant { display:inline-block; }

span.titulaire { color:#000; }
span.remplacant { color:#000; }
span.inactif { color:#BBB; }
span.titulaire:after { font-family: FontAwesome; content: "\f17d"; margin-left:0.5em; font-weight:normal; }
span.inactif:after { color:#F00; font-family: FontAwesome; content: "\f0fe"; margin-left:0.5em; }

.recap {
	background-color:#DDD;
	padding:0.5em;
	width:100%;
	text-align:center;
	margin:1em 0;
}

div.ok { background-color:#08a900; color:#FFF; }
div.warning { background-color:#F90; color:#FFF; }
div#legende { padding:0.5em; border:1px dashed #999; background-color:#EEE; margin-bottom:5em; }
span.title { background-color:#111; color:#FFF; padding:0.2em 1em; }

.search { width:100%; }
.search th { 
	background-color:#333;
	color:#FFF;
	padding:0.5em;
	border-right:1px solid #000;
    background-image: url(../img/asc.gif);
	background-repeat:no-repeat;
	background-position:right;	
	}
.search th:hover {
	cursor:pointer;
	}	
.search td { padding-top:0.2em; padding-right:2em; border-bottom:1px solid #DDD; }
.search tr:hover { background-color:#F1F1F1; }
.search td.stats { background-color:#111; color:#FFF; padding:0.2em 0.5em 0 0.5em; font-weight:bold; text-align:center; }

th.headerSortUp { 
    background-image: url(../img/asc.gif);
	background-repeat:no-repeat;
	background-position:right;	
} 

th.headerSortDown { 
    background-image: url(../img/desc.gif); 
	background-repeat:no-repeat;
	background-position:right;		
}

.search td.stats1 { background-color:#ffa200; }
.search td.stats2 { background-color:#ff8a00; }
.search td.stats3 { background-color:#ff7200; }
.search td.stats4 { background-color:#ff6000; }
.search td.stats5 { background-color:#ff4800; }
.search td.stats6 { background-color:#ff2400; }

.selection {
	padding:1em;
	background-color:#666;
	color:#FFF;
	float:right;
	margin-left:0.5em;
}
.cagnotte {
	padding:1em;
	background-color:#F90;
	color:#FFF;
	float:right;
	margin-left:0.5em;
}

span.mobile:hover, span.mobile:hover { color:#FFF; }

.primary {
    color: #000;
    background-color: #FFF;
    text-align: left;
    margin: 2% 25%;
	padding:2em 4em;
	opacity: 0.9;
}

.secondary {
    color: #000;
    background-color: #FFF;
    text-align: left;
    margin: 2% 30%;
	padding:2em 4em;
	opacity: 0.9;
}

.secondary h2 {
  text-align: center;
  font-weight:bold;
  font-size:2.5em;
  margin:0 0 0.5em 0;
}

.secondary a {
	color:#f96200;
}

#register input, #chat input {
    padding: 0.5em;
    margin: 0.5em;
    background-color: #F9F9F9;
    border: 1px solid #BBB;
    width: 300px;
    display: block;
	color:#333;
	font-weight:bold;
}

#register input:focus, , #chat input:focus {
	border: 1px solid #f96200;
	color:#f96200;
}

.valid { color:#f96200; }
.erreur { color:#C00; }

#register label, #chat label  {
    font-weight: bold;
    width: 200px;
    margin: 0.5em;
	padding:0;
    float: left;
	text-align:left;
	color:#000;
}

#register select {
    display: block;
    padding: 0.5em;
	background-color: #333;
    border: 1px solid #BBB;
	color:#FFF;
}

#register button, #chat button {
    background-color: #1c1c1c;
    color: #FFF;
    padding: 1em 3em;
    display: inline-block;
    text-decoration: none;
	border:none;
	font-weight:bold;
	width:100%;
	margin:2em auto;
}
#register button:hover, #chat button:hover {
    background-color: #f96200;
    color: #FFF;
    padding: 1em 3em;
    margin: 2em 0;
    display: inline-block;
    text-decoration: none;
}

.chat {
float:left;
width:35%;
padding:1em 2em 1em 2em;
border-left:1px dotted #666;
}

#chat ul {
   list-style:none;
}

#chat li {
    width: 110%;
    padding: 0.5em;
    margin:0.5em;
    margin-left:-40px;
    padding-bottom:0.1em;
   
}

#chat li:nth-child(even) { background-color:#E5E5E5; }
#chat li:nth-child(odd) { background-color:#F1F1F1; }

#chat span {
   color:#000;
   font-weight:bold;
}


#chat li p { 
   font-size:0.9em;
   color:#666;
}


section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

#paypal { 
  text-align:center;
  width:100%;
}

#paypal input {
  display: block;
}

#paypal form { 
  text-align:center;
  display: inline-block;  
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #999;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='50']:before { content: '\f0c9'; }
label[for*='51']:before { content: '\f17d'; }
label[for*='60']:before { content: '\f058'; }
label[for*='61']:before { content: '\f073'; }
label[for*='62']:before { content: '\f155'; }

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid #fb6300;
  border-bottom: 1px solid #fff;
}

#tab50:checked ~ #content50,
#tab51:checked ~ #content51 {
  display: block;
}

#tab60:checked ~ #content60,
#tab61:checked ~ #content61,
#tab62:checked ~ #content62 {
  display: block;
}

#accordion input {
	display: none;
}
#accordion label {
	background: #eee;
	border-radius: .25em;
	cursor: pointer;
	display: block;
	margin-bottom: .125em;
	padding: .5em 1em;
	z-index: 20;
	color:#000;
}
#accordion label:hover {
	background: #ccc;
}

#accordion input:checked + label {
	background: #f96200;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	color: white;
	margin-bottom: 0;
}
#accordion article {
	background: #f7f7f7;
	height:0px;
	overflow:hidden;
	z-index:10;
}
#accordion article p {
	padding: 1em;
}
#accordion input:checked article {
}
#accordion input:checked ~ article {
	border-bottom-left-radius: .25em;
	border-bottom-right-radius: .25em;
	height: auto;
	margin-bottom: .125em;
}

#roster table tr.orange td {
	background-color:#f96200;
	color:#FFF;
}

#roster table tr.winner td {
	background-color:#efba00;
	color:#FFF;
	border-bottom:1px dashed #fff;
}
	
.pagination, .pagination-jour, .pagination-mois {
    display: inline-block;
	margin:20px 0;
}

.pagination li, .pagination-jour li, .pagination-mois li {
    color: black;
    float: left;
    padding: 8px 16px;
	margin:0 2px;
    text-decoration: none;
	background-color:#EEE;
	list-style:none;
}

.pagination li:hover, .pagination-mois li:hover, .pagination-jour li:hover { cursor:pointer; }

.pagination li.active, .pagination-mois li.active, .pagination-jour li.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

.pagination li:hover:not(.active), .pagination-mois li:hover:not(.active), .pagination-jour li:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

/* Desktops and laptops ----------- */
@media only screen 
and (max-width : 1360px) {
  body {
	  background-position:top;
	  background-color:#EAEAEA;
  }
  #content {
	  width:100%;
	  padding:0;
  }	
  .secondary {
	  margin:2% 20%;
  }
}

/* Smartphone portrait and landscape  ----------- */
@media screen and (max-width : 720px) {
#header {
	padding:0;
}
.primary, .secondary {
	margin:0.5em;
	padding:1em;
}

#paypal img { height:0; }
.points-forts, .points-forts2, .connect {
	width:95%;
	margin:0.5em;
	padding:1em;
}

.classement, .classement2 {
	width:98%;
	margin:0.5em 0.2em;
	padding:0.5em 0;
	border:none;
}

.bx-wrapper {
	display:none;
}
img {
	width:80%;
	height:auto;
}
.main-roster {
	margin:0.5em;
	width:98%;
	padding:0;
}
.right-sidebar {
	margin:0.5em;
	width:98%;
	padding:0;
	border:none;
}
#fantasy-menu nav.red ul {
	padding:0;
	margin:0;
	width:100%;
}
.tabs-market label {
	width:16.4%;
	padding:0.8em 0.1em;
	font-size:0.8em;
}
.mobile {
	display:none;
}
h1 {
	font-size:20px;
}
table#player-card {
	font-size:0.8em;
}
#player-card tr td:first-child {
	text-align:left;
}
.modal-body {
	padding:5px;
}
.cagnotte, .selection {
	float:left;
	width:49%;
	margin:0.4em 0.1em 0.4em 0;
}

#roster label {
	float:left;
	width:98%;
	margin:0;
	border-bottom:1px solid #CCC;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
}

#rules ul li {
	margin-left:-2em;
}



.chat {
width:100%;
padding:0.5em;
border-left:none;
}

#chat input {
    padding: 0.5em;
    margin: 0.5em;
    background-color: #F9F9F9;
    border: 1px solid #BBB;
    width: 90ù;
    display: block;
	color:#333;
	font-weight:bold;
}


}