/*	———————————————————————————————————————————————————————————————————	
 	Verba Africana
	——————————————————————————————————————————————————————————————————— 
	graphics, XHTML, CSS © 2006-2007 vormdicht grafische diensten
	(e) mark@vormdicht.nl (Mark Dingemanse)
	(i) http://www.vormdicht.eu/
	———————————————————————————————————————————————————————————————————	
	reset: 															 */

body,h1,h2,h3,h4,h5,h6,p,form,img,fieldset,dl,dt,dd,ul,ol,li { margin:0;padding:0; } a img, fieldset { border:none; } 


/* 	———————————————————————————————————————————————————————————————————
	stuff that occurs on every page
———————————————————————————————————————————————————————————————————— */

body {
	font-size:62.5%;
	line-height:1.8em;
	background:#74a52f url(images/bg-top.png) repeat-x top center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#wrap {
	width:800px;
	position:relative;
	margin:0 auto;
}
#logo {
	width:220px;
	height:155px;
	text-align:center; /* because IE doesn't understand margin:0 auto; */
}
	#logo a {
	display:block;
	border:none;
	}
	#logo img.logo-print {
	display:none;
	}
	#logo img {
	margin:0 auto;

	}
#sidebar {
	position:relative;
	left:16px;
	width:188px;
	overflow:visible;
}
#content {
	width:444px; 
	padding:50px;
	position:absolute;
	top:38px;
	left:233px;
	overflow:hidden;
	background-image:url(images/bg-content.png);
	background-repeat:repeat-y;
	background-position:top center;
}


/* 	navigation
	———————————————————————————————————————————— */
div.menu {
	width:188px;
	padding:16px 0 0 0;	
	text-align:center;
}
.menu h2 {
	color:#db2646;
	background:#f7cf36 url(images/bg-menu-h2.png) no-repeat top center;
	font-size:1.2em;
	font-weight:bold;
	line-height:1.5em;
	margin:0;
	padding:5px 0;
	}
ul.menu {
	background:#f7cf36 url(images/bg-menu-bottom.png) no-repeat bottom center;
}
.menu ul li a:link, .menu ul li a:visited {
	border-bottom:none;
}
.menu ul {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	list-style:none;
	background-color:#fff6e7;
	padding:12px 10px;
}
.menu ul li ul {
	padding:6px 0;
	margin-top:3px;
	}
.menu li {
	display:block;
	font-size:11px;
	margin:0 0 6px 0;
	min-height:20px;
	height:1%; /* fixes a rendering problem in IE6 on hover */
	overflow:visible;
	padding:0 3px 0 3px;
	line-height:15px;
}
.menu li.page {
	background-color:#f7ebd7;
	padding:3px 3px 0 3px;
}
.menu li.parent {
	font-style:italic;
	padding-bottom:3px;
}
.menu li.subpage {
	background-color:#fff6e7;
	font-style:normal;
	margin:4px 0 0 0;
}
.menu li.current {
	font-weight:bold;
}
.menu li.current li {
	font-weight:normal;
}

/* 	———————————————————————————————————————————————————————————————————
	typography [abc]
———————————————————————————————————————————————————————————————————— */

a {
	color:#381d1d;
	text-decoration:none;
}
	a.external {
	padding-right:10px;
	background-image:url(images/p-link.png);
	background-position:right;
	background-repeat:no-repeat;
	}
a:link, a:visited {
	border-bottom:1px solid #b4a49a;
}
a:hover, a:active {
	color:#db2646;
	border-bottom:1px solid #db2646;
}
blockquote {
	margin:-0.8em 0.8em 0.8em 0.8em;
	padding:1em;
	font-size:1.1em;
	display:block;
	position:relative;
	border-right:1px solid #f7ebd7;
	border-bottom:1px solid #f7ebd7;
	background:transparent url(images/bg-content.png) repeat-y 95% 0;
}
	blockquote p {
	font-size:100%;
	margin:0 0 0 0;
	padding:0;
	text-indent:0;
	}
cite {
	font-style:normal;
}
	cite.work {
	font-size:1.1em;
	display:block;
	position:relative;
	left:1.8em;
	text-indent:-1.8em;
	margin:0 1.8em 0 0;
	}
	cite.work .ref-title {
	font-style:italic;
	}

code {
	font-size:1.2em;
	font-family:"Courier New", Courier, monospace;
	background-color:#efefef;
	padding:0 2px;
}

dl {
	margin:1.8em 0;
}
dt.ewe {
	font-size:1.3em;
}
	.metadata dt {
	font-weight:bold;
	}
	dl.concepts dt {
	font-weight:bold;
	font-size:1.1em;
	margin-bottom:0.6em;
	}

