@font-face {
    font-family: "venice";
    src: url("../../../VeniceClassic.ttf") format("truetype");
}

@font-face {
    font-family: "cthu";
    src: url("../../../JMH Cthulhumbus Arcade.otf");
}

@font-face {
    font-family: "Arpegius";
    src: url("../../../Arpegius.ttf") format("truetype");
}

@font-face {
    font-family: "ADDSBP";
    src: url("../../../ADDSBP__.TTF") format("truetype");
}

@font-face {
    font-family: "chicago";
    src: url("../../../Chicago-12.ttf") format('truetype');
}

@font-face {
    font-family: "virtue";
    src: url("../../../virtue.ttf") format('truetype');
}

@font-face {
    font-family: "cour";
    src: url("../../../Courier-12.ttf") format('truetype');
}

@font-face {
    font-family: "ny";
    src: url("../../../NewYork-24.otf") format('opentype');
}

@font-face {
    font-family: "pa";
    src: url("../../../Palatino-24.otf") format('opentype');
}

@font-face {
    font-family: "ge";
    src: url("../../../FindersKeepers.ttf") format('truetype');
}

@font-face {
    font-family: "lcd";
    src: url("./DS-DIGII.TTF") format('truetype');
}

p {
    font-family: "ge";
}



.main {
    /*background-image: url("../../../images/128.png");*/
    background-color: black;
}

.window {
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1086px;
    height: 664px;

    /* Need a specific value to work */
}

.card {
    background-color: white;
    background-image: url("./assets/cards/Left Spiral.png");
    width: 1086px;
    height: 664px;
    border-style: solid;
    border-color: black;
}

.windowtitle {
    text-align: center;
    background-color: blue;
    height: 19px;
    width: 1086px;
    margin: auto;
    border: 1px outset black;
    background: url(/images/exitButton.gif), url(/images/windowborderright.gif),
        url(/images/windowbordercenter.gif),url(/images/windowbordercenter.gif) #fff;
    background-position: 0 bottom, 99.95% bottom, 25% bottom,75% bottom;;
    background-repeat: no-repeat;
    bottom: 0;
    border-bottom: none;
}

.windowtitlename {
    display: inline;
    vertical-align: center;
    height: 19px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #cccccc;
    font-size: 11px;
    color: black;
    font-family: 'chicago';
}

.smallWindow {
    position: absolute;
    margin-left: 0;
    margin-right: 0;
    width: 145px;
    height: 60px;
    background: white;
    border: black;
    border: solid 2px;
}

.smallWindowTitle {
    z-index: 100;
    height: 14px;
    width: 145px;
    margin: 0;
    background: url("/images/smallWindowBorderRight.png"),
        url("/images/smallWindowBorderLeft.png"),
        url("/images/smallWindowCenter.png"), #fff;
    background-position: right, left, center;
    background-repeat: no-repeat;
    bottom: 0;
}

h1.ny {
    font-family: "ny";
    position: relative;
}

h2.ny {
    font-family: "ny";
    font-size: 16px;
    padding: 0;
    margin: 0;
}


u{
    font-family: "ny";
    font-size: 16px;
    padding: 0;
    margin: 0;    
}

p.pa {
    font-family: "pa";
    font-size: 16px;
    padding: 0;
    margin: 0;
}

li.pa {
    font-family: "pa";
    font-size: 16px;
    padding: 0;
    margin: 0;
}

h3.ny {
    font-family: "ny";
    font-size: 12px;
    padding: 0;
    margin: 0;
}

h1.pa {
    font-family: "pa";
    font-style: normal;
    font-size: 24px;
}

ul>li{
    font-family: "pa";
    font-style: normal;
    font-size: 16px;
    margin-left:78px;
    margin-right:100px;
}

button {
    width: 95px;
    height: 22px;
    border: none;
    font-family: 'chicago';
    font-size: 10px;
    background-color: transparent;
    background-image: url("./assets/buttons/ROUND\ BUTTON\ SHADOW.png");
}

