/*   #FFFFFF - White       */
/*   #00B14C - Green       */
/*   #909090 - Pivot Grey  */
/*   #63666A - SBL Grey    */

@font-face {
   font-family: "Alte DIN 1451 Mittelschrift";
   src: url('din1451alt.ttf');
}

/*  ------------the HTML box---------------------*/

html{
   /*position: absolute;
   top: 0px;
   left: 0px;
   width: 970px;*/
  
   background-color: #eee; 
	border-style: solid; border-width: 0px; border-color: red;
}


#sitewrap {
   position: absolute;
   width: 960px;
   margin: 0 0 0 -480px;
   left: 50%;
}
/*#sitewrap {
   text-align: center;
   width: 960px;
   margin: 0 auto;
}*/

/*body {
   text-align: center;
}*/

      /* --------------the body box-------------------------- */
      /*body {
         position: absolute;
         top: 0px;
         left: 0px;
         width: 960px;
         padding: 0px;
         margin: 5px;       
	      background-color: #ffffff;
			
	      border-style: solid; border-width: 0px; border-color: blue;
      }*/
            
            /* -------------the Top Bar box------------------*/
            body #topbar {
               position: absolute;   /* everthing in the Top Bar box will relative to this, at 0,0 position */
               top: 0px;
               left: 0px;
               width: 960px;
               height: 81px;
               /*background-color: #fdfcef;*/
               background-color: #fdfcef;
					z-index: 10;
	            /*html element outline css if needed*/ 
	            border-style: solid; border-width:0px; border-color: #303030;
            }
                 
                  /* -------------------the logo box---------------------*/
                  #svg9 {
                     position: absolute;
                     top: 5px;
                     left: 5px;
                     display: block;
                    /* background-color: #fdfcef; */
                  background-color: #fdfcef;
                  }
                  
/*-------------------------------Menu Choices--------------------------------------- */

#sblhome {
   position: absolute;
   left: 580px;
   top:  24px;
   background-color: #909090;
   color: white;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
   padding: 5px 16px 5px 16px;
   font-size: 18px;
   border: none;
   cursor: pointer;
   border-radius: 6px;
}
 
#sblhome #homemessage {
    width: 100px;
    background-color: #909090;
    color: #ffffff;
    text-align: center;
    font-size: 16px;

    position: absolute; /*this positions the tooltip text */
    bottom: -50px;          /*in this case to the upper left of the rewind button*/ 
    left: 10%;         /*           "                        "              */
                     
    visibility: hidden;
    z-index: 3;  
    /*border-style: solid; border-width: 2px; border-color: red;*/
    border-radius: 6px;
}

/*show Home Message on hover */
#sblhome:hover #homemessage { 
   visibility: visible;
} 

#sblabout {
   position: absolute;
   left: 703px;
   top:  24px;
   background-color: #909090;
   color: white;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
   padding: 5px 16px 5px 16px;
   font-size: 18px;
   border: none;
   cursor: pointer;
   border-radius: 6px;
}

#sblabout #aboutmessage {
   width: 150px;
   background-color: #909090;
   color: #ffffff;
   text-align: center;
   font-size: 16px;

   position: absolute; /*this positions the tooltip text */
   bottom: -50px;          /*in this case to the upper left of the rewind button*/ 
   left: 10%;         /*           "                        "              */
                     
   visibility: hidden;
   z-index: 3;  
   /*border-style: solid; border-width: 2px; border-color: red;*/
   border-radius: 6px;
}

/*show About Message on hover */
#sblabout:hover #aboutmessage { 
   visibility: visible;
} 

/*--- Video Dropdown Buttons ------------------------------------------------------------------------*/

.viddropdown {
   /*clear: left;
   float: right;
	padding-top: 12px;
   padding-left: 40px;
   margin-right: 60px;
   font-family: "Alte DIN 1451 Mittelschrift", serif;*/
   color: white;
   position: absolute;
   left: 820px;
   top:  24px;
}



.viddropbtn {
    background-color: #909090;
    color: white;
    padding: 5px 16px 5px 16px;
    font-size: 18px;  
    border: none;
    cursor: pointer;
   border-radius: 6px;
}

.viddropdown-vidcontent {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 4;
}

.viddropdown-vidcontent .room {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    font-family: "Alte DIN 1451 Mittelschrift", serif;
    font-size: 18px;
    color: #666666;
    display: block;
}

