/************
* STRUCTURE *
************/

html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
}

#body {
	background-color: #6699cc;
	font-family:  Arial, Trebuchet, Tahoma, sans-serif;
	font-size: 11px;
	color: #ffffff;
}

#page {
	width: 940px;
	height: 900px;
	padding: 0px;
	margin: auto;
}	

#portal-container {
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none; 
	outline: none;	
	color: #5478a1;
}
a:hover {
	text-decoration: underline; 
}
a:active {
	outline: none;
}
a:focus { 
	outline: none;
}


/*********
* HEADER *
*********/

#header-container {
	height: 90px;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

#header-container #logo {
	width: 480px;
	height: 90px;
	background: url('images/logo.png') no-repeat 15px 4px;
	margin: 0px;
	padding: 0px;  
	float: left;
}

#header-container #icones {
	width: 280px;
	height: 30px;
	margin: 55px 10px 0px 20px;
	float: right;
}
#header-container a {
  	width: 64px;
	height: 22px;
	float: left;
	margin: 5px 5px 0px 0px; /* 1=haut, 2=droite, 3=bas, 4=gauche */
}
#header-container a:hover  {
}
#header-container a.flux_rss	{
	background: url('images/icone_rss.png') no-repeat;
}
#header-container a.favoris	{
	background: url('images/icone_favoris.png') no-repeat;
}
#header-container a.partager	{
	background: url('images/icone_partager.png') no-repeat;
}
#header-container a.webtv	{
	background: url('images/icone_webtv.png') no-repeat;
}
#header-icones a.contact	{
	background: url('images/icone_contact.png') no-repeat;
}



/************
* CONTAINER *
************/

#top-container, #bottom-container {
   	height: 12px;
   	margin: 0px;
   	padding: 0px;
  	clear: both;
}
#top-container {
	background: url('images/barre_top_container.png') no-repeat;
}
#bottom-container {
	background: url('images/barre_bottom_container.png') no-repeat;
}

#content-container {
   	max-height: 100%;
   	margin: 0px;
   	padding-left: 12px;
   	background-color: #8cb3d9;
}

#HG, #HC, #HD, #MG, #MD, #BG, #BD {
	width: 294px;
	height: 196px;
	text-align: center;
   	margin: 0px 8px 8px 0px;
   	padding: 2px;
	background-color: #ffffff;
	float: left;
	border: 1px solid #5478a1; 
}

#BC, #MC {
	width: 300px;
	height: 200px;
	text-align: center;
   	margin: 0px 8px 0px 0px;
   	padding: 0px;
	float: left;
}

.titre_partenaires {
   	font-size: 12px;
	font-weight: bold;
   	color: #ffffff;
   	background-color: #feb400;
   	margin-right: 12px;
   	padding: 4px 10px;
}

#partenaires {
	display: block;
}
#partenaires a {
	font-size: 11px;
	font-weight: bold;   	
	color: #5478a1;
	background: transparent url('images/bloc_partenaire.png') no-repeat;
	width: 144px;
	height: 24px;
   	text-align: center;
	float: left;
	padding-top: 10px;
	margin: 8px 10px 0px 0px;
}

.spacer {
  clear: both;
}


/**********
* PORTLET *
**********/

.mask {
	position: relative;
	width: 294px;
	height: 196px;
	overflow: hidden;
}
.box, .boxh {
	display: block;
	position: absolute;
}
.box img {
	display: block;
	border: none;
	cursor: pointer;
	/margin-left: -147px;
}
.boxh img {
	display: inline;
	float: left;
	border: none;
	cursor: pointer;
}
.info {
	position: relative;
	top: -150px;
	width: 260px;
	height: 63px;
	margin: 80px 6px 0px 7px;
	text-align: center;
	font-weight: bold;
	padding: 30px 10px 0px 10px;
	cursor: pointer;
}
.mask img.fondu {
	position:absolute;
	display:block;
	border:none;
}


#respirer .info {
	background: transparent url('images/bloc_noir_respirer.png') no-repeat 0px 0px;
}
#informer .info {
	background: transparent url('images/bloc_noir_informer.png') no-repeat 0px 0px;
}
#vivre .info {
	background: transparent url('images/bloc_noir_vivre.png') no-repeat 0px 0px;
}
#sortir .info {
	background: transparent url('images/bloc_noir_sortir.png') no-repeat 0px 0px;
}
#decouvrir .info {
	background: transparent url('images/bloc_noir_decouvrir.png') no-repeat 0px 0px;
}
#sebouger .info {
	background: transparent url('images/bloc_noir_sebouger.png') no-repeat 0px 0px;
}
#entreprendre .info {
	background: transparent url('images/bloc_noir_entreprendre.png') no-repeat 0px 0px;
}
#ville .info {
	background: transparent url('images/bloc_noir_ville.png') no-repeat 0px 0px;
}
#agglo .info {
	background: transparent url('images/bloc_noir_agglo.png') no-repeat 0px 0px;
}


