@media only screen and (orientation:landscape){

@keyframes blinker {
	50% {
		opacity: 0;
   }
}
html {
	position: absolute;
	height: auto;
	width: 100%;
	min-height: 100%;
	display: table;
	overflow: scroll;
}
body {
	position: relative;
	background: rgb(30, 35, 54);
	opacity: 0.98;
	min-height: 100%;
	height: 120%;
	width: 100%;
	top: 0vh;
	left: 0.2vw;
}
head {
	position: absolute;
	height: 100%;
	top: 0vh;
	text-align: center;
	overflow: auto;
}
p {
	display: inline;
	color: whitesmoke;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
}
table {
	text-align: center;
	margin-top: 6%;
	border-collapse: collapse;
	overflow: auto;
	width: 93%;
	height: 100%;
}
td {
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1vh;
	margin-left: 20px;
	margin-right: 20px;
	text-align: center;
	overflow: auto;
}
tr {
	background-color: transparent;
	border-collapse: separate;
}
th {
	background: linear-gradient( white, rgb(131, 120, 111)) ;
	border-radius: 1px;
	border-collapse: separate;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: auto;
	margin-right: auto;
	height: 2vh;
}
/* logo + selection + lien memento + bouton recherche + lien admin */
.entete{

	position: absolute;
	top: -2vh;
	left: 0px;
	width: 99%;
	height: 16vh;
	background-color:rgb(30, 35, 54);
}

.bouton_recherche {
	position: absolute;
	height: 3.8vh;
	margin-top: 8.2vh;
	left: 42%;
	background: whitesmoke;
	color: rgb(30, 35, 54);
	border-radius:2px;
	font-size: 1.8vh;
	border:2px solid #ccc;
	box-shadow:1px 1px 3px #999;
	/* padding-bottom: 18px; */
	padding-left: 8px;
	padding-right: 8px;
	font-style: italic;
}
.bouton_recherche:hover {
	background: linear-gradient(45deg, white, rgb(131, 120, 111));
	border-color: rgb(131, 120, 111);
}

.bouton_imprimer {
	position: absolute;
	height: 3.8vh;
	margin-top: 8.2vh;
	left: 49%;
	background: whitesmoke;
	color: rgb(30, 35, 54);
	border-radius:2px;
	font-size: 1.8vh;
	border:2px solid #ccc;
	box-shadow:1px 1px 3px #999;
	/* padding-bottom: 18px; */
	padding-left: 8px;
	padding-right: 8px;
	font-style: italic;
}

.bouton_imprimer:hover {
	background: linear-gradient(45deg, white, rgb(131, 120, 111));
	border-color: rgb(131, 120, 111);
}

.reclamation
{
	position: absolute;
	font-size: 1.8vh;
	color: whitesmoke;
	margin-top: 8.2vh;
	left: 58%;

}
.lien_message_admin {
	position: absolute;
	top: 1vh;
	left: 35vw;
	text-align: center;
	color:whitesmoke;
	font-size: 1.6vh;
	font-family: Arial, Helvetica, sans-serif;
}
.revenir_aux_horaires_applicables_actuellement {
	position: absolute;
	top: 0vh;
	left: 35vw;
	color:whitesmoke;
	font-size: 1.6vh;
	font-family: Arial, Helvetica, sans-serif;
}
.lien_administrateur {
	position: absolute;
	display: hidden;
	top: 35%;
	right: 2vw;
	background: rgb(30, 35, 54);
	border-radius: 5px;
	width: 1.2vw;
	height: 1.2vh;
}
.lien_administrateur:hover {
	background: whitesmoke;
}
.logo_psa {
	position: absolute;
	left: -0.8vw;
	top: -1vh;
	height: 15vh;
}
.texte_recherche {
	margin-top: 0%;
	padding-right: 2%;
	font-family: Arial, Helvetica, sans-serif;
	background: linear-gradient(rgb(214, 210, 196), white);
	max-width: 80%;
}
.selection {
	position: relative;
	width: auto;
	height: 2.9vh;
	margin-top: 4vh;
	margin-right: 0vh;
	float: left;
	left: 30vw;
}
.selection_ligne {
	position: relative;
	top: 0px;
	width: auto;
	height: 1.6vh;
	margin-top: -0.2%;
	margin-right: 0vh;
	left: -30%;
}
/* fin de style pour logo + selection +  bouton recherche + lien admin */
/* style pour le tableau avec les infos transporteur + chef de bus + telephone chef de bus + date de mise en application */
.donnees_generales_transporteur 
/* div */
{
	position: absolute;
	background: transparent;
	top:15vh;
	left:1vw;
	width: 93vw;
	height: 20vh;
}
.table_info_transporteur {
	position: relative;
	border-collapse: collapse;
	background: transparent;
	margin-left: 0vw;
	width: 30vw;
	height: 13vh;
	margin-top: 1.5vw;
}
.info_transporteur {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	background:rgb(214, 210, 196);
	color: rgb(30, 35, 54);
	font-size: 1.8vh;
	max-width: 10vw;
	height: 2vh;
	text-align: left;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
}
.donnees_info_transporteur {
	background: rgb(185, 211, 220);
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(30, 35, 54);
	position: relative;
	font-size: 1.8vh;
	left: 0vw;
	height: 2vh;
	width: auto;
	padding-right: 0vw;
}
/* fin de style pour le tableau avec les infos transporteur + chef de bus + telephone chef de bus + date de mise en application */
/* style pour la partie commentaires dans page recherche par ligne et tournée */

.table_commentaires_sur_ligne_tournee {
	position: relative;
	border-collapse: collapse;
	background: transparent;
	margin-top: -13vh;
	height: 5vh;
	left: 55vw;
	width: 40vw;
}
.titre_commentaire_ligne_tournee {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(30, 35, 54);
	background: rgb(214, 210, 196) ;
	font-size: 1.8vh;
	height: 3vh;
	margin-right: 8vw;
	border-radius: 1px;
	top: 0;
}
.donnees_commentaires_ligne_tournee {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(30, 35, 54);
	font-size: 1.8vh;
	width: 16vw;
	text-overflow: ellipsis;
	height: 10vh;
	text-align: center;
	margin-left: 8vw;
	background: rgb(185, 211, 220);
	border-radius: 2px;
}
/* style pour pour le message "Resultats pour ..." */
.affichage_message_resultat {
	position: relative;
	background: rgb(214, 210, 196);
	top: 12vh;
	width: 98%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color:rgb(30, 35, 54);
	font-size: 2.5vh;
	border-radius: 5px;
}
/* fin de style pour le message "Resultats pour ... */
/* style pour le tableau des résultats ligne et villes tournée xxx*/
.commentaires 
/* les commentaires dans la section "recherche ville + tournée */
{
	position: relative;
	max-width: 8vw;
	text-overflow: ellipsis;
	font-size: 1.8vh;
}
.chef_bus {
	position: relative;
	width: auto;
	height: 3vh;
	font-size: 1.8vh;
	opacity: 0.92;
}
.tableau_resultats_tournees 
/* div */
{
	position: absolute;
	margin-right: auto;
	width: 96%;
	height: auto;
	top: 35vh;
	margin-left: 1vh;
	padding-bottom: 15vw;
}
.table_resultats_tournees {
	text-align: center;
	top: 0vh;
	margin-top: 0%;
	width: 100%;
	position: relative;
	margin-left: 1vh;
}
.tableau_resultats_villes_tournees 
/*div*/
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 98%;
	height: 100%;
	display: table;
	min-height: 100%;
	top: 14vh;
	margin-left: 2vh;
	padding-bottom: 20vw;
}
.table_resultats_villes_tournees {
	margin-left: 0vh;
	position: relative;
	text-align: center;
	margin-top: 0%;
	border-collapse: collapse;
	width: 98%;
}
.table_commentaires {
	position: relative;
	width: 50%;
	margin-left: 50%;
	top: 30%;
}
.telephone {
	position: relative;
	width: auto;
	height: 3vh;
	font-size: 1.8vh;
	opacity: 0.85;
}
.titre_resultats {
	text-align: center;
	border-radius: 1px;
	margin-top: 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8vh;
	height: 3vh;
}
.ligne_resultats {
	text-align: center;
	border-radius: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8vh;
	height: 3vh;
}
/* fin de style pour style pour le tableau des résultats */
/* style pour les liens des plans de Mulhouse Tournée A et tournée B */
.footer{
	background:rgb(30, 35, 54);
	height: 6vh;
	width: 103%;
	padding-right: 7vh;
	margin-left: -5%;
	position: fixed;
	bottom: 0vh;
}
.lien_plan_mulhouse_TA {
	margin-top: 0.4vh;
	color :whitesmoke;
	margin-left: 60vw;
	position: absolute;
}
.lien_plan_mulhouse_TB {
	margin-top: 0.4vh;
	color: whitesmoke;
	margin-left: 64vw;
	position: absolute;
}
.image_plan {
	height: 6vh;
	width: 3vw;
}
.horaire_limite {
	position: absolute;
	margin-left: 6vh;
	color:whitesmoke;
	font-size: 1.4vh;
}
.popup_memento {
	position: absolute;
	background: whitesmoke;
	border-radius: 5px;
	top: 0.5vh;
	left: 70vw;
	height: 5vh;
	animation: blinker 2s linear infinite;
	width: auto;
}
.texte_telecharger_les_plans {
	margin-top: 1vw;
	font-size: 1.6vh;
	margin-left: 16vw;
	position: absolute;
}
/* fin de style pour les liens des plans de Mulhouse Tournée A et tournée B */
}

@media only screen and (orientation:portrait){



	html
	  {
		margin-top: 35vh;
		margin-left: 40vw;
		background-image: url("../images/landscape.png");
		background-repeat: no-repeat;
	  }
	  
	  .logo_psa 
	  {
		position: absolute;
		left: 0vw;
		top: 0vh;
		height: 10vh;
	  }
	  .bouton_recherche 
	  {
		display: none;
	  }

	  .selection
	  {
		  display: none;

	  }

	  .selection_ligne
	  {
		  display: none;
	  }

	  .lien_message_admin
	  {
		  display: none;
	  }
	  .footer
	  {
		  display: none;
	  }

	  .affichage_message_resultat
	  {
		  display: none;
	  }

	  .table_resultats_villes_tournees
	  {
		  display: none;
	  }

	  .donnees_generales_transporteur 

	{
		display: none;
	}

	.table_commentaires_sur_ligne_tournee 
	{
		display: none;	
	}

	.tableau_resultats_tournees 
/* div */
	{
		display: none;
	}
	
  }