@import "config.less";

/***************************************************************************
                    Header / Footer
                    NavigationBar
***************************************************************************/

.ui-bar-s {
	border: none;
	background : rgba(248, 246, 239, 1); // #F8F6EF /* Header Background */
	color: @color_bar_title_text;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size : 28 * @unit_base;

	.ui-link-inherit {
		color: @color_bar_title_text;
	}
	
	
	> .ui-btn.ui-btn-back {
		background : transparent;

		position : absolute;
		right : 0px;

		.ui-icon-header-back-btn {
			top : 8 * @unit_base;
			left : auto;
			right : 13 * @unit_base;

			margin-top : 0px
		}
	}
}

/* Header style */
.ui-header.ui-bar-s{
	position : fixed;
	top : 0px;

	min-height : 55 * @unit_base;

	.ui-title {
		display: inline-block;
		color : @color_bar_title_text;
		min-height : 28 * @unit_base;
		max-height : 34 * @unit_base; /* temporary UX strange */
		font-size  : 28 * @unit_base;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		outline: 0 !important;

		text-align: left;
		margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;

	}

	/* header button position : need to press area more... */
	>.ui-btn {
		.ui-btn-inner.ui-btn-icon-only .ui-icon {
			left : 0px;
			top : 0px;
			margin-top : 0px;
		}
	}

	> .ui-btn.ui-btn-back {
		right : 13 * @unit_base;
	}

	img {
		display: inline-block;
		height: 16 * @unit_base;
		width: 16 * @unit_base;
		margin-left: 8 * @unit_base;
	}

	.ui-title-text-sub {
		position : absolute;
		top : 36 * @unit_base;
		left : 8 * @unit_base;	

		font-size : 12 * @unit_base;	

		img {
			height: 16 * @unit_base;
			width: 16 * @unit_base;
			margin-left: 8 * @unit_base;
		}
	}

	> .ui-btn{
		position : absolute;
		top : 16 * @unit_base;
		margin-top : 0px;

		height : 34 * @unit_base;
		width : 34 * @unit_base;

		background: transparent;
		color	: @color_bar_title_button_text;
	}
	&.ui-title-tabbar >.ui-btn {
		// NOTE: there is an issue that when tabbar and button are
		// used together in the header, the lower part of buttons is
		// hidden by the tabbar. (N_SE-22253) Although No specification
		// for this case is found in the GUI guide, this one is added
		// to resolve this issue.
		top: 8 * @unit_base;
	}

	> .ui-btn.ui-btn-icon_only {
		-o-border-radius : 0px;
		-ms-border-radius : 0px;
		-moz-border-radius : 0px;
		-webkit-border-radius : 0px;
		border-radius : 0px;
	}

	> .ui-btn:nth-child(2) {
		right : 13 * @unit_base;
	}

	> .ui-btn:nth-child(3) {
		right : 56 * @unit_base;
	}

	> img + h1 + .ui-btn:nth-child(3) {
		right : 13 * @unit_base;
	}

	> img + h1 + .ui-btn:nth-child(3) + .ui-btn {
		right : 56 * @unit_base;
	}

	> img + h1 + span.ui-title-text-sub + .ui-btn:nth-child(4) {
		right : 11 * @unit_base;
	}

	> img + h1 + span.ui-title-text-sub + .ui-btn:nth-child(4) + .ui-btn {
		right : 58 * @unit_base;
	}

	> .ui-btn.ui-btn-down-s {
		background : @color_bar_btn_press;
		color : @color_bar_title_button_text_press;
	}
	
	&.ui-title-multiline {
		.ui-title {
			min-height : 24 * @unit_base;
			max-height : 24 * @unit_base; /* temporary UX strange */
			font-size  : 22 * @unit_base;

			margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
		}
	}
	
}

