@import url(../../../css/csslayer.css);
@import url('https://fonts.googleapis.com/css?family=Oswald:500,600,700');
.whiteblock {
border-radius: 6px;
margin-bottom:6px;
margin-top:6px;
}
.whiteblock h3,
.whiteblock h4,
.whiteblock h5 {
font-family:Oswald, Roboto, Arial, sans-serif;
font-weight: 600;
color:#222;
margin-top:0;
text-transform: uppercase;
text-shadow: 0 1px #fff;
}
.whiteblock h4 {
font-size: .85rem;
}
.whiteblock h5 {
font-size: .75rem;
margin:0;
}
.myicon20 {
display: inline-block;
background-image: url("img/common/icons20.png");
width: 20px;
height: 20px;
position: relative;
top: 4px;
}
.myicon20_help {
background-position:0 0;
}
.player-board .boarditems {
margin-top: 3px;
}
.player-board .boarditem {
display: inline-block;
height:40px;
margin:0 5px 5px 0;
vertical-align: middle;
}
.player-board .boarditem:last-child {
margin-right:0;
}
.player-board .boarditem > div {
vertical-align: middle;
}
.player-board .sp_marker {
background-image: url("img/startplayer.png");
background-size: cover;
height:36px;
width:13px;
visibility:hidden;
margin:3px;
}
.player-board .sp_marker.visible {
visibility: visible;
}
.player-board .investigator {
display: inline-block;
vertical-align: middle;
margin-right: .5em;
}
.player-board .cube_supply {
position: relative;
margin-top:5px;
margin-right:8px;
}
.player-board .cube_supply > .cube20 {
position: relative;
float:left;
margin:0 -8px -14px 0;
}
.player-board .disc_supply {
position: relative;
margin-top:5px;
margin-right:15px;
}
.player-board .disc_supply > .disc30 {
position: relative;
float:left;
margin:0 -15px 0 0;
}
#carddisplay {
width:960px;
margin:0 auto;
}
#boardwrap {
margin:0 auto;
box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.66);
border: solid 2px #333;
border-radius: 3px;
height:720px;
width:960px;
overflow: hidden;
}
#board {
position: relative;
top:-10px;
left:-10px;
background-image: url(img/board_big.jpg);
height: 740px;
width: 980px;
background-size: 1000px;
background-position: -10px -12px;
}
#belowboard {
margin:0 auto;
max-width:960px;
}
#minigamecounter {
position: absolute;
top: 220px;
background: rgba(255, 233, 182, 0.55);
box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.4);
left: 18px;
width: 90px;
text-align: center;
padding:.33em;
}
.disc {
z-index:200;
position: absolute;
height:25px;
width:25px;
background-color: #000;
border: solid 2px rgba(0, 0, 0, 0.5);
border-width: 0 1px 1px 0;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.disc.blue { background-color:hsl(230, 100%, 55%); }
.disc.green { background-color:#0c0; }
.disc.purple { background-color:#e0e; }
.disc.red { background-color:#f30; }
.disc.yellow { background-color:#fe0; }
.loccont {
position: absolute;
height:114px;
width:205px;
}
.loccont .agentarea {
position: absolute;
top:0; left:0;
height:46px;
width:100%;
border-radius: 5px;
z-index:50;
text-align: center;
}
.loccont .agentarea.active_slot {
box-shadow: 0 0 2px 2px rgb(255, 255, 255) !important;
border:solid 2px red;
border-width:2px !important;
cursor: pointer !important;
}
.locslot {
position: absolute;
height:64px;
width:64px;
bottom:0;
}
.locslot.location_slot { left:34%; }
.locslot.crime_slot { right:0; }
.locslot .stockitem {
background-size: 448px;
border-radius: 5px;
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.75);
border: solid 0px #00000066;
}
.locslot .stockitem.fake_tile {
box-shadow:none;
background:none;
}
.locslot .highlight {
box-shadow: 0 0 4px 6px rgb(255, 255, 255) !important;
}
.locslot .active_slot:not(.no_x_tile) {
border-width:1px !important;
box-shadow: 0 0 4px 6px rgb(255, 255, 255) !important;
cursor: pointer !important;
}
.locslot .active_slot.stockitem_selected {
border-width:1px !important;
box-shadow: 0 0 4px 6px rgb(0, 0, 255) !important;
}
.cube {
z-index:300;
position: absolute;
height:15px;
width:15px;
background-color: #000;
border: solid 1px rgba(0, 0, 0, 0.5);
border-width: 0 1px 1px 0;
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.cube.blue { background-color:hsl(230, 100%, 55%); }
.cube.green { background-color:#0c0; }
.cube.purple { background-color:#e0e; }
.cube.red { background-color:#ff3300; }
.cube.yellow { background-color:#fe0; }
.card,
#evidence .stockitem,
#evidence_discard .stockitem,
#playerdisplays .stockitem,
#myevidence .stockitem,
#myhand .stockitem {
background-size: 810px;
box-shadow:2px 2px 3px 0px rgba(0, 0, 0, 0.66);
border-radius: 8px;
}
#myhand-wrap {
position: relative;
float:left;
height:166px;
width: 282px;
margin-right:.5em;
}
#myevidence-wrap {
position: relative;
float:left;
height:166px;
width:630px;
}
#casecards_help,
#myevidence_help {
position: absolute;
top:5px;
right:5px;
opacity: .5;
}
.spectatorMode #myhand-wrap,
.spectatorMode #myevidence-wrap {
display: none;
}
#playerdisplays > .whiteblock {
display:inline-block;
min-height:166px;
width:455px;
margin-right: 6px;
}
#playerdisplays > .whiteblock:nth-of-type(2n) {
margin-right: 0;
}
.locslot .cube20,
.locslot .disc30 {
z-index:100;
position: absolute;
}
.locslot .locslot_cubes {
position: absolute;
bottom:-2px;
left:-2px;
height:50px;
width:50px;
}
.locslot .cube20:nth-of-type(1) { bottom:13px; left:17px; z-index:201; }
.locslot .cube20:nth-of-type(2) { bottom:13px; left: 0px; z-index:201; }
.locslot .cube20:nth-of-type(3) { bottom:26px; left:17px; z-index:203; }
.locslot .cube20:nth-of-type(4) { bottom:26px; left:0px; z-index:203; }
.locslot .cube20:nth-of-type(5) { bottom:0; left:17px; z-index:200; }
.locslot .cube20:nth-of-type(6) { bottom:0; left: 0px; z-index:200; }
.locslot .disc30 {
top:18px;
left:33px;
}
.investigator {
z-index:100;
position: relative;
height:36px;
width:36px;
margin:3px;
background-image: url("img/investigators.png");
background-size:182px;
border-radius: 4px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
}
.investigator_red { background-position: 0px 0px }
.investigator_blue { background-position: -36px 0px }
.investigator_yellow { background-position: -72px 0px }
.investigator_green { background-position: -108px 0px }
.investigator_purple { background-position: -144px 0px }
.agentarea .investigator {
display: inline-block;
margin-right:3px;
}
.agentarea .investigator:last-of-type {
margin-right:0;
}
.investigator .cube20,
.investigator .disc30 {
position: absolute;
}
.investigator .cube20 {
top:-2px;
}
.investigator .disc30 {
bottom:-4px;
}
.investigator > div:nth-of-type(1) { left:-3px; z-index:200; }
.investigator > div:nth-of-type(2) { left:8px;z-index:201; }
.investigator > div:nth-of-type(3) { left:19px; z-index:202; }
.cube20 {
height: 20px;
width: 20px;
background-image: url("img/common/cubes20_hc.png");
}
.cube20_blue { background-position: -20px 0px }
.cube20_red { background-position: -40px 0px }
.cube20_yellow { background-position: -60px 0px }
.cube20_green { background-position: -80px 0px }
.cube20_white { background-position: -100px 0px }
.cube20_black { background-position: -120px 0px }
.cube20_brown { background-position: -140px 0px }
.cube20_purple { background-position: -160px 0px }
.cube20_pink { background-position: -180px 0px }
.cube20_orange { background-position: -200px 0px }
.disc30 {
height: 25px;
width: 25px;
background-image: url("img/common/discs30_hc.png");
background-size: cover;
}
.disc30_blue { background-position: 0px 0px }
.disc30_green { background-position: -25px 0px }
.disc30_beige { background-position: -50px 0px }
.disc30_orange { background-position: -75px 0px }
.disc30_white { background-position: -100px 0px }
.disc30_black { background-position: -125px 0px }
.disc30_red { background-position: -150px 0px }
.disc30_yellow { background-position: -175px 0px }
.disc30_gray { background-position: -200px 0px }
.disc30_purple { background-position: -225px 0px }
#loccont_1 div:not(.token) > .token {
transform:rotate(-0deg);
}
#loccont_2 div:not(.token) > .token {
transform:rotate(-2.5deg);
}
#loccont_3 div:not(.token) > .token {
transform:rotate(-2.0deg);
}
#loccont_4 div:not(.token) > .token {
transform:rotate(-0deg);
}
#loccont_5 div:not(.token) > .token {
transform:rotate(-1.3deg);
}
#loccont_6 div:not(.token) > .token {
transform:rotate(-0deg);
}
#loccont_7 div:not(.token) > .token {
transform:rotate(-1.15deg);
}
#loccont_8 div:not(.token) > .token {
transform:rotate(-0deg);
}
#loccont_9 div:not(.token) > .token {
transform:rotate(-1.7deg);
}
#loccont_10 div:not(.token) > .token {
transform:rotate(1.5deg);
}
#loccont_11 div:not(.token) > .token {
transform:rotate(-0deg);
}
#loccont_12 div:not(.token) > .token {
transform:rotate(-0deg);
}
#loccont_13 div:not(.token) > .token {
transform:rotate(-1.5deg);
}
#loccont_14 div:not(.token) > .token {
transform:rotate(-0deg);
}
.vpbox,
.penaltybox {
position: absolute;
height:80px;
width:64px;
}
.penaltybox {
bottom:25px;
}
.vpbox {
top:58px;
}
#penalty_0 { left: 24px; }
#penalty_2 { left: 92px; }
#penalty_4 { left: 164px; bottom:20px; }
#penalty_6 { left: 758px; bottom:20px; }
#penalty_8 { left: 830px; }
#penalty_10 { left: 898px; }
#vp_7 { top: 58px; left: 24px; }
#vp_5 { top: 50px; left: 95px; }
#vp_3 { top: 45px; left: 165px; }
#vp_1 { top: 50px; left: 796px; }
#vp_0 { top: 46px; left: 868px; }
.token.penalty,
.token.vpmarker {
z-index:100;
position: relative;
height:32px;
width:32px;
background-image: url("img/vptoken.jpg");
background-size:352px;
border-radius: 3px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
}
.token.penalty_red { background-position: -192px 32px }
.token.penalty_blue { background-position: -224px 32px }
.token.penalty_yellow { background-position: -256px 32px }
.token.penalty_green { background-position: -288px 32px }
.token.penalty_purple { background-position: -320px 32px }
.penaltybox .token.penalty {
position: absolute;
top:0;
left:0;
}
.penaltybox .token:nth-of-type(1) { left: 5px; top: 0px }
.penaltybox .token:nth-of-type(2) { left: 30px; top: 4px }
.penaltybox .token:nth-of-type(3) { left: 0px; top: 26px }
.penaltybox .token:nth-of-type(4) { left: 24px; top: 30px }
.penaltybox .token:nth-of-type(5) { left: 10px; top: 54px }
#vp_red_0 { background-position: 0 0 }
#vp_red_1 { background-position: -32px 0 }
#vp_red_2 { background-position: -64px 0 }
#vp_blue_0 { background-position: -96px 0 }
#vp_blue_1 { background-position: -128px 0 }
#vp_blue_2 { background-position: -160px 0 }
#vp_green_0 { background-position: 0 32px }
#vp_green_1 { background-position: -32px 32px }
#vp_green_2 { background-position: -64px 32px }
#vp_purple_0 { background-position: -96px 32px }
#vp_purple_1 { background-position: -128px 32px }
#vp_purple_2 { background-position: -160px 32px }
#vp_yellow_0 { background-position: -192px 0 }
#vp_yellow_1 { background-position: -224px 0 }
#vp_yellow_2 { background-position: -256px 0 }
.vpbox .vpmarker {
display: inline-block;
margin-right:-12px;
margin-bottom:-12px;
}
.vpbox .vpmarker:nth-of-type(2n) {
margin-bottom:-6px;
margin-top:0;
}
.vpbox .vpmarker:nth-of-type(2n+1),
.vpbox .vpmarker:nth-of-type(4n) {
margin-left:-6px;
margin-top:-6px;
}
.cardname,
.tilename {
position: absolute;
top:0;
background:#f2904b;
background-image: url(img/namebg.png);
background-position: center;
color:#251815;
text-align:center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-family: 'Oswald', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cardname {
left:0;
width:91%;
padding:1px 2px;
border: solid 2px #f9eee3;
border-radius: 10px 10px 0 0;
font-size: 13px;
font-weight: 600;
}
.cardname.casecard {
background-image: url(img/casenamebg.png);
color:#f3f1ec;
}
.tilename {
left:4px;
width:81%;
padding:0 2px;
border-bottom:solid 1px #f9eee3;
border-radius: 3px 3px 0 0;
font-size: .7em;
font-weight: 500;
}
.location_slot .tilename {
top:2px;
left:5px;
width:81%;
}
.cardtooltip {
background-image: url(img/namebg.png);
font-family: 'Oswald', sans-serif;
font-size: 1.25em;
font-weight: 700;
color:#251815;
padding:0 10px 1px;
border-radius: 3px;
}
.casecardtooltip {
background-image: url(img/casenamebg.png);
color:#f3f1ec;
}
.help_click {
background-image: url(img/common/help_click.png);
background-repeat: no-repeat;
padding-left:20px;
}