body
{

	font-family: arial;
	background-color: black;
	cursor: default;
	margin: 0;
	}

#canvas-particles 
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	}

#play
{
	position: relative;
	margin-top: 60px;
	display: flex ;
	justify-content: space-between ;
	}
	
/* ---------------------------- */
/* ---------- HEADER ---------- */
/* ---------------------------- */

header
{
	color: green;
	cursor: default;
	}

#titre
{
	position: relative;
	font-size: 70px ;
	color: black;
	font-weight: bold ;
	text-align: center ;
	margin-top: 30px;
	margin-bottom: 30px;
	text-shadow: 0px -1px 10px green;
	}

#date_heure
{	
	position: absolute;
	left: 20px;
	top: 20px;
	}

#nb_connectes
{
	position: absolute;
	top:20px;
	right:50px;
	}
	
#contact
{
	left:70px;
	}

#facebook
{
	left:120px;
	}

#twitter
{
	left:170px;
	}

#googleplus
{
	left:220px;
	}

#save_game
{
	left:270px;
	}

#reset_game
{
	left:320px;
	}

#calculator
{
	left:370px;
	}

#calculator, #contact, #twitter, #facebook, #save_game, #reset_game, #googleplus
{
	position: absolute;
	top:80px;
	height: 40px;
	cursor: pointer;
	opacity: 0.2;
	-webkit-transition-property: opacity;
	-webkit-transition-duration:1.5s;
	}

#calculator:hover, #contact:hover, #twitter:hover, #facebook:hover, #save_game:hover, #reset_game:hover, #googleplus:hover
{
	opacity: 1;
	}

/* ------------------------------ */
/* ---------- UPGRADES ---------- */
/* ------------------------------ */

#box_for_cook_scroll, #box_for_deal_scroll
{
	position: relative;
	}

#contenant_cook
{
	position: relative;
	height: 700px;
	width: 350px;
	box-shadow: 6px 0px 20px rgb(70,70,70);
	background-color: rgb(12,12,12);
	border-radius: 0px 0px 20px 0px;
	overflow:hidden;
	}

#contenant_deal
{
	position: relative;
	height: 700px;
	width: 350px;
	box-shadow: -6px 0px 20px rgb(70,70,70);
	background-color: rgb(12,12,12);
	border-radius: 0px 0px 0px 20px;
	overflow: hidden;
	}

#cook, #deal
{
	position: absolute;
	margin: 10px ;
	}

th:hover
{
	cursor: pointer;
	}

#cooker, #grandma, #chinese, #chimist, #robot, #alien, #machine, #factory, #space_station, #planet,
#dealer, #moto, #car, #truck, #restaurant, #ship, #submarine, #plane, #rocket, #space_portal
{
	position: relative;
	}

/* ----------------------------------------- */
/* ---------- CASES PRIX ET GAINS ---------- */
/* ----------------------------------------- */

#petite_case_cooker, #petite_case_dealer
{
	display: flex ;
	justify-content: center;
	font-size: 22px ;
	font-weight: bold ;
	color: rgb(0,50,0);
	cursor: pointer;
	margin-top: 0px;
	margin-bottom: -8px;
	margin-left: 60px;
	margin-right: 60px;
	}

#petite_case_grandma, #petite_case_chinese, #petite_case_chimist,
#petite_case_robot, #petite_case_alien, #petite_case_machine, #petite_case_factory,
#petite_case_space_station, #petite_case_planet,
#petite_case_moto, #petite_case_car, #petite_case_truck,
#petite_case_restaurant, #petite_case_ship, #petite_case_submarine, #petite_case_plane,
#petite_case_rocket, #petite_case_space_portal
{
	display: flex ;
	justify-content: center;
	color: rgb(0,50,0);
	font-size: 22px ;
	font-weight: bold ;
	cursor: pointer;
	margin-top: 0px;
	margin-bottom: -8px;
	margin-left: 60px;
	margin-right: 60px;
	position: relative;
	visibility: hidden;
	}

