.cp:hover{
	cursor : pointer;
}
#addStyleWizard{
	margin-left:17px;
}

#cssWizard{
	background: none repeat scroll 0 0 #2d2d2d;
	color: white;
	display: none;
	padding: 0 15px;
	z-index: 100;
	overflow: hidden;
	margin-top: 15px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.half #cssWizard{
	/*height: 165px;
	overflow: visible;*/
}

.css-wizard-help-overlay{
	background: none repeat scroll 0 0 rgba(99, 99, 99, 0.85);
	color: white;
	display: none;
	bottom: 0;
	left: 0;
	overflow: hidden;
	padding: 0 15px 15px;
	position: absolute;
	right: 0;
	top: 43px;
	z-index: 100;
}

.css-wizard-help-overlay>.center{
	margin-left:auto;
	margin-right:auto;
	width: 80%;
}

.css-wizard-help-text{
	float: left;
	font-size: 18px;
	font-weight: bold;
	margin-right: 2%;
	margin-top: 63%;
	width: 32%;
}

.css-wizard-help-image{
	float: left;
	margin-top: 40%;
	margin-left: 5%;
	width: 60%;
}

.css-wizard-help-image > img{
	width : 90%;
	max-width: 300px;
}

/*@media screen and (min-width:1500px) {
	.css-wizard-help-image > img{
		width : 80%;
	}	
	.css-wizard-help-text{
		margin-top: 5%;
	}
}*/

.title-container{
	overflow:hidden;
}

.title-container > h2{
	float: left;
	font-size: 17px;
	margin-left: 4px;
	margin-top: 12px;
}

.title-container > div#closeCSSWizard{
	font-size: 25px;
	margin-top: 8px;
	float:right;
}

.title-container > #changeSelector {
	margin-top:10px;
}

.title-container > #changeSelector  i{
	font-size:20px;
}

.title-container{
	i{
		font-size: 18px;
	}

	#showAll{
		margin-top:14px;
	}

	#minimize{
		margin-top:15px;
		margin-right:5px;
		pointer-events: none;
	}

	h2{
		display: block;
		float: left;
	}

}

.breadcrumb{
	width: 100%;
	padding: 0 15px;
	margin-top: 15px;
	font-size : 12px;
	line-height: 21px;
	a {
		color : gold;
		font-size : 12px;
		display: block;
		float: left;
		margin-right: 6px;
		&:after { display: inline-block; content: "\BB"; position: relative; right: -3px; top: 0px; }
	}
	span {
		display: block;
		float: left;
		color: #eee;
	}
}

.selectorSelector{
	border: 1px solid black;
	height: 100%;
	margin-left: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	width: 400px;
}

#propertyNameContainer{
	display:none;
}

#propertyName{
	margin: 0 5px;
}

.selectorSelector ul>li:hover,li.activeSelector{
	outline: 1px solid red;
}

.existingStyles, .addNewStyles{
	overflow: hidden;
	width: 100%;
}

.existingStyles select, .addNewStyles select{
	width : 110px;
}

.existingStyles>div, .addNewStyles>div{
	overflow: hidden;
	margin-bottom: 12px;
}

div.cssWizCol{
	float: left;
	width: 100%;
}

div.actions{
	margin-left: 50px;
	width: 105px;
}
div.actions > a{
	color : black;
	font-size: 16px;
	margin-left: 5px;
}


input.propertySelect{
	color : #000;
}

.propertiesCloud{
	overflow : hidden;
	/*overflow-y : scroll; ömer */
	/*height : 71px; ömer */
	width : 100%;
}

