/* --- MARVEL BASE STYLES --- */

/*	SASS variables
	@darkBlue: #162A38;
	@hoverBlue: #505F69;
	@brightRed: #E01F27;
	@lightGrey: #C1BEBC;
*/

/* background images */
body.homepage { background: url(http://asset.comicbook.com/img/comicbook/backgrounds/avengers.jpg) no-repeat #f7f7f7; background-size: 100%; }
@media screen and (min-width: 768px) {
	body.homepage { background: url(http://asset.comicbook.com/img/comicbook/backgrounds/avengers.jpg) no-repeat #f7f7f7; background-size: 100%; }
}

a {
	color: #E01F27;
}

/* header and nav */
body > header { background-color: #162A38; }
.channel-nav > ul > li > a { color: #162A38; }
.full-nav { background-color: #162A38; }
.full-nav > a { width: calc(100% - 130px); margin-right: 0; }
.full-nav > ul > li > a { color: #fff; box-shadow: inset 0 0 0 #E01F27; }
.full-nav > .site-nav > li > a.active { box-shadow: inset 0 -4px 0 #E01F27; background-color: rgba(255,255,255,0.1) }
.subnav_lst { background-color: #162A38; }
.full-nav .navlst_blk .subnav_lst > li > a:hover { background-color: #505F69; }
.full-nav.focused > ul > li > a { color: #797979 !important; }
.full-nav.focused > ul > li > a.active { color: #fff !important; }
.full-nav.focused > ul > li > a:hover { color: #fff !important; }
.full-nav.focused > ul > li.search > a > b { color: #797979; }
.full-nav.focused > ul > li.search > a.active > b { color: #fff; }
.full-nav > ul > li.search > a > b { color: #fff; }
.full-nav > ul > li.search { color: #fff; }
.full-nav > ul > li.search > .navlst_blk > div { background-color: #fff; }
.full-nav > ul > li.search > .navlst_blk > div button { color: #fff; background-color: #797979; }
.full-nav > ul > li.search > .navlst_blk > div button:hover { background-color: #505F69; color: #E01F27; }
.full-nav > .user-nav > .menu > .main_menu:hover { color: #333; }

.nav-icon { background: #fff; }
.nav-icon:before { background: #fff; }
.nav-icon:after { background: #fff; }

/* --- logged in user menu --- */
.full-nav > .user-nav > .user > .usernav_blk { background-color: #162A38; }
.full-nav > .user-nav > .user > .usernav_blk a:hover { color: #eee; background-color: #505F69; }

/* --- logged out user menu --- */
.usernav_blk > header { background-color: #162A38; }
.usernav_blk > header > h2 { color: #fff; }
.usernav_blk > header > div > .soclogin_lst > li { background: none; }
.usernav_blk > header > div > .soclogin_lst > li > a { color: #fff; }
.full-nav > .user-nav > .log-in > .usernav_blk { background-color: #efefef; border: solid 1px #777; }
.usernav_blk .login_frm > fieldset > input[type="text"],
	.usernav_blk .login_frm > fieldset > input[type="password"] { border-color: #999; }
.login_frm > .remember_fds > label { color: #000; }
.usernav_blk .login_blk { border-top: solid 1px #ddd; color: #999; }
.usernav_blk .login_blk > p > a { color: #162A38; }
.usernav_blk .subnav_lst > li { border-bottom: #ccc; }
.usernav_blk .subnav_lst > li > a { color: #fff; }

/* mobile nav <880px */
.nav > div { background-color: #162A38; }
.nav > div > div,
	.nav > div > menu,
	.nav > div > div > .search,
	.nav > div > .navsocial_blk { background-color: #505F69; }
.nav > div > div > .search { background-color: #505F69; }
.nav_lst > li > .opened { background-color: #505F69; color: #fff; }
.nav_lst > li > a:hover { color: #fff; }
.opened + section > .subnav_lst > li > a { padding-left: 2em; }

@media screen and (min-width: 380px) {
	.full-nav > a { width: 263px; }
}

@media screen and (min-width: 640px) {
	.nav > div > div,
		.nav > div > menu { background-color: #162A38; }
}

@media screen and (min-width: 768px) {
	.full-nav > .large-menu > li > a:hover { background-color: #14437e; }
	.full-nav .navlst_blk .subnav_lst > li > a:hover { background-color: rgba(255,255,255,0.1); }
}

@media screen and (min-width: 880px) {
	.full-nav > a {  width: 166px; margin-right: 10px; }
}

@media screen and (min-width: 980px) {
	.full-nav > a { width: 263px;}
}

/* --- footer ---*/
.site-footer { background: #162A38; }
.site-footer > .container > div > h3 { color: #505F69; }
.site-footer > .container > div > ul > li > a {  color: #eee; }
.site-footer > .about { color: #505F69; }

/* links */
.blue { color: #162A38; }
.article-content p a  { color: #E01F27; }

/* inputs */
.btn,
	.show-hide-comments,
	.btn.grey,
	button,
	input[type="submit"] { transition: all 150ms ease; background-color: #162A38; border-color: #162A38; color: #fff; }

.btn:hover,
	.show-hide-comments:hover,
	.btn.grey:hover,
	button:hover,
	input[type="submit"]:hover { color: #fff; }

@media screen and (min-width: 600px) {
	.btn:hover {
	    background-color: #505F69; border-color: #505F69;
	}
}

/* homepage */
#slotted-content .main-article .meta .channel-tag,
	#slotted-content .secondary-articles .meta .channel-tag,
	#slotted-content .tertiary-articles a .channel-tag,
	#slotted-content .video-content:hover .icon-holder,
	.contentgroup article a .channel-tag {
		background-color: #E01F27;
		color: #fff;
	}

#slotted-content .main-article h1 a:hover,
	#slotted-content .tertiary-article-list li:hover a,
	#slotted-content .secondary-articles a:hover h2,
	.contentgroup .more-link:hover,
	.contentgroup article .headline-box a:hover,
	#slotted-content .main-article a:hover ~ .headline-box h1,
	#slotted-content .main-article .headline-box:hover h1,
	#slotted-content .secondary-articles .headline-box:hover h2,
	#slotted-content .secondary-articles article:hover h2 {
	color: #E01F27;
}

.contentgroup .more-link { color: #162A38; }

.latest_art > h3 a,
	.bottomads > .twobysix_blk > div h3,
	.next-article-tease > a {
	color: #162A38;
}

#slotted-content .secondary-articles,
	#slotted-content .tertiary-articles { background-color: #fff; }

.contentgroup article .headline-box a,
	#slotted-content .secondary-articles a h2,
	#slotted-content .tertiary-article-list li a { color: #162A38; }

@media screen and (min-width: 768px) {
	#slotted-content .tertiary-articles { background-color: #162A38; }
	#slotted-content .secondary-articles a h2 { color: #ffffff; }
}

/*#slotted-content .tertiary-articles { background-color: #162A38; }*/
.flex > .seemore { border: 1px solid #162A38; color: #162A38; }
.flex > .seemore:hover { background-color: #162A38; color: #fff; }

/* sidebar headers */
@media screen and (min-width: 768px) {
	.sidebar .cmp > header { background-color: #fff; }
	.sidebar .category_cmp { background-color: #162A38; }
	.sidebar .category_cmp > header { background-color: #162A38; color: #fff; }
}

/* database page */
.database-nav { background-color: #162A38; }
.database-nav > li { transition: all 150ms ease; }
.database-nav > li.current { background-color: #162A38; box-shadow: inset 0 -5px 0 0 #E01F27; }
.database-nav > li:hover { background-color: rgba(255,255,255,0.2) }

/* article page */
.article_pg .main-article { border-top: solid 4px #162A38; }
.social_blk > .social-list > .newsletter { background-color: #C1BEBC; }

@media screen and (min-width: 600px) {
	.mainarticle > figure > figcaption > p > a {
	    color: #E01F27;
	}
}

/* galleries and slideshows */
	section.content-gallery > div > nav .start-slideshow,
	section.content-gallery > div > nav .next-slideshow,
	section.content-gallery > div > nav .back-to-article,
	section.content-gallery > div > nav .previous-slide,
	section.content-gallery > div > nav .next-slide,
	section.content-gallery > div > nav .start-slideshow_btn,
	section.content-gallery > div > nav .start-gallery_btn,
	section.content-gallery > div > nav .next-slideshow,
	section.content-gallery > div > nav .back-to-article_btn,
	section.content-gallery > div > nav .previous_btn,
	section.content-gallery > div > nav .next_btn {
	    background-color: #162A38; color: #fff; transition: color 150ms ease;
	}
section.content-gallery > div > nav .start-slideshow_btn:hover,
	section.content-gallery > div > nav .start-gallery_btn:hover,
	section.content-gallery > div > nav .next-slideshow:hover,
	section.content-gallery > div > nav .back-to-article_btn:hover,
	section.content-gallery > div > nav .previous_btn:hover,
	section.content-gallery > div > nav .next_btn:hover { color: #C1BEBC; }
.thumbgallery_blk > .thumbgallery_lst li.active { outline: 5px solid #162A38; }

/* movie page */
.movierankreview_blk > div > .ranking_blk > .rank { background-color: #E01F27; color: #333; }
.movierankreview_blk > .composite_blk { background: rgba(231, 32, 39, 0.3) none repeat scroll 0 0; }
.movierankreview_blk > .composite_blk > .ranking_blk > a { color: #E01F27; }
.movierankreview_blk > .starrank_blk > .stars > a:hover { color: #f4df3f; }
.movieinfo_blk > .info_blk > a { color: #E01F27; }
.movieinfo_blk > .info_blk > .movietickets > span > span { color: #E01F27; }

/* user pages */
.userprofilenav_lst > li > .active,
	.userprofilenav_lst > li > .active:hover { background-color: #162A38; }
.shared_lst > li:first-of-type { background-color: #162A38; }
.user-options-menu > li > .current { background-color: #162A38; }
.shared_lst > li:first-of-type { border: 0; }
.thread_cmp > header { background-color: #162A38; }
.socialtab_lst > li > ul > li { color: #162A38; }
.socialtab_lst > li > ul > .connect_itm { background-color: #162A38; }
.gallery_blk { background-color: #162A38; }
.pollicon_blk { background-color: #162A38; }
.poll-list > .submit_itm > input { background-color: #162A38; }
.answer-list > li .bar { background-color: #162A38; }
.answer-list > li .percentage { color: #162A38; }
.comment-box { background: #162A38; }
.comment-box:before { border-color: #162A38 #162A38 transparent transparent; }
.comment-box.white:before { color: #162A38; }
.comment-box.white { color: #162A38; }
div > .search input.gsc-search-button { background-color: #162A38; }
.gsc-search-box input.gsc-search-button { background-color: #162A38; }
.socialnav_blk { background-color: #162A38; }
.newsletterlanding_cmp > header { background-color: #162A38; }
.newsletterlanding_cmp > section > p { color: #162A38; }
.newsletterlanding_cmp > section > .form_blk > a { color: #162A38; }
.reply_lst > .main-topic { border-bottom: solid 3px #162A38; }
.spoiler.on:before { background-color: #162A38; }
.soclogin_lst.skn3 > li { background-color: #162A38; }
.soclogin_lst.skn3 > li:hover { background-color: #2D3F4C; }
.soclogin_lst > li > a { color: #162A38; }

/* embeds */
.embed > .content > .movietickets { background-color: #E01F27; }
.embed > .rating-container > .stars > .icon-star:hover { color: #ccc; text-decoration: none; }
.embed > .rating-container > .stars > .movieyellow,
	.embed > .rating-container > .stars > .starselected { color: #ccc; }
.embed > .content > .rating-container .rating-half > .rank,
	.embed > .content > .rating > .rank,
	.embed > .content > .rank { color: #E01F27; }