/* CSS stylesheet for ecofusion.ca 
 * (mostly) written by Éric Tremblay
 */

html {
  font-size:1.0em;
}

ld { list-style-position: outside; }
ul { list-style-position: outside; }
li { list-style-position: outside; }

a img {
  border:none;
}

h2 {
  margin: 0px;
  /*color:  #005511;*/
  color:    #000033;
  /*text-shadow:        1px 1px 1px #000;*/
}

h3 {
  margin: 0px;
  /*color:  #005511;*/
  color:    #000033;
  /*text-shadow:        1px 1px 1px #000;*/
}

.navyblue {
  color:    #000033;
}

.greenclean {
  color:    #66FF66; /* also see a:link and a:visited below */
}

.whitetext {
  color: #fff;
  text-shadow:        1px 1px 1px #44a;
}

.language {
  font-size: 150%;
}

.email {
  font-size: 150%;
}

.copyright {
  font-size: 200%;
  display:   inline-block;
  float:     right;
}

/*a:link     {color:#9de8a1;}  / * unvisited link */
/*a:visited  {color:#9de8a1;}  / * visited link */
a:link     {color:#99ff99;}  /* unvisited link */
a:visited  {color:#99ff99;}  /* visited link */
a:hover    {color:#DDDDFF;}  /* mouse over link */
a:active   {color:#AA0000;}  /* selected link */ 

#buttoncontainer_div a:link     { color:#CCC; } 
#buttoncontainer_div a:visited  { color:#CCC; } 
#buttoncontainer_div a:hover    { color:#CCC; } 
#buttoncontainer_div a:active   { color:#CCC; }

#loading {
  display:               block;
  position:              absolute;
  /*width:                 100%;*/
  opacity:               0.5;
  background:            white;
  text-align:            left;
  overflow:              hidden;
  -moz-transition:       opacity 0.5s linear;
  -ms-transition:        opacity 0.5s linear;
  -o-transition:         opacity 0.5s linear;
  -webkit-transition:    opacity 0.5s linear;
  transition:            opacity 0.5s linear;
}

body {
  background-color:      white;
  /*background-image: url(images/left-grad.png);
  background-position:left;
  background-repeat: repeat-y;*/
  background-image:      url(images/background.jpg);
  background-repeat:     no-repeat;
  background-attachment: fixed;
  background-size:       cover;
  margin:                0px;
  line-height:           1.25;
  font-family:           Sans-Serif;
  text-align:            center;
}

.shadow1 {
  -khtml-box-shadow:   5px 5px 10px rgba(0,0,0,0.4);
  -webkit-box-shadow:  5px 5px 10px rgba(0,0,0,0.4);
  box-shadow:          5px 5px 10px rgba(0,0,0,0.4);
}

div#sections_panel {
  position:absolute;
  opacity: 0;
  /* height: 0px; */
  /*background: #A00;*/
  background:          #491;
  border-radius:       16px 16px 16px 16px;
  vertical-align:      middle;
  overflow:            hidden;
  -moz-transition:     height 0.2s linear, opacity 0.2s linear;
  -ms-transition:      height 0.2s linear, opacity 0.2s linear;
  -o-transition:       height 0.2s linear, opacity 0.2s linear;
  -webkit-transition:  height 0.2s linear, opacity 0.2s linear;
  transition:          height 0.2s linear, opacity 0.2s linear;
  z-index:             5000;
  -khtml-box-shadow:   5px 5px 10px rgba(0,0,0,0.4);
  -webkit-box-shadow:  5px 5px 10px rgba(0,0,0,0.4);
  box-shadow:          5px 5px 10px rgba(0,0,0,0.4);
  /* line-height: 24px; */
}

div#sections_panel > div {
  /* position: relative; */ 
  /*font-size:           18px;*/
  background:          #FFF;
  margin:              10px;
  padding:             20px;
  vertical-align:      middle;
  overflow:            hidden;
  width:               auto;
  height:              auto;
  border-radius:       8px 8px 8px 8px;
  line-height:         1.4;
  font-family:         Sans-Serif;
}

.menu_background {
  position:            absolute;
  opacity:             0;
  display:             inline-block;
  background:          white;
  /*background-image:    url(images/transwhitebg.png);*/
  border-width:        2px;
  border-style:        solid;
  border-color:        #447744;
  padding:             4px;
  overflow:            hidden;
  -moz-transition:     height 0.2s linear, opacity 0.2s linear;
  -ms-transition:      height 0.2s linear, opacity 0.2s linear;
  -o-transition:       height 0.2s linear, opacity 0.2s linear;
  -webkit-transition:  height 0.2s linear, opacity 0.2s linear;
  transition:          height 0.2s linear, opacity 0.2s linear;
  width:               auto;
  height:              auto;
  text-align:          left;
  -khtml-box-shadow:   5px 5px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow:  5px 5px 10px rgba(0,0,0,0.5);
  box-shadow:          5px 5px 10px rgba(0,0,0,0.5);
}

.menu_foreground {
  display:             inline-block;
  background:          white;
  opacity:             0;
  position:            absolute;
  overflow:            hidden;
  width:               auto;
  height:              auto;
  text-align:          left;
}

.video_container {
  width:               1018px;
  height:              574px;
  text-align:          center;
  width:               100%;
  display:             inline-block;
  border:              1px solid #fff;
  /*background:          yellow;*/
}

/*.video_outline {
  vertical-align:      middle;
  width:               1016px;
  height:              572px;
  border:              1px solid #fff;
  text-align:          center;
  width:               100%;
  display:             inline-block;
  / *background:          green;* /
}*/

.video {
  vertical-align:      middle;
  width:               100%;
  height:              auto;
  /*width:               1016px;
  height:              572px;*/
  display:             inline-block;
  box-sizing:          content-box;
  /*background:          red;*/
}

.youtube_video {
  vertical-align:      middle;
  width:               100%;
  height:              auto;
  /*width:               1016px;
  height:              572px;*/
  display:             inline-block;
  box-sizing:          content-box;
  border:              0px;
  /*background:          red;*/
}

.video_warning {
  display:             inline-block;
  background:          url(images/bg-white-25.png);
  width:               100%;
  height:              100%;
  /*background:          white;*/
  vertical-align:      middle;
}

.video_warning a:link     { font-weight: bold; }
.video_warning a:visited  { font-weight: bold; }
.video_warning a:hover    { font-weight: bold; }
.video_warning a:active   { font-weight: bold; }

#bigicon_div {
  position:absolute;
  /* position:fixed; */
  opacity:0;
  /* transition: opacity 1.5s linear; */
  width:512px;
  height:512px;
  z-index:-1;
}

