/*
 Copyright 2014 Adobe Systems Incorporated.  All rights reserved.
 
 Purpose:
    Css for Editable Selectors HUD elements
*/

html,body
{
  height: 100%;
  width:100%;
  padding: 0px;
  margin: 0px;
}

body
{
    background-color:transparent;
    pointer-events:none;
}

dw-div.elementHud
{
	position:absolute;
	z-index:99999999999999999999999999;	
	font-size:11px;
	font-family: Tahoma, sans-serif;
    cursor:default;
	display:none;
	vertical-align:middle;
    line-height:normal !important;
    pointer-events:auto;
    padding: 3px 4px 0px 4px;
}

dw-div.elementHudEditableBackground
{
    background-color:#2D8CEB;
}

dw-div.elementHudNonEditableBackground
{
    background-color:#888888;
}

dw-div.tagName
{	
	color:#FFFFFF;
    margin-right :4px;
    margin-bottom: 3px;
    font-weight:bold;
	float:left;
    height:16px;
    -webkit-user-select:none;
}

dw-div.selectorsContainer
{
    float:left;
    max-width:200px;
}

dw-div.selector
{
    height:14px;
    font-weight:normal;
	background-color:#FFFFFF;
    border:solid 1px #FFFFFF;
	color:#4f4f4f;
    vertical-align:middle;
	border-radius:1.5px;
    float:left;
	cursor:text;
    margin-right: 6px;
    margin-bottom: 3px;
}

@-webkit-keyframes blink {
    0% { background: white; }
    10% { background: #b3d4fd; }
    20% { background: white; }
    30% { background: #b3d4fd; }
    40% { background: white; }
    100% { background: white; }
}

dw-div.animateSelector
{
    -webkit-animation-direction: normal;
    -webkit-animation-delay : 1s;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;   
}

dw-div.selectorNonEditable
{
    height:14px;
    padding-left:3px;
    padding-right:2px;
    font-weight:normal;
	color:#FFFFFF;
    border:solid 1px #FFFFFF;
    vertical-align:middle;
	border-radius:1.5px;
    float:left;
    margin-bottom: 3px;
}

dw-div.selectorNonEditable:hover, dw-div.selector:hover, dw-div.selectorNonEditable:focus, dw-div.selector:focus
{
    border:solid 1px #FFA200;
}

dw-div.selectorNonEditable dw-div, dw-div.selector dw-div
{
    margin:0px;
    padding:0px;
    overflow:hidden;
	text-overflow:ellipsis;
    float:left;
}

dw-div.removeSelectorButton
{
    position:relative;
    top:1px;
	background-color:#FFFFFF;
    border:solid 1px #D6D6D6;
    border-radius:2px;
    height:10px;
    width:10px;
    line-height:7px;     
    text-align:center;
    float:right;
    display:inline-block;
    visibility:hidden;
	cursor:default;
    margin-right:1px !important;
}

dw-div.removeSelectorButton:before
{
    content: url(assets/deleteSelector.svg);
}

dw-div.verticalLine
{
    display:inline-block;
    height: 16px;
    border-left: solid 1px #1b70cd;
    margin-right: 6px;
    margin-bottom: 3px;
    float: left;
}

dw-div.selector:focus dw-div.removeSelectorButton
{
    visibility:visible;    
}

dw-div.selector:hover dw-div.removeSelectorButton 
{
    visibility:visible;
}

dw-div.selectorName
{
    max-width:100px;
    white-space: pre-wrap;
    height: 14px;
    padding-left:3px !important;
    padding-right:2px !important;
}

dw-div.selectorExpanded
{
    max-width:225px;
}

dw-div#addNewSelectorButton
{	
	background-color:#FFFFFF;
	color:#4f4f4f;
	float:left;
	width:16px;
	height:16px;
	border-radius:1.5px;
	vertical-align:middle;
	text-align:center;
    margin-bottom: 3px;
}

dw-div#newSelectorTextInput
{	
	background-color:#FFFFFF;
	display:none;
	min-width:51px;
	overflow: hidden;
    height:14px;
    margin-right:6px;
    margin-bottom:3px;
    vertical-align:middle;
    padding-left:2px;
    padding-right:2px;
    float:left;
    white-space:pre;
    cursor: text;
    border:solid 1px #FFF;
    outline:none;
}

dw-div#newSelectorTextInput[contenteditable="true"]:active, dw-div#newSelectorTextInput[contenteditable="true"]:focus{
    border:solid 1px #FFA200;
    outline:none;
}

dw-div.selectorName[contenteditable="true"]:active, dw-div.selectorName[contenteditable="true"]:focus{
    border:none;
    outline:solid 1px #FFA200;
}

dw-div#newSelectorTextInput:empty:before {
  content:attr(data-placeholder);
  color:#888888;
}

.overlay
{
	position:absolute;
	z-index:99999999999999999999999999;
	background-color:transparent;
	display:none;	
	border-width:thin;
	border-style:solid;
	pointer-events:none;
}

.overlayEditableBorderColor
{
    border-color:#2D8CEB;
}

.overlayNonEditableBorderColor
{
    border-color:#888888;
}

.dw_imgPropHud {
    height: 16px;
    width: 16px;
    float: left;
    display: inline-block;
    margin-right:4px;
    margin-bottom: 3px;
}

.dw_imgPropHud:hover {
    content: url(assets/sandwich_H.svg);
}

.dw_imgPropHud:focus {
    outline: solid 1px #FFA200;
}

img.dw_imgSelection {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.ccLibCloudIcon {
    pointer-events: auto;
    cursor: pointer;
}

.ccLibLoaderIcon {
    position:absolute;
    margin: auto;     
}