/* =============================================================================
   GENERAL
   ========================================================================== */
 
@font-face {font-family: 'HawaiianAlohaBTN';src: url('/includes/fonts/23B993_0_0.eot');src: url('/includes/fonts/23B993_0_0.eot?#iefix') format('embedded-opentype'),url('/includes/fonts/23B993_0_0.woff') format('woff'),url('/includes/fonts/23B993_0_0.ttf') format('truetype');}


/* HTML5 display definitions */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* Selection */
::-moz-selection { background: #33ccff; color: #fff; text-shadow: none; }
::selection { background: #33ccff; color: #fff; text-shadow: none; }


/* =============================================================================
   TAGS
   ========================================================================== */
  
html{background: #3399cc url("/images/bgSplatBottom.gif") no-repeat center bottom; font-family: HawaiianAlohaBTN, Arial, Sans-Serif; color: #fff; font-size: 20px; text-shadow: 2px 1px rgba(0,0,0,.1); min-height: 100%;}

/*
@media only screen and (min-width: 1280px) {
	html{
		-moz-box-shadow:    inset 0 0 50px rgba(0,0,0,.5);
		-webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.5);
		box-shadow:         inset 0 0 50px rgba(0,0,0,.5);
	}
}
*/

body{margin: 0; background:  url("/images/bgSplatTop.gif") no-repeat center top; min-height: 100%;}

h1, h2, h3, h4, h5, h6 {font-weight: normal; font-style: normal; font-size: 28px;}

a { color: #ffff00; text-decoration: none;}
a:visited { color: #ffff00;}
a:hover { color: #ffcc00; text-decoration: underline;}
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }


/* Typography */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
.clear {clear:both;}

/* Lists */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

/* images */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }


/* Forms */
form { margin: 0; }
fieldset { margin: 0 5px; padding: 3px; border-color:#008700;}
label { cursor: pointer; color: #00ccff;}
legend { border: 0; padding: 0 5px 0 5px; white-space: normal; }
button, input, select, textarea {color: #fff; font-size: 18px; margin: 0; vertical-align: baseline; *vertical-align: middle; font-family: HawaiianAlohaBTN, Arial, Sans-Serif;}
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: hidden; vertical-align: top; resize: vertical; max-width:315px;}
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

input[type="text"], input[type="password"]{background: none; border: none; background-color: #33ccff; border: 3px solid #fff; padding: 2px 5px;
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;
}
select{font-size: 16px; background: none; border: none; background-color: #33ccff; border: 3px solid #fff; padding: 2px 2px 2px 5px; display: block;
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;
}
option{font-size: 16px; border: none; background-color: #33ccff; padding: 2px 2px 2px 5px; display: block;}

input::-webkit-input-placeholder {color: #2580b4;}
input:-moz-placeholder {color: #2580b4;}

/* orange forms */
.orange button, .orange input, .orange select, .orange textarea {color: #a93a22;}
.orange label{color: #ffbd85;}
.orange input[type="text"], .orange input[type="password"]{background-color: #ffbd85;}
.orange select{background-color: #ffbd85;}
.orange option{background-color: #ffbd85;}
.orange input::-webkit-input-placeholder {color: #a93a22;}
.orange input:-moz-placeholder {color: #a93a22;}

/* green forms */
.green button, .green input, .green select, .green textarea {color: #006600;}
.green label{color: #006600;}
.green input[type="text"], .green input[type="password"]{background-color: #95d995;}
.green select{background-color: #95d995; color: #006600;}
.green option{background-color: #95d995; color: #006600;}
.green input::-webkit-input-placeholder {color: #006600;}
.green input:-moz-placeholder {color: #006600;}

/* Tables */
table { border-collapse: collapse; border-spacing: 0; }
table td { vertical-align: top; }


/* =============================================================================
   IDS
   ========================================================================== */

/* GAME/FLASH =========================================================== */
.gameContainer{background: #3399cc;}
.gameContainer body{width: 100%; height: 100%; margin:0; padding:0; text-align: center; background: #3399cc;}
.gameContainer #game{margin-top:-8px;}

@media only screen and (max-height: 870px) {
	.gameContainer #game{width: 651px; height: 706px;}
}

/* Container */
#container{width: 990px; margin: 0 auto;}

/* HEADER =========================================================== */
#header{position: relative; height: 223px;}

/* Logos */
#logo{position: absolute; left: -28px; top: -10px;}
#logo:hover{
	transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
}

/* mainMenu */
#mainMenu{width: 600px; height: 203px; position: absolute; right: 0; top: 0;}
#mainMenu .homeBtn{position: absolute; left: -2px; top: 34px;}
#mainMenu .communityBtn{position: absolute; left: 57px; top: 92px;}
#mainMenu .rankBtn{position: absolute; left: 164px; top: 25px;}
#mainMenu .gamesBtn{position: absolute; left: 260px; top: 105px;}
#mainMenu .challengesBtn{position: absolute; left: 343px; top: 18px;}
#mainMenu .profileBtn{position: absolute; left: 420px; top: 105px;}
#mainMenu .tvBtn{position: absolute; left: 514px; top: 27px;}

  
/* CONTENT =========================================================== */
#content{position: relative;}

/* Extra content ------------ */
#extraContent{width: 233px; position: relative; margin: 0 14px 0 0; float: left;}
#extraContent .top{background: url("/images/orangeBox/bgTop.gif") no-repeat; height: 25px;}
#extraContent .middle{background: url("/images/orangeBox/bg.gif") repeat-y;}
#extraContent .middle.disable{background: url("/images/orangeBox/bgDark.gif") repeat-y;}
#extraContent .middle.disable .content{opacity: .5; filter: alpha(opacity=50);}
#extraContent .bottom{background: url("/images/orangeBox/bgBottom.gif") no-repeat; height: 25px;}
#extraContent .bottom.disable{background: url("/images/orangeBox/bgBottomDark.gif") no-repeat; height: 25px;}
#extraContent .sep{background: url("/images/orangeBox/sep.gif") no-repeat; height: 4px; width: 219px; position: relative; left: 7px;}

#extraContent.community .spacing{padding-top: 117px;}
#extraContent.community .title{position: absolute; left: -26px; top: -24px;}
#extraContent.results .spacing{padding-top: 30px;}
#extraContent.results .title{position: absolute; left: -27px; top: 0;}
#extraContent.whatToDo .spacing{padding-top: 30px;}
#extraContent.whatToDo .title{position: absolute; left: -27px; top: 0;}
#extraContent.challengeType .spacing{padding-top: 30px;}
#extraContent.challengeType .title{position: absolute; left: -27px; top: 0;}
#extraContent.points .spacing{padding-top: 28px;}
#extraContent.points .title{position: absolute; left: -27px; top: 0;}
#extraContent.myFriends .spacing{padding-top: 42px;}
#extraContent.myFriends .title{position: absolute; left: -25px; top: 0;}
#extraContent .refereeSmile{position: relative; top: 18px; left: 20px;}
#extraContent .refereeThumbsUp{position: relative; top: 18px;}
#extraContent .refereeHi{position: relative; top: 18px;}

/* colLeftChallenge */
#colLeftChallenge{position: relative; left: 7px; top: 18px;}

/* colLeftInscription */
#colLeftInscription{position: relative; left: 7px; top: 18px;}

/* colLeftChooseGame */
#colLeftChooseGame{position: relative; left: 7px; top: 18px; padding-bottom: 34px; /* <-- adjust cols */}

/* top5Global */
#top5Global{padding: 10px 25px 20px 25px;}
.classement-label {margin:15px 0 0 4px !important;}

/* top5Friends */
#top5Friends{padding: 15px 25px 20px 25px;}
#top5Friends img{margin: 0 0 10px 10px;}

/* miniRanking */
.miniRanking{}
.miniRanking .player{border-bottom: 2px solid #fa6430; padding: 11px 0; clear: left; overflow: hidden;}
.miniRanking .player.last{border-bottom: none; padding-bottom: 0; }
.miniRanking .player .name{font-size: 16px; font-weight: bold;}
.miniRanking .player .pos{color: #ffcc00; font-size: 20px; position: relative; top: -3px; min-width: 10px; text-align: right; float: left; padding-right: 8px;}
.miniRanking .player .stars{float: left; clear: left; font-size: 16px; background: url("/images/orangeBox/starIcon.gif") no-repeat 0 -2px;  padding-left: 25px; margin-left: 20px;}
.miniRanking .player .points{float: left; font-size: 16px; background: url("/images/orangeBox/tropheeIcon.gif") no-repeat 0 -2px;  padding-left: 25px; margin-left: 10px;}
.ico-star, .ico-trophee {margin:0 !important;}

/* ranking (also use for the community listing) and for les-gagnants-de-la-semaine */
.ranking{}
.ranking .legend{color: #006600; border-bottom: 6px solid #66cc66; margin-bottom: 10px;}
.ranking .legend .nbStar{position: absolute; left: 270px;}
.ranking .legend .nbPoint{position: absolute; left: 270px;}
.ranking .legend .where{position: absolute; left: 270px;}
.ranking .player{border-bottom: 2px solid #4db34d; padding: 5px 0; clear: both; overflow: hidden;}
.ranking .player.last{border-bottom: none; padding-bottom: 0; }
.ranking .player .pos{color: #ffcc00; font-size: 20px; position: relative; top: -3px; min-width: 10px; text-align: right; float: left; padding-right: 8px;}
.ranking .player .name{font-size: 16px; font-weight: bold; float: left; min-width: 200px;}
.ranking .player .nbStars{font-size: 20px; float: left; position: absolute; left: 270px; background: url("/images/mainBox/iconStar.gif") no-repeat 0 2px; padding-left: 25px;}
.ranking .player .nbPoints{font-size: 20px; float: left; position: absolute; left: 270px; background: url("/images/mainBox/iconTrophee.gif") no-repeat 0 2px; padding-left: 25px;}
.ranking .player .where{font-size: 16px; float: left; position: absolute; left: 270px; text-transform: uppercase; }

/* rankingForm */
#rankingForm{}
#rankingForm .padding, #inscriptionForm .padding{padding:15px;}
#rankingForm .gameTitle{display: block; margin-bottom: 5px;}
#rankingForm .typeLabel{margin-top: 15px; display: block;}
#rankingForm .types label{font-size: 16px; display: inline-block; min-width: 60px;}
#rankingForm .types .choice{}
#rankingForm .whereTitle{display: block; margin-bottom: 5px;}
#rankingForm .memberLabel{margin-top: 15px; display: block;}
#rankingForm .members label{font-size: 16px; display: inline-block;}

.link-gagnants {font-size:16px; padding: 0 15px;}

/* challengeTypeForm */
#challengeTypeForm{}
#challengeTypeForm .padding{padding: 15px;}
#challengeTypeForm .mainLabel{margin-top: 15px; display: block; margin-bottom: 15px;}
#challengeTypeForm .types label{font-size: 16px; display: inline-block; min-width: 60px;}
#challengeTypeForm .types .choice{}

/* Pagination */
#pagination-list {
	margin:25px 0 0 0;
	text-align:center;
}
#pagination-list a {
	color:#ffcc00;	
}

/* Main content ----------------------------------------------------------------------------------------------------------------- */
#mainContent{width: 516px; position: relative; margin: 10px 13px 0 0; float: left;}

/* mainBox */
#mainBox{width: 516px; position: relative; margin: 35px 14px 0 0; float: left;}
#mainBox .title{position: absolute;}
#mainBox .top{background: url("/images/mainBox/bgTop.gif") no-repeat; height: 25px;}
#mainBox .middle{background: url("/images/mainBox/bg.gif") repeat-y;}
#mainBox .middle.white{background: url("/images/mainBox/bgWhite.gif") repeat-y; color: #006600;}
#mainBox .bottom{background: url("/images/mainBox/bgBottom.gif") no-repeat; height: 25px;}
#mainBox .bottom.white{background: url("/images/mainBox/bgBottomWhite.gif") no-repeat; height: 25px;}
#mainBox .sep{background: url("/images/mainBox/sep.gif") repeat-x; height: 4px; width: 500px; position: relative; left: 7px;}
#mainBox.rankings .spacing{padding-top: 10px;}
#mainBox.rankings .title{left: 65px; top: -55px;}
#mainBox.community .spacing{padding-top: 10px;}
#mainBox.community .title{left: 8px; top: -56px;}
#mainBox.myProfile .spacing{padding-top: 10px;}
#mainBox.myProfile .title{left: 7px; top: -55px;}
#mainBox.myChallenges .spacing{padding-top: 10px;}
#mainBox.myChallenges .title{left: 60px; top: -56px;}
#mainBox.challenge .spacing{padding-top: 40px;}
#mainBox.challenge .title{left: 60px; top: -38px;}
#mainBox.inscription .spacing{padding-top: 40px;}
#mainBox.inscription .title{left: 7px; top: -37px;}
#mainBox.listGames .spacing{padding-top: 22px;}
#mainBox.listGames .title{left: 50px; top: -52px;}
#mainBox.game .title{left: 7px; top: -37px;}
#mainBox.game .titleGame{left: 75px; top: -36px; position: absolute; width: 355px; height: 112px; background-repeat: no-repeat; background-position: center;}
#mainBox.game .spacing{padding-top: 72px;}

/* inscriptionForm */
#inscriptionForm{padding: 20px 10px 20px 10px; min-height: 667px;}
#inscriptionForm .validationSummary{margin: 0 0 0 20px; position: relative; top: -20px;}
#inscriptionForm .validationSummary h1{font-size: 36px; line-height: 15px; text-transform: uppercase; margin-bottom: 0px; color: #f00;}
#inscriptionForm .row{margin-bottom: 20px; overflow: hidden; display: table;}
#inscriptionForm .row .fieldName{text-transform: uppercase; display: table-cell; width: 135px; text-align: right; vertical-align: middle; font-size: 20px; line-height: 20px;}
#inscriptionForm .row .colon{display: table-cell; padding: 0 5px; color: #006600; vertical-align: middle;}
#inscriptionForm .row .fields{width: 325px; padding-left: 0px; display: table-cell; vertical-align: middle; overflow: hidden;}
#inscriptionForm .row .fields input[type="text"]{width: 305px;}
#inscriptionForm .row .fields label{color: #fff; text-transform: uppercase;}
#inscriptionForm .row.sex{}
#inscriptionForm .row.sex .fields label{margin: 0 7px 0 3px; font-size: 16px;}
#inscriptionForm .row.type .fields label{margin: 0 7px 0 3px; font-size: 16px;}
#inscriptionForm .row.birthday{}
#inscriptionForm .row.birthday .fields{}
#inscriptionForm .row.birthday .fields .field{display: block; float: left; margin-right: 15px;}
#inscriptionForm .row.birthday .fields .field legend{text-align: center; font-size: 16px; text-transform: uppercase; }
#inscriptionForm .row.where{}
#inscriptionForm .row.where select{min-width: 250px;}
#inscriptionForm .row.pseudo .fields .field{display: block; float: left; margin-right: 15px;}
#inscriptionForm .row.pseudo .fields .field legend{text-align: center; font-size: 14px; text-transform: uppercase; }
#inscriptionForm .submitBtn{margin: 30px 0 0 30px;}
#inscriptionForm .btnClasse{margin: 0 0 0 50px;}
#inscriptionForm .sendPasswordBtn{margin: 40px 0 0 145px;}

/* inscriptionClasseForm */
#inscriptionClasseForm{padding: 20px 10px 20px 10px; min-height: 667px;}
#inscriptionClasseForm .validationSummary{margin: 0 0 0 20px; position: relative; top: -20px;}
#inscriptionClasseForm .validationSummary h1{font-size: 36px; line-height: 15px; text-transform: uppercase; margin-bottom: 0px; color: #f00;}
#inscriptionClasseForm .row{margin-bottom: 20px; overflow: hidden; display: table;}
#inscriptionClasseForm .row .fieldName{text-transform: uppercase; display: table-cell; width: 135px; text-align: right; vertical-align: middle; font-size: 20px; line-height: 20px;}
#inscriptionClasseForm .row .colon{display: table-cell; padding: 0 5px; color: #006600; vertical-align: middle;}
#inscriptionClasseForm .row .fields{width: 325px; padding-left: 0px; display: table-cell; vertical-align: middle; overflow: hidden;}
#inscriptionClasseForm .row .fields input[type="text"]{width: 305px;}
#inscriptionClasseForm .row .fields label{color: #fff; text-transform: uppercase;}
#inscriptionClasseForm .row.sex{}
#inscriptionClasseForm .row.sex .fields label{margin: 0 7px 0 3px; font-size: 16px;}
#inscriptionClasseForm .row.type .fields label{margin: 0 7px 0 3px; font-size: 16px;}
#inscriptionClasseForm .row.birthday{}
#inscriptionClasseForm .row.birthday .fields{}
#inscriptionClasseForm .row.birthday .fields .field{display: block; float: left; margin-right: 15px;}
#inscriptionClasseForm .row.birthday .fields .field legend{text-align: center; font-size: 16px; text-transform: uppercase; }
#inscriptionClasseForm .row.where{}
#inscriptionClasseForm .row.where select{min-width: 250px;}
#inscriptionClasseForm .row.pseudo .fields .field{display: block; float: left; margin-right: 15px;}
#inscriptionClasseForm .row.pseudo .fields .field legend{text-align: center; font-size: 14px; text-transform: uppercase; }
#inscriptionClasseForm .submitBtn{margin: 30px 0 0 30px;}

#inscriptionClasseForm .sendPasswordBtn{margin: 40px 0 0 145px;}

/* gamesListing */
#gamesListing{}
#gamesListing .game{padding: 12px 20px; display: block; overflow: hidden; margin: 0 8px;}
#gamesListing .game:hover{background: #2c852c;}
#gamesListing .game .logo{float: left;}
#gamesListing .game .desc{float: left; margin: 2px 0 0 20px; width: 225px; font-size: 18px; line-height:  20px;}
#gamesListing .game .desc p{margin: 0;}

/* challengeChoices */
#challengeChoices{overflow: hidden; padding: 15px;}
#challengeChoices .choice{ float: left; display: block; width: 480px; text-align: center; margin: 0 5px 5px 0;}
#challengeChoices .choice .key{font-size: 20px; line-height: 20px; margin: 0; color: #006600; text-decoration: underline; text-transform: uppercase;}
#challengeChoices .choice .value{font-size: 14px; margin: 0; text-transform: uppercase;}

/* rankingsChoices */
#rankingsChoices{overflow: hidden; padding: 15px;}
#rankingsChoices .choice{ float: left; display: block; width: 230px; text-align: center; margin: 0 5px 5px 0;}
#rankingsChoices .choice .key{font-size: 20px; line-height: 20px; margin: 0; color: #006600; text-decoration: underline; text-transform: uppercase;}
#rankingsChoices .choice .value{font-size: 14px; margin: 0; text-transform: uppercase;}

/* rankingListing */
#rankingListing{padding: 15px 15px 350px 15px; position: relative;}
#rankingListing .bgRanking{position: absolute; bottom: -20px; left: 160px;}

/* chooseChallenge */
#chooseChallenge{position: relative;}
#chooseChallenge .challengeTitle{color: #006600; font-size: 22px; margin-left: 30px;}
#chooseChallenge .chooseGame{position: relative; height: 160px;}
#chooseChallenge .chooseGame .bg{position: absolute; top: 0px; left: 80px;  background: url("/images/mainBox/bgChooseGame.gif"); width: 360px; height: 155px;}
#chooseChallenge .chooseGame .slides_container{position: relative; width: 315px; height: 110px; top: 22px; left: 22px; overflow: hidden;}
#chooseChallenge .chooseGame .previousBtn{position: absolute; left: 35px; top: 50px;}
#chooseChallenge .chooseGame .nextBtn{position: absolute; right: 35px; top: 50px;}
#chooseChallenge .chooseLevel{padding: 20px 100px; overflow: hidden;}
#chooseChallenge .chooseLevel .level{display: block; width: 81px; opacity: .3; filter: alpha(opacity=30); float: left; padding: 0 10px;}
#chooseChallenge .chooseLevel .level.current{opacity: 1; filter: alpha(opacity=100);}
#chooseChallenge .memberAgainst{background: url("/images/mainBox/bgMemberAgainst.gif"); width: 426px; height: 76px; position: relative; left: 44px; text-align: center; color: #006600; font-size: 42px; padding-top: 25px;}
#chooseChallenge #friendSelect{}
#chooseChallenge .againstWhoBlock{margin: 0 auto; font-size: 26px;}
#chooseChallenge .againstWhoBlock td{vertical-align: middle; padding: 2px 20px;}
#chooseChallenge .againstWhoBlock .friendTitle{color: #fff; font-size: 22px;}
#chooseChallenge .submitBtn{margin-left: 90px;}



/* GameLaunch content (home) ------------ */
#gameLaunchContent{width: 354px; position: relative; margin: 57px 14px 0 161px; float: left;}
#gameLaunchContent .title{position: absolute; left: 0px; top: -52px;}
#gameLaunchContent .top{background: url("/images/gameBox/bgTop.gif") no-repeat; height: 25px;}
#gameLaunchContent .middle{background: url("/images/gameBox/bg.gif") repeat-y;}
#gameLaunchContent .middle .content{position: relative; padding: 20px;}
#gameLaunchContent .middle .content .playNowBtn{position: relative; left: 5px; top: 25px; display: block;}
#gameLaunchContent .middle .content .gameBtns{position: relative; clear: both; display: block; height: 340px;}
#gameLaunchContent .middle .content .gameBtn{}
#gameLaunchContent .middle .content .gameBtn1{position: absolute; left: 15px; top: 42px;}
#gameLaunchContent .middle .content .gameBtn2{position: absolute; left: 223px; top: 228px;}
#gameLaunchContent .middle .content .gameBtn3{position: absolute; left: 15px; top: 228px;}
#gameLaunchContent .middle .content .gameBtn4{position: absolute; left: 15px; top: 135px;}
#gameLaunchContent .middle .content .gameBtn5{position: absolute; left: 119px; top: 0;}
#gameLaunchContent .middle .content .gameBtn6{position: absolute; left: 119px; top: 270px;}
#gameLaunchContent .middle .content .gameBtn7{position: absolute; left: 119px; top: 90px;}
#gameLaunchContent .middle .content .gameBtn8{position: absolute; left: 223px; top: 135px;}
#gameLaunchContent .middle .content .gameBtn9{position: absolute; left: 119px; top: 180px;}
#gameLaunchContent .middle .content .gameBtn10{position: absolute; left: 223px; top: 42px;}

#gameLaunchContent .bottom{background: url("/images/gameBox/bgBottom.gif") no-repeat; height: 25px; clear: both;}


/* Call to actions content ------------ */
#call2actionsContent{width: 516px; position: relative; margin-top: 15px; float: left; min-height: 293px;}
#call2actionsContent .top{background: url("/images/yellowBox/bgTop.gif") no-repeat; height: 25px;}
#call2actionsContent .middle{background: url("/images/yellowBox/bg.gif") repeat-y; min-height: 243px;}
#call2actionsContent .bottom{background: url("/images/yellowBox/bgBottom.gif") no-repeat; height: 25px;}
#call2actionsContent .slides_container{position: absolute; width: 350px; height: 256px; top: 0px; left: 23px; overflow: hidden;}
#call2actionsContent .slides_container .cta{border: 5px #ff0 solid; width: 340px; height: 246px; background-position: center; background-position-y: center; display: block;
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px; 
	border-radius: 20px;
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;
}
#call2actionsContent .cta:hover{border-color: #ffcc00;
	-moz-box-shadow:    inset 0 0 40px #000000;
	-webkit-box-shadow: inset 0 0 40px #000000;
	box-shadow:         inset 0 0 40px #000000;
}
#call2actionsContent .controls{position: absolute; left: 390px; top: 20px; width: 100px; height: 46px; overflow: hidden;}
#call2actionsContent .controls .previousBtn{position: absolute; left: 0;}
#call2actionsContent .controls .nextBtn{position: absolute; right: 0;}
#call2actionsContent .pagination{position: absolute; left: 380px; top: 80px; width: 125px; overflow: hidden; margin: 0; padding: 0; font-size: 0; line-height: 0;}
#call2actionsContent .pagination li{margin: 0; padding: 0; list-style: none; display: block; float: left;}
#call2actionsContent .pagination a{border: 5px #ff0 solid; display: block; margin: 2px 3px 3px 2px; width: 47px; height: 30px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px;
	
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;
}
#call2actionsContent .pagination a:hover{border-color: #ffcc00;}
#call2actionsContent .pagination a img{
	-moz-box-shadow:    inset 0 0 5px #000000;
	-webkit-box-shadow: inset 0 0 5px #000000;
	box-shadow:         inset 0 0 5px #000000;
}
#call2actionsContent .pagination li.current a{border-color: #fff;}

/* gameHelp  && gameHelpBtns*/
#gameHelp{width: 500px; height: 530px; position: relative; left: 7px;}
#gameHelp .bestScore{position: absolute; background: url("/images/mainBox/help/bestPoints.gif") no-repeat; width: 340px; height:92px; bottom: 0; right: 0;}
#gameHelp .bestScore span{position: absolute; left: 185px; top: 22px; display: block; width: 80px; text-align: center; font-size: 33px;}
#gameHelp .referee{background: url("/images/mainBox/help/referee.png") no-repeat; width: 166px; height: 250px; position: absolute; bottom: 0;}
.degueu #gameHelp{background: url("/images/mainBox/help/degueu.jpg") no-repeat;}
.degueu .titleGame{background-image: url("/images/games/degueu.png");}
.pele-mele #gameHelp{background: url("/images/mainBox/help/pele-mele.jpg") no-repeat;}
.pele-mele .titleGame{background-image: url("/images/games/pele-mele.png");}
.brasse-mots #gameHelp{background: url("/images/mainBox/help/brasse-mots.jpg") no-repeat;}
.brasse-mots .titleGame{background-image: url("/images/games/brasse-mots.png");}
.mots-caches #gameHelp{background: url("/images/mainBox/help/mots-caches.jpg") no-repeat;}
.mots-caches .titleGame{background-image: url("/images/games/mots-caches.png");}
.du-troisieme-type #gameHelp{background: url("/images/mainBox/help/du-troisieme-type.jpg") no-repeat;}
.du-troisieme-type .titleGame{background-image: url("/images/games/du-troisieme-type.png");}
.labyrinthe-equation #gameHelp{background: url("/images/mainBox/help/labyrinthe-equation.jpg") no-repeat;}
.labyrinthe-equation .titleGame{background-image: url("/images/games/labyrinthe-equation.png");}
.vert-tige #gameHelp{background: url("/images/mainBox/help/vert-tige.jpg") no-repeat;}
.vert-tige .titleGame{background-image: url("/images/games/vert-tige.png");}
/* Jeux saison 2 */
.course-canada #gameHelp{background: url("/images/mainBox/help/course-canada.jpg") no-repeat;}
.course-canada .titleGame{background-image: url("/images/games/course-canada.png"); height:114px !important;}
.decontamination #gameHelp{background: url("/images/mainBox/help/decontamination.jpg") no-repeat;}
.decontamination .titleGame{background-image: url("/images/games/decontamination.png");}
.sang-pour-sang #gameHelp{background: url("/images/mainBox/help/sang-pour-sang.jpg") no-repeat;}
.sang-pour-sang .titleGame{background-image: url("/images/games/sang-pour-sang.png");}
.laser #gameHelp{background: url("/images/mainBox/help/laser.jpg") no-repeat;}
.laser .titleGame{background-image: url("/images/games/laser.png");}

#gameHelpBtns{margin-left: 20px;}
#gameHelpBtns a:first-child{margin-right: 10px;}

/* inbox */
#inbox{padding: 15px;}
#inbox .boxMessage{border: 2px solid #006600; border-radius: 10px; background: #41c241;}
#inbox .boxMessage .boxInt{border: 2px solid #66cc66; border-radius: 8px; padding: 10px; color: #fff; position: relative; overflow: hidden;}
#inbox .boxSep{border-bottom: 2px solid #41c241; margin: 10px 0;}
#inbox .boxMessage .with{font-size: 18px; transform:rotate(-15deg); -ms-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); float: left; position: absolute; top: 1px; left: 7px;}
#inbox .boxMessage .opponentName{font-size: 34px; position: relative; left: 25px; margin-top: 5px;}
#inbox .boxMessage .squaresRow{position: relative; left: -5px;}
#inbox .boxMessage .squaresRow .square{min-height: 92px; min-width: 67px; float: left; position: relative; margin-left: 7px;}
#inbox .boxMessage .squaresRow .userFrom{background: url('/images/mainBox/inbox/userFrom.gif') bottom no-repeat; width: 89px; height: 89px;}
#inbox .boxMessage .squaresRow .userTo{background: url('/images/mainBox/inbox/userTo.gif') bottom no-repeat; width: 89px; height: 89px;}
#inbox .boxMessage .squaresRow .challenge img{position: absolute; bottom: 0;}
#inbox .boxMessage .squaresRow .difficulty{background: url('/images/mainBox/inbox/difficulty.gif') bottom no-repeat;}
#inbox .boxMessage .squaresRow .difficulty span{display: block; position: absolute; color: #006600;  text-align: center; font-size: 50px; width: 100%; height: 60px; bottom: 0; }
#inbox .boxMessage .squaresRow .day{background: url('/images/mainBox/inbox/remainingDays.gif') bottom no-repeat;}
#inbox .boxMessage .squaresRow .day span{display: block; position: absolute; color: #006600;  text-align: center; font-size: 50px; width: 100%; height: 60px; bottom: 0; letter-spacing: -2px;}
#inbox .boxMessage .extra{ position: absolute; right: 5px; top: 0; width: 135px; height: 150px; text-align: right;}
#inbox .boxMessage .extra .acceptBtn{margin: 10px 0 5px 0; display: block;}
#inbox .boxMessage .extra .refuseBtn{display: block;}
#inbox .boxMessage .extra .starsResults{margin: 23px 0 5px 0;}
#inbox .boxMessage .extra .waiting{margin: 23px 0 5px 0;}
#inbox .boxMessage .extra .resultsBtn{display: block;}
.opacity #inbox .boxMessage .extra .resultsBtnInactive{opacity: .3;}
.no-opacity #inbox .boxMessage .extra .resultsBtnInactive{filter: alpha(opacity=30); -moz-opacity: .3;}

/* profileDescription */
#profileDescription{padding: 0 30px 30px 30px;}
#profileDescription h1{border-bottom: 6px solid #66cc66; color: #006600;}
#profileDescription .block{overflow: hidden; border-bottom: 2px solid #66cc66; padding: 10px 0;}
#profileDescription .block .label{display: block; float: left; width: 150px; text-align: right; color: #66cc66;}
#profileDescription .block .value{
	display: block; 
	float: left; 
	width: 290px; 
	margin-left: 10px; 
}

#profileDescription .block .word-wrap{
	-ms-word-break: break-all;
   word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto; /** 1 */
	word-wrap: break-word; /** 2 */
}




/* Perso content ------------ */
#persoContent{width: 213px; position: relative; margin: 0; float: left;}
#persoContent .highlight{color: #00ccff;}
#persoContent .title{position: absolute;}
#persoContent .top{background: url("/images/blueBox/bgTop.gif") no-repeat; height: 25px;}
#persoContent .middle{background: url("/images/blueBox/bg.gif") repeat-y;}
#persoContent .middle.disable{background: url("/images/blueBox/bgDark.gif") repeat-y;}
#persoContent .middle.disable .content{opacity: .5; filter: alpha(opacity=50);}
#persoContent .bottom{background: url("/images/blueBox/bgBottom.gif") no-repeat; height: 25px;}
#persoContent .bottom.disable{background: url("/images/blueBox/bgBottomDark.gif") no-repeat; height: 25px;}
#persoContent .sep{background: url("/images/blueBox/sep.gif") no-repeat; height: 4px; width: 199px; position: relative; left: 7px;}

#persoContent.meZone .spacing{padding-top: 32px;}
#persoContent.meZone .title{left: -9px; top: -6px;}

/* loginArea */
#loginArea{padding: 0 20px 20px 20px;}
#loginArea h1{font-size: 24px; border-bottom: 2px solid #2e91c4; padding: 5px 0;}
#loginArea .pseudo{width: 160px; margin-bottom: 13px;}
#loginArea .password{width: 106px; margin-bottom: 13px;}
#loginArea .submitGo{position: absolute; margin: -7px 0 0 2px; }
#loginArea .forgottenPassword{font-size: 18px; display: block;}
#loginArea .deconnectBtn{margin: 30px 0 0 0; position: relative; left: -7px;}
#loginArea .deconnectBtn:hover{opacity: .8;}

/* subscribe */
#subscribe{padding: 10px 10px 10px 15px;}

/* myProfile */
#myProfile{padding: 10px 10px 10px 15px;}
#myProfile .imgTitle{position: relative; left: 10px; top: 5px;}
#myProfile .block{border-bottom: 2px solid #2e91c4; padding-bottom: 8px; margin: 16px 0 8px 0;}
#myProfile .block.last{border-bottom: none;}
#myProfile .block h2{margin: 0; font-size: 28px;}
#myProfile .block h3{margin: 0; font-size: 22px;}


/* myChallenges */
#myChallenges{padding: 10px 10px 10px 15px;}
#myChallenges .imgTitle{position: relative; left: 10px; top: 5px;}
#myChallenges .remainingChallenges{ text-align:center; padding-top: 14px; padding-bottom: 8px; border-bottom: 2px solid #2e91c4;}
#myChallenges .remainingChallenges .count{}
#myChallenges .block{border-bottom: 2px solid #2e91c4; padding-bottom: 8px; margin: 16px 0 8px 0; clear: both; overflow: hidden;}
#myChallenges .block.last{border-bottom: none;}
#myChallenges .block .icon{float: left; display: block;}
#myChallenges .block .emailIcon{}
#myChallenges .block a{font-size: 17px; line-height: 16px; float: left; display: block; margin-left: 10px; width: 140px; font-weight: bold;}
#myChallenges .block a:hover{text-decoration: none;}


/* helpBtn */
#helpBtn{position: relative; top: 10px; left: 60px;}


/* refereeHomeBlock */
#refereeHomeBlock{position: absolute; width: 240px; height: 595px; left: 195px; top: 0; overflow: hidden;}
#refereeHomeBlock .referee{position: absolute; bottom: 150px;}
#refereeHomeBlock .likeOnTv{position: absolute; top: 400px; left: 10px;}


/* Comme a la tele et autres - pass oublier */
#commealatele, #info-classes, #info-reglements-conditions, #info-concours, #info-gagnants {padding:0 15px;}	
#commealatele p, #info-classes p, #info-reglements-conditions p, #info-concours p, #info-gagnants p {margin:0px; padding:0px;}
#titleTV {position:absolute;left: 88px; top: -56px;}

#titleClasses {position:absolute;left: 58px; top: -55px;}
#titleGagnants {position:absolute;left: 52px; top: -55px;}
#titleConditions {position:absolute;left: 34px; top: -36px;}
#titleConcours {position:absolute;left: 34px; top: -36px;}

#inscription-classe { margin:10px 0 0 0; text-align:center; width:100%; display:block; font-size:35px; cursor:pointer;} 

/* FOOTER ===========================================================*/
#footer{margin-top: 25px; clear: both; position: relative;}

/* partnersLogos */
#partnersLogos{width: 990px; overflow: hidden;}
#partnersLogos .block{ float: left; display: block;}
#partnersLogos .block .label{font-family: Arial; font-size: 12px; border-bottom: 1px solid #5cadd6; text-align: left; padding-bottom: 10px; margin-bottom: 10px;}
#partnersLogos .block1{width: 375px; margin-left: 100px;}
#partnersLogos .block2{width: 370px;}
#partnersLogos  .sep{border-right: 1px solid #5cadd6; height: 67px; float: left; margin: 30px 30px 0 30px;}
#partnersLogos a{display: inline-block; /*margin: 0 16px;*/ margin-right: 30px; vertical-align: middle;}
#partnersLogos a:hover{opacity: .8;}
.no-opacity #partnersLogos a:hover{filter: alpha(opacity=80); -moz-opacity: .8;}
#partnersLogos .logoPointDeMire{background: url('/images/footer/PointDeMire_logo.gif') no-repeat; width: 62px; height: 67px;}
#partnersLogos .logoTFO{background: url('/images/footer/TFO_logo.gif') no-repeat; width: 74px; height: 67px;}
#partnersLogos .logoCMFFMC{background: url('/images/footer/CMFFMC_logo.gif') no-repeat; width: 235px; height: 67px;}
#partnersLogos .logoMbiance{background: url('/images/footer/Mbiance_logo.gif') no-repeat; width: 238px; height: 67px;}
/* legal */
#legal{color: #fff; font: Arial; font-size: .8em; text-align: center; width: 500px; margin: 20px auto;}
#legal a, #legal a:visited, #legal a:hover {font: Arial; color: #fff;}


/* =============================================================================
   CLASSES
   ========================================================================== */

/* rollOverTrans */
.opacity .rollOverTrans img{opacity: 1; }
.opacity .rollOverTrans:hover img{opacity: .8;}
.no-opacity .rollOverTrans img{filter: alpha(opacity=100); -moz-opacity: 1;}
.no-opacity .rollOverTrans:hover img{filter: alpha(opacity=80); -moz-opacity: .8;}


/* invisible */
.invisible { visibility: hidden; }

/* hidden */
.hidden {display: none;}

/* clearfix */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* box */
.box{
	border: 5px solid #006600;
	border-radius: 30px;
	background: #339933;
	-moz-box-shadow: 0 0 50px #000000;
	-webkit-box-shadow: 0 0 50px #000000;
	box-shadow: 0 0 50px #000000;
	min-width: 200px;
}
.box .boxInt{
	border: 2px solid #55bb55;
	border-radius: 26px;
	padding: 20px;
	color: #fff;
	font-size: 20px;
	line-height: 26px;
}

/* JAVASCRIPT AND MUSTACHE TEMPLATES ---------------------------------------------- */

/* offscreen */
.offscreen {position: absolute; margin-top: -9999px;}

/* box userInfos (template javascript) */
.box.userInfos{border-color: #d32800; background: #f1602a; min-width: 340px; max-width:600px;}
.box.userInfos .boxInt{border-color: #f08b59; padding: 10px; position: relative;}
.box.userInfos .avatar{float: left; padding-right: 15px;}
.box.userInfos .smiley{position: absolute; left: 65px; top: 5px;}
.box.userInfos .name{font-size: 26px;}
.box.userInfos .where{font-size: 18px;}
.box.userInfos .rankRow{min-width: 230px;}
.box.userInfos .btnsRow{clear: both; margin: 10px 0 0  20px;}
.box.userInfos .btnsRow .challengeBtn{padding-left: 20px;}

.box.userInfos .txtInfo {
	padding:0;
	margin:0 0 0 100px; 
	-ms-word-break: break-all;
   word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto; /** 1 */
	word-wrap: break-word; /** 2 */

}

/* box helpPage */
.box.helpPage{margin: 50px auto; min-width: 400px; max-width: 970px; position: relative;}
.box.helpPage .boxInt{padding: 7px;}
.box.helpPage .boxInt .closeBtn{position: absolute; right: -33px; top: -33px;}
.box.helpPage .boxInt .menu{position: relative; display: block;}
.box.helpPage .boxInt .menu .btn{display: block; width: 200px; height: 80px; position: absolute; top: 288px; cursor: hand;}
.box.helpPage .boxInt .menu .btn1{left:29px;}
.box.helpPage .boxInt .menu .btn2{left:222px;}
.box.helpPage .boxInt .menu .btn3{left:409px; width: 150px;}
.box.helpPage .boxInt .menu .btn4{left:558px; width: 170px;}
.box.helpPage .boxInt .menu .btn5{left:718px;}
.box.helpPage .boxInt .menu .btn:hover{background-color: rgba(51, 153, 51, .5);}
.box.helpPage .boxInt .imgBlock{display: block; position: relative; overflow: hidden; width: 100%;}
.box.helpPage .boxInt .topBtn{width: 90px; height: 80px; position: absolute; right: 0; top: 0;}
.box.helpPage .boxInt .topBtnA6{right: 0; top: 429px;}
.box.helpPage .boxInt .topBtnA7{right: 0; top: auto; bottom: 0;}
.box.helpPage .boxInt .topBtn:hover{background-color: rgba(51, 153, 51, .5);}

/* box errorModal, & #errorMsg, successModal */
#errorMsg{display: none;}
.box.errorModal{margin: 50px auto; min-width: 200px; max-width: 500px; position: relative; border-color: #AC2D22; background: #ff0000;}
.box.errorModal .boxInt{border-color: #FFB889; min-height: 150px;}
.box.errorModal .boxInt .closeBtn{position: absolute; right: -33px; top: -33px;}

.box.successModal{margin: 50px auto; min-width: 200px; max-width: 500px; position: relative; /* border-color: #AC2D22; background: #00ff00;*/}
.box.successModal .boxInt{/*border-color: #FFB889;*/ min-height: 150px;}
.box.successModal .boxInt .closeBtn{position: absolute; right: -33px; top: -33px;}


/* modal (create in javascript) */
#modal{background: rgba(51,102,153,.85); position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; z-index: 99999999;}


/* Extra */
.box-type-membre {
	float:left;	
	margin-right:15px;
}