html 
{ 
	width: 100%;
	overflow-x: hidden;
	font-size: 62.5%; /* important for scaling fonts */
	
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;

    -webkit-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
    
    cursor: pointer;
}  

body
{
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	max-width: 100%;
	height: 100%;
	font-size: 1rem;
}


.page-content
{
	/*	
	*	If we don't set the width and height with the !important qualifier, the hidden
	*   page don't have the right size and the placing of slides is not correct.
	*/
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	margin: auto;
	left: 0; top: 0; right: 0; bottom: 0;
	border: 0px black solid;
}

/* Style for DIV that contains a video tag */
.page-content > div[data-mimetype^="video"]
{
	position: absolute;
	width: 50%;
	height: 50%;
	z-index: 1000;
}

/* Style for DIV that contain other media. */
.page-content > div,
.page-content-thumbnail > div
{
	position: absolute;
	width: 30%;
	height: 30%;
	z-index: 1000;
}

.page-content > div > img,
.page-content-thumbnail > div > img
{
    position: absolute;
    margin: auto;
    left: 0; right: 0; top: 0; bottom: 0;
	width: auto;
	height: 100%;
}

/* Text-only slides */
.page-content > div[data-mimetype="text/plain"],
.page-content-thumbnail > div[data-mimetype="text/plain"]
{
	display: table;
	position: absolute;
	width: 30%;
	height: 20%;
	z-index: 1000;
}

.page-content > div[data-mimetype="text/plain"] > div:first-child,
.page-content-thumbnail > div[data-mimetype="text/plain"] > div:first-child
{
    display: table-cell;
    position: relative;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}

#PicFlipContainer
{    
	border-radius: 3px;
  	border: 0px red solid;
    position: absolute;
    margin: auto;
  	top: 25vh; left: 3%; right: 3%;
    width: 90vw;
    height: 30vw;
    font-size: 2.5rem;
}

#PicFlip
{
	position: absolute;
	margin: auto;
	left: 0; top: 0; right: 0; bottom: 0;
	width:100%;
	height:100%;
  	/*-webkit-touch-callout: none;*/
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#PicFlip .cover
{
}

#PicFlip .page
{
	position: absolute;
    width: 45vw;
    height: 30vw;
    background: yellow;
}


#PicFlip .own-size
{
	position: absolute;
    width: 44vw;
    height: 29vw;
	overflow:hidden;
}

#PicFlip .page-wrapper
{
	overflow: visible !important;
	position: absolute;
	width: 100%;
	height: 100%;
    -webkit-perspective:2000px;
    -moz-perspective:2000px;
    -ms-perspective:2000px;
    -o-perspective:2000px;
    perspective:2000px;
}

.hard
{
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}

.frontpagetext, .backpagetext
{
	position: relative;
	margin: auto;
	top: 20%; left: 0; right: 0; bottom: 20%;
	width: 60%;
	height: 60%;	

	color: white;
	font-family: 'Arizonia' !important;
	font-style: normal;
	font-weight: 300;
	text-shadow: -1px 1px 2px #000;
	display: table;
}

.frontpagetext > div
{
	border: 2px silver solid;
	padding: 3%;
	position: relative;
	text-align: center;
	font-size: 3vw; 
	display: table-cell;
	vertical-align: middle;
}

.backpagetext > div
{
	border: 0px silver solid;
	padding: 1%;
	position: relative;
	text-align: center;
	font-size: 3vw; 
	display: table-cell;
	vertical-align: middle;
}

.hard.even
{
	border-radius: 2% 0 0 2%;
	background: rgb(215,25,0); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(215,25,0,1) 0%, rgba(255,25,0,1) 97%, rgba(225,25,0,1) 98%, rgba(255,25,0,1) 99%) !important; /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(215,25,0,1)), color-stop(97%,rgba(255,25,0,1)), color-stop(98%,rgba(225,25,0,1)), color-stop(99%,rgba(255,25,0,1))) !important; /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(215,25,0,1) 0%,rgba(255,25,0,1) 97%,rgba(225,25,0,1) 98%,rgba(255,25,0,1) 99%) !important; /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(215,25,0,1) 0%,rgba(255,25,0,1) 97%,rgba(225,25,0,1) 98%,rgba(255,25,0,1) 99%) !important; /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(215,25,0,1) 0%,rgba(255,25,0,1) 97%,rgba(225,25,0,1) 98%,rgba(255,25,0,1) 99%) !important; /* IE10+ */
	background: linear-gradient(to right,  rgba(215,25,0,1) 0%,rgba(255,25,0,1) 97%,rgba(225,25,0,1) 98%,rgba(255,25,0,1) 99%) !important; /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d71900', endColorstr='#ff1900',GradientType=1 ) !important; /* IE6-9 */
}

