@CHARSET "UTF-8";

@font-face {
	font-family: kunstler;
	src: url("/public/fonts/Kunstler.eot") /* EOT file for IE */
}

@font-face {
	font-family: kunstler;
	src: url("/public/fonts/Kunstler.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
	font-family: vintage;
	src: url("/public/fonts/vintage.eot") /* EOT file for IE */
}

@font-face {
	font-family: vintage;
	src: url("/public/fonts/vintage.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
	font-family: KeeponTruckin;
	src: url("/public/fonts/KeeponTruckin.eot") /* EOT file for IE */
}

@font-face {
	font-family: KeeponTruckin;
	src: url("/public/fonts/KeeponTruckin.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
	font-family: CourrierNewBold;
	src: url("/public/fonts/courier_new_bold.eot") /* EOT file for IE */
}

@font-face {
	font-family: CourrierNewBold;
	src: url("/public/fonts/courier_new_bold.ttf") /* TTF file for CSS3 browsers */
}



/***********************/
/******** COMMON *******/
/***********************/

a {
	text-decoration: none;
}

p {
	margin: 0;
}

img {
	border: none;
	border-width: 0px;
	margin: 0;
}

body {
	height: 100%;
	background-image: url('/public/images/whiteBck.png');
	background-repeat: repeat;
	font-family: "Lucida Grande", calibri, Arial, sans-serif;
	padding: 0px;
	margin: 0px;
}

h2{
	font-size:1.6em;
	margin-top: 0em;
}

h3{
	font-size:1.4em;
}

h4{
	font-size:1.2em;
}

ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

ul h2 {
	cursor: pointer;
}

ul h3{
	font-size:1.6em;
	cursor: pointer;
}

ul h4{
	font-size:1.4em;
	cursor: pointer;
}

table{
	margin:0px;
}

td {
	padding: 5px;
}

.tdCenter {
	text-align: center;
}

.tdLeft {
	text-align: left;
}

.tdRight {
	text-align: right;
}

/***********************/
/******* MAIN ********/
/***********************/

/* all = header+main+player+footer */
.all {
	position: absolute;
	top:47%;
	left:50%;
	margin-left: -500px;
	margin-top: -325px;
	width:1000px;
	height:650px;	
}

/* main = menu + content */
.main {
	width: 950px;
	height: 480px;
	margin: 2% auto 5px auto;
}

/* content */
.content {
	width: 787px;
	height: 100%;
	float: left;
	text-align: justify;
}



/***********************/
/******* HEADER ********/
/***********************/
.header {
	color: black;
	font-family: "vintage";
	margin-top: 2%;
	margin-left: 0;
	height: 90px;
}

.header h1 {
	font-size: 0.8em;
	margin: 0 5px;
	display: none;
}

.logo {
	
}

/***********************/
/******* MENU **********/
/***********************/

.menu {
	float: left;
	width: 163px;
	height: 100%;
}

.menu a {
	color: black;
}

.menu a:hover{
	color: #555;
}

.menu ul {
	margin-top: 35%;
	list-style-position: inside;
	padding: 1em;
}

.menu ul h2 {
	font-size: 0.9em;
}


/***********************/
/******* FOOTER ********/
/***********************/

.footer {
	position: absolute;
	width: 475px;
	left: 50%;
	bottom: 5px;
	margin-left: -225px;
	text-align: center;
	font-size: 0.6em;
	z-index: 3;
}

.footer	a {
	color: black;
}


/***********************/
/******* PICTURE *******/
/***********************/

.picture {
	position: relative;
	float: right;
}

.light {
	z-index: 6;
}

#lightLeft{
	float:left;
	margin-right: 0px;
}

#lightRight{
	float: right;
	margin-left: 0px;
}

#pictureMain {
	margin-right: 12%;
}

/***********************/
/******* PLAYER ********/
/***********************/

.player {
	position: absolute;
	bottom: 5px;
	margin-left: 1%;
}

#songTitle {
	color: grey;
	font-size: 0.5em;
	margin: 5px 20px;	
}


/***********************/
/******* BOXES *********/
/***********************/

.box1, .box1Disco, .box1Lyrics, .box2, .box2Left, .box2Right, .box4, .box4Left, .box4Right {
	position: relative;
	/*overflow: auto;*/
	font-size: 0.64em;
	font-weight: bolder; 
	border-style:solid;
	border-width: 2px;
	padding: 5px;
}

.box1, .box1Disco, .box1Lyrics {
	margin-top:20px;
	padding: 10px 5px;
	max-height : 400px;
}

