/****************************************************************************
 * http://sykrock.com
 * gestion des éléments récurrents : 
 *   header, footer, body, menus, logos, 
 *   couleurs de liens, avatar, mini-profil, pubs, debug, 404
 ****************************************************************************/
* {
    margin: 0;
    padding: 0;
}
body {
    text-align: center;
    font-family: "Arial", "Geneva", sans-serif;
    font-size: 12px;
    color: #2b343d;
    background: #ffffff url(/img/common/skyrock-bg.png) repeat-x;
}
hr {
    display: none;
}
img {
    border: none;
}
code, pre {
    font-family: "Courier", monospace;
    font-size: 1em;
    font-style: normal;
}
small {
    font-size: 0.9em;
}
ul {
    list-style-type: none;
}
ol {
    list-style-type: decimal;
}
fieldset {
    border: 1px solid;
    padding: 0.3em;
}
fieldset li {
    float: left;
    margin-right: 2%;
    width: 48%;
}
input, label, select {
    vertical-align: middle;
}
input, textarea, select {
    font-size: 1em;
}
label {
    cursor: pointer;
}
label.required, span.required {
    background: url(/img/icons/required.png) no-repeat top right;
    padding-right: 8px;
}
textarea {
    font-family: Arial, sans-serif;
    font-size: 1em;
}
h1 { font-size: 1.9em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }
a {
    color: #0262dd;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
.clear {
    clear: both;
    height: 0;
}
.note {
    font-size: 0.9em;
    clear: both;
}
a.rss {
    background: url(/img/icons/rss.gif) no-repeat center center;
    width: 46px;
    height: 16px;
    display: block;
}
a.rss span {
    display: none;
}
/****************************************
 * Styles generiques des profils
 * **************************************/
.boy {
    color: #0262dd;
}
.girl {
    color: #fd00d9;
}
a.boy, a.boy:hover {
    color: #0262dd !important;
}
a.girl, a.girl:hover {
    color: #fd00d9 !important;
}
a.girl, a.boy {
    text-decoration: none;
}
a.girl:hover, a.boy:hover {
    text-decoration: underline;
}
a.boy, a.girl, span.boy, span.girl {
    padding-left: 12px;
    zoom: 1; /* fix IE */
}
a.boy, span.boy {
     background: url(/img/icons/boy.png) left top no-repeat;
}
a.girl, span.girl {
     background: url(/img/icons/girl.png) left top no-repeat;
}
.xonline a.boy {
    background: url(/img/icons/boy-online.gif) left top no-repeat;
}
.xonline a.girl {
    background: url(/img/icons/girl-online.gif) left top no-repeat;
}
.xonline img.avatar, .xonline img.snapshot {
    border: 1px solid #11e90c !important;
}
.mini-profil {
    text-align: center;
}
.mini-profil img.avatar {
    width: 100px;
    height: 100px;
}
.mini-profil-50 img.avatar {
    width: 50px;
    height: 50px;
}
.mini-profil span.details {
    display: block;
}
.mini-profil-video .mini-profil {
    text-align: left !important;
}
.mini-profil p.infos, .mini-profil-50 p.infos {
    white-space: nowrap;
}
/****************************************************************************
 * Largeur de la page
****************************************************************************/
#global {
    margin: auto;
    position: relative; /* obligatoire pour les habillages de pub */
}
div.skyrock, div.skyrock-music {
    width: 982px;
}
#popup div.skyrock, #popup div.skyrock-music {
    width: 100%;
}
div.true_home, .true_home #pub_bottom {
    width: 732px;
}
#column_left {
    float: left;
    clear: left;
    width: 660px;
}
#column_right {
    float: right;
    clear: right;
    width: 300px;
}
/****************************************************************************
 * Header
****************************************************************************/
#header {
    width: 100%;
    text-align: left;
}
#header a {
    text-decoration: none;
}
#header_top, #header_right, #header_left {
    height: 28px;
}
#header_top {
    width: auto;
    background: url(/img/header/header_left.gif) no-repeat left bottom;
    color: #938f8a;
    font-size: 0.9em;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
