htmol/styles/style_tiny.css

NEXT-GENERATION MOLECULAR DYNAMICS WEB VISUALIZATION

.Console
{
opacity: 0; background-color:yellow;width:0;height:0;left:50px;top:300px;position:relative;
}
#console_title{width:0;height:0;opacity: 0;}
#console_inputdiv{width:0;height:0;background-color:white;left:20px;top:20px; opacity: 0;}
#Console_input{width:0;height:0; left:10px; opacity: 0;}
#outputdiv{width:0;height:0;background-color:blue;left:20px;top:20px; opacity: 0;}
#Console_output{width:0px;height:0px;left:10px; opacity: 0;}
#label1{}
#aprima{font-size: 16px;color:#ECF0F1;}
#a2{font-size: 16px;color:#ECF0F1;}
#a1{font-size: 16px; color:#ECF0F1;}
#a3{font-size: 16px;color:#ECF0F1;}
#a4{font-size: 16px;color:#ECF0F1;}
#a5{font-size: 16px;color:#ECF0F1;}

 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 0px; /*location of the box*/
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  position: relative;
    background-color: #fefefe;
    margin: auto; /* 15% from the top and centered */
    padding: 0;
    border: 1px solid #888;
    width: 85%; /* Could be more or less, depending on screen size */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name:animatetop;
    -webkit-animation-duration:0.4s;
    animation-name:animatetop;
    animation-direction: 0.4s 
}

@-webkit-keyframes animatetop{
  from{top:-300px; opacity: 0}
  to{top: 0; opacity: 1}
}

@keyframes animatetop{
  from{top: -300px; opacity:0}
  to{top: 0; opacity: 1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
} 

.modal-header{
  font-size: 8px;
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body{
  padding: 2px 16px;
  text-align: left;
}
.modal-body a {

  color: #36c;
}

#MDInfo{
  position: absolute;
  background: #000;
  height: 25px;
  width: 35px;
  font-size: 10px;
  top:95%;
  right: 25px;
  text-align: center;
  color: #36c;
  border-color: #36c;
  text-decoration: none;
  /*box-shadow: 0px 3px 3px #373c3c;*/
}

#Master {
    margin: 1%;
    padding: 1%;
    height: 75%;
    width: 150px;
    background:transparent;
}
#playpause{
  position: absolute;
  background: #2ecc71;
  color: #fff;
  display: inline-block;
  height: 25px;
  width: 35px;
  font-size: 7px;
  top:95%;
  right: 50%;
  text-align: center;
  border-color: transparent;
  text-decoration: none;
  box-shadow: 0px 3px 3px #373c3c;
}
#Forw
{
  position: absolute;
  background: #2ecc71;
  color: #fff;
  height: 25px;
  width: 35px;
  font-size: 7px;
  top:95%;
  right: 44%;
  text-align: center;
  border-color: transparent;
  text-decoration: none;
  box-shadow: 0px 3px 3px #373c3c;

}
#Rew{
position: absolute;
background: #2ecc71;
color: #fff;
height: 25px;
width: 35px;
font-size: 7px;
top:95%;
right: 56%;
text-align: center;
border-color: transparent;
text-decoration: none;
box-shadow: 0px 3px 3px #373c3c;}


#mas  {

  background: #2ecc71;
  color: #fff;
  display: inline-block;
  height: 25px;
  width: 35px;
  font-size: 7px;
  text-align: center;
  border-color: transparent;
  text-decoration: none;
  box-shadow: 0px 3px 3px #373c3c;
  content: "\e927";

}


#menos  {
  left: 40 px;
  content: "\e901";
  background: #3498db;
  color: #fff;
  display: inline-block;
  height: 25px;
  width: 35px;
  font-size: 7px;
  text-align: center;
  text-decoration: none;
  border-color: transparent;
  box-shadow: 0px 3px 3px #373c3c;
  border-radius: 3,3,3,3;
}

#Master> #Menu_Event {
    position:absolute;;
    width: 35px;
    height: 25px;
    top: 10px;
    left: 15px;
    background-color: #3498db;
}
#Master> #Menu_Event> button {
    background: #3498db;
    color: #fff;
    display: inline-block;
    height:100%;
    width: 100%;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
    border-color: transparent;
    box-shadow: 0px 3px 3px #373c3c;
}
.menu_iconos{background: transparent;}
.Master .menu_iconos ul
{
margin: 0;
padding: 0;
}
.B_open{
  background: #2ecc71;
  color: #fff;
  display: inline-block;
  height: 20%;
  width: 50%;
  text-align: center;
  text-decoration: none;
  border-color: transparent;
  box-shadow: 0px 3px 3px #373c3c;
}
.B_repre{
  background: #1abc9c;
  color: #fff;
  display: inline-block;
  height: 20%;
  width: 50%;
  text-align: center;
  text-decoration: none;
  border-color: transparent;
  box-shadow: 0px 3px 3px #373c3c;
}
.B_action{
  background: #e67e22;
  color: #fff;
  display: inline-block;
  height: 20%;
  width: 50%;
  text-align: center;
  text-decoration: none;
  border-color: transparent;
  box-shadow: 0px 3px 3px #373c3c;
}
.B_view{
  background: #e74c3c;
  color: #fff;
  display: inline-block;
  height: 20%;
  width:50%;
  text-align: center;
  text-decoration: none;
  border-color: transparent;
  box-shadow: 0px 3px 3px #373c3c;
}
.B_select{
  background: #f1c40f;
  color: #fff;
  display: inline-block;
  height:20%;
  width: 50%;
  text-align: center;
  text-decoration: none;
  border-color: transparent;
  box-shadow: 0px 3px 3px #373c3c;
}

