html {
/*	overflow-x: hidden;
	overflow-y: auto; */
}

body {
/*    position: absolute;
    margin: 0px;
    width: 100%;
    padding: 0px;
    background: url(../images/main-bg.jpg) no-repeat scroll 50% 0 #000000;
    height: 100%; */
    margin: 0;
    padding: 0;
    background: #000000 url(../images/main-bg.jpg) no-repeat scroll 50% 0%;
    /*background-color: #000;*/
    color: #fff;
/*    font-family: arial; */
    font-size: 0.8em;
    font-family: tahoma,arial,verdana,sans-serif;
}

.minwidth75 {
	min-width:75px; 
	width:75 !important; 
	width:75px;
}
.minwidth70 {
	min-width:70px; 
	width:70 !important; 
	width:70px;
}
div.displayed {
	display: block;	
}
div.hidden {
	display: none;
}
ul, ol { 
	list-style:none;
}
ul.list {
	list-style-type: disc;
}
img {
    border: 0;
}
form, table {
    margin: 0;
    padding: 0;
    border: 0;
}
a {
    color: #e1156d;
    text-decoration: none;
}
a:focus, a:hover {
    text-decoration: underline;
}
a.none {
    text-decoration: none;
    display: none;
}
p {
	padding: 0;
	margin: 0 0 10px 0;	
}
table.light {
    padding: 0;
    margin: 0;
    border: 0;
}
.txtcenter, .txtCenter, .center {
    text-align: center;
}
.txtleft, .txtLeft {
    text-align: left;
}
.centered {
	margin-left: auto;
	margin-right: auto;
}
.vtop {
	vertical-align: top;
}
.noWrap, nowrap {
    white-space: nowrap;
}
div.home {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background: url("../images/home.png") no-repeat scroll 0 0 transparent;
}
div.home:hover {
    background: url("../images/home-pink.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
}
div.logo {
    position: absolute;
    background: transparent url("../images/logo_julien_jude.png") no-repeat;
    width: 329px;
    height: 80px;
    top: 27px;
}
div#mainBody {
	width: 984px;
    margin: 0 auto 0 auto;
    /*background: #000000 url(../images/main-bg.jpg) no-repeat;*/
}
div#mainContainer {
    margin: 0 auto;
    /*height: 715px;*/
    width: 984px;
}
div#mainHeader {
    background: url("../images/header-bg.jpg") no-repeat scroll 0 0 transparent;
    width: 984px;
    height: 92px;
    overflow: hidden;
}
div#mainHeader table {
    padding: 0;
    margin: 0;
    border: 0;
    height: 100%;
}
div#mainHeader table td {
/*    width: 17%; */
    padding-top: 18px;
    vertical-align: middle;
    text-align: center;
}
div#mainHeader a.menu {
    font-size: 17px;
    padding: 5px 10px;
    color: #e8e8e8;
    font-weight: 500;
    text-decoration: none;
}
div#mainHeader a.menu:focus, div#mainHeader a.menu:hover {
    background: url("../images/nav-bg.gif") repeat-x scroll 0 0 transparent;
    color: black;
}
div#mainHeader a.menu:focus span, div#mainHeader a.menu:hover span {
    color: white;
}
div#mainHeader a.none {
    text-decoration: none;
}
div#mainAnim {
    /*background: url("../images/anim-bg.jpg") no-repeat scroll 0 0 transparent;*/
    background-color: #000;
    width: 984px;
    /*height: 540px;*/
    overflow: hidden;
}
div.footerMenu {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
div.footerMenu table {
    margin-top: 32px;
}
div.footerMenu div.fright {
    margin-top: 32px;
}
div.footerMenu table td {
    vertical-align: middle;
}
div.footerMenu table td.separator {
    padding: 0 15px;
    text-align: center;
    color: #e1156c;
    width: 10px;
}
div.footerMenu table td a {
    color: #727272;
    text-decoration: none;
}
div.footerMenu table td a:hover, div.footerMenu table td a:focus {
    color: white;
}
div.footer {
    background: url("../images/footer-bg.gif") repeat scroll 0 0 transparent;
    height: 100px;
    padding: 15px 0;
}
div.footerBody {
	width: 984px;
	margin: 0 auto 0 auto;	
}
div.footer div.footerContent {
    margin-left: auto;
    margin-right: auto;
    width: 984px;
    color: #bababa;
}
div.logoCapweb {
    float: right;
    margin-top: 5px;
    margin-right: 3px;
}
div.logoFacebookYoutube {
    float: right;
}
div.logospayment {
	float: left;
}
div.logospayment table {
	padding: 0;
	margin: 20px 0 0 0;
}
div.logospayment table td {
	padding: 0 10px 0 0;
}
div.logospayment table td img {
	margin: 0 2px 0 0;
	border: 0;
}
div.headband {
    width : 100%;
/*    height: 60px; */
    background: url("../images/headband-bg.png") repeat scroll 0 0 transparent;
    color: white;
    padding: 10px;
}
div.headband table {
    margin: 0;
    padding: 0;
    width: 964px;
    height: 100%;
}
div.headband table img {
    margin-left: 10px;
    border: white solid 1px;
}
.opacity30 {
    opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
}
.fleft {
    float: left;
}
.fright {
    float: right;
}
.justify {
    text-align: justify;
}
.clear {
    clear: both;
    display: block;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.pink {
    color: #e1156d;
}
.black {
    color: black;
}
.white {
    color: white;
}
.grey { color: #CCC; }

.lightgray {
    color: #bababa;
}
.txtright, .right {
    text-align: right;
}
.fs09 {
    font-size: 9px;
}
.fs10 {
    font-size: 10px;
}
.fs11 {
    font-size: 11px;
}
.fs12 {
    font-size: 12px;
}
.fs13 {
    font-size: 13px;
}
.fs14 {
    font-size: 14px;
}
.fs15 {
    font-size: 15px;
}
.fs16 {
    font-size: 16px;
}
.eq2 {
    width: 50%;
}
.eq3 {
    width: 33%;
}
.eq4 {
    width: 25%;
}
img.photo {
    border: 12px solid #dcdcdc;
    margin: 0 20px 10px 0;
}
img.logocb {
    margin: 0 2px;
    border: 1px solid #727272;
}
h1 {
    font-size:18px;
    line-height:1.2em;
    font-weight:normal;
    color:#cdcdcd;
    border-bottom:2px solid #e1156d;
    padding:0 0 8px 0;
    margin: 3px 25px 0 0;
}

div.topPageTitle {
	color:#cdcdcd;
	border-bottom:2px solid #e1156d;
    margin: 3px 25px 0 0;
}

div.topPageTitle div.title {
	font-size:18px;
    line-height:1.2em;
    font-weight:normal;
}

div.prologue-separator {
    width: 60px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #e1156d;
}
div.zoneScroll {
    /*height: 520px;*/
    padding: 10px;
}
div.backlink {
    padding: 10px 0;
    text-align: center;
}
div.backlink a {
    font-size: 8px;
    color: #111111;
    text-decoration: none;
}
/*
 * button css3
 * color: pink
 */
.pinkButton, #pinkButton a {
   border-top: 1px solid #fc37a0;
   background: #f5066f;
   background: -webkit-gradient(linear, left top, left bottom, from(#cc1665), to(#f5066f));
   background: -moz-linear-gradient(top, #cc1665, #cb1363);
   padding: 5px 10px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 12px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   cursor: pointer;
}
.pinkButton:hover, #pinkButton a:hover {
   	background: #cc1665;
}
.pinkButton:active, #pinkButton a:active {
   	background: #f5066f;
}
/*
 * jquery scroller
 */
.scroll-pane{
    /*height: 485px;*/
    overflow:auto;
    position:relative;
}
/*
.scroll-pane.alt {
    height:520px;
}
*/
.scroll-pane .inner {
    padding:15px 25px 0 0;
    zoom:1
}
.scroll-pane .inner1 {
    padding:40px 15px 10px 0;
}
.jScrollPaneContainer {
    /*position: relative;
    overflow: hidden;
    z-index: 0;*/
}
.jScrollPaneTrack {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    background:url(../images/scroll.gif) repeat-y;
}
.jScrollPaneDrag {
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    background:url(../images/drag.gif) no-repeat center top;
    height:62px;
    margin:0 0 0 -2px;
}
.hideOverflow {
    overflow: hidden;
}

/*
 * contact page
 */
table.form-contact td {
    text-align: right;
    vertical-align: top;
}
table.form-contact input[type=text], table.form-contact input[type=password], table.form-contact textarea {
    border: 1px solid #dfdfdf;
    background-color: #e1156c;
    color: white;
    width: 300px;
}

/*
 * first question page
 */
table.form-first-question td {
    text-align: right;
    vertical-align: top;
}
table.form-first-question input[type=text], table.form-first-question textarea, table.form-first-question select {
    border: 1px solid #dfdfdf;
    background-color: #e1156c;
    color: white;
}
table.form-first-question input.full, table.form-first-question textarea.full, table.form-first-question select.full {
    width: 300px;
}

table.form-first-question select.full {
    width: 302px;
}

/*
 * comments page
 */
form#newComment input[type=text], form#newComment textarea, form#newComment select, form#formDisplayComments select, select#commentsNavigationPage {
    border: 1px solid #dfdfdf;
    background-color: #e1156c;
    color: white;
}
form#newComment textarea {
	position: static;	
}
table.comments {
	width: 100%;
}
table.comments td {
	padding: 3px 5px;
}
table.comments tr.title td {
	background-color: #e1156d;
	font-weight: bold;
}
table.comments tr.comment td {
	background: transparent url("../images/footer-bg.gif") repeat;
}
div.titleLine {
    background-color: #e1156d;
    color: white;
    padding: 3px 5px;
}
div.bodyLine {
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #e1156d;
    border-top: 0;
}
div.pageNavigation {
	padding: 20px 0 20px 0;
}

/*
 * faq page
 */
div.faq_title {
    color: #e43580;
    margin-bottom: 7px;
    font-weight: bold;
}
div.faq_body {
    margin-bottom: 16px;
}

textarea {
    position: absolute;
    height: 80px;
}
/*
 * horoscope page
 */
table.horoscope td {
    width: 267px;
    padding-bottom: 10px;
}
table.horoscope td.signe {
    width: 80px;
}
table.horoscope div.title {
    font-weight: bold;
}
table.horoscope div.date {
    font-style: italic;
    font-size: 11px;
}
table.horoscope div.link, table.horoscope div.date {
    padding-top: 4px;
}
div.horostitle {
	margin: 0 0 5px 0;	
}
div.horoscontent {
	margin: 0 0 15px 0;
}
/*
 * price page
 */
table.price {
    width: 694px;
    height: 110px;
    background: transparent url("../images/bg_price.png") no-repeat;
    margin: 0 0 8px 0;
}
table.price[cwHover=on]:hover {
    background: transparent url("../images/bg_price_hover.png") no-repeat;
    cursor: pointer;
}
table.price td {
    text-align: left;
    padding: 5px 0 0 10px;
    color: white;
}
table.price td.title {
    font-weight: bold;
    padding: 10px 0 5px 10px;
}
table.price td.last {
    padding: 5px 10px 0 10px;
}
table.price td img {
    margin: 0 10px 10px 0;
}
table.price table.flag {
	padding: 0;
	margin: 0;
	border: 0;
}
table.price table.flag td {
	padding: 0;
}
table.price table.flag td img {
	padding: 2px 6px 0 0;
	margin: 0;
}

/*
 * carousel
 */
.carousel {
	margin-left: auto;
	margin-right: auto;
	padding-left: 25px;
}
.carousel div {
	float: left;
}
div.prev, div.next {
	height: 29px;
	width: 57px;
	cursor:pointer;
}
div.prev {
	background:url(../images/prev-sprite.gif) no-repeat 0 0;
}
div.prev:hover {
	background-position:0 -29px;
}
div.next {
	background:url(../images/next-sprite.gif) no-repeat 0 0
}
div.next:hover {
	background-position:0 -29px;
}

/*
 * lightbox
 */
#gallery img {
	width: 120px;
	height: 90px;
	margin: 0 2px;
	border: 2px solid #dcdcdc;
}
#gallery img:hover {
	border: 2px solid #e1156d;
}

