/*
** EPUK Shared CSS
**
** by Nick McGowan-Lowe, adapted partly from existing EPUK web code
** last adapted 16th July 2006
**
** This file is designed to be used along with either "epuk_article" or
** "epuk_frontpage" and includes the css common to most parts of the site
** It includes layout and text code in the same document
** 
** Stylesheet last validated 16 August 2006 at:
** http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.epuk.org%2Ftextpattern%2Fcss.php%3Fn%3Depuk_shared
** 
** AFTER MAKING CHANGES ALWAYS CHECK END FOR "STYLE SHEET ENDS"
*/

.wtdresize
{
width: 420px;
font: normal 1px/1px Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
color:#FFF
}

.wtdcredit
{
display:block;
width: 420px;
font: normal 9px/9px Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
}

.wtdresize img
{
width: 420px;
height: auto;
max-width:420px;
max-height:140px;
}

* html .wtdresize img
{
	height: 140px;
       width: 420px;
}


/*
** ===============================
** GENERICS
*/

* {
	visibility: visible;
}

* a:link, a:visited, a:active 
{
	color: #000;
	text-decoration: none;
}

img 
{
      border:none;
}

/*
** ===============================
** MISC
*/

.socialicons {
     padding: 10px 30px;
}

.socialicons a img {
     padding-right: 6px;
}

.slidelandscape {
      height: 150px;
	width: 150px;
	background: #fff url(/site/showcase/blankslide.gif) no-repeat 0px 0px;
}

.slidelandscape img {
        position: relative;
	left: 22px;
	top: 37px;
	height: 66px;
	width: 100px;
        max-width: 100px;
	max-height: 66px;
	border-width: 3px;
	border-style: solid;
	border-color: #DDD #DDD #333 #333;
	text-decoration: none;
}

.slidelandscape:hover p {
        position: relative;
	left: 10px;
	top: 38px;
	width: 124px;
	height: 28px;
	font: 9px "Courier New", Courier, mono;
	color: #333;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
        visibility: visible;
}


.slideportrait {
	height: 150px;
	width: 150px;
	background: #fff url(/site/showcase/blankslide.gif) no-repeat 0px 0px;
}


.slideportrait img {
        position: relative;
	left: 37px;
	top: 19px;
	height: 100px;
	width: 66px;
        max-width: 66px;
	max-height: 100px;
	border-width: 3px;
	border-style: solid;
	border-color: #DDD #DDD #333 #333;
}

.slidelandscape p,
.slideportrait p 
{
        visibility: hidden;
}


.slideportrait:hover p {
    position: relative;
	left: 10px;
	top: 16px;
	width: 124px;
	height: 28px;
	font: 9px "Courier New", Courier, mono;
	color: #333;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
       visibility: visible;
}

.slidelandscape:hover, 
.slideportrait:hover {
	background-image: url(/site/showcase/blankslidehover.gif);
}


/*
** ===============================
** LAYOUT, BOXES AND POSITIONING CODE
*/

.iecorrectone
{
      position: relative;
      left: 0px;
      top: 15px;
}

* html .iecorrectone
{
      position: relative;
      left: 0px;
      top: 0px;
}

.headerstyle
{
	position: absolute;
	left: 20px;
	top: 20px;
        height: auto;
	background: #FFF;
}

.linkbarbox
{
	border: 1px solid #333;
	border-right-style: none;
	border-left-style: none;
       height: 36px;  
}

.sidebarbox,
.sidebarboxtop,
.sidebarboxmiddle
{
       position:relative;
       width: 160px;
       height: auto;
       padding: 8px 10px;
       text-align: justify;
	   border: 1px solid #333;
	   border-left: 10px solid #F60;

}

.sidebarbox
{
	   margin: 0px 0px 10px 0px;
}

.sidebarboxtop
{
	border-bottom: none;
	text-align: justify;
}

.sidebarboxmiddle
{
	border-top: none;
	border-bottom: none;
}


.xsidebar
{
	float: left;
	width: 191px;
       margin: 210px 0 0 20px;
       height: auto;
}

.sidebar
{
	position: absolute;
	width: 191px;
       top: 195px;
       left: 20px;
       height: auto;
}

.topadvertexternal,
.toppageadvert
{
	position: absolute;
       left: 580px;
       top: -20px;
       height: auto;
}

