/* Copyright (c) 2016 ZipSocket, Inc.  */
/* All rights reserved.      */

/* styles for the header, the top 50 or so pixels of the screen */

#header {
   position: fixed;
   top: 0px;
   left: 0px;
   right: 0px;
   height: 48px;
   width: 100%;
   border-bottom: 1px solid rgba(0,0,0,0.3);
   z-index: 15; /* header: linkMenuContainer + 1 */
   box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
   transition: background-color 0.5s;

    /* disable text selection with firefox on android, otherwise 
       selection markers appear when pressing the connect button */
   -moz-user-select: none;
   user-select: none;
}

#header a {
   color: inherit;
   text-decoration: none;
}

#header a:active {
   color: #FB0;
   text-decoration: none;
}

#header a:hover, #header a:focus {
   color: #000;
   text-decoration: none;
}

.headerContainer {
   background-color: inherit;
   height: 100%;

   /* flex */
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
}


/*--- Link Menu Styles ---*/


#linkMenuButton {
   margin: 0px 18px 0px 0px;
   width: 42px;
   height: 42px;
   color: inherit;
   padding: 5px;
   box-sizing: border-box;
   border-top: 1px solid rgba(0,0,0,0.2);
   border-left: 1px solid rgba(0,0,0,0.2);
   border-right: 1px solid rgba(0,0,0,0.2);
   box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   background-color: rgba(255,255,255,0.05);

   flex: 0 0 auto;
   
   align-self: flex-end;
   transition: color 0.1s linear;
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
}

html.useHover #linkMenuButton:hover {
   color: #3AACD6;
   background-color: rgba(255,255,255,0.2);
}


.linkMenuButtonSelected {
   color: #3AACD6 !important;
}

#linkMenuContainer {
   position: absolute;
   top: -130px; /* header height */
   z-index: 14; /* linkMenuContainer: control panel expander + 1 */
   right: 18px;
   width: 150px;
   /*height: 154px;*/
   /*color: black;*/
   /*background-color: white;*/
   box-sizing: border-box;
   border-left: 1px solid rgba(160,160,160,0.5);
   border-bottom: 1px solid rgba(160,160,160,0.5);
   border-right: 1px solid rgba(160,160,160,0.5);
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;

   transition: color 0.2s linear,
               opacity 0.5s ease-in,
               top 0.5s ease-in-out;
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;

   /* flex */
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: stretch;
}

.linkMenuItem {
   margin: 0px;
   padding: 3px 0px;
   border-top: 1px solid rgba(160,160,160,0.3);
   font-size: 1.0em;
   text-align: center;
   transition: color 0.1s linear,
               background-color 0.1s linear;
   flex: 0 0 auto;
}

html.useHover .linkMenuItem:hover {
   color: #FFF;
   background-color: #3AACD6;
}

.linkMenuContainerShow {
   top: 48px !important; /* header height */
   opacity: 0.9 !important;
}

/*--- Styles ---*/

.borderlessButton {
   border: none;
   background-color: rgba(0,0,0,0);
   padding: 0px;
   margin: 0px;
}

.statusIcon {
   width: 18px;
   height: 18px;
   vertical-align: middle;
   margin: 0px 10px;
}


/*--- Status Icons ---*/


#headerConnectTab {
   position: relative;
   width: 182px;
   height: 42px;
   text-align: center;
   transition: opacity 0.5s linear,
               background-color 0.1s linear;
   font-weight: 300;
   white-space: nowrap;
   cursor: pointer; 
   box-sizing: border-box;
   margin-left: 10px;
   user-select: none;
   -moz-user-select: none;
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
   z-index: 2;

   flex: 0 0 auto;
   align-self: flex-end;
}


#headerAnalyzer {
   position: absolute;
   left: 0px;
   top: 0px;
   width: calc(100% - 46px);
   height: 100%;
   margin-left: 23px;
   margin-right: 23px;
   pad: 0px;
   transition: opacity 0.5s ease-in-out,
               color 0.5s ease-in-out;
   stroke-linecap: butt;
   stroke-width: 7px;
   z-index: 3;
}

#headerConnectButton {
   width: 100%;
   height: 35px;
   vertical-align: middle;
   box-sizing: border-box;
   margin: 3px 0px;
}

#zipsocketStaticLogoSvg {
   position: absolute;   
   left: 9px;
   top: 3px;
   width: 162px;
   height: 35px;
   
   transition: opacity 0.25s linear .10s;
}

