html, body { height: 100%; }

body {
  margin: 0; padding: 0;
  background: #E7E7D6 url(shadow.gif) center top repeat-y;
  text-align: center;
  }
	
#bar {
  background: url(barbg.jpg) center 0 no-repeat; 
  margin: 0 auto; height: 27px; padding: 0;
  }
  
#container {
  background: #FFFFFF; position: relative;
  margin: 0 auto; height: 100%; padding: 0; width: 744px;
  text-align: left;
  }

html>body #container { 	height: auto;	min-height: 100%; }


/* Misc classes */

.cheat { padding-top: 2px; }
.flush { margin-top: 0; padding-top: 0; }
.clear { clear: both; padding-top: 20px; }
.floatright { float: right; padding: 0 0 6px 2px; }
.moretop { margin-top: 20px; }
.flushtop { margin-top: 0; }
.flushbottom { margin-bottom: 0; }

div.shaded { background-color: #F0F0DF; padding: 10px; }

div.database {
	height: 32px; margin: 6px 0 0 0; 
	background: url(database.gif) no-repeat;
}
div.subscribe {
	height: 32px; margin: 6px 0 0 0;
	background: url(subscribe.gif) no-repeat;
}
div.send {
	height: 32px; margin: 6px 0 0 0; 
	background: url(send.gif) no-repeat;
}
div.fullcontents {
	height: 32px; margin: 6px 0 0 0;  width: 200px;
	background: url(contents.gif) no-repeat;
}
div.fullcontents a { display: block; padding: 7px 0 0 8px; height: 25px; }


div.database a, div.subscribe a, div.send a { display: block; padding: 7px 0 0 50px; height: 25px; }

div.hr { clear: both; height: 16px; margin: 0 3px 20px 0; border-bottom: 2px solid #E7E7D6; }



/* Page body */

#main { position: relative; margin-top: 20px; width: 744px; }
#left { width: 340px; }
#right { position: absolute; top: 0; left: 372px; width: 372px; }

#sub { width: 246px; margin-bottom: 30px; float: right; padding-right: 2px; }
#content { width: 463px;  padding-right: 30px; float: left; padding-bottom: 30px; }

#sidephoto { margin-bottom: 20px; }



/* ---- Bar, header, menu etc ------------- */

#bar ul { margin: 0 auto; width: 480px; padding: 0; list-style-type: none; }
#bar ul li { margin: 0; padding: 0; height: 27px; float: left; }
#bar ul li a { display: block; height: 100%; width: 100%; text-indent: -9999px; text-decoration: none; }
#bar01 { width: 65px; background: url(bar.jpg) 0 0 no-repeat; }
#bar02 { width: 134px; background: url(bar.jpg) -65px 0 no-repeat; }
#bar03 { width: 172px; background: url(bar.jpg) -199px 0 no-repeat; }
#bar04 { width: 72px; background: url(bar.jpg) -371px 0 no-repeat; }
#bar01 a:hover, #bar01 a.selected { background: url(bar.jpg) 0 -27px no-repeat; }
#bar02 a:hover, #bar02 a.selected { background: url(bar.jpg) -65px -27px no-repeat; }
#bar03 a:hover, #bar03 a.selected { background: url(bar.jpg) -199px -27px no-repeat; }
#bar04 a:hover, #bar04 a.selected { background: url(bar.jpg) -371px -27px no-repeat; }


#header { position: relative; width: 744px; padding-top: 24px; }


/* Top buttons  */

#top { position: absolute; top: 12px; right: 2px; padding-top: 4px; width: 308px; }

#top a:link, #top a:visited, #top label { text-decoration: none; color: #666666; font-weight: bold; }
#top a:hover, #top a:active { text-decoration: none; color: #222222; font-weight: bold; }

#top span { display: block;	float: left; padding: 2px 0 4px 40px; margin-bottom: 5px; }
#top-home { background: url(top.gif) 20px 0 no-repeat; }
#top-friend { background: url(top.gif) 20px -27px no-repeat;}
#top-subscribe, #top-contact { background: url(top.gif) 20px -27px no-repeat;}
#top-search { background: url(top.gif) 20px -53px no-repeat; }

#q { position: absolute; top: 30px; right: 36px; padding: 1px 2px; height: 14px; width: 100px; }
#sa { position: absolute; top: 29px; right: 0; padding: 0; height: 22px; width: 34px; }


/* Menu */

#menu { height: 41px; margin-top: 20px;}

#menu ul {
	height: 41px;
	width: 744px;
	background-image: url(menu.gif);
	background-repeat: no-repeat;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu ul li {
	float: left;
	display: block;
	height: 41px;
	width: 104px;
	margin: 0 2px 0 0;
	padding: 0;
}
	
#menu ul li a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
  text-decoration: none;    	
}

#menu01 a:hover, #menu01 a:active, #menu ul.menu01 #menu01 a { background: url(menu.gif) -000px -60px no-repeat; }
#menu02 a:hover, #menu02 a:active, #menu ul.menu02 #menu02 a  { background: url(menu.gif) -106px -60px no-repeat; }
#menu03 a:hover, #menu03 a:active, #menu ul.menu03 #menu03 a  { background: url(menu.gif) -212px -60px no-repeat; }
#menu04 a:hover, #menu04 a:active, #menu ul.menu04 #menu04 a  { background: url(menu.gif) -318px -60px no-repeat; }
#menu05 a:hover, #menu05 a:active, #menu ul.menu05 #menu05 a  { background: url(menu.gif) -424px -60px no-repeat; }
#menu06 a:hover, #menu06 a:active, #menu ul.menu06 #menu06 a  { background: url(menu.gif) -530px -60px no-repeat; }
#menu07 a:hover, #menu07 a:active, #menu ul.menu07 #menu07 a  { background: url(menu.gif) -636px -60px no-repeat; }


/* Sub menu */

#sub ul {
	list-style-type: none;
	margin: 0 0 30px 0;
	padding: 0;
}

