/*============================
css designed by J@eacute;rmie Lochard
http://www.jilocube.fr
2009
 =============================*/
 
/* ////////// RESET ET STYLES GENERAUX */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
a, abbr, acronym, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, strong, small, strike, em,
s, samp, sup, tt, var,
dl, dt, dd, ol, ul, li
/* fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td */
/* pour CK Editor, je laisse pres, address, blockotes tel que */
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
}
ol, ul, li {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* ///// Styles génériques */
a {
	color: #000 ;
	text-decoration: none ;
	}

a:hover {
	color: #32322D ;
	text-decoration: none ;
	}

.strong {
	font-weight: bold;
	}
	
.small {
	font-size: .75em ;
}
	
.hidden {
	display: none;
}

/* ///// html et body */
html {
	font-family: Lucida Sans Unicode, Lucida Grande, Lucida Sans, Lucida, sans-serif ;
	font-size: .9em ;
	color: #151515 ;
	}
	
#body {
	background-color: #2B211F ;
	background: url(../images/fond-cahier.jpg) 0 0 ;
	}
	
#main {
	width: 1100px ;
	height: 740px ;
	margin: 60px 0px 0px 81px ;
	background: url(../images/cahier.jpg) no-repeat 0 0 ;
	border-right: 2px solid #7B4027 ;
	border-bottom: 2px solid #7B4027 ;
	border-left: 2px solid #7B4027 ;
	/* ombre */
	box-shadow: 1px 2px 4px #7B4027 ;
	-moz-box-shadow: 1px 2px 4px #7B4027 ;
	-webkit-box-shadow: 1px 2px 4px #7B4027 ;
	-o-box-shadow: 1px 2px 4px #7B4027 ;
}

/* ////////// HEADER */
/* ///  Titre pages intérieures */
#titre {
	position: absolute;
	top: 112px ;
	left: 188px ;
}

#titre h1 {
	text-indent: -5000px ;
	background: url(../images/logo-kassala.jpg) no-repeat 0 0 ;
	width: 300px ;	
	height: 150px ;
}

#titre h2, #titre h3 {
	display: none ;
	text-indent: -5000px ;
}

/* /// Titre page accueil */ 
#titre_accueil {
	position: absolute;
	top: 490px ;
	width: 480px ;
	text-align: center ;
	z-index: 100 ;
}

#titre_accueil h1 {
	text-indent: -5000px ;
}

#titre_accueil h2 {
	font-weight: bold;
	font-size: 1.3em ;
	margin: 0px 0px 7px 0px;
}

#titre_accueil h3 {

}

/* /// Partager */
#partager {
	position: absolute ;
	left: 185px ;
	width: 450px ;	
	margin: 8px 0px 0px 0px ;
	height: 50px ;
	z-index: 1000 ;
}

#partager  ul li {
	float: left ;
}

.separation {
	display: block ;
	height: 40px ;
	line-height: 40px ;

}
#amis a {
	display: block ;
	height: 40px ;
	line-height: 40px ;

}

#liens a {
	display: block ;
	height: 40px ;
	line-height: 40px ;
}

#amis a:hover {
	display: block ;
	height: 40px ;
	line-height: 40px ;	
	margin: 1px 0px 0px 0px ;
}

#liens a:hover {
	display: block ;
	height: 40px ;
	line-height: 40px ;	
	margin: 1px 0px 0px 0px ;
}

#share {
	background: url(../images/partagez.jpg) no-repeat 100% 100% ;
	width: 200px ;
	height: 50px ;	
}

#share span {
	float: left ;
	display: block ;
	margin: 0px 0px 0px 1px ;
}

#share span a {
	margin:0px 4px ;
	display: block ;
	background-color: inherit !important ;
	padding: 0 !important ;
	width: inherit !important ;
	height: 40px ;
	line-height: 40px ;
}

#share span a:hover {
	margin:0px 4px ;
	display: block ;
	background-color: inherit !important ;
	padding: 1px 0px 0px 0px !important ;
	width: inherit !important ;
	height: 40px ;
	line-height: 40px ;
}

a.stbar.chicklet img {
	border:0;
	margin:0;
	height:16px;
	width:16px;
	margin:0px 2px;
	vertical-align: middle;
	}
	
a.stbar.chicklet {
	padding:0;
	height:16px;
	line-height:16px;
	}
	
/* /// Contact */
#contact {
	text-indent: -5000px ;
	z-index: 1000 ;
	position: absolute ;
}

#contact a {
	display: block ;
	width: 100px ;
	height: 100px ;
	background: url(../images/contacts.jpg) no-repeat 0px 0px ;
}