.hard.odd
{
	border-radius: 0 2% 2% 0;
	background: rgb(255,25,0); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(255,25,0,1) 1%, rgba(225,25,0,1) 2%, rgba(255,25,0,1) 3%, rgba(215,25,0,1) 100%) !important; /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(255,25,0,1)), color-stop(2%,rgba(225,25,0,1)), color-stop(3%,rgba(255,25,0,1)), color-stop(100%,rgba(215,25,0,1))) !important;  /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(255,25,0,1) 1%,rgba(225,25,0,1) 2%,rgba(255,25,0,1) 3%,rgba(215,25,0,1) 100%) !important;  /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(255,25,0,1) 1%,rgba(225,25,0,1) 2%,rgba(255,25,0,1) 3%,rgba(215,25,0,1) 100%) !important;  /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(255,25,0,1) 1%,rgba(225,25,0,1) 2%,rgba(255,25,0,1) 3%,rgba(215,25,0,1) 100%) !important;  /* IE10+ */
	background: linear-gradient(to right,  rgba(255,25,0,1) 1%,rgba(225,25,0,1) 2%,rgba(255,25,0,1) 3%,rgba(215,25,0,1) 100%) !important;  /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1900', endColorstr='#d71900',GradientType=1 )!important; /* IE6-9 */
}


#PicFlip .odd
{
  	-webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    
}

#PicFlip .even
{
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
}

.selected
{
	border: 0px red solid !important;
}

.activated
{
	box-shadow: 0 0 50px silver;
}

.overlapped
{
	box-shadow: 0 0 50px gold !important;
}

.dragging
{
	max-width: 30%;
	max-height: 30%;
}

#ShareTab
{
}

#ShareForm
{
	position: relative;
	height: 100%;
   	width: 100%;
  	background: beige;
  	border-radius: 10px;
  	border: 1px beige solid;
}

#ShareForm fieldset
{
	position: absolute;
	margin: auto;
	left: 0; top: 0; right: 0; bottom: 0;
  	height: 90%;
   	width: 95%;
   	border: 0px blue solid;
}

#ShareForm fieldset label
{
	position: relative;
	text-align: right;
	float: left;
	width: 25%;
}

#ShareForm fieldset input[type=text]
{
	position: relative;
	text-align: left;
	float: left;
	width: 60%;
}

#ShareForm fieldset button
{
	position: absolute;
	bottom: 1%;
	right: 1%;
}

#ShareForm fieldset textarea
{
	position: absolute;
	text-align: left;
	float: left;
	width: 60%;
	height: 60%;
	resize: none;
}

#ShowList, #ShareList
{
	direction:rtl;
	margin: 4px 0 0 0; 
	padding: 4px;	
	width: 100%;     
  	height: 90%;
  	overflow-y: auto;
  	overflow-x: hidden;
  	background: beige;
  	border-radius: 10px;
  	border: 1px beige solid;
}

#ShowList > div, #ShareList > div
{ 
	direction:ltr;
	width: 100%; 
	height: 25%;
	max-height: 60px;
	
	padding: 0;
	margin: 2px 0 0 0;
	
	color: white;
	background-color: #428bca;
	text-align: center;

	border-radius: 5px;
}

#ShowList > div div, #ShareList > div div
{
	position: relative;
	top: 25%;
	width: 90%;
	font-size: 130%;
	line-height: 130%;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	
	border: 0px black solid;
}

#ShowList > div:hover, #ShareList > div:hover
{ 
	border: 1px red solid;
}

/*Eliminate the default behavior of contenteditable=true*/
[contenteditable="true"]:active/*,
[contenteditable="true"]:hover,
[contenteditable="true"]:focus*/
{
	box-shadow: 0 0 5px silver;
	border:none;
	outline:none;
}


#TrashCan 
{
	position: absolute;
    bottom: 3%; left: 46%;
    width: 8%;
    height: 8%;
    text-align: center;
    border: 0px black solid;
}


#TrashCan img
{
	position: relative;
    top: 0; bottom: 0; left: 0; right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}