/*
* Copyright 2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

.action-bar {
	-webkit-transition: opacity 0.25s ease-in;
	-webkit-box-shadow: rgba(50, 50, 50, 0.447059) 0 -10px 20px;

	position: relative;
	width: 100%;
	height: 140px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	border-image-source: url('images_bb/core_actionbar_back.png');
	border-image-slice: 2 2 2 2 fill;
	border-width: 2px 2px 2px 2px;
	border-width: 0;
}

.action-bar-back {
	width: 128px; /* back button width of 154px - 1/2 cut width*/
	height: 100%;
	display: inline-block;
	opacity: 1;
	margin-left: 10px;
	-webkit-transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
	vertical-align: top;
	text-align: center;
	background: url("images_bb/core_actionbar_icon_back.png") no-repeat 50% 35%;
}

.action-bar-back.pressed {
	background: url("images_bb/core_actionbar_icon_back.png") no-repeat 50% 35%,
				url("images_bb/core_actionbar_back_pressed.png") no-repeat left center;
}

.action-bar-back-image {
	margin-top: 40px;
	width: 27px;
	height: 43px;
}

.action-bar-back-text {
	width: 100%;
	margin-top: 112px;
	font-size: 0.625em;
	color: #FAFAFA;
}

.action-bar-back-offset-right {
	-webkit-transform: translateX(30%);
}

.action-bar-back-offset-left {
	-webkit-transform: translateX(-10%);
}

.action-bar-actions {
	width: 100%;
	height: 100%;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	text-align: center;
	opacity: 1;
	-webkit-transition: -webkit-transform 0.25s ease-in;
	border-image-source: url('images_bb/core_actionbar_cut_mod.png');
	border-image-slice: 1 1 1 33 fill;
	border-width: 1px 1px 1px 33px;
	position: absolute;
	left: 140px; /* back button width of 154px - 1/2 cut width*/
	top: 0px;
	vertical-align: top;
}

.action-bar-actions-full-width {
	left: 0px;
	border-width: 1px;
	border-image-width: 0;
}

.action-bar-overflow {
	width: 20%;
	height: 100%;
	padding-top: 6px;
	-webkit-transition: opacity 0.25s ease-in;
}

.action-bar-overflow.actions {
	background: url("images_bb/core_actionbar_icon_actionoverflow.png") no-repeat top;
	position: absolute;
	right: 0;
}

.action-bar-overflow.tabs {
	padding-top: 0;
	background: url("images_bb/core_actionbar_tab_icon_taboverflow.png") no-repeat top;
	background-position-x: -53px;
	-webkit-transition: background-position-x .5s ease-in;
}

