/* -- From Cedric's original designs -- */

#titleW3CMWI .titleW3C {
  display: block; position: absolute; top: 12px; left: 10px; width: 87px; height: 43px; border-right: 2px #777 solid;
}

#titleW3CMWI .titleMWI {
  display: block; position: absolute; top: 12px; left: 105px; width: 157px; height: 65px; 
}

#titleW3CMWI .titleW3C span.text, #titleW3CMWI .titleMWI span.text {
  display: none;
}

/* -- end title --  */

#topMatter {margin-top:8em}

#topMatter h1 {
  color:#0B5B9D;
  font-style:italic;
  background: #E2EDFE;
  font-size:1.2em;
}


h2 {
  background: #fff url('http://philarcher.org/diary/images/tempMWAicon.png') no-repeat 99% 50%;
  clear:both;
}

td {padding:0.3em}

/* Register now links */

p.register {text-align:right; font-size:1.5em;}
td.register {text-align:center; height:3em; width:10em}
.register a, div.online {border: 2px solid black;
  padding:0.3em 35px 0.3em 0.3em; 
  background: #0B5B9D url('http://www.w3.org/Mobile/color_keys') no-repeat 99% 50%;
  color:#fff; 
  white-space:nowrap;
}

/* You might think that this was unnecessary but... */

section {
  clear:both;
  display:block;
}


/* Floating Images */

div.imgRight, div.imgLeft {
  width:150px;
  font-size:smaller; 
  text-align:center;
  border:2px solid black;
  padding: 0.2em;
}

figure {
  display:block;
  text-align:center;
}

figcaption {
  display:block;
  font-size: 0.9em;
  font-weight: bold;
  font-style:italic;
}


.imgRight {float:right; margin-left:0.5em}
.imgLeft {float:left; margin-right: 0.5em}

.fancyImgRight {
  border-radius: 0.5em;
  border: solid 2px black;
  box-shadow: rgba(0,0,0,0.2) 0.5em 0.5em 0.3em;
  text-align:center;
  padding: 0.3em;
  display:block;
}

figure.fancyImgRight figcaption {
  font-size: 0.7em;
  font-weight:normal;
  font-style: normal;
}

.register a, div.online, div.imgLeft, div.imgRight {border-top-color:#666; border-left-color:#666}

/* Navigation links Now in a <nav> element but with an id of sidebar as before */

#sidebar {top:9em}
#sidebar ul li ol li ul, #sidebar ul li ol li ul li {background-color:#E2EDFE; list-style-image: url('http://w3.org/Mobile/color_key_4')}
#sidebar .backToTop {margin: -1px 0px 0 0px}
#sidebar ol { border-bottom-width: 0}

#sidebar li.sectionTitle a.moodle {
  background-image:url(http://www.w3.org/2009/04/MobiWeb102/moodle.png); 
  background-repeat:no-repeat;
  padding-left: 1.5em;
}

#sidebar li.reg {
  background-image:url(http://www.w3.org/2005/11/MWI-Icons/MWI-favicon); 
  background-repeat:no-repeat;
  background-position: 2% 50%;
  padding-left:1.5em;
}

div.online {	/* Can't remember what this is for. PA 28/4/11 */
  width:4em; 
  float:right;
  background-image:none;
  color: #fff;
  padding-right: 0.3em;
  text-align:center;
  font-weight: bold;
  font-style:italic;
  font-size:bigger;
}

.topper {text-align:right; font-style:italic}

section#others>p, section.week{
  border-left-width: 1em; 
  border-left-style:solid; 
  padding-left: 0.5em;
  display: block;
}


/* Colour definitions */

.pink {border-left-color:#F05A89;}
.green {border-left-color:#8CC63F;}
.purple {border-left-color:#AB208E;}
.blue {border-left-color:#598DCA;}
.black {border-left-color:#000;}
.yellow {border-left-color:#FFC20E;}
.red {border-left-color:#CE171E;}
.gold {border-left-color:#F68B1F;}

/* Weekly content sections */

section.week header h3 {border-bottom: solid 2px #000}
section.week header h3 span {font-style:italic; padding-right: 1em;}

/* Now we just need to change the colours. The default is black so nothing to do for that one */

section.pink header h3 {border-bottom-color: #F05A89;}
section.pink header h3 span {color: #F05A89;}

section.green header h3 {border-bottom-color: #8CC63F;}
section.green header h3 span {color: #8CC63F;}

section.purple header h3 {border-bottom-color: #AB208E;}
section.purple header h3 span {color: #AB208E;}

section.blue header h3 {border-bottom-color: #598DCA;}
section.blue header h3 span {color: #598DCA;}

section.yellow header h3 {border-bottom-color: #FFC20E;}
section.yellow header h3 span {color: #FFC20E;}

section.red header h3 {border-bottom-color: #CE171E;}
section.red header h3 span {color: #CE171E;}

section.gold header h3 {border-bottom-color: #FFC20E;}
section.gold header h3 span {color: #F68B1F;}

.pseudolist ul li {
  border-left-width: 1em; 
  border-left-style:solid; 
  padding-left: 1em; 
  list-style-type:none;
  margin:0.2em 0;
}


.scream {
  border:2px solid red;
  border-left-color:#f66;
  border-top-color:#f66;
  padding:0.2em;
  background-color:#0B5B9D;
  color:white;
  font-size:larger;
}

.scream a {
  color:white;
  text-decoration:underline;
}

footer {
/*  left: 0; right: 0;  position: absolute;  */
  clear: both;
  width:100%;
  font-size: .85em;
}

/* See also below where it gets move around to accommodate the funding ack */

footer p {
  text-align:right;
  padding-right: 1em;
}

#copyright {
  margin: 1em 0;
  padding: .5em 50px .5em .5em;
  background: #0B5B9D url('http://www.w3.org/Mobile/color_keys') no-repeat 99% 50%;
  color: white;
}


aside#socMedia {
  width: 7em;
  display:block;
  float:right;
  margin-left:0.5em;
  padding-left: 0.5em;
  border-left: 1px solid #598DCA;
}

img.foaf-depiction {
  float:left;
  margin-right: 0.2em;
}

/* For the course specifics */

#dateTab {
  width:15em;
  float:right;
  margin-left:1em;
  background: #E2EDFE;
  padding:0.5em;
  padding-top:0;
  border: 1px solid #0B5B9D;
}

#dateTab p.smaller {font-size:smaller; text-align:left}

/* Hitch Hiker's Guide */

figure.opera {
  display:block;
  width:250px;
  float:left;
  text-align:center;
  margin: 1em 0.5em;
}

/* funding ack */

aside#fundingack {
  display:block;
  width:20%;
  position:relative;
  left:-24%;
  top: -20em;
}

aside#fundingack p {
  text-align: left;
}

blockquote.forum {
  border-left: medium solid #999;
  padding-left: 1em;
}