/* PMS 2020 Aug 21: added .mention to sl2018.css */
/* Vertical: 
   blue bar: 58px; navigation bar: 26px; buttons: 46px;  
   
   Horizontal: menu: 110px; body: 1000: */

/*
	descendent selector: element1 element2.   Apply to element2 if it is a descendent of element1
	child selector:      element1 > element2. Apply to element2 if it is a child of element1
	adjacent sibling:    element1 + element2. Apply to element2 if it is a sibling of element1 add directly follows it (intervening text is ignored)
	class selector:      .class or element1.class or class1.class2(has class class1 and class2, e.g. class='class1 class2') 
	id selector:         #id or element#id
	A [lang="..."] selector that matches the value of an attribute: *[lang="zh-Hant"]   {font-family: Kai,KaiTi,serif;}
*/

body 
{
    margin: 0px;

    background-color:  beige;   /* #F4C430; Saffron */
    width: 1000;              /*    width: 1064px; */
    border-width: 0px;
    border-color:  red; 
    border-style: outset;
}

a:link 
{
  color: #4876ff;
  text-decoration: none;
  border: 0px none; 
}

a:visited 
{
  color: #4876ff; /*#3454b7;*/ /* Make visited same color as link*/
  text-decoration: none;
  border: 0px none; 
}

a:active 
{
  color: #4876ff
}


a:hover 
{
  color: #4169e1;
  text-decoration: underline;
  border-bottom: 0px none; 
}


span.context a:link  
{
  color: white;
  text-decoration: none;
  border: 0px none; 
}

span.context a:visited 
{
  color: white;
  text-decoration: none;
  border: 0px none; 
}


span.context a:hover 
{
  color: white;
  text-decoration: underline;
  border-bottom: 0px none; 
}


div.m_entry a:link  
{
  color: #3454b7;
  text-decoration: none;
  border: 0px none; 
}



div.breadCrumbs	/* bread crumb links at top of page that let user return to previous pages */
{ 
    height: 46px;               /* height: 46 + 5 + 5 + 2 = 58px */
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    background-color: #3454b7;   
    color:   #F5F5DC;           /* Beige   was: #e8e5ef;  */
    text-align: left;
    border-width: 1px;
    border-color: black;
    border-style: outset;
}

span.websiteName	/* The Sanskrit Library */
{
    margin-left: 115px;
    font: 2.5em "Times New Roman", Times, serif; 
    text-align: left;
    border-width: 0px;
    border-color: black;
    border-style: outset;
    /*vertical-align:middle;*/
}

span.context	/* Links to previous pages visited enroute to the current page */
{

    font: 1.5em "Times New Roman", Times, serif; 
    padding-right: 15px;
    border-width: 0px;
    border-color: black;
    border-style: outset;
    /*vertical-align:middle;*/
}
/* Google: "HTML span aligns with bottom of image" */
.logo {
    vertical-align:middle;
    position:absolute;
    top:3px;
    padding-left: 3px;
    padding-right: 3px;
}



div.main	/* child of body */
{
    background-color:  beige;   /* #F4C430; */

    border-width: 0px;
    border-color:  red; 
    border-style: outset;
}

div.menu	/* The menu */
{ 
    float: left;
    width: 104px;           /* width: 104 +  3 + 3 = 110px */
    padding-top: 3px;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    background-color:  #3454b7;     /* #F4C430; Saffron */
    color: #e8e5ef; 
    font: 2.25em "Times New Roman", Times, serif; 
    text-align: right;
    border-width: 0px;
    border-color:  #e8e5ef; 
    border-style: outset;
}

div.buttons	/* preferences and help button section at top of menu strip */
{ 
    height: 40px;   /* hight: 40 + 2 + 4 = 46  */
    font: 9px "Times New Roman", Times, serif; 
    background-color: beige;    
    margin-left: 1px;
    border-width: 1px;
    border-style: outset;
    padding: 2px;
}

input.menuButton	/* preference or help button */
{    
    text-align: right;
    width: 100px;
    border-width: 1px;
    border-style: outset;
    background-color:  lightGrey;  /* Beige */

}

div.menuLinkEmpty
{ /*  89 + 1 + 1 + 2 + 5  = 98 */ 
    text-align: right;
    font: 14px "Times New Roman", Times, serif; 
    height: 130.0px;
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 0px;
    color: darkBlue;
    border-width: 1px;
    border-style: outset;
    padding-right: 10px;
    padding-top: 5px;
    background-color:   beige;

}

div.m_entry_pressed 
{
    font: 14px "Times New Roman", Times, serif; 
    height: 20.0px;
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 0px;
    text-align: left;
    color: darkBlue;
    border-width: 4px;
    border-style: inset;
    padding: 2px;
    background-color:   #F5F5DC; /* Beige */  
}

/*  */