.B_open:hover{background: #27ae60; }
.B_action:hover{background: #d35400;}
.B_repre:hover{background: #16a085;}
.B_select:hover{background: #f39c12;}
.B_view:hover{background: #c0392b;}


.B_open:hover .tooltip1
{
  opacity: 1;
  transform: scaleY(1);
}
.B_action:hover .tooltip4
{
  opacity: 1;
  transform: scaleY(1);
}
.B_repre:hover .tooltip2
{
  opacity: 1;
  transform: scaleY(1);
}
.B_select:hover .tooltip3
{
  opacity: 1;
  transform: scaleY(1);
}
.B_view:hover .tooltip5
{
  opacity: 1;
  transform: scaleY(1);
}

#Master> #Menu_Event> button:hover {
    background: #2980b9;
}
#Master> #Menu_Event:hover {
    background: #2980b9;

}
#Master> #Menu_MenuPrincipal {
    display: block;
    position: relative;
    height: 0;
    width: 75px;
    background: transparent;
    top: 45px;
    left: 15px;
    overflow: hidden;
    z-index: 10000;
    transition: height 0.3s linear 0s;

}
.menu_iconos
{
  width: 100%;
  height: 100%;
  background:transparent;;
  display: inline-block;;
  padding: 0 ;
  margin: 0;
}
#Master> #menu_open {
    position: absolute;
    height: 0;
    width: 110px;
    background: #BDC3C7;
    top: 45px;
    left: 54px;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    z-index: 10000;
    box-shadow: 0 3px 3px #373c3c;
    transition: height 0.3s linear 0s;

}
#Master> #menu_repre {
    position: absolute;
    height: 0;
    width: 100px;
    background: #BDC3C7;
    top: 80px;
    left: 54px;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    z-index: 10000;
    box-shadow: 3px 3px 3px  #373c3c;
    transition: height 0.3s linear 0s;

}
#Master> #menu_action {
    position: absolute;
    height: 0;
    width: 115px;
    background: #BDC3C7;
    top: 135px;
    left:54px;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    z-index: 10000;
    box-shadow: 3px 3px 3px  #373c3c;
    transition: height 0.3s linear 0s;

}
#Master> #menu_select {
    position: absolute;
    height:0;
    width: 114px;
    background: #BDC3C7;
    top: 101px;
    left: 54px;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    z-index: 10000;
    box-shadow: 3px 3px 3px  #373c3c;
    transition: height 0.3s linear 0s;

}
#Master> #menu_view {
    position: absolute;
    height: 0;
    width: 110px;
    background: #BDC3C7;
    top: 165px;
    left:54px;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    box-shadow: 3px 3px 3px  #373c3c;
    z-index: 10000;
    transition: height 0.3s linear 0s;

}
#Master> #menu_medidas {
    position: absolute;
    height: 0px;
    width: 15%;
    background: #BDC3C7;
    top: 57%;
    left: 6.4%;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    z-index: 10000;
    transition: height 0.3s linear 0s;
}


.Master .menu_open .menu
{
  text-align: center;
  overflow: auto;
  padding: 0;
  margin: 0;
  width: 100%

}


a{
  text-decoration: none;
  color:#fff;
}

.Master  .menu_open .menu  ul  {
list-style: none;
padding: 0;
margin: 0;
}

.Master .menu_open .menu li a
{

  display: block;
  color: #494949;
  padding: 5px 5px;
  background: #e9e9e9;
}
.Master .menu_open .menu li a:hover
{
background: #1a95d5;
}
.Master .menu_open .menu ul{
  display: none;
}
.Master .menu_open .menu ul li a{
  background: #424242;
  color: #e9e9e9;

}

