/* CSS Document */

* { margin: 0; padding: 0; }

body {
	text-align: center;
	font: 11px Helvetica, Arial, sans-serif;
	color:#375353;
	background: #FFF url(images/background.jpg)  no-repeat top center;
}


p { 
	font-family: Georgia, Verdana; 
	line-height: 170%; 
	margin: 1em 0;
	text-align: justify;
}

.clear { clear: both; height: 40px;}

a img { border: none; }

#wrapper {
	text-align: center;
	margin: 0 auto;
	margin-top: 200px;
	width: 650px;
	background: #fff;
	border-top: solid 7px #B9CFCF;
}

#header { 
	background: #fff; 
	
}

#masthead {
	width: 400px; height: 85px;
	background: #fff;
	text-align: left;
}

#masthead img {
	float: left;
}

#masthead p {
	float: left;
	margin: 20px 0 20px 0;
	text-transform: uppercase;
	font: 11px Helvetica, Arial, sans-serif;
	color: #375353;
}

#nav {
	width: 210px;
	padding-top: 20px;
	padding-right: 40px;
	background: #fff;
}

/*************/
/* Nav Rules */
/*************/

#nav ul {
	list-style-type: none;
	float: right;
	text-align: left;
}

#nav ul.first { padding-right:25px; }

#nav a { font-size: 11px; text-transform: uppercase; font-weight: bold; text-decoration: none; padding: 1px; }
#nav a:link { color: #375353; }
#nav a:visited { color: #375353; }
#nav a:hover { color: #1F2E2E; text-decoration: underline; }

a { font-weight: bold; }
a:link { color: #375353; }
a:visited, #navbar a:visited, #footer a:visited { color: #375353; }
a:hover, #navbar a:hover, #footer a:hover { color: #1F2E2E; text-decoration: underline; }

body#galerie a#galerie,
body#artiste a#artiste,
body#livre a#livre,
body#contact a#contact {
	color: #375353;
}

#navbar {
	width: 600px;
	margin: 0 auto; 
	text-align: left;
	clear: both;
	padding: 5px 0;
	margin-bottom: 20px;
	border-top: solid #E4ECEC 2px;
	border-bottom: solid #E4ECEC 4px;
}

#navbar ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	border: none;
}

#navbar ul li {
	margin-left: 0;
	padding-left: 2px;
	border: none;
	list-style: none;
	display: inline;
	font-size: 11px;
}

#navbar a, #footer a {font-weight: bold; color: #375353;}

#navbar a.control, #footer a.control { float: right; }

#footer a#top { text-indent: 14px; background: url(/bg-images/top-icon.gif) center left no-repeat; }

#main {
	width: 600px;
	margin: 0 auto;
	text-align: left;
}

.col { float: left; }

.content {
	display: inline;
	float: left;
	width: 330px;
	margin-right: 40px;
}

body.alt .content {
	width: 600px;
	margin:0;
}

/* Listing Images */

.work {
	float: left;
	width: 190px; height: 190px;
	margin: 3px; padding: 0;
	background: #E4ECEC;
	border: none;
}

.work a {
	display: block;
	width: 190px; height: 190px;
	border-right: solid 2px #E4ECEC; 
	border-bottom: solid 3px #E4ECEC;
}

.work a:hover { border-right: solid 2px #B9CFCF; border-bottom: solid 3px #B9CFCF;}

.work img { display: none;	}

/* Detail Images */

.work-detail {
	float: left;
	width: 330px; height: 330px;
	margin: 0; padding: 0;
	background: #eee;
	border-bottom: solid 3px #E4ECEC;
}

.work-detail img { display: none; }

/* Recent Images */

.work-recent {
	float: left;
	width: 150px; height: 150px;
	margin: 3px; padding: 0;
	background: #E4ECEC;
	border: none;
}

.work-recent a {
	display: block;
	width: 150px; height: 150px;
	border-right: solid 2px #E4ECEC; 
	border-bottom: solid 3px #E4ECEC;
}

.work-recent a:hover { border-right: solid 2px #B9CFCF; border-bottom: solid 3px #B9CFCF;}

.work-recent img { display: none; }


.sidebar {
	float: left;
	width: 225px;
/*	background: #b20;*/
}

#footer {
	width: 600px;
	margin: 0 auto; text-align: left;
	clear: both;
	padding: 10px 0;
	margin-top: 20px;
	margin-bottom: 80px;
	border-top: solid #E4ECEC 2px;
	border-bottom: solid #E4ECEC 4px;
}

/**************/
/* Typography */
/**************/

.sidebar .oeuvre {
	padding: 1em;
	margin: 1em 0;
	border-bottom: solid 2px #B3CCCC;
	background: #E4ECEC;
}

h2 {
	font-weight: normal;
	display: block;
	padding: 10px;
	margin-bottom: 10px;
	background: #B9CFCF; 
	color: #375353;
	border-bottom: solid 2px #E4ECEC;
	font-size: 16px;
}

h3 {
	font-size: 13px;
	font-weight: bold;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: solid 3px #E4ECEC;
}

.artist p { margin: 1em 0;  }

.sidebar h4 { font-size: 11px; margin-bottom: -6px; }
.sidebar .oeuvre p { margin-bottom: 5px; color: #375353; }
.sidebar p { margin: 1em 0; color: #375353; }

.sidebar p.info {
	border-top: dashed 1px #E4ECEC;
	padding-top: 1em;
	padding-right: 1em;
	text-align: right;
}

ul.liste {
	margin-top: 1em;
	list-style: none;
}

ul.liste li {
	margin-bottom: 7px;

}

ul.liste li a {
	display: block;
	width: 310px;
	padding: 4px;
	background: #eee; color: #375353;
	border-bottom: solid 1px #E5EBEB;
	border-right: solid 1px #E5EBEB;
	border-top: solid 1px #243333;
	border-left: solid 1px #243333;
	font-size: 15px;
	font-weight: normal;
	text-decoration: none;
	letter-spacing: 5px;	
}

ul.liste li a:link { background: #B9CFCF; }
ul.liste li a:visited { background: #B9CFCF; border-bottom: solid 2px #E4ECEC; }
ul.liste li a:hover { background: #87B0B0; border-bottom: solid 2px #D6D6CE; text-decoration: none; }




form { margin-top: 2em; }
label.required { font-weight: bold; }
label, input, textarea { width: 320px; display: block; margin-bottom: .5em;}
input:hover, input:focus, textarea:hover, textarea:focus {
 background: #B3CCCC ;
}
input.button { width: auto; }



/* Addition for the lightbox effet */

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{background-image: url(lightbox/overlay.png); }

* html #overlay{
	background-color: #333;
	background-color: transparent;
	background-image: url(lightbox/blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="lightbox/overlay.png", sizingMethod="scale");
	}
	
	
	
/* My styles */

p:first-letter {
	font-weight: bold;
	font-size: 120%;
}