@import url("plugin.css");

/* page */

div#tree {
	background-color: #EFF4F5;
	border-right: 1px solid #0069AA;
	float: left;
	position: relative;
}

	input#frmPageSearch {
		margin: 20px;
		width: 157px;
	}

	div#pageLang {
		margin: 20px 20px 0;
		width: 157px;
	}

	ul#wrapperSortablePages {
		padding: 10px;
		font-size: 10px;
		font-weight: bold;
		position: relative;
	}

		ul#wrapperSortablePages span.caption {
			display: block;
			height: 16px;
			padding-right: 83px;
			position: relative;
		}

		ul#wrapperSortablePages span.caption:hover {
			background-color: #C3D4E9;
		}

			ul#wrapperSortablePages span.caption span.title {
				cursor: pointer;
				display: block;
				line-height: 16px;
				left: 42px;
				position: relative;
				top: -32px;
				white-space: nowrap;
			}

			ul#wrapperSortablePages span.caption span.control {
				cursor: pointer;
				display: block;
				height: 16px;
				width: 16px;
			}

				ul#wrapperSortablePages span.caption span.control.fake {
					cursor: default;
					display: block;
					height: 16px;
					width: 16px;
				}

				ul#wrapperSortablePages span.caption span.control.expanded {
					background: transparent url(../../../../../../library/silk_icons_1.3/bullet_arrow_down.png) center no-repeat;
					left: 0;
					position: relative;
					top: 0;
				}

				ul#wrapperSortablePages span.caption span.control.collapsed {
					background: transparent url(../../../../../../library/silk_icons_1.3/bullet_arrow_right.png) center no-repeat;
					left: 0;
					position: relative;
					top: 0;
				}

				ul#wrapperSortablePages span.caption span.control.fakecollapsed {
					background: transparent url(../../../../../../library/silk_icons_1.3/bullet_arrow_right.png) center no-repeat;
					cursor: default;
					left: 0;
					position: relative;
					top: 0;
				}

				ul#wrapperSortablePages span.caption span.control.handle {
					background: transparent url(../../../../../../library/silk_icons_1.3/page.png) center no-repeat;
					cursor: move;
					left: 21px;
					position: relative;
					top: -16px;
				}

				ul#wrapperSortablePages span.caption span.control.fakehandle {
					background: transparent url(../../../../../../library/silk_icons_1.3/page.png) center no-repeat;
					cursor: default;
					left: 21px;
					position: relative;
					top: -16px;
				}

				ul#wrapperSortablePages span.caption span.control.add {
					background: transparent url(../../../../../../library/silk_icons_1.3/add.png) center no-repeat;
					position: absolute;
					right: 21px;
					top: 0;
					visibility: hidden;
				}

				ul#wrapperSortablePages span.caption span.control.delete {
					background: transparent url(../../../../../../library/silk_icons_1.3/delete.png) center no-repeat;
					position: absolute;
					right: 0;
					top: 0;
					visibility: hidden;
				}

				ul#wrapperSortablePages span.caption:hover span.control.delete, ul#wrapperSortablePages span.caption:hover span.control.add {
					visibility: visible;
				}

		ul#wrapperSortablePages li.collapsed {
			padding-bottom: 10px;
		}

		ul#wrapperSortablePages .children {
			margin-left: 20px;
			padding-top: 10px;
			position: relative;
		}

			ul#wrapperSortablePages .children.hover {
				background-color: #fff;
				border-top: 1px dashed #999;
				border-bottom: 1px dashed #999;
			}

		ul#wrapperSortablePages .children.collapsed {
			display: none;
		}

		ul#wrapperSortablePages .children.expanded {
			display: block;
		}


div#pageTitle {
    color: #0069AA;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    max-width: 450px;
    width: 100%;
}

	div#pageTitle span.preview {
	    color: #444;
	    font-size: 12px;
		font-weight: normal;
	}