.Master .menu_open .menu .select  > a
{
background: #1a95d5;
color: #fff;


}
.tooltip1{
  display: block;
  position: absolute;
  width: 35px;
  height: 25px;
  top: 5%;
  left: 55%;
  border-radius: 3px;
  background-color:#000 ;
  color: #fff;
  text-transform: none;
  font-size: 12px;
  opacity: 0;
  transform: skewY(0);
  transition: all .3s;


}
.tooltip2{
  display: block;
  position: absolute;
  width: 35px;
  height: 25px;
  top: 30%;
  left: 55%;
  border-radius: 3px;
  background-color:#000 ;
  color: #fff;
  text-transform: none;
  font-size: 12px;
  opacity: 0;
  transform: skewY(0);
  transition: all .3s;

}
.tooltip3{
  display: block;
  position: absolute;
  width: 35px;
  height: 25px;
  top: 48%;
  left: 55%;
  border-radius: 3px;
  background-color:#000 ;
  color: #fff;
  text-transform: none;
  font-size: 12px;
  opacity: 0;
  transform: skewY(0);
  transition: all .3s;

}
.tooltip4{
  display: block;
  position: absolute;
  width: 35px;
  height: 25px;
  top: 48%; /*65%;*/  /*menu button above is hidden now*/
  left: 55%;
  border-radius: 3px;
  background-color:#000 ;
  color: #fff;
  text-transform: none;
  font-size: 12px;
  opacity: 0;
  transform: skewY(0);
  transition: all .3s;

}
.tooltip5{
  display: block;
  position: absolute;
  width: 35px;
  height: 25px;
  top: 65%; /*85%;*/  /*menu button above is hidden now*/
  left: 55%;
  border-radius: 3px;
  background-color:#000 ;
  color: #fff;
  text-transform: none;
  font-size: 12px;
  opacity: 0;
  transform: skewY(0);
  transition: all .3s;

}

.tooltip1::after {
  content: " ";
     position: absolute;
     top: 50%;
     right: 100%; /* To the left of the tooltip */
     margin-top: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent black transparent transparent;
}
.tooltip2::after {
  content: " ";
     position: absolute;
     top: 50%;
     right: 100%; /* To the left of the tooltip */
     margin-top: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent black transparent transparent;
}
.tooltip3::after {
  content: " ";
     position: absolute;
     top: 50%;
     right: 100%; /* To the left of the tooltip */
     margin-top: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent black transparent transparent;
}
.tooltip4::after {
  content: " ";
     position: absolute;
     top: 50%;
     right: 100%; /* To the left of the tooltip */
     margin-top: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent black transparent transparent;
}
.console-menu {
     display: none;
}
.tooltip5::after {
  content: " ";
     position: absolute;
     top: 50%;
     right: 100%; /* To the left of the tooltip */
     margin-top: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent black transparent transparent;
}

@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?3vuy5b');
    src:    url('../fonts/icomoon.eot?3vuy5b#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?3vuy5b') format('truetype'),
        url('../fonts/icomoon.woff?3vuy5b') format('woff'),
        url('../fonts/icomoon.svg?3vuy5b#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?rbpj2k');
    src:    url('../fonts/icomoon.eot?rbpj2k#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?rbpj2k') format('truetype'),
        url('../fonts/icomoon.woff?rbpj2k') format('woff'),
        url('../fonts/icomoon.svg?rbpj2k#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-ajustes:before {
    content: "\e900";
}
.icon-alejar:before {
    content: "\e901";
}
.icon-atomo:before {
    content: "\e902";
}
.icon-Back:before {
    content: "\e903";
}
.icon-boton-cancelar:before {
    content: "\e904";
}
.icon-boton-de-pausa:before {
    content: "\e905";
}
.icon-boton-de-stop:before {
    content: "\e906";
}
.icon-carpeta-abierta:before {
    content: "\e907";
}
.icon-descargar:before {
    content: "\e908";
}
.icon-flechas-de-avance-rapido:before {
    content: "\e909";
}
.icon-flechas-de-retro-rapido:before {
    content: "\e90a";
}
.icon-go_to:before {
    content: "\e90b";
}
.icon-gobernante:before {
    content: "\e90c";
}
.icon-logo-de-youtube:before {
    content: "\e90d";
}
.icon-menu:before {
    content: "\e90e";
}
.icon-molecula:before {
    content: "\e90f";
}
.icon-orientacion:before {
    content: "\e910";
}
.icon-paso-atras:before {
    content: "\e911";
}
.icon-paso-de-avance:before {
    content: "\e912";
}
.icon-seleccionar-objeto:before {
    content: "\e913";
}
.icon-ViewFalse .path1:before {
    content: "\e914";
    color: rgb(0, 0, 0);
}
.icon-ViewFalse .path2:before {
    content: "\e915";
    margin-left: -1em;
    color: rgb(0, 0, 0);
}
.icon-ViewFalse .path3:before {
    content: "\e916";
    margin-left: -1em;
    color: rgb(245, 0, 20);
}
.icon-ViewFalse .path4:before {
    content: "\e917";
    margin-left: -1em;
    color: rgb(245, 0, 20);
}
.icon-ViewTrue:before {
    content: "\e918";
}
.icon-zoom:before {
    content: "\e919";
}