/* General Styling */

body, html {
  margin:0;
  padding:0;
  background: #fafaff;  /* Antic: #EBF5FB; #D5DBDB; #f2f2f2; */
  font-family: 'Lato', serif;
}

img {   
  border:0;
  /*max-width: 100%;*/  /* Strecht images so they don't go out of the screen */ 
}  

a {   
	color:#002090;
	text-decoration: none;   
}

a:hover {   
	color:blue;
} 

pre {
  padding:16px 18px 18px 12px; 
  color:lightgreen; 
  background-color:black; 
  font-size: 90%;
  overflow-x: auto;
}

code {
  padding:16px 18px 16px 12px; 
  font-size: 90%;
  overflow-x: auto;
}

.monospace {
  font-family: 'Courier New', monospace;
}

.rounded-box {
  background-color: #f2f2f2;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 0px 10px #888;
}

.rounded-box pre {
  width:95%; 
  font-size: 85%;
  color:black; 
  background-color:lightgray; 
}


.event {
  color: #484848;
  background: white;
  width: 20em;
  padding: 0.1em 1em;
  margin: 0 1em;
}

.indented ul {
  list-style-type: square;
  list-style-position: outside;
	list-style-image: url('img/icon_check_blue.png'); 
}

.indented li {
}

.under {
	text-decoration: underline;
}

.red {
	color:#990000;
}

@media all {
body, html {
	font-size: 10pt;
}
}
@media screen and (min-width:550px) {
body, html {
	font-size: 12pt;
}
}

@media screen and (min-width:1024px) {
body, html {
	font-size: 13pt;
}
}




/* ============================================================================================ */
/* Header Styling */

#header {
	color: white;
	background:#303060;
	padding: 14px;
}
#header .version {
	margin-left: 8px;
	color: lightgrey;
}	
#header .date {
	margin: 12px;
	color: lightgrey;
}	

#header a {   
	color:white;
}  

#header .flag {   
	float:right;
  vertical-align: bottom;
}  

#header img {   
  vertical-align: bottom;
}

#header .selected {   
	/* border:#6699ff 1pt solid; */
  border-bottom:#6699ff 1pt solid;
}  


@media all {
#header {
	font-size:13pt;
	padding: 12px 8px;
}
#header .version {
	font-size: 10pt;
  display: none;
}	
#header .date {
	font-size: 10pt;
  display: none;
}	
#header .logo {   
	padding-left:0px;
}  
#header img.logo {   
	height:20px;
}  
#header .flag {   
  padding:0px 5px;
}  
#header .flag img {   
	height:18px;
}  
}

@media screen and (min-width:550px) {
#header {
	font-size:18pt;
	padding: 14px 10px;
}
#header .version {
	font-size: 12pt;
  display: none;
}	
#header .date {
	font-size: 11pt;
  display: none;
}	
#header .logo {   
	padding-left:8px;
}
#header img.logo {   
	height:32px;
}  
#header .flag {   
  padding:0px 8px;
}  
#header .flag img {   
	height:24px;
}  
}

@media screen and (min-width:1024px) {
#header {
	font-size:24pt;
	padding: 14px;
}
#header .version {
	font-size: 13pt;
  display: inline;
}	
#header .date {
	font-size: 11pt;
  display: inline;
}	
#header .logo {   
	padding-left:12px;
}  
#header img.logo {   
	height:42px;
}  
#header .flag {   
  padding:0px 10px;
}  
#header .flag img {   
	height:28px;
}  
}




/* ============================================================================================ */
/* Navigation Bar Styling */

#nav {
  width: 100%;
  float: left;
  margin: 0 0 1em 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc; 
  border-top: 1px solid #ccc; 
}
#nav li {
  float: left; 
}
#nav li a {
  display: block;
  text-decoration: none;
  //font-weight: bold;
  //color: #069;
	color:#002090;
  border-right: 1px solid #ccc; 
}
#nav li form {   /* PayPal form! */
  display: block;
  text-decoration: none;
  //font-weight: bold;
  //color: #069;
	color:#002090;
  border-right: 1px solid #ccc; 
}
#nav li a:hover {
  background-color: #fff; 
}
#nav li.selected {
	font-weight:bold;
}

@media all {
#nav {
	font-size: 9pt;
}
#nav li a {
  padding: 10px 7px 10px 7px;
}
#nav li form {   /* PayPal form! */
  padding: 10px 7px 8px 7px;
}
}

