@import url("base.css");

#apps-box {
	overflow: hidden;
}

#local-apps-box {
	overflow-y: auto;
	padding: 10px 10px 0;
}

div.message-box div.message {
	width: 290px;
	margin: auto;	
	background: -moz-linear-gradient(center top , #FFFFFF, #E7EBF4) repeat scroll 0 0 transparent;
	-moz-border-radius: 5px;
	padding: 5px 10px;
	color: #CFD6DD;
}

div.message-box div.message > div {
	font-size: 20px;
	line-height: 50px;
	padding-left: 40px;
}

div#local-apps-box-info div.no-apps div.message > div {
	background: url("chrome://livemargins/skin/appcenter/images/bookmark.png") no-repeat scroll 15px center transparent;	
}

div#local-apps-box-info div.no-search-result div.message > div {
	background: url("chrome://livemargins/skin/appcenter/images/noresult.png") no-repeat scroll 15px center transparent;	
}

#local-apps-box div#local-apps-box-info {
	display: none;
}

#local-apps-box[class*=empty] {
	top: -20px;
}

#local-apps-box[class*=empty] div#local-apps-box-info {
	display: block;
	-moz-binding: url("chrome://livemargins/skin/appcenter/css/bindings.xml#empty-app-box");
	height: 100%;
}

#local-apps-box[class*=search-empty] div#local-apps-box-info {
	-moz-binding: url("chrome://livemargins/skin/appcenter/css/bindings.xml#empty-search-result") !important;
}

#local-apps-box[class*=empty] div#apps-box {
	display: none;	
}

#local-apps-box[class*=empty] div#local-apps-box-info > div {
}

div.app-item {
	border: solid 1px #CED7E6;
	padding: 6px;
	margin: 10px;
	width: 90px;
	height: 110px;
	float: left;
	text-align: center;
	-moz-border-radius: 4px;
	background: -moz-linear-gradient(center top , #FEFEFE, #E6EFF6);
}

div.app-item:hover {
	border-color: #8DADE8;	
	background: -moz-linear-gradient(center top , #C3D5F9, #D3DBE6);
}

div.app-item-active:hover {
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) inset,
              0 0 2px rgba(0, 0, 0, 0.4) inset,
              0 1px 0 rgba(255, 255, 255, 0.4);
}

div.app-box div.app-item div.app-op-btn {
	height: 15px;
	width: 15px;
	float: right;
	cursor: pointer;
}

div.app-box div.app-item div.app-del-btn {
	background: url("chrome://livemargins/skin/appcenter/images/del.png") no-repeat scroll center center transparent;
}

div.app-box div.app-item div.app-comment-btn {
	float: left;
	background: url("chrome://livemargins/skin/appcenter/images/comment.png") no-repeat scroll center center transparent;
}

div.app-box div.app-item div.web-clip {
	background: url("chrome://livemargins/skin/appcenter/images/webclip.png") no-repeat scroll center center transparent;
	vertical-align: bottom;
	text-align: right;
}

div.app-box div.app-item div.web-clip > img.app-icon {
	vertical-align: bottom;
    position: absolute;
	bottom: 3px;
    right: 4px;
}

div.app-box div.app-item div.app-item-icon {
	-moz-border-radius: 10px;
	overflow: hidden;	
}

div.app-box div.app-item img.app-icon {
	max-width: 64px;	
	vertical-align: middle;
}

div.app-box > div.app-item > div:first-child {
	cursor: pointer;	
	border: 1px solid #DCE6E7;
	background-color: #F0F4F5;	
}

div.app-box > div.app-item:hover > div:first-child {
	background: -moz-linear-gradient(center top, #E6EFFF, #E7EBF4);
	border: 1px solid transparent;
}

div.app-box > div.app-item > div:first-child > div {
	height: 78px;
	padding: 7px 5px;
}
	
div.app-box > div.app-item > div:first-child > div:last-child {
	position: absolute; 
	top: 79px;
	left: 0px;
	height: 15px;
	width: 77px;
	margin-left: -1px; 
	background-color: rgba(142, 171, 227, 0.73);
	visibility: hidden;
	height: 0px;
	overflow: hidden;
	cursor: default;
	padding: 0;
}

div.app-box > div.app-item:hover > div:first-child > div:last-child {
	visibility: visible;
	top: 65px;
	height: 15px;
	-moz-transition-property: height, top;
	-moz-transition-duration: 0.5s;
	-moz-transition-delay: 0.2s;
}

div.app-box > div.app-item > div.app-name-box {
	cursor: move;	
}

div.app-box > div.app-item > div.app-name-box > * {
	font-size: 12px;	
}

div.app-box > div.app-item > div.app-name-box > input {
	width: 100%;
	text-align: center;
	background-color: yellow;
}

div.drag-pos-indicator {
	position: absolute;
	display: none;
	height: 16px;
	width: 16px;
	background: url("chrome://livemargins/skin/appcenter/images/dragindicator.gif") no-repeat scroll center center transparent;	
}

/* styles for info box */
div#info-box div.undo-box {
	float: right;
	margin-right: 20px;
	-moz-border-radius: 10px;
	background-color: #FFFEB8;
	max-height: 60px;
	overflow: hidden;
	border: 1px solid #DFE5E0;
}

div#info-box div.undo-box > div {
	height: 100%;
	padding: 2px 10px 2px 27px;
	background: url("chrome://livemargins/skin/appcenter/images/undo.png") no-repeat scroll 7px center transparent;
	cursor: pointer;
}

