@charset "utf-8";
@import url('interface.css');
@import url('scenes.css');
@import url('puzzles.css');
/*********************************************************************************************
  $Jaguar Adventure Game Engine || INITIALIZATION CSS FILE
  
  -----------------
  TABLE OF CONTENTS
  -----------------
  I.    RESET / CSS SETUP
  II.   MAIN CONTAINER AND CHAPTERS
  III.  CHARACTER DIALOGUE
  IV.   SUBTITLES AND CREDITS
    
  -------------------
  LAYERING REFERENCE:
  -------------------
  Path:		  			  		1
  Item [type=object]:	  		2
  Item [type=exit]:			 	2
  Characters:  			  		X [ AUTOMATICALLY SET AS % OF VIEWPORT HEIGHT ]
  Item [type=layer]: 	  		X [ AUTOMATICALLY SET AS % OF VIEWPORT HEIGHT ] 
  Foreground: 			  		9991  
  Weather Canvas:				9992
  Fog Effects Canvas:			9993
  Sky Cycling Layer:	        9994
  Map Desintation Marker:		99991
  Map Destination Marker Popup: 99992
  Subtitles/Damage Points:		99993
  Conversation Dialogue:		99993
  Credits:						99993
  Riddle Answer Box:			99994
  Puzzle Countdown Timer:		99994
  Overlays						999991
  Character Selection:			999992  
  Save Menu:					999992    
  Player Stats Window:			999992
  Pause Message:				999993
  Error Message:				999994
  Debug Console:				9999991
  Cursor:						99999991  

  --------------
  SCALING NOTES:
  --------------
  TO ACHIEVE ADAPTIVE SCALING, THE GAME'S BASE DIMENSIONS ARE PLACED ON THE MAIN JAG_ADVENTURE
  CONTAINER. BASE DIMENSIONS ARE THE ACTUAL VIEWPORT DIMENSIONS WHEN ARTWORK IS 100% ACTUAL SIZE.
  
  1. FONT-SIZE : 100% IS PLACED ON JAG_ADVENTURE CONTAINER
  2. ALL TEXT SIZES AND LINE-HEIGHTS ARE % AND SET IN SKIN CSS FILES
  3. ALL BORDER-WIDTHS ARE SET IN EM UNITS
     BEWARE: BORDER EM UNITS WILL NOT SCALE ACCURATELY. 
     DO NOT USE BORDERS IN SITUATIONS THAT REQUIRE PRECISION SCALING / ALIGNMENT
  4. THE JAG_ADVENTURE CONTAINER IS WRAPPER IN #WRAPPER.
     DIMENSION CHANGES TO THIS WRAPPER AFFECT THE VIEWPORT [ HANDLED IN THE SCALEVIEWPORT FUNCTION ]

******************************************************************************/
/******************************************************************************/
/* I. RESET / CSS SETUP
/******************************************************************************/
body { 
	margin:0; 
	padding:0; 
	background-color:#000000; }

#gameWrapper * {	
	/* AVOID OPENING MOBILE CONTEXT MENU ON TAPHOLD */
	-webkit-touch-callout:none; -moz-touch-callout:none; -ms-touch-callout:none; -o-touch-callout:none; touch-callout:none; 
	/* AVOID HIGHLIGHTING ON TAP */
	-webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); 
	/* AVOID CHANGING TEXT SIZE ON ORIENTATION CHANGE */
	-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; 
	-o-text-size-adjust:none; text-size-adjust:none; 
	/* AVOID SELECTING TEXT AND IMAGES */
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;
	/* NOTE! FOR PIXELATED ADVENTURES ONLY! REMOVE IF YOU AREN'T USING PIXEL ART */
	-webkit-image-rendering:crisp-edges; -ms-image-rendering:crisp-edges; image-rendering:crisp-edges; }

.JAG_Adventure * {
	vertical-align:baseline; margin:0; font-size:100%; padding:0;	
	line-height:100%; border:0; cursor:inherit; box-sizing:border-box; }

/* FORCE GPU */
.JAG_Foreground, ul.JAG_Chapter li, ul.JAG_Chapter li .JAG_Background, 
ul.JAG_Chapter li .JAG_Item, .JAG_Destination, ul.JAG_Chapter li .JAG_Char, .JAG_Char img, #JAG_Cursor {
	-o-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); 
	-ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}

/* GENERAL USE */
div.JAG_clear 			 { clear:both; }
div.JAG_Adventure strong { font-weight:bold; }
div.JAG_Adventure em 	 { font-style:italic; }
#JAG_Fullscreen_Wrapper  { width:100%; height:100%; }


/******************************************************************************/
/* II. MAIN GAME CONTAINER AND CHAPTERS
/******************************************************************************/
div.JAG_Adventure {
	width:1024px;	/* SETS BASE WIDTH */
	height:724px;   /* SETS BASE HEIGHT */
	font-size:100%; /* DO NOT CHANGE */	
	margin:0 auto;  /* CENTER GAME DURING RESIZE */
	overflow:hidden; 
	position:relative; 
	cursor:none; }	 

/* THE CUTSCENE CLASS IS ADDED TO CUTSCENES - MAKING ALL CHAPTER AND 
   SCENE ELEMENTS GROW FROM 64% > 100% HEIGHT */
ul.JAG_Chapter {
	width:100%; 
	height:100%;
	position:relative; 
	list-style-type:none; 
	overflow:hidden; 
	display:none; } 

ul.JAG_CutScene { height:100%; }

/* VERTICALLY CENTER VIDEOS */
.JAG_Video_Wrapper {
	width:100%;
	height:100%;
	position:absolute;
	z-index:2; }

.JAG_Video_Wrapper video { 
	width:100%;
	position:relative;
	top:50%;
	transform:translateY(-50%);	}
	

  
/******************************************************************************/
/* III. CHARACTER DIALOGUE
/******************************************************************************/
#JAG_dialogue { 
	width:100%; 
	height:30%; 
	position:absolute; 
	bottom:0;
	left:0;
	z-index:99993; 
	display:none;
	opacity:0; }

.JAG_Char_Dialogue {
	max-width:50%!important; /* DO NOT CHANGE MAX-WIDTH */
	opacity:0;
	display:none; 
	text-align:center; 
	position:absolute; 
	z-index:99993; }
    

/******************************************************************************/
/* IV. SUBTITLES AND CREDITS
/******************************************************************************/
.JAG_Subtitle {
	text-align:center;
	width:100%;
	position:absolute; 
	z-index:99993; 
	opacity:1; 
	pointer-events:none; }

.JAG_Credits {
	position:absolute; 
	z-index:99993; 
	pointer-events:none; }
	
.JAG_Credits ul li {
	display:inline-block; 
	text-align:center; 
	opacity:inherit; }