.box1 {
	width : 430px;
	margin-left: 102px;
	
}

.box1Disco {
	width : 442px;
	margin-left: 165px;
}

.box1Lyrics {
	margin-left: 150px;
	margin-top: 25px;
	padding-bottom: 15px;
	width :450px;
	text-align: center;
}

.box2 {
	min-width: 270px;
	margin-left: 190px;
	margin-top: 30px;
}

.box4Left, .box4Right {
	margin-top: 10px;
	width:350px;
}

.box4Left {
	margin-left:40px;
}

.box4Right {
	margin-left:437px;
}

.listBox {
	float: left;
	background-color: white;
	color: #777;
	font-size: 0.45em;
	opacity: 0.85;
}

.listBox ul {
	margin-left: 10px;
}

.listBox a {
	color: #777;
}

.listBox a:hover {
	color: #555;
}

.listBox h4 {
	color: #555;
}

.listBox h3 {
	color: #333;
}
	

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

/***** PURPLE ******/
#purpleBox {
	background-color: #F6E5F5;
	color: #86177E; 
}

#purpleBox a {
	color: 	#6E1368;
}

#purpleBox .jspTrack{
	background: #F6E5F5;
	opacity: 0.6;
}

#purpleBox .jspDrag{
	background: #86177E;
}

/***** BLUE *****/
#blueBox {
	background-color: #E2E2FA;
	color: #1B1B83;
}

#blueBox a {
	color: #161669;
}
	
#blueBox .jspTrack{
	background: #E2E2FA;
	opacity: 0.6;
}

#blueBox .jspDrag{
	background: #161669;
}


/***** RED ******/
#redBox {
	background-color: #FAE2E4;
	color: #BF0000;
}

#redBox a{
	color: #990000;
}

#redBox .jspTrack{
	background: #FAE2E4;
	opacity: 0.6;
}

#redBox .jspDrag{
	background: #BF0000;
}


/****** GREEN ******/
#greenBox {
	background-color: #e0fcd4;
	color: #76B541;
}

#greenBox a{
	color: #659C38;
}

#greenBox .jspTrack{
	background: #E0FCD4;
	opacity: 0.6;
}

#greenBox .jspDrag{
	background: #76B541;
}

/***********************/
/******* APROPOS *******/
/***********************/
#pictureApropos {
	margin-top: 10%;
	right: 15%;
	display: none;
}

#tdAProposGroupe {
	width : 450px;
}

/************************/
/***** DISCOGRAPHIE *****/
/************************/
#pictureDisco {
	right: 15%;
	margin-top: 7%;
	display: none;
}

#disco {
	width:545px;
	margin-left: -10px;
}

#albumsList {
	margin-top: 150px;
}

#trackList {
	margin-top:0px;
	height: 170px;
}

#trackList ul {
	margin-left: 15px;
}

#trackList h4 {
	font-size: 1em;
	line-height: 0.3em;
}

#credits td {
	height: 170px;
}

#purpleSparks {
	color:#86177E;
	display: inline;
	font-family: KeeponTruckin, lucida, arial;
	font-size: 2.5em;
}

#greenFlickers {
	display: inline;
	color: #76B541;
	font-family: CourrierNewBold,lucida, arial;	
	font-size: 2.3em;
}

/*********** LYRICS ***********/
#lyricsList {
	list-style-type: none;
	padding: 0px;
	margin-left: 15px;;
}

#lyricsBox {
	width: 400px;
	font-size: 0.62em;
	margin-left: 30%;
	text-align: center;
}

/***** COMMENT ACHETER ******/
#achat {
	margin-top: 65px;
	text-align: center;
}

#pictureAchat{
	right: 5%;
	margin-top: 10%;
	display: none;
}

/***** CONCERTS ******/
#concerts {
	text-align: center;
}

#pictureConcerts {
	right: 5%;
	margin-top: 11%;
	display: none;
}

/***** CONTACT *****/
#pictureContact {
	right: 15%;
	margin-top: 7%;
	display: none;
}

#contact {
	text-align: center;
	margin-top: 100px;
	width: 300px;
}

#contact a {
	color: #76B541;
}

#contact h3 {
	font-size: 1.2em;
}

/***** SITE MAP *****/
#listSiteMap {
	margin-left: 15%;
	font-size: 0.43em;
}

#listSiteMap ul{
	list-style-type: disc;
}

.listInList {
	font-size: 0.85em;
}