/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
         url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-900 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/roboto-v18-latin-900.eot'); /* IE9 Compat Modes */
    src: local('Roboto Black'), local('Roboto-Black'),
         url('../fonts/roboto-v18-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-v18-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-v18-latin-900.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-v18-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-v18-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* montserrat-600 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v12-latin-600.eot'); /* IE9 Compat Modes */
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
         url('../fonts/montserrat-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v12-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v12-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* OdibeeSans */
  @font-face {
    font-family: 'OdibeeSans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/OdibeeSans-Regular.ttf') format('truetype'); 
  }
  /* Splash */
  @font-face {
    font-family: 'Splash';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Splash-Regular.ttf') format('truetype');
  }
  /* Teko */
  @font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Teko-Regular.ttf') format('truetype');
  }
  *{
      font-family: 'Roboto', sans-serif;
  }
  

* {
    scroll-behavior: smooth;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body{
    padding:0;
    background:#333;
    margin:0;
    font-size:15px;
    overscroll-behavior-y: contain;
}
b,
strong {
  font-weight: bolder;
}
h1 {
    font-size:1.6em;
    color: #fff;
    text-shadow: 2px 2px 0px #000;
    padding: 0 0 0.2em;
    box-shadow:0 4px 4px -4px #000;
    text-align:left;
    padding-left:1.2em;
    font-family:'Odibeesans';

    font-weight: normal;
    text-transform: uppercase;
    display:block;
    margin-bottom:0.4em;
}
h2{
    font-size:1.2em;
    text-align:center;
    padding: 0 0 0.2em;
    box-shadow:0 4px 4px -4px #000;
}
h1 .booktitle{
    font-weight:normal;
    color:#ff0;
    font-size:2em;
    font-family:'Odibeesans';
    text-transform: uppercase;
    margin-left: -0.05em;
    margin-top: 0em !important;
    display: inline-block;
    width: calc(100% - 2em);
    line-height: 0.85em;
}
#bg {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background: url(images/bg.png) 0% 0% / 8px;
}
#main{
    position:absolute;
    top:4em;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    overflow-y:scroll;
	transition: all 0.2s ease;
}
.content {
    max-width: 1000px;
    margin: 0 auto;
    position:relative;
    z-index:1;
}


@media (min-width: 1000px) {
    .content{
        max-width: 1700px;
    }

}

@media (min-width: 1500px) {
    #bookabout,#bookcurator{
        display:inline-block;
        max-width:calc(30% - 1em);
        vertical-align:top;
        width:100%;
    }
    #TOC{
        display:inline-block;
        max-width:calc(40% - 3em);
        width:100%;
        min-width:400px;
        vertical-align:top;
    }
}






#header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#222;
    box-shadow:0 4px 6px 1px #111;
    display:block;
    z-index:999;
    height:4em;
    overscroll-behavior-y: auto !important;
}
#title{
    color:#ff0;
    text-shadow:3px 3px 0 #000;
    font-family: 'Teko';
    font-size: 2.7em;
    font-weight: normal;
    text-transform: uppercase;
    display:inline-block;
    margin-left:0.3em;
    margin-top:0.005em;
}
#mainbuttons{
    position:absolute;
    top:1.2em;
    right:1.2em;
    display:block;
}
#publishRemixButton.button.notready{
    cursor:not-allowed;
}
#downloadLink .button,
#shareBookContainer .button,
#TheRemix .button,
#yourRemixBlock .button{
    box-shadow: 0 0 1px 8px #222;
    border-radius: 2em;
    background-color: #222;
}
#publishRemixButton.button:not(.notready){
    box-shadow: 0 0 1px 8px #222, 0 0 0 11px #ff0;
}
#publishRemixButton.button:not(.notready) #publishRemix{
    color:#ff0;
}
#TheRemix OL LI::marker{
    font-family:'Splash';
    color:#ff0;
    text-shadow:1px 0 0 #ff0, 2px 2px 0 #000;
    font-size:2.5em;
}
#TheRemix OL{
    display: inline-block;
    text-align: left;
}
.icon,
.button,
.nobutton{
    width:1.8em;
    height:1.8em;
    background-position:50% 50%;
    background-size:100%;
    transition:all 0.2s ease;
    box-shadow: 0 0 1px 8px transparent;
}
.button{
    cursor:pointer !important;
}
#menuicon,
#siteicon{
    display:inline-block;
    margin-left:1.2em;
    margin-top:1.2em;
}
#menuicon{
    background-image:url(/images/ui/ic_menu_white_24dp.png);    
}
#siteicon{
    display:none;
    background-image:url(/images/ui/bigboxbook.png);    
}
#fullscreen{
    background-image:url(/images/ui/ic_fullscreen_white_24dp.png);  
}
#headlinebuttons{
    position:absolute;
    right:1.2em;
    font-size:0.6em;
    display: inline-block;
    vertical-align: top;
    text-align: right;
    margin-top: 0.3em;
}
#headlinebuttons span{
    display:inline-block;
    margin:0 0.5em;
}
#downloadLink .button.disabled{
    opacity:0.4;
    cursor:not-allowed !important;
}
#printButton{
    background-image:url(/images/ui/ic_print_white_24dp.png);
}
#printButton.disabled{
    filter:contrast(0.1);
    cursor:not-allowed;
}
#shareButton{
    background-image:url(/images/ui/ic_share_white_48dp.png);
}
#greyout {
	display:none;
	position:fixed;
	top:0em;
	left:0em;
	width:100%;
	height:100%;
	background-color:#222;
	opacity:0;
	z-index:4;
	transition: opacity 0.3s ease;
}
#BackToTOC{
    position:fixed;
    z-index:999;
    bottom:0.8em;
    right:0.8em;
    background-image:url(/images/ui/ic_expand_less_white_24dp.png);
    opacity:0
}
.button:hover {
    background-color: #555 !important;
    box-shadow: 0 0 1px 8px #555 !important;
    border-radius: 2em;
}

