/******************* Canevas *********************/

#contenu { padding: 12px 0 20px 10px; }
#contenu .blocs { margin-left: 10px; }
#main { margin: 0 0 20px 0; }
#main #right .erreur_msg { margin: 0 0 25px 0; width: 560px; }
#right .ok_msg, #right .info_msg { margin: 0 0 25px 0; width: 580px; }
#main #right #sous-menu2 { width: 415px; margin-top: 5px; }
#main #right .nav { margin: 10px 0 10px 0; }
#main #right .nav .pagination { margin: 0 -2px 0 0; }
#main #right .nav .pagination a.last { margin-right: 0; }
#main a.update { margin: 5px 0 0 0; display: block; height: 16px; background: transparent url(/i/in/update2.gif) no-repeat 0px 0px; padding: 2px 0 0 18px; }

/******************* LEFT COLUMN *********************/

#main #left { float: left; width:201px; }
#main #left #resume { width:200px; padding: 7px 0 8px 0; border-right: 1px solid #E3E3E3; background: #fff url(/i/in/mc-pi.jpg) no-repeat bottom left; }
#main #left #resume img.avatar { margin: 0 0 28px 42px; width: 100px; height: 100px; }
#main #left #resume ul { list-style-type: none; margin: 0 5px 0 10px; }
#main #left #resume ul.m3 { display: none; }
#main #left #resume ul li { padding: 0 0 15px 0; line-height: normal; color: #777; }
#main #left #resume ul li.follow { padding: 0 0 20px 0; width: 180px; }
#main #left #resume ul li.follow a.fo { margin: 0; padding-top: 10px; height: 33px; }
#main #left #resume ul li.followed { padding: 0 0 18px 0; }
#main #left #resume ul li.followed span { color: #3997C8; display: block; padding: 0 0 3px 0; }
#main #left #resume ul li.followed a { display: block; color: #777; }
#main #left #resume ul li.truncated { width: 175px; }
#main #left #resume ul li strong { color: #424242; }
#main #left #resume ul li h1 { color: #424242; text-transform: capitalize; font-size: 1.4em; font-weight: bold; padding: 0; display: inline; }
#main #left #resume ul li strong i { color: #777; }
#main #left #resume-bottom { background: #fff url(/i/in/mc-pb.jpg) no-repeat top left; margin: 0 0 20px 0; height: 10px; }

/******************* MAIN *********************/

#main #right  { float: left; padding: 20px 0 15px 0; width: 602px; margin: 0 0 0 40px; }
#main #right .menu { height: 60px; width: 582px; margin: 0 0 15px 0; background: url(/i/in/gpixel.jpg) repeat-x bottom left; padding-left: 20px; }
#main #right .menu ul { height: 60px; width: 450px; float: left; }
#main #right .menu ul li { display: block; margin-top: 8px; float: left; height: 50px; text-align: center; text-shadow: 1px 1px 0 #fff; border: 1px solid #d5d5d5; border-left: 0; background: #f5f5f5; }
#main #right .menu ul li a { display: block; line-height: normal; text-decoration: none; color: #424242; width: 140px; height: 32px; padding: 18px 0 0 0; background-image:-moz-linear-gradient(#fff, #f2f2f2); background-image:-webkit-linear-gradient(#fff, #f2f2f2); background-image:-o-linear-gradient(#fff, #f2f2f2); background-image:linear-gradient(#fff, #f2f2f2); }
#main #right .menu ul li a:hover { background: #eee; }
#main #right .menu ul li.on { position: relative; border-bottom: 1px solid #fff; background: #fff url(/i/in/gpixel.jpg) repeat-y 0 0; height: 58px; margin: 0 0 0 -1px; }
#main #right .menu ul li.on a { padding: 24px 0 0 0; height: 34px; background-image: none; }
#main #right .menu ul li.on a:hover { background: #fff url(/i/in/gpixel.jpg) repeat-y top left; }
#main #right .menu ul li.first { border-left: 1px solid #d5d5d5; }

#main #right #content { float: left; width: 602px; }
#main #right h2 { margin: 0; font-size: 1.4em; font-weight: normal; padding: 0 0 2px 0; border-bottom: 1px solid #ccc; }

#main #right #stats { position: relative; padding: 0 0 10px 0; margin: 0 0 20px 0; width: 600px; } 
#main #right #stats span { margin: 0 18px 0 0; color: #777; } 
#main #right #stats span em { font-style: normal; }
#main #right #stats span strong { color: #424242; } 