.topadvertinternal,
.epukadvert
{
	position: absolute;
       left: 458px;
       top: -12px;
       height: auto;
}

.topadvertexternal,
.topgoogleadvert
{
	position: absolute;
       left: 458px;
       top: 8px;
       height: 60px;
   border: 1px solid #000;
}

.external
{
   border: 1px solid #000;
}

.toplinkbar
{
	left: 20px;
	position: absolute;
	top: 120px;
}

/*
** ===============================
** TEXT STYLES
*/

.caps a:link articlebody,
.caps a:visited articlebody,
.caps a:active articlebody
{
	color: #F60;
}

.articlecontainer h2,
.articleintro
{
	font: normal 18px/20px Skia, Arial, Helvetica, sans-serif;
    background-color: #FFF;
}

.newscolumnone h3,
.newscolumnone h3 a,
.bigheadline,
.bigheadline a
{
	font: bold 24px/28px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
}

.articlebody,
.body
{
	font: normal 12px/16px Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
}

.suppbody a:link,
.suppbody a:visited,
.suppbody a:active
{
	font: normal 10px/13px Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
}

.articlebody ul,
.body ul
{
       margin-left: 0; 
       padding-left: 0;
}

/*
** WHERE IS CATEGORY USED ?
*/

.category
{
	font: bold 10px/11px Verdana, Arial, Helvetica, sans-serif;
	color: #F60;
	padding-bottom: 6px;
	padding-left: 20px;
}

.contributor
{
       position:relative;
       width: 180px;
	font: normal 10px/14px Verdana, Arial, Helvetica, sans-serif;
	padding-left: 10px;
}

.contributor p
{
	 padding-bottom: 3px;
}

.contributor a:link, 
.contributor a:visited, 
.contributor a:active
{
	font-weight: bold;
}

.dateline
{
	font: bold 10px Geneva, Arial, Helvetica, sans-serif;
	color: #999;
}

.disclaimer
{
	font: bold 9px/12px Verdana, Arial, Helvetica, sans-serif;
	color: #666;
       padding-right: 10px;
}

.showcasecaption A:link, 
.showcasecaption A:visited, 
.showcasecaption A:active,
.body A:hover,
.disclaimer A:link, .disclaimer A:visited, .disclaimer A:active
{
	text-decoration: underline;
}

.exclusive
{      
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	color: #f60;
}

.flannelpanelbody
{
	font: normal 11px/14px Skia, Verdana, Arial, Helvetica, sans-serif;
}

.flannelpanelbody A:link, 
.flannelpanelbody A:visited, 
.flannelpanelbody A:active
{
	font-weight: bold;
}

.flannelpanelbody ul{
       margin-left: 0; 
       padding-left: 0;
	list-style-position: inside;
	list-style-type: disc;
}

input 
{
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: #F60;
   background-color: #FFF;
   padding: 0px;
} 

.linkbar,
.linkbar a
{
	font: bold 10px/10px Verdana, Arial, Helvetica, sans-serif;
        padding: 5px 0px;
	color: #000;
}

.linkbargrey,
.linkbargrey a
{
	font: bold 10px/10px Verdana, Arial, Helvetica, sans-serif;
	color: #666;
       padding: 5px 0px;
}

.liftoutquote {
	font: bold 16px/21px Verdana, Arial, Helvetica, sans-serif;
       width: 165px;
	text-align: center;
}

.readmore
{
	font: bold 12px/15px Arial, Helvetica, sans-serif;
	text-align: right;
}

.readmoresmall
{
	font: italic 10px/12px Arial, Helvetica, sans-serif;
	text-align: right;
}

.smallredintro,
.smallredintro a
{
	font: bold 10px/11px Verdana, Arial, Helvetica, sans-serif;
	color: #F60;
        text-align: left;
}