#publishRemixButton.button:not(.notready):hover{
    box-shadow: 0 0 1px 8px #555, 0 0 0 11px #ff0;
}
.divider{
    font-family:'Teko';
    color:#fff;
    display: inline-block;
    padding:0 0.1em;
    text-align:center;
    vertical-align:bottom;
    line-height:0.5em;
    font-size:2.1em;
    opacity:0.3;
    transition:all 0.2s ease;
    margin-top:4px;
    margin-bottom:-4px;
}

#booklist ul {
    list-style-type: none;
    width:calc(100% - 4em);
}

#booklist ul li {
    cursor:pointer;
    display: flex;
    line-height: 1.0em;
    margin-bottom: 0.2em;
}

#booklist li.selected .divider,
#booklist li.selected span.booklistdetails,
#booklist li.selected::after,
#booklist li:hover .divider,
#booklist li:hover span.booklistdetails,
#booklist li:hover::after {
    opacity: 1;
}

span.booklistdetails {
    color: #fff;
    font-size: 0.9em;
    transition: all 0.2s ease;
    order:3;
    margin-left:0.4em;
    display:none;
}

@media (min-width: 800px) {

    span.booklistdetails {
        display:flex;
    }
    #booklist li::after{
        background-image: radial-gradient(circle, #fff 3px, transparent 4px);
        background-position: -1px;
        background-size: 1.6ex 1.2em;
        background-repeat: space no-repeat;
        content: "";
        flex-grow: 1;
        height: 1em;
        order: 2;
        opacity: 0.3;
        transition: all 0.2s ease;
    }
}
#booklist ul li span.booklisttitle {
    color: #ff0;
    margin-left: 0.3em;
    font-family: 'Odibeesans';
    font-size: 1.2em;
    text-transform: uppercase;
    margin-right:0.5em;
}
#BooklistRemixes .p .remixing,
#booklist UL li span.remixing {
    font-family: 'splash';
    color: #ff0;
    font-size: 1.3em;
    text-shadow: 1px 0px 0 #ff0, 1px 1px 0 #000;
    margin: 0 0.1em 0 0.1em;
    z-index: 1;
    position: relative;
}
#booklist .booknbr,
#booklist .remixnbr{
    font-family: 'OdibeeSans';
    color: #fff;
    font-size: 1.2em;
    display:inline-block;
    margin-right:0.2em;
}
#booklist .booknbr{
    width:2.6em;
}
#booklist .remixnbr{
    width:3.8em;
}

#bookpreview{
    margin-bottom:10em;
}
#bookpreviewloading{
    color:#fff;
    text-align:center;
}

#bb-bookblock{
    margin:0;
    filter:drop-shadow(0 8px 8px #000);
    width:1px;
}
#bb-bookblock DIV{
    background-color:transparent;
}
#bb-bookblock IMG{
    width:100%;
    height:100%;
}
IMG{
    border-radius:8px;
}
/*
.bb-custom-wrapper:before {
    content: "Here's a preview of the book.\A Click on the pages to flip through.";
    text-align: right;
    position: absolute;
    width: calc(50% - 4em);
    height: 50%;
    bottom: 0em;
    border: none;
    font-family: 'Roboto';
    color: #aa0;
    white-space: pre;
    text-shadow: 1px 1px #000;
    font-size:0.9em;
}
*/
.bb-page IMG,
.bb-item IMG{
    background-size:100% 100%;
}
/*.bb-page IMG,
.bb-page-next IMG,
.bb-page-prev IMG,
.bb-page-initial IMG{*/
.bb-flip-next IMG,
.bb-flip-initial IMG{
    background-image:unset !important;
}
#bb-fold,
#bb-nav-prev,
#bb-nav-next{
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    display:block;
    z-index:101;
}
#bb-nav-prev{
    left:0;
}
#bb-nav-next{
    right:0;
}
.bb-custom-wrapper{
    display:none;
    position:relative;
    margin-top:0em;
    margin-bottom:2em;
    transition:opacity 0.3s ease;
}
#RemixDeadline{
    color:#ff0;
    font-weight:bold;
}
#YourRemixPreview{
    border:none;
    width:100%;
    margin-bottom:-2em;
    overflow:hidden;
}
#TOC li,
#YourRemixTOC li {
    display: flex;
}
#YourRemixTOC li{
    height:1.6em;
}
#YourRemixTOC li div.updownbuttons{
    width:6em;
    min-width:6em;
    display:flex;
    order:99;
    transition:all 0.2s ease;
    margin-top:-0.2em;
    margin-left:0.4em;
}
#YourRemixTOC li div.updownbuttons span.button,
#YourRemixTOC li div.updownbuttons span.nobutton{
    height: 1.2em;
    width: 1.2em;
    margin:0 0.4em;
    background:transparent;
    box-shadow:none;
    font-weight:bold;
    color:#aaa;
    text-shadow:1px 0 0 #aaa;
    text-align:center;
}
#YourRemixTOC li div.updownbuttons span.button:hover{
    color:#ff0;
    text-shadow:1px 0 0 #ff0;
    z-index:99;
}
#aboutYouLength,
#aboutYourRemixLength{
    display: inline-block;
    text-align: right;
    position: absolute;
    right: 2.5em;
}

