/*--- BALISES ET CLASSES GÉNÉRIQUES ---*/

* {margin: 0; padding: 0;}

body {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: .9em;
	color: #37301b;
	background: #fff url(../css-img/bg.jpg) no-repeat left bottom fixed;
}

hr {clear: both; height: 1px; visibility: hidden;}

a {color: #5085a1; text-decoration: none; border-bottom: 1px dotted #5085a1;}
a:visited {color: #215b77; border-bottom: 1px dotted #215b77;}
a:hover {color: #000; border-bottom: 1px solid #000;}


/*--- LAYOUT DE BASE ---*/

#header {
	position: fixed;
	left: 0;
	top: 0;
	height: 600px;
	width: 203px;
	border-right: 1px solid #938a7b;
	background: #c4bcad url(../css-img/bg.jpg) no-repeat left bottom fixed;
}
#content {
	margin-left: 204px;
	padding: 0 25px 100px;
}


/*--- header ---*/
#menu {
	padding: 100px 0 50px;
	text-align: right;
	list-style: none;
}
#menu li a {
	display: block;
	padding: 10px 25px 10px 10px;
	text-decoration: none;
	color: #242118;
	border-color: #938a7b;
	border: none;
	background: #c4bdad url(../css-img/menu_arrow.gif) no-repeat right center scroll;
}
#menu span {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 188px;
	height: 90px;
	padding: 5px 10px 5px 5px;
	font-size: 12px;
	color: #d1e7e2;
	background: #889b97; /* #242118; */
	text-decoration: none;
	border-right: 1px solid #515b52;
	border-bottom: 1px solid #515b52;
	o-pacity: .5;
	f-ilter: alpha(opacity=50);
}
#menu span ins {color: #fff; text-decoration: none; font-weight: bold;}
#menu li a:hover {color: #fff;}
#menu li a:hover span {display: block;}

#menu .active {
	border-top: 1px solid #938a7b;
	border-bottom: 1px solid #938a7b;
	padding: 9px 25px 9px 10px;
	background: #d6d1c8 url(../css-img/menu_arrow_active.gif) no-repeat right center scroll;
}
#menu .nosub {background-image: none;}
#home #menu .nosub:hover span {display: none;}
#menu .sub {
	list-style: none;
	border-bottom: 1px solid #7c8f8b;
	background: #889b97 url(../css-img/sous_bg.gif) no-repeat left top scroll;
}
#menu .sub li:first-child {padding-top: 10px;}
#menu .sub li:last-child {padding-bottom: 5px;}
#menu .sub a {
	padding: 0 25px;
	font-size: .8em;
	color: #fff;
	background-image: none;
	background-color: transparent;
}
#menu .sub a:hover {
	text-decoration: underline;
}

/*--- content ---*/

#content h1 {
	height: 50px;
	margin: 10px -10px 26px 0;
	text-align: right;
	color: #5085a1;
	font-weight: normal;
	font-variant: small-caps;
	background: transparent url(../css-img/h1_home.gif) no-repeat right top scroll;
}
#home #content h1 		{background-image: url(../css-img/h1_home.gif);}
#web #content h1 		{background-image: url(../css-img/h1_web.gif);}
#graphisme #content h1 	{background-image: url(../css-img/h1_graphisme.gif);}
#loisirs #content h1 	{background-image: url(../css-img/h1_loisirs.gif);}
#info #content h1 		{background-image: url(../css-img/h1_info.gif);}
#content h1 span {visibility: hidden;}
#content h2 {
	margin: 25px -25px 0;
	padding: 0 25px;
	border-bottom: 1px solid #938a7b;
	color: #938a7b;
	font-weight: normal;
}
#content #slideshow {
	display: none;
	list-style: none;
	margin-left: -25px;
}
#content .intro {
	margin: 0 -25px;
	padding: 15px 25px;
	border-bottom: 1px solid #758a85;
	font-style: italic;
	background: #c4cdca;
}
#content .intro p {padding: 10px 0; max-width: 700px;}
#content .portfolio {
	margin: 50px -25px 25px 0;
	list-style: none;
}

#content .choose {
	height: 420px;
	background: #c4cdca url(../css-img/bg_choose.jpg) no-repeat right top scroll;
}
#graphisme #content .choose {background-image: url(../css-img/bg_graphisme.jpg);}
#loisirs #content .choose {background-image: url(../css-img/bg_loisirs.jpg);}

#content .choose p {margin-right: 550px;}

#content .portfolio li {
	margin: 0 25px 50px 0;
	max-width: 950px;
}
#content .portfolio .desc ul {
	margin: 0 0 15px 15px;
	list-style: outside;
}
#content .portfolio .desc li {margin: 0;}
#content .prev {
	float: left;
	padding: 0 13px 15px 0;
	border: none;
	background: transparent url(../css-img/portfolio_bg.png) no-repeat right bottom scroll;
}
#content .portfolio .prev img {	/* largeur 500px */
	width: 500px;
	border: 1px solid #000;
}
#content .portfolio .prev:hover {background: none;}
#content .portfolio .prev:hover img {border: 1px solid #000;}
#content .portfolio .desc {
	position: relative;
	margin: 0 0 0 525px;
	padding: 0 0 20px 0;
}
#content .portfolio h3 {
	margin: 0 0 15px 0;
	color: #5085a1;
	font-variant: small-caps;
}
#content .portfolio p {margin-bottom: 15px;}
#content .portfolio .desc .url a {display: block; text-align: right;}