* html #admskyrock #header_top {
    position: static;
}
#header_left {
    float: left;
    margin: 0 0 0 10px;
    position: absolute; /* IE */
}
#header_right {
    margin-left: 10px;
    width: auto;
    background: url(/img/header/header_right.gif) no-repeat right bottom;
    color: #d09c37;
    text-align: right;
}
#header_right ul {
    float: right;
    padding: 6px 0.5em 0 0;
}
#header_right li {
    border-right: 1px solid #dc9d00;
    margin: 0 0 0 7px;
    display: list-item;
    float: left;
}
#header_right li.noborder {
    border-right: 0;
}
#header_right li.logout, #header_right li.subscribe {
    border: none;
}
#header_right a {
    color: #dc9d00;
    padding-right: 7px;
    text-decoration: none;
}
#header_right a:hover {
    color: #ffc600;
}
#header_right a strong {
    color: #fff;
}
#header_right .logout a strong, #header_right .active a {
    color: #fff;
}
#header_right select {
    background: #242424;
    color:#fff;
    font-size: 0.8em;
    border: 1px solid #aca289;
}
ul.lang-choice {
    padding-top: 6px;
}
ul.lang-choice, ul.lang-choice a {
    color: #999;
}
ul.lang-choice li {
    display: inline;
    padding-left: 0.2em;
}
ul.lang-choice a {
	margin-right: 0.2em;
}
ul.lang-choice a:hover {
    color: #ccc;
}
ul.lang-choice .selected a {
    font-weight: bold;
    color: #fff;
}
ul.lang-choice li.intlink a {
	padding: 2px 0 2px 20px;
	background: url(/img/icons/web.png) no-repeat top left;
}
#header_middle {
    clear: both;
    overflow: hidden;
    position: relative;
    height: 48px;
    margin-top: 5px;
}
*:first-child+html #header_middle {
    height: 50px;
}
/****************************************************************************
 * Header perso des profils
 ****************************************************************************/
#header_display, #header_hide {
    height: 10px;
    width: 9px;
    padding: 2px 3px !important;
    display: block;
    float: left;
    border: 1px solid #666;
}
#header_display:hover, #header_hide:hover {
    border: 1px solid #fff;
}
#header_hide span, #header_display span {
    display: none;
}
#header_hide {
    background: url(/img/icons/masquer.png) no-repeat center center;
}
#header_display {
    background: url(/img/icons/afficher.png) no-repeat center center;
}
#header_perso {
    clear: both;
    height: 95px; /* besoin de la meme hauteur que la megabanner + margin-top de celle-ci */
    overflow: hidden;
    margin: 0 20px 5px;
    padding-top: -5px;
    background: #fff url(/img/profils/shadow_header_perso.jpg) left  top repeat-x;
    opacity : 0.85;
    filter : alpha(opacity=85);
    color: #000;
    text-align: center;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-top: none;
}
#header_perso .new {
    font-weight: bold;
}
#me {
    width: 340px;
    float: left;
}
#header_perso #me a {
    color: #000;
}
#me #myavatar {
    margin: 12px 0 0 10px;
    float: left;
}
#me #myavatar p {
    margin: 2px 0;
}
#me ul {
    list-style-position: inside;
    text-align: left;
    float: right;
    margin: 10px 5px 0 0;
    line-height: 1.5em;
}
#me p.infos {
    display: none;
}
#me a {
    text-decoration: none;
}
#me a:hover {
    text-decoration: underline;
}
#visits, #them {
    width: 270px;
    float: left;
    background: url(/img/common/divide_vertical.png) top left no-repeat;
    padding-top: 3px;
}
#header_perso ul.avatar-list {
    margin-top: 4px;
    list-style-type: none;
    text-align: center;
    width: 100%;
    line-height: 1em;
    overflow: hidden;
}
#header_perso ul.avatar-list li {
    float: left;
    width: 90px;
}
#header_perso span.suite {
    margin-left: 10px;
}
#header_perso img.avatar {
    width: 50px;
	height: 50px;
}
/****************************************************************************
 * Logos
 ****************************************************************************/