#TOC li SPAN:first-child,
#YourRemixTOC li SPAN:first-child {
    order: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#TOC li SPAN+SPAN,
#YourRemixTOC li SPAN+SPAN {
    order: 3;
}

#TOC li:NOT(.cover)::after,
#YourRemixTOC  li:NOT(.cover)::after{
    background-image: radial-gradient(circle, #ff0 1px, transparent 1px);
    background-position: bottom;
    background-size: 0.8ex 1px;
    background-repeat: space no-repeat;
    content: "";
    flex-grow: 1;
    height: 1em;
    order: 2;
}
#TOC,
#YourRemixTOC{
    text-align:left;
    color:#eee;
    font-size:1em;
    padding:0.4em;
    margin: 0 auto;
}
#TOC ul{
    column-count: auto;
    column-width: 370px;
    column-gap: 4em;
    padding: 0;
    margin:0 0 2em 0;
}
.link,
#TOC li.link,
#YourRemixTOC li.link{
    color:#fff;
    text-decoration:none;
    transition:all 0.2s ease;
}
.link:hover,
#TOC li.link:hover,
#YourRemixTOC li.link:hover{
    color:#ff0;				
    text-decoration:none;
    cursor:pointer;
}
#pagesbox h1 .small,
#TOC b .small{
    font-size:0.8em;
    color:#aaa;
    font-family: 'Odibeesans';
}
#TOC li .small,
#YourRemixTOC li .small {
    font-size:0.9em;
    color:#aaa;
}
#reorderBook{
    position: relative;
    margin-top: -2.3em;
    text-align: right;
    width: 100%;
    margin-bottom: 0.4em;
}
#reorderBook span.button {
    margin: 0 0.4em;
    background:transparent;
    box-shadow:none;
}
@media (min-width: 120000px) {
    
    #YourRemixTOC li div.updownbuttons{
        display:flex;
        width:0px;
        min-width:0px;
        overflow:hidden;
    }
    #YourRemixTOC li:hover div.updownbuttons{
        display:flex;
        width:8.2em; 
        overflow:visible;
    }    
}