.viddropdown-vidcontent .room:hover {background-color: #dddddd;}


.viddropdown:hover .viddropdown-vidcontent {
    display: block;
}

.viddropdown .videosmessage {
   width: 150px;
   background-color: #909090;
   color: #ffffff;
   text-align: center;
   font-size: 16px;

   position: absolute; /*this positions the tooltip text */
   top: 0px;          /*in this case to the upper left of the rewind button*/ 
   left: 10%;         /*           "                        "              */
                     
   visibility: hidden;
   z-index: 3;  
   /*border-style: solid; border-width: 2px; border-color: red;*/
   border-radius: 6px;
}

.viddropdown:hover .videosmessage {
    visibility: visible;
}

/*--------------End of Top Box menu -----------------------*/
                        
/* -------------------Start of the Video box for Video Playing in SBLVideos01.HTML ------------------- */
            #myVideo {
               position: absolute;
               left: 0px;
               top: 81px;   
               width: 960px;
               height: 540px;
               color: #FCFBE3;
               z-index: 2;
               /*background-image: url("one.png");*/
               /*border-style: solid; border-width: 2px; border-color: red;*/
            }

                  #introbox {
                     position: absolute;
                     top: 220px;
                     left: 160px;
                     width: 800px;
                     z-index: 0;
                  }
                  #constructionText1 {
                     position: relative;
                     font-size: 35px;
                     color: #ffffff;
                     font-family: "Alte DIN 1451 Mittelschrift", serif;
	                  letter-spacing: 2px;
	                  text-transform: bold;
                     font-weight: 500;
	                  line-height: 1;
                     margin-top: 0px;
                     padding-top: 170px;
	                  margin-bottom: 5px;
                     text-align: center;
                     display: block;
                  }
                  #constructionText2 {
                     position: relative;
                     margin-bottom: 5px;
	                  font-size: 23px;
                     color: #ffffff;
                     font-family: "Alte DIN 1451 Mittelschrift", serif;
                     text-align: center;
                     font-weight: 500;
                     display: block;
                     }

                  #constructionText3 {
                     position: relative;
                     text-align: center;
                     font-family: "Alte DIN 1451 Mittelschrift", serif;
                     font-weight: 500;
                     font-size: 20px;
                     color: #ffffff;
                     display: block;
                  }
                  /*-----------------------------Video Control Button Box ----------*/
                  #buttonbar {
                     position: absolute;
                     left: 358px;
                     top: 625px;
                     display: inline-block;
                     text-align: center;
                     /*border-style: solid; border-width: 2px; border-color: #909090;*/
                  }

                  .controls #rewindtext {
                     
                     width: 150px;
                     background-color: #909090;
                     color: #ffffff;
                     text-align: center;
                     font-size: 16px;

                     position: absolute; /*this positions the tooltip text */
                     top: -10px;          /*in this case to the upper left of the rewind button*/ 
                     right: 100%;         /*           "                        "              */
                     
                     visibility: hidden;
                     z-index: 3;  
                     /*border-style: solid; border-width: 2px; border-color: red;*/
                     border-radius: 6px;
                     }

                     /*show rewindtext on hover */
                     .controls:hover #rewindtext { 
                        visibility: visible;
                     }  
                                      
                     .controls #backwardtext {
                     
                     width: 300px;
                     background-color: #909090;
                     color: #ffffff;
                     text-align: center;
                     font-size: 16px;

                     position: absolute; /*this positions the tooltip text */
                     top: -10px;          /*in this case to the upper left of the rewind button*/ 
                     right: 100%;         /*           "                        "              */
                     
                     visibility: hidden;
                     z-index: 3;  
                     /*border-style: solid; border-width: 2px; border-color: red;*/
                     border-radius: 6px;
                     }

                     /*show rewindtext on hover */
                     .controls:hover #backwardtext { 
                        visibility: visible;
                     } 

                     .controls #forwardtext {
                     
                     width: 300px;
                     background-color: #909090;
                     color: #ffffff;
                     text-align: center;
                     font-size: 16px;

                     position: absolute; /*this positions the tooltip text */
                     top: -10px;          /*in this case to the upper left of the rewind button*/ 
                     left: 100%;         /*           "                        "              */
                     
                     visibility: hidden;
                     z-index: 3;  
                     /*border-style: solid; border-width: 2px; border-color: red;*/
                     border-radius: 6px;
                     }

                     /*show rewindtext on hover */
                     .controls:hover #forwardtext { 
                        visibility: visible;
                     }  

                     .controls #playpausetext {
                     
                     width: 200px;
                     background-color: #909090;
                     color: #ffffff;
                     text-align: center;
                     font-size: 16px;

                     position: absolute; /*this positions the tooltip text */
                     top: -20px;          /*in this case to the upper left of the rewind button*/ 
                     left: 10%;         /*           "                        "              */
                     
                     visibility: hidden;
                     z-index: 3;  
                     /*border-style: solid; border-width: 2px; border-color: red;*/
                     border-radius: 6px;
                     }

                     /*show rewindtext on hover */
                     .controls:hover #playpausetext { 
                        visibility: visible;
                     }                                                           
/* -------------------Start of the Image box for Slide Show in SBL01.html--------------------*/

#imagebox {
   position: absolute;
   top: 82px;   
   background-image: url('one.png');
   width: 960px;
   height: 540px;  /* ends at 622px */ 
   background-repeat: no-repeat;
   border-style: solid; border-width: 1px; border-color: #909090;
}
#topviewtext {
   position: absolute;
   top: 10px;
   left: 20px;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
   font-weight: 500;
   font-size: 20px;
   color: #909090;
   z-index: 5;
   display: block;
   background-color: #ffffff;
}

#topviewtext:hover{
  background: #ffffff;
  color: #00B14C;
   
}

