html, body{
    height: 100%;
    /* line-height: 1.5em;			/* WCAG 2.1 TEST */
    /* letter-spacing:  0.12em;	/* WCAG 2.1 TEST */
    /* word-spacing: 0.16em;		/* WCAG 2.1 TEST */
}
p {
	/* margin-bottom: 2em; 			/* WCAG 2.1 TEST */
}
h1 {
	font-size: 1.25em; 
	color: #003304;
}
h2 {
	font-size: 1.0em; 
	color: #003304;
}
h3 {
	font-size: 0.875em; 
	color: #003304;
}

div.shadowBorder { 
  	border-width: 4px;
  	border-style: solid;
  	border-color: #003304;
	/*  border-radius:15px; */
  	border-radius:5px;
  	box-shadow: 5px 5px 5px #003304;
 	display: inline-block;
	position: relative;
 	/*height:360px;*/
  	padding: 20px;
  	margin:10px;  
  	font-family: sans-serif;
}	
div.redShadowBorder { /* for urgent messages */
  	border-width: 4px;
  	border-style: solid;
  	border-color: #800000;
	/*  border-radius:15px; */
  	border-radius:5px;
  	box-shadow: 5px 5px 5px #800000;
 	display: inline-block;
	position: relative;
  	/*height:360px;*/
  	padding: 20px;
  	margin:10px;  
  	font-family: sans-serif;
  	font-size: 1.2em;
}	
h2.redFont {
	font-size: 1.2em; 
	color: #800000;
}
/* special shadowBorder DIVs: */
	div#currentTitleDiv {
		margin-top: 20px;
		margin-bottom: 10px;
		float:left;
	}	
	span#currentTitleSpan { /* single title, when ciphertext is shown */
		font-size:1.25em; 
		padding: 10px; 
		font-weight: 900; 
		border-style: solid;
	}
	/* for many titles: titleListDiv must be displayed over textDiv */			
	div#titleListDiv {		
		background-color: white;
		z-index: 2;
		max-width: 400px;
	}
	
	noscript#noScriptMessage {
		border: 4px solid red; 
		font-size: 200%; 
		color:#800000;
		float: left;
	}	
	/* force a line break before textDiv, otherwise hourglass and currentTitle 
	   is left from textDiv in large screens */
	div.lineBreakDiv {
		  display: block;
		  width:5%; /* since textDiv is 95% this is enough */
	}
	div#textDiv {
		 position: relative; 
		z-index: 1;
		width:95%;
	}	
	div#encryptedTextDiv {
		word-wrap: break-word;
		height: 10em; 
		overflow:auto;	
	}	
	input.titleInList {
		float: left;
	}
	/* for long titles: formInputDiv must be displayed over titleListDiv */
	div#formInputDiv {	
		background-color: white;
		z-index: 3;
		max-width: 550px;
	}
	div#hourglass {
		float: left; 
		margin-left:10px; 
		margin-right:10px; 
		margin-top:20px; 
		visibility: hidden;
	}
	label.titleLabel {
		overflow: hidden;
		max-width: 380px;
		border: 1px solid gray; 
		padding:5px 10px 5px 5px;
	}
	label.formLabel {
		width:11.0em;
	}
	input.formInput {
		height:3.0em;
	}
	/* div class shadowBorder for file import, see: PageView.fileImportInput */
	div#importDiv {
		min-width:10%;
		float:left;
	}
	/* input for file import, see: PageView.fileImportInput */
