/* html5 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block }
/* mise en page */
#container { position: relative; }
.cols, .nav { display: table; border-collapse: collapse; width: 100%; }
.cols > div, .nav li { display: table-cell; vertical-align: top; }
section.cols, #side { table-layout: fixed; }
#bandeau > div { margin:0 32px; }
#content { padding: 5px 18px; clear: both; }
#large { padding: 5px 60px; }
footer { font-size: 0.8em; text-align: center; padding: 10px 0; font-weight: bold; }
#titre, .bxslider li span { font-family: Courgette, cursive; font-weight: bold; }
img { max-width: 100%; }
.icon { padding: 5px 12px; font-size: 24px; vertical-align: -10%; }
iframe { margin: 20px auto 10px; }
.arrow { width: 120px; cursor: pointer; }
.col { float: left; width: 49%; }
.no_img { display: none; }

/* header */
header { overflow: auto; height: 110px; background: url(images/header.jpg) no-repeat right top; }
header div { margin: 0; text-align: left; }
#logo { position: absolute; top: 0; }
#titre { text-shadow: 2px 2px 4px #000; }
#ss_titre { margin: 5px 0 0 28px; }
nav { width: 100%; overflow: auto; }
nav ul { list-style: none; margin: 0; }
nav li { padding: 0; float: left; font-weight: bold; }
nav a { display: block; text-decoration: none; padding: 4px 4px 6px; }
nav li.courant { font-size: 1.02em; padding: 4px; }
nav span { font-size: 15px; padding: 0 10px 0 0; }
/* tabs */
#bandeau .icon { padding-left: 0; }
#tabs article { display: none; margin: 20px 10px; }
#tabs article.show { display: block; }
ul.nav, #bandeau ul { list-style: none; margin: 0; }
#bandeau li { font-size: 1.15em; font-weight: bold; }
li.t_on, li.t_off { padding: 5px 0 5px 12px; font-size: 1.12em; font-weight: bold; }
li.t_off { cursor: pointer; }
/* acceuil */
#bandeau img:hover { transform: scale(1.02); }
#marches { padding-left: 18px; }
/*#marches a { text-decoration: none; }
#marches a { color: #333; }*/
.cols_pad { padding: 10px 20px; width: 210px; }
/* commande */
.col_left { float: left; }
.small { font-size: 0.82em; }
tr.strong_cell td { font-weight: bold; }
tr.strong_cell td, .categorie th { font-size: 1.02em; }
#port td { width: 68px; }
#form_comment { float: right; width: 220px; margin: 10px 40px; }
#form_comment p { margin-top: 56px; }
/* formulaires */
#form_mail { margin: 20px 0; }
fieldset { padding: 5px 10px; }
legend { font-weight: bold;	padding: 10px; margin-left: 20px; font-size: 1.1em; }
.form_control { margin: 20px 0; }
label {
  display: block; float: left; font-weight: bold; padding: 2px 15px 0 0; text-align: right; width: 120px;
}
.bouton {
  position: relative; padding: 5px 10px; margin: 0 20px; border: none; border-radius: 4px;
  cursor: pointer; font-weight: bold; box-shadow: #999 1px 2px 2px;
}
.bouton:active { top: 1px; }
#form_msg { font-weight: bold; }

