/*
 keypunch.css  v.1.2
 (c) 2012-2015 Norbert Landsteiner,
 mass:werk - media environments, www.masswerk.at
 all rights reserved. no copying. no unauthorized publishing.
 related page location: http://www.masswerk.at/keypunch
*/

body
{
	background-color: black;
	margin: 0;
	padding: 0;
}

div#topbar
{
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 34px;
}

div#topbarContent
{
	position: relative;
	width: 940px;
	height: 36px;
	margin: 0 auto;
	padding: 0;
}

a#pagelogo
{
	position: absolute;
	left: 3px;
	top: 10px;
}

div#cardTypeControl
{
	position: absolute;
	left: 192px;
	top: 8px;
	display: inline-block;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 12px;
	line-height: normal;
	vertical-align: middle;
}
div#cardTypeControl label
{
	color: #909090;
}

div#mainPane
{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
	background-image: url(images/displaybg.gif);
	background-repeat: repeat-y;
	background-position: center top;
}

div#displayContent
{
	position: relative;
	width: 940px;
	height: 704px;
	margin: 0 auto;
	padding: 0;
}

div#displayPane
{
	position: absolute;
	width: 940px;
	height: 704px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000;
}

/* content */

h1 { display: none; }

div#aboutheading
{
	position: relative;
	margin: 64px 0 38px 0;
	padding: 0;
	width: 100%;
	border-bottom: 1px #606060 solid;
}
div#aboutheading h2
{
	position: relative;
	display: block;
	width: 936px;
	margin: 0 auto;
	padding: 0;
	font-family: georgia,serif;
	font-size: 13px;
	color: #909090;
	font-weight: bold;
}
div#content
{
	position: relative;
	display: block;
	width: 936px;
	margin: 0 auto 6em auto;
	padding: 0;
	font-family: georgia,serif;
	font-size: 13px;
	line-height: 17px;
	color: #909090;
}
div#content p
{
	margin-left: 254px;
	text-align: justify;
}
div#content p + p,
div#content ul + p
{
	margin-top: 0.5em;
}
div#content p.caption
{
	font-family: arial,helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 2px !important;
	clear: both;
	margin-left: 0;
	width: 230px;
	border-top: 1px #606060 solid;
	padding-top: 4px;
	float: left;
	text-align: left;
	text-indent: 4px;
}
div#donate + p.caption,
div#advert + p.caption
{
	margin-top: 34px !important;
}
div#content p.caption + p,
div#content p.last
{
	margin-top: 29px;
}
div#content a
{
	color: #8faba9;
	text-decoration: none;
}
div#content a:hover,
div#content a:focus
{
	color: #bbb;
	text-decoration: underline;
}
div#content a:active
{
	color: #fff;
	text-decoration: underline;
}

div#content ul
{
	margin: 0.5em 0 0.25em 254px;
	padding: 0;
}
div#content ul li
{
	margin: 0 0 0 1.25em;
	padding: 0 0 0.25em 0;
}
div#content ul li p { margin-left: 0; }

/* splash */

div#splashscreen
{
	position: absolute;
	width: 940px;
	height: 704px;
	background-color: #000;
	cursor: wait;
}
div#splashscreen.ready { cursor: pointer; }

img#splash_tile
{
	position: absolute;
	top: 0;
	left: 0;
}

