/*
Titre			styles.css
Site 			just4u.org
Navigateurs 	tous (sauf IE)
Autheur 		C.R. (www.megaphone.ch)
Date création 	14.12.2009
Dernière modif.	14.12.2009
*/


/* 
GLOBAL RESET 
On re-définit les styles initiaux de certaines balises
*/
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal } /*ne pas mettre em et strong dans cette ligne VT*/
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h5, h5, h6 { font-size:100% }
q:before, q:after { content:''}

strong { font-weight: bold; }
em { font-style: italic; }
ol, ul, li { list-style:none; }

* a { position:relative } 
a { outline:none } 
a img { border:none } 


/* 
TYPO 
*/
h1 { font:normal 18px/22px Arial, Helvetica, sans-serif; color:#333; text-align:left }
h2 { font:bold 20px/26px Arial, Helvetica, sans-serif; color:#333; text-align:left; padding:0 0 1em 0; }
h3 { font:normal 16px/22px Arial, Helvetica, sans-serif; color:#333; text-align:left }
h4 { font:bold 12px/22px Verdana, Tahoma, Trebuchet MS, sans-serif; color:#333; text-align:left }
p { margin:2px 0 10px 0 }
body, h4, p, li, dt, dd, label, input, textarea { font-family:Arial, Helvetica, sans-serif }
body, p, li, dt, dd, label, span { font-size:12px; color:#333; }
input, textarea { font-size:11px; color:#333; padding:2px }
blockquote { font:11px/18px Verdana, Arial, Helvetica, sans-serif bold }

a { color:#666; text-decoration:underline }
a:visited { color:#666; text-decoration:underline }
a:hover { color:#000; text-decoration:underline }
a:focus { color:#000; text-decoration:underline }
h2 a { color:#333; text-decoration:underline }

h1.title { text-indent:-9999px }
h1.title a { display:block; position:absolute; width:320px; height:120px; text-decoration:none; background:transparent url('images/template/logo_just4u.png') top left no-repeat }
h1.title a:hover { color:#333 }
h2.siteDescription { position:absolute; top:400px; left:0px; width:200px; /*height:96px;*/ text-indent:-9999px }
h2.titleList { margin:0; padding:0; }

ul.standardList { margin:2px 0 10px 0 }
ul.standardList li { list-style: disc inside; margin-left:1em }

div#header { color:#fff; }
div#header a { color:#999; text-decoration:none;  }
div#header a:hover { color:#fff; text-decoration:none; }

div#footer { font-size:0.8em; color:#ccc }
div#footer a { color:#ccc;  }
div#footer a:hover { color:#fff; }

.more { font-size:11px; font-weight:normal; font-style:normal; color:#bb001a; text-decoration:underline; padding-left:1em }
.boldText { font-weight:bold }
.underlineText, a.underlineText { text-decoration:underline }
.uppercaseText { text-transform: uppercase }
.smallText { font-size:10px; }
.normalText { font-size:12px; color:#333; font-weight:normal; font-style:normal }


/* 
LAYOUT 
*/
body { background-color:#333; text-align:center }
div#wrapper { min-width:1050px; text-align:left }

div#header { height:83px; border-top:1px solid #6b6867; background:url('images/template/bg_top.png') top left repeat-x; }
div#header_info_01 { padding:1px 0 0 340px; height:50px; }
div#header_info_01 img { float:left; height:50px; width:50px; }
div#header_info_01 div#mailalert, div#header_info_01 div#facebookalert, div#header_info_01 div#favoris { float:left; margin-left:1px; height:50px; width:200px; background:transparent url('images/template/bg_top_button.png') top left repeat-x }
/*div#header_info_01 div { margin-left:1px; width:150px; background:transparent url('images/template/bg_top_button.png') top left repeat-x }*/
div#header_info_01 div.infoBox { display:block; position:relative; padding:5px 10px 0 35px; width:155px; height:50px; color:#999 }
div#header_info_01 div.infoBox_special { display:block; position:relative; padding:10px 0 0 5px; width:195px; height:50px; color:#999 }
div#header_info_01 div.emailBox { background:transparent url('images/template/picto_email.png') 3px 10px no-repeat }
div#header_info_01 div.emailBox_new { background:transparent url('images/template/picto_email_new.png') 3px 10px no-repeat; color:#fff }
div#header_info_01 div.facebookBox { background:transparent url('images/template/picto_facebook.png') 5px 10px no-repeat }
div#header_info_01 div.facebookBox_new { background:transparent url('images/template/picto_facebook_new.png') 5px 10px no-repeat; color:#fff }
div#header_info_01 div.favorisBox { background:transparent url('images/template/picto_favoris.png') 5px 10px no-repeat }
div#header_info_01 div.favorisBox_new { background:transparent url('images/template/picto_favoris_new.png') 5px 10px no-repeat; color:#fff }

div#header_info_01 div.infoBoxContent { display:none; position:absolute; z-index: 500; top:50px; left:0px; width:250px; background-color: #000; filter:alpha(opacity=90); /* IE */ -moz-opacity:0.9; /* Mozilla */ -khtml-opacity: 0.9; /* Safari */ opacity: 0.9; /* CSS3 */ color:#fff; }
div#header_info_01 div.infoBox span.infoBoxItem { display:block; padding:2px 4px 2px 4px; border-bottom:1px solid #666; color:#ccc }
div#header_info_01 div.infoBox a.infoBoxLink { display:block; padding:2px 4px 2px 4px; border-bottom:1px solid #666; color:#ccc }
div#header_info_01 div.infoBox a.infoBoxLink:hover { color:#fff }
div#header_info_01 div.infoBox:hover div.infoBoxContent { display:block }
div#header_info_02 { padding:0px 0 0 340px; line-height:30px; }
/*
div#mailalert div, div#facebookalert div { display:none; }
div#mailalert:hover div, div#facebookalert:hover div { display:block; }
*/
div#just4u_box { background:#e1dddc top left no-repeat; }
div#just4u_leftborder { padding:0 0 0 320px; background:transparent url('images/template/bg_content_degrade.png') top left repeat-y; }
div#just4u_content { position:relative; padding:0 20px 0 20px; height:320px; background-color:#fff }
div#just4u_content_autoheight { position:relative; padding:0 20px 20px 20px; background-color:#fff }
div#just4u_rightcol { position:absolute; top:0px; right:0px; margin-top:15px; width:200px }
div#just4u_text { width:500px; height:300px; background-color:#fff; text-align:justify }
div#just4u_text_autoheight { width:500px; min-height:400px; background-color:#fff; text-align:justify }
div#just4u_citation { position:absolute; top:200px; left:-300px; width:260px; }

div#navbox { margin-top:10px; text-align:left; background-color:transparent; }
div#navbox .leftCol { width:720px; }
div#navbox .rightCol { float:right; width:220px; padding-top:12px; }

div#footer { margin:20px 0 10px 0; padding:5px; text-align:center; }

div.content { padding:10px; }
div.external_box { border-top:1px solid #fff; background:#fff url('images/template/bg_externalbox_degrade.png') top left repeat-x; }
div.bt_open_close { padding:0 1em 0 0; height:30px; text-align:right; }

/*
MENU
*/
ul#menu li { display:inline; }
ul#menu li a { display:block; float:left; width:134px; height:90px; margin:0 8px 0 1px; background-color:transparent; color:#fff; text-decoration:none; font:normal 16px/20px Verdana, Trebuchet MS, sans-serif; text-indent:-9999px }
ul#menu li a:hover { color:#fff; text-decoration:none }

a.rightMenu { display:block; padding:3px 34px 3px 0; border-bottom:1px solid #ccc; text-align:right; text-decoration:none }
a.rightMenu_spec { display:block; margin:15px 0 15px 0; padding:3px 34px 3px 0; text-align:right; text-decoration:none }

/* 
OTHERS 
*/
.clearing { clear:both }
.clearingLeft { clear:left }
.bg_white { background:#fff; }
.text_white { color:#fff; }
.smaller_text { font-size:smaller }
.bigger_text { font-size:1.3em }
.bold_text { font-weight:bold }
.sep { color:#4e4e4e }
.imgToLeft { float:left; margin:0 1em 1em 0 }
.imgToRight { float:right; margin:0 0 1em 1em }
.content_rightcol { float:right; width:200px; margin:0 0 10px 15px }
.encadre { margin:1em 0 1em 0 }
span.citation { line-height:15px; background-color:#000; filter:alpha(opacity=70); /* IE */ -moz-opacity:0.7; /* Mozilla */ -khtml-opacity: 0.7; /* Safari */ opacity: 0.7; /* CSS3 */ color:#fff; }
a.bt_close_box { background:transparent url('images/template/bt_close.png') center right no-repeat; }
a.bt_open_box { background:transparent url('images/template/bt_open.png') center right no-repeat; }
a.bt_close_box, a.bt_open_box { display:block; padding:0 20px 0 0; line-height:30px; font-size:14px; font-weight:bold; color:#aaaaaa; text-decoration:none }
a.bt_close_box:hover, a.bt_open_box:hover { color:#666; text-decoration:none }

#agendaBox { padding:20px 34px 0 0; text-align:right; }

.profile_block { padding:15px; }
.photo_perso { height:50px; }

#connected_users { padding:1em; text-align:left; }
#thumbnails { padding:1em 0 1em 0; }
a.user_item { display:bloc; float:left; width:80px; height:80px; font-size:10px; color:#999; text-decoration:none; text-align:center; }

.presentJust4u { float:right; width:150px; margin:0 0 1em 3em; padding:2px 3px 2px 3px; background-color:#9e9614; /*background-color:#c5bb1c;*/ color:#fff; font-size:11px }
.presentJust4u a { color:#fff; }

.warning { margin:0; padding:0 0 1em 0; color:#ff0000; font-weight:bold;  }

/*
Formulaires
*/ 
label { /* mise en forme des intitulés de champs */
	margin: 0;
	padding: 0 0.4em 0 0;
	vertical-align: middle;
	font-size:10px;
	color: #333;
	cursor:pointer;
}
form p { /* p du formulaire */
	margin: 0.2em 0;
	padding: 0;
	text-align:left;
}
form p.submitButton { margin-top:1em; padding-left:210px }
form p.profileSubmitButton { padding-left:225px }
form p label {	/*** Mise en forme des intitulés de champs ***/
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 200px;	/*** Les intitulés prennent cette dimension de la largeur totale du formulaire ***/
	padding-right:10px;
	text-align: right;	/*** ... et ils sont alignés à gauche... ***/
}
fieldset {
	padding: 10px 10px 10px 10px;
	border: 1px solid #ccc;
}
legend {
	font-weight: bold;
	color: #333;
	padding: 5px 5px 5px 5px;
}
select { border-right:#CCC 1px solid; border-top:#ccc 1px solid; border-left:#999 1px solid; border-bottom:#999 1px solid; font-family:Arial,Helvetica,sans-serif; font-size:10px; color:#333; background-color:#fff; width:150px; margin:0; }
textarea { border-right:#CCC 1px solid; border-top:#ccc 1px solid; border-left:#999 1px solid; border-bottom:#999 1px solid; font-family:Arial,Helvetica,sans-serif; height:12px; font-size:10px; color:#333; background-color:#fff; width:250px; height:150px; margin:0; }
.formfield { border-right:#CCC 1px solid; border-top:#ccc 1px solid; border-left:#999 1px solid; border-bottom:#999 1px solid; font-family:Arial,Helvetica,sans-serif; height:12px; font-size:10px; color:#333; background-color:#fff; width:150px; margin:0; }
.formfield_short { border-right:#CCC 1px solid; border-top:#ccc 1px solid; border-left:#999 1px solid; border-bottom:#999 1px solid; font-family:Arial,Helvetica,sans-serif; height:12px; font-size:10px; color:#333; background-color:#fff; width:80px; margin:0; }
.formbutton { font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:11px; color:#fff; background-color:#999; padding:0px; margin:0 0 0 0; border:none; cursor:pointer; }
.formbutton:hover { background-color:#333; }
.radio {
	padding-top:3px;
}


#articlesSearchForm { float:right; width:200px; text-align:right; margin:0 0 1em 2em; padding:0.5em; background-color:#eeeeee; }
#articlesSearchForm label { display:none }