@media screen and (min-width:550px) {
#nav {
	font-size: 10pt;
}
#nav li a {
  padding: 10px 9px 10px 9px;
}
#nav li form {   /* PayPal form! */
  padding: 10px 9px 8px 9px;
}
}

@media screen and (min-width:1024px) {
#nav {
	font-size: 11pt;
}
#nav li a {
  padding: 10px 15px 10px 15px;
}
#nav li form {   /* PayPal form! */
  padding: 10px 15px 8px 15px;
}
}

@media screen and (min-width:1200px) {
#nav {
	font-size: 14pt;
}
#nav li a {
  padding: 10px 17px 10px 17px;
}
#nav li form {   /* PayPal form! */
  padding: 10px 17px 8px 17px;
}
}

/* End navigation bar styling. */





/* ============================================================================================ */
/* TitleBox Styling */

#titlebox {
	margin: 0 0 20px 0;
}
#titlebox form {   /* PayPal form! */
  display: block;
  text-decoration: none;
  //font-weight: bold;
  //color: #069;
	color:#002090;
  //border-right: 1px solid #ccc; 
}
#titlebox img {
  height:23px;
}
#titlebox img.amazon {
	margin-right:8px;
}

#titlebox .title {
	color:#002090;
	font-weight:bold;
	//margin-bottom: 30px;
}
#titlebox .donate {   
	float:right;
  vertical-align: bottom;
}  


@media all {
#titlebox .title  {
	font-size: 11pt;
}
#titlebox .donate {   
  display: none;
}  
}

@media screen and (min-width:550px) {
#titlebox .title {
	font-size: 14pt;
}
#titlebox .donate {   
  display: none;
}  
}

@media screen and (min-width:1024px) {
#titlebox .title {
	font-size: 15pt;
}
#titlebox .donate {   
  display: inline;
}  
}




/* ============================================================================================ */
/* Footer Styling */

@media all {
#footer {
	font-size: 8pt;
  color: gray; 
}
}
@media screen and (min-width:550px) {
#footer {
	font-size: 9pt;
}
}
@media screen and (min-width:1024px) {
#footer {
	font-size: 11pt;
}
}

#footer {
	clear:both;
	margin-top: 32px;
}
	



/* ============================================================================================ */
/* Other Stylings */

#wrap {
	width:100%;
	padding-bottom: 32px; 
	margin:0 auto;
}

#main {
	margin:2% 5%; 
}

#main ul {
	padding:0px 32px;
}
#main li {
	list-style-type:square;
	padding:0px 0px;
}
	
.question {
	color:#303060;
	font-weight:bold;
	font-size: large;
  padding: 8px;
	background:#e2e2e2; /*#f2f2f2;*/ /*#dddddd;*/
	margin-bottom: 10px;
}

.answer, .explanation {
	padding: 8px 0px 8px 8px;
	margin-bottom: 50px;
}

.answer img {
  max-width: 700px;  /* Prevent images from getting too big */
}

.explanation img {
  max-width: 650px;  /* Prevent images from getting too big */
}

#screenshots img {
  padding:5px 60px 36px 0px;
  max-width: 100%;  /* Strecht images so they don't go out of the screen */

}

.amazon {
  height:23px;
}

.changestext {  
	font-size: 12pt;   /* In Changes_en.htm! */
}

/* In languages_xx.htm! */
table{width:99%}
table .col0{width:25%;}
table .col1{width:25%;}
table .row0{background:#dddddd}
table .row1{background:#ffffff}
th {background:silver;}
td,th{border:0; padding:4px; text-align:left;}


.slide {
  height: 210px;  /* Height of the tallest image! */
}
.slide img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
}

/* ============================================================================================ */


/* ------------------------------------------------------------------------- 
When you have two inline-block elements near each other, you can align
each to other's side with vertical-align.
So, adding one inline-block with height 100% (helper) in a block with fixed height (gallery)
would align another inline-block element in it (<img/>) vertically near it.
 --------------------------------------------------------------------------- */
#gallery            {height:223px; margin:0 0 2em 0;}
#gallery .helper    {display:inline-block; height: 100%;     vertical-align:middle;}
#gallery img.active {display:inline-block; max-height:223px; vertical-align:middle;}
#gallery img        {display:none;}