/*********************************************
	Graphic Design and CSS by EmaGraphik
	
	Copyright 2009 
	www.emagraphik.com
	All rights reserved
	
*********************************************/


/* GENERAL LAYOUT
*********************************************/
* {
margin:0;
padding:0;
background: transparent;
font-size: 1em;
}
body {
font-family:"Courier New", Courier, monospace;
font-size: 75.01%;
text-align: center;
}
a {text-decoration: none; }
ul {
list-style-type: none;
}
img {
border: none;
}
.clear {
clear: both;
}
.access {
display: none;
}
h2 {
font-weight:bold;
}
body,
div#wrapper {
width: 726px;
height:570px;
margin:0 auto;
position: relative;
text-align: left;
}
div#content {
position: absolute;
top:200px;
left:0;
padding:0 40px 0 20px;
height:435px;
width:726px;
}
.contact div#content {
top:170px;
}
.bio div#content {
top: 170px;
left:225px;
width:287px;
padding:0!important;
}
div#main {
width: 178px;
margin:0 0 0 40px;
}

/* COLORS
*********************************************/

/* Beige clair */
ul#submenu li.actif a,
a:hover {
color:#f8f4e9!important;
}

/* Beige foncé */
*,
a,
ul#footer p,
ul#footer a {
color: #d1c19a;
}

/* Beige médium */
ul#footer p,
ul#footer a {
/*color:#c0ad7f;*/
}

/* Brun */
.bio *,
a#contact_info span {
color:#32140d;
}

/* Vert */
ul#links li a {
color: #29a62f!important;
}


/* HEADER
*********************************************/
h1#top {
padding-top:14px;
}
h1#top a {
display: block;
width: 351px;
height:52px;
margin: 0 auto;
text-indent:-9999px;
}

/* MENU
*********************************************/
/* hack for Internet Explorer */
* html ul#menu  {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
ul#menu {
padding:10px 0 0 0;
width: 640px;
margin: 0 auto;
}
ul#menu li {
float: left;
}
ul#menu li a {
display: block;
text-indent: -9999px;
line-height:45px;
font-size:1em;
font-weight: bold;
}
li.item01 a { width:70px; }
li.item02 a { width:56px; }
li.item03 a { width:64px; }
li.item04 a { width:66px; }
li.item05 a { width:70px; }
li.item06 a { width:64px; }
li.item07 a { width:62px; }
li.item08 a { width:49px; }
li.item09 a { width:69px; }
li.item10 a { width:69px; }

/* SUBMENU
*********************************************/
ul#submenu  {
width: 198px;
margin:0 0 0 40px;
}
ul#submenu a {
font-size:110%;
}

/* FOOTER
*********************************************/
ul#footer {
width: 726px;
margin:0 auto;
position: relative;
z-index:100;
}
ul#footer li {
float: right; 
text-align: right;
margin: 0 0 0 1em;
}
ul#footer p,
ul#footer a {
font-size:95%;
}

/* NEWS
*********************************************/
.fl {
float: left; 
display: inline;
}
.news_slider {
position: relative; 
width: 250px; 
padding:0 0 0 20px;
}
.news_slider .messaging {
display: block; 
padding: 5px; 
margin: 0 20px ; 
}
.news_slider .prev, 
.news_slider .next {
position: absolute; 
top: 50px; 
display: none;
}
.news_slider .next { right: 1px; }
.news_slider .prev { left: -8px; }

.news_slider .container {
position: relative; 
top:20px; 
left:0; 
width: 100%; 
background: transparent;
}
.news_slider .news_items {
position: relative; 
width: 207px; 
top: 0; 
left:8px; 
overflow: hidden;
}
.news_slider .item {
width: 197px; 
margin-right: 10px;
}
.news_slider .item p {
margin:0 1em 2em 1em;
}
.news_slider .item p img {
border:1px solid #6e5328;
display: block;
}
.news_slider .item h2 {
margin:0 1em;
}
.news_slider .view_all {
font-size: 90%; 
margin:0 0 1em 1em;
text-transform: uppercase;
}
.news_slider .view_all a {
text-transform: none!important;
}

/* BACKGROUNDS
*********************************************/
html 										{ background: url(images/html.png) repeat 0 0; }
h1#top a 									{ background: url(images/aspirateurdelangue.png) no-repeat 0 0; }
ul#links 									{ background: url(images/lost.gif) no-repeat 10px 0; }

/* WRAPPERS */
body,
div#wrapper 								{ background: url(images/wrapper.jpg) no-repeat 0 0; }
.home div#wrapper 							{ background: url(images/home.jpg) no-repeat 0 0; }
.bio div#wrapper 							{ background: url(images/bio.jpg) no-repeat 0 0; }
.dates div#wrapper 							{ background: url(images/dates.jpg) no-repeat 0 0; }
.photos div#wrapper 						{ background: url(images/photos.jpg) no-repeat 0 0; }
.music div#wrapper 							{ background: url(images/music.jpg) no-repeat 0 0; }
.videos div#wrapper 						{ background: url(images/videos.jpg) no-repeat 0 0; }
.shop div#wrapper 							{ background: url(images/shop.jpg) no-repeat 0 0; }
.pro div#wrapper 							{ background: url(images/pro.jpg) no-repeat 0 0; }
.contact div#wrapper 						{ background: url(images/contact.jpg) no-repeat 0 0; }
.liens div#wrapper 							{ background: url(images/liens.jpg) no-repeat 0 0; }
 