#background_div {
  /*-moz-transition:    opacity 0.2s linear;
  -ms-transition:     opacity 0.2s linear;
  -o-transition:      opacity 0.2s linear;
  -webkit-transition: opacity 0.2s linear;
  transition:         opacity 0.2s linear;*/
  position: absolute;
  opacity:0;
  z-index:-2;
}

.mask_div {
  position: absolute;
  /*top: 0px;
  left: 0px;*/
  height: 0px;
  width: 0px;
  background-color: black;
  opacity: 0.05;
  z-index: 4998;
}

.menuicon {
  vertical-align: middle;
}

/* kludge for underline text */
.red {
  color:                        red;
  /* text-decoration:              underline; */
  -moz-text-decoration-color:   red;
  text-decoration-color:        red;
}

.blue {
  color:                        blue;
  /* text-decoration:              underline; */
  -moz-text-decoration-color:   blue;
  text-decoration-color:        blue;
}

.big1 { font-size: 115%; }
.big2 { font-size: 150%; }
.big3 { font-size: 175%; }
.big4 { font-size: 200%; }

.small1 { font-size: 85%; }
.small2 { font-size: 75%; }
.small3 { font-size: 65%; }
.small4 { font-size: 50%; }

.bold      { font-weight:      bold; }
.underline { text-decoration:  underline; }
.italic    { font-style:      italic; }

.button_class {
  /* position: absolute; */
  z-index: 5001;
  -khtml-box-shadow:   3px 3px 6px rgba(0,0,0,0.3);
  -webkit-box-shadow:  3px 3px 6px rgba(0,0,0,0.3);
  box-shadow:          3px 3px 6px rgba(0,0,0,0.3);
  border-radius: 24px;
} 