#contact img,
#TheProject img,
#TheProject video{
    margin: 1em 2em 2em 2em;    
    filter: drop-shadow(0 8px 8px #000);
    max-width:calc(90% - 4em);
    max-height:300px;
    border-radius:0.4em;
}
#contact p.twovideos,
#TheProject p.twovideos{
    text-align:center;
    column-count:2;
    column-width:300px;
    margin-top:2em;
    margin-bottom:3em;
}
#contact p.twovideos img,
#TheProject p.twovideos video{
    display:inherit;
    margin:0 auto;
}
#TheProject h1{ 
    clear:both;
}
#CreateABook{
    padding: 1em;
    background: #222;
    border-radius: 5px;
    box-shadow: 0 4px 4px 1px #000 inset;
    position:relative;
}
#CreateABook .quote,
#TheProject .quote{
    margin: 0 1em 2em 0em;
    padding: 0.8em 0 0 1.8em;
    max-width: 50%;
    font-style: italic;
    color: #fff;
    background-image: url(images/ui/about.png);
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: 2em;
    text-shadow: 1px 1px 0 #000;
}
#AboutRemixesGallery{
    padding:6em 2em 0em;
    white-space:nowrap;
    text-align:justify;
    direction:rtl;
}
.AboutRemixGalleryContainer {
    display: inline-block;
    width: calc(10% - 5px);
    height: 10%;
    overflow: visible;
    margin:0;
}
#AboutRemixesGallery img{
    transform:rotate(-5deg);
    max-width:200px;
}
#AboutRemixesGallery div.AboutRemixGalleryContainer:nth-of-type(2n){
    transform:translateY(-80px);
}
#PrintThisDraft{
    display:none;
}
#contact .aboutMe,
#PrintThisBook,
#PrintThisDraft,
#ShareEmbedBook,
#gamedetails,
#TheProject,
#TheRemix,
#booklist,
#about,
#curator,
#TOC,
#yourRemixDetails
{
    color:#eee;
    text-align:left;
    padding:1em 2em 2em;
}
#contact,
#project,
#games{
    max-width: 69em;
    margin-left: 0;
}
/* #TheProject,
#TheRemix, */
.aboutblurb{
    column-width: 300px;
    column-count: auto;
    column-gap:1.5em;
    text-align:justify;
    word-break: break-word;
}
#TheRemix p{
    margin-top:0;    
}
#main a[style*="color:#ff0"],
#BooklistBooks .p *[style*="color:#ff0"],
#TheProject b,
#PrintThisBook b,
#PrintThisDraft b,
#ShareEmbedBook b,
#PrintThisBook a,
#ShareEmbedBook a,
#gamedetails b,
#TheRemix b,
#contact b,
.aboutblurb *[style*="color:#ff0"],
#yourRemixDetails b{
    font-family: 'OdibeeSans';
    font-size: 1.2em;
    line-height: 1em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000;
}
.aboutblurb a{
    color:#fff;
    text-decoration:none;
    transition:all 0.2s ease;
}
.aboutblurb a:hover{
    color:#ff0;
}
#saving{
    position: absolute;
    top: -5em;
    width: 20em;
    left: calc(50% - 10em);
    background: #555;
    box-shadow: 0 2px 6px 2px #000;
    border-radius: 0 0 1em 1em;
    color: #ff0;
    padding: 0.8em 0.8em 0.4em;
    text-align: center;
    font-size: 0.8em;
    transition: top 0.2s ease;
    z-index: 2;
    font-weight: bold;
}
#noGameFound{
    width:15em;
    color:#eee;
    margin:2em auto;
    display:none;
}
#PrintThisDraft b,
#PrintThisBook b,
#ShareEmbedBook b,
#gamedetails b,
#about b, 
#curator b,
#TOC b {
    font-family: 'Odibeesans';
    font-size: 1.6em;
    font-weight: normal;
    text-transform: uppercase;
    text-shadow:2px 2px 0 #000;
    display:block;
    margin-bottom:0.4em;
}
#bookpreview .remix,
#TheProject .remix,
#TheRemix .remix,
h1 span.remixing,
#about b span.remixing,
#curator b span.remixing,
#yourRemixDetails .remix{
    font-family: 'Splash';
    color: #ff0;
    text-transform: capitalize;
    font-size: 1.2em;
    margin:-0.35em 0.2em;
    display: inline-block;
    position:relative;
    z-index:1;
    text-shadow:1px 0px 0 #ff0, 1px 1px 0 #000;
}
#allpages{
    padding:2em 0;
    text-align:center;
}
#allpages .pages{
    margin:0.5em 0;
}
#allpages div:first-of-type{
    overflow:hidden;
}
#allpages div:first-of-type IMG{
    margin-left: -42.5%;
}
#allpages div:last-of-type{
    overflow:hidden;
}
#allpages div:last-of-type IMG {
    margin-left: 30%;
}
#allpages IMG{
    width:85%;
}





#menu{
	background:transparent;
	border:none !important;
	position:fixed;
	top:4em;
	bottom:0em;
	height:100%;
	left:-34em;
	font-size:1em;
	z-index:2;
	padding:0em;
	margin:0em;
	transition: opacity 0.2s ease, left 0.4s ease;
	overflow-y:hidden;
	overflow-x:hidden !important;
}

#gamelist .icon,
#menu .icon{
	cursor:pointer;
	padding:0.6em;
	margin:0.2em;
	vertical-align:middle;
	background-color:#fff0;
	transition:all 0.2s ease !important;
    filter: saturate(0) drop-shadow(2px 2px 0 black);
    width:1.6em;
    height:1.6em;
}
#menubox{
	box-shadow:none !important;
	position:relative;
	top:0em;
	bottom:0em;
	height:auto;
	max-height:100%;
	color:#eee;
	margin:0em;	
    overflow-y:scroll;
}
#menuPanel{
	background:transparent;
	height:5em;
	clear:both;
}
#menu:focus,#menu:hover{
	overflow-y:auto !important;
	overflow-x:hidden !important;
}
#menuPanel p {
	margin:0.2em;
	opacity:0.85;
	border-radius:5px;
    transition:all 0.2s ease;
    background:transparent;
}
#menuPanel p .menuItem{
	color:#fff;
	font-size:1.2em;
	vertical-align:middle;
}
#menuPanel p:hover{
	background:#555;
	cursor:pointer;
	opacity:1;
}
#gamelist .filterbutton:hover,
#menuPanel p.selected img, 
#menuPanel p:hover img {
    transform: scale(1.3);
    filter:saturate(1) drop-shadow(2px 2px 1px black);
}
#menuPanel p:hover span {
    color: #ff0;
}
#menuPanel p.selected, #BoxCollectionView p.selected{
	background:#555;
	opacity:1;
}
#menuPanel p.selected SPAN, #BoxCollectionView p.selected SPAN{
	color:#ff0;
	font-weight:900;
	opacity:1;
    text-shadow: 2px 2px 2px #000;
}
#menuPanel hr {
	width:80%;
	opacity:0.5;
	border: 1px dotted #ffff00;
	border-bottom-width:0em;
}