#maintext {
   position: absolute;
   top: 180px;
   width: 960px;
   font-size: 30px;
   color: #909090;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
	letter-spacing: 2px;
	text-transform: bold;
   font-weight: 500;
   /*font-style: bold;*/
	line-height: 1;
   margin-top: 0px;
   padding-top: 170px;
	margin-bottom: 30px;
   text-align: center;
   z-index: 5;
   display: block;
}

#minortext {
   position: absolute;
   top: 380px;
   width: 960px;
   margin-bottom: 10px;
	font-size: 20px;
   color: #00B14C;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
   text-align: center;
   font-weight: 500;
   z-index: 5;
   display: block;
}

#bottomviewtext {
   position: absolute;
   top: 425px;
   width: 960px;
   text-align: center;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
   font-weight: 500;
   font-size: 20px;
   font-style: italic;
   color: #909090;
   z-index: 5;
   display: block;
}

h2 a {
   color: #909090;
}

#bottomviewtext a:hover {
   background: #ffffff;
   color: #00B14C;
}  
/* -------------------the Slide Show ---------------*/

/*
essential styles:
these make the slideshow work
*/

#slides {
   position: relative;
   width: 960px;
   height: 540px;
   padding: 0px;
   margin: 0px;
   list-style-type: none;
}

.slide {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   opacity: 0;
   z-index: 1;

    -webkit-transition: opacity 0s;
    -moz-transition: opacity 0s;
    -o-transition: opacity 0s;
    transition: opacity 0s;
}

.showing {
    opacity: 1;
    z-index: 2;
}


/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide {
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;

   background-size: cover;
}

/* G-Cue lamp over table */
.slide:nth-of-type(1){
    /*background-color: red;*/
  background-image: url('one.png');
}

/* table surface image without PIP */
.slide:nth-of-type(2){
    /*background-color: orange;*/
  background-image: url('two.png');
}

/* table surface image with PIP */
.slide:nth-of-type(3){
    /*background-color: green;*/
  background-image: url('three.png');
}

/* CAD perspective "flat-field" */
.slide:nth-of-type(4){
    /*background-color: green;*/
  background-image: url('four.png');
}

.slide:nth-of-type(5){background-image: url('five.png');}
.slide:nth-of-type(6){background-image: url('six.png');}
.slide:nth-of-type(7){background-image: url('seven.png');}
.slide:nth-of-type(8){background-image: url('eight.png');}

/* -----------------the Carousel Image Button Control box ------------*/

.buttons{
   position: absolute;
   left: 415px;
   top: 625px;
   z-index: 10;
   font-size: 0px;
   text-align: center;
}

.container{
  position: relative;
}
               /*--------Start of the Common Navigation Button Controls for Carousel Images and Videos */
.controls{
   display: inline-block;
   width: 50px;
   height: 40px;
   margin: 5px 5px 5px 5px;
   background: #909090;
   color: #ffffff;
   border-radius: 10px;
   padding: 5px 5px;
   font-size: 20px;
   cursor: pointer;
   border: 2px solid #fff;
}

/*.controls:hover,
.controls:focus{
  background: #FCFBFA;
  color: #00B14C;
}*/
                /*--------End of the Common Navigation Button Controls for Carousel Images and Videos */

/* -------------------End of the Image box for Slide Show in SBL01.html--------------------*/

#abouttext {
   position: absolute;
   left: 0px;
   top: 81px;   
   width: 960px;
   height: 593px;
   visibility: hidden;
   z-index: 4;
   /*background-color: #909090;
   color: white;*/
   background-color: white;
   color: #555;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
   font-size: 19px  
}

#abouttext-padding {
   padding: 15px;
}

/*-------------Start of the Site Box for showing images of Lamps over Tables---*/
#roomview {
   position: absolute;
   top: 675px;
   left: 0px;
   width: 480px;
   visibility: visible;
   z-index: 4;
}

#sitetitle {
   position: absolute;
	top: 660px;
	left: 500px;
	width: 300px;
   color: #333333;
   font-size: 20px;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
   z-index: 3;   
}

#site {
	position: absolute;
	top: 705px;
	left: 500px;
	width: 300px;
   color: #444444;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
	border-style: solid; border-width: 0px; border-color: rgb(80,80,80)
}

#roomviewtext {
	position: absolute;
	top: 785px;
	left: 500px;
	width: 300px;
   color: #444444;
   font-size: 17px;
   font-family: "Alte DIN 1451 Mittelschrift", serif;
}

 
            /* -------------------the Footer box--------------------*/
            body footer {
               position: absolute;
               top: 1050px;
               left: 0px;
               width: 960px;
               height: 61px;
               background-color: #666666;
               font-size: 11px;
               font-family: "Alte DIN 1451 Mittelschrift", serif;
	            line-height: 1.8;
               color: white;
               border-radius: 5px;
               /* border-style: solid; border-width: 2px; border-color: rgb(80,80,80);*/
            }
                  #footertext {
                     position: absolute;
                     top: 15px;
                     left: 10px;
                     color: #ffffff;
                     display: none;
                  }
                  #patents {
                     position: absolute;
                     top: 10px;
                     left: 10px;
                  }
                  #copyright {
                    position: absolute;
                     top: 30px;
                     left: 10px;
                  }