#price_cooker, #price_grandma, #price_chinese, #price_chimist, #price_robot, #price_alien, #price_machine,
#price_factory, #price_space_station, #price_planet,
#price_dealer, #price_moto, #price_car, #price_truck, 
#price_restaurant, #price_ship, #price_submarine, #price_plane, 
#price_rocket, #price_space_portal
{
	display: block;
	}

#gain_cooker, #gain_grandma, #gain_chinese, #gain_chimist, #gain_robot, #gain_alien, #gain_machine,
#gain_factory, #gain_station, #gain_planet,
#gain_dealer, #gain_moto, #gain_car, #gain_truck, #gain_restaurant,
#gain_ship, #gain_submarine, #gain_plane, #gain_rocket, #gain_space_portal
{
	display: none;
	}

/* ---------------------------------- */
/* ---------- TABLEAU COOK ---------- */
/* ---------------------------------- */

table
{
	 border-collapse: separate;
     border-spacing: 0px 16px; /* Nombre de pixels d'espace horizontal (5px), vertical (8px) */
}

#cook th
{
	border: 2px solid black ;
	padding: 10px ;
	font-size: 25px ;
	font-weight: bold ;
	border-radius: 20px 0 20px 0;
	box-shadow: 4px 4px 10px green;
	color: black ;
	width: 300px;
	}

#nb_cookers, #nb_grandmas, #nb_chineses, #nb_chimists, #nb_robots, #nb_aliens, #nb_machines,
#nb_factories, #nb_space_stations, #nb_planets
{
	position: absolute;
	top:10px;
	left:262px;
	color: black;
	font-size: 40px;
	font-weight: bold ;
	visibility: hidden;
	}

#cooker
{
	background-image: url("cook/thecooker.png"),url("fondcase.png");
	background-position: 0% 0%, 0% 0%; 
	background-repeat: no-repeat;
	position: relative;
	}


#grandma
{
	background-color: black;
	background-position: 0% 0%, 0% 0%;
	background-repeat: no-repeat;
	opacity: 1;
	}

#chinese
{
	background-color: black;
	background-position: 0% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.9;
	}

#chimist
{
	background-color: black;
	background-position: 0% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.8;
	}

#robot
{
	background-color: black;
	background-position: 0% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.7;
	}

#alien
{
	background-color: black;
	background-position: 5% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.6;
	}

#machine
{
	background-color: black;
	background-position: 0% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.5;
	}

#factory
{
	background-color: black;
	background-position: 0% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.4;
	}

#space_station
{
	background-color: black;
	background-position: -5% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.3;
	}

#planet
{
	background-color: black;
	background-position: -5% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.2;
	}


/* ---------------------------------- */
/* ---------- TABLEAU DEAL ---------- */
/* ---------------------------------- */

#deal th
{
	border: 2px solid black ;
	padding: 10px ;
	font-size: 25px ;
	font-weight: bold ;
	border-radius: 0 20px 0 20px;
	box-shadow: -4px 4px 10px green;
	color: black ;
	width: 300px;
	}

#nb_dealers, #nb_motos, #nb_cars, #nb_trucks, #nb_restaurants, #nb_ships, #nb_submarines,
#nb_planes, #nb_rockets, #nb_space_portals
{
	position: absolute;
	top:10px;
	left:15px;
	color: black;
	font-size: 40px;
	font-weight: bold ;
	visibility: hidden;
	}

#dealer
{
	background-image: url("deal/thedealer.png"),url("fondcase.png");
	background-position: 105% 0%, 0% 0%; 
	background-repeat: no-repeat;
	}

#moto
{
	background-color: black;
	background-position: 100% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 1;
	}

#car
{
	background-color: black;
	background-position: 110% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.9;
	}

#truck
{
	background-color: black;
	background-position: 100% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.8;
	}

#restaurant
{
	background-color: black;
	background-position: 105% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.7;
	}

#ship
{
	background-color: black;
	background-position: 105% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.6;
	}