dd {

	margin-left:2em;
}
	.translatedtext dd {
	font-size:1.2em;
	font-style:italic;
}	
h1 {
	font-size:2em;
	font-weight:bold;
	line-height:1.1em;
	letter-spacing:-0.1em;
	color:#7d4833;
	margin-bottom:1em;
}
h2 {
	font-size:1.4em;
	font-weight:bold;
	margin-top:1.2em;
	margin-bottom:0.4em;
	color:#7d4833;
}
h3 {
	font-size:1.1em;
	margin-top:1.2em;
}
p {
	font-size:1.1em;
	margin-bottom:1.8em;
	text-indent:1.8em;
	text-align: justify;

}
q:before, q:after {
  content: ""; 
  /* see technical-notes.htm */
}
#content ul, #content ol {
	list-style-position:outside;
	margin-bottom:1.8em;
}
#content ul {
	margin-left:1.2em;

}
#content ol {
	margin-left:1.8em;
}
ul ol, ol ul {
	margin-left:1em;
}
li p {
	text-indent:0;
}

ul li, ol li {
	font-size:1.1em;
}
ul li ul li, ol li ol li, ol li ul li, ul li ol li, li p {
	font-size:100%;
	list-style-type:disc;
}

/* 	specific classes (text)
	———————————————————————————————————————————— */

.author {
	display:block;
	text-align:right;
	margin-bottom:1em;
}
.caption {
	text-align:center;
}
.ewe {
	font-family:"Lucida Sans Unicode", "Arial Unicode MS", "Doulos SIL", "Lucida Grande", "Microsoft Sans Serif", Arial, Helvetica, sans-serif;
		/* Let's make sure Ewe text displays 
		alright on most if not all systems */
}
	p.ewe, p .ewe, p.swh, p .swh, .footnote .swh, blockquote .swh {
		font-style:italic;
		/* Ewe and Swahili spans occuring within paragraphs
		should be italicized as 'foreign terms' */
	}
	.swh a {
		font-style:normal;
	}
	p .name {
		font-style:normal;
		/* Names shouldn't be italicized, though */
	}
.footnoteref {
	font-size:0.7em;
	text-decoration:none;
	margin:0 2px;
	position:relative;
	top:-3px;
	border-bottom:none !important;
}
.footnote {
	position:relative;
	color:#000;
	margin:0 0 0.4em 1.8em;
	text-indent:0;
}
	.footnote * {
		color:#000;
	}
	.footnote a, .footnote a:link, .footnote a:hover {
		position:absolute;
		left:-2.8em;
		display:block;
		font-size:0.7em;
		border-bottom:none;
		clear:none;
	}
	.footnote blockquote {
		margin-bottom:0.4em;
		font-size:100%;
	}
	.footnote cite.work {
		font-size:100%;
		display:block;
		position:inherit;
		left:0;
		text-indent:0;
		margin:0 0 0 0;
	}
	.footnote p {
		font-size:100%;
		text-indent:0;
		margin:0 0 0 0;
	}

.metadata {
	font-size:1.1em;
	color:#7d4833;
}
.subtitle {
	position:relative;
	top:-20px;
	left:1.5em;
	font-size:1.4em;
	font-style:italic;
	color:#7d4833;
}
.technicalnote {
	display:block;
	padding-left:1.2em;
	border-left:3px solid #f7ebd7;
	font-size:1em;
	margin-bottom:1em;
}
.warning {
	display:block;
	font-size:1.3em;
	color:#db2646;
	font-style:normal;
	font-weight:bold;
	margin:5px 0;
	padding:5px 8px;
	border-left:4px solid #db2646;
}

/* 	specific classes (images)
	———————————————————————————————————————————— */

.image {
	background-color:#fff6e7;
	margin-bottom:1em;
	clear:right;
}
.photo {
	width:200px;
	float:right;
	margin-top:0.4em;
	margin-left:2em;
	border-top:1px solid #f7ebd7;
	border-left:1px solid #f7ebd7;
	border-right:1px solid #7d4833;
	border-bottom:1px solid #7d4833;
}
.photo img {
	width:200px;
}
.caption {
	display:block;
	padding:0.2em 0.5em 0.5em 0.5em;
	text-align:center;
	font-size:110%;
	line-height:1.2em;
	color:#7d4833;
}



/* 	———————————————————————————————————————————————————————————————————
	more specific stuff, ordered by page type and page, in that order
———————————————————————————————————————————————————————————————————— */

/* 	intro
	———————————————————————————————————————————— */