.animatedLogo {
   opacity: 0;
   position: absolute;   
   left: 9px;
   top: 3px;
   width: 162px;
   height: 35px;

}

#headerMeetingSummary {
   margin: 0px 5px;
   flex-grow: 1;
   align-self: center;
   overflow: hidden;
    
   /* flex */
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
}

/* contains the participant and presenter icons */
#headerStatusIconRow {
   width: 160px;
   font-weight: 300;
   font-size: 0.9em;
   text-align: center;
   white-space: nowrap;
   border-bottom: 1px solid rgba(128,128,128,0.75);
   transition: opacity 0.5s;

   flex-grow: 0;
}


#headerContentLabel {
   height: 18px;
   width: 100%;
   font-size: 0.9em;
   font-weight: 400;
   text-align: center;
   overflow: hidden;

   flex-grow: 0;
}

#headerParticipantGroup {
   display: inline-block;
   width: 60px;
   text-align: left;
}

#headerPresenterGroup {
   display: inline-block;
   width: 80px;
   text-align: left;
   overflow: visible;
}


#headerExpandButton {
   position: relative;
   top: -3px;
   height: 24px;
   width: 100%;
   text-align: center;
   cursor: pointer;

   /* expand touch target */
   padding: 5px 0px;
   margin: -5px 0px;
}

#headerExpandSvg {
   position: relative;
   width: 35px;
   opacity: 1;
   transition: color .2s linear;
               
   /* expand touch target */
   padding: 15px 10px;
   margin: -15px -10px;
}

html.useHover #headerExpandSvg:hover,
#headerExpandSvg:active {
   color: rgb(81, 203, 238);
}

#headerExpandTab {
   position: absolute;
   bottom: -19px;
   left: 164px;
   width: 54px;
   height: 18px;
   transform: translate(-50%, 0);
   text-align: center;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
   z-index: 5;

   box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
   transition: background-color 0.1s linear;
   user-select: none;
   -moz-user-select: none;
}


#headerParticipantIcon, #headerPresenterIcon {
}

#headerParticipantCount {
   user-select: none;   
   -moz-user-select: none;
}

#headerProgressBar {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 0px;
   height: 3px;
   margin: 0px;
   pad: 0px;
   transition: opacity 0.5s ease-in-out;
   z-index: 4;
}


#headerFrequency {
   position: absolute;
   bottom: 1px;
   right: 65px;
   font-size: .5em;
   color: rgba(128,128,128,0.5);
   transition: opacity 0.5s ease-in-out;
   user-select: none;
   -moz-user-select: none;
   
}

.autopopulateButton {
   position: absolute;
   bottom: 3px; /*6px;*/
   font-size: 0.5em;
   text-align: center;
   color: #888;
   border: 1px solid #888;
   background-color: #FFF;
   padding: 0px 4px;
   border-radius: 5px;
   box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
   cursor: pointer;
   user-select: none;  
   -moz-user-select: none; 
}

.addContentTest {
   right: 92px;
}

.hardTest {
   right: 10px;
}

.cKillTest {
   right: 180px;
}

#headerPltcContainer {
   position: absolute;
   left: 200px;
   top: 18px;
   z-index: 0;
   transition: opacity 0.5s linear;

   /* flex */
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: center;
}

#headerPltcArrow {
   height: 16px;
   width: 32px;
   margin-right: 3px;
   opacity: 0.6;

   flex: 0 0 auto;
}

.headerPltcText {
   color: #999;
   font-weight: 200;
   flex: 0 0 auto;
}


@media (min-width: 767px) {
   #header {
      user-select: auto;
      -moz-user-select: auto;
   }
   
   #headerExpandButton {
      /* expand touch target */
      padding: 0px 0px;
      margin: 0px 0px;
   }
   
   #headerExpandSvg {
      /* expand touch target */
      padding: 0px 10px 10px 10px;
      margin: 0px -10px -10px -10px;
   }


   #linkMenuContainer {
      width: 125px;
   }

   .linkMenuItem {
      font-size: 0.8em;
   }
}


#headerDebug {
   position: absolute;
   top: 2px;
   left: 50%;
   transform: translate(-50%, 0);
   width: 80%;
   height: 200px;
   font-size: .7em;
   color: rgb(80,80,80);
}