#webtv {
	background: transparent url('images/accueil_webtv02.png') no-repeat 0px 0px;
	width: 300px;
	height: 202px;
	position: relative;
	color: #ffffff;
	font-weight: bold;
	font-size: 16px;
	padding-top: 5px;
	cursor: pointer;
}

#webtv .mask {
	position: relative;
	width: 294px;
	height: 196px;
	overflow: hidden;
}
#webtv .mask .texte {
	font-size: 12px;
	font-weight: bold;
	color: #fffffe;
	float: left;
	width: 155px;
	margin: 50px 0px 0px 20px;
	text-align: left;
}

/* Hack IE7  */
*> #webtv .mask .texte {
	!margin-left: -130px;
}

#webtv .mask a:hover {
	text-decoration: none;
}
#webtv .mask img {
	margin: 50px 0px 0px 5px;
	border: 1px solid #5478a1;
	padding: 2px;
	background-color: #ffffff;
	width: 100px;
	height: 75px;	
}

/* Hack IE7  */
*> #webtv .mask img {
	!margin-left: -130px;
}

#webtv .mask .container {
	display: block;
	position: absolute;
}
#webtv .mask .cellH {
	position: relative;
	width: 294px;
	height: 196px;
	float: left;
	display: inline;
	border: none;  	
}

#rechercher {
	height: 100%;
	padding: 0px;
	text-align: left;
}

#rechercher .bloc_rechercher {
	background: transparent url('images/bloc_rechercher.png') no-repeat 0px 0px;
	height: 147px;
	margin: 1px 0px 0px 0px;
	padding: 0px;
	border-top: 1px solid transparent;
}


#rechercher .titre_rechercher {
	font-size: 19px;
	font-weight: bold;   
	color: #5478a1;
	border-bottom: 1px solid #8cb3d9;
	padding-bottom: 5px;
	display: inline;
}

#rechercher .bloc_rechercher input {
	background: transparent url('images/input_rechercher.png') no-repeat scroll 0px 0px;
	width: 195px;
	height: 23px;	
	border: none;
	text-align: left;
	margin: 95px 0px 0px 25px;
	/margin: 95px 0px 0px 25px;
	padding: 3px 10px 0px 5px;
	/padding: 5px 10px 0px 5px;  
	float: left;
	color: #cf6e00;
	font-size: 12px;
}

#rechercher a.lancer_recherche {
	background: transparent url('images/ok_rechercher.png') no-repeat scroll 0px 0px;
	width: 32px;
	height: 25px;
	margin: 95px 25px 0px 0px;
	/margin: 95px 25px 0px 0px;
	float: right;
}

#rechercher .bloc_entrer {
	padding: 0px;
	margin: 0px;
	text-align: left;
}

#rechercher .bloc_entrer a {
	background: transparent url('images/entrer_site.png') no-repeat 0px 0px;
	width: 300px;
	height: 52px;
	padding: 0px;
	margin: 0px;
	text-align: left;
	opacity: 0.9;
	float: left;
}
#rechercher .bloc_entrer a:hover {
	opacity: 1;
}

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

#footer-container {
	clear: both;
	font-size: 10px;
	text-align: center;
	width: 100%;
	padding: 15px 0px 5px 0px;
}

#footer-container a {
	font-size: 11px;
	font-weight: bold;
	color: white;
	text-decoration: none;
   	padding: 0px 2px 0px 2px;   /* 1=haut, 2=droite, 3=bas, 4=gauche */

}

#footer-container a:hover {
	text-decoration: underline;
}


/************************
*  ATTENTE ET MESSAGES  *
************************/

.pinformer,.pvivre ,.psortir,.pdecouvrir,.pentreprendre,.pville,.pagglo {
	width: 294px;
	height: 121px;
	text-align: center;
	font-size: 16px;
	padding-top: 75px;
}
 .pinformer {
	background-color:#6699cc;
}
 .pvivre {
	background-color:#9e71a7;
}
 .psortir {
	background-color:#d28279;
}
 .pdecouvrir {
	background-color:#88b262;
}
 .pentreprendre {
	background-color:#ae3427;
}
 .pville {
	background-color:#6f8ba6;
}
 .pagglo {
	background-color:#feb400;
}
.panneauattente {
	width: 294px;
	/*height: 196px;*/
	background:transparent;
	text-align: center;
	font-size: 16px;
	margin-top: 75px;
}
.iconattente {
	padding-top: 50px;
	margin: 0px auto;
	background: url( 'images/ajax-loader-bar.gif' ) no-repeat center 20px;
}

/*************
* MESSAGE IE *
*************/

.message-ie {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #000000;
   	padding: 10px;
	background-color: #ffffcc;
}
.message-ie a {
	color: #000000;
	text-decoration: underline;
}
.message-ie  a:hover {
	text-decoration: none;
}