@charset 'utf-8';
@import url(reset.css);
@import url(lightbox.css);

/* ----------------------------------------------------- Page layout */

body {
background: #f5f5f5 url(../image/37original.gif);
text-align:center;
font: 62.5% Verdana, Arial, sans-serif;
}

p#footer {
position:absolute;
bottom:1em;
right:1em;
font-size: 1.1em;
color:#ddd;
background: #069;
padding: .2em;
}

#box {
margin: 5em auto;
border: 1px solid #ddd;
background-color: #fff;
padding: 4em;
width: 30em;
}

h1 {
font-size:1.6em;
margin: 0 0 1.25em 0;
font-weight:bold;
}

h2 {
font-size:2.2em;
font-weight:bold;
margin: 0 0 .5em 0;
font-family: Helvetica Neue, Arial, sans-serif;
letter-spacing: -1px;
}

h3 {
font-size:2.6em;
font-weight:bold;
margin: 1em 0 .5em 0;
font-family: Helvetica Neue, Arial, sans-serif;
letter-spacing: -1px;
color: #aaa;
}

p {
font-size: 1.3em;
margin: 1em 0 0 0;
}

p.start {
font-size: 1.1em;
margin: 2em 0 0 0;
}

p.small {
font-size: 1.0em;
margin: 3em 0 0 0;
color: #999;
}

#footer a:link, #footer a:hover, #footer a:visited, #footer a:active { text-decoration: none; color: #ddd }

em {
color: #666;
letter-spacing: 1px;
}

.languages a {
text-decoration: none;
color: #222;
}

.languages a:hover {
color:#000;
background-color: #ffb;
}

h2 img {
vertical-align: middle;
padding-right:.5em;
}
img.button {
cursor:pointer;
}
img.button:active{
margin-top:1px;
margin-bottom:-1px;
}

/* Application */

div.dialog {
	display:none;
	width:50%;
	position:absolute;
	top:25%;
	left:25%;
	padding: 2.5em 2em 2em 3em;
	color: #222;
	border: 4px solid #ddd;
	background: #fff;
}
#jon_start{
	top:20%;
}
#jon_language{
	width: 30%;
	left:35%;
	top:30%;
	border: 4px solid #dde;
}