/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2006.03.19
   PURPOSE: Controls the layout of the site and styles
            the menus
 **************************************************************/



/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site.
 **************************************************************/

#content {  
  height: 100%;
  min-height: 100%;
  width:900px;
  text-align: left;
  margin: 0 auto;
}

#content,
#width {
  /* max-width hack for IE since it doesn't understand the valid css property */
  /*width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");*/
  /*max-width: 1000px;*/
  /*margin: 0 auto;*/
}

#content[id],
#width[id] {
  /*width: 94%;*/
  /*height: auto;*/
}




/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/

#header {
  position: relative;
  height: 140px;
}

/* Holds the site title and subtitle */
#header #title {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 130px;

  padding: 5px;
  text-align: right;
}

#header h1 {
  margin: 0;
  padding: 0;

  font: 700 4em "trebuchet ms", serif;
  letter-spacing: -3px;
  text-transform: lowercase;
  color: #FFF;
}

#header h2 {
  position: absolute;
  top: 10px;
  right: 5px;

  margin: 0;
  padding: 0;

  font: 700 1em "trebuchet ms", serif;
  text-transform: lowercase;
  color:#FBE484;
}


/* Sets where the header images will go */
#header img.left {
  position: absolute;
  z-index: 0;

  top: 0;
  left: 30px;
}

#header img.right {
  position: absolute;
  z-index: 0;
  height:128px;
  top: 11px;
  right: 30px;
}

#header img.balloons {
  position: absolute;
  z-index: 2;

  top: 70px;
  right: 400px;
}



/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/
#mainMenu { 
  position:absolute; 
  top: 85px;
  width: 900px;
  margin-bottom:1em;  
}

#mainMenu ul {
  margin: 0;
  padding: 0;
  text-align:center;
}

#espacesPartage {
  background-color:#444444;
  border:2px solid #555;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

#mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  /*padding: 2px;
  margin-right:2px;*/
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

#mainMenu li a, #accordion h3 {
  /*float: left;*/
  margin: 0 10px 0 10px;
  padding: 0 0;
  font: 400 1.6em "trebuchet ms", serif;
  text-decoration: none;
  text-transform: lowercase;
  color: #FFF;
}

#mainMenu li a:hover,
#mainMenu li a.here {
  color: #65EBFF;
  position:relative;
  top:2px;
}

#mainMenu li a.last {
  margin-right: 0;
}

#mainMenu li img {
  margin-bottom:-1em;
}

#nouveauDocument {
  padding:0;
  padding-bottom:1ex;
}
/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/

ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url(foo.gif);
  font: 400 1.3em "trebuchet ms", serif;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  
  text-decoration: none;
  color: #FFF;
} 

.sideMenu li a:hover {
  color: #65EBFF;
  background: #5F5F5F;
}

/* Active menu item */
.sideMenu li.here {
  display: block;  
  padding: 5px;
  color: #65EBFF;
  background: #555;
}

/* Submenu of active menu item */
.sideMenu li.here ul {
  margin: 0;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 35px;
  font: 400 0.55em verdana, arial, sans-serif; 
  color: #FFF;  
  background: url(images/bullet.gif) no-repeat 10px 0px;
}

.sideMenu li.here ul li a:hover {
  color: #9FF3FF;
  background: #5F5F5F url(images/bullet.gif) no-repeat 10px 0px;
}

#descriptionForLayout {
  height: 100px;
  width: 100%;
  border: solid 1px white;
}

#moteurDeRecherche p {
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}

/**************************************************************
   #page: Holds the main page content.
 **************************************************************/

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

.message {
}

/**************************************************************
   #mainColumn
 **************************************************************/
#mainColumn {
	margin-top:2ex;
}

/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/

#footer {
  float: left;
  width: 100%;
  clear: both;
  margin-top: 1.2em;
  background: #000 url(images/footer.jpg) repeat-x top left;
  padding-bottom:28px;
}

/* Sets the width of the footer content */
#footer #width {
  position: relative;
  z-index: 3;
  font-size: 0.85em;
  padding-top: 27px;
}



/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {
  width: 100%;
  overflow:hidden;
}

.width75 {
  width: 74%;
  overflow:hidden;
}
.width66 {
  width: 65.4%;
  overflow:hidden;
}
.width60 {
  width: 59.6%;
  overflow:hidden;
}

.width50 {
  width: 49.7%;
  overflow:hidden;
}

.width33 {
  width: 32.7%;
  overflow:hidden;
}

.width30 {
  width: 29.3%;
  overflow:hidden;
}

.width25 {
  width: 24.7%;
  overflow:hidden;
}

/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align:center;
}

