html, body { background:#dddddd; margin:0 0 10px 0; padding:0; font-size:12px; color:#3B3B3B; }

body {font-family: Arial, sans-serif; font-size:13px; font-weight:300; color:#505050; line-height:20px;}/* old font-family: Arial, Helvetica; font-size:10pt;*/
p {font-family: Arial, sans-serif; font-size:13px; font-weight:300; color:#505050; line-height:20px;} /* old font-family: Arial, Helvetica; font-size:10pt;*/
td {font-family: Arial, sans-serif; font-size:13px; font-weight:300; color:#505050; line-height:20px;} /* old font-family: Arial, Helvetica;font-size:10pt; */
th {font-family: Arial, sans-serif; font-size:13px; font-weight:300; color:#505050; line-height:20px;} /* old font-family: Arial, Helvetica;font-size:10pt; */

a { text-decoration: none;}
a:link { color: #393E76 }
a:hover { color: #800000; text-decoration: underline;}
a:visited { color: #000000;}

#container { width:95%; margin:0 auto; padding:0px; background-color:#fff; max-width:1000px; min-width:230px; }
#top-header { padding:10px 20px 10px 20px; height:20px;background-color:#fff;}
#header { padding:5px 20px 25px 25px; height:80px;background-color:#fff;}  /* old padding:1em; height:76px*/
#header-droite { float:right; text-align:right;}
#header-gauche { float:left; /*width:400px;*/ margin:0px;}

/*#header-droite select {height:30px; width:180px; font-size: 11px;}*/
/*#menu { text-align:right; float:right; clear:right; margin:2px 0px 0px 0px; width:1940px; }*/

/* ======== Search form ======== */
#search-form { /*text-align:right; float:right; clear:right;*/ padding:0; margin:4px 2px 0px 0px; width:198px; }
#search-form label { display:none; }
#search-box { height:30px; width:158px; padding:0 32px 0 4px; margin:0; border:1px solid #00A4E4; display:inline; vertical-align:middle; }
#search-box:focus { border:1px solid #7AC143; }
#search-button { width:30px; height:30px; border:0px none; background:url('../images/search-button.jpg') top center; padding:0; font-size:0px; display:inline; vertical-align:middle; margin:0 0 0 -31px; color:#00A4E4; }
#search-button:hover { background:url('../images/search-button.jpg') bottom center; color:#F78E1E }

/* ======== Social Icons pour tous les fichiers ======== */
.social { padding:0; margin:0px 1px 8px 0px; float:right; /*position:relative; z-index:9;*/}
.social li { padding:0; margin:0; display:inline; }
.social li a { display:inline-block; float:left; width:32px; height:32px; background:url('../images/icons.jpg') no-repeat; font-size:0px; color:#888888; margin:0px 0px 0px 8px; -moz-box-shadow: 0px 10px 14px -7px #888888; -webkit-box-shadow: 0px 10px 14px -7px #888888; box-shadow: 0px 10px 14px -7px #888888; text-shadow:1px 1px 1px #888888; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s }
.social li a.home { background-position:0px 0px; }
.social li a.home:hover { background-position:0px -32px; }
.social li a.youtube { background-position:-192px 0px; }
.social li a.youtube:hover { background-position: -192px -32px; }
.social li a.facebook { background-position:-64px 0px; }
.social li a.facebook:hover { background-position:-64px -32px; }
.social li a.contact { background-position:-96px 0px; }
.social li a.contact:hover { background-position:-96px -32px; }
.social li a.google { background-position:-128px 0px; }
.social li a.google:hover { background-position:-128px -32px; }
.social li a.recherche { background-position:-160px 0px; }
.social li a.recherche:hover { background-position:-160px -32px; }

#titre {width:100%; height:30px; background-image: url('../images/newnav.png');}
#titre-droite { float:right; text-align:right;margin-right:50px;}
#titre-gauche { float:left; width:50%; text-align:right;}

#titre p {text-align:center; margin:0px; padding:5px; font-family: Tahoma; font-size: 16px; font-weight: bold; color:#fff;}
#titre a:link {font-family: Tahoma; font-size: 11px; color:#ffffff;}
#titre a:hover {font-family: Tahoma; font-size: 11px; color: #ECD877; text-decoration:none;}
#titre a:visited {font-family: Tahoma; font-size: 11px; color:#ffffff;padding:2px;}

#ads-centre {width:100%; height:auto; background-color:#fff; margin: auto;}

.tableau-gauche {margin:20px auto 5px auto;}
.tableau-droite {text-align:justify; margin:20px 25px 15px 25px;}

.image { position: relative; width: 100%; /* for IE 6 */}

/* ======== Footer ======== */
#footer { clear:both; background:#e8e8e8; padding:15px; /*font-size:0.8em;*/ }
#footer a { text-decoration:none; color:#000;}
/*#footer a:hover { text-decoration:underline; color:#336699;}*/
#footer a:hover { text-decoration:none; color:#fff; background-color:#888;}
#footer h3 { font-size:14px; color:#000; font-weight:bold; }
#footer p { font-size:14px; font-weight:bold; margin:0 0 10px 0; padding:0; }

/*#legal { padding:6px 0 3px 7px; font-size:90%; text-align:center; background-color:#fff; border-top: 1px solid #999;}*/

#legal { width:100%; background:#e8e8e8;}

#legal p { font-size:90%; text-align:left; border-top: 1px solid #999; padding:5px 0 10px 5px; margin:0px 15px 0px 15px;}

/* ======== Code pour To Top ======== */
.scrollToTop{
	width:50px; 
	height:50px;
	/*padding:10px; */
	text-align:center; 
	/*background: whiteSmoke;*/
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position:fixed;
	/*top:400px;*/
	right:5%;
	bottom:40px;
	display:none;
	/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);*/
	background: url('../images/to-top.gif') no-repeat 0px -50px;
}
.scrollToTop:hover{ background: url('../images/to-top.gif') no-repeat top left; }

.update {float:right; margin:10px 15px 15px 0px;}
.update label {font-weight: bold; font-style: italic; font-size: 14px;font-family: Arial, Helvetica, Verdana;color: #336799;}

h1 {text-align:center; font-size: 18px; font-weight: bold; color:#800000; }
h3{ font:bold 15px verdana; color:#518813; border-bottom:dotted 1px #cac7c7; padding-bottom:2px;}
h5{ padding-left:25px; padding-bottom:2px; margin-bottom:12px; color:#CA5E07; border-bottom:1px solid #cac7c7; background:url('../images/icone.gif') no-repeat left 4px;; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:verdana;}

.consulatimportant { text-align:justify; margin-top:20px; padding:7px 0px 10px 75px; background:url('../images/important.png') no-repeat ;}

/* dans date.html */
.charttext {font-size: 11px; line-height: 15px; color: #666666; font-family: Verdana, Arial, Geneva, sans-serif;}
.charttext2 { font-size: 11px; line-height: 15px; color: #666666; font-family: Verdana, Arial, Geneva, sans-serif; background-color: #efefef;}

/* message help dans services */
.tip {
	margin:0px;
	padding-top:0px;
	float:left;
	font-weight:normal;
	font-size:80%;
	display:block;
	position:relative;
}
.tipA {position:relative;}
.tipPopup {
	display:none;
	position:absolute;
	right:0px;
	background-color:#E8EFFF;  /*old  #8be;*/
	border:1px solid #000000;
	padding:5px;
	text-align:left;
	color:#036;
	text-decoration:none;
    height:auto;
    width:250px;
    font-size:8pt;
    bottom:20px;
}
a.tipA:hover .tipPopup {display:block;}
.tipPopup p, .tipBox p {margin:5px 0 5px 0;font-size:8pt;}
.tipPopup li, .tipBox li {font-size:8pt;}
.tipPopup ul, .tipBox ul {margin-top:5px;margin-bottom:5px;font-size:8pt;}

/* dans services */
.texte {text-align: justify; padding:0px 20px 0px 20px;}
.titresection {/*width:200px;*/ font:bold 15px verdana; color:#518813; border-bottom:dotted 1px #cac7c7;}
form.service label {font-size:12px; display: block; float:none; margin-bottom: 1px;}
label span.error { color:#E80000; font-style:italic; padding-left:20px; margin-bottom:6px; background:url('http://www.tunisie-canada.com/images/unchecked.gif') no-repeat 4px 0px;}
.error_form {font-family:Verdana; font-size:14px; color:#fff; background-color:#E80000;}
input[type=checkbox] { vertical-align:-2px;}
input[type=radio] { vertical-align:-2px;}

/* boutons Envoyer et Effacer dans services */
.button { border-bottom: #bbb 1px solid; text-align: center; border-left: #c8c8c8 1px solid; padding-bottom: 4px; line-height: 14px; background-color: #eee; padding-left: 10px; padding-right: 10px; display: inline-block; background-repeat: repeat-x; font-family: verdana, arial, helvetica, sans-serif; color: #222 !important; vertical-align: middle; border-top: #c8c8c8 1px solid; cursor: pointer; border-right: #c8c8c8 1px solid; text-decoration: none; padding-top: 4px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -moz-box-orient: vertical; text-shadow: white 0 1px 1px; }
.button:hover {	background-color: #d4d4d4; }
.button:focus {	background-color: #d4d4d4; }
.button:active { background-color: #d4d4d4; }
.button:hover {	background-position: 0px -15px; text-decoration: none; -webkit-transition: background-position .1s linear; -moz-transition: background-position .1s linear; -ms-transition: background-position .1s linear; -o-transition: background-position .1s linear; transition: background-position .1s linear; }
.button:focus {	background-position: 0px -15px; text-decoration: none; -webkit-transition: background-position .1s linear; -moz-transition: background-position .1s linear; -ms-transition: background-position .1s linear; -o-transition: background-position .1s linear; transition: background-position .1s linear; }
.button:active { background-position: 0px -15px; text-decoration: none; -webkit-transition: background-position .1s linear; -moz-transition: background-position .1s linear; -ms-transition: background-position .1s linear; -o-transition: background-position .1s linear; transition: background-position .1s linear; }

input.button-envoyer { border-bottom-color: #0b324d; background-color: #176ca7; border-top-color: #0e4164; color: white !important; border-right-color: #0e4164; border-left-color: #0e4164; text-shadow: #222 0 1px 1px; }
button.button-envoyer { border-bottom-color: #0b324d; background-color: #176ca7; border-top-color: #0e4164; color: white !important; border-right-color: #0e4164; border-left-color: #0e4164; text-shadow: #222 0 1px 1px; }
a.button-envoyer { border-bottom-color: #0b324d; background-color: #176ca7; border-top-color: #0e4164; color: white !important; border-right-color: #0e4164; border-left-color: #0e4164; text-shadow: #222 0 1px 1px; }
input.button-envoyer:hover {	background-color: #114f7a; }
input.button-envoyer:focus {	background-color: #114f7a; }
input.button-envoyer:active { background-color: #114f7a; }
button.button-envoyer:hover { background-color: #114f7a; }
button.button-envoyer:focus { background-color: #114f7a; }
button.button-envoyer:active { background-color: #114f7a; }
a.button-envoyer:hover {	background-color: #114f7a; }
a.button-envoyer:focus {	background-color: #114f7a; }
a.button-envoyer:active { background-color: #114f7a; }

/* bouton pour s'inscrire dans Liste de diffusion */
.subscribe {display: inline-block;text-align: center;text-decoration: none;line-height: 10px;font-family: verdana, arial, helvetica, sans-serif;color: white !important;vertical-align: middle;padding: 4px;background-color: #176ca7;background-repeat: repeat-x;border-radius: 4px;cursor: pointer;text-shadow: #222 0 1px 1px;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);border-bottom: #0b324d 1px solid;border-left: #0e4164 1px solid;border-top: #0e4164 1px solid;border-right: #0e4164 1px solid;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;-moz-box-orient: vertical;}
.subscribe:hover {	background-color: #114f7a; }
.subscribe:focus {	background-color: #114f7a; }
.subscribe:active { background-color: #114f7a; }

/* ======== Code pour menu Accès direct et photos tun et can======== */
.userLinks{/*width:600px;*/ height:10px; margin:6px 0 0 0; padding:0; /*position:absolute; z-index:10; top:10px; right:0; white-space:nowrap;*/}
.userLinks li.nav-user{border-right:#ade8fe 1px solid;display:inline-block;float:right;line-height:12px;padding:0 8px;position:relative;}
.userLinks li.dropdown{border-right:none;line-height:20px;height:20px;top:-4px;left: -1px;padding-right:8px;}
li.dropdown:hover{background-color: #EDEDED;border-radius:3px 3px 0 0;}
li.dropdown:hover .dropdownLink .arrow{background-position: 2px -27px;/*old background-position: 2px -182px;*/}
li.dropdown:hover .dropdownHover{display:block;}
li.dropdown:hover .dropdownLink {background:none; color:#267AB7;}
.dropdownLink{background:none; padding-right:0;white-space:nowrap;}
.dropdownLink .arrow {background-image: url('http://www.tunisie-canada.com/images/sprite.png');background-repeat: no-repeat; background-position: 2px -1px; /*old background-position: 2px -156px;*/width:15px;height:15px;position:relative;bottom:-2px;}
.dropdownHover{display:none;background-color:#ededed;padding:5px;position:absolute;top:20px;right:0;z-index:550;width:auto!important;min-width:200px;}
.dropdownHover .dropdownSection{background-color:#fff;padding:10px;text-align:left;}
.navHelp{margin:-5px 0 -7px;padding:0;}
.navHelp li{margin:2px 0;padding:0px;line-height:13px;}
.navHelp a, .navHelp a:link, .navHelp a:visited{color:#267AB7;}
.navHelp a{font-size:92%; display:block;padding:2px 0;}
.navHelp a:hover{background-color:#eaf3fe!important;color:#00aeff;text-decoration:none;}
.navHelp .nav-divider-after{border-bottom:#EDEDED 1px solid;padding-bottom:6px;margin-bottom:4px;}


/* ======== Code pour le tableau principal dans photos ======== */
.table-photostuncan {border-style:none; border-collapse: collapse; border-spacing: 5px; padding:18px; width:85%; max-width:900px; min-width:720px; margin:15px auto 15px auto;}

/* =============== début code pour menu glissant de la gauche =============== */
#volet { width: 250px; height: 300px; padding: 10px; background: #6B9A49; color: #fff;	 position: absolute; left: -270px; -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in;}
#volet a.ouvrir { cursor: pointer; display: block; width: 35px; height: 175px; position: absolute; top: 55px; right: -35px; background: transparent url('../images/besoinaide.png') no-repeat scroll left top; border-left: 1px solid #e6e7e8;}
#volet a.ouvrir:hover {background-position: left -175px;}
#volet a.fermer { display: none; cursor: pointer; width: 35px; height: 175px; position: absolute; top: 55px; right: -36px; background: transparent url('../images/besoinaide.png') no-repeat scroll left -175px; border-left: 1px solid #e6e7e8;}
#volet a.fermer:hover {background-position: left top;}
#volet:target {left: 0px;}
#volet:target a.fermer {display: block;}
#volet:target a.ouvrir {display: none;}
#volet_clos:target #volet {left: -270px;}
#volet_clos {position: fixed; top: 150px; left: 0;}
/* =============== fin code pour menu glissant =============== */

/* ======== Code pour affaires consulaires ======== */
/* Tooltip container */
.tooltip a
{position: relative; display: inline-block; }

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: black;
    color: #fff;
    text-align: center;
    /*padding: 2px 0;*/
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 85%;
}

/* Show left arrow*/
.tooltip .tooltiptext::after {
    border-left:5px solid transparent; border-right:5px solid black; border-top:5px solid transparent; border-bottom:5px solid transparent; content: "";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px
    
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {visibility: visible;}

/* logo Tunisie-Canada.com */
.logo
{
padding:5px;
font-family: 'Lobster', cursive;
font-size: 26px;
font-weight:bold;
color:#000080;
/*background: -webkit-gradient(linear, left top, left bottom, from(#000080), to(#eee));*/
/*-webkit-background-clip: text;*/
/*-webkit-text-fill-color: transparent;*/
}