/*Rayman Origins*/

body{
    background: url("raymanorigins-bg_rayman.jpg") no-repeat scroll center 13px #000000;
    font-family: verdana;
    overflow-x: hidden;
}

img{
    border: none;
}

.compBox{
    float: none !important;
    width: 100% !important;
}

.struct{}

.section{}

.header{}

.actionArea{
}

em {
    font-style: italic;
}

.main{
    /*position: relative;*/
    width:1182px;
    height:600px;
    margin: auto;
}

/*TOP SITE*/

.branding{
}

.branding .logo{
   position: absolute;
   top:0px;
   left:0px;
   height: 191px;
   width:832px;
   background-image: url(raymanorigins-logo.png);
   background-repeat: no-repeat;
}
.branding .logo h1{
   display: none;
}

/*BUY NOW*/
.dr_productInfoProduct{
    position: absolute;
    right:80px;
    top:600px;
    height: 339px;
    width:351px;
    background-image: url(raymanorigins-bg_buy_now.png);
}

.dr_productInfoProduct img{
    height: 162px;
    width:114px;
    display: block;
    margin: 50px 0 0 105px;
    background-color:#cbe7f2;

}

.dr_productPrice{
    display: none;
}
.dr_productName{
    display: none;
}

.dr_siteButton{
    margin:40px 0 0 80px;
    font-size: 12pt;
    color: #FFFFFF;
    font-family: Verdana;
    font-weight: bold;
}
.dr_siteButton a{
    display: block;
    padding: 26px 0 0 30px;
    width: 139px;
    height: 58px;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    background-image: url(raymanorigins-btn_buy_now.png);
    background-repeat: no-repeat;
}

.dr_siteButton a:hover{
    background-image: url(raymanorigins-btn_buy_now_on.png);
    background-repeat: no-repeat;
}

.sidebar{}


/*----- COMPBOX -----*/
.compBox{}



/*BLOCK VIDEO*/

/*.main .wideCompBox{
    position: absolute;
    top:191px;
    left:0px;
}*/

 .carouselZoomBox .carouselFocusBox {
    height: 350px;
    width: 620px;
}

.carouselThumbWrap .carouselFocusBox {
    height: 80px;
    width: 140px;
}
.carouselImageClip{
    position: relative;
    background-image: url(raymanorigins-bg_player.png);
    background-repeat: no-repeat;
    padding: 15px 0 0 0;
    width: 802px;
    height:519px;
    position: absolute;
    right:400px;
    top:191px;
}

.widgetTitleBox{
    display: none;
}
.widgetMainBox{
    width: 621px;
    height: 352px;
    margin: auto;
    padding: 1px 9px 0 0;
}

.widgetMainBox .shareThisBox{
    display: none;
}

.widget{}
.carousel{}
.carrousel_video{}
.carouselShowPlay{
}
.widgetShowTitle{}
.carouselShowCaptions{}

.carouselControlsBox{}

.carouselThumbsBox{
    position: absolute;
    left:183px;
    bottom:70px;
    width:436px !important;
    height:82px;
}

.carouselThumbsCont{
    width:436px;
    height:82px;
}

.carouselThumbsCont li{
    margin:0 10px 0 0;
    width:140px;
    height:80px;
    text-align: center;
}

.carouselThumbCaption{
    display: none;
}
.carouselDetailTitle{
    display: none;
}

.carouselDetailBox{}

.carouselNavPrev{
    width: 30px;
    height: 22px;
    background-image: url(raymanorigins-nav_prev.png);
    border: none;
    position: absolute;
    left:140px;
    top:5px;
}

.carouselNavPrev:hover{
    width: 30px;
    height: 22px;
    background-image: url(raymanorigins-nav_prev_on.png);
    border: none;
    position: absolute;
    left:140px;
    top:5px;
}

.carouselNavNext{
    width: 28px;
    height: 22px;
    background-image: url(raymanorigins-nav_next.png);
    border: none;
    position: absolute;
    left:630px;
    top:5px;
}
.carouselNavNext:hover{
    width: 28px;
    height: 22px;
    background-image: url(raymanorigins-nav_next_on.png);
    border: none;
    position: absolute;
    left:630px;
    top:5px;
}


.carouselNavPlay{
    display: none;
}


/*BLOCK CONTENU*/