#main #right #activite { width: 600px; margin: 0 0 30px 0; }
#main #right #activite .liste { border-bottom: 1px solid #e5e5e5; padding: 5px 0 0 0; }
#main #right #activite .elem { padding: 8px 0 9px 0; height: 1%; border-top: 1px solid #e5e5e5; background: url(/i/in/publi_bar.png) no-repeat 0 0; } 
#main #right #activite .c { background: none; }
#main #right #activite .elem .noph { padding-left: 24px; }
#main #right #activite .elem p { float: left; width: 440px; padding: 1px 0 0 0; line-height: 15px; }
#main #right #activite .elem em { float: right; display: block; padding: 2px 5px 0 0; color: #888; font-style: normal; }
#main #right #activite .more { font-size: 1.1em; display: block; height: 22px; margin: 13px 0 -17px 0; position: relative; padding: 4px 27px 0 0; background: url(/i/in/more_1.png) no-repeat right 3px; text-decoration: underline; font-weight: bold; text-align: right; }
            
#main #right #rewards { width: 600px; margin: 0 0 35px 0; }
#main #right #rewards .badge { width: 95px; float: left; margin: 12px 5px 0 0; }
#main #right #rewards .reward { width: 73px; height: 58px; padding: 6px 3px 3px 19px; background: #D3F2FE; }
#main #right #rewards .on { background: #4CC9F8; }
#main #right #rewards span { height: 28px; line-height: 15px; display: block; text-align: center; border-top: 1px solid #ccc; padding: 5px 0 0 0; margin: 1px 0 0 0; }
#main #right #rewards a { display: block; width: 54px; height: 54px; }
#main #right #rewards .first { background: transparent url(/i/in/main-sprite.png) no-repeat -290px -650px; }
#main #right #rewards .on .first { background: transparent url(/i/in/main-sprite.png) no-repeat -290px -708px; }
#main #right #rewards .av { background: transparent url(/i/in/main-sprite.png) no-repeat -58px -650px; }
#main #right #rewards .on .av { background: transparent url(/i/in/main-sprite.png) no-repeat -58px -708px; }
#main #right #rewards .ac { background: transparent url(/i/in/main-sprite.png) no-repeat -174px -650px; }
#main #right #rewards .on .ac { background: transparent url(/i/in/main-sprite.png) no-repeat -174px -708px; }
#main #right #rewards .ph { background: transparent url(/i/in/main-sprite.png) no-repeat -116px -650px; }
#main #right #rewards .on .ph { background: transparent url(/i/in/main-sprite.png) no-repeat -116px -708px; }
#main #right #rewards .co { background: transparent url(/i/in/main-sprite.png) no-repeat -232px -650px; }
#main #right #rewards .on .co { background: transparent url(/i/in/main-sprite.png) no-repeat -232px -708px; }
#main #right #rewards .all { background: transparent url(/i/in/main-sprite.png) no-repeat 0 -650px; }
#main #right #rewards .on .all { background: transparent url(/i/in/main-sprite.png) no-repeat 0 -708px; }
.tooltip strong { display: block; margin: 0 0 3px 0; }
.tooltip em { display: block; font-style: normal; margin-bottom: 5px; padding: 13px 14px 15px 12px; }

#main #right #description { margin: 0 0 30px 0; }
#main #right #description .p { width: 602px; padding: 20px 0 0 0; }
#main #right #description .p .av { float: left; padding: 0 14px 0 0; }
#main #right #description .p .av img { width: 60px; height: 60px; padding: 3px; background: #fff; border: 1px solid #ccc; }
#main #right #description .p .in { float: left; width: 518px; }
#main #right #description .p .in .hd {  }
#main #right #description .p .in .hd .auth { float: left; }
#main #right #description .p .in .hd .auth span { font-weight: bold; }
#main #right #description .p .in .txt { width: 518px; overflow: hidden; padding: 7px 0 10px 0; }
#main #right #description .p .in .txt .smi { height: 18px; margin-bottom: -4px; }
#main #right #description .p .ln { }
#main #right #description .p .ln a.reply { display: block; float: left; line-height: 16px; background: url(/i/in/reply.png) no-repeat 0 0; padding: 0 0 0 23px; }
#main #right #description .p .ln a.upd { display: block; float: left; line-height: 16px; background: url(/i/in/update.gif) no-repeat -3px 0; padding: 1px 0 0 16px; }

#main #right #wall #poster_commentaire { padding: 20px 0 0 0; }
#main #right #wall #commentaire { margin-top: 30px; }
#main #right #wall .list .c .remove { display: block; float: left; line-height: 16px; background: url(/i/in/delete2.png) no-repeat 0 0; padding: 0 0 0 20px; margin: 0 0 0 15px; }

/******************* RELATED *********************/

