/* body */

 @font-face {
    font-family: Vascan;
    src: url(vascan.ttf);
 }

 @font-face {
    font-family: Handwritten1;
    src: url(ReenieBeanie-Regular.ttf);
 }

 @font-face {
    font-family: Handwritten2;
    src: url(OoohBaby-Regular.ttf);
 }

 @page {
    size: auto;
    margin: 10mm 10mm 10mm 10mm;
 }

html {
	height: 100%; 
}

body {  /* used */
	height: 100%;
	margin:0 auto;
	padding:0;
	font-family: "Arial, Helvetica, sans-serif";
	color: black;
	font-size: 1em;
	text-decoration:none;
}


/* Footer */

#footer{
	z-index: 1000 ;
	width:100%;
	min-width: 1300px;
	height:20px;
	position:absolute;
	background-color:#009944;
	background-image:none;
	margin:0px auto;
	overflow:hidden;
}

/* Header / Menu / Navigation */

#header {
	background-image: url("http://www.guresekretua.fr/site/bg-body_3x75.png");
	background-color:#009944;
	background-repeat:repeat-x;
	position:fixed;
	top: 0px;
	left: 0px;
	min-width: 1300px;
	width: 100%;
	height:75px;
	margin:0 auto;
	z-index:1000;
}

#header a.logo{
	position:relative;
	padding:0px 0px 0px 100px;
	border:0;
}

#header ul.navigation{
	list-style-type:none;
	margin: -75px 0 0 640px;
	padding:0;
}

#header ul.navigation li{
	white-space: nowrap ;
	float:left;
	height:35px;
}

#header ul.navigation li.active{
	background:url("http://www.guresekretua.fr/site/menu-active_35x35.png");
	background-repeat:no-repeat;
	background-position: right ;
}

#header ul.navigation li a{
	display:inline-block;
	text-decoration:none;
	color:white;
	font-family:"Arial, Helvetica, sans-serif";
	font-family:"Vascan";
	font-size:1em;
	font-weight:bold;
	line-height:2em;
	background:url("http://www.guresekretua.fr/site/menu-separator_2x35.png");
	background-repeat:no-repeat;
	background-position:left;
	height:35px;
	margin-left: 10px ;
	padding-left: 10px ;
	padding-top: 2px ;
	padding-bottom: 2px ;
	text-align: center;
  }

#header ul.navigation li a:hover{
	color:#88ffff;
}

#header .dropdown {
  position: relative;
  display: inline-block;
}

#header .dropdown-content {
  display: none;
  visibility: hidden;
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  background: none ;
  background-color: #009944;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  width 20ch;
  z-index: 1000;
}

#header .dropdown:hover .dropdown-content {
  visibility: visible;
  display: block;
}

#header .dropdown .dropdown-content .dropdown-navigation {
	text-decoration:none;
	color:white;
	font-family:"Arial, Helvetica, sans-serif";
	font-family:"Vascan";
	font-size:0.9em;
	font-weight:bold;
	padding-top: 1px ;
	padding-bottom: 1px ;
}

#header .dropdown .dropdown-content ul.dropdown-navigation {
	padding: 2px;
	width: 100% ;
}

#header .dropdown .dropdown-content ul.dropdown-navigation li {
	white-space: nowrap ; /* No wrapping */
	list-style-type:none ; /* no bullets */
}


#header .dropdown .dropdown-content ul.dropdown-navigation li a:hover{
	color:#88ffff;
}

/* Full Screen Main Content */

#widecontent {
	position: relative;
	overflow:hidden;
	margin-top: 75px;
	margin-left: 0px ;
	margin-right: 0px ;
	margin-bottom: 0px;
	background-image:none;
	width:100vw;
	height:100vh;
	z-index: 100 ;
	background-color: gray;
}

#tourcontent {
	z-index: 100 ;
	border-style: none;
	width: 100%;
	height: 100%;
	// TopMargin=35px, Logo=75px, Footer=20px
	margin-top: 35px;
	height: 90vh;
	height: calc(100vh - 55px);
}

#fullscreen {
	position: absolute;
	overflow:hidden;
	margin-top: 0px;
	margin-left: 0px ;
	margin-right: 0px ;
	margin-bottom: 0px;
	background-image:none;
	width:100vw;
	height:100vh;
	z-index: 100 ;
	background-color: gray;
}