/**************************************************************
   Generic display classes
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

.small {
  font-size: 0.8em;
}

.green {
  color: #A1FF45;
}

.red {
  color: #EA1B00;
}

.grey {
  color: #666;
}

.grey a {
  color: #999;
}

.grey a:hover {
  color: #EEE;
}

.gradient {
  margin-bottom: 2em;
  background: #555 url(images/gradient.jpg) repeat-x bottom left; 
}

.error-message {
  color:#9FF3FF;
  font-weight:bold;
}

.submit {
  clear:both;
  text-align:center;
  border:2px solid #555;
  margin-top:1ex;
}

/**************************************************************
   Icones
 **************************************************************/
#leftColumn h3 img {
  height:32px;
  margin:0 0px -12px 0;
}

#mainMenu img {
  height:48px;
  margin:0 0 0 0;
}

/**************************************************************
   Droplicious nav menu 
 **************************************************************/
/* droplicous v1.1 */
#nav ul.scriptaculously{
	width:400px;
	text-align:left;
	font-size:.8em;
	background:#444;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-khtml-border-radius-bottomleft:5px;
	-khtml-border-radius-bottomright:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	margin:0;
	padding:0;
	position:absolute;
	left:0px;
	top:28px;
	opacity:.97;
	filter:alpha(opacity=97);
}
/*ie shit*/
html>body #nav ul.scriptaculously{
	position:absolute;	
	top:18px;
}
#nav ul.scriptaculously a:hover{
	position:relative;
	color:#65EBFF;
	background:none;
}
#nav ul.scriptaculously a{
	position:relative;
	z-index:999;
	font-weight:normal;
	margin:0;
	padding:5px 0 5px 10px;
	background:none;
	color:white;
	display:block;
	-webkit-border-top-left-radius:0;
	-webkit-border-top-right-radius:0;
	-khtml-border-radius-topleft:0;
	-khtml-border-radius-topright:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-topright:0;
}
#nav li a:hover{
	color:#555;
}
#nav li a{
	font-weight:bold;
	text-decoration:none;
	color:white;
	padding:10px 10px 0 10px;
	background:#F48801;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-khtml-border-radius-topleft:5px;
	-khtml-border-radius-topright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
}
#nav{
	position:relative;
	/*width:820px;*/
	/*text-align:center;*/
	list-style:none;
	margin:10px auto;
	padding:0;
	list-style:none;
	font-size:1em;
}
#nav li{
 	position:relative;
 	display:inline;
	margin:0;
	padding:0;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-top-right-radius: 3px;
}

#indexProgrammes ul {
	width:inherit;
	margin:0 0 0 1em;
	padding:0;
}

#indexProgrammes li {
 	list-style: none;
  	margin: 0;
  	padding:0 0 0 0px;
}

#indexProgrammes li li {
	font-weight:bold;
	font-size:97%;
}

#indexProgrammes li li {
	font-weight:normal;
	border-top:1px solid white;
}

#indexProgrammes li li li{ 
	border-top:none;
}

/***************************************************************
	Gˇnˇrateur
****************************************************************/
#programmesRoot label{
  display:inline;
}

#relationAuxProgrammes li{
	list-style:none outside none;
}

#relationAuxProgrammes ul{
	list-style-image:none;
	margin:6px 0px 0px 3px;
  	padding:0 6px 0px 1em;
	/*width:97%;*/
}

/***************************************************************
	Autocomplete
****************************************************************/

div.auto_complete    {
	 color			  :black;
     position         :absolute;
     z-index		  :100;
     background-color :white;
     border           :1px solid #888;
     margin           :0px;
     padding          :0px;
} 

div.auto_complete ul {
	margin:0;
	padding:0;
	list-style:none;
}

div.auto_complete li {
	margin:0 0 0 3px;
	padding:0;
	
	clear:both;
}

div.auto_complete li.selected    {
	background-color: #ffb;
}

#generator_carousel div.auto_complete li {
	width:25em;
}



/***************************************************************
	Lecture de fiche ˇcran
****************************************************************/
#seancePrerequis, #seanceCompetence, #seanceBibliographie, #seanceLexiquececrl, #seancePhonologie, #seanceCulture, #seanceNotion, #seanceConcept, #seanceFaitdelangue {
	padding:0;
	list-style-image:none;
}

/***************************************************************
	Tooltips
****************************************************************/
#tooltip {
	color:white;
	background-color:#EF6624;
	width:200px;
	padding:3px;
}

.tooltipLink:hover {
	border:none;
}

.tooltipLink:hover img {  
  border:none;
}

/****************************************************************
	Addthis
****************************************************************/
.addthis_toolbox .custom_images a
{
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
}

.addthis_toolbox .custom_images a:hover img
{
    opacity: 1;
}

.addthis_toolbox .custom_images a img
{
    opacity: 0.75;
}
/*****************************************************************
	Page Classeur
*****************************************************************/
#triMatiere {
	clear:both;
	width:100%;
}
#triMatiere li{
	float:left;
	width:30%;
}