﻿/*
Design du site de la chatterie Hyrrokkin
*/

body
{
   margin : auto;
   width: 1024px;
   height : 651px ;    
   background-color : #202020 ;
   Background-image : url("../images/DSC_4154.png") ;
   color : gray ;
}
#col1 {
	float: left; 
	width: 200px;
}
#col2
{ 
	float: right; 
	width : 824px ;
}

table
{ /* Les bordures du tableau seront collées (plus joli) */
   border-width : thin;
   border-style : solid;
   border-color:gray;
   border-collapse:collapse;
   
   padding : 0px 0px 0px 0px;
   width:100%;
}
td
{
   vertical-align : top ;
   padding : 0px 0px 0px 0px;
   border-width : thin;
   border-style : solid;
   border-color:gray;
   border-collapse:collapse;

}
input, textarea
{
   font-family: Verdana, serif; /* On modifie la police du texte tapé l'intérieur des champs */
   font-size : 12px;
   text-align : left ;
   background-color : #e1c2b0 ;
}
legend
{
	color : white ;
}
/* La marge d'informations à gauche */
.marge_hyrrokkin
{
	margin : 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height : 382px ;
	width : 200px ;
	background-image : url("../images/D2X0054.png");
	background-repeat: no-repeat;
}
.marge_contextuelle
{
	margin : 0px 0px 0px 0px;
	padding : 10px 0px 0px 0px;
	height : 219px ;
	width : 200px ;
	background-color : black;
	text-align : center;
	vertical-align : middle;
}
.marge_contextuelle p
{
	text-decoration : none ;
	margin-top : 0px ;
	line-height : 28px ;
	font-size : 12px;
	font-family : verdana , serif ;
	padding-left : 5px;
	padding-right : 5px ;
	text-align : center ;
	vertical-align : middle ;
	font-variant : small-caps ;
	color : white;
}
.marge_contextuelle a
{
	text-decoration : none ;
	margin-top : 0px ;
	line-height : 28px ;
	font-size : 12px;
	font-family : verdana , serif ;
	padding-left : 5px;
	padding-right : 5px ;
	text-align : center ;
	vertical-align : middle ;
	font-variant : small-caps ;
	color: gray;
}

