* {
  font-family:     sans-serif;    /* Otherwise <i> is not supported (and not displayed) */
}

/* Fix for IE/Edge */
img  { border: none; }
map  { border: none; }
area { border: none; }

.MOBILE body {
  margin:          0;
  font-size:       200%;
}

h1 {
  text-align:      center;
  color:           #0050C0;
  margin-top:      0.5em;
}

h2,h3 {
  color:           #0050C0;
}

.intro-image {
  width:           100%;
}


#header {
  position:        relative;
}

#header div:first-child {
  padding:         0.1em 0;
  margin-bottom:   0;
  background:      #D0E0F0;
}

#header img {
  vertical-align:  middle;
}

#header span {
  font-size:       120%;
  vertical-align:  middle;
  color:           #0050C0;
}

#header a {
  text-decoration: none;
}

#main {
  line-height:     120%;
  margin:          1em;
  background:      white;
}

.special-note {
  margin:          1em;
  padding:         0.4em 1em;
  font-size:       150%;
  text-align:      center;
  color:           red;
  border:          0.15em solid red;
  border-radius:   0.5em;
}

#header .lang-switch {
  float:           left;
  font-size:       90%;
}

.LTR #header .lang-switch {
  float:           right;
}

#header .lang-switch a {
  display:         inline-block;
  margin:          0.5em;
  padding:         0.3em;
  font-weight:     bold;
  background:      #D8E8F8;
  border-radius:   0.4em;
}

#header .lang-switch a:hover {
  background:      #DFEFFF;
}


ul li {
  margin-bottom:   0.5em;
}

#footer {
  text-align:      center;
}


/* Menu */

.menu {
  width:           100%;
  height:          auto;
  margin-top:      0.2em;
  font-size:       130%;
}

.menu td {
  width:           20%;
  height:          2em;
  text-align:      center;
}

.menu td a {
  display:         block;    /* So that <a> fills the entire <td> (in conjunction with width, height) */
  width:           100%;
  height:          100%;
  padding:         0.5em 0;
  text-decoration: none;     /* Remove link's underline */
  text-shadow:     1px 1px 1px rgba(0,0,0,0.6);
  color:           #E0E0E0;
  background:      #006CC8;
  transition:      background .2s ease-in-out;
}

.menu a:hover {
  color:           white;
  background:      #09F;
}

#menu-selected a {
  position:        relative;
  top:             16%;
  height:          120%;
  color:           #006CC8;
  background:      white;
  border-top:      0.1em solid #006CC8;
  border-left:     0.1em solid #006CC8;
  border-right:    0.1em solid #006CC8;
}


/* Action button */

.action-button {
  display:         inline-block;
  padding:         0.3em 0.6em;
  text-align:      center;
  color:           white;
  background:      #4080FF;
  border:          #204080;
  border-radius:   15px;
  cursor:          pointer;
}

.action-button:hover {
  background:      #60A0FF;
}

.action-button:active {
  background:      #004080;
}




@media screen and (max-width: 600px)
{
  #header .lang-switch {
    display:         block;
    float:           none;
  }
}


/*mobile support - common
@media screen and (max-width: 600px)
{
	BODY
	{
		margin: 0;
	}
	#header > DIV
	{
		padding: 10px !important;
	}
	.lang-switch
	{
		margin-top: -5px;
	}
	HTML[lang=he] #header DIV A SPAN
	{
		font-size: 26px !important;
	}
	HTML[lang=ru] #header DIV A SPAN
	{
		font-size: 19px !important;
	}
	.lang-switch A
	{
		font-size: 0;
		display: block !important;
	}
	.lang-switch A:first-of-type
	{
		margin-bottom: 5px !important;
	}
	.lang-switch A IMG
	{
		width: 30px;
		height: auto;
		vertical-align: middle;
	}
	#menu-selected
	{
		padding-top: 6px;
	}
	HTML[lang=he] #menu-selected
	{
		border-right: 4px solid #FFFFFF !important;
	}
	HTML[lang=ru] #menu-selected
	{
		border-left: 4px solid #FFFFFF !important;
	}
	#main
	{
		margin: 5px;
	}
}
*/