/*

The whole StraighToThePoint software (Javascript, CSS, PHP and
utilities) is distrubuted under the following terms (BSD license):

Copyright (c) 2010-2011 Luigi Rizzo. All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions
are met:
1. Redistributions of source code must retain the above copyright
   notice, this list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright
   notice, this list of conditions and the following disclaimer in the
   documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
SUCH DAMAGE.

 */

/* XXX need to reorder entries so it is clear which ones to override */

/*
 * $Id: sttp.css 8577 2011-04-28 11:28:45Z luigi $
 * simple style for slidy-like presentations
 *
 * Change colors and styles in the initial part
 */

/*-----------------------------------------------------------------
 *           default attributes for slides and printing
 *	Change them here, but don't touch the second part of the CSS
 *
 * IE-specific definitions are preceded by '* html' which is not
 * recognised by Firefox and Chrome.
 */

* {				/* style in slide mode */
	color: #fff;	
}

/* use a transparent color for the statusbar and title.
 * For explorer we need the filter below as rgba() is not supported.
 * Note that the statusbar is on top to grab keyword events.
 * Also, the statusbar needs specific positioning as 'fixed' does
 * not work well on IE7
 */

h1, #st_status	{
	background: rgba(48,120,255, 0.5);
}

body {
	background: #11c;
}

* html h1, * html #st_status {
	/* trick to implement transparency in IE \alpha rgb */
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#903030ff,endColorstr=#903030ff);
       zoom: 1;
}

/*----- do not change things below this line -----*/
@media screen {
body {
	font-family: Arial, sans-serif;
	border: 0px; padding: 0px; margin: 0px;
	width: 100%;
	height: 100%;
	min-height: 100%;
	/* overflow:hidden; *//* use this to prevent scrollbars */
	/* use a background repeat-y to do vertical tiling */
}

} /* end media screen */

canvas {
	font-family: inherit;
	background: #fff;
	width: 40%;
	height: 40%;
}

.st_canvas {
	position: relative;
	float: none;
	left: 10%;
	width: 50%;
	height: 50%;
	background: white;
	border: 2px solid black;
}

/* textarea { display: none; } */


/*
 * The whole document is in two divs:
 * - the editor is in #st_editor which in turn contains the two
 *   textareas;
 *
 * - the slideshow is in a #st_bottom that contains
 *   #st_bg, #st_shadow, #st_slide #st_fg at decreasing depths
 *   so we can play with transparencies etc.
 *   All are absolute-positioned and fill the viewport.
 *   #st_slide1 is used with #st_slide for transitions
 *
 * XXX Cross-browser compatibility: IE-specific sections
 * are preceded by '* html' and not recognised by Firefox/Chrome.
 */

#st_xy, #st_bottom, #st_bg, #st_shadow, #st_slide, #st_fg, #st_slide1 {
	width: 100%; height: 100%; min-height: 100%;
	position: absolute; top: 0; left: 0;
}

#st_bottom	{ z-index: 2; }
#st_bg		{ z-index: 4; overflow: hidden; }
#st_shadow	{ z-index: 6; overflow: hidden; }
#st_fg		{ z-index: 8; overflow: hidden; } /* unused */
#st_status	{ z-index: 20; }

@media screen {

#st_slide, #st_slide1	{
	z-index: 8; overflow: auto;
	padding-left: 0px; line-height: 150%;
}

#st_status	{
	position: fixed; font-size: 60%; line-height: 130%;
	top: auto;
	width: 100%;
	margin: 0px; padding: 0px;
	bottom: 0; left: 0px;
}

* html #st_status {
	position: absolute !important; /* fixed does not work on IE7 */
}

} /* end media screen */

/* st_status items */
#st_mode, #st_user { margin: 0; border: 0px; padding: 0px;}
#st_user	{ color: black; font-size: 80%; }
#st_msg		{ float: right; }

/**** text presentation, for printing slides ****/
@media print {
.np	{ display: none; } /* do not print stuff tagged with np */
}
.st_print, .st_print *	{	/* style in print mode */
	background: #fff; color: #000;
}
.st_print h1	{ padding-left: 10px; }
.st_print	{	/* not clear how well this works */
	page-break-after: always;
	page-break-inside: avoid;
	height: 10cm;
	width: 16cm;
	border: solid 1px;
	border-collapse: collapse;
}

pre	{
	line-height: 100%;
}

textarea	{
	overflow-y: scroll;
	background: white;
	color: black;
}

.xsave	{ /* explorer, support for saving */
	behavior:url(#default#savesnapshot);
}

/**** styles normally used in the main slides ***/
h1	{
	font-size: 150%; line-height: 140%; margin: 0; padding-left: 1em;
}

#st_slide p, #st_slide1 p {
	margin-top: 0; margin-bottom: 0; margin-left: 10px;
}

ul, ol	 {
	margin-top: 0; margin-bottom: 0;
}

#st_toc, #st_toc *, #st_help, #st_data {
	background: white; color: black;
}

#st_toc, #st_help, #st_data {
	z-index: 20;
	margin: 0px; padding: 1em; font-size: 80%;
	position: absolute; top: 10%; left: 10%;
}

/* support for tables */
tr, td		{ vertical-align: top; }
.st_table, .st_table tr, .st_table tr td {
	border-collapse: collapse; border: solid 1px;
}

.c		{ text-align: center; }
.r		{ text-align: right; }
.l		{ text-align: left; }

/* list styles */
li.u		{ list-style: none; }
li.n		{ list-style: decimal; }

/*
 * Other styles that you may want to apply to images and spans.
 * Feel free to customize them, either here or in the document.
 */
/* background image, typically in #background */
.bg	{
	width: 100%; /* explorer needs this */
	min-width: 100%; min-height: 100%;
}

/* background positioning top/bottom, left/right */
.tr, .tl, .br, .bl { position: absolute; }
.tr, .tl { top: 0; }
.br, .bl { bottom: 1em; /* above the status bar */ }
.tr, .br { right: 0.5em; }
.tl, .bl { left: 0.5em; }
/* float images */
.fr, img.fl	{ /* max-width: 40%; max-height: 40%; */ margin: 1px;}
.fl		{ float: left; }
.fr		{ float: right; }

/* make bullet lists a bit more compact */
/* li	{ margin-left: -1.8em; } */

/* sizes (for images, mostly) */
.w25	{ width: 25%; }
.w50	{ width: 50%; }
.w80	{ width: 80%; }
.h10	{ height: 10%; }
.h20	{ height: 20%; }
.h30	{ height: 30%; }
.h50	{ height: 50%; }
.sz10	{ max-width: 10%; max-height: 10%; }
.sz20	{ max-width: 20%; max-height: 20%; }
.sz40	{ max-width: 40%; max-height: 40%; }
.sz50	{ max-width: 50%; max-height: 50%; }
.sz80	{ max-width: 80%; max-height: 80%; }
/* span styles */
span.b	{ font-weight: bold; }
span.i	{ font-style: italic; }
span.tt	{ font-family: courier; }
span.large	{ font-size: 120%; }
span.small	{ font-size: 80%; }
span.author {
	margin: 2em 1em 0 0; display: block;
	color: #88ff77; font-style: italic;
	text-align: right; font-size: 120%;
}