/* bordures*/
#container {
  border: 1px solid #ccf; box-shadow: 2px 2px 4px #630; border-radius: 0 0 10px 10px; border-top: none;
}
#bandeau li { border: 1px solid #907b5a; }
#pano .bx-viewport { border-color: #4d3b1e; border-radius: 8px; }
fieldset { border: 1px solid #fc9; }
fieldset, legend { border-radius: 6px; }
li.t_off { box-shadow: 1px 1px 2px #999; }
li.t_off:hover { box-shadow: 1px 1px 3px #000; }
.invalid input, .invalid textarea { border: 1px inset #f00; background-color: #fffff6; }

/* couleurs */
body {
  background: radial-gradient(rgba(255,255,250,0.9) 50%, transparent), url(images/fond_rucher.jpg);
}
.test { color: #4c1900; }
#container { background-color: #fff; }
.alternate, .strong_cell { background-color: #ffffe0; }
#pano .bx-viewport { background-color: #4d3b1e; }
nav { background-color: #000b00; }
li.courant { color: #fff; }
legend, .bxslider li span, .categorie th { color: #ffc; }
legend, .bouton, .categorie th, #bandeau li.t_off {
  background: linear-gradient(#d1bea0, #4d3b1e); text-shadow: 0 0 2px #000;
}
.categorie:hover th { color: #cdf3a0; cursor: pointer; }
#titre, nav li a, .bouton, #bandeau li.t_off, li.t_off .icon { color: #fc9; }
nav li a:hover, .bouton:hover, #bandeau li.t_off:hover, li.t_off:hover .icon {
  color: #ffc; text-shadow: 2px 2px 4px #000; }
.bouton:hover, li.menu:hover, #bandeau li.t_off:hover { background: linear-gradient(#cdf3a0, #395725); }
#form_msg, li.t_on, li.t_off:hover, .arrow:hover, #marches a:hover { color: #060; }
.erreur { color: #c00; }
.icon, .strong_cell td, #marches a:hover strong { color: #900; }
.arrow, li.t_off { color: #999; }
.arrow:hover .icon { color: #92bd5a; }

@media all and (min-width: 945px) {
  /* mise en page */
  #container { max-width: 960px; min-height: 670px; margin: 0 auto 10px; }
  #bandeau { width: 198px; padding: 100px 0 20px; }
  #bandeau.bg { width: 220px; }
  #bandeau div h1 { margin-top: -10px; }
  #bandeau h5 { margin-top: 15px; }
  #bandeau > h1 { margin-left: 20px; }
  #pano { margin: 0 0 20px 0; }
  .indent { margin-left: 216px }
  #bandeau li { border-right: none; border-radius: 10px 0 0 10px; margin-bottom: 4px; padding: 10px 0 10px 20px; }
  /* header */
  #logo { width: 197px; height: 212px; background-image: url(../img/logo_rucher.png) }
  #titre { font-size: 2.3em; margin: 2px 0 5px 200px; }
  #ss_titre { font-size: 0.7em; margin: 5px 0 0 28px; }
  nav ul { padding: 0 0 0 250px; }
  nav li { margin-right: 30px; }
  /* acceuil */
  #pano.bx { display: block; }
  .bxslider li { padding: 0; line-height: 130px; text-align: center; }
  .bxslider li img { float: left; margin-right: 10px; }
  .bxslider li span { font-size: 1.55em; line-height: 26px; display: inline-block;
      width: 280px; vertical-align: middle; }
  /* commande */
  #impr_ko { margin-left: 200px; }
  #impr_send { margin:20px 0 0 90px; }
  .col_left { margin: 0 120px 10px 10px; }
}

@media all and (max-width: 944px) {
  /* mise en page */
  section.cols { display: block; width: auto; }
  section.cols > div { display: block; }
  #bandeau div h1 { margin-bottom: 0; }
  #bandeau > h1 { margin: 15px 20px 0; }
  #bandeau ul { margin-top: 20px; }
  #pano { margin: 20px; }
  .no_pad { display: none; }
  #bandeau li { border-radius: 10px; float: left; padding: 10px 20px; margin: 5px; }
  /* header */
  #logo { width: 119px; height: 124px; background-image: url(../img/logo_rucher_sm.png) }
  #titre { font-size: 2em; margin: 2px 0 5px 130px; }
  #ss_titre { font-size: 0.8em; }
  nav ul { padding: 0 0 0 110px; }
  nav li { margin-right: 20px; }
  /* acceuil */
  #pano.bx { display: none; }
  .prod_home { display: inline-block; margin: 0 5px; }
  /* commande */
  #impr_ko { margin-left: 75px; }
  #impr_send { margin:20px 0 0; }
  .col_left { margin: 0 20px 10px 0; }
}

@media all and (max-width:685px) {
  /* mise en page */
  .cols { display: block; width: auto; }
  .cols > div { display: block; }
  .cols_pad { width: auto; }
  #content { padding: 5px 10px; }
  /* header */
  .no_tel { display: none; }
  #titre { font-size: 1.7em; }
  nav ul { padding: 10px 0 0 40px; }
  /* formulaires */
  label { float: none; padding: 2px 0; width: auto; text-align: left; }
}