#games{
    position:relative;
    width:100%;
    height:100%;
    overflow-y:scroll;
}
/*
#gamelist img{
    display:inline-block;
    width: calc(25% - 2.5em);
    max-width: 240px;
    min-width: 140px;
    transition:all 0.2s ease;
    margin:0.4em 1em;
    border:1px solid #000;
}*/

#AboutRemixesGallery img.selected,
#gamelist img.selected{
    border-color:#ff0;
    filter:drop-shadow(1px -1px 0px #ff0) drop-shadow(-1px 1px 0px #ff0) drop-shadow(1px 1px 0px #ff0);
}
#gamelist img:hover{
    cursor: pointer;
    transform: scale(1.05);
    z-index:0;
}
#pagesbox h1 {
    position: sticky;
    top: 0.65em;
    background: #554;
    box-shadow: 0 4px 4px -4px #000, 0 -1em 0 0 #554;
    width: calc(100% - 1.2em);
    margin: 0 0.3em;
    margin-bottom: 1em;
    padding-left: 0.6em;
}
#pagesbox table.note{
    color:#ff0;
    width: calc(100% - 40px);
    margin: 0 auto;
    font-size:0.9em;
}
#pagesbox table.note img{
    margin:0 !important;
    width:auto;
    height:7em;
}
#pagesbox table.note a{
    color:#fff;
}

#pagesbox img{
    width:calc(100% - 40px);
    margin: 10px 20px;
    display: inline-block;
}
#gamelist{
    min-height:calc(100% - 10em);
    padding-bottom:10em;
    /*
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    overflow-y:scroll;
    width:50%;
    z-index:1;
    box-shadow:0 2px 4px 1px #000;
    */
}
#gamelist h1{
    position: sticky;
    top: 0;
    padding: 0.5em;
    background: #333;
    box-shadow: none;
    padding: 0.8em 0.6em 0.2em 0.6em;
    z-index: 1;
    width: calc(100% - 3em);
    height: 1.2em;
}
#pagesbox{
    position:absolute;
    height:100%;
    right:0;
    width:50%;
    border:none;
    display:none;
    background:#554;
    z-index:0;
    box-shadow:-4px 0 4px -2px #000 inset, 4px 0 4px -2px #000 inset;
    overflow-y:scroll;
}
#gamelist .group{
    transition:all 0.2s ease;
    opacity:1;
}
#gamelist .group.hidden{
    display:none;
}

#gamelist h1:first-of-type {
    width: 100%;
    box-shadow: 0 4px 4px -3px #000, 3em 0 0 0 #333;
    margin-bottom: -3em;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    padding-bottom: 0.3em;
}
#gamelist img.filterbutton {
    width: 1.4em !important;
    height: 1.4em !important;
    min-width: 1.4em;
    border: none;
    box-shadow: none;
    z-index: 2;
    margin: -1em -0.2em 0 0;
}
#gamelist h1 div.filterinput {
    display: inline-block;
    width: calc(100% - 0.5em);
    margin-top: -0.5em;
    padding: 0 0.5em;
}
  
#gamelist h1 {
    display:flex;
    line-height: 0.8em;
}
#gamelist h1 .seperatorIndex{
    font-family: 'Splash';
    color: #ff0;
    font-size: 1.2em;
    text-shadow: 1px 0px 0 #ff0, 1px 1px 0 #000;
    line-height: 0.6em;
    margin: 0 0.6em 0 0.4em;
    overflow: visible;
}
#gamelist h1 span{
    order:1;
    font-family: 'Odibeesans';
    font-size: 0.8em;
    max-width:40%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#gamelist h1 span.sepEnd{
    order:3;
}
#gamelist h1:NOT(:first-of-type)::after{
    background-image: radial-gradient(circle, #fff 3px, transparent 4px);
    background-position: bottom;
    background-size: 1.6ex 1.2em;
    background-repeat: space no-repeat;
    content: "";
    flex-grow: 1;
    height: 1em;
    order: 2;
    opacity: 0.3;
    transition: all 0.2s ease;
}