#main #mrel { float: left; width: 30px; margin: 0; padding: 10px 0 20px 50px; background: none; }
#main #mrel .mod { width: 28px; height: 32px; background-color: #aaa; margin: 0 5px 0 0; }
#main #mrel .mod .dropdown { float: none; margin: 0; padding: 0; }
#main #mrel .mod a.selected { display: block; width: 28px; height: 32px; padding: 0; background: #ddd url(/i/in/main-sprite.png) no-repeat -115px -36px; }
#main #mrel .mod a.selected:hover { opacity : 0.9; -moz-opacity : 0.9; filter : alpha(opacity=90); }
#main #mrel .mod .dropliste { left: auto; right: 0; width: 150px; }
#main #mrel .mod .dropliste .elem { padding: 9px 0 9px 8px; text-decoration: none; }
#main #mrel .ws { padding: 20px 0 0 0; }
#main #mrel .ws a { display: block; width: 28px; height: 28px; margin: 0 4px 6px 0; text-decoration: none; opacity : 0.8; -moz-opacity : 0.8; filter : alpha(opacity=80); }
#main #mrel .ws a:hover { opacity : 1; -moz-opacity : 1; filter : alpha(opacity=100); }
#main #mrel .ws a.web { background: url(/i/in/main-sprite.png) no-repeat -333px -36px; }
#main #mrel .ws a.fb { background: url(/i/in/main-sprite.png) no-repeat -230px -36px; }
#main #mrel .ws a.tw { background: url(/i/in/main-sprite.png) no-repeat -265px -36px; }

/******************* Publications *********************/

#main #right #publications { padding: 15px 0 40px 0; }
#main #right #publications .options { margin: 0 0 23px 0; height: 1%; }
#main #right #publications .options .dropdown { float: left; margin: 0 13px 0 0; }
#main #right #publications .no_results_found { margin-top: 20px; }

/******************* Contacts *********************/

#main #right #membres { padding: 15px 0 0 0; }
#main #right #membres .nav { margin: 0 142px 10px 0; }
#main #right #membres .hleaderboard { padding-top: 15px; padding-bottom: 30px; width: 600px; }
#main #right #membres .utitle { width: 730px; }
#main #right #membres .utitle h2 { background: none; color: #424242; letter-spacing: 0; }
#main #right #membres .utitle h2 span { font-size: 0.6em; letter-spacing: 0; }
#main #right #membres .utitle p { padding-left: 0; margin: 0; border: 0; background: none; font-style: italic; }
#main #right #membres .liste { list-style-type: none; padding: 15px 0 25px 0; margin: 0 0 0 0; overflow:hidden; }
#main #right #membres .nores { margin-bottom: 35px; }
#main #right #membres .liste .txt { padding: 0 0 20px 0; font-style: italic; margin: -3px 0 0 0; }
#main #right #membres .liste .li { display: block; float: left; padding: 25px 0 25px 12px; margin: 0 15px 15px 0; width: 279px; height: 1%; background: url(/i/in/membrelibg2.jpg) repeat-x left bottom; border: 1px solid #eee; }
#main #right #membres .liste .li.c { margin-right: 0; }
#main #right #membres .liste .li img.avatar { float: left; width: 80px; height: 80px; margin: 0 10px 0 0; }
#main #right #membres .liste .li p { float: left; width: 184px; line-height: 15px; }
#main #right #membres .liste .li p strong { display: block; margin: 1px 0 4px 0; }
#main #right #membres .liste .li p strong a { text-decoration: none; }
#main #right #membres .liste .li p .man { display: block; height: 16px; background: url(/i/in/ico_s_m.png) no-repeat 0 0; margin: 8px 0 0 0; padding: 0 0 0 21px; }
#main #right #membres .liste .li p .wom { display: block; height: 16px; background: url(/i/in/ico_s_w.png) no-repeat 0 0; margin: 8px 0 0 0; padding: 0 0 0 21px; }
#main #right #membres .more { display: block; position: relative; height: 20px; margin: -10px 0 25px 0; padding: 2px 27px 0 462px; background: url(/i/in/more_1.png) no-repeat right top; text-decoration: underline; font-weight: bold; float: left; }

/******************* Tablette *********************/

@media screen and (max-width: 1000px)
{
	#main #left { width: 602px; margin-left: 12px; }
	#main #left #resume { background: none; border-right: 0; width: auto; }
	#main #left #resume img.avatar { margin-left: 0; float: left; }
	#main #left #resume ul { margin-left: 0; display: block; }
	#main #left #resume ul.m1 { float: left; width: 240px; margin-left: 20px; }
	#main #left #resume ul.m2 { display : none; }
	#main #left #resume ul.m3 { display: block; float: left; width: 210px; padding-left: 15px; margin-right: 0; border-left: 1px solid #ddd; }
	#main #left #resume ul.m3 li { padding-bottom: 7px; line-height: normal; }
	#main #left #resume ul.m3 li.date_ins { display: none; }
	#main #left #resume-bottom { display: none; }
	#main #right { margin-left: 12px; }
	#main #right .menu { padding-left: 0; width: 602px; }
	#main #mrel { display: none; }
}