#logo_front {
    width: 178px;
    height: 48px;
    z-index: 21;
    margin-left: 15px;
}
.skyrock #logo_front {
    background: url(/img/logos/logo-skyrock.png) no-repeat top left;
}
.skyrock-music #logo_front {
    width: 271px;
    height: 48px;
    background: url(/img/logos/logo-skyrock_music.png) no-repeat top left;
}
#logo_front a {
    display: block;
    width: 200px;
    height: 48px;
}
* html .skyrock #logo_front {
    margin: 0 0 -40px 20px;
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.v41.skyrock.com/img/logos/logo-skyrock.png',sizingMethod='crop');
}
*:first-child+html #logo_front {
    float: left;
}
* html .skyrock-music #logo_front {
    margin: 0 0 -40px 20px;
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.v41.skyrock.com/img/logos/logo-skyrock_music.png',sizingMethod='crop');
}
#logo_front span {
    display: none;
}
/***********************************
 * LOGOS small
 ***********************************/
#logo, #logo a {
    width: 110px;
    height: 28px;
    display: block;
    color: #ccc;
}
#popup #logo {
    width: 100%;
}
#logo a:hover {
    text-decoration: none;
}
.skyrock-music #logo {
    width:186px;
}
#logo span {
    position: absolute;
    left: 115px;
    top: 10px;
    text-decoration: underline;
}
.skyrock-music #logo span {
    left: 190px;
}
.skyrock #logo { background: url(/img/logos/logo_bandeau-skyrock.gif) no-repeat left top; }
.skyrock-music #logo { background: url(/img/logos/logo_bandeau-skyrock_music.jpg) no-repeat top left; }
/*********************************************
 * Menu principal
 * *******************************************/
#menu {
   	clear: both;
	text-align:center;
	z-index: 1;
	position: relative;
	color: #e9e5db;
	text-align: center;
	background:transparent url(/img/header/menu_right.png) no-repeat scroll right top;
	padding-right: 10px;
}
#admskyrock #menu {
	margin-top: 10px;
}
#menu ul {
	list-style-type:none;
	background:transparent url(/img/header/menu_left.png) no-repeat scroll left top;
	height:22px;
	margin:0 auto;
	padding-top:12px;
	text-align:center;
}
#menu ul li {
	display:inline;
	margin:0 8px;
	position:relative;
	z-index:30;
}
#menu ul li a {
	display:inline;
	text-decoration:none;
}
#menu li.active {
	padding:5px 0px 8px 4px;
}
* html #menu li.active {
	padding:0px 1px 8px 3px;
}
*:first-child + html #menu li.active {
	padding:0px 0px 8px 4px;
}
#menu li.active a {
	padding:5px 7px 8px 3px;
}
* html #menu li.active a {
	padding:5px 7px 8px 4px;
}
#menu ul li a {
	color: #e9e5db;
	font-weight:bold;
}
#menu ul li a:hover {
	color: #fff;
}
#menu ul li.active {
	background:transparent url(/img/header/bouton-menu-gche-blanc.png) no-repeat scroll left top;
}
#menu ul li.active a {
	background:transparent url(/img/header/bouton-menu-dte-blanc.png) no-repeat scroll right top;
	color: #000 !important;
}
#submenu {
    clear: left;
    margin: 0 6px 10px 6px;
    padding-bottom: 3px;
    position: relative;
}
.submenu-empty {
    display: block;
    height: 6px;
}
.submenu, .submenu-empty {
    background: transparent url(/img/header/submenu_bottom-blanc.png) no-repeat scroll left bottom;
}
/********************************
 * Page 404
 * *****************************/
.p404 {
    text-align: center;
}
.p404 h1 {
    display: block;
    padding: 5px;
    margin-bottom: 20px;
    font-size: 1.8em;
    letter-spacing: -1px;
    background: #ffeae7 url(/img/errors/404.gif) 20px 5px no-repeat;
    border: 1px solid #fe0000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.p404 h1, .p404 ul {
    margin: 10px 5px 10px 5px;
}
.p404 ul {
    padding: 10px;
    text-align: left;
    list-style: disc;
    list-style-position: inside;
    color: #015AA5;
    background: #d9e7f0;
    border: 1px solid #b5d2e0;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.p404 ul a {
    font-weight: bold;
}
/****************************************************************************
 * Classes génériques : Boutons
 ****************************************************************************/
