body {
margin:0;
padding:0;
font-family:arial,  sans-serif;
font-size:100%;
text-align:center;
color:#333333;
}

a{
cursor:hand;
color:#990000;
text-decoration:none;}

/*
 This CSS file controls the entire appearance of the photo gallery.
 Most of the photo controls below are hidden by default, until their 'active'
 style is applied by the script. This is for older/non-JS-supporting browsers.
*/



/*
 Prev/Next Arrow styles: I'm giving them a button appearance,
 and pushing them to the sides of the page with CSS floats.
*/

/*
.photoArrow {
 display: none;
 width: 5em;
 padding: 0.1em;
 text-align: center;
 color: white;
 background-color: #5080B0;
 border: 1px solid #5080B0;
 border-color: #A0E0FF #205080 #205080 #A0E0FF;
 cursor: pointer;
}
.photoPrevActive {
 display: block;
 float: left;
}
.photoNextActive {
 display: block;
 float: right;
}

*/
/*
 The list is shrunk down, with only the active item displayed.
 A cool alternative to this is to display the list with "overflow: auto" to
 the side of your photos, as the script allows you to click items to jump to them!
 You could have a list of thumbnails, linking to the full-size images, and use
 photoItemActive to put a border/background around the active image...
*/

.photoListActive {
 margin: 0 0 1em 0;
 padding: 0em 6em;
 text-align: center;
 list-style: none;
}
.photoListActive li {
 margin: 0;
 padding: 0;
 color: #567;
 display: none;
}
.photoListActive li.photoItemActive {
 display: block;
}
.photoListActive a {
 color: #34C;
}


/* It's a good idea to wrap your photos in an area the size of the largest photo */

.photoContainer {
padding-top:20px;
 height: auto;
}


/* OK, the photo area itself. Nothing too special here, a border and some padding. */

.photoArea {
 position: relative;
 visibility: hidden;
 margin: 0 auto 0 auto;
}
.photoAreaActive {
 visibility: visible;
 border: 1px solid #931C13;
 padding: 4px
}

/* STYLES PHOTOMORPHER*/
/*
 The AutoPlay setup is complicated; the two styled spans are alternately hidden and
 shown depending on the script state. I also have a small loading message that is
 shown to the right.
*/
/*
.photoAutoDisabled {
 display: none;
}
.photoAutoPlay, .photoAutoPause {
 display: block;
 width: 5em;
 padding: 0.1em;
 text-align: center;
 color: white;
 background-color: #5080B0;
 border: 1px solid #5080B0;
 border-color: #A0E0FF #205080 #205080 #A0E0FF;
 cursor: pointer;
}
.photoAutoPlay span, .photoAutoPause span {
 display: none;
 width: 5em; /* IE/Mac fix */
}
.photoAutoPlay .photoAutoPlayLabel {
 display: block;
}
.photoAutoPause .photoAutoPauseLabel {
 display: block;
}
*/
.photoLoadMessage {
 float: right;
 visibility: hidden;
 font-style: italic;
 text-align: center;
}


/* beginning idmaster */
#master {
margin-left: auto;
margin-right:auto;
width:800px;
}

/* end idmaster */

/* beginning idheader */
#header {
margin-top:20px;
height:20px;
width:auto;
}
/* end idheader */

/* beginning idmainHome */
#mainHome {
float:left;
margin:0;
height:600px;
width:auto;
background-image:url(http://www.robertoromeo.com/img_project/images/ecransroberto_03.gif);
background-position: top left;
background-repeat:no-repeat;
}
/* end idmainHome */

/* beginning idlistMenuRoot */
#listMenuRoot {
padding:0;
list-style:none;}

.menulist {
 margin: 0;
 padding: 0;
 }

.menulist ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }


/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
 visibility: hidden;
 position: absolute;
 top: 2em; /* I'm using ems rather than px to allow people to zoom their font */
 left: 0px;
 width: 120px;
}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
 top: 0px;
 left: 102px;
}

/*
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/

.menulist li {
 float: left;
 position: relative;

 background: #FFFFFF;
 border: 1px solid #CCCCCC;
 margin-right: 10px;
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */

.menulist ul li {
 float: none;
 margin-right: 0;
 margin-bottom: -1px;
}
.menulist ul>li:last-child {
 margin-bottom: 1px;
}

/* Links inside the menu */
.menulist a {
 display: block;
 padding: 3px;
 color: #000;
 text-decoration: none;
 font-size:8pt;
}

/* Lit items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
 color: #FFF;
 background-color: #FF1300;
}
.menulist a.highlighted {
 color: #FFF;
 background-color: #FF1300;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
 .menulist a#xyz {
 background-image: url(out.gif);
 }
 .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
 background-image: url(over.gif);
 }
*/