.picture_with_shadow {
  -webkit-box-shadow:  5px 5px 10px rgba(0,0,0,0.4);
  box-shadow:          5px 5px 10px rgba(0,0,0,0.4);
}

.icon {
  vertical-align:      middle;
}

.contentblock {
  border:             1px solid #fff;
  /*width:              1076px;*/
  width:              100%;
  display:            inline-block;
  /*background-image:   url(images/bg-white-100.png);*/
  background-image:   url(images/bg-blue-95.png);
  background-position: left;
  /*background-repeat:  repeat-y;*/
  -khtml-box-shadow:  5px 5px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  box-shadow:         5px 5px 10px rgba(0,0,0,0.5);
  margin:             0px;
  padding:            1px;
}

#block_globalcontent {
  display:            inline-block;
  width:              1076px;
  box-sizing:         border-box;
}

.headercontentblock {
  /*border:             1px solid white;*/
  border:             0px;
  /*width:              1076px;*/
  width:              100%;
  display:            inline-block;
  /*background-image:   url(images/bg-white-25.png);*/
  /*-khtml-box-shadow:  5px 5px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  box-shadow:         5px 5px 10px rgba(0,0,0,0.5);*/
  margin:             0px;
  padding:            1px;
}

.innercontentblock {
  display:            inline-block;
  box-sizing:         border-box;
  padding:            0px 12px 0px 12px;
}

.headerbg {
  display:            inline-block;
  box-sizing:         border-box;
  /*padding:            0px 12px 0px 12px;*/
}

.header {
  display:            inline-block;
  height:             100%;
  width:              100%;
  border:             1px solid white;
  background:         url(images/headerbg.png);
  background-position: left;
  background-repeat:  no-repeat;
  background-size:    cover;
}

.contentspacer {
  height:             24px;
}

.navbar {
  display:            table;
  width:              100%;
  background-image:   url(images/transgreenbg3.png);
  text-shadow:        1px 1px 1px #000;
  font-weight:        normal;
  padding-top:        1px;
  padding-bottom:     1px;
  vertical-align:     middle;
}