div#info-box input.search-input {
	border: 1px solid;
	-moz-border-radius: 10px;
	padding: 2px 10px;
	margin-right: 10px;
	float: right;
}
/* end */

/* styles for app open history view */
#history_box {
	margin-right: 20px;	
}

div#apps-history-box {
	padding-left: 25px;	
}

div#apps-history-box > div#apps-history-box-info {
	display: none;
}

div#apps-history-box > div:first-child {
	border-bottom: 1px solid #A8B6D0;
    margin-right: 20px;
    padding: 10px 20px;
}

div#apps-history-box-info {
	height: 100%;	
}

div#apps-history-box[class*=empty] {
	top: -20px;
}

div#apps-history-box[class*=empty] > div:first-child {
	display: none;	
}

div#apps-history-box[class*=empty] > div#history_box {
	display: none;	
}

div#apps-history-box[class*=empty] > div#apps-history-box-info {
	-moz-binding: url("chrome://livemargins/skin/appcenter/css/bindings.xml#empty-history");
	display: block;
}

div#apps-history-box[class*=empty] > div#apps-history-box-info div.message > div {
	background: url("chrome://livemargins/skin/appcenter/images/trash.png") no-repeat scroll 15px center transparent;	
}

div.opened-app-item {
	overflow: hidden;
	border-bottom: 1px dashed;
	padding: 5px;
}

div.opened-app-item:hover {
	background-color: rgb(219, 230, 244);
}

div.opened-app-item > div > div {
	max-width: 500px;
}

div.opened-app-item > div > div:first-child {
	width: 60px;
	vertical-align: middle;
	text-align: center;
}

div.opened-app-item > div > div:first-child img {
	max-width: 32px;
	max-height: 32px;	
	vertical-align: middle;
}

div.opened-app-item > div > div:first-child div.app-icon-box {
	height: 32px;
    padding: 0 14px;
}


div.opened-app-item > div > div:first-child div.app-icon-box > div {
	display: table-cell;
    height: 32px;
    vertical-align: middle;
    width: 32px;
    -moz-border-radius: 5px;
    overflow: hidden;
}

div.opened-app-item > div > div.ops {
	width: 30%;
	vertical-align: middle;
}

div.opened-app-item > div > div.ops > button {
	margin-left: 10px;
}

div.opened-app-item > div > img {
	max-width: 16px;
	max-height: 16px;
}
/* end */

/******* styles for app search and tags *******/
div.app-info-box > div > div {
	vertical-align: middle;
}

div.app-info-box > div > div:first-child {
	text-align: center;
	vertical-align: middle;
}

div.app-info-box > div > div:last-child{
	width: 200px;
}

input#search_input_install {
	float: right;
	padding: 2px 0 2px 5px;
	float: left;
	width: 170px;
	height: 20px;
}

#btn_do_search {
	float: right;
	height: 16px;
	width: 16px;	
	margin: 4px 0;
	background: url("chrome://livemargins/skin/appcenter/images/Search-glass.png") no-repeat scroll left center transparent;
}

#btn_do_search:hover {
	background-position: center center;
}

#btn_do_search:hover:active {
	background-position: right center;
}

#app_search_box {
	margin: 2px 10px;
	border: 1px solid #C3CEE0; 
	float: right;
	overflow: hidden;
	background-color: white;
	padding-left: 10px;
    padding-right: 10px;
    -moz-border-radius: 10px;	
    width: 220px;
}
/************** end **************/