body {
	margin:0 auto;
	padding:0;
	font-family: arial, helvetica, sans-serif;
	font-size: 10pt;
	width: 810px;
	background-image: url(img/wallpaper.gif);
	background-attachment: fixed;  /*IMPORTANT! This is what stops the scrolling bit from jumping around */
	min-height: 100%;
	height: auto;
}


html body #wrap {min-height:100%; 	
	height: auto;
	margin: 0 auto;
} 

/* Header & footer
Header and footer are fixed at top & bottom of page.  They have transparent edges
to allow the borders to be seen */

#header {
	width: 810px;
	margin: 0 auto;
	/*position: fixed;*/
	position: absolute;
	left: 0; /* Having both left AND right set to 0 forces it into the centre */
	right: 0;
	z-index: 10;
/*	height: 200px;*/
	height: 176px;
}
#footer {
	clear:both;
}


/* If the body has class moveh then no static header; 
similarly movef has no static footer*/

body.moveh #header {
	position: static;
}
body.movef #footer {
/*	position: relative;
	bottom:30px; */
	clear:both;
	position:static;
	height:20px;
	padding-top: 4px;
	background-image: url(img/footer.gif);
	background-repeat: repeat-y;	
	padding-bottom: 4px;
	bottom:0;
	width: 810px;
}

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


/* The following section contains styles necessary for the 
five-column layout.

Based on the three-column layout at http://matthewjamestaylor.com/

The outermost columns contain the page borders only.
*/

/* column container */
.colmask {
	clear:both;
	float:left;
	width:100%; 
	min-height: 100%;
	height: auto;
}

/* common column settings */
.colleftb,
.colrightb,
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;
	position:relative;
}

.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0;
}
/* Hide overflow on screen - in order to ensure there's no horizontal scroll bars
to scroll acros the width (necessary because of the way the multi column layout
was constructed.
Done on screen only because hiding horizontal overflow on printing is not necessary
(we're overriding the width and position settings) and the vertical overflow can make
things go wrong around page breaks, for Firefox at least.
*/
@media screen {.colmask, .col1, .col2, .col3 {overflow: hidden;}}

.colmid {
 	right:220px;
}
.colleft {
	right:370px;
}
.colright {
	left:1180px;
}
.colleftb {
	right: 1370px;
	background-image: url(img/page_shadow_left.gif);
	background-repeat: repeat-y;
	background-position: right;
}
.colrightb {
	background-image: url(img/page_shadow_right.gif);
	background-repeat: repeat-y;
	left: 1560px;
}

.col1 {
	width:370px;	
	right:560px;	
}
.col2 {
	width:160px;	
	right:1105px;
}
.col3 {
	width:160px;
	right:705px;
}


/* End of five-column section */

/* Corrections necessary for two-column layout
(menu bar on left, and main content on right)
NB actually four columns including borders */

.twocol .colmid {
	right:10px;
}
.twocol .colleft {
	right:580px;
}
.twocol .colleftb {
	right: 190px; 
}
.twocol .col1 {
	width:550px;	
}
.twocol .col2 {
	right: 1285px;
}

/* Corrections necessary for one-column layout
main content in col1 only
NB actually three columns including borders */
.onecol .colmid {
	right:10px;
}
.onecol .colleftb {
	right:770px;
}
.onecol .col1 {
	width:740px;	
	right:750px;	
}


/* Make sure that main columns are padded at top and bottom so they don't disappear under the header */
.col1, .col2, .col3 {
/*	padding-top: 210px;*/
	padding-top: 190px;
	padding-bottom: 180px;	
}

/* but bottom padding is not necessary if there's a moveable footer  */
body.movef .col1, body.movef .col2, body.movef .col3 {
	padding-bottom: 0;
} 

/* Links are blue */
.col1 a, .col2 a, .col3 a{
	color: rgb(0,110,174); 
	text-decoration: underline;
}

.col1 a:hover, .col2 a:hover, .col3 a:hover {
	text-decoration: underline;
}

/* This is for the top menu */
#topmenu {
	padding-top: 0; 
	padding-bottom: 10px;
	margin: 0 auto;
	background-color: white;
	width: 760px;
	text-align: center; 
	clear: both;

}
#header ul {
	margin: 0 auto;
	padding: 0;
}	

#header ul li {
	margin-left:0;
	margin-right:0;
	padding-top: 0;
	padding-left: 5px;
	padding-right: 5px;
	border-left: 1px solid black;	
	list-style: none;	
	display: inline;
}

