/* 
Made by Jerry A. Sierra for Marti Lives 
Last updated on: 9/24/2019
--------------------------------------- */

/*  ================================  Bodies and html5 
====================================================== */

* {
margin: 0;
padding: 0;
border: 0;	
}

article, 
section, 
aside, 
hgroup, 
nav, 
header, 
footer, 
figure, 
figcaption,
img {
	display: block;
} 

body {
    font-family: Tahoma, Geneva, sans-serif;
	vertical-align: baseline;
}

.body2 {
	background: #F2F2F2;
}

/*  =========================================  Layout 
====================================================== */

header {
	      width: 80%;
		  background: #fff;             /* --- White --- */
          margin-right: 5px; 
          margin-left: 10%;
          border-bottom: 1px solid #808080;
          margin-bottom: 5px;
   	      -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 8px 0px rg ba(0, 0, 0, 0.3); 
	      padding-bottom: 10px;
		  clear: both;
}

section {
	      padding: 3px;
	      width: 80%;
		  height: auto;
		  margin-right: 5px; 
          margin-left: 10%;
	      border-top: 1px solid #d3d3d3;
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          border-left: 1px solid #d3d3d3;
         -webkit-border-radius: 12px;
         -moz-border-radius: 12px;
         border-radius: 12px;
	     clear: both;
         margin-bottom: 4px;
}

article {
	width: 60%;
	margin: 5px;
    letter-spacing:normal;
    clear: both;
}

aside {
	position:relative;
	width: 35%;
	height: auto;
	margin: 5px;
	border: 2px solid #808080;
	font-size: large;
	color: #990099;
    letter-spacing: 2px;
    clear: both;
}

nav {
	      padding: 3px;
	      width: 80%;
		  height: auto;
	      background: #FFF3F3;
		  margin-right: 5px; 
          margin-left: 10%;
	      border-top: 1px solid #d3d3d3;
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          border-left: 1px solid #d3d3d3;
         -webkit-border-radius: 12px;
         -moz-border-radius: 12px;
         border-radius: 12px;
	     clear: both;
         margin-bottom: 4px;
}

figure {
	
}

figcaption {
	
}

footer {
	clear: both;
	font-size: small;
	width: 80%;
	background: #fff;   /* --- White --- */
    margin-top: 5px; 
    margin-right: 5px; 
    margin-left: 10%;
	margin-bottom: 10px;
	color: #999;
    border-top: 1px solid #808080;
	text-align:center;
}

 /*  ======================================  DIVs ==== */

div {
 }

.DivMarti, .DivMarti2, .DivMarti3, .DivMarti4, .DivMarti5 {
	      padding: 3px;
	      width: 80%;
		  margin-right: 5px; 
          margin-left: 10%;
          margin-bottom: 4px;
	      border-top: 1px solid #d3d3d3;
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          border-left: 1px solid #d3d3d3;
         -webkit-border-radius: 0px 0px 12px 12px;
         -moz-border-radius: 0px 0px 12px 12px;
         border-radius: 0px 0px 12px 12px;
	     clear: both;
}
.DivMarti {
	      background: #E0E6F8;   /* --- lite gray --- */
}
.DivMarti2 {
	      background: #FFF;   /* --- white --- */
}
.DivMarti3 {
	background: #FFF3F3;
}
.DivMarti4 {
	background: #FFF3F3;
}

.DivMarti5 {
		  		  height:190px;
				  background-image:url(images/CubanHistory/Skaters-4Sml.jpg);
	      background-repeat: no-repeat;
          background-position: bottom right;
		  background-color: #E0E6F8;   /* --- lite gray --- */
}

                                /* Not Used */
.LeftSideAd {
	position: fixed;
	width: 130px;
	background-color: #fff;     
	border: 0;
	top: 15px;
	float: left;
	margin-left: 4px;
	letter-spacing: normal;
	text-align: center;
}

/* ==============================================  F O N T S  =======  */

h1, 
h2 {
	font-family: Helvetica, "Times New Roman", Times, serif;
}

p,
ul,
li,
footer {
    font-family: Garamond, "Times New Roman", Times, serif;
}


/* ==============================================  Headings  =======  */

h1 {
     font-size: xx-large;
     font-weight: 700;
     color: #000;          /* -- black text -- */
     font-variant: small-caps;
    } 
	 
h1.one {
     font-size: 300%;
     font-weight: 900;
     color: #000;          /* -- black text -- */
     text-shadow:2px 2px 3px #69100F;  /* Unsupported in IE */
     } 
	 	 
