/* Main CSS for the Travelogues gray, red hr*/
a:link {
  color: blue;
}
*|a:active {
  color: red;
}
*|a:hover {
  color: purple;
}
*|a:visited {
  color: green;
}
*|h1 {
  color: #000000;
  font-family: "Times New Roman";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
  text-align: center;
}
  

*|a:visited {
  color: green;
}


*|h2 {
  color: #000000;
  font-family: "Times New Roman";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
  text-align: center;
}
*|h3 {
  color: #000000;
  font-family: "Times New Roman";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
  text-align: center;
}
*|h4 {
  font-family: "Times New Roman";
  font-style: normal;
  font-variant: normal;
  font-size: 16px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
  text-align: center;
  font-weight: normal;
}


* {
  box-sizing: border-box;
}

*|body {
    background-color: gray;
     text-align: justify;
  text-justify: inter-word;
}

div {
  color: #000000;
  font-weight: normal;
  font-size: 16px;
  font-family: "Times New Roman";
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: #F5DEB3;
  text-align: justify;
  text-justify: inter-word;
}

*|p {
  color: #000000;
  font-weight: normal;
  font-size: 16px;
  font-family: "Times New Roman";
  max-width: 800px;
}

.container {
  color: #ff0000;
  font-weight: normal;
  font-size: 14px;
  font-family: "Times New Roman";
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  background-color: #F5DEB3;
  overflow: scroll;
}

.margin {
  color: #000000;
  font-weight: normal;
  font-size: 16px;
  font-family: "Times New Roman";
  width: 800px;
  margin-left: auto;
  margin-right: auto;
    background-color: wheat;
     text-align: justify;
  text-justify: inter-word;
}

*|hr {
  text-align: center;
  width: 80%;
  height: 2px;
  color:   black;
}






/* ==========================================
   	TABLE STYLE SHEETS FOR IMAGES BEGINNING
	=========================================*/
	
*|table  {
	width: 95%;
	max-width: 800px;
	margin-left:auto; 
	margin-right:auto; 
	}
	
		
	td {
	color: #000000;
  font-weight: normal;
  font-size: 16px;
  font-family: "Times New Roman";
  padding: 15px;
 margin-left: 15px;
  margin-right: 15px;
}

	
/*                                          ==========================================
   	                                        TABLE STYLE SHEETS FOR IMAGES END
   	                                        
                                                    Classes below
                                         	=========================================*/	
                                                      /* Buddhism*/ 
 .buddha {
max-width:           75%; 
border: 2px solid green; 
margin-left:  auto;
margin-right: auto;
padding:       2px;
}	

                                                      /* Death in a travelogue */

.diat    {
max-width:           75%; 
margin-left:     auto; 
margin-right:    auto;
border:          2px solid red; 
padding:          5%; 
	}


                                                      /* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

                                                         /* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.fivehundred {
  color: #000000;
  font-weight: normal;
  font-size: 16px;
  font-family: "Times New Roman";
  max-width: 83%;
  margin-left: auto;
  margin-right: auto;
}
.sixhundred {
  color: #000000;
  font-weight: normal;
  font-size: 16px;
  font-family: "Times New Roman";
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.indent {
  color: #000000;
  font-weight: normal;
  font-size: 16px;
  font-family: "Times New Roman";
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
    background-color: wheat;
}

.centerdiv  {
  display: 		block;
  margin: auto;
  width: 95%;
  padding: 10px;
}

                          /* --------------------------------- IMAGES ------------------------- */

.caption   {
text-align: center;
display: inline;
}

.figcaption   {
text-align: center;
display: inline;
}


