@charset "utf-8";

/* Suits layout / Blazer  */
#wrapper {
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	width:100%; 
}

/* Left fixed list */
#tabs-wrapper {
	background: #2b2b2b;
	width: 272px;
	overflow: hidden;

	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	
	-webkit-transition: opacity 0s ease;
	-webkit-transition-delay: 0.35s;
	-moz-transition: opacity 0s ease 0.35s;
	transition: opacity 0s ease 0.35s;
	
	display: block;
	left: 0;
	top: 0; bottom:0;
	opacity: 0;
	
	position:fixed;
}
.open #tabs-wrapper {
	-webkit-transition: opacity 0s linear;
	-webkit-transition-delay: 0s;
	-moz-transition: opacity 0s linear 0s;
	transition: opacity 0s linear 0s;
	opacity: 1;
}
#tabs-wrapper .tabs-account {
	position:relative; z-index:11; background-color:#292929;
	width:272px; height:46px; border-bottom:1px solid #191919; 
	
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#292929));
	background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#333333), to(#292929));
	background: -moz-linear-gradient(center top, #333333, #292929);
	background: linear-gradient(#333333, #292929);

}
#tabs-wrapper .press-profile {
	padding:7px 0 0 0;
}
#tabs-wrapper .press-profile .profile-text{
	margin-left:53px; width:180px; display:block; 
}
#tabs-wrapper .press-profile .profile-text.nick { color:#C9C9CA; font-size:14px; font-weight:bold; text-transform: uppercase;}
#tabs-wrapper .press-profile .profile-text.mail { color:#757575;}

#tabs-wrapper .press-profile img {
	position:absolute; display:block; top:6px; left:10px;
	background: rgba(0,0,0,.5) !important;
	border:0;
	border-radius: 100px;
	box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
#tabs-wrapper .press-profile .supre{
	position:absolute; top:13px; right:12px;
	width:19px; line-height:19px; height:19px; color:#777;
}



#tabs-wrapper .play-account {
	color:#999; font-size:16px; line-height:46px; padding:0 11px;
}
#tabs-wrapper .play-account .supre { width:19px; line-height:19px; height:19px; top:3px; margin-right:1px; }

#scroll-wrapper {
	position:absolute; 
	left: 0; top: 47px; bottom:0;
	width: 272px;
	background:#2b2b2b;
}
#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/

	width:100%; min-height:640px;
	padding:0; 
}
.gnb {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left; position:relative;
}

.gnb .gnb-item {
	position:relative; 
	font-size:16px; color:#999;
	border-bottom:1px solid #333;
	background-color:#2b2b2b;
	
}
.gnb .gnb-link { 
	display: block; position: relative; 
	height:46px; line-height:46px; 	padding:0 11px;
	color:#999; text-decoration:none; font-size:16px;
	-webkit-tap-highlight-color: transparent;
}
.gnb .gnb-link2 { 
	display: block; position: relative; 
	height:36px; line-height:46px; 	padding:0 15px;
	color:#999; text-decoration:none; font-size:16px;
	-webkit-tap-highlight-color: transparent;
}
.gnb .gnb-link.no-thumb { padding:0 11px 0 54px; }
.gnb.nero .gnb-link.no-thumb { padding:0 11px; }

