ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin: 0; padding: 0; }
a img,:link img,:visited img { border: none; }

a { text-decoration: none;  color: #808080; }
a:hover { text-decoration: underline; color: #666666; }

img
{
  behavior: url("/sf/sf_default/css/pngfix.htc");
}

:focus
{
  -moz-outline-style: none;
}

body
{
  margin: 0;
  padding: 0;
	color: #AAAAAA;
	font-size: 9pt;
	line-height: 12pt;
	font-family: Trebuchet MS, Arial, Verdana, sans-serif;
	font-weight: normal;
  text-align:center;
}

h2 {
	background-color: #e2001a;
	padding: 2px 5px;
	margin-bottom: 5px;
	color: white;
	font-size: 12pt;
	line-height: 16pt;
	font-family: Trebuchet MS, Arial, Verdana, sans-serif;
	font-weight: normal;
	}
	
h3 {
	color: #e2001a;
	font-size: 11pt;
	line-height: 16pt;
	margin-bottom: 5px;
	border-bottom: 1px solid #e2001a;
	font-family: Trebuchet MS, Arial, Verdana, sans-serif;
	font-weight: normal;
	}
	


div#container {
	position:absolute;
	left: 50%; 
	top: 50%;
	height: 580px;
	width: 925px;
	margin-top: -290px;
	margin-left: -462px; 
	text-align:left;
	background-position: top center;
	background-repeat: no-repeat;
	background-image: url("/images/background.gif");
	padding:0;
}

div#logo {
	position: absolute;
	z-index: 1;
	top: 60px;
	left: 10px;
	}

div#page1 {
	position: absolute;
	z-index: 1;
	top: 80px;
	left: 220px;
	width: 300px;
	height: 450px;
	}

div#page2 {
	position: absolute;
	z-index: 1;
	top: 80px;
	left: 220px;
	width: 400px;
	height: 450px;
	}
	
div#page3 {
	position: absolute;
	z-index: 1;
	top: 80px;
	left: 220px;
	width: 620px;
	height: 450px;
	}

a#btprev, a#btnext {
  position: absolute;
	display: block;
	width: 22px;
	height: 21px;
	text-decoration: none ;
	line-height: 60px;
	overflow: hidden;
	}

a#btprev { background: url("/images/left1.gif") no-repeat 0 0 ; }
a#btnext { background: url("/images/right1.gif") no-repeat 0 0 ; left: 29px }
a#btprev:hover { background: url("/images/left2.gif") no-repeat 0 0 ; }
a#btnext:hover { background: url("/images/right2.gif") no-repeat 0 0 ; }

/********************************** MENU *************************************/

div#menu {
	position:absolute;
	z-index: 1;
	top: 160px;
	left: 10px;
	width: 180px;
	border-bottom: 1px solid #f07f8c;
	padding-bottom: 5px;
	}

#menu ul, #menu li {
	margin:0;
	padding: 0;
	list-style: none;
	margin-bottom: 5px;
}

#menu ul li a {
	display: block;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: top right;
	outline:none;
	height: 20px;
	width: 110px;
	margin-left: 70px;
	text-decoration: none;
}

a#menu-exposition { background-image:url(../images/menu/off/exposition.gif);}
a#menu-exposition:hover { background-image:url(../images/menu/over/exposition.gif);}
a#menu-exposition-sel { background-image:url(../images/menu/on/exposition.gif);}

a#menu-artistes { background-image:url(../images/menu/off/artistes.gif);}
a#menu-artistes:hover { background-image:url(../images/menu/over/artistes.gif);}
a#menu-artistes-sel { background-image:url(../images/menu/on/artistes.gif);}

a#menu-galerie { background-image:url(../images/menu/off/galerie.gif);}
a#menu-galerie:hover { background-image:url(../images/menu/over/galerie.gif);}
a#menu-galerie-sel { background-image:url(../images/menu/on/galerie.gif);}

a#menu-calendrier { background-image:url(../images/menu/off/calendrier.gif);}
a#menu-calendrier:hover { background-image:url(../images/menu/over/calendrier.gif);}
a#menu-calendrier-sel { background-image:url(../images/menu/on/calendrier.gif);}

a#menu-liens { background-image:url(../images/menu/off/liens.gif);}
a#menu-liens:hover { background-image:url(../images/menu/over/liens.gif);}
a#menu-liens-sel { background-image:url(../images/menu/on/liens.gif);}