body.intro #wrap {
	width:800px;
	padding:0;
	margin:38px auto 0 auto;
}
#generalinfo {
	float:left;
	position:relative;
	top:45px;
	width:200px;
	height:430px;
	padding:20px;
	margin:0 -1px 0 0;
	font-size:0.9em;
	background:#74a52f url(images/bg-generalinfo.png) repeat-y right top;
	color:black;
	text-align:right;
}
#generalinfo h1 {
	color:black;
	margin-bottom:4px;
	font-size:14px;
}
#generalinfo h2 {
	color:black;
	font-size:11px;
	font-weight:normal;
}
#generalinfo dl.credits {
	margin:120px 0 0 0;
}
#generalinfo dl.credits dd {
	margin:0;
}

#intro {
	width:444px; 
	padding:50px;
	margin:0;
	background-image:url(images/bg-content.png);
	background-repeat:repeat-y;
	background-position:left top;
	text-align:center;
	overflow:hidden;
}
#intro .digitalmaterials {
	text-align:center;
	position:relative;
	top:-25px;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:0.15em;
}
#intro a {
	border-bottom:none;
}
#intro img {
	margin:0 auto 20px auto;
}
#intro h1 {
	text-align:center;
	width:400px;
	display:block;
	margin:0 auto 1.2em auto;
}
#intro dl {
	font-size:1.1em;
	clear:both;
	margin-bottom:1.8em;
}
#intro dl * {
	margin:0 5px;
	display:block;
	width:210px;
}
#intro dt {
	font-weight:bold;
	float:left;
	text-align:right;
}
#intro dd {
	float:left;
	text-align:left;
}
#intro p {
	clear:both;
	padding-top:1em;
}
a#enterlink {
	display:block;
	width:200px;
	background:#fff url(images/bg-enterlink.png) no-repeat top center;
	color:#fff;
	font-weight:bold;
	font-size:1.0em;
	text-transform:uppercase;
	margin:0 auto;
}
a#enterlink:hover {
	position:relative;
	top:1px;
	left:1px;
}

/* 	main menu
	———————————————————————————————————————————— */
#main-menu {
	width:394px;
	position:absolute;
	left:400px;
	top:30px;
}

h1#volumetitle {
	z-index:999;
	margin:18px 0 10px -4px;

	display:block;
	width:163px;
	padding:6px 12px 0 20px;
	background:#74a52f url(images/bg-top.png) repeat-x top left;	

	text-align:right;
	color:#fff6e7;
}

#main-menu .main {
	padding:0 0 14px 0;
	clear:none;
}
#main-menu #ewe-tales {
	float:left;
}
#main-menu #ewe-info {
	float:right;
}

#main-menu #background-info {
	width:394px;
}
#main-menu #background-info h2 {
	background-image:url(images/bg-menuwide-h2.png);
	}
#main-menu #background-info ul.menu {
	background-image:url(images/bg-menuwide-bottom.png);
}
#main-pictures {
	position:absolute;
	width:158px;
	top:50px;
	left:228px;
	height: 152px;
}
#main-pictures img {
	display:block;
	clear:both;
	margin-bottom:30px;
	border:1px solid #7d4833;
}

/* 	acknowledgements
	———————————————————————————————————————————— */
dl.credits {
	font-size:1.1em;
	margin-left:1.8em;
}
dl.credits dt {
	font-weight:bold;
}

/* 	texts and translations
	———————————————————————————————————————————— */

dl.translatedtext cite {
	display:block;
	position:relative;
	float:left;
	left:-2em;
	width:1.5em;
	margin-right:-1.5em;
	font-style:normal;
	font-size:0.8em;
	text-transform:uppercase;
	color:#74a52f;
}
.note {
	color:#74a52f;
}
dt.note {
	visibility:hidden;
}
dd.note {
	margin-bottom:1.8em;
}

dl.lyrics dt, dl.lyrics dd {
	display:block;
	clear:both;
	font-size:1.1em;
}
dl.lyrics dt {
	font-style:italic;
}
dl.lyrics dd {
	display:block;
	width:100%;
	color:#897267;
	font-style:normal;
}
dl.lyrics dd .swh {
	font-style:italic;
}

/* 	text-analysis
	———————————————————————————————————————————— */
table.text-analysis th {
	border-bottom:1px solid #b4a49a;
}
table.text-analysis td {
	vertical-align:top;
}

td.analysis {
	width:220px;
	padding:20px 0 0 15px;
}

/* 	storytellers
	———————————————————————————————————————————— */

/*	interviews
	———————————————————————————————————————————— */

object {
	width:444px;
	height:354px;
	margin-bottom:2em;
}