#header ul li.first {
/*	margin-left:0; 
	padding-left:0; I don't think we need this */
	border-left: none;	
}

#header a {
	/*color: inherit;*/
 /*This won't work on IE */
	color: black;
	text-decoration: none;
}

/* OK, here's the footer */

#footer-login {
	float: left; 
	position: relative;
	left: 30px; 
	background-color: white;
	width: 750px;
	height: 25px;
	padding-top: 3px;
	padding-bottom: 2px;
/*	border-top: 1px solid blue;*/
	font-size: 8pt;
}

#footer-login form, #footer-login input {
	font-size: 8pt;
}
#copyright {
/*	float: right; 
	position: relative; */
	text-align: center;
	font-size: 9pt;
/*	right: 30px; */
}


/* Heading 1 & 2 3 */
h3 {
	font-size: 100%;
	padding: 0;
	margin: 0;	
}
h2 {
	font-size: 110%;	
}
h1 {
	font-size: 120%;	
}
/* Heading 1 is bold */
h1,h2,h3 {
	font-weight: bold;
}


.pic {
	text-decoration: none;
	text-align: center;
	border: 0;
}

.name {
	margin: 0;
	font-weight: bold;
}

.position {
	font-style: italic;
	margin-top: 0;
	margin-bottom: 1em;
}

.tiny {
	font-size: 0.7em;
	color: #444444;
}
.caption {
	margin:0 0 1.2em;
	font-size:90%
}

/* used for listings and so on */
.subhead1, .subhead2, .subhead3 {
	margin-left: 15px;
	margin-right: 15px;
}
.subhead1 {
	font-weight: bold;
	
}
.subhead2 {
	font-style: italic;
}

.subhead3 {
	padding-bottom: 1.5em;
}

.red {
	color: red;
}

.white {
	color: white;
}

img.floatLeft { 
    	float: left; 
    	margin-right: 1em;
    	margin-bottom: 1em;

}

img.floatRight { 
    	float: right; 
    	margin-left: 1em;
    	margin-bottom: 1em; 
}
.h3 {
	margin-top: 0;
}

.icon {
  background-position:left center;
  background-repeat:no-repeat;
  padding-left:20px;
}
.pdf-file {
  background-image:url(/img/icon/pdf.gif);
}

/* Stuff for the middle column (col1) */
.col1 p, .col1 h1, .col1 h2, .col1 h3, .col1 table, .col1 img {
	margin-left: 15px;
	margin-right: 15px; 
}
.col1 {
	margin-bottom: 15px;	
/*	border-right: 1px white solid; */
	border-left: 1px white solid;
}
.col1 .contentitem {
	padding-bottom: 15px;  /* this comes between the item and the white line*/	
	padding-top: 15px;
	border-bottom: 1px solid white;
}

.col1 .topitem {
	margin-top: 0;
	padding-bottom: 15px;  /* this comes between the item and the white line*/
	padding-top: 5px;
	border-bottom: 1px solid white;
}

.col1 form {
	margin:0;
	padding:0;
}
.col1 form p {
	margin-left:0;
	margin-right:0;
}

.col3 tr {
	font-size: 10pt;
	margin-bottom: 10px;
}

.col1 .normal {
	margin-left:15px;
	margin-right:15px;
}

.col1 .search {
	margin: 1em;
}

.col1 table {
	font-size:10pt;
	padding:0;
}

.col1 td {
	vertical-align:top;
	padding-right: 1em;
}

.col1 .tablehead {
	text-align: left;
	padding-left: 0;
	padding-top: 1em;
	margin: 0;
	color: rgb(222,121,28);
}

/* Stuff for the left hand column (col2) */
/* Unordered list in col2 (left hand column) 
NB the colours for this get set depending on the class id 
of the body element, at the bottom of the style sheet.
*/

.col2 ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
.col2 li {
	margin-bottom: 0.2em;
	padding: 0.4em 1em;
/*	height: 1.4em; */
}

/* Stuff for the right hand column (col3) */

/* Search box settings */
.col2 input#searchbox {

	width: 140px;
	height: 20px;
}

.col3 {
	margin-bottom: 15px;	
	padding-left: 15px;
/*	border-right: 1px white solid; 
	border-left: 1px white solid; 
	height: 100%; */
}

/* Colour settings for home section - blue */
body#home div.colmid, body#home div.colleft, body#home div.colright {
	background-color: rgb(222,232,240);
}