*|img {
  width: 95%;
  padding: 10px 10px;
  border: 1px solid black;
  margin-top: 5px;
  margin-bottom: 5px;
}
.leftimg {
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 15px;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.leftimg150{
  width:        19%;
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 2%;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.leftimg200 {
  width:        25%;
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 2%;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.leftimg250{
  width:        31%;
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 2%;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.leftimg300{
  width:        36%;
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 2%;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.leftimg350{
  width:        44%;
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 2%;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.leftimg400{
  width:        50%;
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 2%;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.leftimg450{
  width:        56%;
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 2%;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.leftimg500{
  width:        63%;
  display: 		block;
  float: 		left;
  padding:     10px;
  border: 	1px solid black;
  margin-right: 2%;
  margin-top: 	5px;
  margin-bottom: 5px;
}

.leftimgtrip {
  display: 		block;
  float: 		left;
  width:        200px;
  padding:      10px;
  /*border: 		1px solid black;*/
  margin-right: 115px;
  margin-top: 	5px;
  margin-bottom: 5px;
}
.rightimg {
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}
.rightimg150 {
   max-width:     19%;
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}

.rightimg200 {
   width:     25%;
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}

.rightimg250 {
   width:     31%;
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}
.rightimg300 {
   width:     39%;
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}

.rightimg350 {
   width:     44%;
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}
.rightimg400 {
   width:     50%;
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}
.rightimg450 {
   width:     56%;
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}
.rightimg500 {
   width:     63%;
  float:   right;
  padding: 	10px;
  margin-left: 2%;
   margin-top: 5px;
  margin-bottom: 5px;
}

.divleftimg  {
display: 		block;
float: left; 
margin-right: 15px;
} 

.centimg {
  display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
}

  .centimg150 {
  width:     19%;
  display: 		block;
  /*margin-left: 	auto;
  margin-right: auto;*/
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
}
  .centimg200 {
  width:     25%;
  display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
}
  .centimg300 {
  width:     38%;
  display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
}
  .centimg400 {
  width:     50%;
  display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
}
  .centimg500 {
  width:     63%;
  display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
  
}
  .centimg600 {
  width:     75%;
  display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
  
}

.centimg700 {
     width:     86%;
display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
  
}
.centimg750 {
     width:     93%;
display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
  
}
  .centimg800 {
  width:     100%;
  display: 		block;
  margin-left: 	auto;
  margin-right: auto;
  padding: 	   	10px;
  border: 		1px solid black;
   margin-top: 	5px;
  margin-bottom: 5px;
  
}
                               /* --------------------------------- end of IMAGEs ------------------------- */
.righttext {
  text-align: right;
}

figure {
  display: inline;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

#navtable {
  margin: 0 auto;
  padding: 15px 0 0 10;
}

#navtd {
  padding: 0 1px 1px 9px;
  font-size: 12px;
}
#credits {
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
                                        /* =============================== VIDEO ====================================== */
.video-boxSD {
    position: relative;
  overflow: hidden;
  width: 100%;
    height: auto;
  padding-top: 75%; /* 4:3 Aspect Ratio (divide 3 by 4 = 0.75) */
   margin-left: 	auto;
  margin-right:     auto;
  background-color: wheat;
}

video-boxHD {
    position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  background-color: wheat;
}

                                            /* Then style the iframe to fit in the container div with full height and width */
.resp-ifr {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.videocomment {
  margin: 0 auto;
  width: 720px;
  background-color: #ccccff;
  padding-top: 5px;
}
.videocaption {
  margin: 0 auto;
  font-size: 0.8em;
  text-align: center;
}
.centertext {
  text-align: center;
}

.tab { 
margin-left: 80px; 
}

                          /*Media Query for cellphone==================================*/
@media only screen and (max-width:600px) {
   .margin {
       text-align: justify;
  text-justify: inter-word;    
   } 
}
   
/*
                                        @media only screen and (max-width:600px) {

@media only screen and (max-width:600px) {
    
body{
background-color: wheat;
width: 100%;
}
div{
  width: 100%;
}
.container {
  width: 100%;
}
 .margin {
   width: 90%;
    background-color:wheat;
}

*|img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 100%;
}

}
/*
                                @media only screen and (min-width: 601px) {
    
 body{
background-color:wheat;
width: 100%;
}
 div{
 width: 100%;
}
.container {
  width: 100%;
}
 .margin {
   width: 90%;
}
img {
   display: block;
   float:none;
     border: 		1px solid black;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  min-width: 70%;
}
}

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

 body{
background-color:wheat;
width: 100%;
}

 div{
 width: 100%;
}
 
 .container {
  width: 100%;
}
  .margin {
   width: 90%;
}

img {
   display: block;
   float:none;
     border: 		1px solid black;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
    width: 90%;
}

}

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

body{
background-color:wheat;
width: 100%;
}

 div{
 width: 100%;
}

 .container {
 width: 100%;
}

 .margin {
   width: 90%;
}

img {
   display: block;
   float:none;
     border: 		1px solid black;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
    width: 90%;
}

}
*/


                                                /*END OF CSS*/