div.sortableContent {
	margin-top: 10px;
    position: relative;
}

    div.sortableContent div.content {
    	background-color: #C3D4E9;
    	clear: both;
	    font-size: 10px;
	    line-height: 1.5em;
	    margin-bottom: 10px;
    	padding: 10px 0;
    	position: relative;
    	width: 450px;
    }

    	div.sortableContent div.content div.caption {
			height: 16px;
    		margin: 0 10px 10px;
    	}

    		div.sortableContent div.content div.caption div.title {
				color: #0069AA;
    			cursor: pointer;
				display: inline;
				font-size: 12px;
				font-weight: bold;
				height: 16px;
    			line-height: 16px;
				padding-right: 21px;
    			vertical-align: middle;
    		}

	    		div.sortableContent div.content div.caption div.title:hover {
					background: transparent url(../../../../../../library/silk_icons_1.3/page_edit.png) center right no-repeat;
				}

    		div.sortableContent div.caption div.control {
    			cursor: pointer;
    			height: 16px;
    			vertical-align: middle;
    			width: 16px;
    		}

    			div.sortableContent div.caption div.control.delete {
    				background: transparent url(../../../../../../library/silk_icons_1.3/delete.png) no-repeat;
    				float: right;
					margin-left: 5px;
    				visibility: hidden;
    			}

    			div.sortableContent div.caption div.control.handle {
    				background: transparent url(../../../../../../library/silk_icons_1.3/arrow_ns.png) no-repeat;
    				cursor: move;
    				float: right;
    				visibility: hidden;
    			}

    			div.sortableContent div.content:hover div.control.delete, div.sortableContent div.content:hover div.control.handle {
    				visibility: visible;
    			}

    	div.sortableContent div.content div.options {
    		margin: 0 10px;
			text-align: right;
    	}

    	div.sortableContent div.content div.col {
    		background-color: #fff;
    		border: 1px solid #999;
			font-weight: bold;
    		margin: 0 10px 10px;
    		padding: 10px;
    	}

    	div.sortableContent div.content div.col.data {
			cursor: pointer;
    	}

	    	div.sortableContent div.content div.col.data:hover {
				background: #5C94C7;
				border-color: #fff;
				color: #fff;
	    	}

		    	div.sortableContent div.content div.col.data:hover div.title {
					background: transparent url(../../../../../../library/silk_icons_1.3/page_edit.png) top right no-repeat;
		    	}

    	div.sortableContent div.content.cols1 div.col {
    		width: 408px;
    	}

    	div.sortableContent div.content.cols2 div.col {
			float: left;
			width: 182px;
		}

	div#sortableHeaders {
		margin-top: 15px;
		overflow: hidden;
	}

	div#sortableHeaders div.file {
		float: left;
		margin-bottom: 15px;
		margin-right: 15px;
		width: 130px;
	}

		div#sortableHeaders div.file div.caption {
			background: transparent;
			color: #0069AA;
			font-size: 11px;
		}

		div#sortableHeaders div.file div.thumbnail {
			background: #fff center no-repeat;
			border: 1px solid #999;
			cursor: pointer;
			height: 90px;
			margin-bottom: 5px;
			padding: 4px;
			position: relative;
			width: 120px;
		}

			div#sortableHeaders div.file div.thumbnail div.hover {
				background: #000;
				display: none;
				filter:alpha(opacity=70);
				height: 90px;
				opacity: .70;
				position: relative;
				width: 120px;
			}

				div#sortableHeaders div.file div.thumbnail:hover div.hover {
					display: block;
				}

			div#sortableHeaders div.file div.thumbnail div.control {
				cursor: pointer;
				display: none;
				height: 16px;
				position: absolute;
				vertical-align: middle;
				width: 16px;
			}

				div#sortableHeaders div.file div.thumbnail div.control.handle {
					background: transparent url(../../../../../../library/silk_icons_1.3/arrow_nsew.png) no-repeat;
					right: 10px;
					top: 31px;
				}

					div#sortableHeaders div.file div.thumbnail:hover div.control.handle {
						display: block;
					}

				div#sortableHeaders div.file div.thumbnail div.control.delete {
					background: transparent url(../../../../../../library/silk_icons_1.3/delete.png) no-repeat;
					right: 10px;
					top: 10px;
				}

					div#sortableHeaders div.file div.thumbnail:hover div.control.delete {
						display: block;
					}

	form#frmPage p, form#frmPageRoles p {
		margin-bottom: 10px;
	}

	form#frmPage p.button, form#frmPageRoles p.button {
		margin-top: 15px;
		text-align: right;
	}

	form#frmPage input.frm_input, form#frmPage textarea.frm_input {
		width: 440px;
	}


	.sortable-tree{
		display: block;
		font-size: 10px;
		font-weight: bold;
		position: relative;
		list-style: none;
		margin: 0;
		overflow: auto;
	}

	.list-item{
		display: block;
		font-weight: bold;
		font-size: 10px;
		min-height: 16px;
		position: relative;
		list-style: none;
	}

	.list-item .control{
		display: block;
		height: 16px;
		position: absolute;
		width: 16px;
	}

	.list-item .control:hover{
		cursor: pointer;
	}

	.list-item .handle{
		background: url('../../../../../../library/silk_icons_1.3/page.png') no-repeat left center;
		left: 0;
		margin-left: 16px;
		top: 0;
	}

	.list-item .handle:hover{
		cursor: move;
	}

	.list-item .item-title{
		display: block;
		height: 16px;
		margin: 10px 5px 10px 0;
		padding: 0 38px;
	}

	.list-item .page-link{
		display: inline-block;
		height: 16px;
		line-height: 16px;
		max-width: 160px;
		white-space: nowrap;
		overflow: hidden;
	}

	.list-item .page-link:hover{
		cursor: pointer;
	}

	.list-item .item-title:hover{
		background: #C3D4E9;
	}

	.list-item > .toggleSub:first-of-type{
		background: url(../../../../../../library/silk_icons_1.3/bullet_arrow_down.png) no-repeat left center;
		background-color: transparent;
		border: 0;
		left: 0;
		top: 0;
	}

	.list-item.folded > .toggleSub:first-of-type{
		background: url(../../../../../../library/silk_icons_1.3/bullet_arrow_right.png) no-repeat left center;
	}

	.list-item.no-child > .toggleSub{
		display:none;
	}

	.list-item.childs > .toggleSub,
	.list-item.expanded > .toggleSub{
		display:block;
	}

	.list-item > .toggleSub:hover{
		cursor: pointer;
	}

	.list-item.folded > ul{
		display:none;
	}

	.list-item.expanded > ul{
		display:block;
	}

	.item-title:hover > .add,
	.item-title:hover > .delete{
		display: block;
	}

	.list-item .add {
		background: transparent url(../../../../../../library/silk_icons_1.3/add.png) center no-repeat;
		position: absolute;
		right: 24px;
		top: 0;
		display: none;
	}

	.list-item .delete {
		background: transparent url(../../../../../../library/silk_icons_1.3/delete.png) center no-repeat;
		position: absolute;
		right: 5px;
		top: 0;
		display: none;
	}

	.list-item.ui-sortable-helper{
		background: rgba(195, 212, 233, 0.6);
		display: block;
		width: 180px;
	}
	.list-item.ui-sortable-helper .item-title{
		margin: 0;
	}

	.list-item.ui-sortable-helper .list-item .item-title{
		margin: 10px 5px 10px 0;
	}

	.list-item.root-item > .toggleSub{
		display: none;
	}

	.sortable ul{
		padding-left: 18px;
	}

	 .placeholder{
	 	background-color: #fff;
        border: 1px dashed #999;
        display: block;
        min-height: 16px;
        margin-left: 16px;
        position: relative;
    }