a#menu-contact { background-image:url(../images/menu/off/contact.gif);}
a#menu-contact:hover { background-image:url(../images/menu/over/contact.gif);}
a#menu-contact-sel { background-image:url(../images/menu/on/contact.gif);}

#menu a span {
  text-indent: -5284px;
  font-size: 8px;
  visibility:hidden;
}


/********************************** SOUS MENU *************************************/

div#sousmenu {
	position:absolute;
	z-index: 1;
	top: 325px;
	left: 10px;
	width: 180px;
	height: 180px;
	font-family: Trebuchet MS, Arial, Verdana, sans-serif;
	padding: 0;
	margin: 0;
	}

#sousmenu ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    
#sousmenu li {
    margin:0;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    }

#sousmenu a {
    color: #999999;
    margin:0;
    padding:0;
}
#sousmenu a:hover {
    color: #df001a;
    text-decoration: none;
}

/********************************** ACCUEIL *************************************/

div#logo-accueil {
	position: absolute;
	z-index: 2;
	top: 115px;
	left: 430px;
	}

div#photo-accueil {
	position: absolute;
	z-index: 1;
	top: 80px;
	left: 202px;
	}

/********************************** LIENS *************************************/

div.lien {
	margin-bottom: 20px;
	}

.lien h2 a {
	color: white;
	}

/********************************** CALENDRIER *************************************/

div.actualite {
	margin-bottom: 20px;
	}

.actualite .actualite-photo {
	float: right;
}

.actualite .actualite-content {
	margin-right: 100px;
}


/********************************** GALERIE *************************************/

div#photo-galerie {
	position: absolute;
	z-index: 1;
	top: 80px;
	left: 230px;
	}

div#texte1-galerie {
	position: absolute;
	z-index: 1;
	top: 420px;
	left: 230px;
	width: 220px;
	height: 120px;
	text-align: justify;
	font-size: 8pt;
	line-height: 11pt;
	}

div#texte2-galerie {
	position: absolute;
	z-index: 1;
	top: 420px;
	left: 465px;
	width: 220px;
	height: 120px;
	text-align: justify;
	font-size: 8pt;
	line-height: 11pt;
	}

div#ctrl-galerie {
	position: absolute;
	z-index: 1;
	top: 420px;
	left: 700px;
	}

div#texte1-galerie h3, div#texte2-galerie h3 {
	margin-top: 10px;
	}

/********************************** ARTISTE *************************************/

div#photo-oeuvre {
	height: 450px;
	float: left;
	margin-right: 20px;
	}

div#texte-artiste {
	float: left;
	height: 450px;
	text-align: justify;
	line-height: 12pt;
	
	}

div#texte-artiste h3 {
	margin-bottom: 10px;
	}

div#ctrl-oeuvre {
  float: right;
  margin-top: 15px;
	position: relative;
	width: 50px;
	}

div#oeuvre-legende {
	float: right;
	margin-top: 15px;
	text-align: right;
	margin-right: 20px;
	}

/*******************************************************************************/

#comocean a {
	position: absolute;
	bottom: 0px;
	right: 0px;
	text-indent: -7890px;
	width: 80px;
	height: 80px;
	background: url(/images/design-by-com-ocean.gif) 0 0 no-repeat;
	overflow: hidden;
	position: fixed;
}



/************************************** SCROLL BAR ****************************************/

.scroll-pane {
  overflow: auto;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#container .jScrollPaneTrack {
	background: url("/images/jscrollpane/track.gif") repeat-y;
	/*right: auto; left: 0;*/
}

#container .jScrollPaneDrag {
	background: url("/images/jscrollpane/drag_middle.gif") repeat-y;
}

#container .jScrollPaneDragTop {
	background: url("/images/jscrollpane/drag_top.gif") no-repeat;
	height: 7px;
}

#container .jScrollPaneDragBottom {
	background: url("/images/jscrollpane/drag_bottom.gif") no-repeat;
	height: 7px;
}

#container a.jScrollArrowUp {
	height: 24px;
	background: url("/images/jscrollpane/arrow_up.gif") no-repeat 0 -30px;
  /*right: auto; left: 0;*/
}

#container a.jScrollArrowUp:hover {
	background-position: 0 0;
}

#container a.jScrollArrowDown {
	height: 24px;
	background: url("/images/jscrollpane/arrow_down.gif") no-repeat 0 -30px;
  /*right: auto; left: 0;*/
}

#container a.jScrollArrowDown:hover {
	background-position: 0 0;
}


/**** jScrollPane css ****/
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #aaa;
}
.jScrollPaneDrag {
	position: absolute;
	background: #666;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}}