@charset "utf-8";

body {
	margin: 0;
	color: darkblue;
	
//	background-image: url("../images/BlueBoyBalloon.png");

	background-repeat: no-repeat;
	background-color: blue;
	background-size: cover;
	
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
/*	font-family: Verdana, Arial, Helvetica, sans-serif; */
  font-family: Times, 'Times New Roman', serif;		
	font-size: 18px;
	line-height: 1.4;
	text-decoration: none;
}	

/*   normal browser size   */
@media (min-width: 860px) {	
	body {
	background-color: silver; 
//	background-image: url("../images/BlueBoyBalloon.png"); 
  background: linear-gradient(#aaa, #fff);    
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
	}
  }	
@media (min-width: 860px) {
  .header {width: 92%; margin: auto; margin-top: 1%;}
  }
@media (min-width: 860px) {  
  .content {width: 98%; float: right; margin-right: 1%; margin-left: 1%; margin-top: 1%;};
  }
@media (min-width: 860px) {    
  .floatbar {float: left; width: 19%; margin-left: 1%;  margin-right: 1%; margin-top: 1%; 
  position: fixed; display: block;}
  }
@media (min-width: 860px) {    
  .footer {width: 96%; 
  margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 4px;};
  }
@media (min-width: 860px) {    
  .textbox {width: 93%; float: right;};
  }
@media (min-width: 860px) {    
  .button1 {width: 98%; margin-right: 1%; margin-left: 1%;}
  }  
@media (min-width: 860px) {    
  .navbutton {width: 20%; margin-right: 1%; margin-left: 1%; display: none;}
  }    
  
/*   small mobile devives   */
@media (max-width: 859px) {	
	body {
	background-color: silver; 
//	background-image: url("../images/BlueBoyBalloon.png"); 
  background: linear-gradient(#aaa, #fff);    
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
	}
  }		
@media (max-width: 859px) {
  .header {width: 92%; margin: auto; margin-top: 1%;}
  }
@media (max-width: 859px) {  
  .content {width: 96%; float: right; margin-right: 1%; margin-left: 2%; margin-top: 1%;};
  }
@media (max-width: 859px) {    
  .floatbar {width: 85%; margin-left: 1%;  margin-right: 1%; margin-top: 4%; 
  position: fixed; display: none; opacity: 1.0; max-width: 240px}
  }
@media (max-width: 859px) {    
  .footer {width: 96%; 
  margin-right: 1%; margin-left: 2%; margin-top: 1%; margin-bottom: 2px;};
  }
@media (max-width: 859px) {    
  .textbox {width: 93%; float: right;};
  }
@media (max-width: 859px) {    
  .button1 {width: 98%; margin-right: 1%; margin-left: 1%;}
  }  
@media (max-width: 859px) {    
  .navbutton {width: 20%; margin-right: 1%; margin-left: 1%; display: block;}
  }    
  
  
ul, ol, dl { 
	padding: 0px;
	margin: 0px;
}

h1, h2, h3, h4, h5, h6, p, ul {
	padding-right: 15px;
	padding-left: 15px; 
	margin: 0;
	padding-top: 1px;
	padding-bottom: 1px;
}

h1 {
  font-size: 120%;
}

a img {
	border: none;
}


.header {
	display: block;
	padding: 12px;
	text-decoration: none;
	font-family: Times, 'Times New Roman', serif;		
	font-weight: bold;
	font-size: 120%;
	text-shadow: silver 6px 4px 8px;
	color:  darkblue;
	background: #aaa; 
	background: rgba(124, 124, 124, .99);
  background-image: linear-gradient(#ccc, #777);    
	border-radius: 20px;
	box-shadow: inset 0 0 10px #9cf;
}

.infobox {
	display: block;
	float: right;
	padding: 12px;
	text-decoration: none;
	text-align: left;
	font-family: Times, 'Times New Roman', serif;		
//	font-weight: bold;
	font-size: 80%;
//	text-shadow: silver 6px 4px 8px;
	color:  darkblue;
	background: #aaa; 
	background: rgba(124, 124, 124, .99);
  background-image: linear-gradient(#777, #ccc);    
	border-radius: 20px;
	box-shadow: inset -2px -2px 2px #9cf;
	margin-left: 16px;
	margin-right: 0px;
}


.orderbox {
	display: block;
//	float: right;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
	padding: 12px;
	text-decoration: none;
	text-align: left;
	font-family: Times, 'Times New Roman', serif;		
//	font-weight: bold;
	font-size: 90%;
//	text-shadow: silver 6px 4px 8px;
	color:  darkblue;
//	background: #aaa; 
//	background: rgba(124, 124, 124, .99);
//  background-image: linear-gradient(#777, #ccc);    
  background: silver;
	border-radius: 20px;
	box-shadow: inset -2px -2px 2px #9cf;
//	margin-left: 16px;
	margin-bottom: 0px;
}


.hint {
	color:  #FFF;
	background: #999; /* Fallback IE 6-8 */
	background: darkgrey;
	box-shadow:inset 0 0 10px #9CF;
	border-radius: 20px;
	font-size: 100%;
	padding: 10px;
	text-align: justify;
	margin-top: 20px;
	margin-right: 10px;
	margin-bottom: 20px;
	margin-left: 10px;
  background-image: linear-gradient(#114, #337);
  cursor: pointer;	
}

.buttonL {
  float: left;
  width: 25%;
	color:  darkgreen;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow:inset 0 0 10px #9CF;
	border-radius: 20px;
	font-size: 100%;
	padding: 2px;
	text-align: center;
	margin-top: 2px;
	margin-right: 2%;
	margin-bottom: 2px;
	margin-left: 2%;
  background-image: linear-gradient(#ccc, #777);		
  cursor: pointer;
}

.buttonC {
//  float: clear;
  width: 25%;
	color:  darkgreen;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow:inset 0 0 10px #9CF;
	border-radius: 20px;
	font-size: 100%;
	padding: 1px;
	text-align: center;
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: 2px;
	margin-left: auto;
  background-image: linear-gradient(#ccc, #777);	
  cursor: pointer;	
}

.buttonR {
  float: right;
  width: 25%;
	color:  darkgreen;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow:inset 0 0 10px #9CF;
	border-radius: 20px;
	font-size: 100%;
	padding: 1px;
	text-align: center;
	margin-top: 2px;
	margin-right: 2%;
	margin-bottom: 2px;
	margin-left: 2%;
  background-image: linear-gradient(#ccc, #777);	
  cursor: pointer;	
}



.menubar {
//  float: clear;
  width: 96%;
	color:  darkgreen;
//	background: #009; /* Fallback IE 6-8 */
	background: transparent; //rgba(0, 0, 153, .6);
//	box-shadow: inset 0 0 10px #9CF;
//	border-radius: 20px;
	font-size: 100%;
	padding: 1px;
	text-align: center;
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: 2px;
	margin-left: auto;
//  background-image: linear-gradient(#ccc, #777);	
//  cursor: pointer;	
}


.navbutton {
/*  font-family: Arial, Helvetica, sans-serif;		  */
	color:  darkblue;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow: inset 0 0 10px #9CF;
	border-radius: 20px;

	float: right;
	width:20%;
	font-size: 100%;
	padding: 10px;
	text-align: center;
	margin-top: 1%;
	margin-right: 1%;
	margin-bottom: 1%;
	margin-left: 1%;
  background-image: linear-gradient(#003, #226); 
  cursor: pointer;
  }

.buttonMini {
	color:  darkblue;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow: inset 0 0 10px #9CF;
	border-radius: 20px;
	
	float: right;
	width:33%;
	font-size: 100%;
	padding: 10px;
	text-align: center;
	margin-top: 8px;
	margin-right: 20px;
	margin-bottom: 8px;
	margin-left: 20px;
  background-image: linear-gradient(#ccc, #777);
  cursor: pointer;
  }

.buttonG {
	color:  darkblue;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow: inset 0 0 10px #9CF;
	border-radius: 20px;
	
	float: left;
	width:33%;
	font-size: 100%;
	padding: 10px;
	text-align: center;
	margin-top: 8px;
	margin-right: 20px;
	margin-bottom: 8px;
	margin-left: 20px;
  background-image: linear-gradient(#ccc, #777);		
  cursor: pointer;
  }


.buttonNOC {
	color:  darkblue;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow:inset 0 0 10px #9CF;
	border-radius: 20px;
	
/*	float: center;*/
	width:33%;
	font-size: 100%;
	padding: 10px;
	text-align: center;
	margin-top: 8px;
	margin-right: auto;
	margin-bottom: 8px;
	margin-left: auto;
  background-image: linear-gradient(#ccc, #777);
  cursor: pointer;
  }  
  
  
.button2 {
	color:  darkblue;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow: inset 0 0 10px #9CF;
	border-radius: 20px;
	font-size: 62%;
	padding: 1px;
	text-align: justify;
	margin-top: 8px;
	margin-right: 12px;
	margin-bottom: 0px;
	margin-left: 12px;
  background-image: linear-gradient(#ccc, #777);
  cursor: pointer;	
}

.rightblock {
	color:  darkblue;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow: inset 0 0 10px #9CF;
	border-radius: 20px;
	
	float: right;
	width:40%;
	font-size: 100%;
	padding: 10px;
	text-align: left;
	margin-top: 8px;
	margin-right: 20px;
	margin-bottom: 8px;
	margin-left: 20px;
  background-image: linear-gradient(#ccc, #777);
//  cursor: pointer;
  }


.leftblock {
	color:  darkblue;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow: inset 0 0 10px #9CF;
	border-radius: 20px;
	
	float: left;
	width:40%;
	font-size: 100%;
	padding: 10px;
	text-align: left;
	margin-top: 8px;
	margin-right: 20px;
	margin-bottom: 8px;
	margin-left: 20px;
  background-image: linear-gradient(#ccc, #777);
//  cursor: pointer;
  }

.video {
	text-align: center;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	font-size: 70%;
}

.textbox {
  background: rgba(255,255,255,0.0);

	display: block;
	margin-top: 20px;
	margin-right: 5px;
	margin-bottom: 20px;
	margin-left: 5px;
	
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	border: 1px none #FFF;
	text-align: justify;
	font-size: 100%;
	text-decoration: none;	
	
	z-index: 5;
}


.hiddentext .hiddentext2 .hiddentext3 .hiddentext4 .hiddentext5 {
  background: rgba(255,255,255,0.0);
	width: 93%;
	display: block;

	margin-top: 20px;
	margin-right: 5px;
	margin-bottom: 20px;
	margin-left: 5px;
	
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	border: 1px none #FFF;
	text-align: justify;
	font-size: 100%;
	text-decoration: none;	
	
	z-index: 5;

  }

.tablebox {
	width: 93%;
	display: block;
	margin-top: 20px;
	margin-right: 4%;
	margin-bottom: 20px;
	margin-left: 4%;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	border: 1px none #FFF;
	text-align: center;
	font-size: 72%;
}

.table {
//  margin: 50px;
	padding: 20px;
	width: 100%;
}


table {
  margin-left: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
	padding: 2px;
//	width: 96%;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}



ul.navMini {
	text-align: left;
	font-weight: bold;
	font-size: 78%;	
	list-style-type: none;
	
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 15px;
	
	padding-left: 8px;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
  }

ul.nav {
	margin-bottom: 15px;
	text-align: left;
	font-weight: bold;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 8px;
	list-style-type: none;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
	font-size: 78%;
}

ul.navH {
	font-size: 78%;
	text-align: center;
	font-weight: bold;
	list-style-type: none;

	margin-bottom: 0px;		
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;

	padding-top: 0px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 0px;

}

ul ul {
	margin-left: 0px;
	font-weight: normal;
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 25px;
	font-size: 86%;
	list-style-type: none;
	padding: 0px;
}	
	
a {
  color: darkgreen;
 	text-decoration: none;
 	cursor: pointer;
}

a:hover {
  background-color: white; 
}

ul.nav a, ul.nav span, ul.nav a:visited, 
ul.navH a, ul.navH span, ul.navH a:visited {
	display: block;
	border-radius: 15px;
	box-shadow:inset 0 0 12px #CACACA;
	border: 1px solid #666;/* Fallback IE 6-8 */
	border: 1px solid rgba(0, 0, 0, .6);
	text-decoration: none;
	color: silver;
/*	#9CF; */
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	margin-top: 5px;
	margin-right: 8px;
	margin-bottom: 5px;
	margin-left: 2px;
}

ul.nav a:hover, ul.nav span,
ul.navH a:hover, ul.navH span{
	color:  #FFF;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow:inset 0 0 15px #9CF;
	padding-left: 12px;
}


 ul.nav a:active, ul.nav a:focus,
  ul.navH a:active, ul.navH a:focus {
	color:  #FF0;
	background: #009; /* Fallback IE 6-8 */
	background: rgba(0, 0, 153, .6);
	box-shadow:inset 0 0 15px #9CF;
	padding-left: 12px;	
}


.footer {
	padding: 10px;
	border-radius: 20px;
	box-shadow:inset 0 0 20px #CACACA;
	clear: both;
	background: #000000; /* Fallback IE 6-8 */
	background: rgba(0, 0, 0, .6);
        color: #FFF;
/*	border: 2px solid #666;*/
/*	width: 76%;
	float: right; */
	text-align: right;
  background-image: linear-gradient(#ccc, #777);
//  cursor: pointer;
}


.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

img.gold {
/*  align: right;*/
  float: right;
  
	background-color: rgba(0,0,0,0);
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;	

	border-radius: 20px;
	box-shadow :inset 0 0 20px #CACACA;
	clear: both;
	border: 2px solid gold;	
}


img.book {
/*  align: right;*/
  float: right;
  
	background-color: #000000;
	
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
	border-radius: 0px;
	box-shadow:inset 0 0 2px #CACACA;
	clear: both;

	border: 2px solid grey;	
}

img.bookL {
/*  align: left;*/
  float: left;
  
	background-color: #000000;
	
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	border-radius: 0px;
	box-shadow:inset 0 0 2px #CACACA;
	clear: both;

	border: 2px solid grey;	
}


img.rowL {
  align: left;
//  float: left;
  
	background-color: #000000;
	
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 2%; //16px;
	border-radius: 0px;
	box-shadow:inset 0 0 2px #CACACA;
	clear: both;

	border: 2px solid grey;	
}



table.tight {
	background-color: #FaaaFF;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0;
}


.paytable {
	width: 96%;
	text-align: center;

	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	font-size: 100%;
}

.lb .nu {
 	font-size: 100%;
	padding: 10px;
	text-align: left; 
}



img.readbook {
  
  float: center;
  display: block;
  
	background-color: #020202;
	
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	
	margin-top: 10px;
	margin-right: auto; 
	margin-bottom: 10px;
	margin-left: auto; 
	
	border-radius: 0px;
	box-shadow:inset 0 0 2px #CACACA;
	clear: both;

	border: 2px solid grey;
  cursor: pointer;	
}

img.bL {
  float: left;
  border: none;
  cursor: pointer;  
  }

img.bR {
  float: right;
  border: none;
  cursor: pointer;
  }

img.bit {
  border: none;
  cursor: pointer;  
 	margin-top: 10px;
//	margin-right: auto; 
	margin-bottom: 10px;
//	margin-left: auto; 
 	border-radius: 10px;
//	box-shadow: inset 0 0 2px #CACACA;

	border: 2px solid grey;	
  }


.textblock {
	color:  black;
//  background: linear-gradient(#ccc, #777);	
  background: lightgrey;
  
	font-family: 'Courier New', monospace;
  
	border-radius: 4px;
//	display: flex;
//	float: left;
	width: 92%;
	font-size: 80%;
	padding: 10px;
	text-align: left;
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: 2px;
	margin-left: auto;
//  cursor: pointer;
  }    

.simpleblock {
	color:  darkblue;
  background: linear-gradient(#ccc, #777);	

	border-radius: 20px;
//	display: flex;
//	float: left;
	min-width: 30%;
	font-size: 100%;
	padding: 10px;
	text-align: left;
	margin-top: 8px;
	margin-right: 20px;
	margin-bottom: 8px;
	margin-left: 20px;
//  cursor: pointer;
  }  
 

.hiddenblock {
	color:  darkblue;
  background: transparent;	
//  opacity: 0;
  
//  border: 2px;
//	border-radius: 20px;
//	display: flex;
//	float: left;
	min-width: 30%;
	font-size: 100%;
	padding: 10px;
	valign: top;
	text-align: left;
	margin-top: 8px;
	margin-right: 20px;
	margin-bottom: 8px;
	margin-left: 20px;
//  cursor: pointer;
  }  
  

.multiblock {
  margin-left: auto;
 	margin-right: auto;  	
  width: 96%;
  display: grid;
  grid-template-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr; 
    
//    flex-direction: row;
//    justify-content : space-between;
//    align-items : stretch;   
   
  }