.google-preview{
	background-color: white;
	padding: 7px;
	border: solid 1px rgba(0,0,0,0.13);
	border-radius: 3px;
	margin-bottom: 10px;
	position: relative;
}
.gmeta-title{
	border: 0;
	padding: 0;
	width: 98.2%;
	font-size: 14px;
	font-family: Arial;
	color: #1a0dab;
	transition: all 0.2s;
	outline: 0 solid #dbdbdb;
	padding-left: 8px;
	margin-top: 7px;
}
.gmeta-title:focus{
	outline: 1px solid #dbdbdb;
	padding-top: 6px;
	padding-bottom: 6px;
}
.glimit-title{
	transition: all 0.2s;
	display: block;
	height: 2px;
}
.gmeta-title:focus ~ .glimit-title{
	width: 100%;
	background-color: green;
	outline: 1px solid green;
	display: block;
	visibility: visible;
	margin-bottom: 5px;
}

.gmeta-url{
	font-size: 13px;
	font-family: Arial;
	color: #006621;
	padding-left: 8px;
	padding-top: 2px;
	display: block;
}
.gmeta-desc{
	border: 0;
	padding: 0;
	width: 98.2%;
	font-size: 12px;
	font-family: Arial;
	color: #545454;
	resize: vertical;
	transition: all 0.2s;
	outline: 0 solid #dbdbdb;
	padding-left: 8px;
	padding-bottom: 5px;
}
.gmeta-desc:focus{
	outline: 1px solid #dbdbdb;
	padding-top: 8px;
	margin-top: 5px;
}
.glimit-desc{
	transition: all 0.2s;
	height: 2px;
	display: block;
}
.gmeta-desc:focus ~ .glimit-desc{
	width: 100%;
	background-color: green;
	outline: 1px solid green;
	display: block;
	visibility: visible;
}

.help-button{
	background-color: #0069aa;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 10px;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 10px;
}


/* The Modal (background) */
.modal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
 background-color: #EFF4F5;
 margin: 15% auto; /* 15% from the top and centered */
 padding: 20px;
 border: 1px solid #0069AA;
 max-width: 620px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
 color: #0069aa;
 float: right;
 font-size: 22px;
 font-weight: bold;
}

.close:hover,
.close:focus {
 text-decoration: none;
 cursor: pointer;
}

.help-video{
	border: 1px solid #0069AA;
}

.placeholder-grey{
	opacity: 0.4;
}

#frmPageMetaDescription{
	vertical-align: top;
	margin: 0;
}