body#home h1, body#home h2, body#home h3, body#home #topmenu a.home {
	color: rgb(0,110,174);
} 

body#home .col2 h1{font-weight:bold; font-size:1.2em;color:#FFFFFF;}
body#home div.colleft .col2 h2{font-size:1.1em;}
body#home .col2 a img{border:none; margin-top:0.5em;}
body#home .col2 #socialmedia{margin-bottom:1em;}
body#home .col2 li {
	background-color: rgb(0,110,174);
/*	color: rgb(222,232,240); */
	color: white;
}

 body#home  div.colleft .col2 h1{ font-size:1.5em;}
 body#home  div.colleft{background-color:#c28080;}
 body#home  div.colleft .col2 a,  body#home div.colleft .col2 {color:#FFFFFF;}
body#home div.colleft .col2 .news{font-size:0.8em; margin:0.3em 0 0.3em 10px;}
/*body#home .topitem{ background-color:#0071AF;margin: 0 auto; color:#FFFFFF; width:86%; line-height:1.6em; padding:10px; text-align:centre;}
body#home .topitem{ background-color:#0071AF;margin: 0 15px 0 15px; color:#FFFFFF; line-height:1.6em; padding:10px; text-align:centre;} removed by AV after David's request (20100122)*/
body#home .topitem{ margin: 0 15px 0 15px; color:#0071AF; line-height:1.6em; padding:10px; text-align:center; 	border-bottom: 0px solid #0071AF; font-weight: bold;}/*added by AV after David's request (20100122)*/
body#home div.section {padding:5px; background:transparent; border-bottom: 1px dotted #9A0108;}
/* Colour settings for about section - blue */
body#about div.colmid, body#about div.colleft, body#about div.colright {
	background-color: rgb(222,232,240);
}

body#about h1, body#about h2, body#about h3, body#about #topmenu a.about {
	color: rgb(0,110,174);
} 
body#about .col2 li, body#about .col2 a {
	background-color: rgb(0,110,174);
	color: rgb(222,232,240);
}


/* Colour settings for membership section - green */
body#membership div.colmid, body#membership div.colleft, body#membership div.colright {
	background-color: rgb(225,232,202);
}

body#membership h1, body#membership h2, body#membership h3, body#membership #topmenu a.membership {
	color: rgb(0,118,46);
} 
body#membership .col2 li, body#membership .col2 a {
	background-color: rgb(0,118,46);
	color: rgb(225,232,202);
}

/* Colour settings for jobs section - yellow */
body#jobs div.colmid, body#jobs div.colleft, body#jobs div.colright {
	background-color: rgb(245,235,192);
}

body#jobs h1, body#jobs h2, body#jobs h3, body#jobs #topmenu a.jobs {
	color: rgb(236,163,0);
} 
body#jobs .col2 li, body#jobs .col2 a {
	background-color: rgb(236,163,0);
	color: rgb(245,235,192);
}


/* Colour settings for congresses section - orange */
body#congresses div.colleft {
/*	old colour (also applies to colmid)
	background-color: rgb(240,220,197); */
	background-color: rgb(222,121,28);
}
body#congresses div.colmid, body#congresses div.colright  {
	background-color: rgb(245,235,190);
}
body#congresses h1, body#congresses h2, body#congresses h3, body#congresses #topmenu a.congresses {
/* 	old colour	
	color: rgb(202,81,22); */
	color: rgb(222,121,28);
}
body#congresses .col2 li, body#congresses .col2 a {
/*	old colour 
	background-color: rgb(202,81,22);
	color: rgb(240,220,197);*/
	background-color: rgb(154,13,21);
	color: rgb(245,235,190);
}
body#congresses .col3 {
	color: rgb(245,235,190);
}
body#congresses .col3 h2 {
	color: rgb(154,13,21);
}

body#congresses .col3 p {
	text-decoration: none;
}

body#congresses .col1 {
	border-color: rgb(245,235,190);
	border: 1px white;