.marge_contextuelle a:hover
{
	text-decoration : none ;
	color : #ff8250 ;
}
.marge_contextuelle a:active
{
	text-decoration : none ;
	color : #ff8250 ;
}
.marge_actualites_hyrrokkin
{
	padding : 5px;
	height : 102px ;
	width : 190px;
	background-image : url("../images/marge.png");
	background-repeat: no-repeat;
	background-color : black ;
	overflow : auto ;
}
.marge_actualites_hyrrokkin h1
{
   color: gray;
   text-align: center;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.marge_actualites_hyrrokkin h4
{
   color: #ff8250;
   text-align: left;
   font-style : italic ;
   font-family: Verdana, serif;
   font-size : 8px ;
}
.marge_actualites_hyrrokkin p
{
   color: gray;
   text-align: left;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.marge_livreor_hyrrokkin
{
	padding : 0px 0px 0px 0px;
	height : 107px ;
	width : 200px;
}
.marge_livreor_hyrrokkin img
{
	height : auto ;
	width : 194px ;
	border : 3px inset gray ;
}
.marge_livreor_hyrrokkin h1
{
   color: gray;
   text-align: center;
   text-decoration  : underline ;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.marge_livreor_hyrrokkin h4
{
   color: #ff8250;
   text-align: left;
   font-style : italic ;
   font-family: Verdana, serif;
   font-size : 8px ;
}
.marge_livreor_hyrrokkin p
{
   color: gray;
   text-align: left;
   font-family: Verdana, serif;
   font-size : 10px ;
}
/* L'en tête  banniere */
.banniere_hyrrokkin
{
	padding : 0px 0px 0px 0px ;
	background-color : black ;
	height : auto ;
	width : 824px ;
	text-align : right ;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

.pied_de_page
{
	/* padding  : 5px 5px 5px 5px; */
	height : 50px ;
	width : 200px ;
	line-height: 15px ;
	text-align : center ;
	/* vertical-align : middle ;*/
	/*background-image : url("../images/pied.png") ;*/
	background-color : black ;
	font-family: Arial , Verdana, serif;
	font-size : 11px ;
}
.pied_de_page a
{
	text-decoration : none ;
	color : white;
}
}.pied_de_page a:hover
{
	text-decoration : underline ;
	color : white ;
}
.pied_de_page a:active
{
	text-decoration : underline ;
	color : #ff8250 ;
}
/* Le menu */

.menu
{
	padding  :0px 0px 0px 0px ;
	height : 30px;
	padding-left : 7px;
	width : 817px ;
	background-color : black ;
	background-image : url("../images/menu.png") ;
	text-align : center ;
}
.menu a
{
	text-decoration : none ;
	margin-top : 0px ;
	line-height : 28px ;
	font-size : 12px;
	font-family : verdana , serif ;
	padding-left : 5px;
	padding-right : 5px ;
	text-align : center ;
	vertical-align : middle ;
	font-variant : small-caps ;
	color: gray;
}

.menu a:hover
{
	text-decoration : none ;
	color : #ff8250 ;
}
.menu a:active
{
	text-decoration : none ;
	color : #ff8250 ;
}
.menu_admin
{
	padding  :0px 0px 0px 0px ;
	/*margin : auto ;*/
	height : 30px;
	padding-left : 7px;
	width : auto ;
	background-color : black ;
}
.menu_admin a
{
	text-decoration : none ;
	margin-top : 0px ;
	line-height : 28px ;
	font-size : 12px;
	font-family : verdana , serif ;
	padding-left : 5px;
	padding-right : 5px ;
	text-align : center ;
	vertical-align : middle ;
	font-variant : small-caps ;
	color: gray;
}

.menu_admin a:hover
{
	text-decoration : none ;
	color : #ff8250 ;
}
.menu_admin a:active
{
	text-decoration : none ;
	color : #ff8250 ;
}

/* corps page d'accueil */
/* annonce de l'accueil */
.annonce_hyrrokkin
{
	height : 30px ;
	width : 739px;
	text-align : center ;
	vertical-align : middle ;
	font-family : verdana , serif ;
	font-size : 20px ;
	font-variant : uppercase ;
	color: #ff8250;
	text-decoration : blink ;
}
.edition_livreor
{
	padding: 0px;
	/*Background-image : url("../images/DSC_4154.png") ;
	background-attachment : fixed;*/
	background-color : black ;/* #e1c2b0;*/
	width : auto;
	height : 400px ;
	overflow : auto ;
	border : 1px solid gray;
}
.saisie_livreor
{
	padding: 0px ;
	width : 200 px;
	height : 370px ;
}
	
.titre_livreor
{
	height : auto ;
	width : 400px;
	padding-left : 3px;
	padding-right : 3px;
	text-align : center ;
	vertical-align : middle ;
	background-color : black ;
	color : #ff8250;
	font-family : verdana , serif ;
	font-size : 12px ;
	font-variant : small-caps ;
}
.message_livreor
{
	height : auto ;
	width : 400px;
	padding : 3px ;
	text-align : left ;
	vertical-align : top ;
	background-color : black ;
	font-family : verdana , serif ;
	font-size : 14px ;
	border : 2px inset gray;
	color: gray;	
}
.edition_actualites
{
	/* padding: 3px*/;
	/*Background-image : url("../images/DSC_4154.png") ;
	background-attachment : fixed;*/
	background-color : black;
	width : auto;
	height : 460px ;
	overflow : auto ;
	border : 3px inset gray;
}.date_actualites
{
	height : auto ;
	width : 70px;
	text-align : center;
	background-color : #ff8250 ;
	font-family : verdana , serif ;
	font-size : 10px ;
	color: black;	
}
.titre_actualites
{
	height : auto ;
	width : 680px;
	padding : 10px;
	text-align : center ;
	vertical-align : middle ;
	background-color : black ;
	border : 1px solid gray;
	font-family : verdana , serif ;
	font-size : 12px ;
	font-variant : small-caps ;
	color: #ff8250;	
}
.message_actualites
{
	height : auto ;
	width : 700px;
	padding : 5px ;
	margin : auto;
	vertical-align : top ;
	background-color : black ;
	font-family : verdana , serif ;
	font-size : 14px ;
	border : 3px outset gray;
	color: gray;	
}
.message_contact
{
	height : 200px ;
	width : 300px;
	padding : 3px ;
	background-color : black ;
	color: gray;
}

.formulaire_contact 
{
	height : 380px ;
	width : 350px;
	padding : 3px ;
	text-align : left ;
	vertical-align : top ;
	background-color : black ;
	color: gray;

}

/* corps standard de page */
.corps
{
	margin  : 0px 0px 0px 0px;
	padding: 0px;
	background-color: black;
	width : 824px;
	height : 477px ;
	overflow : auto ;
}

.corps a
{
	text-decoration : none ;
	color: #ff8250;
}
.corps a:hover
{
	border : 1px outset #ff8250 ;
}
.corps a:visited
{
	text-decoration : none ;
	color: #ff8250;
}
.corps h1
{
   color: #ff8250;
   text-align: center;
   font-family: "Lucida calligraphy", Verdana, serif;
   font-size : 25px ;
}

.corps h2
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 20px ;
}
.corps h3
{
   color: #ff8250;
   text-align: left;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps h4
{
   color: #ff8250;
   text-align: left;
   font-style : italic ;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps h5
{
   color: gray;
   text-align: left;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps h6
{
   color: #ff8250;
   text-align: center;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps p
{
   color: gray;
   text-align: justify;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps li
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 12px ;
}
.corps img
{
	margin : 3px ;
	height : 300px ;
	width : auto ;
	border : 3px inset gray ;
}
.corps table
{
	border-collapse : separate ;
	margin : auto ;
}
.corps td
{
   vertical-align : top;
   text-align : left ;
   padding : 10px 10px 10px 10px;
}
/* corps page resultats expositions */
.corps_expositions
{
	margin  : 0px 0px 0px 0px;
	padding: 10px;
	background-color: black;
	width : 824px;
	height : 477px ;
	overflow : auto ;
}

.corps_expositions a
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_expositions a:hover
{
	border : 1px outset #ff8250 ;
}
.corps_expositions a:visited
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_expositions img
{
	margin : 3px ;
	height : 300px ;
	width : auto ;
	border : 3px inset gray ;
}
.corps_expositions table
{
	border-collapse : separate ;
	margin : auto ;
}
.corps_expositions caption
{
   margin: auto; /* Centre le titre du tableau */
   font-family: Verdana, serif;
   font-weight: bold;
   font-size: 1.2em;
   color: #ff8250;
   margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */	
}
.corps_expositions table /* Le tableau en lui-même */
{
   margin: auto; /* Centre le tableau */
   border: 4px inset gray; /* Bordure du tableau avec effet 3D (outset) */
   border-collapse: collapse; /* Colle les bordures entre elles */
}
.corps_expositions th /* Les cellules d'en-tête */
{
   background-color: gray;
   color: black;
   font-size: 1.1em;
   font-family: Verdana, serif;
}

.corps_expositions td /* Les cellules normales */
{
   font-family: verdana, serif;
   font-size : 12px;
   color : gray ;
   border : 1px solid gray ;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}

.corps_actualites
{
	margin  : 0px;
	padding: 0px;
	background-color: black;
	width : 824px;
	height : 477px ;
	overflow : auto ;
}

.corps_actualites a
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_actualites a:hover
{
	border : 1px outset #ff8250 ;
}
.corps_actualites a:visited
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_actualites h1
{
   color: #ff8250;
   text-align: center;
   font-family: "Lucida calligraphy", Verdana, serif;
   font-size : 25px ;
}

.corps_actualites h2
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 20px ;
}
.corps_actualites h3
{
   color: #ff8250;
   text-align: left;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_actualites h4
{
   color: #ff8250;
   text-align: left;
   font-style : italic ;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_actualites h5
{
   color: gray;
   text-align: left;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_actualites h6
{
   color: #ff8250;
   text-align: center;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_actualites p
{
   color: gray;
   text-align: justify;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_actualites li
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 12px ;
}
.corps_actualites table
{
	border-collapse : separate ;
	margin : auto ;
}
.corps_actualites td
{
   vertical-align : top;
   text-align : left ;
   padding : 10px 10px 10px 10px;
}
.corps_admin
{
	margin  : 0px;
	padding: 5px;
	background-color: black;
	width : 750px;
	height : auto ;
	overflow : auto ;
}
.corps_admin a
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_admin a:hover
{
	border : 1px outset #ff8250 ;
}
.corps_admin a:visited
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_admin h1
{
   color: #ff8250;
   text-align: center;
   font-family: "Lucida calligraphy", Verdana, serif;
   font-size : 25px ;
}

.corps_admin h2
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 20px ;
}
.corps_admin h3
{
   color: #ff8250;
   text-align: left;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_admin h4
{
   color: #ff8250;
   text-align: left;
   font-style : italic ;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_admin h5
{
   color: gray;
   text-align: left;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_admin h6
{
   color: #ff8250;
   text-align: center;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_admin p
{
   color: gray;
   text-align: justify;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_admin li
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 12px ;
}
.corps_admin table
{
	border-collapse : separate ;
	margin : auto ;
}
.corps_admin td
{
   vertical-align : top;
   text-align : left ;
   padding : 10px 10px 10px 10px;
}
.corps_tableau
{
	margin  : 0px;
	padding: 10px;
	background-color: black;
	width : auto;
	height : 447px ;
	overflow : auto ;
}
.corps_tableau a
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_tableau a:hover
{
	border : 1px outset #ff8250 ;
}
.corps_tableau a:visited
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_tableau h1
{
   color: #ff8250;
   text-align: center;
   font-family: "Lucida calligraphy", Verdana, serif;
   font-size : 25px ;
}

.corps_tableau h2
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 20px ;
}
.corps_tableau h3
{
   color: #ff8250;
   text-align: left;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_tableau h4
{
   color: #ff8250;
   text-align: left;
   font-style : italic ;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_tableau h5
{
   color: gray;
   text-align: left;
   text-decoration : underline ;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_tableau h6
{
   color: #ff8250;
   text-align: center;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_tableau p
{
   color: gray;
   text-align: justify;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_tableau li
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 12px ;
}
.corps_tableau img
{
	margin : 3px ;
	height : 300px ;
	width : auto ;
	border : 3px inset gray ;
}
.corps_tableau caption /* Titre du tableau */
{
   margin: auto; /* Centre le titre du tableau */
   font-family: Verdana, serif;
   font-weight: bold;
   font-size: 1.2em;
   color: #ff8250;
   margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
}

.corps_tableau table /* Le tableau en lui-même */
{
   margin: auto; /* Centre le tableau */
   border: 4px inset #ff8250; /* Bordure du tableau avec effet 3D (outset) */
   border-collapse: collapse; /* Colle les bordures entre elles */
}
.corps_tableau th /* Les cellules d'en-tête */
{
   background-color: gray;
   color: black;
   font-size: 1.1em;
   font-family: Verdana, serif;
}

.corps_tableau td /* Les cellules normales */
{
   font-family: verdana, serif;
   font-size : 12px;
   color : gray ;
   border : 1px solid gray ;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}

.corps_accueil
{
	margin : 0px;
	padding: 10px;
	background-color: black;
	width : auto ;
	height : 447px ;
	overflow : auto ;
}

.corps_accueil a
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_accueil a:hover
{
	border : 3px outset #ff8250 ;
}
.corps_accueil a:visited
{
	text-decoration : none ;
	color: #ff8250;
}
.corps_accueil h1
{
   color: gray;
   text-align: center;
   font-family: "Lucida calligraphy", Verdana, serif;
   font-size : 25px ;
}
.corps_accueil h2
{
   color: #ff8250;
   text-align: center;
   text-decoration : blink ;
   vertical-align : middle ;
   font-family: Arial , Verdana, serif;
   font-size : 20px ;
}
.corps_accueil h6
{
   color: gray;
   text-align: center;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_accueil p
{
   color: gray;
   text-align: justify;
   font-family: Verdana, serif;
   font-size : 12px ;
}
.corps_accueil li
{
   color: gray;
   text-align: left;
   font-family: Arial , Verdana, serif;
   font-size : 12px ;
}
.corps_accueil img
{
	height : auto ;
	width :150px ;
	border : 3px inset gray ;
	text-align : center ;
}*/
.corps_accueil table
{
	margin : auto ;
}
.corps_accueil td
{
   vertical-align : top ;
   padding : 10px 10px 10px 10px;
}
/* Elements de galeries */
/* menu des galeries */
.menu_galerie
{
	margin : auto;
	height : auto;
	width : auto ;
	background-color : black ;
	text-align : center ;
	vertical-align : middle ;
	text-decoration : none ;
	font-size : 15px;
	font-family : verdana , serif ;
	padding-left : 20px;
	padding-right : 20px ;
	font-variant : small-caps ;
	text-decoration : underline ;
	color: gray;
}
.menu_galerie a
{
	text-decoration : none ;
	font-size : 15px;
	font-family : verdana , serif ;
	padding-left : 20px;
	padding-right : 20px ;
	font-variant : small-caps ;
	color: gray;
}
.menu_galerie a:hover
{
	text-decoration : none ;
	color : #ff8250 ;
}
.menu_galerie a:active
{
	text-decoration : none ;
	color : #ff8250 ;
}
/* corps de galerie */
.corps_galerie
{
	margin  : 0px 0px 0px 0px;
	padding: 10px;
	background-color: black;
	width : auto;
	height : 447px ;
	overflow : auto ;
}
.corps_galerie h1
{
   color: #ff8250;
   text-align: center;
   font-family: Verdana, serif;
   font-size : 15px ;
}
.corps_galerie h2
{
   color: gray;
   text-align: center;
   font-family: "lucida calligraphy", Verdana, serif;
   font-size : 12px ;
   font-variant : small-caps ;
}
.corps_galerie h6
{
   color: #ff8250;
   text-align: center;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_galerie img
{
	height : 150px ;
	width : auto ;
	border : 3px inset gray ;
}
/* corps de nos_chats */

.corps_chats
{
	margin  : 0px 0px 0px 0px;
	padding: 10px;
	background-color: black;
	width : auto;
	height : 447px ;
	overflow : auto ;
	text-align : center;
}
.corps_chats tr
{
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}
.corps_chats td
{
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}
.corps_chats h6
{
   color: #ff8250;
   text-align: center;
   font-family: Verdana, serif;
   font-size : 10px ;
}
.corps_chats img
{
	height : 170px ;
	width : auto ;
	border : 3px inset gray ;
}
/* corps de galerie administration*/
.corps_galerie_admin
{
	margin : 0px 0px 0px 0px;
	padding : 0px;
	background-color: black;
	width : 743px;
	height : auto ;
	overflow : auto ;
}
.corps_menu_admin
{
	margin : 0px 0px 0px 0px;
	padding : 0px;
	background-color: black;
	width : 400px;
	height : auto ;
	overflow : auto ;
}

