/**
 * @file
 * Layout Styling (DIV Positioning)
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Zen Columns layout method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow
 */

/* only iPhone not for iPad */
@media screen and (max-device-width: 480px) {
/*@media screen and (max-width: 480px) {*/

.teaser-media {
    margin: 0px 0px;
  margin-top: 5em;
}

#block-menu-block-2, 
#block-menu-block-3 {
  display: none;
}

.node.node-teaser .node-content {
  width: 100%;
}
.node.node-article.node-teaser h2 {
  margin-left: 0px;
  margin-right: 0px;
}

#block-soul-common-soul-main-feature-v5 {
  height: auto;
  margin-bottom: 6px;
}

#block-locale-language-content {
  background-image: none;
  height: 27px;
}
#block-locale-language-content li {
  margin-top: 0px;
}

body.no-sidebars #main-wrapper #main #content .region-content {
  padding-left: 0px;
  padding-right: 0px;
}

body.page-color-fools #content {
  background-image: url('../images/color-fools-logo-mobile.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 138px;
}

#block-commerce-cart-cart {
  width: 100%;
  margin-top: 70px;
}

.node.node-product-shop .field-type-commerce-product-reference {
  float: none;
  border-left: none;
  padding-left: 5px;
  min-width: 150px;
}
#edit-quantity {
  width: auto;
}
.node.node-product-shop .field-name-title-field, .node.node-product-shop .field-name-body {
  width: 100%;
  clear: both;
}
.node.node-product-shop .field-name-title-field h2 {
  font-size: 1.8250em;
}
.node.node-product-shop #field_images_slider {
  margin-bottom: 25px;
}
#block-soul-common-live-color-fools-map {
  display: none;
}

.commerce-line-item-views-form input.form-text {
  width: auto;
}
.commerce-line-item-views-form table input[type=submit] {
  margin-left: 0px;
  padding: 5px 5px;
}
#customer-profile-billing-field-phone-add-more-wrapper input.form-text,
#addressfield-wrapper input.form-text {
  width: 295px;
}
div.addressfield-container-inline > div.form-item {
  margin-right: 0em;
}

.section-color-fools .node {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.section-color-fools .view-mode-full.with-video-normal .field-name-field-videos iframe {
   width: 100%;
  height: 200px;
}

.section-color-fools #block-soul-common-soul-logo-mobile {
  display: none;
}

#block-soul-common-soul-pub-ad-take-over .content .tty11-content #take-over-compter, 
#block-soul-common-soul-pub-ad-take-over .content .tty11-content a#skip-take-over {
  top : 0px;
}
#block-soul-common-soul-pub-ad-take-over .content {
  width: 90%;
  height: 90%
  margin-left: 5%;
}
#block-soul-common-soul-pub-ad-take-over .content .tty11-content iframe {
  width: 100% !important;
  height: 100% !important;
}

#block-soul-common-soul-pub-ad-take-over .content .tty11-content {
  width: 100% !important;
  height: 90% !important;
  padding: 0px;
  margin-left: 5%;
  margin-top: 28px;
  padding-top: 28px;
}
#block-soul-common-soul-pub-ad-take-over .content {
}


#page-wrapper.page-with-adv {
  padding: 0px 0px;
}

/* use for test on desktop
@media screen and (max-width: 480px) {
*/


/* header */
#navigation,
#header {
  background-image: none;
}
/* share */
#block-soul-common-live-share {
  float: left;
}

#block-soul-common-live-share-mobile ul li a,
#block-soul-common-live-share ul li a {
  margin-right: 0px;
}
#block-soul-common-live-share {
  height: 28px;
  width: 192px;
  margin-left: 5px;
}
#block-soul-common-live-share ul li a {
  margin-left: 0px;
  margin-right: 5px;
}
/* search */
#block-search-form .form-text {
  width: 105px;
  margin-right: 5px;
}


/* h1 */
h1.title {
  margin-left: 5px;
  margin-right: 5px;
}

/* Breves */
body .view-breves.view-display-id-page .views-row {
  padding: 0.75em 0px;
}

/* form */
input.form-text {
  width: 310px;
}

/* contact */
body #node-9090 span.tty11-dash,
.contact-image {
  display: none;
}

/* Node */
.node/*.node-teaser*/ {
  width: 310px;
  margin-left: 5px;
  margin-right: 5px;
}
.ad_news_mobile,
body .node.node-teaser {
  margin-bottom: 25px;
}
.node.node-video {
  width: 310px;
  margin-left: 0px;
  margin-right: 0px;
}
.node.node-article.node-teaser .field-name-field-tags .field-items {
width: 250px;
}
.node .tag-cat-wrapper {
  padding-top: 10px;
  clear: both;
  font-size: 0.8em;
}
.view-mode-full #node-comments-wrapper {
  margin-top: 0em;
}

