/*   Copyright 2020 KeunVi affliates Tosh Keune and Nash Keune  
     Revision 1.0    7/18/2020                                  */

body {
      background-image:  url("../Images/keuvi.jpg");
	  padding-left: 4%;	
}

.app-page {
      background-image:  url("../Images/keuvi.jpg");
}	

table {
  table-layout: fixed;
  vertical-align: top;
}	

td {
	height: 12pt;
	vertical-align: top;
}
/*	
	.buttonNext {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	}
*/
/*
	.buttonBack {
    background-color: #008CBA; 
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	}
*/
/*
	.buttonAnswer {
    background-color: #555555; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	}
*/
	.underline{
	text-decoration: underline;	
	}
/*
	.pFill {
    background-color: #778899 ; 
    color: black;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	}
*/
/*
	.pFillChecked {
    background-color: #52a9ff; 
    color: black;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	}
*/	
	
/* unvisited link */
a:link {
    color: black;
}

/* visited link */
a:visited {
    color: black;
	font-weight:heavy;      
}

/* mouse over link */
a:hover {
	color:black;
	font-weight: heavy;
}

/* selected link */
a:active {
    color: blue;
}

.bAqua{   /*  Set to match Visibly close to Carolina Blue  */
	color: rgb(21, 255, 255);
	font-weight: bold;
}

.bTeal{   /* Teal Highlights */
	color: rgb(0, 128, 128);  
	font-weight: bold;
}
.bBBlue{font-size: 12pt;
	color: rgb(21, 255, 255);
	font-weight: bold;
}

.bCobalt {
	color: rgb(0, 71, 171);
	font-weight: bold;
}
/*
.limeGreen {
	color: rgb(50, 205, 50);
	font-weight: bold;
}
*/
.correctGreen {
	color: #66ff33;
	font-weight: bold; 
	padding-left: 20%;	
}
/*
.neonGreen {
	color: rgb(170, 242, 0);
	font-weight: bold;
}
*/
.greyish {
	color: #808080;
	font-size: 14px;
}
/*
.blinking{
    animation:blinkingText 0.8s infinite;
}
*/
/*
@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: transparent; }
    50%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}
*/
/*
.contentContainer{
	font-size: 20px;
	color: #4B9CD3	;
}
*/
/*
.promptContainer{
	font-size: 20px;
	color: #4B9CD3	;
}
*/
/*
.lessonContainer{
	font-size: 36px;
	color: #4B9CD3	;
	font-weight: bold;
}
*/
.pageIndicator{
	font-size: 24px;
	background-color: #4B9CD3;
	color: black;
}
 
#overlay {
    position: relative; 
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    left: 10px;
    bottom: 20px;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
	}
	
	#text{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

	.lne  {
		max-width:24px;
		text-align:right;
		font-style: italic;
		font-family: arial;
		font-size: 10pt;
		color:#8e8d88;
	}
	
	.enl  {   /*  This is the line number class minus the first 2 attributes */
		font-style: italic;
		font-family: arial;
		font-size: 10pt;
		color:#8e8d88;
	}	
	
	.reading {
		width: 35rem;
        font-size: 12pt;
        font-family: arial;
		color:#000000;
	}
    
	.Answers {
        font-size: 12pt;
        font-family: arial;
		color:#000000;
	}
	.rdngHdng  {
		font-size: 14pt;
		font-family: arial;
		font-weight: bold;
		color: #9900ff;
	}
	
	.miniHdng  {
		font-family: arial;
		font-weight: heavy;
		color: #9900ff;
	}
/*	
	.mdlLink {
		color:#00ff55;
		font-weight: heavy;
	}
*/
	
	.bluetext  {
		font-size: 13pt;
		font-family: arial;
		color: #0000ff;
	}

	.leftSide {
		text-align: left;
	}
	
	
	.centered {
		text-align: center;
	}
	
	.rightSide {
		text-align: right;
	}	
	
	.right{
		float:right;
	}

	.left{
		float:left;	
	}	
	
	.bottomSide {
		text-align: bottom;
	}	
	
	.lowered  {
		font-size: 8pt;
		font-family: arial;
		font-weight: bold;		
	}	
	
	.bigBold  {
		font-size: 18pt;
		font-family: arial;
		font-weight: heavy;		
	}	
	.overlined {
		text-decoration: overline;
	}	
	
	.midline {
		style="padding-right:20px;
		border-right: 1px solid #ccc;
	}
/*	
	.centerImg134 {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 17%;
	}
*/
/*	
	.vertical-menu {
		width: 400pt; /* Set a width if you like */
	}
*/
/*
	.reading-col {
		width: 400pt; /* Set a width if you like */
/*		resize:both;
		overflow:auto;
	}
*/
/*
	.questions {
		border-style: solid;
		border-color: red;
	}
*/
/*	
	.vertical-menu a {
		background-color: white; /* White background color */
/*		color: black; /* Black text color */
/*		display: block; /* Make the links appear below each other */
/*		padding: 12px; /* Add some padding */
/*		text-decoration: none; /* Remove underline from links */
/*		text-align: left;
	}
*/
	.vertical-menu a:hover {
		background-color: #ccc; /* Dark grey background on mouse-over */
	}

	.vertical-menu a.active {
		background-color: #9933ff; /* Tarheel Blue ??? */
		color: white;
	}
	

	  /* Tooltip on top 
	  .test + .tooltip.top > .tooltip-arrow {
		  border-top: 5px solid green;  */
	  }
	  /* Tooltip on bottom 
	  .test + .tooltip.bottom > .tooltip-arrow {
		  border-bottom: 5px solid blue;  */
	  }
	  /* Tooltip on left 
	  .test + .tooltip.left > .tooltip-arrow {
		  border-left: 5px solid red;  */
	  }
	  /* Tooltip on right 
	  .test + .tooltip.right > .tooltip-arrow {
		  border-right: 5px solid black;  */
	  }
	  
	/* The Modal (background) */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* relative; Was fixed to Stay in place */
		left: 5px; 
		bottom: 5px;  /* places it over the line above  */
		top: 8px;
		z-index: 1; /* Sit on top */
		padding-top: 5px; /* Location of the box */
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(179,179,179,0.4); /* Grey Black w/ opacity */
		background-color: #000000; 		
	}

	/* Modal Content */
	.modal-content {
		background-color:#3399ff;
		margin: auto;
		padding: 5px;
		
		border: 2px solid #39f;
	/*	width: 80%;  */
	}

	/* The Close Button */
	.close {
		color: #ffffff;
		float: right;
		font-size: 28px;
		font-weight: bold;
	}

	.close:hover,
	.close:focus {
		color: hotpink;
		text-decoration: none;
		cursor: pointer;
	}

	.dual {
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
		
		/*  Space between columns */
		-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
		-moz-column-gap: 10px; /* Firefox */
		column-gap: 20px;
		
		/* Column dividing line */
		-webkit-column-rule: 4px solid #9900ff; /* Chrome, Safari, Opera */
		-moz-column-rule: 4px solid #9900ff; /* Firefox */
		column-rule: 4px solid #9900ff;
	}
	
		
	.padLeft   {
		padding-left: 4%;		
	}
	
	.padLeftBig   {
		padding-left: 20%;		
	}
	
	.padLeftVeryBig   {
		padding-left: 30%;		
	}
	
	.padRight   {
		padding-right: 4%;		
	}