/* Layout */

html {margin: 0; padding: 100px 1em 0 11em}
body {margin: 1em 0 0 0; padding: 0; position: relative}

div.map {position: absolute; top: 0; left: -10em; width: 9em}
div.map ul {margin: 0; padding: 0; list-style: none}
div.map li {margin: 0 0 0.5em 0; padding: 0.5em}
div.map li li {margin: 0; padding: 0 0.5em}
#sg-menu, .ist-logo {margin-top: 2em}

#marketing {float: right; width: 11em; margin: 0 0 16em 1em}
#marketing ul {margin: 0; padding: 0; list-style: none}
#marketing li {margin: 0 0 0.5em 0; padding: 0.5em}
#marketing li li {margin: 0; padding: 0 0.5em}
#marketing h2 {display: none}
#marketing form, #marketing form p {margin: 0}
#marketing #generic {margin-top: 4em}
#marketing #latest {margin-bottom: 0}

/* Styles */

body {font-family: Trebuchet MS, sans-serif}

div.map ul, #marketing ul {font-size: 125%}
div.map li ul, #marketing li ul {font-size: 80%}
div.map li.home, .ist-logo {text-align: center}

a img {border: none}

h1 {line-height: 1; text-align: center; font-variant: small-caps;
  border-bottom: thin solid; padding: 0 0.5em 0.2em 0.5em;
  font-weight: normal}
  
  span.date {background: #DCDCFF}

/* Colours */


body {background: url(logos/COPRAS_leaflet-bg4.jpg) top left repeat-x #CCF; color: black}

h2 {background: #BBF}

div.map li.home {background: white; color: black}

div.map ul li, #marketing ul li {background: #DA0}
div.map a, #marketing a {color: black}
div.map li li, #marketing li li {background: #EB0}
div.map li li a, #marketing li li a {color: black}
#docu-menu, #news-menu, #feedback-menu {background: blue}
#docu-menu a, #news-menu a, #feedback-menu a {color: white}
#sg-menu, #work-menu {background: #DA0 url(logos/lock.png) 100% 50% no-repeat}

#marketing #generic {background: blue}
#marketing #generic a {color: white}

/* Tables, such as calendar */

table {border-collapse: collapse; border-spacing: 0; empty-cells: show}
td, th {vertical-align: baseline; padding: 0.1em 0.4em}
td {border-top: solid thin #999}
th {text-align: left}
/* color code milestones, deliverables and events */
tr.m, tr.m a {color: black}
tr.d td:first-child + td,
tr.d td:first-child + td a {color: red}
tr.e td:first-child + td,
tr.e td:first-child + td a {font-style: italic; color: #760}


hr {border: none; border-top: thin solid black}
.endmatter {clear: both}

/* Small images to the side, such as for portraits of speakers */

img.illustration {float: left; margin: 0 1em 1em 0; max-width: 30%}