/* spécifique à certaines sections */
/* accueil */
#home #content {position: relative;}
#home #welcome {position: absolute; left: 0; top: 101px;}
#home #content h2 {width: 200px; padding: 10px 0; text-align: left; color: #c4bcad; border: none; position: absolute; left: 268px; top: 40px; z-index: 5; line-height: 90%; text-indent: -1.7em;}
#home #content .maincol {position: absolute; width: 295px; padding: 15px 15px 15px;} /* largeur totale : 325px */
#home #content #col1 {left: 325px; top: 0; min-height: 250px; color: #525c53; padding-top: 150px; text-align: left; border-bottom: 1px solid #938a7b; background: #f0eeea url(../css-img/welcome_bg.png) no-repeat right top scroll; z-index: 3;}
#home #content #col2 {left: 0; top: 130px; color: #000; text-align: left; z-index: 2;}
#home #content #col2 p {line-height: 175%;}
#home #content .maincol p {margin: 15px 0;}
#home #content #news {list-style: none; margin: 0 -15px;}
#home #content #news li {margin: 5px 0;}
#home #content #news a {display: block; background: #e9e6e0; padding: 0 15px; height: 70px; border-color: #c4bdad;}
#home #content #news a:hover {background: #e2ded7; border-bottom: 1px solid #c4bdad;}
#home #content #news img {float: left; width: 70px; height: 70px; border: none; margin-right: 15px; background: #fff; opacity: .25;}
#home #content #news a:hover img {opacity: 1;}
#home #content #news h3 {font-size: 1em; color: #525c53; margin: 0; font-weight: normal; padding-top: 3px;}
#home #content #news p {color: #938a7b; margin: 0;}

/* comet */
#content .comet {padding: 0 25px 0 0; font-style: normal;}
#content .comet img {
	width: 353px;
	margin: 0 0 -1px 25px;
	border: 1px solid #938a7b;
	border-top: none;
}
#content .comet p {padding: 25px 25px 0 403px; max-width: 522px;}
#content .comet h3 {padding: 25px 25px 0 403px; max-width: 522px;}
#content .comet ul {
	list-style: none;
	padding: 25px 25px 25px 403px;
	max-width: 522px;
}

/* reason */
#content .reason {
	padding: 0 25px 25px 0;
	font-style: normal;
	background: #c4cdca url(../css-img/reason_bg.gif) no-repeat -2px top scroll;
}
#content .reason h3 {
	padding: 25px 25px 5px 403px;
	font-style: italic;
}
#content .reason h3 em {color: #5085a1; font-weight: normal; font-size: .8em; font-style: normal; margin-left: 5px;}
#content .reason object {margin: 5px 25px 5px 403px;}
#content .reason p {
	padding: 10px 25px 10px 403px;
	max-width: 522px;
}
#content .reason noscript p {
	max-width: 100% !important;
	margin-right: -25px;
	padding: 15px;
	border: 1px solid #f66;
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	color: #f00;
	background: #fff;
	opacity: .75;
}

/* galeries d'images */
#content .gal p {max-width: 800px;}
#content .gal li {max-width: 700px;}
#content .gal .prev img {width: 350px;}
#content .gal .desc {margin: 0 0 0 375px;}

/* CV */
#info #basic {
	margin: -1px 0 0 -26px;
	float: left;
}
#info #basic p {
	margin: 10px 0;
	padding: 10px;
	text-align: center;
}

#info #cv {margin-left: 259px; margin-bottom: 250px;}
#info #cv h3 {margin: -20px 0 10px 0; color: #5085a1; font-size: 3em; text-align: left; opacity: .25; filter: alpha(opacity=25);}
#info #cv h4 {margin: 30px 0 10px; color: #5085a1; font-size: 1.2em; font-weight: normal; position: relative;}
#info #cv h4 span {font-style: italic; color: #938a7b; font-size: .9em; display: block; position: absolute; left: 100px; top: 12px;}
#info #cv ul {list-style: inside; margin-left: 25px;}
#info #cv li {}
#info #cv ul ul {list-style-type: circle; margin-left: 25px;}
#info #cv ul ul li {}
#info #cv .note {font-style: italic; margin-left: 15px; color: #938a7b;}
#info #cv li.note {list-style: none; margin-left: 15px;}
#info #cv li span {b-ackground: #d3e0e7; b-order: 1px solid #95b6c7; color: #5085a1; font-weight: bold; font-style: italic;}

/* en-têtes des accordéons */
.collapse {padding-left: 15px; background: transparent url(../css-img/collapse.gif) left center no-repeat scroll;}
.collapsed {background: transparent url(../css-img/collapsed.gif) left center no-repeat scroll;}
.gp .collapse {background: transparent url(../css-img/collapse.gif) 8px center no-repeat scroll;}
.gp .collapsed {background: transparent url(../css-img/collapsed.gif) 8px center no-repeat scroll;}


.site #content p {margin: 25px 0;}
.site #content ul {margin: 0 35px;}
.site #content li {margin: 5px 0;}

body.photo #content ul {list-style: none; margin: 0 -25px;}
body.photo #content ul li {float: left; background: #000;}
body.photo #content ul li a {display: block; width: 150px; height: 120px; margin: 3px; border: none; background: transparent url(img/photo/photo_000.jpg) no-repeat center center scroll; opacity: .25; filter: alpha(opacity=50);}
body.photo #content ul li a:hover {width: 148px; height: 118px; border: 1px solid #fff; opacity: 1; filter: alpha(opacity=100);}