html, body
{
	margin:0;
	padding:0;
	font-family: ubuntu;
	/* FIXME: should be transparent, but this should do for now */
	background-color: #DFDFE0;
	color:#000000;
}

/*
Hyperlink-style text
*/
a
{
	color: #0088aa;
}

#slideshow
{
	position:absolute;
	
	width: 100%;
	height: 100%;
	
	overflow:hidden;
}
#slideshow > div {
	position:absolute;
	width:100%;
	height:100%;
}

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

/*
Title block is positioned at the top of a slide.
*/
.title
{
	position:absolute;
	top:15px;
	left:10px;

	font-size:20px;
	font-weight:bold;
	color: #0f262f;
	border-bottom: 1px solid #5b8595;
	width: 100%;

	padding:0;
	margin:0;
}

/*
Typically an image. This is positioned at the top
right of a slide and is given a size of 64x64 pixels.
*/
.icon
{
	position:absolute;
	
	width:auto;
	height:auto;
	
	bottom:0px;
	right:10px;
	
	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;
}

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

.content li
{
	padding:0.6em;
}

.content .special
{
	position:absolute;
	top:290px;
	left:50px;
	
	font-weight:bold;
}

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

/*
This rule disables drag-and-drop for images.  See bug #448703.
*/
img
{
 	-webkit-user-drag: none;
}



/* RTL stuff */
.rtl {
	direction:rtl;
}
.rtl .title {
	right:10px;
}
.rtl .icon {
	left:10px;
	right:auto;
}
.rtl .main {
	right:0px;
	padding-right:0px;
	padding-left:60px;
}
.rtl .content ul {
	list-style-image:url("bullet-point.rtl.png");
}
.rtl .content .special {
	right:50px;
	left:auto;
}