#contact a:hover {
	display: block ;
	width: 100px ;
	height: 100px ;
	background: url(../images/contacts.jpg) no-repeat 0px -100px ;
}

/* ////////// MENU */

#menu {
	width: 485px ;
	height: 40px ;
	position: absolute ;
	top: 120px ;
	left: 691px ;
	}

#menu ul li {
	float: left ;
	text-indent: -5000px ;
}

.accueil a {
	display: block ;
	width: 78px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat 0 0 ;
}

.accueil a:hover {
	display: block ;
	width: 78px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat 0 -150px ;
}

.accueil_sel {
	display: block ;
	width: 78px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat 0 -50px ;
}

.site a {
	display: block ;
	width: 41px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -78px 0 ;
}

.site a:hover {
	display: block ;
	width: 41px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -78px -200px ;
}

.site_sel {
	display: block ;
	width: 41px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -78px -100px ;
}

.chambres a {
	display: block ;
	width: 78px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -119px 0 ;
}

.chambres a:hover {
	display: block ;
	width: 78px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -119px -150px ;
}

.chambres_sel {
	display: block ;
	width: 78px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -119px -50px ;
}

.restauration a {
	display: block ;
	width: 93px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -197px 0 ;
}

.restauration a:hover {
	display: block ;
	width: 93px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -197px -200px ;
}

.restauration_sel {
	display: block ;
	width: 93px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -197px -100px ;
}

.tarifs a {
	display: block ;
	width: 52px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -290px 0px ;
}

.tarifs a:hover {
	display: block ;
	width: 52px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -290px -150px ;
}

.tarifs_sel {
	display: block ;
	width: 52px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -290px -50px ;
}

.geographie a {
	display: block ;
	width: 60px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -342px 0px ;
}

.geographie a:hover {
	display: block ;
	width: 60px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -342px -200px ;
}

.geographie_sel {
	display: block ;
	width: 60px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -342px -100px ;
}

.activites a {
	display: block ;
	width: 83px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -402px 0 ;
}

.activites a:hover {
	display: block ;
	width: 83px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -402px -150px ;
}

.activites_sel {
	display: block ;
	width: 83px;
	height: 50px;
	background: url(../images/menu.jpg) no-repeat -402px -50px ;
}
/* ////////// CONTENU */
/* ///// Page gauche accueil */
#n2_accueil {
	position: absolute ;
	top: 100px ;
	left: 105px ;
	width: 480px ;
	height: 690px;
	background-color: #ffffff ;
}

#n2_accueil span {
	display: none ;
}

#accueil_logo {
	margin: 0px 0px 17px 0px;
	width: 480px ;
	height: 400px ;
	background: url(../images/photo-accueil.jpg) no-repeat 50% 0 ;
}

#accueil_senegal {
	margin: 40px 0px 0px 0px;
	width: 480px ;
	height: 280px ;
	background: url(../images/carte-senegal.jpg) no-repeat 50% 100% ;
	margin: auto ;
}

/* ///// Page gauche site */
#n2_photos {
	position: absolute ;
	top: 230px ;
	left: 90px ;
	width: 510px ;
	height: 455px;
}

#n2_serie div {
	position: absolute ;
}

#n2_serie img {
	border: 4px solid #CCCCCC ;
	background-color: #999999 ;
}
	
#div1 {
	top: 0px ;
	left: 60px ;
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}
	
#div2 {
	top: 50px ;
	left: 120px ;
	-moz-transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	-o-transform: rotate(2deg);
}
	
#div3 {
	top: 70px ;
	left: 90px ;
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}
	
img {
	margin: 4px 0px 0px 4px ;
}

#n2_navigation {
	font-size: .85em ;
	position: relative ;
	top: 420px ;
	left: 90px ;
}


#n2_navigation h4 {
	font-size: .9em ;
	text-align: center ;
	margin: 0px 0px 10px 0px ;
}

#n2_navigation ul {

}

#n2_navigation li {
	float: left ;
	margin: 0px 5px 0px 0px ;
}

.n2_zoom {
	padding: 0px 0px 0px 20px ;
	text-indent: -5000px ;
}

.n2_zoom a {
	display: block ;
	width: 32px ;
	height: 32px ;
	background: url(../images/zoom-in.jpg) no-repeat 50% 0px ;
}

.n2_zoom a:hover {
	display: block ;
	width: 32px ;
	height: 32px ;
	background: url(../images/zoom-in.jpg) no-repeat 50% -32px ;
}

.n2_active {
	display: block ;
	height: 32px ;
	line-height: 32px ;	
}

.n2_prec a {
	display: block ;
	text-indent: -5000px ;
	width: 32px ;
	height: 32px ;
	background: url(../images/prec-suiv.jpg) no-repeat 0px 0px ;	
}

