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

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

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

.control-arrow {
        display:block;
        position:absolute;

        z-index:100;
        top:218px;
        height:64px;
        width:33px;

        background-repeat:no-repeat;
        cursor:pointer;
}
.control-arrow:hover {
        background-position: 0px -65px;
}
.control-arrow:active {
        background-position: 0px -130px;
}
.control-arrow#prev-slide {
        background-image:url('arrow-back.png');
        left:0px;
}
.control-arrow#next-slide {
        background-image:url('arrow-next.png');
        left:765px; /* 752px - 33px */
}


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

/* fixed container to align title */
.header {
	position:absolute;
	top:-15px;
	height:225px;
}

/* title block is positioned at the bottom of its parent, which should be .header */
.title {
	position:absolute;
	
	bottom:12px;
	width:510px; /* 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:-2px;
	
	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 and is given a size of 64x64 pixels.
*/
.icon {
	position:absolute;
	
	width:auto;
	height:auto;
	
	top:40px;
	left:577px;
	
	z-index:11;
	border:0px;
}
/*.icon.exact {
	top:69px;
	left:549px;
	width:215px;
	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:180px;
	left:0px;
	
	width:100%;
	height:180px;
	
	padding-right:60px;
	
	z-index:12;
}

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

.content ul {
	margin-top:0px;
	padding-left:60px;
	
	width:650px;
	height:223px;
	
	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:#c3c3c3;
}

.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;
}

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



/* RTL stuff */
.rtl {
	direction:rtl;
}
/* TODO: NEED reversed title and icon for RTL */
/*.rtl .title {
	right:10px;
}*/
/*.rtl .icon {
	left:10px;
	right:auto;
}*/
.rtl .main {
	right:0px;
	padding-right:0px;
	padding-left:60px;
}
.rtl .content .footer {
    text-align:left;
}
