/*NBED all this CSS could do with refactoring... a bit messy at the moment. */
/*  */
/*General Positioning*/
body { background: #d7d7cd; color: #555753; margin: 0; padding: 0; font-family: verdana, sans-serif; }
/*#positionwrapper { width: 48.75em; text-align: left; margin-left: auto; margin-right: auto; margin-top: 5px; }*/
#positionwrapper { width: 50em; text-align: left; margin: auto; }

/*Background Graphics*/
#logo {background: url(pix/toplogo_bg.gif) 0 0}

/*Text styling*/
a {color: #ba2710;}
a:visited {color: #ba2710;} /* shows by colour that a link has been visited */
a:hover {color: #ba2710;}
a:active, a:focus {color: #ffffff !important; background: #ba2710 !important} /* gives a clearer link highlight of the focussed link for keyboard users */

/*Page area styling*/
#warning { color: #000000; margin: 0 0 25px 0; padding: 5px; background-color: #ffffff; border: solid #96C436 5px; min-height: 55px; }
#warning a, #warning a:focus, #warning a:active { color: #801000; background-color: #ffffff; text-decoration: underline; }
#warning img { float: left; display: inline-block; border: 0; margin-right: 5px; }
#footer { color: #000000; margin: 25px 0 0 0; padding: 5px; background-color: #ffffff; border: solid #96C436 5px; }
#footer a, #footer a:focus, #footer a:active { color: #801000; background-color: #ffffff; text-decoration: underline; }
#footer p { font-size: 0.75em; }
#warning hr, #footer hr { display: none; margin: 0; padding: 0; border: 0; }

 
#logo img {vertical-align: middle}
#logo form, p.form {display: inline; vertical-align: middle}
#logo select, #logo input {font-size: 0.75em}
label#qklabel {font-size: 0.75em; position: absolute; left: -500em}

#info {background: url(pix/topinfo_bg.gif) #ededed repeat-x; padding: 9px 0 5px; text-align: right}
#info strong {font-size: 0.75em; display: inline; color: #000}
#info p  {font-size: 0.75em; display: inline; color: #000}
#info .left {float: left; display: inline-block; padding-left: 5px}
#info .right {text-align: right; display: inline-block; padding-right: 5px}
 
#main_divider {background: url(pix/topcontent_bg.gif) #fff repeat-x; height: 25px}

#main {background: url(pix/content_bg.gif) 9.6825em 0 repeat-y #e4e4e4}

#nav {width: 9.625em; padding-right: 1px; background: url(pix/rightnav_bg.gif) repeat-y top right; float: left; position: relative}
#nav {top: -3px; t\op: -1px} /* IE5.5 then Moz/Op/IE6 tweak*/
 #nav_divider {background: url(pix/topnav_bg.gif) repeat-x; height: 1px}
 #nav ul {margin: 0; padding: 0; position: relative}
 #nav li {list-style-type: none; margin: 0; padding: 1px 0 0 0; background: url(pix/topnav_bg.gif) #ededed repeat-x; text-align: center; position: relative}
 #nav a {font-size: 0.75em; text-decoration: none; padding: 10px 0 11px 63px; display: block; width: 7.5625em; text-align: left; color: #000; text-transform: uppercase}
 #nav .home a {background: url(pix/homeicon.gif) no-repeat 10px 0; color: #000 !important}
 #nav .news a {background: url(pix/newsicon.gif) no-repeat 10px 0; color: #000 !important}
 #nav .facts a {background: url(pix/factsicon.gif) no-repeat 10px 0; color: #000 !important}
 #nav .survey a {background: url(pix/surveyicon.gif) no-repeat 10px 0; color: #000 !important}
 #nav .home a:hover, #nav .home_set a {background: url(pix/homeicon.gif) #fff no-repeat 10px 0; color: #000 !important}
 #nav .news a:hover, #nav .news_set a {background: url(pix/newsicon.gif) #fff no-repeat 10px 0; color: #000 !important}
 #nav .facts a:hover, #nav .facts_set a {background: url(pix/factsicon.gif) #fff no-repeat 10px 0; color: #000 !important}
 #nav .survey a:hover, #nav .survey_set a {background: url(pix/surveyicon.gif) #fff no-repeat 10px 0; color: #000 !important}
 #nav .home a:active, #nav .home a:focus {background: url(pix/homeicon.gif) #00c no-repeat 10px 0; color: #fff !important}
 #nav .news a:active, #nav .news a:focus {background: url(pix/newsicon.gif) #00c no-repeat 10px 0; color: #fff !important}
 #nav .facts a:active, #nav .facts a:focus {background: url(pix/factsicon.gif) #00c no-repeat 10px 0; color: #fff !important}
 #nav .survey a:active, #nav .survey a:focus {background: url(pix/surveyicon.gif) #00c no-repeat 10px 0; color: #fff !important}
 
#content {width: 38.5em; float: right}
#content h1 {margin-top: 0px; padding: 0 10px; color: #41545d; font-weight: normal; font-size: 1.5em; font-family: impact, sans-serif}
#content p {font-size: 0.75em; margin: 0; padding: 0 10px; margin: 0 0 0.618em; line-height: 130%; color: #000}
#content a {text-decoration: underline}
#content .contentmain {width: 28.5em; float: left}
#content .contentmain {width: 28.5em; float: left}
#content .contentmain .news {width: 8.625em; background: #ededed; margin-bottom: 28px; margin-left: 10px; float: left; padding-bottom: 5px}
* html #content .contentmain .news {margin-left: 5px} /* hack for IE margin-doubling bug */

#content .contentmain .news h2 {font-size: 0.75em; color: #000; padding-left: 0; margin: 0; padding-right: 0; padding-bottom: 1px; background: url(pix/headline_middle.gif) no-repeat top left}
#content .contentmain .news h2 a {color: #000; text-decoration: none}
#content .contentmain .news h2 a:hover {color: #ba2710}
#content .contentmain .news h2 a:focus {color: #ba2710}
#content .contentmain .news h2 span {padding-left: 30px; padding-right: 5px; display: block}

#content .contentmain .news p {font-size: 0.75em; margin: 0; padding: 0 5px; color: #000}
#content .contentmain p.newsimg {font-size: 1em; width: 7.675em; overflow: hidden; text-align: center}
#content .contentmain p.newsimg img {}
#content .contentmain .news a.more {background: url(pix/morearrow2.gif) no-repeat 3px right; padding-right: 13px; display: block; text-align: right}
#content .contentmain .news a.more:hover, #content .contentmain .news a:focus, #content .contentmain .news a:active {background: url(pix/morearrow2_a.gif) no-repeat 3px right}

#content .contentright {width: 9.375em; float: right; background: url(pix/rightnav_bg.gif) repeat-y top left; padding-left: 1px}
 .contentright_divider {background: url(pix/topnav_bg.gif) #a9b8bf repeat-x}
#content .contentright h2, #content .contentright h2 a {color: #000; padding: 5px 0 0; margin: 0; text-decoration: none}
#content .contentright h2 {font-size: 0.75em}
#content .contentright h2 span {padding: 5px 2px}
#content .contentright p {font-size: 0.75em; color: #000; padding: 0 5px; margin: 0}

h2.header {margin-top: 0px; padding: 0 10px; color: #41545d; font-weight: normal; font-size: 1.4em; font-family: impact, sans-serif}
h3.header {margin-top: 0px; padding: 0 10px; color: #41545d; font-weight: normal; font-size: 1.2em; font-family: impact, sans-serif}
h2.header, h3.header { clear:both; }

/* #content #img1 {background: url(http://www.w3.org/WAI/EO/2005/Demo/panda-sm.jpg) bottom center no-repeat; height: 120px; padding: 0 0 4em 0; margin: 0; display: block; width: 100%}
#content #img2 {background: url(http://www.w3.org/WAI/EO/2005/Demo/oldenburgstudentviolin34.jpg) bottom center no-repeat; height: 120px; padding: 0 0 4em 0; margin: 0; display: block; width: 100%}
#content #img3 {background: url(http://www.w3.org/WAI/EO/2005/Demo/BrainInJar.jpg) bottom center no-repeat; height: 120px; padding: 0 0 4em 0; margin: 0; display: block; width: 100%}*/

#content #img4 {background: url(pix/teaser_right1.jpg) bottom center no-repeat; height: 106px; padding: 0 0 1.75em 0; margin: 0; display: block; width: 100%}
#content #img5 {background: url(pix/teaser_right2.jpg) bottom center no-repeat; height: 154px; padding: 0 0 1.75em; margin: 0; display: block; width: 100%}
#content #img6 {background: url(pix/teaser_empty.jpg) bottom center no-repeat; height: 154px; padding: 0 0 1.75em; margin: 0; display: block; width: 100%}
#content #img7 {background: url(pix/teaser_empty.jpg) bottom center no-repeat; height: 154px; padding: 0 0 1.75em; margin: 0; display: block; width: 100%}

ul.elsewhere {margin: 0 10px 1em 10px; padding: 0}
ul.elsewhere li {list-style-type: none; padding: 0; margin: 0}
ul.elsewhere li a {padding-left: 30px; background: url(pix/list_bullets.gif) no-repeat top left; font-size: 0.75em; min-height: 20px; display: block; display: inline-block}
ul.elsewhere li span {display: inline-block; width: 1px; height: 20px; vertical-align: middle}
p.spacebelow {padding-bottom: 2em !important}
.divider_right {clear: right; height: 1px} 
.divider_left {clear: left; height: 1px} 
.divider_both {clear: both; height: 1px} 

#footerdemo {clear: left; background: #ededed; margin: 0; padding: 0}
#footerdemo p {font-size: 0.6125em; margin: 0; padding: 0 0.25em 0.25em; text-align: right}

/*Skip styling*/ 
html>body ul.skip {position: absolute} /*non-IE only*/
ul.skip {margin: 0; padding: 0}
.skip li {list-style-type: none; position: absolute; left: 0}
.skip {display: none} /*Hide skip links from Opera users*/
* html .skip, :root .skip {display: block; text-align: left; position: absolute; top: 0; left: 0} /*Override display setting to block for IE users using * html and standards-compliant users using :root (Mozilla-based and Konqueror-based, particularly) */
.skip a {position: absolute; left: -24em; top: 0.25em; border: solid black 2px; background: #fff; padding: 5px; width: 20em}
.skip a:focus, .skip a:active {left: 0em; color: #fff; background: #00c}
#navtarget_div, #footertarget_div {width: 1px; height: 1px; overflow: hidden}
#copyskip a {top: 2em}

q { quotes: '"' '"' '"' '"'; }
q:before { content: open-quote; }
q:after { content: close-quote; }

/* border */
#border {
  /*width: 55em;*/
}
#border_t {
  background: url(pix/border_top.gif) repeat-x; margin: 0px 10px 0 10px;
  height: 10px;
}
#border_l {
  background: url(pix/border_left.gif) left repeat-y;
}
#border_b {
  background: url(pix/border_bottom.gif) repeat-x; margin: 0 10px 0 10px;
  height: 10px;
}
#border_r {
  background: url(pix/border_right.gif) right repeat-y;
}
#border_c {
  /*width: 48.75em;*/
  /*border: solid red 5px;*/
  margin: 0 10px 0 10px;
}
#border_tl {
  background: url(pix/border_left_top.gif) left no-repeat;
}
#border_tr {
  background: url(pix/border_right_top.gif) right no-repeat;
}
#border_bl {
  background: url(pix/border_bottom_left.gif) left no-repeat;
}
#border_br {
  background: url(pix/border_bottom_right.gif) right no-repeat;
}