/* -- By Jerry A. Sierra for historyofcuba.com */
/* -- New ARTICLES2-css */
/* -- Updated on 12/20/14 -- */

     BODY {
          font-family: Verdana, Tahoma, Arial, Sans-Serif;
          color: black;
          background: #f8f8ff;  /* -- Ghostwhite */
		  font-size: 100%;
		  font-size-adjust: .5;
		  }
 
 /* -- DIVs */
    DIV {
	   	  position: relative;
          left: 150px; 
     	  width: 70%;
	      margin-left: 40px; 
    	  padding: 5px;
          margin-right: 10%;
          margin-bottom: 1%;
          border-top: 2px solid #D3D3D3;
          border-right: 3px solid #000;
          border-bottom: 3px solid #000;
    	  border-left: 2px solid #D3D3D3;
         -webkit-border-radius: 13px;
         -moz-border-radius: 13px;
         border-radius: 13px; 
    }
     .white {
	   	  position: relative;
	      margin-left: 140px; 
      	  width: 70%;
          margin-right: 10%;
          background: #fff;
	     -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; 
    }
     .white2 {
          background: #fff;
          border-top: 3px solid #d3d3d3;
	      border-left: 3px solid #d3d3d3;
          border-right: 2px solid #000;
          border-bottom: 2px solid #000;
    }
	 
     /* -- Left Side Ad */
   #ad1 { 
    	 position: fixed;
    	 width: 130px;
    	 float: left;
     	 left: 0;
		 top: 10px;
     	 margin-left: 4px;
    	 letter-spacing: normal;
    	 text-align: center;
    	 padding: 0;
    	 border: 0;
    }
   .ad1 { 
    	 position: fixed;
    	 width: 140px;
    	 float: left;
    	 left: 0;
		 top: 10px;
		 margin-left: 4px;
    	 letter-spacing: normal;
    	 text-align: center;
    	 padding: 0;
    	 border: 0;
    }

/*  ----- Headings -----*/
     H1 {
          font-family: Tahoma, "Arial Black", Verdana, Tahoma, Sans-serif;
          font-size: x-large;
          color: #00008B;
          font-weight: 800;   
		  margin-bottom: 0;
    }
   H1.one {
         font-size: xx-large;
         font-weight: 900;
         color: #000;
 	     text-shadow: 2px 2px 3px #69100F;  /* Unsupported in IE */ 
     } 
   H2 H3 H4 {
          font-family: Tahoma, Verdana, "Arial Black", Sans-serif;
          font-variant: small-caps;
		  color: #000;
   }

     H2 {
          font-size: x-large;
          font-weight: 600;
          color: #000080; /* Drk Blue */
    	  margin-bottom: 0;
     }

/*  ----- Paragraphs & Text -----*/
     P {
          color: #000;
          font-size: medium;
    	  margin-top: 0;
		  padding: 5px;
     }
      P.Rel {
          font-size: small;
          color: #191970; /* Midnight Blue*/
		  padding: 0;
     }
     DL EM {
          font-family: Garamond, "Bookman Old Style", Serif;
     }
	 	
/* ---------- 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;
     }
    A:active {
          color: #0000ff; /* --- Blue --- */
          background: #FFF;
     }
 
/* ------ Images  ---------------- */
img {
    	margin: 0;
      	border: 0;
        padding: 5px;
    	max-width: 100%;
        height: auto;
    	visibility: visible;
    	opacity: 1.0;
    }
.img2 {
        border-radius: 10px;
    }	 
