/*
 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;
}

dw-div.elementHudEditableBackground
{
    background-color:#00BDFE;
}

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

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

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

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

@-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;
    margin:2px;
    padding-left:3px;
    padding-right:2px;
    font-weight:normal;
	color:#FFFFFF;
    border:solid 1px #FFFFFF;
    vertical-align:middle;
	border-radius:3px;
    float:left;
}

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:2px;
	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;
}
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;
}

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

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

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

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:#00BDFE;
}

.overlayNonEditableBorderColor
{
    border-color:#888888;
}

.dw_imgPropHud {
    height: 12px;
    width: 12px;
    float: left;
    margin: auto;
    display: inline-block;
    padding: 4px;
}

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