/* HTML Styles -------------------------------------------------------------- */
body
{
  text-align: center;
}
p
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin-bottom: 0.8em;
  font-size: 95%;
}
a
{
  text-decoration: none;
  color: #293d6e;
}
a:hover
{
  border-bottom: 1px solid #293d6e;
}
h1
{
  margin: 0;
  padding: 0;
}
/* Big dark blue header */
h2
{
  background-color: #939db5;
  background-image: url('../images/arrowDown.jpg');
  background-position: top right;
  background-repeat: no-repeat;
  font-size: 150%;
  font-weight: bold;
  color: #293d6e;
  min-height: 33px;
  line-height: 33px;
  padding-right: 20px;
}
/* Big title */
h3
{
  font-size: 150%;
  color: #293d6e;
  margin-bottom: 6px;
}
/* Slightly smaller title */
h4
{
  font-size: 130%;
  color: #293d6e;
  margin-bottom: 6px;
}

/* Site structure ----------------------------------------------------------- */

div#wrapper
{
  width: 840px;
  text-align: left;
  margin: 0 auto 0 auto;
}
/* Header */
div#header
{
  background-color: #2f4483;
  background-image: url('../images/header/background.jpg');
  background-repeat: repeat-y;
  margin-top: 25px;
  height: 142px;
  position: relative;
  overflow: hidden;
}
div#header img#matureTimesLogo
{
  position: absolute;
  top: 25px;
  left: 15px;
}
div#header img#headerImage
{
  position: absolute;
  top: 0px;
  left: 330px;
}
div#accessBox
{
  position: absolute;
  top: 25px;
  left: 615px;
  color: #fff;
}
div#accessBox a
{
  border-bottom: 0;
  color: #fff;
}
div#accessBox a:hover
{
  text-decoration: underline;
}
/* Navigation */
div#nav ul
{
  margin: 0 0;
  padding: 0 0;
  line-height: 33px;
}
div#nav li
{
  background-image: url('../images/dot.jpg');
  background-repeat: no-repeat;
  background-position: top right;
  list-style-type: none;
  white-space: nowrap;
  display: inline;
}
div#nav li.last
{
  background-image: none;
}
div#nav a
{
  font-size: 130%;
  margin-right: 14px;
}
div#nav li.last a
{
  margin-right: 0;
}
div#search
{
  float: right;
  margin: 1px -13px 0 0;
}
/* Left Stuff */
div#left
{
  margin-top: 10px;
  position: absolute;
  z-index: 1;
}
div#subNav
{
  width: 209px;
}
div#subNav ul
{
  margin: 0 0;
  padding: 0 0;
  list-style-type: none;
  list-style-position: outside;
}
div#subNav li
{
  background-color: #ecedf1;
  border: 1px solid #cad3dc;
  border-top: 0;
  font-size: 100%;
  line-height: 23px;
  padding: 0 2px 0 15px;
}
div#left img.advert
{
  margin-top: 10px;
}
div#left object.advert
{
  margin-top: 10px;
}
/* Middle things */
div#middle
{
  margin-top: 10px;
  position: absolute;
  /*top: 212px;*/
  width: 840px;
  z-index: 0;
}
div#content
{
  width: 469px;
  margin-left: 228px;
}
/* Content in the middle */
div#content p
{
  margin: 0;
  padding: 0;
}
div#content p.submitted
{
  margin-bottom: 4px;
}
div#content h3
{
  margin-bottom: 0;
}
div#content li
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#content img.advert
{
  /* because IE explodes on resize if the advert isn't positioned absolutely */
  position: absolute;
  margin-bottom: 10px;
}
div#content object.advert
{
  position: absolute;
  margin-bottom: 10px;
}
div#content .darkBlueBox h2
{
  background-color: #939db5;
  background-image: url('../images/arrowDown.jpg');
  background-position: top right;
  background-repeat: no-repeat;
  font-size: 150%;
  font-weight: bold;
  color: #293d6e;
  min-height: 33px;
  line-height: 33px;
  margin-bottom: 0;
}
div#breadcrumbs
{
  color: #293d6e;
  padding: 10px;
}
/* Hack to display old style padded <p>'s */
div#old p
{
  margin-bottom: 12px;
}
/* Right Stuff */
div#right
{
  margin-top: 10px;
  position: relative;
  z-index: 1;
  left: 720px;
  width:120px;
}
div#right img.advert
{
  /*float: right;*/
  /* So this advert appears over the middle advert on resize */
  position: relative;
  z-index: 5;
  margin-bottom: 10px;
}
div#right object.advert
{
  float: right;
  position: relative;
  z-index: 5;
  margin-bottom: 10px;
}
/* Footer */
div#footer
{
  padding: 0 15px 0 15px;
  color: #293d6e;
  line-height: 33px;
  font-size: 90%;
}