/* ------- INDEX Page ---------- */
    EM, UL    {
         font-family: Georgia, Palatino, "Times New Roman", Serif;
         line-height: 1.5em;
         font-size: medium;
	     margin-top: 1px;
 	     margin-bottom: 4px;
    }
     UL   {
         color: #000000;
     }
     H1.indx {
	     position: relative;
	     left: -65px;
	     bottom: -10px;
         font-size: 300%;
         color: #191970; /* Midnight Blue*/
 	     padding-bottom: 0;
    }
    UL {
		  margin-bottom: 5px;
     }
	UL.indx A:link {
          color: #0000ff;    /* Blue */
	      background: #fff;   /* White */
          margin: 0;
	      padding: 0;
    }
     UL.indx A:visited {
          color: purple;
	      background: #fffaf0;   /* Floral White */
          margin: 0;
	      padding: 0;
     }
     UL.indx A:hover {
          font-family: Verdana, Tahoma, Sans-Serif;
          font-size: x-large;
          color: #ff0000; /* Red */
          background: yellow;    
	      border: 1px solid #0000ff; /* Blue */
          margin: 0;
	      padding: 0;
     }
     UL.indx A:active {
          color: #000080;  /* Navy Blue */
          background: yellow;
	      border: 1px solid #d3d3d3;
          margin: 0;
	      padding: 0;
     }
	 
/* --------------- Pull Quotes --- */

     .pullq {
	      font-size: 125% "Bookman Old Style", Garamond, Times, Serif;
    	  text-align: left;
    	  font-size: 150%;
          border-top: 2px solid #000;
	      border-left: 1px solid #d3d3d3;
          border-right: 1px solid #d3d3d3;
          border-bottom: 1px solid #d3d3d3;
	      padding: 3%;
	      background: #fffaf0;   /* Floral White */
	      width: 30%;
	      float: right;
	      margin-right: -30px;
     }
     .pull2 {
	      font-size: 125%;
    	  text-align: left;
          border-top: 2px solid #000;
	      border-left: 1px solid #d3d3d3;
          border-right: 1px solid #d3d3d3;
          border-bottom: 1px solid #d3d3d3;
	      padding: 5px;
	      background: #f8f8ff;   /* Ghost White */
	      width: 25%;
	      float: right;
    	  margin-right: -40px;
     }
/* 
Turn 0ff #ad1 and .ad1 @ sml scrns 
------------------------------------------------------------- */

@media screen and (min-width: 301px) and (max-width: 1190px) {
#ad1 { 
	display: none;
    }
.ad1 { 
	display: none;
    }
H1.indx {
	     left: 0;
	     bottom: 0;
    }
  }
/*  
For Screens  900 to 1200 Px
------------------------------------------------------------- */

@media screen and (min-width: 900px) and (max-width: 1190px) {
DIV, .white, .white2 {
	width: 90%;
	padding: 5px;
    margin: 5px 10px 10px 10px; 
	border-top: 2px solid #D3D3D3;
	border-right: 3px solid #000;
	border-bottom: 3px solid #000;
	border-left: 2px solid #D3D3D3;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
     }
 } 

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

@media screen and (min-width: 600px) and (max-width: 899px) {
DIV, .white, .white2 {
          left: 5px; 
     	  width: 95%;
    	  padding: 5px;
          margin: 5px 10px 10px 10px; 
          border-top: 1px solid #D3D3D3;
          border-right: 2px solid #000;
          border-bottom: 2px solid #000;
    	  border-left: 1px solid #D3D3D3;
         -webkit-border-radius: 8px;
         -moz-border-radius: 8px;
         border-radius: 8px; 
     }
UL.indx A:hover {
          font-size: large;
     }
 }


/* 
For Screens up to 600 Px
------------------------------------------------------------- */

@media screen and (min-width: 301px) and (max-width: 599px) {
DIV, .white, .white2 {
          left: 2px; 
     	  width: 98%;
    	  padding: 4px;
          margin: 3px 7px 7px 7px; 
          border: 1px #D3D3D3;
         -webkit-border-radius: 8px;
         -moz-border-radius: 8px;
         border-radius: 8px; 
     }
H1.indx {
	     left: 10px;
    }
UL.indx A:hover {
          font-size: large;
     }
  }