/* Document : styles Created on : Jul 9, 2013, 10:02:19 AM Author : Jason Soucy Description: Feuille de style du site Québec Décapé */ //Variables textes @ftlineHeight: 1.625; @ftletterSpacing: .03em; @ftfont: 14px Verdana, "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; @ftColor: #FFF; @ftWeight: 300; @fDeco: none; //textes hover @fthlineHeight: @ftlineHeight; @fthletterSpacing: @ftletterSpacing; @fthfont: @ftfont; @fthColor: @ftColor; @fthWeight: @ftWeight; @fhDeco: @fDeco; //liens @alineHeight: @ftlineHeight; @aletterSpacing: .03em; @aFont: @ftfont; @aColor: #33BDD2; @aWeight: bold; @aDeco: @fDeco; //liens hover @ahlineHeight: @alineHeight; @ahletterSpacing: @aletterSpacing; @ahFont: @aFont; @ahColor: #fff; @ahWeight: @aWeight; @ahDeco: @aDeco; //formulaires @iBgColor: #000; @iFont: @ftfont; @iFtColor: #fff; @iWeight: @ftWeight; @iDeco: @fDeco; @iletterSpacing: @ftletterSpacing; //formulaires hover @ihBgColor: @iBgColor; @ihFont: @iFont; @ihFtColor: #fff; @ihWeight: @ftWeight; @ihDeco: @fDeco; @ihletterSpacing: @iletterSpacing; //autres @bgColor: #000000; @footColor: #000; @headColor: #121414; @centerColor: #000; //titres /* CSS général */ root { display: block; } html{ width:100%; } body{ color: @ftColor; font: @ftfont; font-weight: @ftWeight; line-height: @ftlineHeight; letter-spacing: @ftletterSpacing; width:100%; background-color: @bgColor; text-decoration: @fDeco; } /*p:hover{ line-height: @fthlineHeight; letter-spacing: @fthletterSpacing; font: @fthfont; color: @fthColor; font-weight: @fthWeight; text-decoration: @fhDeco; }*/ a{ text-decoration: @aDeco; font: @aFont; font-weight: @aWeight; color: @aColor; line-height: @alineHeight; letter-spacing: @aletterSpacing; text-decoration: @aDeco; } a:hover{ text-decoration: @ahDeco; font: @ahFont; color: @ahColor; font-weight: @ahWeight; line-height: @alineHeight; letter-spacing: @aletterSpacing; text-decoration: @aDeco; } form{ color: @iFtColor; font: @iFont; font-weight: @iWeight; letter-spacing: @iletterSpacing; /*background-color: @iBgColor;*/ text-decoration: @iDeco; } /*form:hover{ background-color: @ihBgColor; font: @ihFont; color: @ihFtColor; font-weight: @ihWeight; text-decoration: @ihDeco; letter-spacing: @ihletterSpacing; }*/ a img { border: 0; opacity: 1.1; } h2{ } input{ margin: 10px 0px 10px 0px; display:block; background: @iBgColor; color: @iFtColor; border: 1px dotted #FFF; padding-top: 1px; } label{ margin-right:20px; text-align: right; float: left; font-size: 0.8em; padding-bottom: 1px; height: 16px; } textarea{ padding: 0; margin: 0; display:block; background: @iBgColor; color: @iFtColor; border: 1px dotted #FFF; height: 100px; } table{ width: 100%; } table caption{ text-align: left; } td, th{ padding: 5px; border: 1px solid #1c2020; text-align: center; vertical-align: middle; } td img{ padding: 0; margin: 0; } .rsVideoContainer{ margin: 0 auto; } /* Fin du CSS général */ /* CSS header */ #headerWrap { position: relative; z-index: 2; height: 50px; margin: 0 auto; max-width: 100%; background: @headColor; border-bottom: 1px solid #1c2020; /*overflow: hidden;*/ /*padding-bottom: 28px;*/ display: block; } #hgroup{ position: relative; padding: 0; margin: 0 auto; width: 300px; } h1#site-title{ float: left; clear: none; padding: 3px 5px 0 0; margin: 0; line-height: normal; } h2#espacefLink { clear: none; float: left; } h2#espacefLink a { display: block; width: 42px; height: 42px; margin: 5px 5px 0 0; text-indent: -99999px; background: url(../images/logoFsiteQdUP.png) top left no-repeat; opacity: 0.7; } h2#espacefLink a:hover{ background: url(../images/logoFsiteQdOVER.png) top left no-repeat; } /* Fin du CSS header */ .confirmation, #confirmation_sort{ width: 100%; margin:0 auto; background-color: #02874a; padding: 10px 0 10px 0; display: none; } #negative_sort{ width: 100%; margin:0 auto; background-color:#FF0000; padding: 10px 0 10px 0; display: none } .confirmation p, #confirmation_sort p, #negative_sort{ margin-left: 10px; } /* CSS Navigation */ #navigation{ height: 100%; float:right; position: relative; z-index: 9999; } #navigation ul{ height: 100%; float: left; list-style: none; padding: 0; margin: 0; position:absolute; right: 0; } #navigation li{ float: right; position: relative; height: 100%; text-decoration: none; } #navigation ul li{ list-style: none; position: relative; width: 58px; background-color: #121414; border-bottom:1px solid #1c2020; /*line-height: 44px;*/ float:left; } #navigation ul li a{ text-decoration:none; text-align: right; } #navigation a { height: 35px; font-size: 11px; color: #33bdd2; display: block; line-height: 2em; padding: 0 .9em; padding-top: 15px; text-decoration: none; text-transform: lowercase; font-weight: bold; border-bottom: 1px solid #1c2020; } #navigation a:hover{ color:@ahColor; background-color: #000; } .boite_connexion, .boite_compte{ float:right; } #navigation .lien_actif{ color:#FFF; background-color: #000; } #navigation ul li ul{ display:none; position:absolute; margin-left: -10px; z-index:9999; } #navigation ul li ul li{ float:none; width: 250px; position: relative; z-index:9999; } .royalSlider, .royalSlider .royalCaption { z-index: 1; } /* Fin du CSS de la navigation */ /* CSS du bas de page */ footer{ max-width: 100%; color: #333333; clear: both; margin: 0 auto; padding: 0; font-size: 12px; text-align: center; } footer a{ color: #333333; font-size: 12px; } footer p{ width: 98%; float:left; } /* fin du CSS de bas de page */ .login label, .login form p{ color: #999999; } .login #nav, .login #backtoblog { text-shadow: none; } body.login{ background: #000; } body.login div#login h1 a { background-image: url(../images/qd-beta.jpg); padding-bottom: 20px; } /* contenus du site */ #contenus_nav{ position: relative; width: 100%; margin: 0 auto; } /* projet*/ .contenus_fenetre{ position: absolute; overflow: hidden; width: 100%; height: 1300px; top:0; left: 0; font-size: 0.9em; display: none; z-index: 9999; } .fermer_contenus{ padding:0.5%; font-weight: bold; color: #fff; float:right; } .transparent_bg{ width: 100%; height: 100%; background-color: #000; position: absolute; top:0; left:0; z-index: 1; } .contenu{ position: absolute; z-index: 2; width: 100%; } #contenu_projet h1{ color: #ff6600; font-weight: bold; font-style: italic; padding: 20px 20px 10px 20px; } .contenu_gal{ position: fixed; width:100%; top:70px; left:5%; z-index: 4; } #projet_resume{ font-weight: bold; padding: 10px 20px 10px 20px; } #projet_sujet{ padding: 10px 20px 10px 20px; } #projet_separateur{ padding: 10px 20px 10px 20px; } #projet_description{ padding: 10px 20px 20px 20px; font-size: 0.8em; } /* fin projet */ /* conditions d'utilisation */ #contenu_conditions h1{ font-weight: bold; padding: 20px 20px 0 20px; } #contenu_conditions h2{ font-weight: bold; color: #999999; padding: 10px 20px 10px 20px; } #contenu_conditions h3{ font-weight: bold; color: #ff6600; padding: 10px 20px 0 20px; } #contenu_conditions h4{ font-weight: bold; color: #999999; font-size: 0.8em; padding: 10px 20px 0 20px; } #contenu_conditions{ height: 1500px; } #conditions_considerations{ color: #ff6600; padding: 10px 20px 10px 20px; font-size: 0.8em; font-weight: bold; } #conditions_formats{ color: #ff6600; padding: 0 20px 10px 20px; font-size: 0.8em; } #conditions_separateur{ color: #999999; padding: 10px 20px 10px 20px; } #conditions_droits{ color: #999999; font-weight: bold; padding: 0 20px 10px 20px; font-size: 0.8em; } #conditions_juridique{ color: #999999; list-style-type: disc; padding: 0 20px 0 20px; margin-left: 20px; font-size: 0.8em; } #conditions_mineurs{ color: #999999; font-size: 0.8em; padding: 0 20px 0 20px; } #conditions_adultes{ color: #999999; font-size: 0.8em; padding: 0 20px 10px 20px; } #conditions_modalités{ color: #999999; font-size: 0.8em; padding: 10px 20px 20px 20px; } /* fin conditions */ /* séries proposées */ #series_nombre{ position:relative; width: 20%; float:left; padding: 10px 20px; font-size: 0.75em; color:#CCC; display:block; } #liste_series{ list-style-type: none; width: 100%; padding: 0 20px 20px 20px; } #liste_series li{ border-top: 1px dotted #999999; } #liste_series li:hover{ background-color:#000; color: @ahColor; } #liste_series li p{ font-weight: normal; font-style:italic; } .prop_titre{ min-width:200px; text-align: left; } .propositions{ width: auto; } .propositions tr{ max-width: 50%; } .propositions tr img{ max-height: 50px; max-width: 100%; } .propositions td, th{ border: none; padding: 1%; } /*fin séries proposées */ /* blog */ #contenu_blog{ position: absolute; overflow: hidden; width: 400px; height: 500px; top:0; left:59.2%; font-size: 0.8em; display: none; z-index: 9999; } #blog_posts{ padding: 20px; font-style: italic; } /* fin blog */ /* partenaires */ #contenu_partenaires{ position: absolute; overflow: hidden; width: 430px; height: 200px; top:0; left:59.2%; font-size: 0.8em; display: none; z-index: 9999; } #contenu_partenaires h1{ font-weight: bold; padding: 20px 20px 0px 20px; font-size: 0.9em; } #contenu_partenaires a{ padding: 0px 20px 0px 20px; font-size: 0.9em; } #images_partenaires{ padding: 20px 0px 10px 0px; } #images_partenaires img{ max-height: 44px; padding: 0; } #images_partenaires a{ padding: 0; } /* fin partenaires */ /* nous joindre */ #contenu_contact{ position: absolute; overflow: hidden; width: 375px; height: 400px; top:0; left:66.7%; font-size: 0.8em; display: none; z-index: 9999; } #contenu_contact p{ padding: 20px 20px 10px 20px; font-size: 0.8em; } #contenu_contact a{ font-size: 1em; } #contenu_contact form{ margin: 0 auto; width: 355px; display:block; text-align: center; } #contenu_contact form label{ width: 25%; } #contenu_contact form input, textarea{ width: 50%; } #humain{ margin-left: 30%; display:block; height:16px; } #contenu_contact form input#humain{ width:auto; } #soumettre{ float:right; margin-right: 18%; color: #FF0000; } #contenu_contact form input#soumettre{ width: 20%; } /* fin nous joindre */ /* login */ #contenu_login, #contenu_compte{ position: absolute; overflow: hidden; width: 300px; height: 200px; top:0; right:0; font-size: 0.8em; display: none; z-index: 9999; } #contenu_compte a{ font-size: 1em; } #login_form{ margin: 0 auto; padding: 20px; width: 260px; } #login_form label{ width: 35%; } #login_form input{ margin-top : 0px; width: 50%; } #lien_inscription{ padding-left: 30px; } input#soumettre_login{ float:right; margin-right: 17px; color: #FF0000; width: 30%; } #lien_inscription{ font-size: 1.5em; } #lien_inscription:hover{ text-decoration: none; color: @ahColor; } #login_form .erreur, #erreur_connexion, #formulaire_contact .erreur, #report .erreur{ font-size: 0.7em; color:#FF0000; width: 100%; text-align:left; padding-left: 100px; padding-bottom: 10px; } #erreur_connexion{ margin-top: 10px; } #inscription_membre label.erreur_inscription, #modif_membre label.erreur_inscription, #ajout_serie label.erreur_ajout, #ajout_cont label.erreur_ajout{ font-size: 0.7em; color:#FF0000; width: 89%; text-align: right; padding-bottom: 10px; } .erreur_serieuse{ font-size: 1.1em; color:#FF0000; } .profil_mini{ float:left; max-width: 50px; max-height:50px; padding-left: 20px; padding-top: 5px; } #contenu_compte h1{ padding-left: 7px; float:right; } #contenu_compte ul{ list-style-type: none; width: 100%; margin-left: 36%; } #contenu_compte ul li a{ width: 100%; } #contenu_membre{ width:98%; margin-left: 1%; } #contenu_membre h2{ width: 50%; } .avatar_profil{ max-width: 300px; width: 30%; margin:1%; float:left; } #details_membre{ width:66%; float:right; list-style-type: none; margin:1%; } /* fin des contenus */ /* Contenu accueil */ #contenu_accueil{ position: absolute; overflow: hidden; width: 100%; height: 500px; top:0; left: 0; font-size: 0.9em; z-index: 9999; } #contenu_accueil h1{ color: #ff6600; font-weight: bold; font-style: italic; padding: 20px 20px 10px 20px; } /* fin accueil */ /* personnalisation du slider */ .royalSlider{ width: 100%; } .rsContent{ width: 100%; text-align:center; } .rsImg{ position:relative; //min-width: 320px; //min-height: 320px; height: 790px; width:1180px; //max-width: 100%; //max-height: 100%; margin: 0 auto; } .rsABlock{ text-align: left; } .rsVideoContainer, .rsImg{ min-height: 0; } #slideshow{ max-width: 100%; margin: 0 auto; /*overflow: hidden;*/ background: #000; position:relative; clear:both; } .rsArrowIcn{ z-index: 2; } /* miniatures */ .rsTmb{ max-height:80px; opacity: 0.1; } .rsTmb:hover{ opacity:1.0; } .rsDefault .rsThumb.rsNavSelected { background: #333333; } /*fin des miniatures */ /* section par-dessus les slides */ .rsABlock{ width: 100%; background-color: #000; opacity: 1.0; padding: 10px 35px 10px 35px; clear:both; bottom: 0; top:auto; display:none; } .rsABlock:hover{ opacity: 1.0; } .rsABlock h1{ text-indent: -9999px; float: left; display: none; } .rsABlock h2{ font-style: italic; font-size: 0.8em; margin-bottom: 15px; } .rsABlock p{ font-size: 0.7em; } .close_block, .open_block{ float:right; width: 70px; height: 10px; margin-right: 5%; padding-right: 5%; font-size: 1.2em; } .close_block:hover, .open_block:hover, .hide_thumbs:hover, .show_thumbs:hover{ text-decoration: underline; cursor: pointer; color: @ahColor; } .open_block{ font-size: 0.7em; float:right; width: 100px; margin-right: 25px; } .button_container{ height: 30px; } .hide_thumbs, .show_thumbs{ text-align:center; color: #333333; width: 100%; height: 10px; } .show_thumbs{ display:none; } #mini_container{ width: 100%; height: 20px; font-size: 0.8em; margin: 0 auto; border-left: 1px solid #111; border-right: 1px solid #111; border-bottom: 1px solid #111; } /* descriptions dans slider */ .nav_slider{ height: 100%; overflow: hidden; } .nav_slider ul{ height: 100%; float: left; list-style: none; font-size: 0.7em; } .nav_slider li{ float: left; position: relative; height: 100%; padding-right: 20px; } .nav_slider a { height: 100%; font-size: 10px; color: #33bdd2; line-height: 2em; padding: 0 .9em; text-decoration: none; font-weight: bold; } .nav_slider a:hover{ color:@ahColor; background-color: #000; } .post_commentaires{ border-bottom: 1px #FFF dotted; padding-bottom: 5px; margin-bottom: 20px; min-height: 60px; } .post_commentaires p{ margin-left: 90px; } .post_commentaires a{ font-size:1em; font-weight:bold; /*display:none;*/ } .post_commentaires a:hover{ color: @ahColor; text-decoration: none; } .description_serie, .description_photo, .description_auteur, .commentaires{ display:none; position: fixed; left: auto; width: 95%; } .description_serie p, .description_auteur p, .description_photo p{ position: relative; width:90%; margin-top: 2%; z-index:3; } .description_serie a, .description_auteur a, .description_photo a{ position:fixed; top: 60px; right:75px; z-index:5; } .description_photo, .description_serie, .description_auteur, .commentaires{ padding:0px 80px 0px 10px; } .description_auteur a{ font-size: 1em; } .submit_comm{ margin-left:490px; color:#FF0000; } .nav_slider .details_select{ font-style: italic; font-weight: bold; font-size: 1.0em; color: @ftColor; } /* fin du CSS pour le slider */ /* addThis */ .addthis_toolbox{ float:right; position: relative; } /* Page Inscription */ #aide_image, #aide_image_modif{ position: absolute; right: 0.3%; bottom: 8.5%; } #aide_image_modif{ position: relative; float: right; margin-top: 14px; } #formulaire_inscription, #formulaire_modif, #formulaire_ajout{ position:relative; max-width: 1200px; margin:0 auto; padding: 20px; } #formulaire_inscription h1, #formulaire_modif h1, #formulaire_ajout h1, #formulaire_inscription p, #formulaire_modif p, #formulaire_ajout p{ padding-left: 20px; } #formulaire_modif_cont{ position:relative; width: 60%; margin: 0 auto; padding-top: 20px; } #inscription_membre, #modif_membre, #ajout_serie, #ajout_cont{ position: relative; width: 50%; margin: 0 auto; text-align: center; margin-top: 20px; } #modif_cont{ position: relative; max-width: 100%; margin: 0 auto; text-align: center; } #inscription_membre label, #modif_membre label, #ajout_serie label, #ajout_cont label{ width: 40%; } #modif_cont label{ width: 25%; } #inscription_membre input, #inscription_membre textarea, #modif_membre input, #modif_membre textarea, #ajout_serie input, #ajout_serie textarea, #ajout_cont input{ width: 45%; } #modif_cont input, #modif_cont textarea{ width: 45%; } #inscription_membre textarea, #modif_membre textarea, #ajout_serie textarea, #modif_cont textarea{ } #modif_membre p{ text-align: left; width: 100%; padding-left: 0; margin-left: 0; font-size: 0.8em; } #modif_membre input{ width: 43%; } #modif_membre label{ width: 42%; } #modif_membre textarea { width: 43%; } input#submit_inscription, input#submit_modif, input#submit_serie, input#submit_cont{ display: inline-block; width: 15%; float: right; margin-right: 11.5%; color:#FF0000; } input#submit_cont_edit{ display: inline-block; width: 15%; float: right; margin-right: 10.3%; color:#FF0000; } input#image_profil, input#files{ float:left; margin: 0px; margin-left: 3%; margin-top: 10px; } input#files{ margin-bottom :10px; } #image_label, #files_label{ margin-right: 0px; margin-top:10px; margin-bottom: 10px; } .images_profil{ max-width: 50px; max-height: 50px; float:none; display:block; } #avatars input.radio_images{ margin-right: 5px; float:left; vertical-align: middle; width: auto; } #avatars{ position: relative; width: 100%; min-height: 50px; margin-top: 50px; } .choix_avatar{ position: relative; max-width:15%; float:left; } #avatars input{ padding-top: 15px; padding-bottom:15px; position: relative; } #avatars label{ width: 50px; height: 50px; display:block; } #page_series{ width: 1160px; padding: 20px; margin: 0 auto; } #page_series ul{ list-style-type: none; padding: 10px; } #bot{ float:right; margin-top: 4px; } #bot_check input{ width: 58%; } #bot_check label{ margin-right: 0; } #envoi_courriel{ width:600px; height: 248px; position: absolute; background-color: #000; top: 25%; left:35%; border: 1px solid #FFF; padding: 5px; } #report, .annulation_report{ width:500px; height: 350px; position: absolute; background-color: #000; top: 10%; left:36.6%; border: 1px solid #FFF; padding: 5px; } .radio_report{ float:left; margin:0px 10px 0px 10px; } .raison_report{ margin-left: 30px; margin-top:10px; width:252px; height:102px; } #report label{ margin-left: 10px; font-size:1em; } #envoi_message{ width: auto; height: auto; } #envoi_membre{ width: 196px; border:none; } #envoi_sujet{ width:595px; } #soumettre_message, #soumettre_report{ float:right; color: #FF0000; } #form_contact_membre, #form_report, .confirmer_signalement{ position: absolute; top:0; left:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display:none; z-index: 26; } #fermer_envoi, #fermer_report{ float:right; font-size: 0.5em; } /* ordre des images */ #sortable { list-style-type: none; margin: 0; padding: 0; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; text-align: center; background: #121414; border: 1px solid #1c2020; } .order_mini{ max-width:100%; max-height:70%; } .edit-mini, .supp-mini{ width:20px; height: 20px; margin:0; padding: 0; } .edit-mini{ float:left; } .supp-mini{ float: right; } .edit-icons{ height: 20px; width: 100%; } .edit-icons a img:hover{ cursor:pointer; } /* admin */ #contenu_admin{ margin: 0 auto; width: 1200px; } #contenu_admin h1{ margin-top:50px; margin-bottom: 25px; } #admin_menu{ display:inline; width: 100%; } #admin_menu li{ float:left; width:25%; } #admin_menu a:hover{ color:@ahColor; } .admin_col{ float:left; width: 33%; } .admin_col ul{ list-style-type: none; } #signalement{ margin-bottom:25px; } #page_erreur{ width: 1200px; position: relative; margin:0 auto; } /*tooltips */ .ui-tooltip{ background: #000; border: 1px; font-size: 0.8em; min-height: 20px; color: @iFtColor; } .aide{ width: 15px; height: 15px; float: right; margin-right : 7%; margin-top :1px; } #aide_photos{ position: absolute; right: 0.3%; top: 18%; } #aide_ajout_photos{ position: absolute; right: 0; bottom: 21%; } #aide_modif_serie{ float:none; } #modif_cont_div{ max-width: 1200px; margin: 0 auto; padding-left: 30px; } #modif_cont_div > h1{ margin-top: 20px; } #prev_image{ width: 30%; float:left; padding-top: 20px; } #prev_image img{ max-width: 50%; max-height : 300px; } .clear{ clear:both; width: 100%; font-size: 1px; } .chargement, .chargement_sort{ display:none; text-align:center; } .chargement img, .chargement_sort img{ width: 15px; height: 15px; margin-right: 5px; } #confirmation_courriel{ font-size: 0.6em; color:#02874a; text-align: right; margin-right: 14%; } #textes-edit{ width: 1200px; margin:0 auto; } .modif_textes{ float:right; color:#FF0000; } .pass_change{ float:right; } .locked{ color: #999999; } .locked:hover{ cursor: not-allowed; } // Options admins .css_couleurs{ float:left; width: 25%; } .css_fields{ float:left; width: 30%; margin-left:1%; margin-right: 1%; margin-top: 50px; border: 1px solid #FFF; } .css_fields label{ width:40%; //float:right; } #change_css{ float:right; margin-right: 4.5%; color: #FF0000; } .modif_comm{ float:right; color: #FF0000; margin-right: 50%; } .chars{ padding-top:10px; } p.signalement{ font-size: 0.5em; } .admin_comm_img{ display:block; margin: 0 auto; } /* Recherche */ #page_recherche{ width: 100%; position: relative; margin: 0 auto; padding:1%; } #barre_recherche{ float:right; width: 260px; } .details_serie{ margin-top:20px; margin-bottom:20px; } .details_serie li{ list-style-type: none; } #liste_resultats, #liste_resultats_auteurs{ margin-left: 15px; } #submit_search{ margin-right: 3%; display:inline; width:30px; } #rechercher label{ float:none; margin-right: 0; } #recherche{ display:inline; width: 121px; } .membre_img{ width: 100%; padding:0; } //exposants .exposant{ font-size: 0.6em; vertical-align: super; font-weight: bold; } @media all and (min-width:1350px){ #contenu_accueil{ height: 100px; } } @media all and (min-width:700px) and (max-width:1349px){ #contenu_accueil{ height: 120px; } } @media all and (min-width:550px) and (max-width:699px){ #contenu_accueil{ height: 140px; } } @media all and (min-width:550px) and (max-width:699px){ #contenu_accueil{ height: 140px; } } @media all and (min-width:470px) and (max-width:549px){ #contenu_accueil{ height: 160px; } } @media all and (max-width:420px){ h2#espacefLink a{ float:left; } #hgroup{ width: 100%; } } @media all and (min-width:380px) and (max-width:469px){ #contenu_accueil{ height: 180px; } } @media all and (min-width:380px) and (max-width:469px){ #contenu_accueil{ height: 180px; } } @media all and (min-width:320px) and (max-width:379px){ #contenu_accueil{ height: 200px; } }