/* By Jerry A. Sierra for use on MENU2 pages at historyofcuba.com */
/* -- Updated on 11/16/16 -- */

/* 
Bodies and html5 
------------------------------------------------------------- */
article, section, aside, hgroup, nav, header, footer, figure, figcaption {
	display: block;
} 

     body {
          color: black;
          background: #f8f8ff;  /* -- Ghostwhite */ 
          font-family: "Courier New", Palatino, "Lucida Console", Serif;
		  font-size: 100%;
		  font-size-adjust: .5;
     }
     hr {
          line-height: 1px;
          color: #D3D3D3;
     }

/* ---------------- E-Pages ---------- */
     #left2 {
	      position: absolute;
	      left: 10px;
	      top: 20px;
	      height: 600px;
	      width: 285px;
	      padding: 2px;
	      border: 0;
     }
     #center2 {
	      margin-top: 8px;
	      margin-left: 300px;
          margin-right: 50px;
          background: #faf0e6;   /* --- Linnen --- */
	      padding: 5px;
   	      -webkit-box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4);
          box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4); 
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px; 
     }
     #center3 {
	      margin-top: 8px;
	      margin-left: 300px;
          margin-right: 50px;
          background: #ffe4c4;   /* --- Bisque --- */
	      padding: 5px;
	      border-top: 3px solid #d3d3d3;
          border-right: 1px solid #000;
          border-left: 3px solid #d3d3d3;
          border-bottom: 1px solid #000;
          -webkit-border-radius: 8px;
          -moz-border-radius: 8px;
          border-radius: 8px; 
    }
 
/* --------------- NEW DIV Columns ---------- */
      .left {
	      position: fixed;
	      left: 5px;
	      top: 35px;
	      width: 275px;
          background: #f8f8ff;  /* -- Ghostwhite --*/
	      padding: 2px;
	      border-top: 5px; 
	      border-right: 5px; 
	      border-Bottom: 5px; 
	      border-left: 10px; 
     }
     .left3 {
	     position: absolute;
         left: 20px;
         top: 29px;
         width: 150px;
         background: #f8f8ff;
         padding: 4px;
         border: 1px;
         overflow: auto;
         float: left;
     }
     .center {
	      margin-top: 8px;
	      margin-left: 300px;
          margin-right: 50px;
          background: #fff; /* --- Blanco --- */
	      padding: 25px;
	      border-top: 1px; 
	      border-right: 2px; 
	      border-Bottom: 1px; 
	      border-left: 2px; 
	      border-color: #d3d3d3;
	      -webkit-box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4);
          box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4); 
          -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px; 
    }
       .center2 {
	      margin-top: 8px;
	      margin-left: 300px;
          margin-right: 50px;
          background: #faf0e6;   /* --- Linnen --- */
	      padding: 5px;
   	      -webkit-box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4);
          box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4); 
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px; 
	   }
    .left2 {
	      position: absolute;
	      left: 10px;
	      top: 75px;
	      height: 650px;
	      width: 285px;
          background: #fff;
	      padding: 2px;
	      border: 0;
     }

    .right {
	      position: absolute;
	      right: 5px;
	      width: 150px;
	      padding: 1px;
	      border: 1px solid #d3d3d3;
     }

/* ------------------ Headings ---------- */
    h1, h2, h3, h4 {
          font-family: Helvetica, Tahoma, Arial, Sans-serif;
          font-size: large;
     }
   h1 {
          font-size: 200%;
          font-variant: small-caps;
          font-weight: 800;
          color: #000;
	      margin-bottom: 0;
     }
     h1.one {
	      font-size: 300% ;
          font-weight: 900;
 	     text-shadow: 3px 2px 3px #69100F;  /* Unsupported in IE */ 
		  margin-bottom: 0;
     } 
     h2 {
          color: #0000ff;  /* ----- Blue ----- */
	      margin-bottom: 0;
     }
     h4 {
          color: #ff0033;
     }

/*  ---------------- Paragraphs ----------------  */
     p {
          line-height: 1.4em;
          font-size: medium;
          font-weight: 500;
          color: #000;
	      margin-top: 0;
     }
     p.one {
          line-height: 1.25em;
	      font-family: "Lucida Console", Palatino, Georgia, Serif;
          font-size: small;
          color: #000;
     }

/* ------ Linking Styles - Small Fonts  ------ */
     p.one A:link, A:visited {
          line-height: 1.3em;
    	  font-family: Trebuchet, Georgia, Palatino, "Lucida Console", Serif;
          font-size: small;
     }
     p.four {
          font-size: small;
          color: #ff0000; /* Red */
     }
  