.gnb .gnb-link .supre { font-size:18px; position:absolute; width:18px; height:18px; line-height:18px; right:16px; top:13px; color:#666; display:none; margin-right:0; }

.gnb .gnb-link .macy-vote-down { display:block;}
.gnb .showme .gnb-link .macy-vote-down { display:none;}
.gnb .showme .gnb-link .macy-vote-up { display:block;}


.gnb .gnb-thumb {
	margin-right: 5px; height:46px;
	vertical-align: middle; display: inline-block;
}
.gnb .gnb-thumb-img {
	display: inline-block; margin-top:4px;
	background: rgba(0,0,0,.5) !important;

	border-radius: 4px;
	box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
.gnb .gnb-name {
	display: inline-block;
}

.gnb .gnb-item.supertitle {
	background-color:#222;
	border-bottom:1px solid #181818; height:22px; line-height:22px; padding:0 11px;
	font-size: 11px;  color:#737373; 
}

.gnb .gnb-item.active, .gnb .rsp .rsp-item.active {
	background: #026ff9; 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ff9), to(#044ffa));
	background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#008ff9), to(#044ffa));
	background: -moz-linear-gradient(center top, #008ff9, #044ffa);
	background: linear-gradient(#008ff9, #044ffa);
	text-shadow: 0px 1px rgba(43, 43, 43, 0.5);
}
.gnb .gnb-item.active .gnb-link, .gnb .rsp .rsp-item.active .rsp-link { color:#fff; }

.gnb .gnb-item.active-red {
	background: #CC181E;
	background: linear-gradient(#FA153E, #FF5800);
}
.gnb .gnb-item.active-red .gnb-link { color:#fff; }

.gnb .rsp {
	padding:0;
	margin:0;
	width:100%; height:0;
	text-align:left; position:relative; display:none;
}
.gnb .gnb-item.showme .rsp { height:auto; display:block; }

.gnb .rsp .rsp-item {
	position:relative; 
	font-size:16px; color:#999;
	border-top:1px solid #333;
	background-color:#272727;
}
.gnb .rsp .rsp-link { 
	display: block; position: relative; 
	height:0; line-height:46px; padding:0 11px;
	color:#999; text-decoration:none; font-size:16px;
}
.gnb .rsp .rsp-link.no-thumb { padding:0 11px 0 54px; }
.gnb.nero .rsp .rsp-link.no-thumb { padding:0 11px; }

.gnb .gnb-item.showme .rsp .rsp-link { height:46px; }


.sprite { 
	width:80%; 
	position: fixed; background-color:#fff; 
	
	top: 46px; left: 10%; z-index: 9; 
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	-webkit-transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transition: visibility 0s linear 250ms, -webkit-transform 250ms cubic-bezier(1, 0, 0.12, 1), opacity 250ms ease;
	-moz-transition: visibility 0s linear 250ms, -moz-transform, 250ms, cubic-bezier(1, 0, 0.12, 1) opacity 250ms ease;
	transition: visibility 0s linear 250ms, transform 250ms cubic-bezier(1, 0, 0.12, 1), opacity 250ms ease;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	border-radius: 0 0 5px 5px;
	
	opacity: 0;
	filter: alpha(opacity=0);
	
	overflow: visible;
	visibility: hidden;
}

.sprite.open { 
	-webkit-transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transition: visibility 0s linear, -webkit-transform 250ms cubic-bezier(1, 0, 0.12, 1), opacity 250ms ease;
	-moz-transition: visibility 0s linear, -moz-transform, 250ms, cubic-bezier(1, 0, 0.12, 1) opacity 250ms ease;
	transition: visibility 0s linear, transform 250ms cubic-bezier(1, 0, 0.12, 1), opacity 250ms ease;
	
	opacity: 0.93;
	filter: alpha(opacity=93);
	
	visibility: visible;
}

.sprite .sprite-item { 
	position:relative;
	border-top:1px solid #eee;

}

.sprite .sprite-link {
	font-size: 14px;
	display: block;
	position: relative;
	height: 35px;
	line-height: 35px;
	padding: 0 15px; color:#292F33;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sprite .sprite-link.on { color:#007AFF; font-weight:bold; }


/* Contents */
#content-wrapper {
	-webkit-backface-visibility: hidden; z-index:22; background-color:#1b1b1b;

	height: 100%; padding-top:45px; /* 45px */
	min-height: 350px;
		
	-webkit-transform: translateX(0);
	-webkit-transition: .2s -webkit-transform ease-in-out;

	-moz-box-shadow: -5px 0 5px rgba(17,17,17,.8);
	-ms-box-shadow: -5px 0 5px rgba(17,17,17,.8);
	-webkit-box-shadow: -5px 0 5px rgba(17,17,17,.8);
	box-shadow: -5px 0 5px rgba(17,17,17,.8);	
			
}
.contentaud {
	font-size: 16px;
	display: block;
	position: relative;
	line-height: 25px;
	padding: 0 15px; color:#cccccc;
	background: #1b1b1b;
}

.form-hide #content-wrapper { padding-top:0;}

#content-wrapper.hollow { padding-top:0; background: #fff;}
.open #content-wrapper {
	-webkit-transform: translateX(272px); 
}
.roar #content-wrapper { }


/* Toolbar */
.toolbar-wrapper { position:fixed; top:0; left:0; right:0; height:47px; z-index:10; display:block;}
.form-hide .toolbar-wrapper { display:none;}

#profile-blocking {
	-webkit-tap-highlight-color: transparent;
	display: none;
	position:absolute;
	top: 0; left: 0;
	width:272px; height:46px; overflow:hidden ;
}
.open #profile-blocking { display:block }


.toolbar {
	text-align: center;
	position:relative;
	top: 0;
	height: 45px;	
	display: block;
	z-index: 5;
	width: 100%;
	color: #fff;
	-webkit-transform: translateX(0); 
	-webkit-transition: .2s -webkit-transform ease-in-out;
}

.open .toolbar {
	-webkit-transform: translateX(272px);
}

.intense .toolbar {
	background: #1b1b1b;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#353535), to(#010101));
	background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#353535), to(#010101));
	background: -moz-linear-gradient(center top, #353535, #010101);
	background: linear-gradient(#353535, #010101);
	border-top: 1px solid #4A4A4A; 

	-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.8);
	box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.8);
}

.roar .toolbar {
	background: #FFF;	
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f6f6f6), to(#f9f9f9));
	background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#f6f6f6), to(#f9f9f9));
	background: -moz-linear-gradient(center top, #f6f6f6, #f9f9f9);
	background: linear-gradient(#000000, #000000);	
	border-top: 1px solid #fff; 
		
	-webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
	
	opacity: 0.95;
	filter: alpha(opacity=95);
}
.roar .toolbar {
	/* background: url(../img/diamonds.png) bottom repeat-x; background-size: 20px 49px; */

}
.roar .toolbar.hang {
	background: #FFF;	
	border-bottom: 2px solid #FF2D55; 
}

.header-search {
	position:relative;
	display: block;
	margin: 9px 13px 0 0; width:20px; height:23px; 
	-webkit-tap-highlight-color: transparent;
}

.toolbar .header-search .supre {
	color:#808080; line-height:19px; width:19px; height:22px; margin-right:0; font-size:19px; text-align:left;
}
.intense .toolbar .header-search .supre { color:#dfdfdf; }


.header-title {
	font-weight: bold;
	color: #fff; text-decoration:none; 
	display: inline-block; padding-top:5px; padding-right:14px; padding-left:5px;
	-webkit-tap-highlight-color: transparent; position:relative;
}
.header-title.royals { padding-right:0; padding-left:0; }

.roar .header-title { color: #3c3a37; }
.header-title.pporo {
	padding:0; font-size: 21px;line-height: 42px; 
}


.header-item-title { font-size:19px; line-height:19px;  }
.header-item-title.wicked { height:19px; }
.header-item-title .supre{ 
	font-size:15px; line-height:15px; width:15px; color: #111; top:0; margin-right:0; 
	position: absolute;
	right: 0;
	top: 8px;
}
.intense .header-item-title .supre { color:#dfdfdf; }
.header-item-title .macy-vote-up{ display:none; }
.header-item-title.open .macy-vote-down{ display:none; }
.header-item-title.open .macy-vote-up{ display:block; }



.header-item-cate { font-size:12px; font-weight:normal; color: #eee; }
.roar .header-item-cate { color: #777; }


#panel-blocking {
	-webkit-tap-highlight-color: transparent;
	display: none;
	position:fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.open #panel-blocking { display:block; z-index:999;}


#hamburger-button {
	height: 40px; width: 22px; 	margin-left: 11px;
	float: left;
	left: 0;
	position: relative;
	display: inline-block;
	-webkit-tap-highlight-color: transparent;
}
#patty {
	width: 21px; height: 3px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	
	background: #dfdfdf; /* #45BE81 */
	display: inline-block;
	margin-top:20px;
}
.roar #patty { background-color:#808080; height:3px;}

#patty:before, #patty:after {
	display: block;
	content: "";
	
	position: relative;
	-moz-border-radius: 2px;
	border-radius: 2px;
	
	width: 21px; height: 3px;
	background: #dfdfdf;
	left: 0;
}
.roar #patty:before, 
.roar #patty:after { background-color:#808080; height:3px;}

#patty:before { top: -6px; }
#patty:after { bottom: -3px;}

#position li {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: #141414;
	box-shadow: inset 0 1px 3px black,0 0 1px 1px #202020;
	margin: 0 2px;
	cursor: pointer;
}

#position li.on {
	box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
	background-color: #1293dc;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
	background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);
	background-image: -moz-linear-gradient(top,#1293dc,#0f6297);
	background-image: -ms-linear-gradient(top,#1293dc,#0f6297);
	background-image: -o-linear-gradient(top,#1293dc,#0f6297);
	background-image: linear-gradient(top,#1293dc,#0f6297);
}


.suits-wd {
	position: relative;
	display: block; margin:12px 0 0 0; 
}
.suits-wd .suits-wd-info {
	margin:0 9px 9px 12px; line-height:22px;
	color:#000; font-size:16px;  
}
.suits-wd .suits-wd-info a {
	line-height:22px;
	color:#666; font-size:13px;  
}
.suits-wd .suits-wd-info .supre {
	color:#666; font-size:15px; width:15px; top:1px; margin-right:0; margin-left:2px;
}
.suits-wd .suits-wd-title {
	display:inline-block; color:#000; font-size:16px; line-height:22px;  
}

.suits-wd .wd-border-bot {
	position:absolute; bottom:0; right:0; left:0;
	margin:0 0 0 12px; background-color:#ececec; height:1px; 	
}

/* #site-footer */

#site-footer { font-family: 'Helvetica Neue', Helvetica, sans-serif; border-top:1px solid #e4e4e4; padding:15px 0;  text-align:center; background-color:#1b1b1b;}
#site-footer h3 {
	color: white;
	font-size: 20px;
	margin-bottom: 7px;
}
#super-footer {  padding: 0 13px; text-align: center; }
#super-footer span { display:inline-block; line-height:100%; }

.footer-logo { font-size: 12px; font-weight:bold; display:inline-block; text-shadow: 0 1px 0 #fff;  }
.footer-tagline {
	color:#cccccc; font-size:11px; 
	margin: 0 0 0 0; font-weight:normal;

}
.power-puff-lady {}
.power-puff-lady li { display:inline-block; margin:0 0 11px 13px; font-size:13px; text-shadow: 0 1px 0 #fff; font-weight:bold;}
.power-puff-lady li:first-child { margin:0 0 11px 0;}


/* elise-layer */
#elise-layer {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
	left: 0;
	height: 100%;
	padding: 0;
	position:absolute;
	top: 0;
	width: 100%;
	z-index: 100;
	-webkit-tap-highlight-color: transparent;
	display:none;
}
#elise-layer.elise-rappel  { display:block }

.elise-toolbar {
	text-align: center;
	position:relative;
	top: 0;
	height: 35px; padding:10px 0;	
	display: block;
	width: 100%;
	color: #fff;

	background: #FFF;	
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#ededed));
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.25);
	box-shadow: 1px 1px 1px rgba(0,0,0,.25);
	border-top: 1px solid #fff; 
}

.elise-search-input {
	position: relative;
	border: 1px solid #CFCFCF;

	width: 200px; height:33px; 
	padding: 0 10px 0 35px;
	margin-right: 10px;
	
	text-align: left; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #3b3b3b; font-size: 15px; text-indent: 0;
	border-radius: 20px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	-webkit-transition: width 0.2s ease, background-color 0.2s ease;
	-moz-transition: width 0.2s ease, background-color 0.2s ease;
	transition: width 0.2s ease, background-color 0.2s ease;

	background-image: url(../img/do-search.png); 
	background-position: 10px 6px;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	
	-webkit-box-shadow: 0 4px 5px -5px rgba(0, 0, 0, 0.3) inset;
	-moz-box-shadow: 0 4px 5px -5px rgba(0, 0, 0, 0.3) inset;
	box-shadow: 0 4px 5px -5px rgba(0, 0, 0, 0.3) inset;
	
}
.elise-search-input:focus {
	border-color: #3E75FF; 
	-webkit-box-shadow: 0 0 3px rgba(62, 117, 255, 0.7), 0 4px 5px -5px rgba(0, 0, 0, 0.2) inset; 
	-moz-box-shadow: 0 0 3px rgba(62, 117, 255, 0.7), 0 4px 5px -5px rgba(0, 0, 0, 0.2) inset; 
	box-shadow: 0 0 3px rgba(62, 117, 255, 0.7), 0 4px 5px -5px rgba(0, 0, 0, 0.2) inset; 

}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), 
only screen and (min--moz-device-pixel-ratio: 1.3), 
only screen and (-o-min-device-pixel-ratio: 1.3), 
only screen and (min-resolution: 125dpi), 
only screen and (min-resolution: 1.3dppx) {
.elise-search-input {
	background-image: url(../img/do-search-2x.png); background-size: 19px 50px;
	}	
.suits-wd .wd-border-bot {
	background-color:transparent;
	background-image: -webkit-linear-gradient(top, #cacaca 0%, #cacaca 50%, transparent 50%, transparent 100%);
	background-image: linear-gradient(to top, transparent 0%, transparent 50%, #cacaca 50%, #cacaca 100%);
	background-position: top;
	background-size: 100% 1px;
	background-repeat: no-repeat;
	}
#site-footer {
	border:none;
	background-image: -webkit-linear-gradient(top, #cacaca 0%, #cacaca 50%, transparent 50%, transparent 100%);
	background-image: linear-gradient(to top, transparent 0%, transparent 50%, #cacaca 50%, #cacaca 100%);
	background-position: top;
	background-size: 100% 1px;
	background-repeat: no-repeat;
	
	}
	
}
@media (min-width: 480px) and (max-width: 1024px) {
	.elise-search-input {
		width: 360px;
	
	}
}