/* NOTES */
/* created for VILLE OUVERTE - Graphic design and Website by Stephane SZAMOS */
/* updated and optimized for VILLE OUVERTE - Sylvain Côte */

/* ----- GENERAL --------------------------------------------------------------- */

body {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    font-size:              10px ;
    color:                  #cccccc ;
    background-color:       #333333 ;
}
p {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    font-size:              11px ;
    line-height:            12px ;
}

h1 {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    font-size:              20px ;
    font-weight:            bold ;
    font-variant:           small-caps ;
    background-image:       url(/_img/bg_h1.png);
    background-repeat:      no-repeat;
    background-position:    left center;
    letter-spacing:         1px ;
}
h2 {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    font-size:              16px ;
    font-weight:            bold ;
    font-variant:           small-caps ;
    color:                  #666666 ;
    letter-spacing:         1px ;
}
h3 {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    font-size:              12px ;
    color:                  #666666
}
h4 {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    font-size:              22px ;
    font-weight:            bold ;
    color:                  #666666
}
a:link, a:visited {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    text-decoration:        underline ;
    color:                  #0000EE ;
}
a:hover, a:active {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    text-decoration:        none ;
    color:                  #333333 ;
    background-color:       #fffe02;
}


td.vign {
    border-style:           solid ;
    border-color:           #cccccc ;
    border-width:           1px ;
    padding:                3px ;
    text-align:             center ;
    vertical-align:         middle ;
}


img {
    border-width:           0 ;
}


/* ---------------------------------------------------------------------------------------------- */
/* Général / class                                                                                */
/* ---------------------------------------------------------------------------------------------- */



span.nobr {
    white-space:                    nowrap ;
}
hr.hidden {
    visibility:                     hidden ;
    height:                         0px ;
    clear:                          both ;
}
.clearfix:after {
    content:                        "." ;
    display:                        block ;
    height:                         0 ;
    clear:                          both ;
    visibility:                     hidden ;
}



div.pub {
    border-style:                   solid ;
    border-width:                   1px ;
    border-color:                   #333333 ;
    background-color:               #D7E435 ;
}
div.pub p {
    margin:                         1em ;
}


/* ----- MENU --------------------------------------------------------------- */

a.menulink, a.menulink:visited {
    font-family:            Verdana, Arial, Helvetica, sans-serif ;
    font-size:              11px ;
    font-weight:            bold ;
    display:                block ;
    letter-spacing:         1px ;
    padding:                1px 5px 1px 5px ;
    text-decoration:        none ;
    color:                  #333333 ;
}
a.menulink_editions:hover {
    background-color:       #11c5dd ;
    text-decoration:        none ;
    color:                  #333333 ;
}
a.menulink_expositions:hover {
    background-color:       #d6e434 ;
    text-decoration:        none ;
    color:                  #333333 ;
}
a.menulink_actionspedagogiques:hover {
    background-color:       #fb00ae ;
    text-decoration:        none ;
    color:                  #333333 ;
}

a.item:link, a.item:visited {
    text-decoration:        none ;
    text-decoration:        none ;
    color:                  #333333 ;
    text-decoration:        none ;
    color:                  #333333 ;
}


a.underitem:link, a.underitem:visited, a.underitem:hover {
    display:                block ;
    text-decoration:        none ;
    color:                  #666666 ;
    padding-right:          10px ;
    text-decoration:        none ;
    color:                  #333333 ;
}
a.underitem_editions:hover {
    background-color:       #11c5dd ;
    text-decoration:        none ;
    color:                  #333333 ;
}
a.underitem_expositions:hover {
    background-color:       #d6e434 ;
    text-decoration:        none ;
    color:                  #333333 ;
}
a.underitem_actionspedagogiques:hover {
    background-color:       #fb00ae ;
    text-decoration:        none ;
    color:                  #333333 ;
}