a#splash_start
{
	position: absolute;
	left: 683px;
	top: 496px;
	width: 107px;
	height: 107px;
	overflow: hidden;
	background-image: url(images/splash-start.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -99999px;
	z-index: 2;
	visibility: hidden;
}
a#splash_start:hover, a#splash_start:focus
{
	background-position: 0 -107px;
}
a#splash_start:active
{
	background-position: 0 -214px;
}
div#splashscreen.ready a#splash_start
{
	visibility: visible;
}

/* dialog */

div#modalshield
{
	position: absolute;
	top: 0;
	left: 0;
	width: 940px;
	height: 705px;
	margin: 0;
	padding: 0;
	z-index: 99998;
}
div#modalshieldbg
{
	position: absolute;
	top: 0;
	left: 0;
	width: 940px;
	height: 705px;
	margin: 0;
	padding: 0;
	background-color: #000;
	opacity: 0.3;
	-webkit-opacity: 0.3;
	-moz-opacity: 0.3;
	-o-opacity: 0.3;
	-khtml-opacity: 0.3;
	-ms-opacity: 0.3;
}
div#modalshield.solid
{
	background-image: url(images/shieldbg.png);
}

div#modaldialog
{
	position: absolute;
	margin: 0;
	padding: 22px 28px 22px 28px;
	font-family: arial,helvetica,sans-serif;
	font-size: 13px;
	line-height: 17px;
	background-color: #f5f4f3;
	background-image: url(images/dialog-bg.jpg);
	border: 6px #1d4f4b solid;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-khtml-border-radius: 5px;
	-ms-border-radius: 5px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	-o-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	-khtml-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	-ms-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	z-index: 99999;
}

div#modaldialog.warning { border: 6px #bf1b26 solid; }

div#modaldialog.restrictedWidth770 { max-width: 770px; }

div#modaldialog p.title
{
	font-family: gergia,serif;
	font-weight: bold;
	font-size: 15px;
	margin: 0 0 1.5em 0;
	border-bottom: 1px #555 dotted;
}
div#modaldialog div.buttonPane
{
	margin: 1.5em 0 0 0;
	padding: 0;
	text-align: right;
}
div#modaldialog div.buttonPane button
{
	margin-left: 9px;
	width: 60px;
}

div#modaldialog ul
{
	list-style-position: outside;
	padding-left: 0px;
	margin-left: 0px;
}
div#modaldialog ul li
{
	padding-left: 0;
	margin: 0 0 0 16px;
	text-align: justify;
}
div#modaldialog ul li + li
{
	margin-top: 0.5em;
}
div#modaldialog ul li.leftAlign { text-align: left; }

div#modaldialog a { color: #238195; }
div#modaldialog a:active { color: #bf1b26; }

/* keypunch */

div#keypunch
{
	position: absolute;
	width: 940px;
	height: 705px;
	/*
	background-color: #333;
	*/
	left: 950px;
}

/* punch card */
canvas.punchcard
{
	position: absolute;
	width: 767px;
	height: 345px;
}

/* punch table */
div#punchpane
{
	position: absolute;
	width: 940px;
	height: 423px;
	top: 0px;
	background-image: url(images/brushedmetal.png);
	background-color: #aaa;
	overflow: hidden;
}
div#punchtable
{
	position: absolute;
	width: 940px;
	top: 25px;
}
div.punchtable_topbar
{
	position: absolute;
	width: 940px;
	height: 21px;
	background-image: url(images/punchtable.png);
	background-repeat: repeat-x;
	background-position: 0 -361px;
	z-index: 3;
}
div.punchtable_notch1,
div.punchtable_notch2
{
	position: absolute;
	width: 4px;
	height: 346px;
	top: 7px;
	background-image: url(images/punchtable.png);
	background-repeat: no-repeat;
}
div.punchtable_notch1 { left: 100px; }
div.punchtable_notch2 { left: 136px; }
div.punchtable_slide
{
	position: absolute;
	width: 940px;
	height: 6px;
	top: 347px;
	background-image: url(images/punchtable.png);
	background-repeat: repeat-x;
	background-position: 0 -354px;
	z-index: 3;
}
div#punchtable_cardpane
{
	position: absolute;
	width: 940px;
	max-width: 940px;
	height: 345px;
	top: 7px;
	left: 0;
	overflow: hidden;
	z-index: 2;
}
div#punchtable_punchbar
{
	position: absolute;
	width: 101px;
	height: 353px;
	top: 0;
	left: 67px;
	/* left: 444px; */
	/* left: 880px; */
	background-image: url(images/punchtable.png);
	background-repeat: no-repeat;
	background-position: -6px 0;
	z-index: 4;
}

/* punch keyboard */

div#punchkeypane
{
	position: absolute;
	width: 940px;
	height: 282px;
	top: 423px;
	background-color: #541720;
	background-image: url(images/keyboardbg.jpg);
	background-repeat: repeat-x;
}

div#punchkeyboard
{
	position: absolute;
	top: 22px;
	left: 125px;
}

div.key
{
	position: absolute;
	width: 38px;
	height: 38px;
	cursor: default;
}
div.keybg
{
	position: absolute;
	width: 45px;
	height: 58px;
	left: -4px;
	top: -12px;
	background-image: url(images/keys.png);
	background-repeat: no-repeat;
}
div.key:active div.keybg, div.key_down div.keybg { background-position: 0 -59px !important; }

div.keyface
{
	position: absolute;
	top: 0;
	left: 0;
	width: 37px;
	height: 35px;
	z-index: 2;
	background-image: url(images/keyfaces.png);
	background-repeat: no-repeat;
}
div.key:active div.keyface, div.key_down div.keyface { top: 4px; }

div.key_blank
{
	position: absolute;
	width: 187px;
	height: 35px;
	cursor: pointer;
}
div.key_blank_bg
{
	position: absolute;
	width: 195px;
	height: 58px;
	left: -4px;
	top: -12px;
	background-image: url(images/keys.png);
	background-repeat: no-repeat;
	background-position: -46px 0px;
	cursor: default;
}
div.key_blank:active div.key_blank_bg { background-position: -46px -59px; }
div.key_blank_down div.key_blank_bg { background-position: -46px -59px !important; }

/* social media */

div#socialMediaPane
{
	position: absolute;
	left: 360px;
	top: 4px;
	vertical-align: middle;
	width: 572px;
	height: 30px;
	padding: 0;
	margin: 0;
	z-index: 1000;
	overflow: hidden;
}
div#socialMediaPane div#socialMediaTrigger
{
	position: relative;
	float: right;
	margin: 9px 6px 0 0;
	padding: 0 0 2px 20px;
	color: #909090;
	font-family: 'Raleway',arial,helvetica,sans-serif;
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
	background-image: url(images/share.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
div#socialMediaPane div#socialMediaTrigger:hover,
div#socialMediaPane div#socialMediaTrigger:active { color: #a0a0a0; }
div#socialMediaInnerPane {float: right; visibility: hidden;}
div#socialMediaPane.activated { overflow: hidden; }
div#socialMediaPane.activated div#socialMediaInnerPane {visibility: visible;}
div#socialMediaPane.activated div#socialMediaTrigger {display: none;}

div#socialTwitter { float: left; margin: 2px; }
div#socialFB { float: left; margin: 2px; }
div#socialGplus { float: left; margin: 2px; }

div#advert
{
	margin-top: 20px;
	display: block;
	clear: both;
	margin-left: 254px;
	width: 468px;
	height: 64px;
	vertical-align: top;
	background-image: url(images/adbg.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

div#donate
{
	margin-top: 0.5em;
	margin-left: 254px;
	padding: 0 0 0 12px;
	display: block;
	clear: both;
	vertical-align: top;
}

/* warning */

div#compatibility_warning
{
	position: absolute;
	left: 150px;
	top: 0;
	width: 640px;
	background-color: #fff899;
	border: 1px #595735 solid;
	font-family: arial,helvetica,sans-serif;
	font-size: 13px;
	color: #111;
	line-height: 20px;
	z-index: 99999;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

div#compatibility_warning p { margin: 12px 32px 12px 32px; }

div#compatibility_warning p.alert
{
	float: left;
	font-size: 100px;
	font-weight: bold;
	line-height: 80px;
}