div.boxSnippet span.tooMany,
div.boxSnippet span.directadd,
div.boxSnippet span.directremove{
    font-size:0.5em;
    right:0.5em !important;
    bottom:0.5em !important;
    display:none !important;
}
div.boxSnippet.selected span.directremove{
    display:block !important;
}
div.boxSnippet:not(.selected):not(.notAllowed):hover span.directadd{
    display:block !important;
}
div.boxSnippet.notAllowed:hover span.tooMany{
    display:block !important;
}
div.boxSnippet:not(.notAllowed):hover span.tooMany{
    display:none !important;
}
div.boxSnippet span.tooMany,
div.boxSnippet span.directadd,
div.boxSnippet span.directremove,
#addPage, 
#removePage{
    width: 4em;
    height: 4em;
    position: absolute;
    bottom: 2em;
    right: 2em;
    border-radius: 2em;
    display: block;
    background: #ff0;
    box-shadow: 1px 2px 2px 0px #000;
    z-index: 2;
    background-position: 50% 50%;
    background-size: 80%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.2s ease;
}
div.boxSnippet span.directadd,
#addPage{
    background-image: url(images/ui/add_black_48dp.png);
}
div.boxSnippet span.directremove,
#removePage{
    background: url(images/ui/remove_black_48dp.png), radial-gradient(#ff8 60%, #111 62%);
    background-position: 50% 50%, 50% 50%;
    background-size: 80%, 100%;
}
div.boxSnippet span.directadd:hover,
div.boxSnippet span.directremove:hover,
#addPage:hover,
#removePage:hover{
    box-shadow: 1px 2px 4px 0px #000;
    transform: scale(1.05);
    transform-origin: 50% 50%;
}

div.boxSnippet span.tooMany{
    background-image: url(images/ui/ic_close_white_24dp.png);
    background-color: #f00 !important;
    cursor: not-allowed;
}

#addremovefeedback{
    position:absolute;
    bottom:5em;
    right:2em;
    width:5em;
    height:1em;
    text-align:center;
    margin:0;
    padding:0;
    display:none;
    z-index: 1;
    font-size:0.9em;
    font-weight:bold;
    color:#ff0;
    text-shadow:1px 1px 0 #000;
}
#addremovefeedback.feedbackAddRemove{
    animation-name:userfeedbackAddRemove;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    display:block;
}
@keyframes userfeedbackAddRemove {
    0% {display:block;bottom: 5em;opacity:1}
    75% {opacity:1}
    85% {bottom: 8.5em;}
    99% {opacity:0;bottom: 8.5em;}
    100% {display:none;bottom: 8.5em;}
  }

textarea,
input[type="text"] {
    width: calc(100% - 2em);
    padding: 0.4em 0.8em;
    border-radius: 4px;
    border: none;
    margin:0.4em 0;
}
textarea{
    height:12em;
    resize:none;
}

@media (min-width: 800px) {
    
}

div.pages2{ 
    box-shadow: 2px 1px 0 0 #fff, 3px 2px 0 0 #000; 
}
div.pages3{ 
    box-shadow: 2px 1px 0 0 #fff, 3px 2px 0 0 #000, 5px 3px 0 0 #fff, 6px 4px 0 0 #000; 
}
div.pages4{ 
    box-shadow: 2px 1px 0 0 #fff, 3px 2px 0 0 #000, 5px 3px 0 0 #fff, 6px 4px 0 0 #000, 8px 5px 0 0 #fff, 9px 6px 0 0 #000; 
}
div.pages5{ 
    box-shadow: 2px 1px 0 0 #fff, 3px 2px 0 0 #000, 5px 3px 0 0 #fff, 6px 4px 0 0 #000, 8px 5px 0 0 #fff, 9px 6px 0 0 #000, 11px 7px 0 0 #fff, 12px 8px 0 0 #000; 
}
div.pages6{ 
    box-shadow: 2px 1px 0 0 #fff, 3px 2px 0 0 #000, 5px 3px 0 0 #fff, 6px 4px 0 0 #000, 8px 5px 0 0 #fff, 9px 6px 0 0 #000, 11px 7px 0 0 #fff, 12px 8px 0 0 #000, 14px 9px 0 0 #fff, 15px 10px 0 0 #000; 
}

div.pages2.selected{ 
    box-shadow: 2px 1px 0 0 #ff0, 3px 2px 0 0 #000; 
}
div.pages3.selected{ 
    box-shadow: 2px 1px 0 0 #ff0, 3px 2px 0 0 #000, 5px 3px 0 0 #ff0, 6px 4px 0 0 #000; 
}
div.pages4.selected{ 
    box-shadow: 2px 1px 0 0 #ff0, 3px 2px 0 0 #000, 5px 3px 0 0 #ff0, 6px 4px 0 0 #000, 8px 5px 0 0 #ff0, 9px 6px 0 0 #000; 
}
div.pages5.selected{ 
    box-shadow: 2px 1px 0 0 #ff0, 3px 2px 0 0 #000, 5px 3px 0 0 #ff0, 6px 4px 0 0 #000, 8px 5px 0 0 #ff0, 9px 6px 0 0 #000, 11px 7px 0 0 #ff0, 12px 8px 0 0 #000; 
}
div.pages6.selected{ 
    box-shadow: 2px 1px 0 0 #ff0, 3px 2px 0 0 #000, 5px 3px 0 0 #ff0, 6px 4px 0 0 #000, 8px 5px 0 0 #ff0, 9px 6px 0 0 #000, 11px 7px 0 0 #ff0, 12px 8px 0 0 #000, 14px 9px 0 0 #ff0, 15px 10px 0 0 #000; 
}


