@import url("http://fonts.googleapis.com/css?family=Bevan");
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

body {
  background-position: center 39px;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url(coj-background-main-en.jpg);
}
div.ubiSubBar{
  display: none;
}
.hnav .navMenuList { margin:0; }

/* HEADER */
div.branding {
  position: absolute;
  width: 960px;
  height: 140px;
  left: 0;
  top: 0;
  overflow: hidden;
  background-image: url(coj_nav_back.png);
  background-position: center top;
  background-repeat: no-repeat;
}
div.branding div.richtext {
	background-color: transparent;
  
}
span.fblikeWrap {
  display: block;
  position: absolute;
  top: 117px;
  left: 340px;
}
div.coj_logo_main {
  position: absolute;
  left: 28px;
  top: 20px;
}
div.secondary_nav {
  text-align: right;
  position: absolute;
  right: 44px;
  top: 36px;
  font-size: 12px;
  font-family: "Droid Sans", Helvetica, Verdana, Arial, sans-serif;
  color: #443325;
}
div.secondary_nav a {
  text-decoration: none;
  text-transform: uppercase;
  color: #443325;
}
div.secondary_nav a:hover {
  color: #af4512;
}
div#headerNav {
  color: white;
  text-align: right;
  position: absolute;
  width: 630px;
  right: 20px;
  top: 58px;
}
div#headerNav ul {
  float: right;
}
div#headerNav ul li {
  padding-right: 24px;
}
div#headerNav ul li a {
  font: normal 13px 'Bevan', arial, serif;
  text-transform: uppercase;
  line-height: 48px;
  color: white;
}
div#headerNav ul li.active a {
  color: #FFEE99;
}
div#headerNav ul li a:hover {
  color: #FFEE99;
}


/* BODY */
div.main {
  margin-top: 126px;
}
div.main div.leading {
  display: none;
}
div.main div.compBox {
	background-image: url(coj-fb-block-bkgd.png);
	width: 280px;
	height: 293px;
	background-repeat: no-repeat;
	overflow: hidden;
}
div.main div.firstCompBox {
	background-image: url(coj-news-block-bkgd.png);
	width: 327px;
	height: 293px;
	background-repeat: no-repeat;
	overflow: hidden;
}
div.main div.lastCompBox {
	background-image: url(coj-ad-block-bkgd.png);
	width: 353px;
	height: 293px;
	background-repeat: no-repeat;
	overflow: hidden;
}

div.main div.wideCompBox {
	width: 697px;
	height: 563px;
	background-repeat: no-repeat;
	overflow: hidden;
}
body.coj_home_page div.main div.wideCompBox {
	background-image: url(coj-wide-home-bkgd.png);
}
body.coj_news_page div.main div.wideCompBox {
	background-image: url(coj-wide-news-bkgd.png);
}
div.main div.trailing {
	width: 263px;
	height: 563px;
	background-image: url(coj-right-bkgd.png);
	background-repeat: no-repeat;
	position: relative;
}
div.main div.coj_preorder_main {
	width: 263px;
	height: 133px;
	overflow: hidden;
	position: absolute;
}

div.coj_preorder_main_inner a {
	/* the background image is assigned in lang.css */
  display: block;
	width: 263px;
	height: 133px;
	background-repeat: no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}
div.coj_rt_promo1 {
	width: 223px;
	height: 197px;
	left: 10px;
	top: 146px;
	overflow: hidden;
	position: absolute;
}
div.coj_rt_promo2 {
	width: 223px;
	height: 96px;
	left: 10px;
	top: 347px;
	overflow: hidden;
	position: absolute;
}
div.coj_rt_promo3 {
	width: 223px;
	height: 96px;
	left: 10px;
	top: 447px;
	overflow: hidden;
	position: absolute;
}
div#coj_home_300x250_ad {
  margin-left: 15px;
  margin-top: 21px;
}
div#coj_footer_banner_inner {
  width: 728px;
  height: 90px;
  position:absolute;
  left: 116px;
  top:25px;
}
div#coj_footer_banner {
  position: relative;
  width: 960px;
  height: 140px;
	background-image: url(coj_footer_banner.png);
}


/* HOME PAGE */
.carouselZoomBox {
  margin-bottom: 12px;
}

div.carouselZoomBox div.shareThisBox {
	display:  none;
}

div.carousel div.widgetMainBox{
  margin-top: 40px;
  margin-left: 11px;
}

div.carouselZoomBox, .wideCompBox .carouselZoomBox .carouselFocusBox {
  width: 660px;
  height: 380px;
}
.widgetNoTitle, .hnav, .vnav, .faq {
  padding: 0;
}