.ui-footer.ui-bar-s {
	height : 49 * @unit_base;
	text-align : center;
	bottom : 0px;
	>.ui-btn.ui-btn-back,
	>[data-icon="naviframe-more"] {
		background : transparent;

		>.ui-btn-icon-only {
			width : 56 * @unit_base;
			height : 49 * @unit_base;
			padding : 0px;
			-webkit-box-shadow : none /* temp code */
		}
	}

	[data-icon="naviframe-more"] {
		position : absolute;
		left : 0 * @unit_base;
		top : 0 * @unit_base;

		box-shadow : none;
		border-width : 0px;

		.ui-icon-naviframe-more {
			left : 13 * @unit_base;
			top : 8 * @unit_base;
			
			margin-top : 0px;
		}
		.ui-btn-inner {
			border: none;
			background: transparent;
			box-shadow: none;
		}
	}
	>[data-role="button"] {
		font-size : 15 * @unit_base;
		font-weight : bold;
		color : @color_tabbar_btn_normal;
	}

	[data-role="controlgroup"] {
		margin-left : auto;
		margin-right : auto;
		margin-top : 6 * @unit_base; /* temp value */
		margin-bottom : 6 * @unit_base; /* temp value */
		padding-left : 58 * @unit_base;
		padding-right : 58 * @unit_base;


		[data-role="button"] {
			background : transparent;
			
			border-style : solid;
			border-color : @color_bar_divider_line;
			border-top-width : 0px;
			border-bottom-width : 0px;
			border-left-width : 1px;
			border-right-width : 1px;

			.LESSborder-radius-all(0);

			box-shadow : none;

			padding : 0px;
			margin-left : -4 * @unit_base;
			margin-right : -5 * @unit_base;
			&.ui-btn-hover-s {
				.LESSborder-radius-all(0);
			}
			&.ui-btn-down-s, .ui-btn-active-s {
				.LESSborder-radius-all(0);
				.ui-btn-inner {
					background : @color_bg;
					.ui-btn-text {
						color : @color_bar_title_text;
					}
				}
			}

			>.ui-btn-inner {
				.LESSborder-radius-all(0);
				border : 0px solid;
				box-shadow : none;
			}
			.ui-btn-text {
				font-size : 17 * @unit_base;
				color : rgba(58, 58, 58, 1);
			}

			&.ui-corner-right {
				border-right-width : 0px;
			}

			&.ui-corner-left {
				border-left-width : 0px;
			}
		}
		}
	
	> [data-role="button"]:not([data-icon="naviframe-more"]) {
		top : 6 * @unit_base;
	}

	> p {
		margin-top : 8 * @unit_base;
		margin-bottom : 8 * @unit_base;
	}
	> h1, h2, h3, h4, h5, h6 {
		display: inline-block;
	}
}

/***************************************************************************
                    Content Top calculate
***************************************************************************/
.ui-content {
	position : relative;
	top : 0;
}

/***************************************************************************
                    Content Top calculate
***************************************************************************/


.ui-body-s {
	border: 1px solid #2a2a2a;
	background: 			@color_bg;
	color: 					@color_text;
	font-weight: normal;

	font-family: Helvetica, Arial, sans-serif;

	.ui-link-inherit { color: 	#fff; }
	.ui-link {
		/* ui-body-link */
		color: #2489CE;
		font-weight: bold;
		&:hover { color: #2489CE; }
		&:active { color: #2489CE; }
		&:visited {	color: #2489CE; }
	}
}

.ui-br {
}
.ui-btn-box-s {
	padding: 1 * @unit_base;
}
.ui-btn-box-s.ui-btn-up-s {
	.LESSbutton_box_style;
	.LESSborder-radius-all( 0.3rem );
	.LESSbutton_text1_style;
}

.ui-btn.ui-btn-corner-all .ui-btn-box-s.ui-btn-up-s {
	.LESSborder-radius-all( 1.2rem );
}

.ui-btn-box-s .ui-btn-inner {
	border: 1px solid;
	border-color: rgb(199, 197, 190);
	.LESSborder-radius-all( 0.3rem );
	.LESSbox-boxsizing( border-box );
	.LESSbutton_inner_box_style;
	height: 100%;
}

.ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
	.LESSborder-radius-all( 1.2rem );
}

.ui-ctxpopup .ui-btn-box-s{
	&.ui-btn-up-s,
	&.ui-btn-hover-s {
		background: transparent !important;
		border: none;
		box-shadow: none;
		padding: 0;
		color: white !important;
	}
	&.ui-btn-down-s {
		background: @color_ctxbutton_press !important;
		border: none;
		box-shadow: none;
		padding: 0;
		color: white !important;
		.LESSborder-radius-all( 0 );
	}
	.ui-btn-inner {
		background: transparent ! important;
		box-shadow: none;
		border: none;
	}
}

.ui-ctxpopup .ui-btn-down-s {
        background: @color_ctxbutton_press !important;
}

.ui-header .ui-btn-box-s,
.ui-footer .ui-btn-box-s,
.ui-btn-back.ui-btn-up-s,
.ui-btn-back.ui-btn-hover-s,
.ui-btn-back.ui-btn-down-s,
.ui-popup-container .ui-btn-box-s {
	font-weight: normal;
	.LESSborder-radius-all( 0.9 rem );
}

.ui-btn-box-s.ui-btn-hover-s {
	.LESSbutton_hover_style;
	.LESSbutton_text1_style;
	.LESSborder-radius-allimportant( 0.3em );
}
.ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
	.LESSborder-radius-allimportant( 1em );
}
.ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-all {
	.LESSborder-radius-allimportant( 1.2em );
}
.ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
	.LESSborder-radius-allimportant( 1.2em );
}
.ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
	.LESSbutton_down_style;
}