#id-of-iFrame {
    position: absolute;
    height: 100%;
}

/* Main Content */

#guide-text{
	position: relative ;
        border: 5px solid #009944;
	background: white ;
        padding: 10px;
        border-radius: 20px ;
	margin-right: -3000px ;
	float: left ;
	width: 30% ;
	z-index: 20 ;
}

#guide-image{
	position: relative ;
	margin-top: 30px ;
	margin-bottom: 10px ;
	float: right ;
	width: 80% ;
	z-index: 10 ;
}

#guide-image img {
	border: 5px solid #009944;
	padding: 3px;
	border-radius: 20px ;
	width: 95% ;
	-webkit-transition: opacity 1s linear;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
	transition: opacity 1s linear;
}

#content{
	position: relative;
	margin:0 auto;
	margin-top: 100px;
	margin-left: 100px ;
	margin-right: 100px ;
	margin-bottom: 5px;
	background-image:none;
	height:auto;
	overflow:hidden;
	font-family: "Arial, Helvetica, sans-serif";
	color:#7f7154;
	font-size: 1em;
	text-decoration:none;
	z-index: 100 ;
	width: 100vw ;
	/* height: 100vh ; */
}

#content h1{
	position:relative;
	font-size:2em;
	margin: 20px 0 10px 0;
	clear: left ;
}

#content h2{
	position:relative;
	font-size:1.6em;
	margin: 8px 0 5px 0;
	clear: left ;
}

#content h3{
	position:relative;
	font-size:1.3em;
	margin: 3px 0 3px 0;
}

#content p {
	position:relative;
	text-align:justify;
	margin: 1px 0 2px 0;
}

#content div.note-right {
  margin: 5px 5px 5px 30px ;
  border: 5px solid #009944;
  background: white ;
  padding: 10px;
  border-radius: 20px ;

}

#content div.note-left {
  margin: 5px 30px 5px 5px ;
  border: 5px solid #009944;
  background: white ;
  padding: 10px;
  border-radius: 20px ;
}

#content div.handwritten1 {
        font-family: "Handwritten1";
        font-size: 1.4em ;
}

#content div.handwritten2 {
        font-family: "Handwritten2";
        font-size: 1.3em ;
}

#content div.handwritten3 {
        font-family: "Handwritten1";
        font-style: italic ;
        font-size: 1.5em ;
}

#content div.handwritten4 {
        font-family: "Handwritten2";
        font-style: italic ;
        font-size: 1.45em ;
}


#content p.centre {
	position:relative;
	text-align:center;
	margin: 1px 0 2px 0;
}

#content img.logo {
	position:relative;
	align:center;
	top-margin: 30px;
	bottom-margin: 30px;
}

#content div.w60ch {
	position: relative;
	margin-top: 0px;
	margin-left: auto ;
	margin-right: auto ;
	margin-bottom: 0px;
  max-width: 60em;
}

div.section {
  position: relative ;
  text-align: left ;
  float: left ;
  overflow: auto ;
}

div.section::after {
  content: "";
  clear: both;
  display: table;
}

img.imgml {
	border: 5px solid #009944;
	padding: 3px;
	border-radius: 0.5em ;
	max-width: 30em ;
  margin: 2em ;
  height: auto ;
  text-align: left ;
  float: left ;
  overflow: auto ;
}

img.imgmr {
	border: 5px solid #009944;
	padding: 3px;
	border-radius: 0.5em ;
	max-width: 30em ;
  margin: 2em ;
  height: auto ;
  text-align: right ;
  float: right ;
  overflow: auto ;
}

img.imgmc {
	border: 5px solid #009944;
	padding: 3px;
	border-radius: 0.5em ;
	max-width: 30em ;
  margin: 2em ;
  height: auto ;
  text-align: center ;
  float: none ;
  overflow: auto ;
}

img.iconl {
	height: auto ;
	width: 5em ;
}

img.icons {
	height: auto ;
	width: 2.5em ;
}

img.icont {
	height: auto ;
	width: 1em ;
}


#content .height32 {
	position:relative;
	text-align:justify;
	line-height: 32px;
	vertical-align: middle;
	margin: 1px 0 2px 0;
}

#content a{
	position:relative;
	color: #7F7154;
}

#content a:hover{
	position:relative;
	color: #000000;
}