#submarine
{
	background-color: black;
	background-position: 115% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.5;
	}

#plane
{
	background-color: black;
	background-position: 120% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.4;
	}

#rocket
{
	background-color: black;
	background-position: 110% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.3;
	}

#space_portal
{
	background-color: black;
	background-position: 105% 0%, 0% 0%; 
	background-repeat: no-repeat;
	opacity: 0.2;
	}

/* ---------------------------- */
/* ---------- SCROLL ---------- */
/* ---------------------------- */

#slideup_cook
{
	position: absolute;
	top:-26px;
	left:6px;
	}

#slidedown_cook
{
	position: absolute;
	top:712px;
	left:6px;
	}

#slideup_deal
{
	position: absolute;
	top:-28px;
	left:320px;
	}

#slidedown_deal
{
	position: absolute;
	top:712px;
	left:320px;
	}

#slidedown_cook:hover, #slideup_cook:hover, #slidedown_deal:hover, #slideup_deal:hover
{
	cursor: pointer;
	}

/* ----------------------------------------------- */
/* ---------- CALCULATRICE Et GIF BATTLE---------- */
/* ----------------------------------------------- */

#calc
{
	display: none;
	position: absolute;
    top: 450px;
    margin:auto;
    padding-left:5px;
    padding-bottom:5px;
    height: 200px;
    width: 200px;
	}	

.calc_td_resultat
{
    text-align:center;
	}

.calc_resultat
{
    width:90%;
    text-align:right;
    font-size: 20px;
	}

.calc_td_btn
{
    width:25%;
	}

.calc_btn
{
    width:90%;
    height:30px;
    font-size:20px;
	}

/* ---------------------------- */
/* ---------- FLECHE ---------- */
/* ---------------------------- */

#divfleche
{
	position: relative;
	display: flex ;
	flex-direction:column;
	}

#fleche_conversion
{
	display: none;
	font-size: 25px;
	font-weight: bold;
	position: absolute;
	top:53px;
	left:10px;
	}

/* ------------------------------------------------- */
/* ---------- CASES DOLLARS ET SPACECAKES ---------- */
/* ------------------------------------------------- */


#dollar
{
	display: flex;
	flex-direction: column;
	justify-content:center;
	opacity: 0.9;
	}

#nombreSC, #nombreD
{
	text-align: center ;
	color:green;
	opacity: 0.9;
	font-size: 40px;
	font-weight: bold;
	}

#SC_sec, #D_sec
{
	text-align: center ;
	color:black;
	opacity: 0.9;
	font-size: 25px;
	font-weight: bold;
	position: absolute;
	top: 60px;
	left: 110px;
	}

#limite_dollars
{
	position: relative;
	text-align: center ;
	border: 2px solid black ;
	border-radius: 20px;
	background-image: url("fondcase.png");
	margin-bottom: 5px; 
	margin-top: 5px;
	opacity: 0.9;
	font-size: 20px ;
	font-weight: bold;
	}

#info_limit
{
	position: absolute;
    right: 30%;
    top: 40%;
  	display: none;
	border: 1px black solid;
	font-size: 20px ;
	font-weight: none ;
	border-radius: 7px 7px 7px 7px;
 	background-color: rgb(250,200,180);
	}

#spacecake
{
	margin: 30px ;
	display: flex;
	flex-direction: column;
	justify-content:center;
	opacity: 0.9;
	}

#spacecake_relative, #dollar_relative
{
	position: relative;
	}

#box_cakes, #box_dollars, #money, #thecake
{
	cursor: pointer;
	}

#prix_box_cakes, #prix_box_dollars
{
	color: black;
	font-size: 20px ;
	font-weight: bold ;
	text-align: center ;
	opacity: 0.9;
	position: absolute;
	top:220px;
	left: 130px;
	}

/* ---------------------------- */
/* ---------- FOOTER ---------- */
/* ---------------------------- */

/*footer
{
 	border: 3px black solid;
 	background-image: url("fondcase.png");
 	height: 51px;
	}*/