/*	We need this (invisible) border to maintain the dimensions of the website, as the
	congress section does not have the thin white dividers between the columns */
}
body#congresses .twocol .col1 {
	border-right-color: rgb(245,235,190);
}
body#congresses .col1 .contentitem, body#congresses .col1 .topitem {
	border-bottom-color: rgb(222,121,28);
}
body#congresses #header {
	height: 115px;
}
body#congresses .col1, body#congresses .col2, body#congresses .col3 {
	/*padding-top: 130px;*/
}
/* 	added for Istanbul 2010 events listing eike */
body#congresses table.socprog {width:96%;}
body#congresses table.socprog th.event{width:70%}
body#congresses table.socprog th.time{width:30%}
body#congresses table.socprog th{
	color: rgb(222,121,28);
	font-weight:bold;
	font-size: 1em;
}
body#congresses .logos a,body#congresses .logos img {
  border:none;
  padding:0 0 0 8px;
  margin:0 0 0 0;
}

/* Colour settings for news section - red */
body#news div.colmid, body#news div.colleft, body#news div.colright {
	background-color: rgb(230,207,197);
}

body#news h1, body#news h2, body#news h3, body#news #topmenu a.news {
	color: rgb(154,13,21);
} 
body#news .col2 li, body#news .col2 a {
	background-color: rgb(154,13,21);
	color: rgb(230,207,197);
}

/* Colour settings for events section - purple */
body#events div.colmid, body#events div.colleft, body#events div.colright {
	background-color: rgb(222,215,230);
}
body#events h1, body#events h2, body#events h3, body#events #topmenu a.events {
	color: rgb(86,22,102);
}
body#events .col2 li, body#events .col2 a {
	background-color: rgb(86,22,102);
	color: rgb(222,215,230);
}

/* Colour settings for publications section  - indigo */
body#publications div.colmid, body#publications div.colleft, body#publications div.colright {
	background-color: rgb(225,232,230);
}
body#publications h1, body#publications h2, body#publications h3, body#publications #topmenu a.publications {
	color: rgb(13,61,140);
}
body#publications .col2 li, body#publications .col2 a {
	background-color: rgb(13,61,140);
	color: rgb(225,232,230);
}

/* Colour settings for contact section - blue */
body#contact div.colmid, body#contact div.colleft, body#contact div.colright {
	background-color: rgb(222,232,240);
}
body#contact h1, body#contact h2, body#contact h3, body#contact #topmenu a.contact {
	color: rgb(0,110,174);
}
body#contact .col2 li, body#contact .col2 a {
	background-color: rgb(0,110,174);
	color: rgb(222,232,240);
}

/* Colour settings for links section - blue */
body#links div.colmid, body#links div.colleft, body#links div.colright {
	background-color: rgb(222,232,240);
}
body#links h1, body#links h2, body#links h3, body#links #topmenu a.links {
	color: rgb(0,110,174);
}
body#links .col2 li, body#links .col2 a {
	background-color: rgb(0,110,174);
	color: rgb(222,232,240);
}

/* Colour settings for admin section - blue */
body#admin div.colmid, body#admin div.colleft, body#admin div.colright {
	background-color: rgb(222,232,240);
}
body#admin h1, body#admin h2, body#admin h3, body#admin #topmenu a.admin {
	color: rgb(0,110,174);
}
body#admin .col2 li, body#admin .col2 a {
	background-color: rgb(0,110,174);
	color: rgb(222,232,240);
}

/* Colour settings for dialogues section  - grey */
body#dialogues div.colmid, body#dialogues div.colleft, body#dialogues div.colright {
	background-color: rgb(230,230,230);
}
body#dialogues h1, body#dialogues h2, body#dialogues h3, body#dialogues #topmenu a.dialogues {
	color: rgb(100,100,100);
}
body#dialogues .col2 li, body#dialogues .col2 a {
	background-color: rgb(100,100,100);
	color: rgb(230,230,230);
}

/* Define how pages print out */

@media print {
	/* Everything should be in black text on a white background (no 'watermark') */	
	* {
		background: white;
		color: black;
		float: none;
		width: auto;
	}
	/* Do not display anything with a class of noprint, or left/right columns,
	or header/footer */
	.noprint, .col2, .col3, #header, #footer { display: none; }

	/* Ensure that multi-column layout is collapsed, so relative horiz positions
	of all columns are 0 (ie the edge of the page body) - so occupying full width */
	.colleft, .colright, .colmid, .colmask, .colleftb, .colrightb { left:0; right:0; }  

	/* The main column (content) fills whole width available */
	.col1 {position: static; padding: 0; width: auto;}	
}

/* Styles useful for highlighting the front page login form*/
.login-alert {
  background: red;
  color: white;
}

/*style for technical programme*/
.technical-programme th {
  text-align: left;
  font-weight: bold;
  padding-top: 30px;
}

.technical-programme td {
  padding-top: 15px;
}