.n2_prec a:hover {
	display: block ;
	text-indent: -5000px ;
	width: 32px ;
	height: 32px ;
	background: url(../images/prec-suiv.jpg) no-repeat 0px -32px ;	
}

.n2_suiv a {
	display: block ;
	text-indent: -5000px ;
	width: 32px ;
	height: 32px ;
	background: url(../images/prec-suiv.jpg) no-repeat -32px 0px ;	
}

.n2_suiv a:hover {
	display: block ;
	text-indent: -5000px ;
	width: 32px ;
	height: 32px ;
	background: url(../images/prec-suiv.jpg) no-repeat -32px -32px ;	
}

a.n2_hidden {
	display: none ;
}

/* ///// Page droite */
#n2_contenu {
	position: absolute ;
	top: 200px ;
	left: 700px ;
	width: 460px ;
	height: 480px;
}

#n2_contenu h2 {
	margin: 0px 0px 15px 0px ;
}

/* /// Intitulés typo */
.accueil_h2 {
	display: block ;
	text-indent: -5000px ;
}

.site_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -60px ;
}

.chambres_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -110px ;
}

.restauration_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -160px ;
}

.tarifs_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -210px ;
}

.geographie_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -260px ;
}

.activites_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -310px ;
}

.mentions_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -360px ;
}

.amis_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -460px ;
}

.liens_h2 {
	display: block ;
	text-indent: -5000px ;
	width: 270px;
	height: 50px;
	background: url(../images/kassala-intitules.gif) no-repeat 0px -510px ;
}

/* /// texte */
#n2_texte {
	height: 430px ;
	font-size: .9em ;
	line-height: 1.4em;
	overflow: auto ;
}

#n2_texte p {
	margin: 6px 0px ;
}

#n2_texte strong {
	font-weight: bold ;
}

#n2_texte small {
	font-size: .85em ;
}

#n2_texte h1 {
	font-weight: bold ;
	font-size: 1.8em ;
}

#n2_texte h2 {
	font-weight: bold ;
	font-size: 1.4em ;
}

#n2_texte h3 {
	font-weight: bold ;
	font-size: 1.2em ;
}

#n2_texte h4 {
	font-weight: bold ;
}

#n2_texte h5 {
	font-style: italic;
}

#n2_texte h6 {
	font-weight: lighter;
}

#n2_texte ul {
	list-style: inside circle ;
	margin: 0px 0px 0px 15px ;	
}

/* ///// Texte multisection */
#onglets {
	margin: 0 ;
	padding: 0 ;
}

#onglets ul li {
	font-weight: bold ;
	margin: 0 ;
	padding: 0 ;	
}

.onglet a {
	display: block ;
	height: 32px ;
	line-height: 32px ;
	padding: 0px 0px 0px 35px ;
	background: url(../images/puce_1.jpg) 0px 0px no-repeat ;
}

.onglet a:hover {
	display: block ;
	height: 32px ;
	line-height: 32px ;
	padding: 0px 0px 0px 35px ;
	background: url(../images/puce_1.jpg) 0px -32px no-repeat ;
}

.onglet_selected a {
	display: block ;
	height: 32px ;
	line-height: 32px ;
	padding: 0px 0px 0px 35px ;
	background: url(../images/puce_1.jpg) 0px -64px no-repeat ;
	font-weight: normal !important ;
}

#texte {
	margin: 15px 0px 0px 0px ;
}

#texte_1 {
	position: absolute ;
	height: 283px ;
	overflow: auto ;
}

#texte_2 {
	position: absolute ;
	display: none ;
	height: 283px ;
	overflow: auto ;
}

#texte_3 {
	position: absolute ;
	display: none ;
	height: 283px ;
	overflow: auto ;
}

#texte_4 {
	position: absolute ;
	display: none ;
	height: 283px ;
	overflow: auto ;
}

/* ////////// FOOTER */

#footer {
	position: absolute ;
	top: 808px ;
	font-size: .8em ;
	font-weight: bold;
}
	
#footer ul li {
	margin: 0px 0px 15px 0px ;
}

#temp {
	margin: 150px auto 0px auto  ;
	text-align: center ;
	background: url(../images/logo-kassala.jpg) no-repeat 50% 0% ; 
	height: 400px ;
	overflow: hidden;	
}

#temp h1 {
	font-weight: bold !important ;
	font-size: 28px ;
	margin: 180px auto 0px auto  ;
}

#temp h2 {
	font-weight: bold !important ;
	font-size: 18px ;
	margin: 10px auto 30px auto  ;
}

#temp h3 {

}