html, body
{
	margin:0;
	padding:0;

	background-color:#FFFFFF;

	font-family:sans-serif;
	color:#000000;

	background-image:url('background.jpg');
	background-size: 100% auto;
}

/*
Hyperlink-style text
*/
a
{
	color:blue;
	font-style:italic;
}

#container
{
	position:absolute;

	width:800px;
	height:412px;

	border: 1px solid black;

	overflow:hidden;
}

#debug-controls
{
	display:none;
	position:absolute;
	top: 440px;
	width:700px;
	text-align:center;
}

#debug-controls input
{
	width:40px;
}

#debug-controls input#current-slide
{
	width:600px;
}

/*
Title block is positioned at the top of a slide.
*/
.title
{
    color:#000000;

	position:absolute;
	top:15px;
	left:10px;

	font-size:20px;
	font-weight:bold;

	padding:0;
	margin:0;
}

/*
Typically an image. This is positioned at the bottom right of a slide.
*/
.icon
{
	position:absolute;

	width:auto;
	height:auto;

	bottom:14px;
	right:12px;

	z-index:11;
	border:0px;
}

/*
#content expects to be contained in here. #main
creates a nice, plain surface upon which it can
appear :)
*/
.main
{
	position:absolute;

	top:50px;
	left:0px;

    padding-right:60px;

	font-size:14px;

	z-index:12;
}

/*
Slide's body text goes here. It appears right below
the title, at the top of the white area with heavy
margins around it.
*/
.main .content
{
	padding-left:16px;
	padding-right:16px;

	width:490px;
}

.content ul
{
	margin-top:0px;
	padding-left:1.8em;
	list-style-image:url("bullet-point.png");
}

.content li
{
	padding:0.6em;
}

.content .special
{
	margin-top:1.4em;
	margin-bottom:1em;

	font-weight:bold;
}

.content img.inline
{
	height:14px;
	width:auto;
}

/*
The menu-item style is a descriptive aid for pointing the end user at,
for example, a place in either the system menu or an application menu.
This way we can provide clear visual cues with minimal babbling.
*/
.menu-item
{
	display:inline-block;

	border-radius:3px;
	-webkit-border-radius:3px;
	/*-moz-border-radius:3px;*/

	height:16px;
	padding:1px;

	padding-left:3px;
	padding-right:3px;

	border-style:solid;
	border-width:1px;
	border-color:#a89a8d;

	background-color:#f7f5f3;
}

/*
This rule applies to an img of class menu-arrow. It appears as a nice
looking arrow that can separate items in a menu much like how submenus
look in Ubuntu's GTK theme.
*/
.menu-item img.menu-arrow
{
	display:inline-block;
	content:url('menu-arrow.png');

	padding-left:2px;
	padding-right:5px;
}
