html {
	height: 100%;
/* fix height to 100% for IE */
	max-height: 100%;
/* fix height for other browsers */
	padding: 0;
/*remove padding */
	margin: 0;
/* remove margins */
	border: 0;
/* remove borders */
	background: /*url(http://etresoi.ch/img/header-hlong.jpg) #fff no-repeat -18px 0px;*/#fff;
/*color background - only works in IE */
	font-size: 99%;
/*set default font size */
	font-family: "comic sans ms", arial, helvetica, serif;
/* set default font */
	color: #697210;
/* hide overflow: hidden from IE5/Mac */
/* \*/
	overflow: hidden;
/*get rid of scroll bars in IE */
/* */
}
body {
	height: 100%;
/* fix height to 100% for IE */
	max-height: 100%;
/* fix height for other browsers */
	overflow: hidden;
/*get rid of scroll bars in IE */
	padding: 0;
/*remove padding */
	margin: 0;
/* remove margins */
	border: 0;
/* remove borders */
}
#background{position:absolute; z-index:1; width:100%; height:100%;right:18px;}

#wrapper {width:100%; background:#fff; text-align:left; border-top:1px solid #a52a2a;right:18px;}
  .PP2:first-line { text-transform: uppercase}
  .PP2 {  font-family: verdana, arial, sans-serif;font-size: 12pt;line-height: 17pt; text-align: justify;}
#foot {
	position: absolute;
	margin: 0;
	bottom: -15;
	left: 181px;
	padding-right: 58px;
	display: block;
	width: 100%;
	height: 20px;
	background: #8eb2be;
	border-top:5px solid #53829d;
	z-index: 5;
}
#content {
	display: block;
/* set up as a block */
	height: 100%;
/* set height to full page */
	max-height: 100%;
	overflow: auto;
/* add scroll bars as required */
	padding-left: 188px;
	padding-right: 28px;
	padding-top:155px;
/* pad left to avoid navigation div if required */
	position: relative;
/* set up relative positioning so that z-index will work */
	z-index: 2;
/* allocate a suitable z-index */
}
#head {

position:absolute; 
top:0;
left:0px; 
right:18px; 
display:block; 
width:100%;
 height:155px;



  width:97%;
 background:#fff; font-size:1em; z-index:5; color:#000;}
#foot {position:absolute; margin:0; bottom:-15;left:181px;padding-right:58px; display:block; width:100%; height:20px; background:#8eb2be;z-index:3;}

#left {
	position: fixed;
	LEFT: 0px;
	top: 0;
	HEIGHT: 100%;
	WIDTH: 200px;
	BACKGROUND: transparent;
	FONT-SIZE: 2em;
	COLOR: #E5F4FB;
	Z-INDEX: 4
}
HTML #head {
	POSITION: absolute
}
HTML #left {
	POSITION: absolute
}
#pad1 {
	DISPLAY: block;
	HEIGHT: 100px;
	WIDTH: 28px
}
#pad3 {
	DISPLAY: block;
	FLOAT: left;
	HEIGHT: 100px;
	WIDTH: 18px
}
.pad2 {
	DISPLAY: block;
	HEIGHT: 20px;
	width: 600px;
}
#pad4 {
	DISPLAY: block;
	HEIGHT: 380px;
	WIDTH: 28px
}
#content h1 {
	FONT-SIZE: 1.2em;
	PADDING-RIGHT: 20px;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 5px;
}
#content h2 {
	FONT-SIZE: 1.2em;
	PADDING-RIGHT: 20px;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 5px;
}
#content h3 {
text-indent: 25px;
font-family: arial, helvetica, serif;
	FONT-SIZE: 1em;
	PADDING-RIGHT: 20px;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 5px;
}
#content P {
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 5px;
	PADDING-RIGHT: 20px;
	PADDING-TOP: 5px;
}
.medium {
	FONT-SIZE: 1.2em;
}
.large {
	FONT-SIZE: 1.44em;
	FONT-WEIGHT: bold;
}
.x-large {
	FONT-SIZE: 1.9em;
	FONT-WEIGHT: bold;
}
.small {
	FONT-SIZE: 0.8em;
}
.hid {
	display: none
}
* .calink {
	font-size: 8pt;
	color: #d06000;
	text-decoration: underline;
	line-height: 12pt;
}
#wordsleft {
	BACKGROUND: #fee591;
	border: 3px double #ed7c7e;
	FLOAT: left;
	HEIGHT: 200px;
	LEFT: 150px;
	MARGIN: 5px;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 5px;
	PADDING-RIGHT: 5px;
	PADDING-TOP: 5px;
	TOP: 100px;
	WIDTH: 150px
}

