/* [2007]CNPmusic par kiwii.fr */

/* ====================================================================
BASIC re.DEFINITIONS
-------------------------------------------------------------------- */

* { margin:0; padding:0; }
body { font: .9em "Arial", Tahoma, Helvetica, sans-serif; background-color: #fff; }  
a { color:#903; text-decoration:none; }
a:hover { color:#c90; }
a:active { color:#f00; text-decoration:none; }
p { color: #333; }
ul, ol { padding-left: 22px; }
img { border:0; }
abbr, acronym { font-style: normal; border-bottom: dotted 1px #ABB1B7; cursor: help; }
cite { font-style:italic; font-family: "Trebuchet MS"; font-size: 2.4em; color: #fff; }
code { font-size:110%; background-color: #fff; color: #000; padding:2px; }
kbd { font-size:100%; border:1px solid #ccc; padding:2px; color:#333; }
blockquote { padding:6px 20px 3px 20px; font-style: italic; text-align: justify; font-size:90%; }
fieldset, form, label { border: 0; }
del { color:#f00; font-size:90%; }  
table { width: 100%; }
hr.clear { clear:left; visibility: hidden; } /* question d'esthetique... */

/* code couleurs hexa de CNP */
.logoColor { color: #903; }
.logoFont { font-family: Arial Black; }
.jaune { color: #ff0; }
.orange { color: #fc0; }
.orangefonce { color: #f90; }
.rougefonce { color: #990033; margin-left: 0px;}
.tableau { color: #900; font-size:12px;  }
.cadrecouleur { background-color: #FAA3A3; }
.cadrenormal { background-color: #FFF; }
.gras { font-weight: bold; }
.normal { font-weight: normal; }
.survolgras:hover { font-weight: bold; }
.survolnormal:hover { font-weight: normal; }
.bleufonce { color: #036; }
.vertSousligne { color: #000084; border-bottom: 2px solid #CCCCFF; margin-bottom: 10px; }
.vertSousligne1 {  font-family: Verdana; background-color: #FFFFFF; background-image:url(img/test.gif); background-repeat : no-repeat; border: 1px solid #E0DBDB; padding: 3px; font-weight: bold; color: #FFF; border-bottom: 1px solid #000680; border-left: 0px solid #000680; margin-bottom: 30px; margin-top: 40px;}
.rougeSousligne1 { font-family: Verdana; background-color: #FF6699;  background-image:url(img/test1.gif); background-repeat : no-repeat; border: 1px solid #E0DBDB; padding: 3px; font-weight: bold; color: #FFF; border-bottom: 1px solid #C40040; border-left: 0px solid #C40040; margin-bottom: 30px; margin-top: 40px;}
.moduleinteractif { font-family: Verdana; background-color: #FF6699;  background-image:url(img/module.gif); background-repeat : no-repeat; border: 1px solid #E0DBDB; padding: 3px; font-weight: bold; color: #FFF; border-bottom: 1px solid #C40040; border-left: 0px solid #C40040; margin-bottom: 60px; margin-top: 40px;}
.sommaire { font-family: Verdana; background-color: #FF6699; border: 1px solid #E0DBDB; padding: 4px; font-weight: bold; color: #FFF; border-bottom: 2px solid #C40040; border-left: 0px solid #C40040; margin-bottom: 30px; margin-top: 40px;}

/* ====================================================================
COLUMNS LAYOUT 
-------------------------------------------------------------------- */

#page { width: 800px; left: 50%; margin: 24px auto 0 auto; background-color: transparent; text-align: left; }
#emailing { width: 800px; margin: 24px auto 0 auto; margin-left: auto; margin-right: auto; background-color: transparent; text-align: left; }
#contenu { margin-bottom: 20px; } 
#footer { clear: both; border-top: 1px solid #EAEBEE; text-align: center; padding-top: 14px; margin: 30px 0 20px 0; color: #666; font-size: .8em; }

/* ====================================================================
HEADER 
-------------------------------------------------------------------- */

#header h1 { margin-top: -40px; font-family: "Trebuchet MS"; font-style: italic; text-align: right; line-height: 70%; font-size: 2em; z-index: 3; }
#header h1 span {  font-size: 60%; color: #999; font-weight: 100;}
#header .logo { z-index: 4; } 
#header .cadrecentrer { margin-left:auto; margin-right:auto;}

ul#menu { margin: 20px 0 0 0; padding: 0; height: 30px; }
ul#menu li { display: inline; list-style-type: none; margin: 0; padding: 0; }
ul#menu li a { display: block; float: left; color: #666; font-size: 12px; padding: 9px 12px 7px 14px; background: #FFE1A4 url(img/cours-guitare/menu-split.gif) left no-repeat; }
ul#menu li a:hover { color: #000; background-color: #fff; }
ul#menu li.selected a { color: #fff; background-color: #000; }
ul#menu li.accueil a { color: #fff; background-color: #990033; }
ul#menu li img { border: 0; display: block; padding-left: 2px; }

/* ====================================================================
CONTENU 
-------------------------------------------------------------------- */

/* images aleatoires */
.rand-indexImg { height: 300px; background-color: #000; margin-bottom: 5px; }
.rand-indexImg-reduite { height: 100px; background-color: #000; margin-bottom: 20px; }
.rand-indexImg img, .rand-indexImg-reduite img { float: left; }
.aleas { position: absolute; z-index: 1}
		.positionne { position: absolute; margin: 24px 0 0 370px; z-index: 2; }
		.rand-indexImg ul { margin-top: 26px; }
		.rand-indexImg-reduite ul { margin-top: 0; }
		.rand-indexImg ul li, .rand-indexImg-reduite ul li  { margin-bottom: 20px; list-style-type: none; font-style: italic; line-height: 150%; }
		.rand-indexImg ul li a, .rand-indexImg-reduite ul li { color: #fff; font-size: 1.3em; }
		.rand-indexImg ul li a:hover { color: #999; }

/* taille des colonnes 1/3 */
.entier { padding: 16px; margin: 10px 0; }
.tiers { width: 216px; float: left; margin: 0 0 15px 0; }
.tiers h3 { padding: 0 0 0px 0; }

  /* cadres page accueil */
.cadre1 { background-color: #FFFFFF; color: #333; width: 257px; height: 260px; padding-top: 5px; padding-left: 2px; padding-right: 2px;}
		.cadre1 h3, .cadre1 small { color: #000;  }
		.cadre1 h3 { font-weight: bold; }
		.cadre1:hover {opacity:0.9;filter : alpha(opacity=90);} 
		
.cadre2 { background-color: #E7D769; color: #333; height: 260px; padding: 10px; }
		.cadre2 h2 { font-size: 1em; margin-bottom: 6px; }
		.cadre2 p { margin-bottom: 10px; font-size: .9em; }
		.cadre2 p a { color: #666; }
		.cadre2 img { float: right; border: 2px solid #CCCCCC; margin: 4px 0 4px 4px; }

.cadre3 { background-color: #FFFFFF; padding: 16px; }
		.cadre3 a { color: #000; }
		.cadre3 a:hover { color: #fc0; }
		.cadre3 h2, .cadre3 h3, .cadre3 h4, .cadre3 h5 { padding:0 0 8px 0; font-style: normal; font-weight: bolder; line-height: 100%; }
		.cadre3 h2 { font-size: 1.8em; }
		.cadre3 h2 a { color: #666; }
		.cadre3 h3 { font-size: 1.4em; }
		.cadre3 h4 { font-size: 1.2em; }

/* cadres niveau 2 */
.cadre4 { background-color: #EFFBF5; border: 1px solid #E7F3EE; padding: 16px; }
.cadre5 { background-color: #E7F3EE; border: 1px solid #DEE9E5; padding: 16px; }
.cadre6 { background-color: #E8E8FF; border: 1px solid #E0DBDB; padding: 16px; }
.cadre6a { background-color: #FFC4C4; border: 1px solid #E0DBDB; padding: 16px; }

.cadre_video { background-color: #444444; text-align: center; border: 0px solid #E0DBDB;}
.cadre_texte { background-color: #E0E0FF; border: font-weight: bold; padding-bottom: 20px; padding-top: 20px;}
.cadre_texte1 { background-color: #FEA9C0; border: font-weight: bold; padding-bottom: 20px; padding-top: 20px;}

.cadre7 { background-color: #F8CD85; border: 1px solid #E0DBDB; padding: 16px; }
.cadre8 { width: 390px;  float:left; background-color: #FFFFFF; border: 0px solid #FFFFFF; opacity:1; }
.cadre9 { width: 390px;  height: 200px; vertical-align: top; background-color: #000000; border: 0px solid #000000; }
.cadre9:hover {opacity:0.8;filter : alpha(opacity=80);} 
.cadre10 { width: 390px;  height: 100px; vertical-align: top; float:left;  float:top; background-color: #000000; border: 0px solid #000000; }
.cadre10:hover {opacity:0.8;filter : alpha(opacity=80);} 
.cadre11 { width: 158;  height: 200px; background-color: #000000; border: 0px solid #000000; }
.cadre11:hover {opacity:0.8;filter : alpha(opacity=80);} 
.cadre12 { width: 100;  height: 126px; background-color: #000000; border: 0px solid #000000; }
.cadre12:hover {opacity:0.8;filter : alpha(opacity=80);} 
.cadre13 { width: 200;  height: 269px; background-color: #000000; border: 0px solid #000000; }
.cadre13:hover {opacity:0.8;filter : alpha(opacity=80);}
.cadre14 { width: 140;  height: 188px; background-color: #000000; border: 0px solid #000000; }
.cadre14:hover {opacity:0.8;filter : alpha(opacity=80);}
.cadre15 { width: 200;  height: 173; background-color: #000000; border: 0px solid #000000; }
.cadre15:hover {opacity:0.8;filter : alpha(opacity=80);}
.cadre16 { width: 99;  height: 137; background-color: #000000; border: 0px solid #000000; }
.cadre16:hover {opacity:0.8;filter : alpha(opacity=80);}
.cadre17 { width: 800;  height: 5; background-color: #FFFFFF; padding-top: 5px; border: 0px solid #FFFFFF; }
.cadre20 { background-color: #FCFDC6; border: 1px solid #E0DBDB; padding: 16px; }

.cadre21 { width: 390px;  height: 100px; vertical-align: top; float:left;  float:top; background-color: #FFE1A4; border: 0px solid #FFFF66; padding: 5px; padding-bottom: 5px;}
.cadre22 { width: 120;  height: 152px; background-color: #000000; border: 4px solid #FFCC00; }
.cadre22:hover {opacity:0.8;filter : alpha(opacity=80);} 
.cadre22a { width: 120;  height: 152px; background-color: #000000; border: 0px solid #000000; opacity:1;filter : alpha(opacity=100);}
.cadre22a:hover {opacity:0.8;filter : alpha(opacity=80);} 
.cadre22b { width: 120;  height: 152px; background-color: #000000; border: 0px solid #000000; opacity:1;filter : alpha(opacity=100);}
.cadre22b:hover {opacity:0.8;filter : alpha(opacity=80);} 

.cadre30 { width: 390px;  height: 40px; padding-top: 5px; background-color: #FFFFFF; border: 0px solid #000000; opacity:1; }
.cadre30:hover {opacity:0.7;filter : alpha(opacity=70);} 


.cadre31 { width: 390px;  height: 40px;  vertical-align: top; padding-top: 5px; vertical-align: top; background-color: #FFFFFF; border: 0px solid #000000; }
.cadre31:hover {opacity:0.7;filter : alpha(opacity=70);} 

.cadre32 { width: 390px; font-family: "Arial"; margin: 20px; background-color: #F0E9B7; border: 0px solid #FFFF66; padding-left: 5px;}

.acheter { background-color: #690; padding: 4px 8px; margin: 20px 0 10px 180px; color: #fff; text-decoration: none; }

.sansPuce { list-style-type: none; font-size: 90%; padding-left: 0; }
.sansPuce a { color: #333; }
.sansPuce a:hover { color: #900; }

/* cadre degrade */
#bg-degrade { background: #000 url(../img/cours-guitare/bg-video.png) repeat-x; margin-bottom: 20px; height: 292px; }
#bg-degrade2 { background: #fff url(../img/cours-guitare/bg-video2.png) repeat-x; margin-bottom: 20px; height: 292px; }
#bg-degrade3 { background: #fff url(../img/cours-guitare/bg-video3.png) repeat-x; margin-bottom: 20px; height: 292px; }
#bg-degrade4 { background: #fff url(../img/cours-guitare/bg-video4.png) repeat-x; margin-bottom: 20px; height: 292px; }
#bg-degrade5 { background: #fff url(../img/cours-guitare/bg-video5.png) repeat-x; margin-bottom: 20px; height: 292px; }
#bg-degrade6 { background: #fff url(../img/cours-guitare/bg-video6.png) repeat-x; margin-bottom: 20px; height: 292px; }
#bg-degrade7 { background: #fff url(../img/cours-guitare/bg-video7.png) repeat-x; margin-bottom: 20px; height: 292px; }
.chapeau { width: 410px; color: #fff; padding: 20px; }
.chapeau h1 { color: #ff0; font-family: "Trebuchet MS"; font-weight: 100; margin: 0 0 20px 0; font-size: 2em;  }
.chapeau p { color: #fff; line-height: 130%; font-weight: 100; }
.chapeau p a, .chapeau li a { color: #DAE68E; }
.chapeau p a:hover, .chapeau li a:hover { text-decoration: underline; }
.chapeau p a.lienfondvert { background-color: #690; padding: 4px 8px; margin: 20px 0 10px 180px; color: #fff; text-decoration: none; }
.player { border: 3px solid #000; padding: 0; }