.H2big {
	font-size: x-large;
	font-style: normal;
	font-weight: 700;
	font-variant: small-caps;
	color: #03F;
}

/*  ===============================================  Paragraphs 
================================================================  */

p {
	font-size: medium;
    width: 80%;
	font-weight: 400;
	color: #000;          /* -- black text -- */
	font-style: normal;
	line-height: 1.4;	
	bottom: 2px;
	margin: 2px 4% 6px 3%;
	border-left-width: 12px;
	border-right-width: 10px;
}

    /* --------------------------------------------- Voice 1 -- */
p.voice1 {
	font-family: "Trebuchet MS", "Comic Sans MS", Sans-serif;
	font-weight: 500;
	color: #003366;          /* -- red text -- */
    width: 70%;
	background-color: #FFFFCC;
}
 
    /* ----------------------------------------- Voice 2 -- */
p.voice2 {
	font-family: Georgia, "Times New Roman", Serif;
	line-height: 1.5;	
	font-weight: 600;
	color: #063;          /* -- dark green -- */
	background-color: #FFF;
}


    /* --------------------------------------- Voice 3 -- */
p.voice3 {
	font-family: "Comic Sans MS", Verdana, Sans-serif;
	font-weight: 500;
	color: #4B0082;          /* -- indigo text -- */
    width: 70%;
	background-color: #FFFFCC;
}
 

p.nav {
          color: #000;       /* -- black text -- */
	      background: #FFF;
	      padding: 3px;
	      width: 50%;
 		  line-height: 1.5;	
          text-decoration: none;
          border-top: 1px solid #d3d3d3;
          border-right: 2px solid #000;
          border-bottom: 2px solid #000;
          border-left: 1px solid #d3d3d3;
}

    /* --------------------------------------------- Pull Quote ---- */

.expanded {
	float:right;
	position:relative;
	width: 35%;
	margin: 15px;
	font-size: large;
	color: #990099;
    letter-spacing: 2px;
}

/* ----------------------------------------------  Text ---- */

.small {
	font-size: small;
}

strong {
	font-size: medium;
	font-style: monospace;
}

.Big {
	font-size: x-large;
	font-style: normal;
	font-weight: 700;
	line-height: 1.6;	
	font-variant: small-caps;
	text-transform: none;
	color: #6600CC;  /* -- Purple txt -- */
}

     /* ------------------------------------------ Un-ordered Lists -- */
ul, 
li {
	font-size: medium;
    list-style-type: none;
	color: #000;          /* -- black text -- */
	text-decoration: none;
	padding: 0 0 0 15px;
	border-left-width: 20px;
	border-right-width: 10px;
	text-align: left;
}

/* ======================================================  Images
===================================================================  */

img {
	display: block;
    padding: 0 5px 0 5px;
	max-width: 100%;
    height: auto;
	visibility: visible;
	opacity: 1.0;
}
.img2 {
	margin: 5px;
	border-left: 1px solid #000;
	max-width: 100%;
    border-radius: 0 8px 8px 0;
    height: auto;
	visibility: visible;
	opacity: 1.0;
}
.img3 {
	margin: 5px;
	border: 1px;
	max-width: 100%;
	color: #000;    /* Black */
    height: auto;
	visibility: visible;
	opacity: 1.0;
}



/* ==========================================  For Screens 600 Px
=================================================================  */

@media screen and (min-width: 599px) {

body {
	width: 100%;
	height: 100%;
}

h1.one {
     font-size: x-large;
     font-weight: 800;
     color: #000;          /* -- black text -- */
     font-variant: small-caps;
     text-shadow:2px 2px 3px #69100F;  /* Unsupported in IE */
     } 	

p.nav {
          color: #000;       /* -- black text -- */
	      background: #FFF;
	      padding: 3px;
}

aside {
	width: 95%;
	margin: 5px;
	border: 2px solid #808080;
	font-size: medium;
}
	
}

/* =========================================  For Screens 900 Px
================================================================= */

@media screen and (min-width: 900px) {
	 
p.nav {
	      width: 70%;
}
	
img.resize {
    width:60%;       /* 60% of available space */
    height: auto;
}

}

/* ============================================  For Screens 1200 Px
=====================================================================  */

@media screen and (min-width: 1200px) {

p.nav {
	      width: 80%;
}

img.resize {
    width:70%;  
    height: auto;
}

}