.ui-btn-up-s,
.ui-btn-hover-s,
.ui-btn-down-s {
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;
}

/*
/* Structure */
/* links within "buttons" 
-----------------------------------------------------------------------------------------------------------*/

a.ui-link-inherit {
	text-decoration: none !important;
}


/* Active class used as the "on" state across all themes
-----------------------------------------------------------------------------------------------------------*/

/* button default color for active state */
.ui-btn-active {
	/* global-active */
	color: 					@color_button_text_normal;
	cursor: pointer;
	text-decoration: none;
	background: 			@color_button_press;
  	outline: none;
	//font-family: Helvetica, Arial, sans-serif;

	a.ui-link-inherit {
		color: 					@color_button_text_normal;
	}
}

/* button inner top highlight
-----------------------------------------------------------------------------------------------------------*/

.ui-btn-inner {
	//border : none;
}




/* corner rounding classes
-----------------------------------------------------------------------------------------------------------*/

.ui-corner-tl {
	.LESSborder-radius-topleft(.3em);
}
.ui-corner-tr {
	.LESSborder-radius-topright(.3em);
}
.ui-corner-bl {
	.LESSborder-radius-bottomleft(.3em);
}
.ui-corner-br {
	.LESSborder-radius-bottomright(.3em);
}
.ui-corner-top {
	.LESSborder-radius-topleft(.3em);
	.LESSborder-radius-topright(.3em);
}
.ui-corner-bottom {
	.LESSborder-radius-bottomleft(.3em);
	.LESSborder-radius-bottomright(.3em);
}
.ui-corner-right {
	.LESSborder-radius-topright(.3em);
	.LESSborder-radius-bottomright(.3em);
}
.ui-corner-left {
	.LESSborder-radius-topleft(.3em);
	.LESSborder-radius-bottomleft(.3em);
}
.ui-corner-all {
	//.LESSborder-radius-all(.3em);
}
.ui-corner-none {
	.LESSborder-radius-all(0); 
}

/*************************************************************************** 
                    Icon (Naviframe)
***************************************************************************/
.ui-header, .ui-footer {
	.ui-btn .ui-btn-icon-only .ui-icon {
		width: 32 * @unit_base; 
		height: 32 * @unit_base;
		
	}
}

.ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
	width: 32 * @unit_base; 
	height: 32 * @unit_base;

	background-repeat: no-repeat;
	background-size: 100% 100%;

}

.ui-btn-up-s {
	.ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
	.ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
	.ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
	.ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
	.ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
}

.ui-btn-down-s, .ui-btn-hover-s {
	.ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
	.ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
	.ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); } /* FIXME: check ux if it needs to be deprecated.. */
	.ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press.png); }
	.ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press.png); }
}

/* Interaction cues
-----------------------------------------------------------------------------------------------------------*/
.ui-disabled {
	filter: Alpha(Opacity=30);
	opacity: .3;
	zoom: 1;
}
.ui-disabled,
.ui-disabled a {
	cursor: default !important;
	pointer-events: none;
}