ul.carouselThumbsCont li {
  width: 150px;
  height: 94px;
  margin-right: 6px;
}
.wideCompBox .carouselThumbsBox {
  width: 619px;
  margin-left: 44px;
  margin-top: 6px;
}
.wideCompBox .carouselThumbWrap .carouselFocusBox {
  width: 150px;
  height: 94px;
}
.wideCompBox .carouselControlsBox {
  position: absolute;
}
.carouselNavPrev {
  position: absolute;
  left: 25px;
  width: 14px;
  height: 51px;
  background-image: url(coj_carousel_previous.png);
  display: block;
  border: 0;
}
.carouselNavNext {
  position: absolute;
  left: 667px;
  width: 14px;
  height: 51px;
  background-image: url(coj_carousel_next.png);
  display: block;
  border: 0;
}
.carouselControlsPos {
  top: 40px;
}
.wideCompBox .carouselDetailBox {
  display: none;
}
div.coj_home_page .lastCompBox {
  
}

.fan_box .page_stream a:link {color: #D90000 !important; }
.fan_box .page_stream a:active {color: #D90000 !important; }
.fan_box .page_stream a:visited {color: #D90000 !important; }
.fan_box .page_stream a:hover {color: #D90000 !important; }

/* FOOTER LINKS */
div.footer_coj_links {
  width: 332px;
  height: 75px;
  margin-left: auto;
  margin-right: auto;
}
div#footer_coj_bib_link, div#footer_coj_register_link{
  width: 154px;
  height: 75px;
  float: left;
}
div#footer_coj_bib_link {
  margin-right: 24px;
}
div#footer_coj_bib_link a, div#footer_coj_register_link a {
  width: 154px;
  height: 75px;
  display:  block;
  text-indent: -9000px;
}

/* MEDIA PAGE */
body.coj_media_page div.main {
	background-position: center top;
	background-image: url(coj-wide-media-bkgd.png);
	background-repeat: no-repeat;
	width: 960px;
	height: 1026px;
}
body.coj_media_page div.trailing {
  display: none;
}

div.main div.mediacarousel {
  width: 960px;
  overflow: hidden;
  background-image: none;
}
div.main div.carousel1 {
  height: 244px;
}
div.main div.carousel2 {
  height: 244px;
}
div.main div.carousel3 {
  height: 244px;
}
div.main div.carousel1 div.assets {
}
div.main div.carousel2 div.assets {
}
div.main div.carousel3 div.assets {
}
body.coj_media_page div.main .featured {
  margin-bottom: 0px;
}
body.coj_media_page div.asset h2 {
  font: normal 16px 'Bevan', arial, serif;
  color: white;
  text-transform: uppercase;
  position: absolute;
}
div.main div.carousel1 h2{
  left: 40px;
  top: 60px;
}
div.main div.carousel2 h2{
  left: 40px;
  top: 30px;
}
div.main div.carousel3 h2{
  left: 40px;
  top: 0px;
}
div.mediacarousel div.asset div.txt {
  display: none;
}
div.mediacarousel div.asset.featured {
  width: 500px;
  float: left;
}
div.mediacarousel div.jPaginate {
  position: absolute;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 12px;
  height: auto;
  right: -58px;
  top: -30px
}
div.mediacarousel .jPag-first, div.mediacarousel .jPag-last { visibility:hidden; }


div.carousel1 div.thumbnails {
  position: absolute;
  left: 40px;
  top: 110px

}
div.carousel2 div.thumbnails {
  position: absolute;
  left: 40px;
  top: 80px

}
div.carousel3 div.thumbnails {
  position: absolute;
  left: 40px;
  top: 50px

}



.coj_media_page .ency .tn, .coj_media_page .page .tn {
  width: 196px;
  height: 113px;
  padding-left: 4px;
  padding-top: 5px;
  padding-bottom: 19px;
  padding-right: 7px;
  overflow: hidden;
}

.coj_media_page .ie7 .ency .tn, .coj_media_page .ie7 .page .tn {
  width: 196px;
  height: 113px;
  padding-left: 4px;
  padding-top: 5px;
  padding-bottom: 19px;
  padding-right: 7px;
  overflow: hidden;
  margin: 0;
}

.coj_media_page .page {
  width: 896px;
}

.coj_media_page .page .tn:hover {
  background-color: transparent;
}

.coj_media_page .page .thumbnailWrapper {
  background: url(coj_media_tn_bg.png) no-repeat 0 0;
  width: 207px;
  height: 137px;
  float: left;
  margin-right: 17px;
  margin-top:0;
}
.coj_media_page .page .thumbnailWrapper:hover {
  background: url(coj_media_tn_bg_hover.png) no-repeat 0 0;
}

.coj_media_page .ency .tn, .coj_media_page .assets .tn img{
  width: 196px;
  height: 113px;
}
.coj_media_page .ency .tn, .coj_media_page .assets .tn b.caption {
  display: none;
}
.coj_media_page span.jPag-current {
  font-weight: bold;
  color: #ffd565;
}

/* NEWS BLOCK */

.coj-news h2 {
  color: #cccccc;
  text-transform: uppercase;
  margin-left: 44px;
  margin-top: 24px;
  font: normal 13px 'Bevan', arial, serif;
}
.coj-news .sum{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	padding:15px 0;
	border-bottom:1px dotted #404040;
	color:#ccc;
}
.coj-news .sum .tn{
	display:none;
}
.coj-news .sum h4{	
	font-size:12px;
	color: #c2b168;
	margin:0;
	padding:0;
}
.coj-news .sum p{
	padding:0;
	margin:10px 0 0 0;
}
.coj-news .sum p.date{
	margin:0;
	color:#a6a0a0;
}
#scrollable{
	width: 282px;
	height: 220px;
	margin: 0 0 0px 22px;
	padding-right:30px;
}
.coj-news .sum .txt { width:250px; }