div.contentIntro 
{
    position: absolute;
    top: 58px;
    left: 110px;
    background: #e8e5ef url(../images/bori-1.jpeg) no-repeat;                   /* picture of India temple*/
    width: 876px; /* 1000 - (110 + 5 + 5) - ( 4 + 4) */
    height: 590px; 
    border-width: 4px;
    border-color:  #e8e5ef; 
    border-style: inset;
}


div.contentEnglish 
{
    color: black;
    position: absolute;
    top: 58px;
    left: 110px;
    background: #F5F5DC; /* Beige */
    width: auto;  /* 1000 - (110 + 5 + 5) - ( 2 + 2). pms: was 1131px */
    border-width: 2px;
    border-color:  #e8e5ef;  
    border-style: inset;

}

div.contentIndicText 
{
    color: black;
    background: #F5F5DC; /* Beige */
    border-width: 2px;
    border-color:  #e8e5ef;  
    border-style: inset;

}

div.contentEnglish div.text 
{
    padding-top: 0%;
    padding-left: 1%;
    padding-right: 5%;

/*    border: solid 1px black;  */
  }

div.text 
{
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
    width: 95%; /* pms: added this */

/*    border: solid 1px black; */
  }

/* pms: added this */
div.contentIntro div.text 
{
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
    width: 700px;
/*    border: solid 1px black; */
  }

div.text h1
{
 font-size:24pt;
 color:blue;
 text-align: center;
}

/* Default table behavior */
td 
{
	text-align: left; 
	padding-bottom: 5px; 
	padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px
}

th 
{
	text-align: left; 
	padding-bottom: 5px; 
	padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px
}


/* default paragraph behavior */
P 
{
	padding-right: 15pt;
	padding-left: 15pt; 
}

p.scharf
{
	padding-right: 15pt;
	padding-left: 0pt;

}

/* default column behavior */
.row
{
	display: flex;
}
.column
{
	flex: 50%;
}

table.scharf
{
    margin-left:-6px;
}

/* Default header behavior */
h1 
{
	font-size: 24pt
}

h2 
{
	padding-left: 15pt; 
	font-size: 20pt; 
	padding-top: 20pt
}

h3 
{
	padding-left: 30pt; 
	font-size: 18pt; 
	padding-top: 20pt
}


/* The div with class segment is used in most pages of SLText*/
div.segment 
{
  margin: 0px 5px 0px 5px;
	font: 1.25em "Times New Roman", Times, serif; 
	border-top: #cccccc 1px solid
}

div.segment h1 
{
	background-color: #3454b7; 
	color: #e8e5ef; 

	margin: 0px; 
	padding-top: 5px;
	padding-right: 5px; 
	padding-bottom: 5px; 
	padding-left: 15px; 
}

div.segment p 
{
	margin: 20px 0px 5px 15px
}

div.segment li 
{
	background: url(dots.gif) no-repeat left top;   /* This has jpg has been lost. */
	height: 100%; 
	margin-bottom: 0.3ex; 
	margin-left: -25px;
	padding-left: 20px; 
	list-style-type: none; 
	display: block; 
}



div.segment p.heading 
{
	font-size: 1.5em
}


div.menuLink 
{ 
    text-align: right;
    font: 14px "Times New Roman", Times, serif; 
    height: 20.0px;				/* height: 20 + 1 + 1 + 2 + 5 = 29 ? */
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 0px;
    color: darkBlue;
    border-width: 1px;
    border-style: outset;
    padding-right: 10px;
    padding-top: 5px;
    background-color:   beige;

}


div.menuLinkLeft 
{ 
    text-align: left;
    font: 14px "Times New Roman", Times, serif; 
    /*height: 20.0px;	*/			/* height: 20 + 1 + 1 + 2 + 5 = 29 ? */
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 0px;
    color: darkBlue;
    border-width: 1px;
    border-style: outset;
    padding-right: 10px;
    padding-top: 5px;
    background-color:   beige;

}

/* Classes */
.highlight 
{
	background-color: #edf921; 
	color: #000000
}


.highlight li       /* a line underneath an element with class highlight */
{
	color: #000000
}

.spaced 
{
	padding-bottom: 20px; 
}
    
.sensor {
	width:200px;
	height:24px; 
	font-size:18px
}

#prevPage, #nextPage {width:50px}

#currentPage {display:inline-block; text-align:center; width:50px;}

#pageArea {overflow:auto}

.display-none {
  display: none;
}

.display-flex {
  display: flex;
}

.flex-direction-column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.42857143;
  padding: 6px 12px;
  text-align: center;
}

.btn-group {
  border-radius: 4px;
  border: 1px solid #ccc;
}

.btn-group > .btn {
  border: none;
}

.btn:hover,
.btn:focus {
  background-color: #ebebeb;
  border-color: #adadad;
}

.mention {font-style: italic;}