/* Only style submenu indicators within submenus. */
.menulist a .subind {
 display: none;
}
.menulist ul a .subind {
 display: block;
 float: right;
}

/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
 float: left;
}
.menulist ul a {
 float: none;
}
/* */
.menulist a {
 float: none;
}
/* */


/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). */
* html .menulist ul li {
 float: left;
 height: 1%;
}
* html .menulist ul a {
 height: 1%;
}
/* End Hack */
/* end idlistMenuRoot */

/* beginning idhomeExpo */
#homeExpo {
margin-left:430px;
padding-bottom:15px;
padding-right:15px;
padding-left:15px;
background-color:#FFFFFF;
width:300px;
height:auto;
text-align:center;
}
/* end idhomeExpo */

/* beginning idmainBio */
#mainBio {
margin:0;
height:600px;
width:800px;
background-image:url(http://www.robertoromeo.com/img_project/images/FR/bckg_bio.gif);
background-position: top left;
background-repeat:no-repeat;
}
/* end idmainBio */

/* beginning idbioContent */
#bioContent {
margin-top:150px;
float:left;
margin-left:20px;
width:400px;
font-size:8pt;
text-align:justify;
}
/* end idbioContent */

/* beginning idbioPhoto */
#bioPhoto {
float:left;
margin-top:280px;
padding-bottom:15px;
padding-right:15px;
padding-left:15px;
background-color:#FFFFFF;
width:300px;
height:auto;
text-align:center;}
/* end idbioPhoto */

/* beginning idmainGalerie */
#mainGalerie {
margin:0;
padding-top:80px;
padding-bottom:50px;
height:auto;
width:800px;
background-image:url(http://www.robertoromeo.com/img_project/images/robertoromeo_titre.gif);
background-position: 0 30px;
background-repeat:no-repeat;
}

img{border:none;}
/* end idmainGalerie */

/* beginning idconteneurOeuvre */
#conteneurOeuvre {
float:left;
margin:10px;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
width:170px;
height:180px;
}
/* end idconteneurOeuvre */

/* beginning idlisteOeuvre */
#listeOeuvre {
float:left;
margin-top:50px;
margin-left:20px;
padding-right:20px;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
width:170px;
height:auto;
text-align:left;
} 
/* end idlisteOeuvre */

/* beginning iddetailOeuvre */
#detailOeuvre {
margin:0;
padding:0;
list-style-type:square;
font-size:8pt;
line-height:15pt;
}
/* end iddetailOeuvre */

/* beginning idphotoOeuvre */
#photoOeuvre {
float:right;
width:425px;
height:425px;
}

/* end idphotoOeuvre */

/* beginning idfooterGalerie */
#footerGalerie {clear:both;
float:left;
text-align:left;
}
/* end idfooterGalerie */

/* beginning idfooter */
#footer {
clear:both;
padding-top:15px;
font-size:7pt;
text-align:left;
}
/* end idfooter */

/* beginning classintro */
.intro {
font-size:8pt;
text-align:justify;
padding-top:20px;
padding-bottom:50px;
}
/* end classintro */

/* beginning classbouton */
.bouton  a{
display:block;
 padding: 3px;
 color: #000;
 border:1px solid #CCCCCC;
 text-decoration: none;
 text-align:center;
 font-size:7pt;
  background-color: #FFF;
 }

.bouton a:hover, .menulist a.highlighted:hover, .menulist a:focus 
{
color: #FFF;
 background-color: #FF1300;

}

.bouton a.highlighted {
 color: #FFF;
 background-color: #FF1300;

}
/* end classbouton */

/* beginning classtitreOeuvre */
.titreOeuvre {font-size:7pt;}
/* end classtitreOeuvre */

/* beginning idtextForm */
#textForm {
float:left;
margin-top:20px;
width:380px;
font-size:8pt;
text-align:justify;
}
/* end idtextForm */

/* beginning classformItem */
.formItem {
font-size:8pt;
font-weight:bold;
}
/* end classformItem */

/* beginning idafficheFilm */
#afficheFilm {
float:left;
margin:10px;
padding-right:10px;
border-right: 1px solid #CCCCCC;
width:350px;
height:453px;
}
/* end idafficheFilm */

/* beginning idtexteFilm */
#texteFilm {
float:left;
width:350px;
height:400px;}
/* end idtexteFilm */

/* beginning idfooterFilm */
#footerFilm {
clear:both;
text-align:left;
}
/* end idfooterFilm */

/* beginning classlinks */
.links {
padding-top:180px;
padding-left:20px;

font-size:9pt;

text-align:left;
}
/* end classlinks */