.main .firstCompBox div.ui-corner-all{
    position: absolute;
    top:580px;
    right: 450px;
    width: 892px;
    height: 447px;
    background-image: url(raymanorigins-bg_content.png);
    background-repeat: no-repeat;
}

.main .firstCompBox ul.ui-corner-all{
    width: 566px;
    height:98px;
    margin: 30px 0 0 215px;
    padding: 16px 0 0 16px;
    background-repeat: no-repeat;
}

.tab-universe  li  {
    text-decoration: none;
}

.tab-gameinfo{
    margin: 0;
    padding:0;
    width: 193px;
    height: 84px;
    background-image: url(raymanorigins-btn_game_info.png);
}

.tab-gameinfo a {
    cursor: pointer;
}


.tab-gameinfo:hover{
    width: 193px;
    height: 84px;
    background-image: url(raymanorigins-btn_game_info_on.png);
}


 
 

.tab-universe{
    margin: 0;
    padding:0;
    width: 176px;
    height: 84px;
    background-image: url(raymanorigins-btn_character.png);

}

.tab-universe:hover{
    width: 176px;
    height: 84px;
    background-image: url(raymanorigins-btn_character_on.png);
}

.ui-state-active.tab-charasters  {
    width: 170px;
    height: 84px;
    background-image: url(raymanorigins-btn_keyfeature_on.png);
}

.ui-state-active.tab-universe {
    width: 176px;
    height: 84px;
    background-image: url(raymanorigins-btn_character_on.png);
}

.ui-state-active.tab-gameinfo {
    width: 193px;
    height: 84px;
    background-image: url(raymanorigins-btn_game_info_on.png);
 
} 






.tab-charasters{
    margin: 0;
    padding:0;
    width: 170px;
    height: 84px;
    background-image: url(raymanorigins-btn_keyfeature.png);
}

.tab-charasters:hover{
    width: 170px;
    height: 84px;
    background-image: url(raymanorigins-btn_keyfeature_on.png);
}


/*
.main .firstCompBox ul.ui-corner-all .ui-corner-top{
    width: 145px;
    padding: 0 0 0 25px;
}
*/
/*
.main .firstCompBox ul.ui-corner-all .ui-corner-top {
    margin: 0 -28px 0 45px;

    width: 145px;
}
*/
.main .firstCompBox ul.ui-corner-all .ui-corner-top a{
    display: block;
    text-align: center;
    margin: 30px auto;
    padding: 0;
    height: 30px;
    color: #FFFFFF;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
        width: 100%;
}




.main .firstCompBox ul.ui-corner-all .ui-corner-top a {
    font-weight: bold;
}

.game-info{
    color: #460000;
    width: 476px;
    height: 223px;
    font-size: 9pt;
    margin:0 0 0 270px;
    margin:0 0 0 270px;
    overflow:auto;
}

.characters{
    color: #460000;
    font-size: 9pt;
    height: 223px;
    margin: 0 0 0 270px;
    overflow: auto;
    width: 476px;
}

.key-features{
    color: #460000;
    font-size: 9pt;
    height: 223px;
    margin: 0 0 0 270px;
    overflow: auto;
    width: 476px;
}


.scroll_up{
    width: 25px;
    height: 30px;
    position: absolute;
    right: 120px;
    top:0px;
}

.scroll_up:hover{
    width: 25px;
    height: 30px;
    position: absolute;
    right: 120px;
    top:0px;
    z-index: 1000;
    background-image: url(raymanorigins-scroll_up_on.png);
}
 

.scroll_down{
    width: 25px;
    height: 30px;
    position: absolute;
    right: 120px;
    top:170px;
}
.scroll_space{
    width: 25px;
    height: 90px;
    position: absolute;
    right: 120px;
    top:34px;
}
.scroll_space img{
    position: absolute;
    top:0px;
}


#facebook_like_box{
    overflow: hidden;
    padding:120px 0 0 0;
    background-image: url(raymanorigins-bg_block_fb.png);
    width: 350px;
    height:496px;
    position: absolute;
    right:50px;
    top:80px;

}
#facebook_like_box iframe{
    background-color: #FFFFFF;
    margin-left: 39px;
}

#facebook_like_box iframe #faceebook{
    width: 200px;
}

/*ONGLETS*/