#shareBookContainerBox{
    position: relative;
    top: 0em;
    bottom: 0em;
    height: auto;
    /* max-height: 100%; */
    background: rgb(0, 0, 0);
    color: rgb(238, 238, 238);
    max-width: 35em;
    width:90%;
    margin: auto;
    box-shadow: 0 4px 10px 6px #000, rgba(30, 30, 30, 0.8) 0px 0px 0px 1000em;
    border-radius: 10px;
}
#shareLinkBookBtn{
    padding:0 1em;
    font-size: 1.4em;
    font-family: 'Teko';
}
#shareBookContainer h1 {
    margin: 0;
    padding: 0.5em;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 3px 2px 0px #000;
    z-index: 1;
    position: relative;
    background:#222;
}
#CreateABook .closeBtn,
#shareBookContainer .closeBtn{
    margin-top: -2.7em;
    right: 0.7em;
    position: absolute;
    z-index: 2;
}
#shareBookContainer .dialogContent{
    background: #333;
    color: #eee;
    padding: 0.4em 1em 1em 1em;
    border-radius: 0 0 5px 5px;
}

.shareLink{
	padding:0em 0.2em;
	clear:both;
	height:0px;
	transition:height 0.2s ease;
	overflow:hidden;
}
textarea.sharelink{
	resize: none;
	border:none;
	width:100%;
	margin:0em;
	color:#666;
	padding:0.4em 0em 0em 0em;
	text-align:center;
	background:#f0f0f0;
	border-radius:3px;
	font-size:1em;
	font-weight:bold;
	cursor:pointer;
	height:1.7em;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
}
textarea.sharelink:hover{
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
}
#shareLinkPreview,
#shareLinkPreview_main{
    background: #111;
    box-shadow: 0 0 0 1px #111, 0 5px 10px 0 #000;
    margin: 1em;
    border-radius: 5px;
    overflow: hidden;
    padding-bottom: 5px;
}
#shareLinkIMG,
#shareLinkIMG_main{
    width: 100%;
    border-radius: 0 !important;
}
#shareLinkTitle,
#shareLinkTitle_main{
    display: block;
    font-weight: bold;
    padding: 5px 10px;
}
#shareLinkDesc,
#shareLinkDesc_main{
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 0.9;
    color:#ccc;
}
#shareLinkSite,
#shareLinkSite_main{
    color: #666;
    padding: 5px 10px;
    display: block;
}
#shareLinkPreview_main{
    max-width: 31em;
    font-size: 0.8em;
}
#printandshare{
    text-align:center;
}
#printandshare>div{
    width: auto;
    display: inline-block;
    vertical-align: top;
    text-align:justify;
    max-width:35em;
}
#printandshare #PrintThisBook UL{
    column-count: auto;
    column-width: 7em;
}
@media (min-width: 800px) {
    #printandshare>div{
        width: calc(50% - 5em);
    }
}


#gamedetails div.infocard{
    width:calc(100% - 2em);
    display:block;
    padding:1em;
    vertical-align:top;
    min-width:300px;
    max-width:500px;
    margin:0 auto;
}
#gamedetails>b, #gamedetails>p{
    text-align:center;
}
@media (min-width: 750px) {
    #gamedetails div.infocard{
        width:calc(50% + 2em) !important;
        padding:1em 0.5em !important;
        margin:unset !important;
        margin-right:-6.5em !important;
        max-width:unset !important;
        display:inline-block !important;
    }
    #gamedetails div.infocard p {
        font-size:0.9em !important;
    }
    #gamedetails table {
        font-size:1em !important;
    }
    #gamedetails .cover{
        display:table-cell !important;
        width:6em !important;
        vertical-align:top !important;
        padding-top:5.5em !important        
    }
    #gamedetails table.left .cover{
        padding-top:0em !important;
        padding-right:0.65em !important;
    }
    #gamedetails .details{
        background:none !important;
    }
    #gamelist .boxSnippet,
    #gamedetails .boxSnippet {
        width: 4.5em !important;
        height: 4.5em !important;
    }
}
@media (min-width: 1230px) {
    
    #gamedetails div.infocard p {
        /*font-size:1em !important;*/
    }
    #gamedetails div.infocard{
        width:calc(50% - 2em) !important;
        padding:1em !important;
        margin:unset !important;
        margin-right:0em !important;
        max-width:unset !important;
        display:inline-block !important;
    }
    #gamedetails table {
        margin: 0 auto;
        max-width: unset !important;
    }
    #gamedetails .cover{
        display:table-cell !important;
        width:12em !important;
        vertical-align:top !important;
        padding-top:0em !important
    }
    #gamedetails table.left .cover{
        padding-top:0em !important;
    }
    #gamedetails .details{
        background:none !important;
    }
    #gamedetails .boxSnippet {
        width: 10em !important;
        height: 10em !important;
    }
}
#gamedetails div.infocard p {
    margin: 0;
    padding: 0;
    color: #ccc;
    font-size:0.9em;
}
#gamedetails div.infocard a {
    color: #ff0;
}