.coj-news .sum a{
	color: #c2b168;
}
.coj-news .featured {
  margin: 0;
  padding: 0;
}
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background-color:  #291e1a;
}
.jScrollPaneDrag {
	position: absolute;
	background-color:  #2d2929;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

/* FACEBOOK BLOCK */
.facebook_header {
  background: url(coj_facebook_icon.png) no-repeat 18px center;
}
.facebook_block h2 {
  color: #cccccc;
  text-transform: uppercase;
  margin-left: 50px;
  margin-top: 24px;
  font: normal 13px 'Bevan', arial, serif;
  
}
.facebook_content {
  margin-left: 9px;
}

/* NEWS PAGE */
body.coj_news_page .scrollPaneOuter {
  margin-top: 50px;
  margin-left:40px;
}
body.coj_news_page div.widget.generic {
  width: 620px;
  height: 467px;
}

body.coj_news_page .widgetTitleText {
  white-space: normal;
  text-align: left;
  font: normal 16px 'Bevan', arial, serif;
  color: #c2b168;
  padding-bottom: 10px;
  
}

body.coj_news_page .generic .widgetTitleBox {
  width: auto;
  padding-top: 0px;
}

body.coj_news_page span.genericDateStamp {
  position: relative;
  font: normal 11px "Droid Sans", Helvetica, Verdana, Arial, sans-serif;
  color: #ffffff;
  display:block;
}

body .genericDescriptionBox {
  font: normal 13px "Droid Sans", Helvetica, Verdana, Arial, sans-serif;
  color: #cccccc;
}
body .genericRichTextBox {
  font: normal 13px "Droid Sans", Helvetica, Verdana, Arial, sans-serif;
  color: #cccccc;
}



/* CHARS PAGE */
.coj_chars_page p{ margin:0; }
.coj_chars_page .struct.sidebar.trailing, .coj_full_page .struct.sidebar.trailing {
  display: none;
}

.coj_chars_page .encyAccordionArea, .coj_full_page .encyAccordionArea {
  display: none;
}

.coj_chars_page .encyAccordionArea, .coj_chars_page .encyRichTextArea, .coj_full_page .encyAccordionArea, .coj_full_page .encyRichTextArea {
  width: 960px;
  height: auto;
  overflow: auto;
}
.coj_chars_page .encyRichTextArea{
  position: absolute;
  top: 236px;
  left: 0px;
}
.coj_chars_page .encyRichTextArea .richtext, .coj_full_page .encyRichTextArea .richtext {
  padding-left: 22px;
  padding-top: 3px;
}

.coj_chars_page .main .struct.compBox.wideCompBox.lastCompBox, .coj_full_page .main .struct.compBox.wideCompBox.lastCompBox {
  background-image: none;
}


.coj_chars_page .characterDetailsImage, .coj_full_page .characterDetailsImage {
  float: left;
}

.coj_chars_page div.main div.wideCompBox, .coj_full_page div.main div.wideCompBox{
  width: 960px;
  height: 962px;
}
.coj_chars_page .encyTopSection {
  width: 960px;
  height: 962px;
  background: url(coj-chars-background.png) no-repeat 0 0;
}

.coj_chars_page .characterDetails, .coj_full_page .characterDetails {
  width: 915px;
  height: 705px;
  position: relative;
}
.coj_chars_page .characterDetailsBox, .coj_full_page .characterDetailsBox {
  position: absolute;
  right: 0;
  top: 40px;
  overflow:hidden;
  width: 481px;
  height: 613px;
  background: url(coj-char-black-background.png) repeat 0 0;
}
.coj_chars_page .characterDetailsBox h5, .coj_full_page .characterDetailsBox h5{
  font: bold 14px "Droid Sans", Helvetica, Verdana, Arial, sans-serif;
  color: white;
  text-transform: uppercase;
  margin-left: 30px;
  margin-top: 36px;
  margin-bottom: 0px;
}
.coj_chars_page .characterDetailsBox h2, .coj_full_page .characterDetailsBox h2{
  font: normal 32px Bevan, arial, serif;
  color: #faed92;
  margin-left: 30px;
  margin-top: 0px;
}
.coj_chars_page .characterDetailsBox .characterDetailsImage, .coj_full_page .characterDetailsBox .characterDetailsImage {
  margin-left: 30px;
  margin-right: 8px;
}
.coj_chars_page .characterDetailsBox p, .coj_full_page .characterDetailsBox p{
  margin-left: 30px;
  margin-right: 20px;
  font: normal 14px "Droid Sans", Helvetica, Verdana, Arial, sans-serif;
  color: white;
  line-height: 18px;
}

.coj_chars_page .characterDetails .characterItemImage, .coj_full_page .characterDetails .characterItemImage {
  position: absolute;
  right: 0px;
  top: 0px;
  text-align: right;
}
.coj_chars_page .characterDetails .characterDetailsCharacterArt, .coj_full_page .characterDetails .characterDetailsCharacterArt {
  width: 530px;
  height: 705px;
  overflow: hidden;
}
.coj_chars_page .ency .tn, .coj_chars_page .assets .tn {
  width: 221px;
  height: 137px;
  overflow: hidden;
  padding: 0px;
}
.coj_chars_page .ency .tn:hover, .coj_chars_page .assets .tn:hover {
  background-color: transparent;
}
.coj_chars_page .ency .thumbnails {
  position: absolute;
  left: 40px;
  top: 66px;
}
.coj_chars_page .ency div.jPaginate {
  color: white;
  font-family: Arial, sans-serif;
  font-size: 12px;
  height: auto;
  overflow: hidden;
  position: absolute;
  right: -68px;
  top: -24px;
}
.coj_chars_page span.jPag-current {
  font-weight: bold;
  color: #ffd565;
}
.coj_chars_page .jPag-first, .coj_chars_page .jPag-last { visibility:hidden; }


/* COJ FULL WIDTH PAGE CSS */
.coj_full_page p { margin:0; }
.coj_full_page .encyTopSection {
  width: 960px;
  height: 763px;
  background: url(coj-fullwidth-background.png) no-repeat 0 0;
}
.coj_full_page .encyRichTextArea {
  position: absolute;
  top: 28px;
  left: 0px;
}
.coj_full_page .thumbnails.clearfix {
  visibility:hidden;
  display: none;
}
.coj_full_page div.main div.wideCompBox{
  width: 960px;
  height: 754px;
}
.coj_full_page .characterDetailsBox .scroll_cont { height:613px; }
.coj_full_page .characterDetailsBox .jScrollPaneTrack { right:10px; }

/* Pagination */
.coj_chars_page .jPag-first, .coj_chars_page .jPag-last { visibility:hidden; }
.coj_media_page ul.jPag-pages { width:200% !important; }

/* Footer */
.partnersLogoCaption { color:#fff; }
.footer .legal { color: #ccc; text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:11px;}


/* COJ en-US Theme */
div.coj_preorder_main_inner a { background-image: url(coj-preorder.png); }
div#footer_coj_bib_link a { background-image: url(coj_footer_bib.gif); }
div#footer_coj_register_link a { background-image: url(coj_footer_register.gif); }

/*-- AGEGATE CSS --*/
.coj-agegate { background:#000 url("agegate.jpg") no-repeat scroll center -160px; font-size:12px; font-family: 'Droid Sans', Arial, Helvetica, Verdana, sans-serif; } 
.coj-agegate div.branding { background:none; }
.age-gate { margin-bottom:30px; }

#fancybox-overlay{
  background-color: rgb(0, 0, 0) !important;
  opacity: 0.8 !important;
}
#fancybox-title h3, #fancybox-title .datestamp, #fancybox-title .assetGroup, #fancybox-title .description {
  display: none;
}