#content br {
	clear: both ;
}

#content img.left {
    position:relative;
    border:0;
    clear: right;
    float: left;
    margin-right:10px;
}

#content img.floatleft {
    position:relative;
    border:0;
    float: left;
    margin-right:10px;
}

#content img.right {
    position:relative;
    border:0;
    clear: left;
    float: right;
    margin-left:10px;
}

#content img.centre {
    position:relative;
    border:0;
    display: block;
    clear: left right ;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

#content .weather {
	position:relative;
	width: 120px;
	height: 300px;
}

#content .pagewithsidebar {
	position:relative;
	float:left;
	height:auto;
	overflow:hidden;
}

#content .sidebar {
	position:relative;
	float:right;
	width:200px;
	height:auto;
	overflow:hidden;
	font-size:0.8em;
	text-align:justify;
}

#content .sidebar h1{
	position:relative;
	font-size:1.2em;
	margin: 20px 0 10px 0;
}

#content .sidebar h2{
	position:relative;
	font-size:1em;
	margin: 10px 0 5px 0;
}


/* Two column */

#content .twocolumnleft {
	position:relative;
	float:left;
	width:50%;
	height:auto;
	overflow:hidden;
}

#content .twocolumnright {
	position:relative;
	float:right;
	width:50%;
	height:auto;
	overflow:hidden;
}

/* Three column */

#content .threecolumnleft {
	position:relative;
	float:left;
	width:33%;
	height:auto;
	overflow:hidden;
}

#content .threecolumnmid {
	position:relative;
	width:34%;
	height:auto;
	overflow:hidden;
}

#content .threecolumnright {
	position:relative;
	float:right;
	width:33%;
	height:auto;
	overflow:hidden;
}

/* Two + 1 column */

#content #threecolswide .left {
        position:relative;
        float:left;
        width:25%;
        height:auto;
        overflow:hidden;
	clear: both ;
}

#content #threecolswide .mid {
        position:relative;
        float:left;
	width:25%;
        height:auto;
        overflow:hidden;
	clear: none ;

}

#content #threecolswide .right {
        position:relative;
        float:right;
        width:50%;
        height:auto;
        overflow:hidden;
	clear: none ;
}

#content #threecolswide .right img {
        border: 5px solid #009944;
        padding: 3px;
        border-radius: 20px ;
	width: 95% ;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

/* Two + 1 column */

#content #threecolswide .narrowleft {
        position:relative;
        float:left;
        width:20%;
        height:auto;
        overflow:hidden;
        clear: both ;
}

#content #threecolswide .widemid {
        position:relative;
        float:left;
        width:65%;
        height:auto;
        overflow:hidden;
        clear: none ;

}

#content #threecolswide .widemid img {
        border: 5px solid #009944;
        padding: 3px;
        border-radius: 20px ;
        width: 95% ;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

#content #threecolswide .narrowright {
        position:relative;
        float:right;
        width:15%;
        height:auto;
        overflow:hidden;
        clear: none ;
}

#inventorycontent {
	position: static;
	margin:0 auto;
	margin-top: 100px;
	margin-left: 10px ;
	margin-right: 10px ;
	margin-bottom: 5px;
	background-image:none;
	height:auto;
	overflow:hidden;
	font-family: "Arial, Helvetica, sans-serif";
	color:#7f7154;
	font-size: 1em;
	text-decoration:none;
	z-index: 100 ;
	width: 100vw;
        height: calc(100vh - 125px);
}


#inventorylist {
	position: static;
	margin-left: 1em ;
	margin-right: 1em ;
	color: black;
	font-family: sans-serif;
	font-weight: 400 ;
}

#
# .popuphover DIV
# and .popuptext SPAN
# for popup enabled text
#

.popuphover {
  position: relative;
  display: inline-block;
}

.popuphover .popuptext {

  visibility: hidden;
  position: absolute;

  background: white;
  border: 2px solid #009944;
  padding: 3px;
  border-radius: 10px ;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: opacity 1s linear;

  width: 20em;
  margin-left: 10em ;
  bottom: 100%;
  left: 15em;

  z-index: 2000;

}

.popuphover:hover .popuptext {
  visibility: visible;
}

.popuphover .popuptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 15em;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #009944 transparent;
  z-index: 2000 ;
}