/* background container */
.custom-background
{
    display: table;
    background-image: url("../pics/forest.png");
    background-color: rgb(236, 221, 159);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0;
    overflow: hidden;

    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;

    z-index: -100;
}

.blue-sky
{
    background-image: url("../pics/blue-sky.png");
}

/* div containers */
.table-wide { display: table; width: 100%; }
.table-half {
    display: table;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.table-line {
    display: table-row;
    width: 100%;
    height: fit-content;
    text-align: center;
    padding: 0px;
    margin: 0 auto;

 }
#footer {
    display: table;
    width: 100%;
    position: fixed;
    text-align: center;
    bottom: 5%;
}

#pwrap {
    display: table-row;
    background-image: url("../pics/shade-wrapper.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    font-size: 10px;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    overflow-x: auto;
    overflow-y: scroll;
    position: fixed;
    z-index: 100;

    border-radius: 50px;
}

#site_title {
    display: table-row;
    padding: 0;
    text-align: center;
    height: 100px;
}

#lightbox {

    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10%;
}

#gallery_controls {
    position: fixed; /* Sit on top of the page content */
    top: 2%;
    right: 5%;
    margin: 0 auto;
    padding: 0;
    cursor: pointer;
}

#gallery_controls p {
    color: white;
    font-family: sans-serif;
    font-size: 100px;
}

/* text */
#title1 { font-family: 'NoticeText'; font-size: 35px; }
#title2 { font-family: 'NoticeText'; font-size: 55px; }

.text-notice {
    font-family: 'NoticeText';
    font-size: 80px;
    color: whitesmoke;
    padding: 0;
}
.text-medium { font-size: 50px; }
.text-small { font-size: 20px; }

.link-notice ul , li {
  display: inline-block;
      /* You can also add some margins here to make it look prettier */
      zoom:1;
      *display:inline;
      /* this fix is needed for IE7- */}

.ptitle {
    font-family: "arial";
    color: darkolivegreen;
    font-size: 40px;
}
.ptext {
    font-family:"arial";
/*    background-color: aliceblue;*/
    color: darkslategray;
    font-size: 30px;
    font-stretch: condensed;
}

.ptext span
{
    padding: 0px 100px 100px 100px;
}

.spell_result {
    text-align: justify;
    background-color: #DDE8CB;
    border: 10px;
    border-radius: 25px;
    padding: 30px;
    display: table;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    max-width: 80%;
}


.ptext a {
    color: darkcyan;
}
/* sound cloud */
#scw1 {
    width: 300px;
    height: 400px;
}

/* horizontal centered menu */
#centeredmenu {
   float:center;

   display: table-row;
   height: 50px;
   width:100%;
   background:black;
   overflow:hidden;

   opacity: 0.5;
   filter: alpha(opacity=50); /* For IE8 and earlier */

   font-family: sans-serif;
   font-size: 35px;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;

}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   width: 100%;
   margin:10px 10px 10px 10px;
   padding:0;;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
   border-radius: 2px;
}
#centeredmenu ul li a:hover {
   background:#369;
   color:#fff;
}

.centermenuselected {
   background:#369;
   color:#fff;
}

#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

/* philosophy menu */
#philomenu {
   float:center;
   display: table-row;
   height: 50px;
   width: 100%;
   background:black;
   overflow:hidden;

   opacity: 0.5;
   filter: alpha(opacity=50); /* For IE8 and earlier */

   font-family: sans-serif;
   font-size: 25px;
}
#philomenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#philomenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#philomenu ul li a {
   display:block;
   width: 100%;
   margin:10px 10px 10px 10px;
   padding: 0;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
   border-radius: 2px;
}
#philomenu ul li a:hover {
   background:#369;
   color:#fff;
}
#philomenu ul li a.active,
#philomenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}


.hl3line {border-top:1px solid rgba(255, 255, 255, 1);border-bottom:2px solid rgba(255, 255, 255, 1);padding:5px 0 0 0;}

#swirlball {
    width: 200px;
}

/*begin elf */
#div_elf {
    display: inline-block;
    position: fixed;
    bottom:0;
    right:2%;
    padding: 0;
    border: none;
}

.div_elf_fixed_top {
    display: inline-block;
    position: fixed;
    top:0;
    left:5%;
    width: fit-content;
    height: fit-content;
    padding: 0;
    border: none;
}
.div_elf_fixed_start {
    display: inline-block;
    position: fixed;
    top:0;
    right:5%;
    width: fit-content;
    height: fit-content;
    padding: 0;
    border: none;
}

#button_elf_bubble {
  display: table;
  border: none;
  background-color: #4CAF50;
  color: white;
  padding: 14px 28px;
  font-size: xx-large;
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  outline: none;
  width: 250px;
}

#button_elf_bubble:hover {
  background-color: #ddd;
  color: black;
}

.elf_chat {
  font-family: 'Elf Chat','Spell Text', fantasy, "Apple Chancery", sans-serif;
  font-size: xx-large ;
  text-align: center;
  color:lightyellow;
}

#img_elf {
    display: table;
    height: 300px;
}

#img_elf:hover {
    display: table;
    height: 300px;
    background-image: url("../../harmony/pics/falling-stars-color.gif");
    background-repeat: no-repeat;

}

.img_elf_scrolling {
    display: table;
    height: 300px;
    background-image: url("../../harmony/pics/falling-stars-color.gif");
    background-repeat: no-repeat;
}
/* end elf */

/* matrioshka */
#matrioshka {
    height: 100px;
}

/* symhead */
.symhead {
    height: 200px;
    border-radius: 80px;
    cursor: pointer;
}

.symhead_big {
    height: 600px;
    border-radius: 250px;
    margin-left: auto;
    margin-right: auto;
}

#symbiosis {
    height: 400px;
}

.symbiosis_big {
    height: 100%;
    width: 100%;

}