/* ==============================================
  FEUILLE DE STYLES DES GABARITS HTML/CSS
   © SE Beaune Handball 2009-2011
   ============================================== */


/* --- COULEURS --- */

/* Général */
body {
	padding: 20px 5px;
	color: #FFF;
	background-color: #006;
}

/* Menu de navigation vertical */
#navigation {
	float: left;
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	width: 25%;
	font-size: 0.9em;
	text-align: center;
	background-image: url(img/fond.jpg);
}
#navigation img {
	border: none;
	text-align: left;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	padding-right: 5px;
	padding-left: 10px;
}
#navigation a {
	color: #FFF;
	text-decoration: none;
}
#navigation a:visited{
	color: #FFF;
	text-decoration: none;
}
#navigation a:hover, #secondaire a:focus {
	color: #09F;
	font-weight: bold;
	text-decoration: underline;
}
#navigation p {
	line-height: 1.5em;
	text-align: center;
	padding: 0 0 20px 0;
}
#navigation p img {
	border: none;
	text-align: left;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	padding-right: 3px;
}
#navigation li {
	list-style: url(img/png/liste1.png);
	text-align: justify;
	line-height: 1.5em;
}

/* Menu de navigation horizontal */
#horizontal {
	color: #FFF;
	background-color: #006;
	text-decoration: none;
	padding: 0px 10px;
	margin-top: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	line-height: center;
}
#horizontal ul {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
#horizontal li.gauche {
	float: left;
	margin-right: 40px;
	color: #FFF;
}
#horizontal li.droite {
	float: right;
	color: #FFF;
	margin-left: 40px;
	padding: 0px 0;
}
#horizontal li.centre {
	float: left;
	margin-left: 30px;
	font-size: 0.9em;
}
#horizontal a {
	padding: 0px;
	color: #FFF;
	line-height: 1.5;
	font-size: 0.9em;
	text-decoration: none;
}
#horizontal li a:hover, #horizontal li a:focus{
	font-weight: bold; /* Affichage lors du passage de la souris sur les sous-titres du menu horizontal */
	color: #09F;
	text-decoration: underline;
}
#horizontal li a:visited{
	color: #FFF; /* Affichage après un clic sur un sous-titre du menu horizontal */
}
#horizontal p img {
	border: none;
	text-align: center;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	padding-right: 5px;
}

/* Menu de navigation horizontal-bis */
#horizontal-bis {
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	line-height: center;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 0.8em;
}
#horizontal-bis p {
	text-align: justify;
	font-style: italic;
}
#horizontal-bis img {
	border: none;
	text-align: right;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	padding-right: 10px;
}

/* Contenu principal */
#principal {
	color: #FFF;
	font-size: 1em;
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	margin-left: 300px;
	margin-right: 300px;
	padding: 0 10px;
	text-align: justify;
}
#principal p, #principal li {
	line-height: 1.5em;
	text-align: justify;
	color: #FFF;
}
#principal p a {
	color: #0FF;
	text-decoration: none;
}
#principal p a:visited{
	color: #0FF;
}
#principal p a:hover, a:active{
	font-weight: bold;
	color: #09F;
	text-decoration: underline;
}
#principal a {
	color: #0FF;
	text-decoration: none;
}
#principal a:visited{
	color: #0FF;
}
#principal a:hover, a:active{
	font-weight: bold;
	color: #09F;
	text-decoration: underline;
}
#principal img {
	border: none;
	text-align: left;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	padding-right: 10px;
}
#principal p img {
	border: none;
	text-align: right;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	padding-left: 50px;
	padding-right: 10px;
}
#principal caption { /* Titre du tableau */
	margin: auto;
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 20px;
}
#principal table { /* Le tableau lui-même */
	border: none;
	border-collapse: collapse;
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	line-height: 1.5em;
}
#principal td { /* Les cellules normales */
	border: none;
	text-align: left;
	padding: 0 8px 0 0;
}
#principal table a {
	color: #0FF;
	text-decoration: none;
}
#principal table a:visited{
	color: #0FF;
}
#principal table a:hover, a:active{
	font-weight: bold;
	color: #09F;
	text-decoration: underline;
}
.col1 {
	width: 28%;
}
.col2 {
	width: 5%;
	text-align: center;
}
.col3 {
	width: 2%;
	text-align: center;
}

/* Contenu secondaire */
#secondaire {
	float: right;
	width: 25%;
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	font-size: 0.9em;
	color: #FFF;
	text-align: center;
}
#secondaire a {
	color: #FFF;
	text-decoration: none;
}
#secondaire a:visited{
	color: #0FF;
	text-decoration: none;
}
#secondaire a:hover, #secondaire a:focus {
	color: #09F;
	font-weight: bold;
	text-decoration: underline;
}
#secondaire p {
	font-size: 2em;
	line-height: 1.5em;
	text-align: center;
	color: #FF0;
	font-style: bold;
	border: 2px inset #FF0;
	padding-top: 10px;
	padding-bottom: 10px;
}
#secondaire a img {
	width: 265px;
	height: 165px;
	border: 2px inset #09F;
	text-align: center;
}
#secondaire p a {
	color: #FF0;
	text-decoration: none;
}
#secondaire p a:visited{
	color: #FF0;
	text-decoration: none;
}
#secondaire p a:hover, #secondaire p a:focus {
	color: #09F;
	text-decoration: none;
}
#secondaire p img {
	border: none;
	text-align: right;
	width: 30px;
	height: 30px;
	padding-right: 10px;
}
#secondaire table {
	border-collapse: collapse;
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	border: none;
}
#secondaire td {
	border: none;
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	text-align: center;
}

/* --- POSITIONNEMENT --- */

/* Page */
#global {
	width: 90%;
	max-width: 90em;
	min-width: 850px;
	margin-left: auto;
	margin-right: auto;
}

/* En-tête */
#entete {
	padding: 0 0;
	background-image: url(img/header.jpg);
	background-repeat: no-repeat;
	width: 100%;
	height: 150px;
}

/* Bloc central */
#centre {
	width: 100%;
	overflow: hidden;
}
#centre-bis {
	width: 100%;
	overflow: hidden;
}

/* Pied de page */
#pied p {
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	color: #FFF;
	font-size: 0.9em;
	text-align: center;
	padding-top: 50px;
	line-height: center;
	text-decoration: none;
}
#pied ul {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
#pied li.gauche {
	float: left;
	margin-right: 40px;
	color: #FFF;
}
#pied li.droite {
	float: right;
	color: #FFF;
	margin-left: 40px;
	padding: 3px 0;
}
#pied a {
	padding: 6px;
	color: #FFF;
	line-height: 1.5;
	font-size: 0.9em;
	text-decoration: none;
}
#pied li a:hover, #pied li a:focus{
	font-weight: bold; /* Affichage lors du passage de la souris sur les sous-titres du menu horizontal */
	color: #09F;
	text-decoration: underline;
}
#pied li a:visited{
	color: #FFF; /* Affichage après un clic sur un sous-titre du menu horizontal */
}
#pied img {
	border: none;
	text-align: center;
	vertical-align: middle;
	padding-right: 5px;
	padding-top: 50px;
}

/* Mention de copyright */
#copyright p {
	font-family: "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	color: #006;
	background-color: #FFF;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	line-height: 1.5em;
	padding: 10px 10px 10px 0;
}