div.submit, p.submit {
	clear: left;
	text-align: right;
	margin: 5px 0;
}
*:first-child+html p.submit {
	margin: 5px 0 10px;
}
/* admin, front */
.submit input, input.submit, a.submit, .submit a.basic { /* FIXME ajout de .submit a.basic mais on doit pouvoir faire plus proprement */
    padding: 2px 8px;
    cursor: pointer;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    color: #0262dd;
    background-color: #fff;
    border: 1px solid;
    border-color: #bbbcbf;
    border-top-color: #dcdde0;
    border-left-color: #dcdde0;
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    text-decoration: none !important;
}
* html .submit input,
* html .submit input,
* html input.submit {
    padding: 0;
    font-size: 0.95em;
}
*:first-child+html .submit input,
*:first-child+html input.submit {
    font-size: 0.95em;
}
.submit input:hover, input.submit:hover, a.submit:hover, .submit a.basic:hover { /* FIXME ajout de .submit a.basic:hover mais on doit pouvoir faire plus proprement */
    color: #000;
    background-color: #f7f7f7;
}
input.disabled, input.disabled:hover {
    background: #eee url(/img/icons/disabled.png) no-repeat 5px center !important;
    color: #666 !important;
    border-color: #ccc !important;
}
/****************************************************************************
 * Recherche
 ****************************************************************************/
#search_form {
    position: absolute;
    right: 0;
    top: 3px;
    margin-right: 5px;
}
#search_form select, #quicksearchbox, #search_submit {
    margin-right: 2px;
    border: 1px solid #aca289;
    display: inline;
    vertical-align: middle;
    font-size: 0.9em;
}
#quicksearchbox {
    padding: 2px;
    padding-left: 25px;
    width: 160px;
    background: #fff url(/img/recherche/loupe.png) 5px center no-repeat;
}
#search_form select {
    width: 85px;
    background: #fff;
}
#search_submit {
    padding: 0 2px;
    width: 80px;
    background: #000;
    color: #fff;
    border-color: #999;
    font-weight: bold;
    cursor: pointer;
}
#search_submit:hover {
    color: #ddd;
}
img.poweredBy {
    width: 47px;
    height: 25px;
    margin-left: 5px;
    margin-top: 2px;
    vertical-align: middle;
    background: url(/img/recherche/google.png) left top no-repeat;
}
* html img.poweredBy {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.v41.skyrock.com/img/recherche/google.png',sizingMethod='crop');
}
div.suggestions {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #9a9287;
    background-color: Window;
    color: WindowText;
    position: absolute;
    font-size: 0.9em;
    z-index:35;
    text-align:left;
    visibility: visible;
}
div.suggestions div {
    cursor: default;
    padding: 0.3em;
}
* html div.suggestions div {
    padding: 0px 3px;
}
div.suggestions div.current {
    background-color: Highlight;
    color: HighlightText;
}
/****************************************************************************
 * Footer
 ****************************************************************************/
#footer {
    clear: both;
    background: #dfdfdf url(/img/logos/skynetwork.png) 10px 10px no-repeat;
    border: #bbb 1px solid;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    text-align: right;
    height: 62px;
}
#footer li {
	display: inline;
}

#footer .locale-prefs {
	font-size: 0.9em;
	padding: 0.4em;
}
#footer .locale-prefs h4 {
	background: url(/img/icons/web.png) no-repeat top right;
	padding: 0.2em 2em 0.2em 0;
	display: inline;
	color: #666;
}
#footer .locale-prefs p {
	margin-right: 0.5em;
	display: inline;
}

#footer .lang-choice, #infos_bottom, #footer_links {
	margin-right: 8px;
	margin-bottom: 0.2em;
}
#footer .lang-choice, #infos_bottom {
	font-size: 0.9em;
}
#footer .lang-choice, #footer .lang-choice li a, #footer_links, #footer_links a {
	color: #333;
}
#footer .lang-choice li a, #footer_links a {
	text-decoration: none;
}
#footer .lang-choice li a:hover, #footer_links a:hover {
	text-decoration: underline;
}
#footer .lang-choice li.selected a, #footer_links {
	font-weight: bold;
}
#footer-lang-choice { /* FIXME */
    margin-top: 3px;
}
#infos_bottom {
    color: #0063dc;
}
#infos_bottom a.footer-vif {
    color: red;
    font-weight: bold;
}
#footer_links {
    padding-bottom: 5px;
}
/******************************************
 * Messages d'erreur
 * ***************************************/