div.side {
    display:                block ;
    position:               absolute ;
    width:                  250px ;
    height:                 510px ;
    margin-top:             10px ;
    margin-left:            10px ;
    background-image:       url(/_img/leader.jpg) ;
    background-repeat:      no-repeat ;
    background-position:    left top ;
}
div.side_expositions {
    background-image:       url(/_img/leaderexpositions.jpg) ;
}
div.side_editions {
	background-image:      url(/_img/leadereditions.jpg) ;
}
div.side_actionspedagogiques {
	background-image:      url(/_img/leaderactionspedagogiques.png) ;
}

li {
    margin:                 3px 0px 3px 0px ;
}

	
	
/* ----- LAYOUT ------------------------------------------------------------------------------------------------------ */
#container { 
	
	display: block;
	border: 0px solid #333333;
	width: 800px;
	height: 550px;
	margin-left: 10%;
	margin-right: 10%;
	padding-top: 0px;
	}
	
#accueil{
	display: block;
	width: 800px;
	height: 450px;
	margin-left: 15%;
	margin-right: 15%;
	}	
	
#index {
	position:              absolute;
	width:                 10px;
	height:                100px;
	margin-top:            210px;
	margin-left:           740px;
	background-color:      #11c5dd;
}
#page_deco {
	position:              absolute;
	width:                 10px;
	height:                100px;
	margin-top:            10px;
	margin-left:           740px;
	background-color:      #fffe02;
}
#indexexposition {
	position: absolute;
	width: 10px;
	height: 100px;
	margin-top: 110px;
	margin-left: 740px;
	background-color: #D6E434;
}
#coord {
	position: absolute;
	width: 200px;
	padding: 0px;
	margin: 390px 0px 0 48px;
	background-image: url(/_img/fondpng.png);
	background-repeat: repeat;
	text-align: right;
    color:      #333333 ;
}
#main {
	position: absolute;
	width: 450px;
	height: 500px;
	margin-top: 10px;
	margin-left: 280px;
	padding: 5px;
	background-image: url(/_img/fondmain.gif);
	background-repeat: no-repeat;
    background-attachment:fixed;
	background-position: center top;
	overflow: auto;
    color: #000000 ;
}

#gallery {
	position: relative;
	padding: 3px;
	}

#pageHeader {
	width: 40px;
	height: 35px;
	float: left;
	margin-left: 0px;
	margin-top: 10px;
	position: absolute;
}
#pageFooter {
	width: 260px;
	height: 35px;
	float: right;
	margin-left: 10em;
	margin-bottom: 2em;
	position: absolute;
}
#texte {
	width: 400px;
	padding: 0px;
	text-align: justify;
}

/*-------------------NAVBAR-------------------*/
div#nav {
	position: absolute;
	width: 200px;
	padding: 0px;
	margin: 100px 0px 0 38px;
	background-image: url(/_img/fondpng.png);
	z-index: 2;
	background-repeat: repeat;
	text-align: right;
}
/*-------------------MENU-------------------*/

ul.menu img {cursor: pointer; width: 16px; height: 16px; margin-left: 100px;}
ul.menu, ul.menu ul {text-align: left; list-style-type: none;}
ul.menu li {list-style-type: none; list-style-image: none; margin-left: 50px;}
ul.menu ul {display: none;}
#menu { 
	padding: 0px;
	font: 9px/12px Verdana, Arial, Helvetica, sans-serif; 
	margin-top: 1px;
	margin-bottom: 0px;
	text-align: right;
	}

/*---------------------GALLERY---------------------*/
div.pic {
    float: left ;
    padding: 0px ;
    margin: 5px 3px 10px 3px ;
}
div.pt {
}
div.pic img {
border: 1px solid;
border-color: #444 #AAA #AAA #444;
}
div.ls img {
margin: 0px 0;
}
div.pt img {
margin: 0 0px;
}
div.pic ul {
display: none;
text-align: center;
list-style-type: none;
}

input.main, select.main, option.main, textarea.main {
    font-size:                  10px ;
    font-family:                Verdana ;
    border-width:               1px ;
    border-style:               solid ;
    color:                      #000000 ;
    border-color:               #000000 ;
    background-color:           #ffffff ;
}
option.main {
    border-width:               0px ;
    border-style:               hidden ;
}