/*
Theme Name: 
Description: Site des Ateliers de Percussion (Yverdon-les-Bains, Suisse), basé sur les maquettes de Gilles Gfeller.
Version: 1.0
Author: Gilles Gfeller 
Author URI: 
*/
/* Begin Typography & Colors */

body {
	background-image: url(../images/navig/papier_01.gif);
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
	font-size:12px;
	margin:0;
	padding:p;
}

td,select,form,option,input {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:11px;}
p {margin-bottom:10px}
td {vertical-align:top;}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

div {border:0px solid red;	text-align:left;}

img {border:0px none #FFF;}

h1,h2,h3,h4,h5,h6 {margin-bottom:0px;margin-top:0px;}

h1 {font-size:16px;margin-bottom:20px;margin-top:25px;font-weight:normal;text-transform:uppercase;}
h2 {font-size: 14px;text-transform:uppercase;}
h3 {font-size: 13px;text-transform:uppercase;}
h4 {font-size: 12px;text-transform:uppercase;}

a:link,a:visited {text-decoration:none; color:#FF9902;font-weight:bold;}
a:hover,a:active {text-decoration:none; color:#666;font-weight:bold;}


/* Template */

#page {width:780px;margin-left:auto;margin-right:auto; background: url(../images/navig/bg-content.jpg);}
#header {position:relative;background:url(../images/header.jpg) no-repeat bottom #FFF;height:170px;}
#logo-djembe{position:absolute;left:585px;top:13px; width:169px; height:216px;background:url(../images/logo-djembe.gif); z-index:2;}
#banner{ width:493px; height:128px; border-right: #660000 2px solid; float:left;}
#player {position:relative;left: 40px; width:202px;height:20px; padding-top: 95px; float:left; z-index:0}

#head-content { background: url(../images/navig/bg-head-content.jpg) no-repeat #FFFFFF; height:128px;}  

#content { background: url(../images/navig/bg-content.jpg)#FFF; height: 100%; display:block;}

#colonne1 {position: relative;width:433px; padding: 20px 30px 20px 30px;vertical-align:top; border-right: #660000 2px solid; float:left; background-color:#FFFFFF;}
#colonne1 h1 {font-size: 18px;font-weight:bold;color: #FF9902;text-transform:uppercase;padding-top: 10px;}
#colonne1 h2 {font-size: 14px;font-weight:bold;color: #FF9902;text-transform:uppercase;padding:20px 0 10px 0;}


#colonne2 {position: relative;width: 265px;padding: 10px 10px 20px 10px;vertical-align:top; float:left; background-color:#FFFFFF;}
#colonne2 a {font-size: 10px;color: #FF9902;}
#colonne2 a:hover {font-size: 10px;color: #666;}

#colonne2 .titre { font-size: 14px;color: #FF9902;text-transform:uppercase; font-weight:bold; margin-bottom:10px;}
#colonne2 .news-icone { float:left}
#colonne2 .news-content { margin-left: 48px}#colonne2 .news-link { text-align:right; padding-right: 5px;}

.news{background-color:#EEE;padding:10px;margin-bottom: 5px;}
.news:hover{background-color:#DDD}
.links{background-color:#EEE;padding:3px;margin-bottom: 5px;}
.links:hover{background-color:#DDD}
.instruments {width:110px; vertical-align: bottom;}
.galerie { width:50px; height:50px; margin-right:10px;}
.galerie:hover { filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;}

#colonne3 {position: relative;width: 245px;padding: 27px 20px 20px 20px;vertical-align:top;}
#colonne3 h1 {font-size: 14px;color: #666;text-transform:uppercase;}


.top-head {text-align:right;height: 54px;background-color:#FFFFFF;}

.space1 {font-size:1px;width:2px;background-image:url(../images/navig/pix-2x2-brun.gif);background-repeat:repeat-y;}

#footer {background: #FFF; padding: 0px; width:780px; text-align:center; clear:both;}
#footer #adresse{font-size: 10px;color: #FF9902; text-align:center; width: 493px; border-right: #660000 2px solid; float:left;}
#subfooter {clear:both; background:url(../images/navig/bg-footer.jpg) no-repeat; height:18px;}

/* Navigation */

#navig { position:absolute;left:23px;top:33px;text-align:left;}
#navig #menu { margin: 0; padding: 0; }
#navig #menu li { display: inline; }
#navig #menu li a { float: left;overflow: hidden; margin-right:30px; }

/* off */
#navig #menu li#menu-accueil a { 
background: url(../images/navig/bnt-accueil-off.jpg) no-repeat; width: 72px; height:37px;}
#navig #menu li#menu-cours a { 
background: url(../images/navig/bnt-cours-off.jpg) no-repeat; width: 66px; height:37px;}
#navig #menu li#menu-instruments a { 
background: url(../images/navig/bnt-instruments-off.jpg) no-repeat; width: 106px; height:37px;}
#navig #menu li#menu-animations a { 
background: url(../images/navig/bnt-animations-off.jpg) no-repeat; width: 103px; height:37px;}
#navig #menu li#menu-contact a { 
background: url(../images/navig/bnt-contact-off.jpg) no-repeat; width: 84px; height:37px;}

/* anim */
#navig #menu li#menu-accueil a:hover { 
background: url(../images/navig/bnt-accueil-anim.gif) no-repeat; width: 72px; height:37px;}
#navig #menu li#menu-cours a:hover { 
background: url(../images/navig/bnt-cours-anim.gif) no-repeat; width: 66px; height:37px;}
#navig #menu li#menu-instruments a:hover { 
background: url(../images/navig/bnt-instruments-anim.gif) no-repeat; width: 106px; height:37px;}
#navig #menu li#menu-animations a:hover { 
background: url(../images/navig/bnt-animations-anim.gif) no-repeat; width: 103px; height:37px;}
#navig #menu li#menu-contact a:hover { 
background: url(../images/navig/bnt-contact-anim.gif) no-repeat; width: 84px; height:37px;}

/* on */
#navig #menu li#menu-accueil a.selected { 
background: url(../images/navig/bnt-accueil-on.jpg) no-repeat; width: 72px; height:37px;}
#navig #menu li#menu-cours a.selected { 
background: url(../images/navig/bnt-cours-on.jpg) no-repeat; width: 66px; height:37px;}
#navig #menu li#menu-instruments a.selected { 
background: url(../images/navig/bnt-instruments-on.jpg) no-repeat; width: 106px; height:37px;}
#navig #menu li#menu-animations a.selected { 
background: url(../images/navig/bnt-animations-on.jpg) no-repeat; width: 103px; height:37px;}
#navig #menu li#menu-contact a.selected { 
background: url(../images/navig/bnt-contact-on.jpg) no-repeat; width: 84px; height:37px;}