/******************* Mobile *********************/

@media screen and (max-width: 665px)
{
	#main { width: 100%; margin: 0 0 20px 0; }
	#main #left { width: 100%; margin-left: 0; }
	#main #left #resume img.avatar { width: 28%; max-width: 100px; height: auto; padding: 1%; border: 1px solid #ccc; margin-right: 5%; margin-bottom: 0; -moz-box-shadow: 0px 0px 7px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 7px rgba(0,0,0,0.2); -ms-box-shadow: 0px 0px 7px rgba(0,0,0,0.2); -o-box-shadow: 0px 0px 7px rgba(0,0,0,0.2); box-shadow: 0px 0px 7px rgba(0,0,0,0.2);}
	#main #left #resume ul.m1 { width: 60%; margin-left: 0; }
	#main #left #resume ul li { }
	#main #left #resume ul li.follow { padding-bottom: 0; }
	#main #left #resume ul li h1 { font-size: 1.3em; }
	#main #left #resume ul.m3 { clear: both; width: 100%; padding-left: 0; border: 0; margin-top: 15px; /* border-bottom: 1px solid #ddd; */ }
	#main #left #resume ul.m3 li { padding-bottom: 3px; color: #424242; line-height: 22px; /* padding-top: 5px; border-top: 1px solid #ddd; */ }
	#main #left #resume ul.m3 li span { /* display: none; */ }
	#main #left #resume ul.m3 li span br { content: ' '; }
	#main #left #resume ul.m3 li span br:after { content: ' '; }	
	#main #left #resume ul.m3 li strong { font-weight: normal; }
	#main #left #resume ul.m3 li strong i { font-style: normal; color: #424242; }
	
	#main #right { width: 100%; margin-left: 0; }
	#main #right .erreur_msg { display: none; width: 86%; }
	#right .ok_msg, #right .info_msg { width: 96%; margin-bottom: 15px; }
	#main #right h2 { margin: 0; font-size: 1.4em; padding-bottom: 3px; font-weight: normal;  }
	#main #right .menu { width: 95%; padding: 0 5% 0 0; }
	#main #right .menu ul { width: 100%; }
	#main #right .menu ul li a { width: 130px; font-weight: bold; font-size: 1em; }
	#main #right #content { width: 100%; }
	#main #right #content #stats { position: relative; width: 100%; padding-top: 10px; padding-bottom: 0; margin-bottom: 0; }
	#main #right #content #stats span { display: block; color: #424242; /* padding-top: 10px; */ width: 100%; }
	#main #right #content #stats span:first-child { /* position: relative; padding-bottom: 10px; */ }
	#main #right #content #stats span:first-child:after { /* content:""; background: #999; position: absolute; bottom: 0; left: 0; width: 15%; height: 1px; */ }
	#main #right #content #stats span strong { /* font-weight: normal; */ } 		
	#main #right #content #stats span em { display: none; }
	
	#main #right #activite { display: none; width: 100%; }
	#main #right #activite .liste .elem em { display: none; }
	#main #right #activite .liste .elem p { width: auto; }
	#main #right #activite a.more { margin-bottom: 0; }
	
	#main #right #rewards { display: none; width: 100%; }
	#main #right #rewards .liste .badge { width: 30%; margin-right: 3%; margin-bottom: 0; }
	#main #right #rewards .liste .badge .reward { width: 94%; padding-right: 3%; padding-left: 3%; text-align: center; }
	#main #right #rewards .liste .badge .reward a { margin: 0 auto; }
	#main #right #rewards .liste .badge span { height: auto; margin-bottom: 4px; }
	
	#main #right #description { margin-bottom: 0; }
	#main #right #description h2 { display: none; }
	#main #right #description .p { width: 100%; padding-top: 0; }
	#main #right #description .p .av { display: none; }
	#main #right #description .p .in { width: 100%; }
	#main #right #description .p .in .hd { display: none; }
	#main #right #description .p .in .txt { position: relative; width: 100%; padding-top: 15px; margin-top: 15px; padding-bottom: 0; }
	#main #right #description .p .in .txt:before { content:""; background: #999; position: absolute; top: 0; left: 0; width: 15%; height: 1px; }
	#main #right #description .p .in .ln { display: none; }
	
	#main #right #wall { padding-top: 26px; }
	#main #right #wall .erreur_msg { display: block; }
	#main #right #wall #poster_commentaire { padding: 20px 0 25px 0; }
	#main #right #wall #commentaire { margin-top: 0; }
}