/* MENU */
ul#menu li a 								{ background-position: 0 -45px ; background-repeat:no-repeat; }
ul#menu li a:hover,
ul#menu li.actif a 							{ background-position: 0 0 ; }
li.item01 a 								{ background-image: url(images/menu_item01.png); }
li.item02 a 								{ background-image: url(images/menu_item02.png); }
li.item03 a 								{ background-image: url(images/menu_item03.png); }
li.item04 a 								{ background-image: url(images/menu_item04.png); }
li.item05 a 								{ background-image: url(images/menu_item05.png); }
li.item06 a 								{ background-image: url(images/menu_item06.png); }
li.item07 a 								{ background-image: url(images/menu_item07.png); }
li.item08 a 								{ background-image: url(images/menu_item08.png); }
li.item09 a 								{ background-image: url(images/menu_item09.png); }
li.item10 a 								{ background-image: url(images/menu_item10.png); }

/* NEWS SLIDER */
.news_slider .next 							{ background: url(images/next.png) no-repeat 0 -37px; }
.news_slider .prev 							{ background: url(images/prev.png) no-repeat 0 -37px; }
.news_slider .next:hover,	
.news_slider .prev:hover 					{ background-position: 0 0; }

/* CONTACT FORM */
input,
textarea 									{ background:url(images/bg_form.jpg) repeat-y 0 0; }
#form_footer input#submit 					{ background:url(images/envoyer.png) no-repeat 0 0; }
#form_footer input#reset 					{ background:url(images/annuler.png) no-repeat 0 0; }
#form_footer input:hover 					{ background-position:0 -29px!important; }








/* HOME
*********************************************/
object#welcome {
position: absolute;
top:-27px;
left:350px;
width:234px;
height:292px;
}

/* BIO
*********************************************/
.bio h2 {
text-align: center;
margin:0 0 1em 0;
}

/*DATES
*********************************************/
.dates div#content {
width:726px;
}
#anim_dates {
position: absolute;
right:60px;
bottom:65px;
}

/*PHOTOS
*********************************************/
.jcarousel-container {
position: absolute;
top:5px;
left:322px;
}
.jcarousel-clip {
z-index: 2;
overflow: hidden;
position: relative;
}
.jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
}
.jcarousel-list li,
.jcarousel-item {
float: left;
list-style: none;
}
.jcarousel-next {
z-index: 3;
display: none;
}
.jcarousel-prev {
z-index: 3;
display: none;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width:  333px;
height: 350px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:  333px;
height: 350px;
}
.jcarousel-skin-tango .jcarousel-item {
width:  333px;
height: 350px;
margin-right: 10px;
text-align: center;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
bottom: 17px;
left:194px;
width: 38px;
height: 24px;
cursor: pointer;
background: transparent url(images/nav_photos.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: 0 -24px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: 0 -48px;
}
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
bottom: 17px;
right:58px;
width: 38px;
height: 24px;
cursor: pointer;
background: transparent url(images/nav_photos.png) no-repeat -38px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background: transparent url(images/nav_photos.png) no-repeat -38px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -38px -24px;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -38px -48px;
}


/*MUSIC
*********************************************/
div#music {
position: absolute;
left:386px;
top:-13px;
width:180px;
height: 106px;
}
.music div#content {
width:726px;
}
object#anim_music {
position: absolute;
bottom:65px;
right:60px;
}

/*VIDEOS
*********************************************/
.videos div#content {
top:199px;
left:5px;
}
div#videos {
position: absolute;
left:355px;
top:0;
/*width:255px;
height: 215px;*/
}

/* CONTACT 
*********************************************/
form {
border: none;
width:260px;
margin: 30px 0 0 40px;
}
div#content form ul {
list-style: none outside;
}
form li {
margin:0 0 1em 0;
}
legend {
display: none;
}
label:hover,
input {
cursor: pointer;
}
fieldset {	
border: none;
}
input,
textarea {
width: 260px;
padding:0.2em 0;
border:1px solid #987535;

}
textarea {
overflow:auto!important;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}
#form_footer {
text-align: right; 
}
#form_footer input {
padding:0.3em 0.5em;
margin:0 0 0 0.5em;
text-indent:-9999px;
height:29px;
width: 68px;
border: none!important;
}
.contact div#content p {
margin:0 0 0 40px;
color: #d1c19a;
}



a#contact_info {
position: absolute;
top:50px;
right:170px;
width:80px;
height:100px;
/*background:red;*/
display: block;
}
a#contact_info span {
display: none;
}
a#contact_info:hover {
width:319px;
height:356px;
}
a#contact_info:hover span {
display: block;
width:259px;
height:226px;
position: absolute;
top:-78px;
left:80px;
padding:110px 30px 20px 30px;
background: url(images/etiquettecontact.jpg) no-repeat 0 0;
}

/* LINKS
*********************************************/
ul#links {
position: absolute;
top:0;
left:360px;
width:250px;
height:165px;
padding:20px 0 0 10px;
overflow:auto;
}
ul#links li a:hover {
text-decoration: underline;
}