.navbar a:link     {color:#FFFFFF;}  /* unvisited link */
.navbar a:visited  {color:#FFFFFF;}  /* visited link */
.navbar a:hover    {color:#AADDAA;}  /* mouse over link */
.navbar a:active   {color:#AADDAA;}  /* selected link */ 

#slideshow {
  display:            inline-block;
  vertical-align:     middle;
  width:              512px;
  height:             288px;
  overflow:           hidden;
}

#themes {
  display:            inline-block;
  /*width:              400px;
  height:             240px;*/
  overflow:           hidden;
}

#tiles_accueil {
  display:            inline-block;
  box-sizing:         border-box;
  padding:            0px;
  text-align:         center;
  width:              100%;
}

.text_under_header {
  color:              #505050;
  font-size:          80%;
  size:               8px;
  text-align:         center;
  display:            inline-block;
  /*width:              100%;*/
  padding:            8px;
}

.boxshadow {
  -khtml-box-shadow:   4px 4px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow:  4px 4px 8px rgba(0,0,0,0.3);
  box-shadow:          4px 4px 8px rgba(0,0,0,0.3);
}

.quisommesnous {
  display:             inline-block;
  overflow:            hidden;
  width:               100%;
  /*background:          #DDF0DD;*/
  background-image:    url(images/transgreenbg4.png);
  box-sizing:          border-box;
  border-width:        2px;
  border-style:        solid;
  border-color:        #447744;
  padding-left:        16px;
  padding-right:       16px;
  -khtml-box-shadow:   4px 4px 8px rgba(0,0,0,0.25);
  -webkit-box-shadow:  4px 4px 8px rgba(0,0,0,0.25);
  box-shadow:          4px 4px 8px rgba(0,0,0,0.25);
}

.tile_background {
  display:            inline-block;
  box-sizing:         border-box;
  width:              304px;
  height:             204px;
  overflow:           hidden;
  padding:            2px 2px 2px 2px;
  border:             0px;
  margin:             4px 6px 4px 6px;
  /*background:         #AADDAA; -- for this, see RECT_FOCUS_* in javascript */
  -khtml-box-shadow:   4px 4px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow:  4px 4px 8px rgba(0,0,0,0.3);
  box-shadow:          4px 4px 8px rgba(0,0,0,0.3);
}

.tile_foreground {
  display:            inline-block;
  box-sizing:         border-box;
  width:              300px;
  height:             200px;
  overflow:           hidden;
  padding:            0px;
  border:             0px;
  margin:             0px;
  background:         white;
  background-image:   url();
  background-size:    cover;
}

.tile_text {
  display:            inline-block;
  background-image:   url(images/transwhitebg2.png);
  width:              100%;
}

.picturelink:link     {color:#000000;font-weight:bold;}  /* unvisited link */
.picturelink:visited  {color:#000000;font-weight:bold;}  /* visited link */
.picturelink:hover    {color:#004400;font-weight:bold;}  /* mouse over link */
.picturelink:active   {color:#004400;font-weight:bold;}  /* selected link */ 

.pageimage {
  overflow:           auto;
  clear:              left;
  float:              left;
  margin-top:         12px;
  margin-right:       32px;
  margin-bottom:      16px;
  -khtml-box-shadow:  4px 4px 8px rgba(0,0,0,0.35);
  -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.35);
  box-shadow:         4px 4px 8px rgba(0,0,0,0.35);
}

.language {
  margin-top:         12px;
  margin-bottom:      12px;
}

.pagecontent {
  display:            inline-block;
  box-sizing:         border-box;
  width:              100%;
  /*padding:            16px 4px 16px 16px;*/
  padding:            16px 16px 16px 16px;
}

.headercontent {
  display:            inline-block;
  box-sizing:         border-box;
  width:              100%;
  /*padding:            16px 4px 16px 16px;*/
  padding:            0px 16px 0px 16px;
}

.q {
  font-weight:        bold;
  text-decoration:    underline;
  /*font-style:         italic;*/
}

.q2 {
  /*font-size:          16pt;*/
}

.p {
  text-indent:        16pt;
}

#innercontent {
  /* position:absolute; */
  /*background-image: url(images/flower.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  /* z-index: 0; */
  /* width:1024px; TODO: figure out why this initial value overrides setting it from javascript.js */
  text-align:justify;
  /*padding: 8px;*/
  /* margin:0 auto; */
  /* overflow: hidden; */
}

#outercontent {
  /* background-image: url(images/flower.gif); */
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-position: right top;
}

#header_innercontent {
  /* background-color: rgb(174, 10, 10); */
  margin: 0px;
  border: 0px;
}

#footer_innercontent {
  /* background-color: rgb(174, 10, 10); */
  /*font-size: 12px;*/
  text-align: right;
  color: #555;
  margin: 0px;
  border: 0px;
}
#footer_innercontent a:link     { color:#FF4444; } 
#footer_innercontent a:visited  { color:#FF4444; } 

#button_gorendezvous {
  /* position:absolute; */
  z-index: 4000;
  opacity: 1;
  -khtml-box-shadow:   4px 4px 8px rgba(0,0,0,0.4);
  -webkit-box-shadow:  4px 4px 8px rgba(0,0,0,0.4);
  box-shadow:          4px 4px 8px rgba(0,0,0,0.4);
  border-radius: 24px;
}

#googlemap_div {
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  width: 720px;
  height: 512px;
  -khtml-box-shadow:   5px 5px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow:  5px 5px 10px rgba(0,0,0,0.5);
  box-shadow:          5px 5px 10px rgba(0,0,0,0.5);
  border-radius: 0px;
}

.twocolumn {
    -moz-column-count:     2;       /* Firefox */
    -webkit-column-count:  2;       /* Chrome, Safari, Opera */
    column-count:          2;
} 

.threecolumn {
    -moz-column-count:     3;       /* Firefox */
    -webkit-column-count:  3;       /* Chrome, Safari, Opera */
    column-count:          3;
} 

.fourcolumn {
    -moz-column-count:     4;       /* Firefox */
    -webkit-column-count:  4;       /* Chrome, Safari, Opera */
    column-count:          4;
} 

.content {
  /* width:1024px; */
  font-family: Sans-Serif;
}