/*.main .lastCompBox{
    position: absolute;
    right: 20px;
    top:191px;
}*/

/*BLOCK PARTNERS*/



.partners .promo-Youtube{
    position: absolute;
    top:565px;
    left:20px;
    width: 194px;
    height: 142px;
    background-image: url(raymanorigins-bg_check_youtube.png);
    background-repeat: no-repeat;
}

.partners .promo-Youtube
{
    display: block;
    margin:33px 0 0 15px;
    /*width: 160px;*/
    padding-top: 36px;
    text-align: center;
}
.partners .promo-Youtube a:hover{
    color: #ff781b;
}


.partners .promo-blog{
    position: absolute;
    top:515px;
    left:180px;
    padding-top: 36px;
    width: 310px;
    height: 228px;
    background-image: url(raymanorigins-bg_check_blog.png);
    background-repeat: no-repeat;
}
.partners .promo-blog
{
    display: block;
    margin: 30px 0 0 46px;  
    width: 315px;
    text-align: center;
    padding-top: 120px;
}

.partners .promo-blog a {
    height: 100%;
    left: 93px;
    margin: 0 45px 54px 12px;
    position: absolute;
    text-align: center;
    top: 125px;
    width: 39%;
}

.partners .promo-blog a:hover{
    color: #ff781b;
}

.partners .promo-register{
    position: absolute;
    top:535px;
    left:490px;
    width: 242px;
    height: 159px;
    background-image: url(raymanorigins-bg_check_register.png);
    background-repeat: no-repeat;
}

.partners .promo-register a{
    height: 100%;
    left: 23px;
    margin: 0 45px 54px 12px;
    position: absolute;
    text-align: center;
    top: 46px;
    width: 70%;
}

.partners .promo-register
{
    display: block;
    margin:44px 0 0 40px;
    width: 245px;
    text-align: center;
}

.partners .promo-register a:hover{
    color: #ff781b;
}

.partners .promo-Youtube a, .partners .promo-blog  a, .partners .promo-register a{
    color:#daf6cb;
    font-family: Verdana;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: none;
}

/*FLAG*/


/*
.tackmaniaflags{
    position: absolute;
    top:930px;
    left: 280px;
    text-align: center;
}
*/
.tackmaniaflags {
   /* left: 280px;*/
    position: absolute;
    text-align: center;
    top: 930px;
    width: 1000px;
}

#flags{
    width: 200px;
    margin: 10px auto;
}

#flags ul{
   margin: 0 auto;
    padding: 0 !important;
}


.tackmaniaflags #flags ul{
    list-style: none;
    overflow: hidden;
    margin: 0 auto ;
    
}
.tackmaniaflags  #flags ul li{
    float: left;
    margin:0 5px 0 0;
}

/*FOOTER*/

.footer{
    
    position: absolute;
    clear: both;
    top: 820px;
    bottom:0;
    background-color: #000000;
    width: 1000px;
   
}


.legal{
    color:#FFFFFF;
    font-family: sans-serif;
    margin:0 !important;
    padding: 0 !important;
}


/*  SCROLL PANE*/

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
*/
 

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
	width:190px;
	text-align : justify ;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 21px;
	height: 28px;
 
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 16px;
    
 
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
    height: 228px;
	position: relative;
}

.jspDrag
{
	 
	position: relative;
	top: 0;
	left: 6px;
	cursor: pointer;
    -moz-border-radius: 7px 7px 7px 7px;
    width: 10px;
    background: none repeat scroll 0 10px #0fa7ef;
    /*background-image: url(raymanorigins-scroller.png) ;
     background-repeat: no-repeat;
     */
 
     height: 28px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}
 

.jspArrow
{
 
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrowUp
{
 
	cursor: default;
	background-image: url(raymanorigins-scroll_up.png);
}

.jspArrowUp:hover
{
	cursor: default;
	background-image: url(raymanorigins-scroll_up_on.png);
}

.jspVerticalBar .jspArrow
{
	height: 28px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}
.jspArrowDown   {
	cursor: default;
    width: 21px;
    height: 28px;
	background-image: url(raymanorigins-scroll_down.png);
}

.jspArrowDown:hover   {
	cursor: default;
    width: 21px;
    height: 28px;    
	background-image: url(raymanorigins-scroll_down_on.png);
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}