/* yaas_2_0.css - Styles for yaas_2_0 */
  
body 
{
  background-color: #f0e68c;
}


/* add image to external links and _blank pages */

a[ href^="http"  ],
a[ target=_blank ] 
{
  background-image:     url( ./img/external-link.svg );
  background-size:      18px 18px;
  background-repeat:    no-repeat;
  background-position:  top right;
  padding-right:        1.5em; 
}


dt
{
  color:          #1e71db;
  font-weight:    bold;
}        


dd
{
  margin:   0;
  padding:  0  0  0  20px;
}


img
{
  border: 1px solid #808080;
  width:10px;
  height:10px;
}


button
{
  width:            60px;
  border:            2px solid #808080;
  border-radius:     8px;
  background-color: #d0d0a0;
}

button:hover,
button:focus {
  background-color: #faf891;
}


/* Gears Table on the About YAAS page */

.gear_table
{
  font-size: 1.3em;
  border-collapse: collapse;
}

.gear_table th
{
  text-align: left;
  background-color: #ffc;
  /* text-transform: uppercase; */
}

.gear_table td, .gear_table th
{
  border: 1px solid #222;
  padding: 0.0em 0.2em 0.1em 0.2em;
}

.gear_table tr:hover
{
  background-color: #FF0;
}



.cls_button_info
{
  width:            150px;
 
  border:            2px solid #808080;
  border-radius:     8px;

  margin-top: 5px;

  background-color: #d0d0a0;
}


.cls_header_0
{
  color: #1e71db;
  font-weight: bold;
  font-size: 1.75em;
  font-family: 'Times New Roman';
  text-align:   center; 
}

.cls_header_1
{
  font-weight:    bold;
  font-size:      1.25em;
  color:          #1e71db;
  font-family:    'Times New Roman'
}

.cls_header_2
{
  color:          #1e71db;
  font-size:      1em;
  font-weight:    bold;
  margin-bottom:  8px;
}

.cls_version
{
  font-size:   0.85em;
  font-weight: bold;
}


/* common code for left and right panel */

div.panel_left, div.panel_right
{
  position:         absolute;

  top:                12px;
  width:             240px;
  height:            calc( 100% - 47px );

  background-color:   #f0f0f0; 
  overflow-y:         auto;

  padding:             8px;
  border:              3px solid #808080;
  border-radius:      15px;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.panel_left
{
  left:               12px;
}


#x3d_1
{
  position:         absolute;

  top:                12px;
  left:              286px;
  
  width:             calc( 100% - 578px ); 
  min-width:         450px;

  height:            calc( 100% - 31px );
  min-height:        600px;

  border:           3px solid #808080;
  border-radius:    15px;

  background-color: lightblue;


/*  settings for FHD ratio to asseist in getting Viepoints for movie ( 70% of FHD )  

  position:         absolute;

  top:                20px;
  left:              288px;

  width:            1344px;   
  height:            756px;

  background-color: lightblue;
*/
}      


div.panel_right
{
  left:           calc( 100% - 274px );
}


/* common css for information panels */

div.panel_using_yaas, div.panel_about_yaas, div.panel_about_antikythera
{
  position:          absolute;

  top:                12px;
  left:              286px;
  width:             663px; 
  height:            calc( 100% - 47px );

  display:           none;
  overflow-y:        auto;

  padding:             8px;

  border:           3px solid #808080;
  border-radius:    15px;
    
  background: linear-gradient( to right, #eacda3, #d6ae7b);

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}