/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { 
    margin: 0; 
    padding: 0; 
}

@font-face {
	font-family: "OpenDinSchriftenEngshriftMedium";
	src: url('OpenDinSchriftenEngshrift.eot');
	src: local('OpenDinSchriftenEngshrift Medium'), 
	local('OpenDinSchriftenEngshrift'), url('OpenDinSchriftenEngshrift.ttf') format('truetype');
}


@font-face { 
	font-family: "Junction02"; 
	src: url('Junction02.eot');
	src: local('Junction02'), 
	local('Junction02'), url('http://www.joywebsight.com/elements/Junction02.ttf') format('truetype');
} 

@font-face {
	font-family: "DejaVuSansMono"; 
	src: url('DejaVuSansMono-Bold.eot');
	src: local('DejaVuSansMono'), 
	local('DejaVuSansMono'), url('http://www.joywebsight.com/elements/DejaVuSansMono-Bold.ttf') format('truetype');
}

	

html, body, #bg, #bg table, #bg td, #cont {
    height:100%;
    width:100%;
    overflow:hidden;
}

p{
padding: 5px;
}




#bg div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
}

#bg td {
    text-align:center;
    vertical-align:middle;
}

#bg img {
    margin:0 auto;
    min-height:50%;
    min-width:50%;
}

#cont {
    position:absolute;
    top:0;left:0;
    z-index:70;
    overflow:auto;
}



.bubble { 
    width: 300px;
    position: relative;
    padding: 20px;
    margin-left: 470px;
    margin-top: 60px;
	
}

#focus-stealer      { position: absolute; left: -9999px; }



h1 {
	text-shadow: 1px 1px 3px #999999;
	line-height:60px;
	margin:6px;
	text-align:left;
	font-family: "OpenDinSchriftenEngshriftMedium";
	font-variant:normal;
	font-style:normal;
	font-weight:bold;
	font-size:120px;
	letter-spacing:2px;
	padding-top:12px;
	padding-left:12px;
	padding-bottom:12px;
	color: #fff;
}


h2 {
	font-variant: normal;
	font-family: "DejaVuSansMono";
	font-weight:bolder;
	line-height:2em;
	font-size:30px;
	letter-spacing:5px;
	padding-left:3px;
}

/* --- links --- */
a img {
	border:none;
	border-bottom:0;
}

a.hey:link {
	margin-top: 200px;
	line-height: 50px;
	font-size: 30px;
	padding: 10px;
	font-family: "DejaVuSansMono";
	color:white;
	text-decoration:none;
	font-weight:bold;
    border: 0px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

a.hey:visited {
	font-family: "DejaVuSansMono";
	background-color:transparent;
	text-decoration:none;
	color: white;
	padding: 10px;
	border: 0px solid white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

a.hey:active {
	color:#0d1627;
}

a.hey:hover {
	color: #black;
	background: rgba(255, 255, 255, 0.70);
	text-decoration:none;
}


div#containers
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
} 

/* the nav stuff */
#sddm {
	margin:0;
	padding:0;
	z-index:300;
}

#sddm li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	font:bold 14px helvetica;
}

#sddm li a {
	display:block;
	margin:0 1px 0 0;
	padding:4px 10px;
	width:99px;
	background:white;
	color:#000000;
	text-align:left;
	text-decoration:none;
}

#sddm li a:hover {
	color:#b3b3b3;
}

#sddm div {
	position:absolute;
	visibility:hidden;
	margin:0;
	padding:0;
	background:#ccc;
	border:0 solid #999;
}

#sddm div a {
	position:relative;
	display:block;
	margin:0;
	padding:5px 10px;
	width:auto;
	white-space:nowrap;
	text-align:left;
	text-decoration:none;
	background:#ffffff;
	color:#000;
	font:11px arial;
}

#sddm div a:hover {
	background:black;
	color:#FFF;
}