.action-bar-overflow.tabs.active {
	border-image: none;
	border-color: #00a8df; /*@BBLightBlue*/
	background-position-x: -50px, 0;
	background-image: url("images_bb/core_actionbar_tab_icon_taboverflow.png"), -webkit-linear-gradient(top, #3f3f3f 19%, #333 60%)
}
.action-bar-overflow.tabs.noContent {
	background-position-x: 50%;
}
.action-bar-overflow.tabs > * {
	-webkit-transition: opacity .4s ease-in;
}

.action-bar-overflow.tabs.noContent > * {
	opacity: 0;
}

.action-bar-tab-item {
	border-width: 9px 2px 0;
	border-image: url(images_bb/core_actionbar_tab_inactive.png) 9 2 0 repeat;
	background: none;
}

.action-bar-tab-item.pressed {
	border-style: solid;
	border-width: 9px 37px 0px;
	border-image: url(images_bb/core_actionbar_tab_pressed.png) 9 37 0 fill repeat;
	box-sizing: border-box;
	opacity: 0.5;
}

.action-bar-tab-item.active {
	border-style: solid;
	border-width: 9px 0 0 0;
	border-image: url(images_bb/core_actionbar_tab_active.png) 9 4 0 fill repeat;
}

.action-bar-tab-item:first-child {
	border-width: 9px 0 0 0;
}

.action-bar-tab-item:last-child {
	border-width: 9px 0 0 1px;
}

.action-bar-action-item {
	width: 19%;
}
.action-bar-tab-item {
	width: 20%;
}
.action-bar-action-item, .action-bar-tab-item {
	height: 100%;
	display: block;
	border-right-width: 0;
}

.action-bar-action-item.pressed {
	background: url("images_bb/core_actionbar_action_pressed.png") no-repeat top;
}

.action-bar-action-item-disabled {
	opacity: 0.5;
}

.action-bar-action-item-image, .action-bar img {
	margin-top: 14px;
	width: 81px;
	height: 81px;
}
.action-bar-tab-item .action-bar-action-item-image, .action-bar-tab-item img {
	margin-top: 6px;
}

.action-bar-action-item-text, .action-bar-overflow > p {
	width: 100%;
	margin-top: 3px;
	font-size: 0.625em;
	color: #FAFAFA;
}
.action-bar-action-item-text p, .action-bar-overflow > p {
	text-overflow: ellipsis;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
}

.action-bar-actions-offset-right {
	-webkit-transform: translateX(110%);
}

.action-bar-actions-offset-left {
	-webkit-transform: translateX(-10%);
	opacity: 0;
}

.action-bar-overflow-hidden {
	opacity: 0;
}

:not(.action-bar-tab-item).action-bar-grid-a,
:not(.action-bar-tab-item).action-bar-action-item:nth-child(1).action-bar-grid-b,
:not(.action-bar-tab-item).action-bar-action-item:nth-child(1).action-bar-grid-c {
	margin-left: 158px;
}

.action-bar-grid-actions-a {
	width: 58%;
}

.action-bar-grid-actions-b {
	width: 28.6%;
}

.action-bar-grid-actions-c {
	width: 19%;
}

.action-bar-grid-tabs-a {
	width: 100%;
}

.action-bar-grid-tabs-b {
	width: 50%;
}

.action-bar-grid-tabs-c {
	width: 33.3%;
}

.action-bar-grid-tabs-d {
	width: 25%;
}

.tabs ~ .action-bar-grid-tabs-a {
	width: 80%;
}
.tabs ~ .action-bar-grid-tabs-b {
	width: 40%;
}
.tabs ~ .action-bar-grid-tabs-c {
	width: 26.66%;
}

.action-bar-tab-item.action-bar-grid-tabAction-a {
	width: 80%;
}

.action-bar-tab-item.action-bar-grid-tabAction-b {
	width: 40%;
}

.action-bar-tab-item.action-bar-grid-tabAction-c {
	width: 26.6%;
}

.action-bar-tab-item.action-bar-grid-tabAction-d {
	width: 20%;
}

.tabs ~ .action-bar-tab-item.action-bar-grid-tabAction-a {
	width: 60%;
}

.tabs ~ .action-bar-tab-item.action-bar-grid-tabAction-b {
	width: 30%;
}

.tabs ~ .action-bar-tab-item.action-bar-grid-tabAction-c {
	width: 20%;
}

.tabs ~ .action-bar-tab-item.action-bar-grid-tabAction-d {
	width: 20%;
}

/* When a back button is present */
.action-bar-back + .action-bar-actions .action-bar-grid-a,
.action-bar-back + .action-bar-actions .action-bar-grid-b,
.action-bar-back + .action-bar-actions .action-bar-grid-c {
	margin: 0;
}

.action-bar-actions > .action-bar-action-item:not(.action-bar-tab-item):nth-child(1) {
	margin-left: 22.5%;
}

.action-bar-back + .action-bar-actions > .action-bar-action-item:nth-child(1) {
	margin-left: 0%;
}

.action-bar-back + .action-bar-action-item:not(.action-bar-tab-item):nth-child(1) {
	margin-left: inherit;
}

.action-bar-back + .action-bar-actions > .action-bar-action-item:nth-child(1).action-bar-grid-b {
	width: 28%;
}
.action-bar-back + .action-bar-actions > .action-bar-action-item:nth-child(1).action-bar-grid-c {
	width: 18%;
}

.action-bar-tab-item + .action-bar-action-item {
	background-image: url("images_bb/core_actionbar_tab_action_shadow.png");
	background-position: 0 0;
	background-repeat: no-repeat;
}

.action-bar-tab-item + .action-bar-overflow {
	background-image: url("images_bb/core_actionbar_tab_action_shadow.png"), url("images_bb/core_actionbar_icon_actionoverflow.png");
	background-position: 0 0, top;
}

.action-bar-back ~ .action-bar-actions > .action-bar-overflow {
	right: auto;
}

.actions > p, .actions > img {
	display: none;
}

.tabs ~ .action-bar-tab-item:nth-child(-n+4) {
	display: block;
}

.tabs ~ .action-bar-tab-item {
	display: none;
}

@media screen and (orientation: landscape), screen and (device-aspect-ratio: 1/1) {
	.action-bar-action-item-text, .action-bar-action-item-text p, .action-bar-overflow > p {
		display: none;
	}
	.bb10-landscape-hidden {
		display: none;
		opacity: 0;
	}
}

@media screen and (orientation: landscape) {
	.action-bar {
		height: 113px;
	}
}

@media screen and (device-aspect-ratio: 1/1) {
	.action-bar {
		height: 101px;
	}
	.action-bar-overflow.tabs.noContent {
		background-position-y: -13px;
	}

}

@media screen and (-blackberry-display-technology: -blackberry-display-oled) {
	.action-bar-actions {
		border-image-source: url('images_bb/core_actionbar_cut_mod_n.png');
	}
}