.showcasecaption
{
	font: bold 10px/13px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

.smallheadline,
.smallheadline a
{
	font: bold 18px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
}

.smallheadline A:hover,
.articleintro A:link, 
.articleintro A:visited, 
.articleintro A:active,
.articlecontainer h2 A:link, 
.articlecontainer h2 A:visited, 
.articlecontainer h2 A:active,
.smallredintro A:link, 
.showcasecaption A:hover,
.readmoresmall A:hover,
.readmore A:hover,
.liftoutquote A:hover,
.linkbargrey A:hover,
.linkbar A:hover,
.disclaimer A:hover,
.body A:link, 
.body A:visited, 
.body A:active,
.flannelpanelbody A:hover,
.bigheadline A:hover
{
	color: #F60;
}

/*
** ===============================
** CODE FOR POSITIONING OF FOOTER
*/

#greyback
{
}

#whitepage
{
}

#xgreyback2
{
background-color: #ccc;
padding: 20px 0px;
}

#xwhitepage2
{
background-color: #fff;
border: 1px solid #000;
width: 940px;
margin: 0px auto;
padding-bottom: 20px;
}

#page
{
padding-top: 1px;
padding-bottom: 7.6em;
}

html, body
{
	height: 100%;
       margin:0; 
       padding:0; 
       border:0;
}

#nonfooter
{
       position: relative;
       height: auto;
       width:940px;
       min-height: 1500px;
	margin-top: 20px;
	margin-bottom: 60px;
}

* html #nonfooter
{
       height: 1500px;
	margin-bottom: 80px;
}

#snipnonfooter
{
       position: relative;
       min-height: 1500px;
       height: auto;
	margin-bottom: 30px;
}

* html #snipnonfooter
{
       height: 1300px;
	margin-bottom: 30px;
}


#footer
{
	position: relative;
       height: auto;
       width:940px;
	margin-top: 110px;
       margin-left: 20px;
       clear: both;
}

* html #footer
{
	position: relative;
	margin-top: 130px;
}


.yarticlecontainerDOESNTWORKINIE
{
       float: left;
	width: 700px;
       margin: 220px 0px 50px 20px;
       clear: none;
}

.articlecontainer
{
	position: relative;
	top: 200px;
       left: 220px;
       height: auto;
	width: 700px;
       padding-bottom:50px;
}


.xarticlecontainer
{
	position: absolute;
	top: 210px;
       height: auto;
	width: 700px;
	left: 220px;
       padding-bottom:50px;
}


.bottomlinkbar
{
	position: absolute;
       left: 20px;
       top: 3150px;
}

* html .bottomlinkbar
{
	position: absolute;
       left: 20px;
       top: 3350px;
}

/*
** ===============================
** STYLES FOR TABBED LINKS
** ===============================
*/

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
 color: #000;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav,
ol.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px dotted #000;;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li,
ol.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a,
ol.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px dotted #000;;
 border-bottom: none;
 background: #DDD;
 text-decoration: none;
}

ul.tabbernav li a:link,
ul.tabbernav li a:visited,
ol.tabbernav li a:link,
ol.tabbernav li a:visited 
{ 
color: #444; 
}

ul.tabbernav li a:hover,
ol.tabbernav li a:hover
{
 color: #F60;
}

ul.tabbernav li.tabberactive a,
ol.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover,
ol.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/

.tabbertab ul, 
.tabbertab ul A:link,
.tabbertab ul A:active,
.tabbertab ul A:visited,
.tabbertab ol, 
.tabbertab ol A:link,
.tabbertab ol A:active,
.tabbertab ol A:visited
{
  font: 12px/17px bold Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  text-decoration: none;
  padding-right: 10px;
}

.tabbertab ul
{
  padding-left: 30px;
}


.tabbertab ol,
.tabbertab ul A:hover,
.tabbertab ol A:hover
{
  color: #F60;
}

.tabberlive .tabbertab {
 padding:5px;
 border: 1px dotted #000;
 border-top:0;
 color: #000;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

/**
* Added by TS for smd slideshow
*/
.smd_slimbox {
	float:left;
	width:600px;
	margin:1em 0;
	clear:both;
	list-style:none;
}
.smd_slimbox li {
	width:150px;
	height:150px;
	float:left;
	margin:1em auto;
	text-align:center;
}
.smd_slimbox img {
	margin:0 auto;
}
.smd_slimbox span {
	float:left;
	width:140px;
	padding:2px 0 0 5px;
}
.smd_slimbox_nav {
	clear:both;
	width:500px;
	padding:20px;
}
.smd_slimbox_prev {
	float:left;
}
.smd_slimbox_next {
	float:right;
}


/*
** ===============================
** STYLE SHEET ENDS
*/