#gamedetails table {
    width:100%;
    min-width:300px;
    margin: 0 auto;
    max-width: 800px;
}

#gamedetails .cover{
    display:none;
    width:5em;
    vertical-align:top;
}

#gamedetails table h1{
    padding: 0;
    margin-top: 0;
    margin-bottom: 0 !important;
    color: #ff0;
    text-transform: none;
    width: fit-content;
    line-height: 0.8em;
}
#gamedetails table h1 span.edition{
    font-size:0.7em;
    font-family: 'Odibeesans';
}
#gamedetails table.left td,
#gamedetails table.left td h1{
    text-align:right;
    margin:0 0 0 auto;
}
#gamedetails table td{
    vertical-align: top;
}
#gamedetails div.infocard p{
color:#fafafa;
}
#gamedetails div.infocard a{
color: #aaa;
}
#gamedetails td.details{
    padding-top:0.5em;
    background-size: 100%, 70px auto;
    background-size: 100%, contain;
    background-repeat: no-repeat;
    background-position: 100% 50%;
    padding-bottom:1em;
}
#gamedetails table.left td.details{
    background-position:0% 50%;
}
#gamedetails .boxSnippet:hover {
    cursor:pointer;
    transform: scale(1.6);
    background-size: contain !important;
    background-position: 50% 50%;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px #0008) drop-shadow(2px 4px 6px #000c) drop-shadow(0 0 10px #333);
    z-index:300 !important;
    border-radius:0 !important;
}

#gamelist .boxSnippet,
#gamedetails .boxSnippet {    
    width: 3em;
    height: 5em;
    background-size: cover;
    background-position: 57.5% 35%;
    border-radius: 1em;
    display: inline-block;
    background-repeat: no-repeat;
    transition: all 0.2s ease;
    filter: drop-shadow(0 2px 4px #0008) drop-shadow(2px 4px 6px black);
    z-index:1;
    position:relative;
}
#gamelist .boxSnippet{    
    width: 8em !important;
    height: 8em !important;
    margin:0.5em !important;
    z-index:0;
    transition: box-shadow 0.2s ease;
    background-position:50% 35%;
    filter:none;
    box-shadow:0 0 0 1px #000, 0 0 0 4px #0000, 0 4px 6px 0 #000;
    display:inline-block;
}
#gamelist .boxSnippet.darken{
    box-shadow:0 0 0 1px #000, 0 0 0 4px #0000, 0 4px 6px 0 #000, 0 0 4em 1em #5558 inset;
}
#gamelist .boxSnippet.selected{
    box-shadow:0 0 0 1px #000, 0 0 0 4px #ff0, 0 4px 6px 4px #000;
}
#gamelist .boxSnippet:hover{
    box-shadow:0 0 0 1px #000, 0 0 0 4px #fff, 0 4px 6px 4px #000;
    cursor:pointer;
}
#gamelist .boxSnippet.selected:hover{
    box-shadow:0 0 0 1px #000, 0 0 0 4px #ff0, 0 4px 6px 4px #000 !important;
}
div.boxSnippet span.gamelistnbrpages {
    opacity: 0;
    transition: opacity 0.2s ease;
    position: absolute;
    bottom: -2px;
    width: calc(100% + 2px);
    text-align: center;
    font-size: 0.65em;
    background: #0008;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    padding: 0.2em 0;
    border-radius: 0 0 2em 2em;
    border: 1px solid #fff;
    left: -2px;
}
div.boxSnippet span.gamelistnbrbooks {
    opacity: 1;
    transition: opacity 0.2s ease;
    position: absolute;
    top: -0.5em;
    width: auto;
    text-align: center;
    font-size: 0.65em;
    background: #fff;
    color: #000;
    padding: 0.1em 0.4em;
    border-radius: 0.4em;
    right: -0.5em;
    height: 1.2em;
    display: block;
    font-weight: bold;
    border: 0px solid #000;
    box-shadow: 0 0 2px 1px #000;
    transform:rotate(5deg);
}

div.boxSnippet:hover span.gamelistnbrbooks,
div.boxSnippet:hover span.gamelistnbrpages {
    opacity:1;
}
#gamelist .boxSnippet:hover.selected{
    box-shadow:0 0 0 1px #000, 0 0 0 4px #0000, 0 4px 6px 0 #000;
}
#ApprovalPending {
    display:none;
    width: calc(100% - 4em);
    padding: 0.4em;
    border-radius: 0.8em;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    max-width: 25em;
    color: #000;
    background: #ff0;
    border: 4px solid #333;
    box-shadow: 0 0 0 2px #ff0;
}

::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
background: transparent; 
border-radius:5px;
margin:0.5em 0;
}
::-webkit-scrollbar-thumb {
background: #888; 
border-radius:5px;
min-height:3em;
transition:all 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
background: #ff0; 
}


.affiliate{
    display:none;
}