@import "compass/css3";

.dev-selecticon-extension{

	.clearfix{
		&:before{
			content: " ";
		    display: table;
		}

		&:after{
			content: " ";
			clear: both;
		}
	}
	
	input{
		&.filter{
			width: 100%;
			margin: 0 0 10px 0;
    		padding: 10px;
		}
	}

	.dev-list-icons-preview{
		max-height: 318px;
		overflow: auto;
		border: #CCC 5px solid;
		padding: 10px;

		ul{
			display: table;
			li{
				display: block;
			    float: left;
			    font-size: 30px;
			    cursor: pointer;
			    width: 35px;
			    height: 35px;
			    padding: 5px;
			    padding-top: 0;
			    text-align: center;
			    border: 1px solid transparent;
				
				&.active,
			    &:hover{
			    	background-color: #e5e5e5;
	    			color: #777;
	    			border-color: #D8D8D8;
			    }
			}
		}	
	}

	.dev-selecticon-details{
		li{
			background-color: #FFF;
			border: #D8D8D8 1px solid;
    		min-height: 100px;
    		padding: 10px 15px;
    		position: relative;
    		margin-bottom: 20px !important;
			
			.dev-icon-name-wrapper{
				display: table;
				width: 100%;
				margin-bottom: 20px;
				.dev-icon-name-left{
					float: left;
					width: 50%;
					.dev-icon-preview{
		    			display: inline-block;
		    			font-size: 30px;
		    			margin-right: 10px;
		    			cursor: move;
		    		}

		    		.dev-icon-name{
		    			display: inline-block;
		    			font-size: 150%;
		    			line-height: 30px;
					    vertical-align: top;
		    		}
				}

				.dev-icon-name-right{
					float: right;
					width: 50%;
					text-align: right;
					.dev-icon-enabled{
		    			display: inline-block;

		    			> label{
		    				font-size: 13px;
						    color: #00216C;
						    text-transform: uppercase;
						    font-weight: bold;
						    
							input{
								margin-left: 10px;
							}
		    			}
		    		}
				}
			}
    		.dev-icon-wrapper{
    			display: table;
    			width: 100%;


    			.dev-icon-link-url{
    				display: inline-block;
				    width: 45%;
				    margin-right: 20px;

					> label{
						display: block;
						font-size: 12px;
					    color: #999;
					    margin: 1px 0 !important;
					}
				    > input{
						width: 100%;
						vertical-align: middle;
						line-height: 23px;
				    }
	    		}

	    		.dev-icon-text-color{
	    			display: inline-block;
	    			width: 60px;
    				margin-right: 10px;

	    			> label{
						display: block;
						font-size: 12px;
					    color: #999;
					    margin: 1px 0 !important;
					}
				    > input{
						max-width: 100%;
						vertical-align: middle;
						line-height: 23px;
				    }
	    		}

	    		.dev-icon-background-color{
	    			display: inline-block;
	    			width: 60px;
    				margin-right: 10px;
	    			
	    			> label{
						display: block;
						font-size: 12px;
					    color: #999;
					    margin: 1px 0 !important;
					}
				    > input{
						max-width: 100%;
						vertical-align: middle;
						line-height: 23px;
				    }
	    		}

	    		.dev-icon-background-color-hover{
	    			display: inline-block;
	    			width: 60px;
    				margin-right: 10px;
	    			
	    			> label{
						display: block;
						font-size: 12px;
					    color: #999;
					    margin: 1px 0 !important;
					}
				    > input{
						max-width: 100%;
						vertical-align: middle;
						line-height: 23px;
				    }
	    		}

	    		.dev-icon-reset{
	    			position: absolute;
				    right: 20px;
				    bottom: 10px;
	    		}
    		}
    		
		}
	}
}