/*
 SoundManager 2: Basic MP3 player CSS
 ------------------------------------

 Clicks on links to MP3s are intercepted via JS, calls are
 made to SoundManager to load/play sounds. CSS classes are
 appended to the link, which are used to highlight the
 current play state and so on.

 Class names are applied in addition to "sm2_button" base.

 Default:

 sm2_button

 Additional states:

 sm2_playing
 sm2_paused

 eg.

 <!-- default -->
 <a href="some.mp3" class="sm2_button">some.mp3</a>

 <!-- playing -->
 <a href="some.mp3" class="sm2_button sm2_playing">some.mp3</a>


 Note you don't require ul.graphic / ul.flat etc. for your use
 if only using one style on a page. You can just use .sm2_button{}
 and so on, but isolate the CSS you want.

 Side note: Would do multiple class definitions eg.

 a.sm2_default.sm2_playing{}

 .. except IE 6 has a parsing bug which may break behaviour,
 applying sm2_playing {} even when the class is set to sm2_default.


 If you want to make your own UI from scratch, here is the base:

 Default + hover state, "click to play":

 a.sm2_button {}
 a.sm2_button:hover {}

 Playing + hover state, "click to pause":

 a.sm2_playing {}
 a.sm2_playing:hover {}

 Paused + hover state, "click to resume":

 a.sm2_paused {}
 a.sm2_paused:hover {}

*/