#wordsright {
	BACKGROUND: #def;
	border: 3px double #ed7c7e;
	FLOAT: right;
	HEIGHT: 200px;
	MARGIN: 5px;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 5px;
	PADDING-RIGHT: 5px;
	PADDING-TOP: 5px;
	RIGHT: 150px;
	TOP: 100px;
	WIDTH: 150px
}
span{ 	float:left;width:20px;font-size:170%;line-height:80%;}
#wordsabsolute {
	BACKGROUND: #eee;
	BORDER-BOTTOM: #000 1px solid;
	BORDER-LEFT: #000 1px solid;
	BORDER-RIGHT: #000 1px solid;
	BORDER-TOP: #000 1px solid;
	COLOR: #c00;
	FONT-SIZE: 2em;
	LEFT: 400px;
	MARGIN: 5px;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 5px;
	PADDING-RIGHT: 5px;
	PADDING-TOP: 5px;
	POSITION: absolute;
	TOP: 280px
}
#hvbphoto {
	border: 0;
	FLOAT: left;
	MARGIN: 0px;
	width: 181px;
	height: 227px
}
#eyephoto {
	border: 0;
	FLOAT: left;
	MARGIN: 0px;
	width: 140px;
	height: 90px
}
#\4eyephoto {
	border: 0;
	FLOAT: left;
	MARGIN: 0px;
	width: 140px;
	height: 90px
}
.dropcontent {
	background-color: transparent;
	POSITION: absolute;
	RIGHT: 20px;
	TOP: 270px;
	width: 175px;
	height: 50px;
	background-color: transparent;
	font-size: 0.48em;
	color:#000;
	display: block;
	z-index: 2;
}
.dropcontent a, .dropcontent a:visited {
	text-decoration: underline;
	text-align: right;
	color: #ff6347;
	display: block;
	padding-right: 10px;
}
.dropcontent a:hover {
	color: #ffa07a;
	text-decoration: none;
	text-align: right;
	display: block;
	padding-right: 10px;
}

    /* style the outer div to give it width */
    .menu {font-size:0.85em; padding:117px 0px 0px 160px;
 background:url(http://etresoi.ch/img/header-hlong.jpg);background-repeat: repeat-x;width:96%;}
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {padding:0;margin:0;list-style-type:none; height:25px; background:transparent}
    /* style the sub-level lists */
    .menu ul ul {width:750px;}
    /* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .menu ul li {float:left; height:25px; line-height:24px; display:block; margin-right:2px;}
    /* style the sub level list items */
    .menu ul ul li {display:block; width:150px; height:auto; line-height:1em;}
    .menu ul ul li.last {padding-bottom:10px; background:url(../img/tab/sub_bottom_blu.gif) bottom left no-repeat;}
    .menu ul ul ul li.last {padding-bottom:10px; background:url(../img/tab/two_bottom.gif) bottom left no-repeat;}
    .menu ul ul ul ul li.last {padding-bottom:10px; background:url(../img/tab/three_bottom.gif) bottom left no-repeat;}
    /* style the links for the top level */
    .menu a, .menu a:visited {display:block; float:left; height:24px; width:115px; font-size:13px; text-decoration:none; color:#000; background:#fff url(../img/tab/top_blu.gif); padding:0 0 0 10px; text-align:left;border:0; border-bottom:1px solid #222;}
    /* hack IE5.x to get the correct the faulty box model and get the width right */
    * html .menu a, * html .menu a:visited {width:125px; w\idth:115px;}
    /* style the sub level links */
    .menu ul ul a, .menu ul ul a:visited {display:block;background:#8fb3da; color:#000;width:128px; height:100%; line-height:1em; padding:5px 10px; border:1px solid #000; border-width:0 1px;}
    * html .menu ul ul a, * html .menu ul ul a:visited  {width:150px; w\idth:128px;}
    /* style the table so that it takes no part in the layout - required for IE to work */
    .menu table {border-collapse:collapse; padding:0; margin:-1px; width:0; height:0; font-size:1em; z-index:1;}
    /* style the third level background */
    .menu ul ul ul a, .menu ul ul ul a:visited {background:#c99;}
    /* style the fourth level background */
    .menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#c96;}
    /* style the sub level 1 background */
    .menu ul :hover a.sub1 {background:#536899;}
    /* style the sub level 2 background */
    .menu ul ul :hover a.sub2 {background:#a77;}
    /* style the level hovers */
    /* first */
    * html .menu a:hover {color:#ff0; border:0; height:25px; position:relative; z-index:100;}
    .menu li:hover {position:relative;}
    .menu :hover > a {color:#ff0; border:0; height:25px;}
    /* second */
    * html .menu ul ul a:hover{color:#ff0; background:#536899; position:relative; z-index:110; height:100%; border:1px solid #000; border-width:0 1px;}
    .menu ul ul li:hover {position:relative;}
    .menu ul ul :hover > a {color:#ff0;background:#7aa;background:#536899; z-index:110; height:100%; border:1px solid #000; border-width:0 1px;}
    /* third */
    * html .menu ul ul ul a:hover {background:#a77; position:relative; z-index:120;}
    .menu ul ul ul :hover > a {background:#a77;}
    /* fourth */
    .menu ul ul ul ul a:hover {background:#a75; position:relative; z-index:130;}
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {visibility:hidden;position:absolute;height:0; top:25px; left:0; width:150px;}
    /* position the third level flyout menu */
    .menu ul ul ul{top:-10px; width:150px;}
    /* make the second level visible when hover on first level list OR link */
    .menu ul :hover ul {visibility:visible; height:auto; padding:15px 30px 30px 30px; background:transparent url(../img/tab/sub_top_blu.gif) 30px 0 no-repeat; left:-30px;}
    .menu ul :hover ul.left {visibility:visible; height:auto; padding:15px 30px 30px 30px; background:transparent url(../img/tab/sub_top_left_blu.gif) 30px 0 no-repeat; left:-55px;}
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{visibility:hidden;}
    /* keep the fourth level hidden when you hover on second level list OR link */
    .menu ul :hover ul :hover ul ul{visibility:hidden;}
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{visibility:visible; left:90px; height:auto; padding:10px 30px 30px 30px; background:transparent url(../img/tab/two_top.gif) 30px 0 no-repeat;}
    .menu ul :hover ul.left :hover ul {left:-150px;}
    /* make the fourth level visible when you hover over third level list OR link */
    .menu ul :hover ul :hover ul :hover ul {visibility:visible; left:90px; height:auto; padding:10px 30px 30px 30px; background:transparent url(../img/tab/three_top.gif) 30px 0 no-repeat;}

#socialBookMarks{
border:1px solid red;
width:500px;
margin-bottom:100px;
margin-top:50px;
}
	.sharesb{
		position:relative;
		border:1px solid #878787;
		padding:3px;
		margin:15px 0 0 0;
	}
	.sharesb p {
		padding:0;
		margin:0;
				font-size:0.88em;
		font-weight:normal;
	}
	.sharesb p a{
		position:absolute;
		top:0px;
		right:0px;
		padding:3px 5px 0 0;
	}

	.sharesb ul{
		text-align:center;
		list-style:none;
		margin:6px 0 4px 0;font-weight:bold;
		padding:0;
	}
	.sharesb ul li{
		text-align:center;
		display:inline;
		padding:0 4px 6px 0 ;
	}
	.sharesb ul li.delicious{
		background:url("http://news.bbc.co.uk/shared/img/icons/bookmarks/delicious.gif") no-repeat 0 0;
	}
	.sharesb ul li.digg{
		background:url("http://news.bbc.co.uk/shared/img/icons/bookmarks/digg.gif") no-repeat 0 0;
	}
	.sharesb ul li.reddit{
		padding:0 0 0 2px;
		background:url("http://news.bbc.co.uk/shared/img/icons/bookmarks/reddit.gif") no-repeat 0 0;
	}
	.sharesb ul li.facebook{
		background:url("http://news.bbc.co.uk/shared/img/icons/bookmarks/facebook.gif") no-repeat 0 0;
	}
	.sharesb ul li.stumbleupon{
		background:url("http://news.bbc.co.uk/shared/img/icons/bookmarks/stumbleupon.gif") no-repeat 0 0;
	}
	.sharesb ul li a{
		padding:0 0 0 18px;
		margin:0 3px 0 0px;
	}
#border /* hack for IE5.5 */
* html .xb em {width:24px; height:12px; w\idth:0; hei\ght:0;}
.xb span {display:block; width:0; height:0; color:#fff; overflow:hidden; border-top:10px solid #fff; border-left:10px solid transparent; border-right:10px solid transparent; margin-left:52px; margin-top:-15px;}
* html .xb span {display:none;}

.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; overflow:hidden; font-size:0;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6  {height:1px;}
.xb4, .xb5, .xb6, .xb7 {background:#fff; border-left:1px solid #cea; border-right:1px solid #cea;}

.xb1 {margin:0 8px; background:#cea;}
.xb2 {margin:0 6px; background:#cea;}
.xb3 {margin:0 4px; background:#cea;}
.xb4 {margin:0 3px; background:#fff; border-width:0 5px;}

.xb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.xb6 {margin:0 2px; background:#fffc; border-width:0 3px;} 
.xb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;} 

  div.hr{height:43px;background:#fff url(../img/deco.png) no-repeat scroll center;} 
  div.hr hr{display:none;}