html, body {
	margin:0;
	padding:0;
	
	background-color:#F0F2F4;
	
	font-family:sans-serif;
	color:#000000;
}

/*
Hyperlink-style text
*/
a {
	color:#731444;
	font-style:italic;
	text-decoration:none;
}

#slideshow {
	position:absolute;
	
	width:798px;
	height:451px;
	
	overflow:hidden;
	
	background-image:url('background.png');
	background-repeat:no-repeat;
	background-position:top right;
	
	background-color:#F0F2F4;
	
	/*cursor:default;*/
}
#slideshow > div {
	position:absolute;
	width:100%;
	height:100%;
}

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

.header {
	position:absolute; /* use position:fixed to keep still with sliding transition effect */
	top:0px;
	height:176px;
}

/* title block is positioned at the bottom of its parent, which should be .header */
.title {
	position:absolute;
	
	bottom:12px;
	width:385px; /* the ideal width would leave more space on the right */
	left:36px; /* matches padding of .content and .content ul: 16 + 20 */
	
	font-size:20px; /* applies to all lines except first */
	font-weight:normal;
	
	letter-spacing:-1px;
	
	color:#ffffff;
	
	padding:0px;
	margin:0px;
}
.title:first-line {
	font-size:28px;
}

/*
Typically an image. This is positioned at the top right of a slide.
Icons should be 215x156 pixels tall, though some can overflow with a height
of 215px. The actual content should be 128x128px. (The rest is padding).
*/
.icon {
	position:absolute; /* use position:fixed to keep still with sliding transition effect */
	
	top:20px;
	left:549px;
	width:215px;
	height:auto;
	
	z-index:11;
	border:0px;
}
.icon#firefox {
	top:47px;
	left:590px;
	width:128px;
	height:auto;
}

/*
.content expects to be contained in here. .main
creates a nice, plain surface upon which it can
appear, spaced appropriately from .title.
*/
.main {
	position:absolute;
	
	top:163px;
	left:0px;
	
	width:100%;
	height:288px;
	
	padding-right:60px;
	
	z-index:12;
}

/*
Slide's body text goes inside here.
*/
.content {
	padding:16px;
	padding-top:32px;
	
	font-size:14px;
	color:#484848;
}

.content ul {
	margin-top:0px;
	padding-left:20px;
	
	width:726px; /* was 650px */
	height:223px;

	line-height:1.4em;
	
	overflow:auto;
	
	list-style-type:none;
	list-style-image:url("bullet-point.png");
}

.content li {
	padding:8px;
	padding-left:0px;
}
/* hack to get the text wrapping around the icon. If we could do this for
ul :first-line, there would be less room for failure. */
.content.wrap-top li:first-child {
	width:550px;
}

.content .footer {
	position:relative;
	width:100%;
	padding:0px;
	margin:0px;
	bottom:10px;
	text-align:right;
	
	font-weight:bold;
	color:#333333;
}

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

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



/* RTL stuff */
.rtl {
	direction:rtl;
}
.rtl #container {
	background-image:url('background.rtl.png');
	background-repeat:no-repeat;
	background-position:top left;
}
/* TODO: NEED reversed title and icon for RTL */
.rtl .title {
	left:377px;
}
.rtl .icon {
	/* FIXME: This is a horrible hack to keep the title from moving during slide transition */
	position:fixed; /* was position:absolute */
	
	left:34px;
}
.rtl .icon#firefox {
	left:80px;
}
.rtl .main {
	right:0px;
	padding-right:0px;
	padding-left:60px;
}
.rtl .content .footer {
    text-align:left;
}