#sub ul li {
	display: block;
	height: 20px;
	margin: 0 0 4px 0;
	padding: 5px 20px 0 10px;
	background: #ECECDD url(subnorm.gif) repeat-y;
}
#sub ul li.selected { background-image: url(subhigh.gif); }
	
#sub ul li a {
	display: block;
	width: 100%;
	height: 100%;	
	text-decoration: none;
	font-weight: bold;
}

#sub ul li a:link, #sub ul li a:visited { color: #444444; text-decoration: none; }
#sub ul li a:hover, #sub ul li a:active { color: #CC0000; text-decoration: underline; }
#sub ul li.selected a:link, #sub ul li.selected a:visited { color: #000000;}


/* ---- Footer ----------------------- */

#clear { height: 50px; clear: both;	}	
#footer { position: absolute;	height: 25px; bottom: 0; border-top: 3px solid #DE030E; width: 742px; }

#footer a { color: #888888; }


/* ---- Key programmes --------------- */

#progs { margin-bottom: 25px; }

#progs ul {
	height: 110px;
	width: 744px;
	background-image: url(progs.jpg);
	background-repeat: no-repeat;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#progs ul li {
	float: left;
	display: block;
	height: 110px;
	width: 121px;
	margin: 0 3px 0 0;
	padding: 0;
}
	
#progs ul li a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
  text-decoration: none;    	
}

#progs01 a:hover, #progs01 a:active { background: url(progs.gif) -000px 0 no-repeat; }
#progs02 a:hover, #progs02 a:active { background: url(progs.gif) -124px 0 no-repeat; }
#progs03 a:hover, #progs03 a:active { background: url(progs.gif) -248px 0 no-repeat; }
#progs04 a:hover, #progs04 a:active { background: url(progs.gif) -372px 0 no-repeat; }
#progs05 a:hover, #progs05 a:active { background: url(progs.gif) -496px 0 no-repeat; }
#progs06 a:hover, #progs06 a:active { background: url(progs.gif) -620px 0 no-repeat; }


/* ---- Past magazines --------------- */

div.pastmag {
	background: url(magbg.gif) top left no-repeat;
	text-align: center; float: left;
	width: 120px;	height: 195px; padding-top: 8px; 
	margin-right: 35px; margin-bottom: 35px;
	}
	
div.pastmag h3 { margin: 0; height: 22px }
div.pastmag h3 a:link, div.pastmag h3 a:visited { text-decoration: none; color: #333333; }
div.lastinline { margin-right: 0; }


/* ---- sIFR --------------- */

.sIFR-flash {	visibility: visible !important;	margin: 0; }
.sIFR-replaced { visibility: visible !important; }
span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

.sIFR-hasFlash h1 {	visibility: hidden; font-size: 18px; letter-spacing: -1px; }