/*Globals */
body {background-color: #333;}
div.facebook-container {position:relative; margin:0px auto 0px auto; width:100%; height:1%; overflow: hidden; z-index: 99;}
h1.main-logo {margin: 30px auto 0px auto;}
a{cursor: pointer;}

.grey-grad {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#333333'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#333)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #333); /* for firefox 3.6+ */ 
}
.black-grad {
background: #000; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#333333'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #000,  #333); /* for firefox 3.6+ */ 
}

.round-5 {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.round-10 {-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.round-15 {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
.drop-5 {-webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;}
.drop-10 {-webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000;}
.drop-15 {-webkit-box-shadow: 0px 0px 15px #000; -moz-box-shadow: 0px 0px 15px #000; box-shadow: 0px 0px 15px #000;}

div.like-wrap {position: absolute; top:150px; left:0px;}

a#archive-button {position: absolute; z-index: 99; top:350px; right: 0px;background: #000; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#333333'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #000,  #333); /* for firefox 3.6+ */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 10px; color: #FFF; font-family: sans-serif; text-transform: uppercase; font-weight: bold;
border: 1px solid #666; }
 
 
a#archive-button:hover {background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#333333'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#333)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #333); /* for firefox 3.6+ */  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #FFF; font-family: sans-serif; text-transform: uppercase; font-weight: bold;
 } 
 

a.learn-more-link, a.learn-more-link:active, a.learn-more-link:visited {font-size: 14px; color: #FFF; text-decoration: none;}
a.learn-more-link:hover {color:#00C6FF;}

/* Other Carousels */
.ir { text-indent:-9999px; outline:none; border:none; }
.container { position:relative; width:970px;}
.fff { color:#FFF; }
.box { background:none; }
.error h1,.error h2,.error h3,.error h4,.error h5,.error h6 { color:#8a1f11; font-weight:bold; }
.button { 	background: -webkit-gradient(linear, left top, left bottom, from(#636363), to(#333));
	background: -moz-linear-gradient(top, #636363, #333);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#636363, endColorstr=#333333);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#636363, endColorstr=#333333)"; display:inline-block; padding:8px; margin:0 4px 8px 0; -moz-border-radius:16px; -webkit-border-radius:16px; -moz-box-shadow:#CCFF00 0 0 5px; -webkit-box-shadow:#CCFF00 0 0 5px; color:#EEE; position:relative; cursor:pointer; font-size:1.1em; font-weight:bold; border:1px solid #000; }
.button:active { top:1px; }
.wf { font-family:Inconsolata, Georgia, serif; font-size:18px; font-style:normal; font-weight:400; text-shadow:none; text-decoration:none; text-transform:none; letter-spacing:0; word-spacing:0; line-height:1.28em; }
.cf0 {color:#ccff00;}
.fb_iframe_widget span {position:absolute;bottom:0;}

/* Scroller */
div#home-carousel-progress { position:absolute; bottom:3px; left:45%; }
div#home-carousel-progress ul { list-style:none; list-style-type:none; margin:0; padding:0; display:block; background:none; }
div#home-carousel-progress ul li { float:left; height:19px; width:19px; margin-left:8px; }
div#home-carousel-progress ul li a { cursor:pointer; display:block; height:19px; width:19px; background-image:url(http://characters.capcom.com/img/carousel-progress.png); background-repeat:no-repeat; text-indent:-9999px; outline:none; border:none; background-position:0 0; }
div#home-carousel-progress ul li a:hover { background-color:transparent; }
div#home-carousel-progress ul li a.active { background-color:transparent; background-position:0 -19px; }
div.carousel-bump { padding:25px; }
#home-game-desc { margin-bottom:1.5em; }
#home-game-desc p { background-position:center top; background-repeat:no-repeat;text-align:justify; }
#home-blog { height:160px; display:block; margin-top: 80px;}
#home-blog .scrollable { height:120px; width:900px; left:55px; padding: 30px 0px 0px 0px; }
#home-blog a.browse { background-image:url(../../../img/home-carouselarrows.png); margin-top:35px;  width:50px; height:62px;}
#home-blog a.right { background-position:-50px 0px; clear:right; margin-right:-20px; position:absolute; right:0px; }
#home-blog a.right:hover { background-position:-50px -62px; }
#home-blog a.left { background-position:0px 0px; margin-left:-20px; position:absolute; left:0px; }
#home-blog a.left:hover { background-position:0px -62px; }
#home-blog a.disabled { visibility:hidden!important; }
#home-blog .entry { margin:0 15px 0 0; width:285px; float:left; text-align: left; }
#home-blog .entry a {color: #FFF;}
#home-blog h3 { color:#2B455E; padding:2px 0 0; font-size:1.25em; text-align:center; font-weight:bold; }
#home-blog p { color:#AAA; }
#home-blog .home-tweet p { font-size:1em; }
#home-blog .home-tweet p a { color:#FFF; }
#home-blog .home-tweet p img { margin:0 1em 0 0; padding:4px; border:1px solid #303941; }
#home-blog h5,#home-blog p { margin-bottom:.25em; }
#home-blog span { height:10px; width:200px; border:none; margin:0; overflow:visible; }
#livestream { }
#tweet-box { background:#303941; padding:1em; }
#tweet-box label { color:#FFF; }
.tweet { border-top:1px solid #333; padding:1em; }
.tweet h5 { color:#FFF; }
.tweet h5,.tweet p { margin-bottom:.25em; }
.tweet img.photo { padding:4px; border:1px solid #666; }
div#selected { position:relative; background-image:url(http://characters.capcom.com/img/noise-bg.png); background-repeat: repeat; padding:0px; margin: 200px 0px 0px 0px; }
div#selected.screens { height:606px;  }
div#selected.videos { height:606px; }
div#selected.videos div#ytapiplayer-wrapper {height:606px; padding: 25px 0px 0px 0px; margin: 0px; }
div#selected img { padding:10px 0px 0px 0px; width:945px; height:532px; }
div#thumb-scroll-box { overflow:auto;height:135px; width:760px; overflow: hidden;}
 div#thumb-scroll-box ul#filter { list-style:none; list-style-type:none; height:25px; padding:0; margin:0 0 0 20px; text-align:center; }
div#thumb-scroll-box ul#filter li { padding:0; margin:0 1px 0 0; height:25px; float:left; }
div#thumb-scroll-box ul#filter li a { line-height:24px; height:24px; margin-top:1px; padding:0 1.5em; display:block; background-color:#384246; color:#AAA; text-decoration:none; text-transform:uppercase; }
div#thumb-scroll-box ul#filter li a:hover { background:#00c6ff; color:#FFF; }
div#thumb-scroll-box ul#filter li a.active { background:#00c6ff; color:#FFF; font-weight:bold; }
.scrollable { position:relative; overflow:hidden; width:600px; height:110px; left:85px; float:left; }
.scrollable .items { width:20000em; position:absolute; clear:both; left: 0px; }
.scrollable span { float:left; border:2px solid #000; margin:18px 20px 0 0; cursor:pointer; overflow:hidden; height:65px; }
.scrollable span#umvc3-logo { float:left; border: none; margin:18px 20px 0 0; cursor:pointer; overflow:hidden; height:65px; }

.scrollable img { margin-top:-14px; }
.scrollable img.screens { margin:0; height:65px; width:120px; }
.scrollable span:hover,.scrollable span.active { border:2px solid #00c6ff; }

a.browse { background:url(../../../img/home-carouselarrows.png) no-repeat; display:block; width:50px; height:62px; float:left; margin:25px 0 0; cursor:pointer; font-size:1px; }
a.right { background-position:-50px 0px; clear:right; margin-right:0; position:absolute; right:0; }
a.right:hover { background-position:-50px -62px; }
a.left { background-position:0px 0px; margin-left:0; position:absolute; left:0; }
a.left:hover { background-position:0px -62px; }
a.disabled { visibility:hidden!important; }
.scrollable-small {	/* required settings */	position:relative;	overflow:hidden;	width: 620px; height:110px;	left:65px; float: left;	top:0px;}
.scrollable-small .items {/* this cannot be too large */	width:20000em;	position:absolute; clear: both; left: 0px; }
.scrollable-small .items a {float:left; margin: 10px 17px 10px 16px; width:120px; height:90px; border: 2px solid #000;}
.scrollable-small .items a:hover {border: 2px solid #00ffff;}


a.picker-pre-order, a.picker-pre-order:active, a.picker-pre-order:visited {position: relative; float: right; font-family:sans-serif; font-size: 12px; text-transform: uppercase; padding: 7px 10px 7px 10px; color: #BBB; text-decoration: none; font-weight: bold; background-color: #384246;}
a.picker-pre-order:hover {background-color: #00C6FF; color: #FFF;}

a.picker-embed, a.picker-embed, a.picker-embed:visited {position: relative; float: right; margin-left: 1px; font-family:sans-serif; font-size: 12px; text-transform: uppercase; padding: 7px 10px 7px 10px; color: #BBB; text-decoration: none; font-weight: bold; background-color: #384246;}
a.picker-embed:hover {background-color: #00C6FF; color: #FFF;}

/*Characters*/
div.all-characters-capcom {float: left; position: relative; min-width:520px; width: 100%; background-color: #b6d2eb; padding:20px 0px 20px 0px; background-image: url('http://characters.capcom.com/img/color-halftone.png'); background-repeat: repeat;}
div.all-characters-marvel {float: left; position: relative; min-width:520px; width: 100%; background-color: #ed0404;  padding:20px 0px 20px 0px;background-image: url('http://characters.capcom.com/img/color-halftone.png'); background-repeat: repeat;}
ul#capcom-all-characters, ul#marvel-all-characters {float: left; position: relative; width: 100%; padding: 0px; margin: 0px;}
ul#capcom-all-characters li, ul#marvel-all-characters li {position:relative; float: left; width: 100px; height: 100px; list-style: none;  margin: 15px;}
ul#capcom-all-characters li a, ul#marvel-all-characters li a {position:relative; float: left; width: 100px; height: 100px; border: 2px solid #3B5998; color: #FFF; font-family: sans-serif; font-size: 11px; text-decoration: none; -moz-box-shadow: 0px 0px 10px #000; -webkit-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000;}
ul#capcom-all-characters li a:hover, ul#marvel-all-characters li a:hover {border: 2px solid #CCC; color: #333; font-family: sans-serif; font-size: 11px; text-decoration: none;}
div.all-characters-capcom span.character-title, div.all-characters-marvel span.character-title {position: absolute; z-index: 99; bottom: 0px; width: 100px; background-color: #3B5998; left: 0px; padding: 2px 0px 2px 0px;}
ul#capcom-all-characters li a:hover span.character-title {background-color: #CCC;}
ul#marvel-all-characters li a:hover span.character-title {background-color: #CCC;}
span.new-character {position: absolute; z-index: 99;  right: 0px; top: 0px; background-color: fuchsia; color: #fff; font-family: sans-serif;font-size: 11px; text-transform: uppercase; padding: 2px;}
strong.car-bio {color:#00C6FF;}

span.new-character,  span.new-character {background-color: fuchsia; color: #FFF; z-index: 99; padding: 5px; top:0px; right: 0px; position: absolute; font-size: 10px; font-weight: normal; border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px;}
span.dlc-character,  span.dlc-character {background-color: #00ffff; color: #000; z-index: 99; padding: 5px; top:0px; left: 0px; position: absolute; font-size: 10px; font-weight: normal; border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px;}


div#thumb-scroll-box ul#filter li.embed-tab {position: absolute; right: 20px;}


/*Character Detail*/
div.character-detail-container {margin: 0px auto 0px auto; overflow: hidden; height: 1%; position: relative; width:760px; min-height: 800px; background-color: #333; padding-bottom: 100px;}
div.picker-detail-container {margin: 0px auto 0px auto; overflow: hidden; height: 1%; position: relative; width:760px; height:200px; background-color: #333; padding-bottom: 100px;}
div.characters-carousel-container {position:relative; width: 100%; height: 125px; background-color: #333;  overflow: hidden; padding:20px 0px 0px 0px; margin-top: 40px; }
div.character-detail-head{float: left; height:102px; background-image: url('http://characters.capcom.com/img/character-detail-head-bg.png'); background-repeat: no-repeat; margin-top: 50px;}
h2#character-detail-h2 {float: left; position: relative;  text-align: left; padding: 28px 40px 0px 50px; font-size: 32px; color: #FFF; text-transform: uppercase; font-family: sans-serif; text-shadow: 2px 2px 5px #000;  filter: glow(color=black,strength=2), alpha(opacity=100); /* now both will work */}
div.character-detail-text {float: left; width: 760px; min-height: 500px;}
div.character-detail-text p {float:left; text-align: left; padding: 25px; color: #FFF; font-size: 18px; font-family: sans-serif; width:330px;}

div.character-detail-text p a {text-decoration: none;}
div.character-detail-text p a strong {text-decoration: none;}
div.character-detail-text p a strong:hover {color: #FFF;}

div.character-detail-lgimg {position: absolute; z-index: 20; right:0px; top:310px; }
div.character-detail-row {float:left; position: relative; width:760px;}
div.character-detail-row h2 {float: left; position: relative; width: 760px; text-align: center; padding: 38px 0px 0px 0px; font-size: 22px; color: #FFF; text-transform: uppercase; font-family: sans-serif; text-shadow: 2px 2px 5px #000;  filter: glow(color=black,strength=2), alpha(opacity=100); /* now both will work */}
div.character-detail-info {float:left; position: relative; width:760px; margin:40px 20px 0px 0px; text-align: left;}
div.character-detail-info#facebook {float:left; position: relative; width:660px; margin:40px 0px 0px 35px; padding-left: 25px; text-align: left; background-color: #ccc;}


div.dlc-char-page {position: relative; float: right; padding: 20px; font-size: 18px; color: #FFF; text-transform: uppercase; font-family: sans-serif; font-weight: bold; text-shadow: 1px 1px 2px #000; z-index: 18; background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; }



div.new-char-page {position: relative; float: right; padding: 20px; font-size: 18px; color: #FFF; text-transform: uppercase; font-family: sans-serif; font-weight: bold; text-shadow: 1px 1px 2px #000; z-index: 18; background: #cb60b3; /* Old browsers */
background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#c146a1), color-stop(51%,#a80077), color-stop(100%,#db36a4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* W3C */
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; }

a.embed-link, a.embed-link:active, a.embed-link:visited {padding: 10px; background-color: #3B5998; font: bold 14px sans-serif; color: #FFF; text-decoration: none; display: inline-block; position: absolute; top:0px; right: 40px;}
a.embed-link:hover {text-decoration: underline; }