.confirmation {
    background: #c4ffad;
    color: #178701;
    border: 1px solid #75de82;
}
.alert {
    background: #ffffcb;
    color: #9b7601;
    border: 1px solid #fec30d;
}
.error {
    background: #ffeae7;
    color: #fe0000;
    border: 1px solid #fe0000;
}
.confirmation a, .alert a, .error a {
    text-decoration: underline;
}
.confirmation a {
    color: #178701 !important;
}
.alert a {
    color: #9b7601 !important;
}
.error a {
    color: #fe0000 !important;
}
p.confirmation, p.alert, p.error,
div.confirmation, div.alert, div.error {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    margin-bottom: 10px;
    display: block;
    padding: 0.5em 1em 0.5em 1em;
    position: relative; /* IE6 */
    text-align: center;
}
.alert p, .confirmation p, .error p {
    margin-bottom: 0.5em;
}
ul.alert, ul.confirmation, ul.error {
    padding: 0.5em;
    list-style-type: square;
    list-style-position: inside;
}
/******************************************
 * Elements génériques
 * ***************************************/
.pagination {
    display: block;
    clear: both;
    text-align: center;
    margin: 1em 0;
}
.pagination li {
    display: inline;
    font-weight: bold;
    margin-right: 0.5em;
}
.pagination li.prev, .pagination li.next {
    font-weight: normal;
}
.pagination li.current {
    font-size: 1.4em;
}
.pagination li.current, .pagination li.current a, .pagination a:hover {
    color: #000;
}
.pagination a {
    text-decoration: none;
}
.pagination a:hover {
    text-decoration: underline;
}
.pagination select {
    vertical-align: middle;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 0.9em;
}
/****************************************************************************
 * Publicité
 ****************************************************************************/
.pub180, .pub300 {
    margin-bottom: 5px;
    overflow: hidden;
}
.pub180 {
    width: 180px;
}
.pub300 {
    width: 300px;
}
.pub180 .adscreen {
    height: 150px;
}
.pub300 .adscreen {
    height: 250px;
}
.adscreen {
    margin: 0;
}
p.adslogan {
    display: block;
    padding: 0.1em 1em 0.1em 0;
    text-align: right;
    font-size: 0.8em;
    color: #7a909d;
    background: #d9e7f0;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
}
.petit_pave {
    background: url(/img/homes/fd_petit_pave-pub.png) top center no-repeat;
    text-align: center;
    width: 238px;
    height: 164px;
}
.petit_pave .adscreen, .petit_pave p.adslogan {
    margin: auto;
}
.petit_pave p.adslogan {
    width: 170px;
    margin-top: 0; /* IE6 */
} 
#habillage_haut, #pub_up {
    height: 90px;
    margin: 2px auto 5px;
    text-align: center;
    width: 728px;
}
#pub_up {
    margin: 5px auto;
}
#habillage_gauche, #habillage_droite {
    height: 600px;
    width: 120px;
    top: 30px;
    position: absolute;
    display: block;
    z-index: 99;
}
#habillage_gauche {
    left: -120px;
}
#habillage_droite {
    right: -120px;
}
#habillage_haut, #habillage_gauche, #habillage_droite {
    display: none;
}
/*************************************************
 * Debug
 *************************************************/
#chat-popup .skyrock {
    width: auto !important;
}
/*************************************************
 * Debug
 *************************************************/
#debug {
    position: absolute;
    top: 65px;
    right: 0;
    padding: 5px;
    width: 100px;
    height: auto;
    border: 2px solid #8F7453;
    background: #FFDDB1;
    color: #231900;
    overflow: hidden;
    z-index: 10000;
    text-align: left !important;
    font-family: sans-serif !important;
    font-size: 10px !important;
    /* MERCI DE NE PAS DESACTIVER LE DEBUG */
}
#innerdebug {
    width: 100%;
    overflow: auto;
    display: none;
}
#debug h3 {
    margin: 0;
    padding: 0;
}
#debug li {
    margin: 0;
}
#debug_handle {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #8F7453;
    display: block;
    font-weight: bold;
    font-size: 150%;
    text-decoration: none;
    padding: 0 0.3em;
    background: #8F7453;
}
#debug_handle a:hover {
    background-color: orange;
}
p.debug_svn_links {
	padding: 0.3em;
}
p.debug_svn_links a {
	color: darkblue;
	text-decoration: underline !important;
}