a.sm2_button {
	position:relative;
 	display:inline-block; /* If you worry old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */
	text-indent:-9999px; /* don't show link text */
 	overflow:hidden; /* don't draw inner link text */
 	vertical-align:middle;
	width: 28px;
	height: 28px;
	background: transparent url(../images/sound-off.png) no-repeat;
}

a.sm2_button:focus {
 	outline:none; /* maybe evil, but don't show the slight border outline on focus. */
}

a.sm2_button:hover {
	background: transparent url(../images/sound-on.png) no-repeat;
}

/* playing */
a.sm2_button.sm2_playing {
	background: transparent url(../images/sound-on.png) no-repeat;
}

a.sm2_button.sm2_playing:hover {
	background: transparent url(../images/sound-off.png) no-repeat;
}

/* paused */
a.sm2_button.sm2_paused {
	background: transparent url(../images/sound-off.png) no-repeat;
}

a.sm2_button.sm2_paused:hover {
	background: transparent url(../images/sound-on.png) no-repeat;
}

/*
 * table orders
 */

table.orders {
	width: 924px;	
}

table.orders.details {
	width: 700px;	
}

table.orders th, table.orders td {
	color: white;
	text-align: center;
}

table.orders td {
	padding: 1px 3px;
}

table.orders tr th {
	font-weight: bold;
	color: #E1156D;
	padding: 3px;
}

