html { height: 100%; }
body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  font: 400 0.8em verdana, arial, sans-serif;
  line-height: 170%;
  background: #000 url(images/bg/saly_kalahari_top_bg.jpg) no-repeat top center;
  color: #eee;
}
#content {  
  height: 100%;
  text-align: left;
}
#content,
#width {
  width: 790px;  
  margin: 0 auto;
}

/**************************************************************
   Entete : de cochon
 **************************************************************/

#bantop {
	position: absolute;
	width: 100%;
	height: 193px;
	top: 0;
	margin: 0 auto;
	padding: 0;
	background-image: url(images/bg/saly_kalahari.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
}
#title {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 15px;
  text-align: left;
}
#title h1 {
  margin: 0;
  padding: 0;
  font: 700 3.5em "trebuchet ms", serif;
  letter-spacing: -3px;
  text-transform: lowercase;
  color: #000;
}
#title h1 a:hover {
  color: #fff;
	text-decoration: underline;
}

/**************************************************************
	Menu : y a quoi au menu ? tieboudieune rek !
 **************************************************************/

#mainMenu {
	margin-top: 193px;
  float: left;
  width: 100%;
  clear: both;
}
#mainMenu ul {
  margin: 0;
  padding: 0;
}
#mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
#mainMenu li a {
  float: left;
  margin: 0 2px;
  padding: 5px 0.5em;
  font: 400 1.6em "trebuchet ms", serif;
  text-decoration: none;
  text-transform: lowercase;
  color: #063;
}
#mainMenu li a:hover,
#mainMenu li a.here {
  color: #0f6;
  border-top: 4px solid #854127;
}
#mainMenu li a.last { margin-right: 0; }

/**************************************************************
	Page : mise en page principale.
 **************************************************************/

#page {
  float: left;
  width: 100%;
  clear: both;
  padding-bottom: 4em;
}

/**************************************************************
	Footer : le pied rek !
 **************************************************************/

#footer {
  float: left;
  width: 100%;
  clear: both;
  margin-top: -3.8em;
  background: #000 url(images/bg/footer.jpg) repeat-x bottom left;
}
#footer #width {
  position: relative;
  z-index: 3;
  font-size: 0.85em;
  padding-top: 27px;
}
#footer a {
	color: #ccc;
	text-decoration: none;
}
#footer a:hover {
	color: #fff;
	text-decoration: underline;
}

/**************************************************************
	Largeur des colonnes du site
 **************************************************************/

.width100 { width: 100%; }
.width75 { width: 74%; }
.width50 { width: 49.7%; }
.width33 { width: 32.7%; }
.width25 { width: 24.7%; }

/**************************************************************
	Alignement
 **************************************************************/

.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight {text-align: right; }

/**************************************************************
	Affichage generique
 **************************************************************/