/* ---------- Linking Styles - Typical ------- */
    
	a:link, visited {
          font-family: "Lucida Console", Palatino, Georgia, Serif;
	}
	
	a:hover, active {
          font-family: Trebuchet, Palatino, "Lucida Console", Serif;
	}
	a:link {
          color: #0000FF;
     }
    a:visited {
          color: #800080;  /* -------- Purple --- */
     }
    a:hover {
          color: red;
          background: #fffaf0; /* --- Floral White */
     }
    a:active {
          color: #0000ff; /* --- Blue --- */
          background: #FFF;
     }
 
/* ------------------- BUTTON Nav ---------- */
     p.nav {
          font-family: Times, Palatino, Georgia, Serif;
          font-size: small;
          color: #000;
	      background: #FFF;
	      width: 60%;
          text-decoration: none;
          border: 1px solid #d3d3d3;
          margin: 0;
	      padding: 0;
 }
     p.nav A:link {
          color: #000;
	      background: #dda0dd; /* -- Plum -- */
          border: 1px solid #d3d3d3;
     }
     p.nav A:visited {
	      color: #800080; /* --- Purple --- */
          background: #fffaf0; /* --- Floral White */
	      border-top: 1px solid #000;
          border-right: 1px solid #d3d3d3;
          border-left: 1px solid #000;
          border-bottom: 1px solid #d3d3d3;
     }
     p.nav A:hover {
          font-family: Trebuchet, Tahoma, Verdana, Sans-serif;
          font-size: medium;
          color: #ff0000; /* --- Red --- */
          background: #fffaf0; /* --- Floral White */
    	  border-top: 2px solid #000;
          border-right: 2px solid #d3d3d3;
          border-left: 2px solid #000;
          border-bottom: 2px solid #d3d3d3;
     }
     p.nav A:active {
          font-size: medium;
          color: #0000ff; /* --- Blue --- */
          background: #ffff00;  /*  --- Yellow --- */
	      border-top: 2px solid #d3d3d3;
          border-right: 2px solid #000;
          border-left: 2px solid #d3d3d3;
          border-bottom: 2px solid #000;
     }
 
/* ----------- Floated Items ------- */
     .outleft {
          float: left;
          margin-left: -4%;
	      border: 2px ridge #000;
     }
     .pullq {
	      font: 125% Trebuchet, Palatino, Garamond, Serif;
    	  text-align: left;
          color: #ff0000; /* --- Red --- */
	      border-top: 2px black solid;
	      border-right: 1px black solid;
	      border-bottom: thin black solid;
	      border-left: 1px black solid;
	      padding: 2%;
	      background: #f8f8ff;   /* --- Ghost White --- */
	      width: 25%;
	      float: right;
    	  margin-right: -15px;
     }
     .pull2 {
	      font: 90% Verdana, Helvetica, Sans-serif;
    	  text-align: left;
	      border-top: 2px black solid;
	      border-right: 1px black solid;
	      border-bottom: thin black solid;
	      border-left: 1px black solid;
	      padding: 2%;
	      background: #f8f8ff;   /* --- Ghost White --- */
	      width: 45%;
	      float: right;
	      margin-right: -25px;
     }

/* ---------------- Index Page DIVs ---------- */
     .top3 {
	      left: 10px;
	      top: 5px;
	      width: 78%;
	      height: 200px;
          background: #fff;
	      padding: 5px;
	      clear: both;
     }
     div.center3 {     /* --- Different from id version --- */
	      margin-left: 100px;
	      margin-right: 100px;
          background: #fff;
	      padding: 5px;
	      border: 1px solid #d3d3d3;
	      clear: both;
     }

/* ------------------ TOC ------------- */
     div.top {
    	  left: 20px;
    	  top: 5px;
    	  width: 100%;
    	  background: #fff;
    	  padding: 5px;
    	  border: 1px;
    	  clear: both;
     }
    table.srch {
    	  position:absolute;
    	  top: 10px;
		  right: 2%;
		  width: 200px;
          margin: 0;
          background: #fff;
    	  padding: 0;
    	  border: 0; 
     }
     .left5 { /* Contents ONLY */ 
    	  float: left;
    	  width: 200px;
          margin-top: 10px;
          background: #fff;
    	  padding: 5px;
    	  border: 1px; 
     }
	 .CtrDIV2 { /* Replaces center2 */ 
	      margin-left: 225px;
	      margin-right: 2%;
          margin-top: 10px;
          background: #fff0f5; /* --- LavenderBlush */
    	  padding: 5px;
    	  border: 1px solid #d3d3d3;
 	      -webkit-box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4);
          box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.4); 
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px; 
    }
    
	 div.center2 { /* Remove SOON */ 
	      margin-left: 225px;
	      margin-right: 75px;
          margin-top: 10px;
          background: #f8f8ff; /* --- Ghost White */
    	  padding: 5px;
    	  border: 1px solid #d3d3d3;
     }
     div.left2 H2 {
          color: #4B0082;	  
     }
     div.center2 H2 {
          font-size: x-large;
          color: #000;	  
     }
     div.right2 {
	      float: right;
	      width: 190px;
	      padding: 5px;
	      border-top: 1px solid #d3d3d3;
     }