table.orders tr.highlight:hover {
	background-color: #E1156D;
	color: black;
	cursor: pointer;
}

/*
 * top banner
 */
 
div.top-banner {
	position: absolute;
	top: 25px;
	margin-left: 400px;
}

/*
 * shop
 */

table.shop {
	width: 100%;
}

table.shop td, table.shop_product td {
	vertical-align: top;
}

div.shop_cart_info {
	float: right;
	margin-right: 120px;
}

div.shop_cart_info table td {
	padding-right: 10px;
	font-weight: bold;
}

table.shop_product {
	margin-top: 20px;
}

table.shop_product a {
	outline: none;
}

table.shop_product img {
	margin-right: 20px;
}

table.shop_product div.name {
	font-weight: bold;
	color: #e1156d;
	font-size: 14px;
	margin-bottom: 10px;
}

table.shop_product div.desc {
	text-align: justify;
}

table.shop_product div.price {
	font-weight: bold;
	margin-top: 15px;
}

table.shop_product div.add{
	margin-top: 15px;
}

table.cart_details {
	margin-top: 3px;
}

table.cart_details td, table.cart_details th {
	padding: 3px 15px;
}

table.cart_details th {
	color: #e1156d;
}

/*
 * slider
 */
#slider .indent {
	padding:18px 17px 0 17px;
}
#slider.small {
	height:390px;
}
#viewport{
	width: 950px; /* Defines the size of the visible part of the carousel
		Attention : if you only want to see plain items in the viewport,
		the width of the viewport should take into account of :
		- the items width
		- the right and left padding of items
		- the number of items you want to see in the viewport
	 */
	overflow:hidden; /* Hides extra elements, those outside the viewport area */
	position:relative;
}
#viewport ul{
	position: relative; /* Enables positionning of elements inside viewport */
	padding: 0; /* Resets default - User Agent - style */
	margin: 0;
	overflow:hidden;
	
}
#viewport li{
	width: 310px; /* Defines the size of inner element */
	height: 473px;
	position:relative;
	float: left; /* Places list items side by side*/
	/* Cosmetic */
	margin: 0 10px 0 0;
}
#slider.small #viewport li {
	margin-top:-150px;
}
	#viewport li a {
		width:310px;
		height:473px;
		float:left;
		position:relative;
		display:block;
		text-decoration:none;
	}
		#viewport li a span {
			width:310px;
			height:473px;
			overflow:hidden;
			position:absolute;
			display:block;
			cursor:pointer;
		}
		#viewport li a em {
			width:310px;
			height:86px;
			position:absolute;
			left:0;
			bottom:-86px;
			background: rgba(0,0,0,0.8);
			color:#c0c0c0;
			font-style:normal;
		}
			#viewport li a em b {
				display:block;
				padding:22px 40px 0 20px;
				font-weight:normal;
			}
				#viewport li a em b i {
					color:#e1156c;
				}

#slider .navigation {
	width:100%;
	overflow:hidden;
}
#slider ul.navigation {
	padding: 10px 0 0 0;
	margin: 0;
}
#slider .navigation li {
    float:right;
    padding-left:5px;
}
#slider .navigation li a {
    width:57px;
    height:29px;
    overflow:hidden;
    float:left;
    text-indent:-9999em;
    cursor:pointer;
}
#slider .navigation li a#simplePrevious {
    cursor:pointer;
    background:url(../images/prev-sprite.gif) no-repeat 0 0;
}
#slider .navigation li a#simplePrevious:hover {
    background-position:0 -29px;
}
#slider .navigation li a#simpleNext {
    cursor:pointer;
    background:url(../images/next-sprite.gif) no-repeat 0 0
}
#slider .navigation li a#simpleNext:hover {
    background-position:0 -29px;
}

div.partenaire { width: 98%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #999; }
div.partenaire img { float: left; width: 80px; height: 60px; }
div.partenaire p { width: 845px; float: right; font-size: 12px; margin-right: 20px; }
div.partenaire p a { color: #e1156d; text-decoration: none; font-size: 12px; line-height: 18px; }
div.partenaire p a:hover { text-decoration: underline; }