/*
Feuille de style accueil du site studio103.fr
Copyright 2006 - Yves Tannier - http://www.grafactory.net
*/

/* element de configuration generale
-------------------------------------------------------- */
* { margin: 0; padding: 0; border: 0; }
html { font-size: 100%; }
body {
    font: 14px Helvetica,sans-serif;
    color: #000;
}
img {
    border: 0;
}   
a {
    color: #000;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
ul, li {
    list-style-type: square;
}
ul {
	padding-left: 20px;
	margin-top: 5px;
}
.spacer {
  	clear: both;
  	font-size: 2px;
	height: 2px;
}
.hide {
    display: none;
}

/* contenu de la page
-------------------------------------------------------- */
#global {
	background: url(../img/interface/page_accueil_nb.png) no-repeat;
	background-position: 0px 100px;
	position:absolute;
	left: 50%;
	width: 950px;
	height: 632px;
	margin-left: -475px;
}

/* logo */
#logo {
	float: left;
}
#menu {
	float: right;
}
#conteneur_accueil {
	position: absolute;
	top: 100px;
	width: 950px;
	height: 400px;
}
#menu_accueil {
    position: relative;
    height: 400px;
    width: 950px;
    margin: 0;
}
#menu_accueil li {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu_accueil li, #menu_accueil a {
    display: block;
}
#menu_accueil span {
    display: none;
}
#guitare {right: 75px; bottom: 30px;}
#guitare a {width: 80px; height: 200px;}
#guitare a:hover, .guitare_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -815px -270px no-repeat;
}
#materiel {right: 185px; bottom: 30px;}
#materiel a {width: 105px; height: 195px;}
#materiel a:hover, .materiel_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -680px -275px no-repeat;
}
#mixage { right: 290px; bottom: 40px;}
#mixage a {width: 230px; height: 180px;}
#mixage a:hover, .mixage_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -450px -280px no-repeat;
}
#informatique {right: 385px; top: 115px;}
#informatique a {width: 70px; height: 60px;}
#informatique a:hover, .informatique_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -515px -215px no-repeat;
}
#ecoute {right: 460px; top: 80px;}
#ecoute a {width: 40px; height: 55px;}
#ecoute a:hover, .ecoute_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -470px -180px no-repeat;
}
#ecouteb {right: 220px; top: 60px;}
#ecouteb a {width: 70px; height: 65px;}
#ecouteb a:hover, .ecouteb_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -680px -160px no-repeat;
}
#casque {left: 285px; bottom: 135px;}
#casque a {width: 50px; height: 50px;}
#casque a:hover, .casque_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -285px -315px no-repeat;
}
#micro {left: 25px; bottom: 220px;}
#micro a {width: 50px; height: 50px;}
#micro a:hover, .micro_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -25px -230px no-repeat;
}
#microb { left: 115px; bottom: 0px;}
#microb a {width: 80px; height: 20px;}
#microb a:hover, .microb_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -115px -480px no-repeat;
}
#ampli { left: 85px; bottom: 25px;}
#ampli a {width: 135px; height: 100px;}
#ampli a:hover, .ampli_hover {
    background: transparent url(../img/interface/page_accueil_color.png) -85px -375px no-repeat;
}
#footer {
	position: absolute;
	bottom: 20px;
	right: 0;
}
#footer img {
	vertical-align: middle;
}