/* -------------- HTML Table Borders -------------- */
     td.one {
          border-right: 1px solid #d3d3d3;
          border-bottom: 1px solid #d3d3d3;
     }
     td.two {
          border-left: 1px solid #d3d3d3;
          border-bottom: 1px solid #d3d3d3;
     }
     td.three {
          border-top: 1px solid #d3d3d3;
          border-right: 1px solid #d3d3d3;
          border-bottom: 1px solid #d3d3d3;
     }
     td.four {
          border-top: 1px solid #d3d3d3;
          border-left: 1px solid #d3d3d3;
          border-bottom: 1px solid #d3d3d3;
     }
     td.five {
          border-bottom: 1px solid #d3d3d3;
     }
     td.six {
          border-top: 1px solid #d3d3d3;
          border-right: 1px solid #d3d3d3;
     }
     td.seven {
          border-right: 1px solid #d3d3d3;
     }
     td.eight {
          border-left: 1px solid #d3d3d3;
     }
     td.nine {
          border: 1px solid #d3d3d3;
     }
	
/* 
For Images  ---------------- */
img {
	margin: 0;
	border: 2px;
    padding: 5px 5px 5px 5px;
	max-width: 100%;
    height: auto;
	visibility: visible;
	opacity: 1.0;
}
.img2 {
    border-radius: 10px;
    height: auto;
}	 
		 
#HoCLogo {
     position:fixed;
     left:10px;
     top:10px;
     border: 0px;
	 max-width: 50%;
} 

	 * html #left {float:left;}

/* 
For Screens  900 to 1200 Px
------------------------------------------------------------- */

@media screen and (min-width: 900px) and (max-width: 1190px) {
#ad1 { 
	display: none;
    }
       .left {
	      position: absolute;
	      left: 5px;
	      top: 35px;
	      width: 175px;
          background: #fff;
	      padding: 2px;
	      border-top: 5px; 
	      border-right: 5px; 
	      border-Bottom: 5px; 
	      border-left: 10px; 
     }
    #left2 {
	      position: absolute;
	      left: 6px;
	      top: 12px;
	      height: 600px;
	      width: 175px;
          background: #fff;
	      padding: 2px;
	      border: 0;
     }
        #center2 {
	      margin-top: 6px;
	      width: auto;
		  margin-left: 180px;
          margin-right: 25px;
          background: #f8f8ff;   /* --- Ghost White --- */
	      padding: 2px;
	      -webkit-box-shadow: 2px 2px 6px 4px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: 2px 2px 6px 4px rgba(0, 0, 0, 0.4);
          box-shadow: 2px 2px 6px 4px rgba(0, 0, 0, 0.4); 
          -webkit-border-radius: 8px;
          -moz-border-radius: 8px;
          border-radius: 8px; 
     }
img {
	max-width: 80%;
    height: auto;
} 
     .center {
	      margin-left: 180px;
          margin-right: 25px;
          background: #fffaf0; /* --- Floral White --- */
	      padding: 5px;
	      border-top: 1px solid #d3d3d3;
          border-right: 2px solid #000;
          border-left: 1px solid #d3d3d3;
          border-bottom: 2px solid #000;
          -webkit-border-radius: 8px;
          -moz-border-radius: 8px;
          border-radius: 8px; 
    }
 } 
/* 
For Screens  600 to 900 Px
------------------------------------------------------------- */

@media screen and (min-width: 600px) and (max-width: 899px) {
#ad1 { 
	display: none;
    }
 
.left {
	      position: absolute;
	      left: 1px;
	      top: px;
          background: #f8f8ff;  /* -- Ghostwhite --*/
	      padding: 0;
	      border: 0; 
     }
.left table {
		display: none;
	}
#center #center2 {
	      margin-top: 2px;
	      width: auto;
		  margin-left: 0;
          margin-right: 0;
          background: #f8f8ff;   /* -- Ghost White -- */
	      padding: 2px;
	     border: 2px solid #CCC;
          -webkit-border-radius: 8px;
          -moz-border-radius: 8px;
          border-radius: 8px; 
     }
}
/* 
For Screens up to 600 Px
------------------------------------------------------------- */

@media screen and (min-width: 301px) and (max-width: 599px) {
#ad1 { 
	display: none;
    }
 .left table {
		display: none;
	}
}