.clear { clear: both; }
.block { display: block; }
.small { font-size: 0.8em; }
.green { color: #A1ff45; }
.red { color: #eA1b00; }
.gris { color: #ccc; }
.comment-number {
	font-weight: bold;
	font-size: 2em;
}

a {
	color: #063;
	text-decoration: none;
}
a:hover { color: #0f6; }
a img { border : 0px; }
h1 {   
  clear: both;
  font: 700 2.5em "trebuchet ms", serif;
  color: #fff;
}
h1 a { 
	text-decoration: none;
  color: #fff;
}
h2 {
  font: 400 1.5em "trebuchet ms", serif;
  color: #854127;
}
h2 a {
text-decoration: none;
 color: #063;
}
h2 a:hover { color: #fff; }
h3 {
  font: 400 1.3em "trebuchet ms", serif;
  color: #F8D766;
}
h4 {
  font: 700 1.2em "trebuchet ms", serif;
  color: #F39F01;
}
h5 {
  font: 700 1.1em "trebuchet ms", serif;
  color: #F17400;
}
h6 {
  font: 700 1em "trebuchet ms", serif;
  color: #FF4B33;
}
h1, h2, h3, h4, h5, h6, p, dl {
  margin: 0;
  padding: 10px 15px 0 0;
}

ol, ul {
  margin: 5px 0 0 0;
  padding: 0;
}
ol { color: #fc0; }
ol span { color: #eee; }
del { color: #aaa; }
code {
  margin: 10px 15px;
  padding: 10px;
  display: block;
  overflow: auto;
  font: 400 1em courier, monospace;
  line-height: 120%;
  white-space: pre;
  background: #444;
}

.leftColumn code {
  margin-left: 0;
}

acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
dt {
  font-weight: bold;
  color: #ffb323;
}
dd {
  margin-left: 0;
  padding-left: 45px; 
}

/**************************************************************
	Post et List
 **************************************************************/

.post, #trackbacks, #comments {
	margin-bottom: 2em;
	background: #222;
	padding-right: 10px;
	padding-left: 10px;
	border-color: #444;
	border-width: 1px;
	border-style: dotted;
}
.post-title a { color: #f39f01; }
.post-title a:hover { color: #f17400; }
.post-title a:active { color: #ff4b33; }
.post-title {
	color: #f39f01;
	font: 2em "trebuchet ms", serif;
  color: #F8D766;
  padding-bottom: 0px;
}
.post-info-co {
	border-top: 1px dotted #444;
	height: 30px;
}	

/**************************************************************
	Formulaire
 **************************************************************/

label { display: block; }
input,
textarea,
select {
  padding: 2px;
  font: 400 1em verdana, sans-serif;
  color: #ccc;
  background: #222;
  border: 1px solid #444;
}

input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
  color: #ccc;
  background: #222;
  border: 1px solid #854127;
}

input.button {
  padding: 2px 5px;
  font: 400 1.1em "trebuchet ms", serif;
  color: #063;
  background: #444;
  border-width: 1px;
  border-style: solid;
  border-color: #854127;
}
input.button:hover {
  padding: 2px 5px;
  font: 400 1.1em "trebuchet ms", serif;
  color: #0f6;
  background: #666;
  border-width: 1px;
  border-style: solid;
  border-color: #854127;
}
fieldset {border : 0; }

.field { background-color: #222; }

/**************************************************************
	Blockquote et icones incluses
 **************************************************************/

blockquote {
  margin: 10px 15px;
  padding-left: 27px;
  background-color: #444;  
  background-repeat: no-repeat;
  background-position: 5px 50%;  
}

/**************************************************************
	Images
 **************************************************************/

img.floatRight {
  margin: 5px 0px 10px 15px;  
}

img.floatLeft {
  margin: 5px 15px 10px 0px;
}

/**************************************************************
	Calendrier
*********************************************************/
#calendar {
	text-align: left;
	margin-left: 0px;
}
#calendar table {
	margin-left: -20px;
	text-align: left;
	width: 170px;
	margin: 0 auto;
	font-size: 0.8em;
	color: #F16A01;
	border-color: #854127;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
}
#calendar caption {
	margin: 0 auto;
	background: #222;
	padding: 0.5em 0;
	color: #F8D766;
	border-color: #854127;
	border-width: 1px 1px 0px 1px;
	border-style: solid;
}
#calendar abbr {
	color: #f16a01;
	border: none;
}
#calendar td {
	background: #222;
	text-align: center;
}
#calendar td a {
	display: block;
	font-weight: bold;
	background: #444 url('images/today.png') no-repeat right top;
	color: #0c6;
	border-color: #063;
	border-width: 1px;
	border-style: solid;
}
#calendar td a:hover {
	background: #0f6 url('images/today2.png') no-repeat right top;
	color: #000;
	border-color: #063;
	border-width: 1px;
	border-style: solid;
}
#categories, #links { margin-top: 3em; }

.sideMenu div#weather {
	font-size: 10pt;
	margin: 0;
	padding: 0;
	color: #854127;
}

.sideMenu h2 {
	color: #854127;
	border-color: #854127;
	border-width: 0 0 1px 0;
	border-style: solid;
}
.sideMenu ul li { display: block; }
.sideMenu li a {
  display: block;
  margin: 0;
  padding: 3px 0 0 0;    
  text-decoration: none;
  color: #063;
} 
.sideMenu li a:hover { color: #0f6; }