.propertiesCloud .property{
	background-color: #4a814a;
	color: #ffffff;
	float: left;
	font-size: 12px;
	margin: 0 6px 6px 0;
	padding: 4px 8px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.propertiesCloud .property:hover, .propertiesCloud .property.selected{
	cursor:pointer;
	background-color: rgb(111, 204, 111);
	color : rgb(255, 255, 255);
}

.propertiesCloud .property.disabled{
	background-color: rgb(79, 79, 79);
	color: rgb(129, 129, 129);
	float: left;
	font-size: 12px;
}



.propertyValueBoxContainer{
	position: absolute;
	top:0;
	left:0;
	background: transparent;
	z-index: 100;
}


.propertyValueBoxContainer .leftArrow{
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid white;
	float:left; 
}

.propertyValueBoxContainer .rightArrow{
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid white;
	float:left; 
	display: none;
}

.propertyValueBoxContainer .topArrow{
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid white; 
	clear:both;
}

.propertyValueBoxContentWrap{
	float:left;
}

.propertyValueBoxContainer {
	.propertyValueBoxContentWrap{
		.propertyValueClose{
			background: none repeat scroll 0 0 white;
		   	border-radius: 50%;
		   	color: black;
		   	font-size: 10px;
		   	padding: 3px 5px;
		   	position: absolute;
		   	right: -8px;
		   	top: 0px;
		   	width: 24px;
		   	height: 24px;
		   	z-index: 5;
		}
	}

	.propertyValueBoxContent{
		background:white;
		float:left;
	}
}

.propertyValueBoxContainer.left {
	.leftArrow{
		display: none;
	}
	.rightArrow{
		display: block;
	}
	.propertyValueClose{
		left:-8px;
		right:auto;
	}
}


.colorPickerContainer{
	float: left;
	height: 150px;
	width: 140px;
	padding: 10px 10px;
}

.colorPresets{
	border-right: 1px solid #eee;
	float: left;
	height: 130px;
	width: 66px;
	padding: 0px 10px;
	margin: 10px 0;
}

.colorPresets ul, .bgPresets ul{
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.colorPresets ul li{
	list-style: none;
	float: left;
	width: 20px;
	height: 20px;
	margin: 1px;
}

.colorPresets ul li:hover{
	cursor: pointer;
	opacity: 0.75;
}

.bgPresets{
	border-right: 1px solid #eee;
	float: left;
	height: 130px;
	width: 64px;
	padding: 0px 10px;
	margin: 10px 0;
}

.bgPresets ul, .colorPresets ul { margin-top: -1px; }

.bgPresets ul li{
	float: left;
	height: 42px;
	list-style: none outside none;
	margin: 1px;
	width: 42px;
}

.colorPickerContainer .controls{
	padding-top: 6px;
	float: left;
	width: 100%;
}

.controls input, .controls button{
	width : 56px;
	float: left;
	height: 28px;
	padding: 2px 5px;
}

.controls input[type=text] {
	border: 1px solid #ddd;
}

.controls button, .cssSelectButton{
	background-color: #eda13d;
	border: medium none;
	color: white;
}

#closeColorView {
	float: right;
}

.cssValueDefaultContainer{
	background-color: white;
	height: 40px;
	padding: 10px;
	width: 210px;

	button, input, select {
		display: block;
		float: left;
	}

	input,select {
		width : 90px;
	}

	button {
		width : 90px;
		margin-left:7px;
		height : 22px;
	}

}

.cssMarginPaddingContainer {
	height: 164px;
	width: 376px;

	input {
		width: 60px;
		height: 34px;
		text-shadow: none;
	}
}

.leftContainer {
	width: 100px;
	height: 164px;
	float: left;
	left: 0px;
	position: relative;
	input {
		left: 25px;
		top: 65px;
		position: absolute;
	}
	.input-group-btn-vertical {
		top: 63px;
		right: 15px;
	}
}
.rightContainer {
	width: 256px;
	height: 144px;
	background-color: orange;
	float: left;
	border: 3px dashed;
	border-color: #9E7200;
	position: relative;
	right: 0px;
	margin: 10px;
	.input-group-btn-vertical {
		top: -2px;
	}
}

.mpLeft {
	position: absolute;
	left: 6px;
	top: 52px;
}

.mpRight {
	position: absolute;
	right: 6px;
	top: 52px;
}

.mpTop {
	position: absolute;
	top: 6px;
	left: 95px;
}

.mpBottom {
	position: absolute;
	bottom: 6px;
	left: 95px;
}

.sampleBox {
	width: 100px;
	height: 40px;
	border: 2px solid;
	border-color: #9E7200;
	background-color: white;
	position: absolute;
	left: 75px;
	top: 49px;
}

.mpModalClose {
	position: absolute;
	width: 90px;
	bottom: 10px;
	left: 10px;
}

.cssBorderValueContainer{
	overflow:hidden;
	width:400px;

	.label{
		color : rgb(150, 150, 150);
	}
	.controls-color{
		float:left;
		overflow:hidden;
		margin-top:8px;
		input[type="text"]{
			float: left;
			margin-left: 10px;
			width: 56px;
		}
	}
	.controls{
		overflow:hidden;
		width:150px;
		padding: 5px 4px;
		.rowc{
			overflow:hidden;
			margin:15px 4px;

			.label{
				width: 40px;
			}
			.input{
				margin-left:5px;
				input[type="text"], select{
					width: 56px;
				}
			}

			button {
				width :102px;
			}
		}
	}

	.borderPreviewContainer{
		border: 1px solid rgb(135, 135, 135);
		height: 105px;
		margin-top: 18px;
		padding: 18px;
		width: 89px;
		.borderPreview{
			width : 100%;
			height : 100%;
			border : 1px solid black;
			border-radius : 5px;
		}
	}
}

/*
	Color Picker skin
*/
/* Common stuff */
.picker-wrapper,
.slide-wrapper {
position: relative;
float: left;
}
.picker-indicator,
.slide-indicator {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.picker,
.slide {
cursor: crosshair;
float: left;
}

.cp-small {
background-color: white;
float: left;
border-radius: 5px;
}
.cp-small .picker {
width: 100px;
height: 96px;
}
.cp-small .slide {
width: 15px;
height: 96px;
}
.cp-small .slide-wrapper {
margin-left: 5px;
}
.cp-small .picker-indicator {
width: 1px;
height: 1px;
border: 1px solid black;
background-color: white;
}
.cp-small .slide-indicator {
width: 100%;
height: 2px;
left: 0px;
background-color: black;
}