button:active {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

button.rightArrow {
    background-image: url("./assets/arrows/158.png");
    width: 25px;
    height: 25px;
    position: relative;
    border: none;
}

button.rightArrow:active {
    background-image: url("./assets/arrows/158.png");
    width: 25px;
    height: 25px;
    position: relative;
    border: none;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

button.leftArrow {
    background-image: url("./assets/arrows/159.png");
    width: 25px;
    height: 25px;
    position: relative;
    border: none;
}

button.leftArrow:active {
    background-image: url("./assets/arrows/159.png");
    width: 25px;
    height: 25px;
    position: relative;
    border: none;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

button.home {
    background-image: url("./assets/icons/60.png");
    width: 28px;
    height: 25px;
    position: relative;
    border: none;
}

button.home:active {
    background-image: url("./assets/icons/60.png");
    width: 28px;
    height: 25px;
    position: relative;
    border: none;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

body {
    overflow-y: clip;
    overflow-x: clip;
    border: none;
}

.lined {
    border-bottom: .5px dashed black;
    line-height: 20px;
}

.lockLeft{
    position:absolute;
    top:0;
    left:0;
}

.lockMid{
    position:absolute;
    top:0;
    left:0;
}

.lockRight{
    position:absolute;
    top:0;
    left:0;
}

.placeholder{
    position:absolute;
    width: 543px;
    height: 332px;
    z-index:100;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

area {
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.im{
    position:absolute;
    width: 1086px;
    height: 664px;
}

table{
    table-layout: fixed;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    border-style: none;
    display:block
}

td,tr{
    padding:0;
    margin:0;
    border-style: none;
}

.house img{
    display: block;
}

.radio {
    position:absolute;
    z-index:999;
}

.safe {
    position:absolute;
    z-index:1002;
}

#knob {
    position:absolute;
    z-index:1000;
}

#infoPane {
    position:absolute;
    z-index:10004;
    background-color: white;
    border: 1px outset black;
    background: url("./Leather\ 16.png");

    padding:12px;
    max-width:250px;
    max-height:300px;
    
}

#infoPane > h1 {
    font-family:pa;
    font-size:36px;
    border-style: double;
    padding: 6px 12px 0px 12px;
    border-bottom:none;
    margin-bottom:0;
    margin-top:12px;
    background-color: white;

}

#infoPane > p {
    font-family:chicago;
    font-size:14px;
    border-style: double;
    padding: 6px 12px 0px 12px;
    margin:0;
      -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  image-rendering: pixelated; /* mostly for <canvas> or images, but harmless */
overflow-y:scroll;
max-height:200px;
background-color: white;
}

#innerPanel {
    z-index:10003;
    background:url("./Leather\ 16.png");
    padding:16px;
    padding-top:none;
}

#infoPaneR {
    position:absolute;
    z-index:10004;
    background-color: white;
    border: 1px outset black;
    background: url(/images/exitButton.gif), url(/images/windowborderright.gif),
        url(/images/windowbordercenter.gif),url(/images/windowbordercenter.gif);
    background-position: 0 top, 99.95% top, 25% top,75% top;
    background-repeat: no-repeat;
    padding:0px;
    max-width:250px;
    max-height:300px;
    
}

#innerPanel > h1 {
    font-family:ny;
    font-size:24px;
    border-style: double;
    padding: 6px 12px 0px 12px;
    border-bottom:none;
    margin-bottom:0;
    margin-top:12px;
    background-color: white;

}

#innerPanel > h2 {
    font-family:ny;
    font-size:12px;
    background-color: white;
}

#innerPanel > p {
    font-family:chicago;
    font-size:12px;
    border-style: double;
    padding: 6px 12px 0px 12px;
    margin:0;
      -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  image-rendering: pixelated; /* mostly for <canvas> or images, but harmless */
overflow-y:scroll;
max-height:100px;
background-color: white;
}

::-webkit-scrollbar {
  background-color:black;
}
/* Track */
::-webkit-scrollbar-track:vertical {
  background-image: url(../../../images/scrollTrack.gif);
}

::-webkit-scrollbar-track:horizontal {
  background-image: url(../../../images/scrollTrack_h.gif);
}

::-webkit-scrollbar-corner{
  background: url(../../../images/scrollTrackCorner.gif);
}

/* Handle */
::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
  border-image: url(../../../images/scrollThumb.gif) 4 fill stretch;
}

::-webkit-scrollbar-button {
  background-color: #cccccc;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
}

::-webkit-scrollbar-button:vertical:decrement {
		background-image: url("../../../images/scrollUp.gif");
	}

::-webkit-scrollbar-button:vertical:increment {
		background-image: url("../../../images/scrollDown.gif");
	}