/***************************************************************************** * Règles génériques * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ * { box-sizing: border-box; } a { text-decoration: none; color: inherit; cursor: pointer; } div.clear { clear: both; } div.keywords { display: none; } /***************************************************************************** * Cadre "Local" * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ div.local { display: none; } /***** TABLETTES, DESKTOP ****************************************************/ @media only screen and (min-width: 800px) { div.local { z-index: 3; display: inline-block; position: fixed; left: 5px; top: 5px; width: 110px; padding: 2px 20px; text-align: center; font-family: 'Roboto', sans-serif; font-size: 14px; color: white; background: #B90000; font-weight: bold; border: 1px solid white; box-shadow: 5px 5px 5px #000; } } /***************************************************************************** * Body * *****************************************************************************/ body { margin: 0; padding: 0; background: #EEE; overflow-wrap : break-word; word-wrap: break-word; scrollbar-color: #526152 #ACB7AC; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } /***************************************************************************** * Page * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ #id_page { display: block; position: relative; width: 100%; background: #FFFFFF; font-family: 'Josefin', sans-serif; font-size: 12pt; } /***** DESKTOP ***************************************************************/ @media only screen and (min-width: 1040px) { #id_page { margin: 10px auto; width: 1040px; box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.40); border-top: 6px solid #49a7a4; } } /***************************************************************************** * En-tête * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ #id_header { display: block; position: relative; padding: 10px 0 0 30px; background: url(images/background_header.jpg) no-repeat center; background-size: cover; } #id_header h1 { margin: 0; padding: 0; font-family: 'Mogra', sans-serif; color: white; font-size: 26pt; text-shadow: 2px 2px 2px #060909; } #id_header h2 { margin: 0; padding: 0; font-family: 'Pacifico', sans-serif; color: white; font-size: 15pt; font-style: italic; text-shadow: -2px -2px 2px #060909, 2px 2px 2px #060909; } /***** DESKTOP ***************************************************************/ @media only screen and (min-width: 1040px) { #id_header { height: 134px; } #id_header h1 { font-size: 36pt; } #id_header h2 { font-size: 25pt; } } /***************************************************************************** * Menu de navigation * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ #id_nav { display: block; position: relative; color: #49A7A4; background: #F0F0F0; } #id_nav ul { list-style-type: none; margin: 0 0 0 20px; padding: 0; } #id_nav li { display: inline-block; margin-right: 10px; padding: 0 12px; line-height: 40px; width: 150px; cursor: pointer; } #id_nav li:hover { color: #FFFFFF; background: #49A7A4; } #id_nav li.active, #id_nav li.active:hover { color: #FFFFFF; background: #49A7A4; cursor: default; } /***** TABLETTES *************************************************************/ @media only screen and (min-width: 800px) { #id_nav li { width: 180px; } } /***** DESKTOP ***************************************************************/ @media only screen and (min-width: 1040px) { #id_nav li { width: inherit; margin-right: 0; transition: all .6s; } #id_nav li:hover { transition: all .6s; } } /***************************************************************************** * Information sur la catégorie * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ #id_category { display: none; position: relative; color: #FFFFFF; background: #49A7A4; margin: 0; padding: 20px 0 20px 25px; font-size: 15pt; } /***** TABLETTES, DESKTOP ****************************************************/ @media only screen and (min-width: 800px) { #id_category { display: block; } #id_category img { height: 45px; cursor: pointer; filter: brightness(80%); transition: all .6s;} #id_category img.couverts { position: absolute; top: 10px; right: 10px; } #id_category img.index { position: absolute; top: 10px; right: 70px; } #id_category img:hover { transform: scale(1.25); filter: brightness(125%); transition: all .6s; } } /***************************************************************************** * Section principale * *****************************************************************************/ #id_section { display: block; position: relative; width: 100%; padding: 10px 0; color: #666666; } /***************************************************************************** * Article * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ #id_article { display: block; position: relative; width: 100%; margin: 0; padding: 10px 15px 10px 20px; } #id_article hr { color: #EEEEEE; background: #DDDDDD; } #id_article h3 { position: relative; color: #FFFFFF; background: #49A7A4; margin: 0 0 15px 0; padding: 8px 0 8px 15px; font-size: 15pt; font-weight: normal; } #id_article h3 img.close { position: absolute; left: -15px; top: -15px; cursor: pointer; } #id_article h6 { margin: -10px 0 15px 0; color: #49A7A4; font-size: 10pt; } #id_article img { max-width: 300px; max-height: 300px; float: left; margin: 0 15px 15px 0; } #id_article img.li { float: right; margin: 0 0 0 15px; } #id_article img.print { position: absolute; top: -2px; right: 10px; cursor: pointer; filter: brightness(80%); transition: all .6s; } #id_article img.print:hover { transform: scale(1.25); filter: brightness(105%); transition: all .6s; } #id_article img.cook { position: absolute; top: -2px; right: 80px; cursor: pointer; filter: brightness(80%); transition: all .6s; } #id_article img.cook:hover { transform: scale(1.25); filter: brightness(105%); transition: all .6s; } #id_article table { border-collapse: collapse; } #id_article div.recette h3, #id_article table h3 { margin: 0 0 12px 0; padding: 0; font-size: 16pt; font-weight: bold; color: #666666; background: transparent; } #id_article table.indications th { text-align: left; padding-right: 5px; vertical-align: top; } #id_article table.indications td { vertical-align: top; } #id_article table.accompagnement th, #id_article table.accompagnement td { vertical-align: top; } #id_article table.accompagnement img { max-width: 20px; } #id_article div.recette-left { text-align: left; padding-right: 20px; vertical-align: top; font-weight: normal; } #id_article div.recette-left > ul { margin: 0 0 0 -20px; } #id_article div.recette-left > h4 { margin: 4px 0; padding: 0 0 2px 0; border-bottom: 1px dotted silver; } #id_article div.recette-right { border-left: 3px solid #; vertical-align: top; } #id_article div.recette-right > ol { margin: 0 0 0 -20px; } #id_article button.button_link { padding: 3px 25px; border-radius: 15px; cursor: pointer; } /***** TABLETTES, DESKTOP ****************************************************/ @media only screen and (min-width: 800px) { #id_article div.recette-left { float: left; width: 30%; } #id_article div.recette-right { float: left; width: 70%; } } /***** TABLETTES, DESKTOP ****************************************************/ @media only screen and (min-width: 1040px) { #id_article { width: 75%; float: left; } } /***************************************************************************** * Introduction * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ #id_intro { text-align: center; } #id_intro img { max-width: inherit; max-height: inherit; float: none; } #id_intro div.carte { display: inline-block; position: relative; margin: 5px; width: 150px; height: 130px; border: 1px solid gray; background: url(images/nop.png) no-repeat center; background-size: cover; cursor: pointer; overflow: hidden; } #id_intro div.carte h3 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 5px; color: #FFF; background: rgba(0, 0, 0, 0.5); font-size: 11pt; text-align: center; } /***** TABLETTES, DESKTOP ****************************************************/ @media only screen and (min-width: 800px) { #id_intro img { margin: -50px 0 0 0; } } /***************************************************************************** * Sommaire * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ #id_summary { display: none; } /***** TABLETTES, DESKTOP ****************************************************/ @media only screen and (min-width: 1040px) { #id_summary { display: block; width: 25%; float: right; margin: 0; padding: 10px 20px 10px 15px; overflow-x: hidden; } #id_summary h4 { margin: 0 0 8px 0; padding: 0 0 4px 0; border-bottom: 1px solid #EFEFEF; font-weight: bold; font-size: 10pt; } #id_summary input[type='text'] { border: 1px solid #CCCCCC; padding: 5px 10px; } #id_summary a { color: #49A7A4; transition: all .6s; } #id_summary a:hover { color: #000000; transition: all .6s; } #id_summary a.link_category.selected, #id_summary a.link_category.selected:hover { color: maroon; cursor: default; } #id_summary a.link_recette.selected, #id_summary a.link_recette.selected:hover { color: maroon; cursor: default; } } /***************************************************************************** * Pied de page * *****************************************************************************/ /***** MOBILES, TABLETTES, DESKTOP *******************************************/ #id_footer { display: none; } /***** TABLETTES, DESKTOP ****************************************************/ @media only screen and (min-width: 1040px) { #id_footer { display: block; color: #FFFFFF; padding: 20px 10px; background: #3C4044; text-align: center; } } /***************************************************************************** * Ecran d'aide * *****************************************************************************/ #id_help { display: block; width: 25%; float: right; margin: 0; padding: 10px 20px 10px 15px; overflow-x: hidden; } #id_help h4 { margin: 0 0 8px 0; padding: 0 0 4px 0; border-bottom: 1px solid #EFEFEF; font-weight: bold; font-size: 10pt; } #id_help input[type='text'] { border: 1px solid #CCCCCC; padding: 5px 10px; } #id_help a { color: #49A7A4; line-height: 30px; transition: all .6s; } #id_help a:hover { color: #000000; transition: all .6s; } #id_help a.link_category.selected, #id_help a.link_category.selected:hover { color: maroon; cursor: default; } #id_help a.link_recette.selected, #id_help a.link_recette.selected:hover { color: maroon; cursor: default; } table.help td, table.help th { padding: 0 10px; } td.center { text-align: center; } th.border, td.border { border: 1px solid gray; } /***************************************************************************** * Animation sur traitement long * *****************************************************************************/ #idWait { z-index: 25; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); text-align: center; display: table-cell; vertical-align: middle; display: none; } #idWait table { width: 100%; height: 100%; border-collapse: collapse; text-align: center; } #idWait table td { height: 100%; padding: 0; vertical-align: middle; }