html {min-height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {background-color: #cccccc; background-image: linear-gradient(150deg, #9090cc, #9090cc 5%, #cccccc, #acaccc, #acaccc 20%, #cccccc, #cccccc 50%, #9090cc 90%); background-attachment: fixed; font-family: Tahoma, Verdana, Sans-serif; font-size: 16px; font-style: italic; color: #0000aa;  link: #FF0000; alink: #FF0000; vlink: #FF0000; margin:3px; margin-left:10px; padding:0px; cursor: default;}

/*--- TAG styles --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
/*--- --- --- ------ --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
audio {height: 0; width: 0;}
figure {display:inline-block; margin:5px; margin-top: 5px; padding: 0px;}
figcaption {font-size:12px; font-style: normal; padding:0px; padding-left:5px; margin:0px;}
form {font-size:12px; font-style: normal; display:inline;}
h1 {margin-top:10px; margin-bottom:10px; margin-left:-5px;}
h1 a, h1 a:visited, h1 a:active {color: #0000aa; text-decoration:none;}
h2,h3,h4 {margin-left:-3px;}
hr {margin:3px; padding:0px; width:99%;}
select {margin-left:5px; margin-right:5px;}

/*--- CLASS styles--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
/*--- --- --- ------ --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
.box {background-image: linear-gradient(150deg,#9999ee, #eeeeff, #9999ee);}
.button 	{display:inline-block; font-style:normal; background-image: linear-gradient(150deg,#9999cc, #ccccdd, #9999cc);
		 border-style: groove; border-width: 3px; margin-left:20px; margin-right:0px; padding:3px; border-radius:3px;
                }
	.button:hover {background-image: linear-gradient(150deg,#9999ee, #eeeeff, #9999ee);}
	.button:active {background-image: linear-gradient(150deg,#6060aa, #9090aa, #6060aa); background-color:#6060aa;}
.click-pic:hover {-webkit-transform: scale(1.1); transform: scale(1.1); -webkit-filter: contrast(120%); filter: contrast(120%);}
	.click-pic:active {-webkit-transform: scale(0.94); transform: scale(0.94); -webkit-filter: contrast(180%); filter: contrast(180%);}
.dictionary {vertical-align: top; padding:25px; width:225px;}
.download 	{border-radius:10px; background-color:#eedd00; background-image: linear-gradient(#eedd00, #ffee00, #aa6600);
		 box-shadow: 3px 3px 3px black; display:inline-block; border-style: none;
                font-size:20px; width: 200px; margin:25px; padding:25px; background-color:#eedd00;
                }
.flag {padding:0px; margin:0px; padding-bottom:0px;}
.flag_small {padding:2px; margin:0px;}
.flex-box	{display: -webkit-box !important;
		display: -moz-box !important;
     	display: -ms-flexbox !important;
     	display: -webkit-flex !important;
     	display: flex !important;
     	}
.green {color:#00aa00; background-color:#ccffcc; z-index:900;}
	.green a, .green a:visited {color:#00aa00;}
	.green a:hover {color:#006600;}
	.green button {margin: 3px; margin-left:25px; background-color:#cceecc;}
.hidden {display: none;}
.message {color:#cccccc; background-color:#00003a; padding: 10px; font-size: 16px; font-style: normal; position:fixed; bottom: 0px; right:0; left:0; z-index:998; box-sizing: border-box; width:100%; text-align: center;}
	.message a, a:visited {color:#cccccc;}
	.message a:hover {color:#ffffff;}
	.message button {margin: 3px; margin-left:25px; background-color:#b0b0ff;}
.play_button {visibility: visible; cursor: pointer; width: 28px; position:relative; top:5px;}
	#flags .play_button {position:relative; top:-10px;}
.question_link {width: 32px; margin-right:5px; position: relative; top:5px; left:-5px;}
.red {color:#bb0000; background-color:#ffc0c0; z-index:990;}
	.red a, red a:visited {color:#cc0000;}
	.red a:hover {color:#ff0000;}
	.red button {margin: 3px; margin-left:25px; background-color:#ccbbbb;}
.start 	{border-radius:10px; background-color:#00ee00;
		 background-image: linear-gradient(#00dd00, #00ee00, #008800); box-shadow: 3px 3px 3px black;
                display:inline-block; border-style: none; font-size:20px; width: 200px; margin:25px; padding:25px;
                }
.translation {font-size:19px; font-style: normal; color: #000066;}
.user_lang_flag {width:120px; height:75px;}
.yes_no {width: 175px;}

/*--- ID styles--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
/*--- --- --- ------ --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
#about {position:fixed; top:275px; right:20px; cursor: pointer;}
#choose_user_lang 	{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;
		 	display: -webkit-flex; display: flex; align-items: center; justify-content: center;
                    }
	#choose_user_lang div
     	{font-style: normal; border-radius:10px; padding: 25px; font-size: 16px;
     	color:#eeeeee; background-color:#000025; z-index:999; opacity: 0.92;
               background-image: linear-gradient(150deg, #000025, #000025 10%, #202045 20%, #000025 30%, #000025 80%,#202045 90%);
               }
	#choose_user_lang img {padding:5px;}
#close_button {display:block; padding:10px;}
#extra_info {display:inline-block; width: 30%; font-style:normal; font-size:13px;}
#dictionary {display:none;}
#flags {display:none;}
	#flags span {vertical-align:top;}
     #flags .play_button {position:relative; top:-20px; left: -10px; width: 30px;}
#footer {font-size:12px; font-style: normal; position:fixed; bottom: 10px; right: 1px;}
#home {position:fixed; top: 140px; right:22px; cursor: pointer;}
#language2_mobile {display:none;}
#main {display:inline-block; width: 60%; vertical-align:top;}
#menu_button {display:none; position: fixed; right:0px; top:0; bottom: 0; padding-top: 150px; opacity: 0.25; color: #3333ff; z-index:997;}
#print_headline {display: none;}
#question 	{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none;
		 align-items: center; justify-content: center;
                }
	#exit_placeholder {position:relative; top:-30px; left:-30px;}
	#question figcaption {font-size:16px;}
	#question_instruction {font-style: normal; font-size:13px; position: relative; left: 20px;}
	#question_txt_area 	{border-radius:5px; background-color:#aaaaaa;
     			 box-shadow: 5px 5px 5px black; width:70%; margin:10px; padding:20px;
                          }
#search_results {display:none;}
#settings {position:fixed; top:335px; right:17px; cursor: pointer;}
#settings_window 	{border-radius:5px; position: absolute; padding:20px;
			vertical-align:top; background-color:#aaaaaa; box-shadow: 5px 5px 5px black; display:none;
                    }
     #settings_window .button {margin:5px;}
     #settings_window b {position:relative; left:-10px;}
#side_menu {display:none; position: fixed; right:0px; top:0; bottom:0; padding:5px; z-index:900; width:120px; background-color:#000033; opacity: 0.85;}
#tip 	{border-radius:5px; background-color:#aaaabb; position:relative; left:-25px; margin:10px;
		 margin-top:25px; padding: 10px; padding-top:1px; font-size: 12px; box-shadow: 5px 5px 5px black;
                }
#zoom {position:fixed; top:210px; right:3px; cursor: pointer;}

/* --- YES/NO placeholder/instuction styles--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
/*--- --- --- ------ --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
#yes_placeholder, #no_placeholder, #dontknow_placeholder {border-radius:50px; padding:3px;}
#yes_instruction, #no_instruction, #dontknow_instruction {font-style: normal; font-size: 12px; padding-left:10px; }

/* --- YES/NO TRANSFORM styles--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
/*--- --- --- ------ --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
#yes_placeholder > img:hover, #dontknow_placeholder > img:hover, #no_placeholder > img:hover {-webkit-transform: scale(1.03); transform: scale(1.03); -webkit-filter: contrast(120%) drop-shadow(3px 3px 2px black); filter: contrast(120%) drop-shadow(3px 3px 2px black);}
#yes_placeholder > img:active, #dontknow_placeholder > img:active, #no_placeholder > img:active {-webkit-transform: scale(0.9); transform: scale(0.9); -webkit-filter: contrast(250%) brightness(85%) drop-shadow(-1px -1px 1px black); filter: contrast(250%) brightness(85%) drop-shadow(-1px -1px 1px black);}

/* --- CURSOR: POINTER styles--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
/*--- --- --- ------ --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
#babble_button, .category, .click-pic, h1 a, .img_container, #language1_menu, #language2_menu, .menu, .play_button, #search_button, #tip, .translation, .button, select, #mammo_switch {cursor: pointer;}


/* --- MEDIA SCREEN styles--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
/*--- --- --- ------ --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
@media screen and (min-width:1200px)
	{body {margin:150px; margin-top:10px;}
     }
@media screen and (max-width:1199px)
	{body {margin:100px; margin-top:8px;}
     }
@media screen and (max-width:900px)
     {
     body {margin:60px; margin-top:6px;}
     #tip {display:none;}
     #flags .play_button {position:relative; top:-25px; left: -10px; width: 35px;}
     }

@media screen and (max-width:750px)
     {
     body {margin:30px; margin-top:4px;}
     .button {border-style: groove; border-width: 3px; margin-left:10px; margin-right:0px; padding:5px; background-color:#a0a0cc; font-style: normal;}
     .button:active {background-color:#6f6faa;}
	.yes_no {width: 135px;}
     #extra_info, #footer {display:none;}
     }

@media screen and (max-width:600px)
     {
     body {margin:15px; margin-top:4px;}
     }

@media screen and (max-width:475px), (max-height:475px)
     {body {margin:5px; margin-top:1px;}
     .button {padding:10px;}
     .yes_no {width: 90px;}
	#question figure {display: -webkit-flex; display: flex; align-items: center;}
     #about {display: none; position:fixed; top:auto; bottom: 250px; right:52px; z-index: 901;}
     #footer, #language1_pre, #language2_pre, #extra_info, #zoom {display:none;}
	#flags_button {display: none; position:fixed; top:auto; bottom: 100px; right: 40px; z-index: 902;}
     #home {display:none; top:auto; bottom: 325px; right: 50px; z-index: 901;}
     #language2_mobile {display:inline-block;}
     #main {display:inline-block; width: 100%; vertical-align:top;}
	#settings {display:none; position:fixed; top:auto; bottom: 175px; right:50px; z-index: 901;}
     .user_lang_flag {width:90px; height:60px;}
     #menu_button {display: inline-block;}
     #main {width: 100%;}
     }

/* --- PRINT styles--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
/*--- --- --- ------ --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
@media print
     {body {background-image:none; color: #000000; background-color: #FFFFFF; font-size:20px; font-family: "Times New Roman", Serif; font-style: normal; link: #000000; alink: #000000; vlink: #000000;}
     form, img, .button, #extra_info, #flags, #question, #site_headline, #mammo_switch, #footer {display: none !important;}
     h1,h2,h3 {color:#000000; font-family: sans-serif;}
     h1 {font-style: italic;}
     .hidden {display: inline !important;}
     .translation {font-size:20px; font-style: italic; color: #a0a0a0;}
	.play_button, hr {visibility: hidden;}
     #main {width:75% !important;}
     #print_headline {display: inline; color:#000000;}
     }