/* Generic Classes ---------------------------------------------------------- */

/* Various site box types */
.blueBox
{
  padding: 0 15px 0 15px;
  background-color: #e0e3e8;
  border: 1px solid #c0cbd5;
  margin-bottom: 10px;
}
.darkBlueBox
{
  padding: 0 15px 0 15px;
  background-color: #939db5;
  border: 1px solid #ced6de;
}
.whiteBox
{
  background-color: #fff;
  padding: 10px 15px 10px 15px;
  border: 1px solid #cad3dc;
}
.leftBox
{
  margin-top: 10px;
  border-bottom: 0;
}
.leftBox:hover
{
  border-bottom: 0;
}
/* Since we are unable to clear:both/left/right; due to our two floated
   left and right hand columns, we need an extra div that acts like a
   table and wraps around floated items */
.floatClear
{
  display: table;
}
.floatClear div
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Overides for when the boxes aren't quite what we want */
.itemFoot
{
  border-top: 0;
  padding: 10px;
  text-align: right;
}
.storyList
{
  border-top: 0;
  padding: 10px 15px 10px 15px;
  margin: 0;
}
/* Text and formatting */
.left
{
  float: left;
}
.right
{
  float: right;
}
.imgLeft
{
  float: left;
  margin: 2px 15px 10px 0;
}
.imgRight
{
  float: right;
  margin: 2px 0 10px 15px;
}
.textLeft
{
  text-align: left;
}
.textRight
{
  text-align: right;
}
/* When floating anchors, IE forgets how to render our a:hover border to fix,
   we create a new div, align text to the left and move it back up the the line
   it needs to be displayed on */
.textLeftIEFloatFix
{
  text-align: left;
  margin-top: -15px;
}
.big
{
  font-size: 200%;
}
.bigger
{
  font-size: 250%;
}
.clear
{
  clear: both;
}
.introText
{
  font-size: 110%;
}
a.noUnderline
{
  border-bottom: 0;
}
a.noUnderline:hover
{
  border-bottom: 0;
}
/* because IE explodes on resize if the advert isn't positioned absolutely.
   this class creates the space for the advert in the flow of the document */
.advertPlaceholder
{
  height: 61px;
  margin-bottom: 10px;
}

/* Forms -------------------------------------------------------------------- */
input
{
  margin: 0;
  display: inline;
  font-size: 100%;
}
.form-text
{
  border: 1px solid #b4b4b7;
  width: 150px;
  padding: 6px 0px 6px 0px;
}
.form-password
{
  border: 1px solid #b4b4b7;
  width: 150px;
  padding: 6px 0px 6px 0px;
}
.textarea
{
  border: 1px solid #b4b4b7;
  padding: 6px 0px 6px 0px;
}
.form-submit
{
  background-color: #1d1654;
  border: 1px solid #aca8bf;
  color: #fff;
  padding: 6px 8px 6px 8px;
}
input.error, textarea.error
{
  border: 2px solid red;
}

/* Formatting for HTML adverts (where we don't really know whats could be here!) */
div.htmlAd
{
  margin-bottom: 10px;
}
div.htmlAd a
{
  border-bottom: 0;
}
div.htmlAd a:hover
{
  border-bottom: 0;
}
div#middle div.htmlAd img
{
  position: absolute;
}
div#middle div.htmlAd object
{
  position: absolute;
}
div#left div.htmlAd
{
  margin-top: 10px;
}