/* Comments */
#comments {
  margin: 1.5em 0 1.5em 0;
}
/* Collab */
body .node-teaser-collab .content {
  margin-left: 0px;
}
h2.node-title {
  clear: left;
}

/* Agenda */
.page-agenda .list-events,
.page-agenda .send-event,
.page-agenda .agenda-header {
  margin-left: 5px;
  margin-right: 5px;
}

/* Le mag */
body .node-le-mag.node.view-mode-full, 
body .node-le-mag.node.node-teaser {
  margin-bottom: 0px;
}
body .node-le-mag .title-wrapper, 
body .node-le-mag .field-name-body {
  margin-left: 0px;
  width: 310px;
}
body #block-views-le-mag-block {
  margin-bottom: 20px;
}
body #block-soul-common-soul-le-mag-history {
  display: none;
}
body .node-le-mag .nav-le-mag,
body .node-le-mag .field-name-field-generic-secondary-img {
  display: none;
}
/*  */
body .display-screen {
  display: none;
}
body .display-mobile {
  display: inline;
}

/* Header */
body #header  { 
  padding-top: 0px;
}
body #header .skin_soul_logo {
  display: none;
}
body #block-soul-common-soul-search-mobile,
body #block-soul-common-soul-share-mobile,
body #block-soul-common-soul-menu-mobile,
body #block-soul-common-soul-logo-mobile,
body #block-soul-common-soul-last-mag-mobile,
body #block-soul-common-soul-pub-leaderboard-mobile-01,
body #block-soul-common-soul-pub-leaderboard-mobile-02,
body #block-soul-common-soul-v5-pub-ad-mobile-00,
body #header .skin_soul_logo_mobile {
  display: inline;
}
body #block-menu-block-1,
body #block-soul-common-soul-pub-ad-top,
body #block-soul-common-soul-last-mag {
  display: none;
}
body #block-soul-common-soul-last-mag-mobile {
  float: right;
}
.ad_leaderboard_mobile {
  height: 120px;
  overflow: hidden;
}

body #navigation {
  height: 100px;
}
body .with-navigation #content, 
body .with-navigation .region-sidebar-first, 
body .with-navigation .region-sidebar-second {
  margin-top: 100px;
}

#tty11-menu-mail-menu-mobile {
  width: 310px;
  margin: 0px 5px 15px 5px;;
  font-size: 1.5em;
}


 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, /*iframe, object, embed,*/ video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto !important; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}


h1 {
  font-size: 22px;1.5em;
  line-height: 24px;1.75em;
}

/*
 * Body
 */
body {
  background-position: center top;
}


#page-wrapper,
.region-bottom {
  /*
   * If you want to make the page a fixed width and centered in the viewport,
   * this is the standards-compliant way to do that. See also the ie6.css file
   * for the necessary IE5/IE6quirks hack to center a div.
   */
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  padding: 0px;
  overflow: hidden;
}


#page {
}

/*
 * Header
 */
#header {
/*  height: 137px;*/
}

#header #logo {
width: 132px;
height: 104px;
}
#header #header-main-feature-nav,
#header #block-soul-common-soul-pub-leaderboard,
#header #block-soul-common-soul-main-feature {
  display:none;
}

#header .section {
}

.breve-col,
#header #leaderboard {
  display: none;
}

.region-header {
}

/*
 * Main (container for everything else)
 */
#main-wrapper {
  position: relative;
}

#main {
}

/*
 * Content
 */
#content,
.no-sidebars #content {
  float: left; /* LTR */
  width: 320px;
  margin-left: 0; /* LTR */
  margin-right: -320px; /* LTR */ /* Negative value of #content's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */
}

.sidebar-second #content {
  float: left; /* LTR */
  width: 320px;
  margin-left: 0; /* LTR */
  margin-right: -320px; /* LTR */ /* Negative value of #content's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */
}
.sidebar-second #content {
/*  width: 310px;
  margin-left: 0;*/ /* LTR */
/*  margin-right: -332px;*/ /* LTR */ /* Negative value of #content's width + left margin. */
}

#content .section {
  margin: 0;
  padding: 0;
}

body .view-id-taxonomy_term.view-display-id-page ul.pager, 
body .view-id-frontpage.view-display-id-page ul.pager {
  width: auto;
}
body .view-id-taxonomy_term.view-display-id-page ul.pager .pager-ellipsis,
body .view-id-frontpage.view-display-id-page ul.pager .pager-ellipsis,
body .view-id-taxonomy_term.view-display-id-page ul.pager .pager-item,
body .view-id-frontpage.view-display-id-page ul.pager .pager-item {
  display:none;
}