/*	input#inputFileImport { 
	} */
	div.shortInfo {
		float:right; 
		border: 3px double gray; 
		padding: 5px 5px 5px 5px; 
		margin-left:10px; 
		margin-top:5px;	
	}
	div.menuHint {
		font-size:0.75em; 
		font-weight:normal;
		padding: 2px 10px 2px 10px;
	}

	a.internalLink {
		color: #004d06;/*#006609;*/
	}


	a.skiplink { /* hidden skip link for accessibility. 
							Note: This does not appear on mobile devices, 
							because most links are displayed on bottom then */
		position:absolute;
		left:-10000px;
		top:auto;
		width:1px;
		height:1px;
		overflow:hidden;
	}
	a.skiplink:focus { /* visible when focus on link (first TAB) */
			/*content: "Skip to program start";*/		
		background-color:#00cc11;
		position:static;
		width:auto;
		padding:10px 25px;
    	text-decoration:none;
   	display:inline-block;
    	border-right:1px solid #fff;
    	border-left:1px solid #C2C2C2;
    	border-top:1px solid #fff;
  		float:left;
  		height:1.5em;
  		font-weight:bold; 
    	font-family:sans-serif;
	}			
	li#recommandedWorkFactor {
		background:#00990d;
	 	/*background:#006609; 
	 	color: white;*/
	}
	textarea {
 		font-size: 1.0em; 
		line-height: 1.1em;
  	 	font-family: monospace; 
	} 	
	div#importClipboardTextDiv { /* for import workaround */
		word-wrap: break-word;
		height: 24em; 
		overflow: auto;
	}
	span {
		font-family: sans-serif;
		font-size: 0.875em;
	}
	span#titleNotEncryptedHint {
 	font-size: 0.625em; 
 	font-weight: normal;
	}
	label {
		color: black;
		font-weight: bold;
		display: block;
		float: left;
	}
	button#passwordButton {
		height:2.45em;
		font-size:0.8em;
	}
	button.major {
    	height:2.45em;
   	width:9.0em;
    	text-align: center;
    	text-decoration: none;
    	display: inline-block;
    	font-size: 0.875em;
    	font-weight: bold;
	}
	button.major:focus {
		border-width: 2px;
  		border-style: solid;
  		border-color: black;
		background-color: #b3ffb9;
	}

	span.divider {
    	width:10px;
    	height:auto;
    	display:inline-block;    		
	}
    /*=======================================================*/

	table, th, td {
    	border: 1px solid black;
    	border-collapse: collapse;
    	padding: 10px;
	}
	td.ok {
		background-color: #b3ffb3;
	}
	td.failed {
		background-color: #ffb3b3;
	}

	/*********************************************************/
 /* The Modal (background) */
	.modal {
    	display: none; /* Hidden by default */
    	position: fixed; /* Stay in place */
    	z-index: 4; /* Sit on top */
    	left: 0;
    	top: 0;
    	width: 100%; /* Full width */
    	height: 100%; /* Full height */
    	overflow: auto; /* Enable scroll if needed */
	}

	/* Modal Content/Box */
	.modal-content {
    	background-color: #fefefe;
    	margin: 15% auto; /* 15% from the top and centered */
    	padding: 20px;
    	border: 1px solid #888;
    	width: 80%; /* Could be more or less, depending on screen size */
	}

	/* The Close Button */
	button.close {
    	color: #aaa;
    	/*float: right;*/
    	font-size: 1.2em;
    	font-weight: bold;
    	margin-right: 10px;
    	margin-top: 10px;
	}
	button.close:hover,
	button.close:focus {
    	color: black;
    	text-decoration: none;
    	cursor: pointer; 	
    	border-width: 2px;
  		border-style: solid;
  		border-color: black;
		background-color: #b3ffb9;
	} 	
	
/*************** Responsive: *********/
	@media screen and (max-width: 60em) { /*  and (orientation: portrait)  */
		div#programInfo {
			width: 90%;
			margin-bottom: 10px;
		}
		div.shadowBorder { 
 		 	border-width: 2px;
  			border-radius:5px;
 		 	box-shadow: 2px 2px 2px #003304;
 			/* 	float:left;*/
 		 	/*height:360px;*/
		  	padding: 10px;
 		 	margin:5px;  
 		 	font-family: sans-serif;
		}				
	}

	@media screen and (min-width: 1100px) { /* large screen width: */

		div#titleListDiv {
			margin-left: 20%;
		}
		div#formInputDiv {
			margin-left: 20%;
		}  
		div#importDiv {
			margin-left: 20%;
		} 		
		div#currentTitleDiv {
			margin-left: 20%;
			margin-top: 20px;
		}		
		div#textDiv {
	    		max-width: 900px;
				float: none;
				display: inline-block;
				margin-left: 20%;
		} 

		h1 {
			margin-left: 20%;
			/*text-align: center;*/
		}
  	}  	

	@media print {
		nav#nav {
			display: none;
		}
	}
	/* Check if this is a touch screen: Two checks: hover and pointer */
	@media (hover: none) { /* This is a touch screen */
		button.close {
	    	border-width: 2px;
  			border-style: solid;
  			border-color: black;
			background-color: #b3ffb9;
			color: black;
		}
	}
	@media (pointer:none), (pointer:coarse) { /* This is a touch screen */
		button.close {
	    	border-width: 2px;
  			border-style: solid;
  			border-color: black;
			background-color: #b3ffb9;
			color: black;
		}
	}
/*	@media (orientation: landscape) {
    .pell-content {     
      height: 100px; 
    }
	}

	@media (orientation: portrait) {
    .pell-content {
      background-color: lightgray;     
      height: 600px; 
    }
  	}*/