h1 {font-size: 1.6em; margin: 0;color:#fff; font-weight:bold; font-family: Georgia, "Times New Roman", Times, serif; !important}
 h2 {font-size:1.3em;margin: 1em 0 0.8em 0;color:#337ab7; font-weight:bold; font-family: Georgia, "Times New Roman", Times, serif; !important}
 h3 {font-size:1.1em;color:#337ab7; font-weight:bold; margin-top:12px;font-family: Georgia, "Times New Roman", Times, serif; !important}
 h4 {font-size:1.0em;color:#337ab7; font-weight:bold; margin-top:12px;font-family: Georgia, "Times New Roman", Times, serif; !important}
 code pre{border:1px solid #337ab7; color:#337ab7 !important}
 blockquote { border-left:5px solid #337ab7;}

body { height:100%}
.CodeMirror {
  height:99%;
  width: 99%;
  overflow: hidden;
}

.mipanel {
   display:flex;
   display: -webkit-flex; 
   -webkit-flex-direction: row;
    flex-direction: row;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   justify-content: flex-start;
   -webkit-justify-content: flex-start;
   align-items: flex-start;
   align-content:flex-start;
   -webkit-align-items: flex-start;
   height:100%;
   border: #2980b9 2px solid; 

padding:0;/*
-webkit-flex-grow:1;
-ms-flex-positive:1;
flex-grow:1;*/
display:-ms-flexbox;
width:100%;
}

.cajita {
   box-sizing: border-box; 
   display:flex;
   display: -webkit-flex; 
   display:-ms-flexbox;
   -ms-flex-direction:column;
   flex-direction:column;
     -webkit-flex-direction: column;
   overflow:hidden;
   height:300px;
}

.temario{
    box-sizing: border-box; 
   -webkit-flex-basis:100%;
   flex-basis: 100%;
   background-color:white;
   border: 2px solid #2980b9;
   margin: 4px;
   min-height: 250px;


}

.fuente{
    box-sizing: border-box; 
   -webkit-flex-basis:49%;
   flex-basis: 49%;
   -webkit-flex-grow:1;
   flex-grow: 1;
   background-color:white;
   border: 2px solid #2980b9;
   margin: 4px;
   min-height: 25px;
  width: 50%; /* for bug ipad */
  
}
.navegador{
    box-sizing: border-box; 
   -webkit-flex-basis:49%;
   flex-basis: 49%;
    -webkit-flex-grow:1;
   flex-grow: 1;
   background-color:white;
   border: 2px solid #2980b9;
   margin: 4px;
  min-height: 25px;

}

@media (max-width: 640px) {
   .fuente {  
      -webkit-flex-basis:100%;
       flex-basis: 100%;
   }
   .navegador {
         -webkit-flex-basis:100%;
       flex-basis: 100%;
   }
}

.titcaja {
    box-sizing: border-box; 
   background-color:#2980b9;
   color:white;  
   border: 0; 
   width:100%;
  
   white-space:nowrap;
   flex-grow:0;

   justify-content: center;
   align-items: stretch;
}
.eti { 
	color:blue;
	font-weight:bold;
 	font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
}
.titcaja a { color:white;text-decoration:none}
.titcaja a:hover { color:#2980b9;text-decoration:none}
.titcaja li { padding-right: 30px;}
.titcaja li:hover { background-color:white;padding-right: 30px;}
.titcaja h3 { color:#fff; }
.bodycaja {
   display:flex;
    flex-direction:column;
   border: 0;
   margin:0; 


  overflow: auto;
  -webkit-overflow-scrolling: touch; 

   width:100%;
  /* align-self: stretch;*/
   flex-grow:1 ; /* strech el iframe al alto de la caja */
   
}


.titcaja h1{
   margin-top:0;
   padding:4px;
   height: 100%;
   width:100%;
}

.titcaja h3{
  box-sizing: border-box; 
   margin-top:0;
   padding-left:4px;
   height: 100%;
    margin:4px 0 14px 0;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;display:inline-block;
}

.ficha {
  box-sizing: border-box; 
  align-self: stretch;
  margin: 0;
  border:0;
  padding:14px;
  width:100%;
 /* max-height:300px; */
}

#visor {
   box-sizing: border-box; 
  width:100%;
  margin: 0;
 border:0;
    align-self: stretch;
   display:flex;
    flex-direction:column;
    flex-grow:1;
    flex-basis:100%;

}

#editor {
/*margin:0;
 border:0;
 height:100%;
 width:100%;*/
 background-color: grey;
  max-height:300px;
  overflow: auto;
-webkit-overflow-scrolling: touch;
}

.miboton {


-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center
    
}
.resultadoFrame {
   align-self: stretch;
   flex-grow:1;
  width: 100%;
  margin:0;
  padding:0;
  border:0;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 

}

@media only screen and ( max-width: 720px ) {
   
}