body #block-block-1 .content {
  width: auto;
}
/*
 * Navigation
 */
#navigation {
  float: left; /* LTR */
  width: 100%;
  margin-left: 0; /* LTR */
  margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
  height: 71px;6em; /* The navigation can have any arbritrary height. We picked one
                    that is the line-height plus 1em: 1.3 + 1 = 2.3
                    Set this to the same value as the margin-top below. */
/*background-color: #ff0;*/
}

#navigation .section {
  padding-left: 0px;
  padding-top: 0px;
  /*font-size: 100%;*/
}

#navigation #block-views-menu-mobile-block {
  display: block;
}


#navigation #block-locale-language {
  position: absolute;
  top: -120px;
  right: 10px;
}

body #navigation ul.nice-menu li a {
  background-position: right 5px;
}


.with-navigation #content {
/*background-color: #0ff;*/
}
.with-navigation #content,
.with-navigation .region-sidebar-first,
.with-navigation .region-sidebar-second {
  margin-top: 106px; /* Set this to the same value as the navigation height above. */
}
.header-station.with-navigation #content,
.header-station.with-navigation .region-sidebar-first,
.header-station.with-navigation .region-sidebar-second {
  margin-top: 165px; /* Set this to the same value as the navigation height above. */
}
.header-station.with-navigation {
  background-repeat: no-repeat; 
  background-position: center 70px;;
}

#navigation .section {
}

/*
 * First sidebar
 */
.region-sidebar-first {
  float: left; /* LTR */
  width: 200px;
  margin-left: 0; /* LTR */
  margin-right: -200px; /* LTR */ /* Negative value of .region-sidebar-first's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-first .section. */
}

.region-sidebar-first .section {
  margin: 0 20px 0 0; /* LTR */
  padding: 0;
}

/*
 * Second sidebar
 */
.region-sidebar-second {
  display: none;
}

.region-sidebar-second {
/*
  float: left; /* LTR */
  width: 150px;
  margin-left: 332px; /* LTR */ /* Width of content + sidebar-first. */
  margin-right: -480px; /* LTR */ /* Negative value of .region-sidebar-second's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-second .section. */
*/
/*background-color: red;*/
}

.region-sidebar-second .block {
  float: right;
  margin-bottom: 13px;
}

.region-sidebar-second .section {
  margin: 0 0 0 0px; /* LTR */
  padding: 0;
}

/*
 * Footer
 */
.region-footer {
}

/*
 * Page bottom
 */
.region-bottom /* See also the #page-wrapper declaration above that this div shares. */ {
  padding-top: 25px;
}
#bottom {
  min-width: 300px;
}

#bottom #block-imageblock-1 {
  display: none;
}
body #bottom #block-block-3 {
  position: relative;
  float: left;
  width: auto;
}
/*
.with-video-normal .field-teaser-video embed,
.with-video-normal .field-teaser-video object,
.with-video-normal .field-teaser-video video,
.with-video-normal .field-teaser-video iframe,
.with-video-normal .field-name-field-video embed,
.with-video-normal .field-name-field-video object,
.with-video-normal .field-name-field-video video,
.with-video-normal .field-name-field-video iframe,
*/
.teaser-media object, .teaser-media embed, .teaser-media iframe,
.field-name-field-vimeo iframe,
.field-name-field-vimeo embed,
.field-name-field-vimeo video,
.field-name-field-vimeo object,
.field-teaser-video embed,
.field-teaser-video object,
.field-teaser-video video,
.field-teaser-video iframe,
.field-name-field-video embed,
.field-name-field-video video,
.field-name-field-video object,
.field-name-field-video iframe {
  width: 100% !important;
  height: 200px !important;
  margin: 0px auto;
  /*background: red;*/
  overflow:auto;
}
/*
.field-teaser-video iframe {
  width: 310px !important;
  height: 200px !important;
  overflow:auto;
}
*/
.field-teaser-video video,
.field-teaser-video div {
  width: 310px !important;
  height: 200px !important;
  overflow:hidden;
}

/*
 * Prevent overflowing content
 */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-bottom {
  overflow: visible;
  word-wrap: break-word; /* A very nice CSS3 property */
}



/*
 * If a div.clearfix doesn't have any content after it and its bottom edge
 * touches the bottom of the viewport, Firefox and Safari will mistakenly
 * place several pixels worth of space between the bottom of the div and the
 * bottom of the viewport. Uncomment this CSS property to fix this.
 * Note: with some over-large content, this property might cause scrollbars
 * to appear on the #page-wrapper div.
 */
/*
#page-wrapper {
  overflow-y: hidden;
}
*/


}