@import "mixins";

#panels{
	position: relative;
}

html {
    overflow-y: scroll; /* This fixes the tooltips */
}


#panels-dialog-tabs{
    margin-bottom: -10px
}

/* The Panel Type List */

.panel-type-list {
    margin: 0 -5px 10px -5px;
    min-height: 10px;

	.panel-type {
		.box-sizing(border-box);
	    width: 25%;
	    padding: 0 5px;
	    margin-bottom: 10px;
	    float: left;

		h3 {
		    margin: 0 0 7px 0;
		    height: 1.2em;
		    color: #333333;
		    font-size: 14px;
		}

		small{
		    font-size: 11px;
		    height: 2.5em;
		    line-height: 1.25em;
		    display: block;
		    overflow: hidden;
		}
	}

	.panel-type-wrapper {
	    padding: 8px;
		border: 1px solid #cccccc;
	    cursor: pointer;
		.gradient(#ececec, #ececec, #f8f8f8);
		.rounded(3px);
		.box-shadow(~"0 1px 1px rgba(0,0,0,0.05)");

		&:hover{
		    border-color: #C0C0C0;
		    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		}
	}
}


#panels-container {
	.grid-wrapper h4 {
		margin: 5px 1px;
	}

	.grid {
		margin-bottom: 20px;
		position: relative;
		background: #edf8fe url("images/cell-selected.png") repeat;

		.ui-resizable-handle.ui-resizable-w{
		    width: 10px;
		    left: -11px;
			cursor: move;
		    background: rgba(0,150,211, 0);

		    -webkit-transition: background 0.25s ease-in-out;
		    -moz-transition: background 0.25s ease-in-out;
		    -o-transition: background 0.25s ease-in-out;
		    transition: background 0.25s ease-in-out;
		}

		.ui-resizable-handle.ui-resizable-w:hover{
		    background: rgba(0,150,211, 0.1);
		}

		.ui-resizable-handle.ui-resizable-w{
		    background: rgba(0,150,211, 0.25);
		}

		.cell {
		    background: #e4eff4;
		    border: 1px solid #bcccd2;

		    position: absolute;
		    top: 0;

			&.cell-selected{
			    background: #d0eaf5 url("images/cell-selected.png") repeat;
			    border-color: #a5c4ce;

			    box-shadow: 0 0 4px rgba(80, 109, 118, 0.3);
			}

			&.first{
				margin-left: 0;
			}

			&.last{
				margin-right: 0;
			}

			.cell-wrapper{
				.box-sizing(border-box);
				padding: 10px 10px 4px 10px; /* 6px bottom to remove bottom margin from panels */
			}

			.cell-width{
				height: 11px;
				position: absolute;
				bottom: -13px;
				overflow: hidden;
				font-size: 9px;
				width: 100%;
			}

			.cell-width-left{
				float: left;
				height: 11px;
				width: 5px;
				background: url(images/cell-width.png) no-repeat left top;
			}

			.cell-width-right{
				float: right;
				height: 11px;
				width: 5px;
				background: url(images/cell-width.png) no-repeat left bottom;
			}

			.cell-width-line{
				background: url(images/cell-width.png) repeat-x left -11px;
				margin: 0 5px;
				height: 11px;
			}

			.cell-width-value{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				text-align: center;

				span{
					display: inline-block;
					background: #f6f6f6;
					font-size: 9px;
					color: #848484;
					padding: 0 5px;
					line-height: 1;
				}
			}
		}

	}
}

#panels-container {
	.grid-container {
	    position: relative;

		.controls{
			line-height: 1;
			margin-bottom: 2px;
			text-align: right;

			.ui-button{
				margin-left: 5px;
			}

			.grid-handle{
				cursor: move;
			}
		}
	}
}

#so-panels-panels .ui-resizable-helper{
	.box-sizing(border-box);
	background: #fff8bd;
	border: 1px solid #ecd800;
	min-height: 100px;
	position: absolute;
}


#so-panels-panels {

	.panels-container {

		.panel{
		    margin-bottom: 5px;

		    background: #f8f8f8;
		    background-image: -webkit-gradient(linear, left bottom, left top, from(#e9ebeb), to(#f8f8f8));
		    background-image: -webkit-linear-gradient(bottom, #e9ebeb, #f8f8f8);
		    background-image:    -moz-linear-gradient(bottom, #e9ebeb, #f8f8f8);
		    background-image:      -o-linear-gradient(bottom, #e9ebeb, #f8f8f8);
		    background-image: linear-gradient(to top, #e9ebeb, #f8f8f8);

		    border: 1px solid;
		    border-color: #c9c9c9 #c2c2c3 #babbbf #c1c2c3;
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    border-radius: 3px;

		    cursor: move;

		    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.08), inset 0 0 2px #FFF;
		    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.08), inset 0 0 2px #FFF;
		    box-shadow: 0 1px 1px rgba(0,0,0,0.08), inset 0 0 2px #FFF;

			.panel-wrapper{
				padding: 7px 9px;
			    overflow: hidden;
			    position: relative;
			}

			h4{
				display: inline-block;
				cursor: pointer;
			    margin: 0 0 3px 0;
			    font-weight: 600;
			    height: 1em;
			    line-height: 1em;
			    overflow: hidden;
			    margin-right: 15px;
			    color: #474747;
			    text-shadow: 0 1px 0 #FFF;
			    white-space: nowrap;

				span {
				    font-weight: normal;
				    display: inline-block;
				    color: #999;
				    text-shadow: 0 1px 0 #FFF;
				    margin-left: 12px;
				    margin-right: 5px;
				    font-style: italic;
				}
			}

			.title {
				a{
				    display: none;
				    margin-right: 3px;
				}

				.actions {
				    position: absolute;
				    top: 5px;
				    right: 7px;
				    cursor: pointer;
				    padding: 2px 2px 2px 15px;
				    z-index: 10;


				    background: #f3f3f3;
				    background-image: -webkit-gradient(linear, left bottom, left top, from(#f1f2f2), to(#f5f6f6));
				    background-image: -webkit-linear-gradient(bottom, #f1f2f2, #f5f6f6);
				    background-image:    -moz-linear-gradient(bottom, #f1f2f2, #f5f6f6);
				    background-image:      -o-linear-gradient(bottom, #f1f2f2, #f5f6f6);
				    background-image: linear-gradient(to top, #f1f2f2, #f5f6f6);

					&:hover a{
						opacity: 1;
					}

					a.delete{
						color: #FF0000;

						&:hover {
							color: white;
                            background: #FF0000;
						}
					}

				}
			}

			&:hover {
				.title a{
				    display: inline-block;
				    opacity: 0.5;
				}
			}

			&.panel-being-dragged .title .actions {
			    display: none;
			}

			small{
				display: block;
			    height: 16px;
			    overflow: hidden;
			}

			.form{
				display: none;
			}
		} /* End of .panel */

		.panel.ui-sortable-helper h4{
			cursor: move;
		}

		.ui-state-highlight{
			border: 1px solid;
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    border-radius: 3px;

		    height: 47px;

		    background: #ddebef;
		    border-color: #bcccd2;

		    margin-bottom: 5px;

		    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.7), inset 0 1px 2px rgba(0,0,0,0.06);
		    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.7), inset 0 1px 2px rgba(0,0,0,0.06);
		    box-shadow: 0 1px 0 rgba(255,255,255,0.7), inset 0 1px 2px rgba(0,0,0,0.06);

		    position: relative;
		}
	}
}


/* Acts as a placeholder for dragging */

.cell-selected .panels-container .ui-state-highlight{
    background: #c8e1ec;
    border-color: #a4c4ce;
}

/* The Dialogs */

#panels-dialog,
#grid-setting-dialog,
#grid-add-dialog,
#grid-prebuilt-dialog{
	display: none;
}

#panels-dialog .panels-text-filter{
    margin-bottom: 10px;
}

/* The Tooltips */

.panels-tooltip{
	position: absolute;
	padding: 4px 8px;
	color: white;
	background: #1c1c1c;
	background: rgba(0,0,0,0.8);

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	font-size: 11px;

    /* Higher than the admin bar */
    z-index: 999999;

	.pointer{
		position: absolute;
		width: 8px;
		height: 4px;
		bottom: -4px;
		left: 50%;
		margin-left: -4px;
		background-image: url(images/tooltip-pointer.png);
	}
}

#content-panels{
    position: relative;
    z-index: 10;
}

#so-panels-panels{
    border: 1px solid #CCC;
    position: relative;
    z-index: 9;

	h3.hndle{
	    border-bottom: 1px solid #CCC;
	    background: #eee;
	    background-image: -webkit-gradient(linear, left bottom, left top, from(#e5e5e5), to(#f4f4f4));
	    background-image: -webkit-linear-gradient(bottom, #e5e5e5, #f4f4f4);
	    background-image:    -moz-linear-gradient(bottom, #e5e5e5, #f4f4f4);
	    background-image:      -o-linear-gradient(bottom, #e5e5e5, #f4f4f4);
	    background-image: linear-gradient(to top, #e5e5e5, #f4f4f4);

	    padding: 4px 9px 4px 9px;

		button{
		    padding: 7px 8px;
		    border-color: #aaa;

		    background: #eee;
		    background-image: -webkit-gradient(linear, left bottom, left top, from(#e3e3e3), to(#fff));
		    background-image: -webkit-linear-gradient(bottom, #e3e3e3, #fff);
		    background-image:    -moz-linear-gradient(bottom, #e3e3e3, #fff);
		    background-image:      -o-linear-gradient(bottom, #e3e3e3, #fff);
		    background-image: linear-gradient(to top, #e3e3e3, #fff);
		    float: left;
		    margin-right: 2px;
			display: inline-block;
			visibility: visible;

			.box-shadow(~"0 1px 1px rgba(0,0,0,0.06)");
		}

		button:active{
			.box-shadow(none);
		}

		button.preview{
		    float: right;
		}
	}

	.inside{
	    padding: 5px 12px 5px 10px;
	}
}


#wp-content-wrap.panels-active .switch-panels{
    border-color: #CCC #CCC #f4f4f4 #CCC;
    background: #f4f4f4;
    color: #333;
    z-index: 10;
}


#panels-undo-message {
    position: fixed;
    top: 23px;
    left: 50%;

    width: 250px;
    margin-left: -125px;
    text-align: center;

    border-top: none;

	.border-radius(0, 3px, 3px, 0);

    z-index: 100;
}

#panels-home-page #post-body{
    display: none;
}

#post-body-wrapper{
    min-height: 100px;
    background: url("images/loader.gif") no-repeat center center;
}

#so-panels-panels .dialog-form a{
    outline: 0;
}

.so-gallery-widget-select-attachments{
    float:right
}

#panels-home-page #post-body-wrapper{
    margin-top: 10px;
}

/* The toggle switch */

#panels-toggle-switch {
    position: relative;
    display: inline-block;
    width: 75px;
    height: 28px;

    background: #67afd8;

	.rounded(15px);
	.box-shadow(~"inset 0 1px 2px rgba(0,0,0,0.3)");

    margin-left: 35px;
    margin-bottom: -6px;

    cursor: pointer;

    overflow: hidden;

	.handle{
	    width: 35px;
	    height: 23px;
	    position: absolute;
	    top: 3px;
	    left: 35px;
	}

	.on-text, .off-text{
	    position: absolute;
	    font-size: 11px;
	    font-weight: bold;
	    line-height: 1;
	    top: 50%;
	    margin-top: -6px;
	}

	.on-text{
	    color: #004f72;
	    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	    left: 10px;
	    opacity: 1;
	}

	.off-text{
	    color: #919191;
	    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	    right: -23px;
	    opacity: 0;
	}

	/* Now for the off state */

	&.state-off{
	    background: #e9e9e9;

		.handle{
		    left: 4px;
		}

		.on-text{
		    opacity: 0;
		    left: -21px;
		}

		.off-text{
		    opacity: 1;
		    right: 8px;
		}
	}

	&, & > * {
		.transition(0.22s);
	}

	&.state-on:hover{
	    background: #6fb7e0;
	}

	&.state-off:hover{
	    background: #eeeeee;
	}

	&.state-off.subtle-move:hover .handle {
	    left:7px;
	}

	&.state-off.subtle-move:hover .off-text {
	    opacity: 0.8;
	    right: 5px;
	}
}





/* The preview button */

#panels-home-page #post-body-content{
    position: relative;
}

#panels-home-page #post-preview{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

#grid-prebuilt-dialog {
    overflow:hidden;
}

#grid-prebuilt-dialog .chzn-results {
    height: 150px !important;
    overflow-y: auto;
}

/* The SiteOrigin link */

#siteorigin-widgets-link-wrapper {
    text-align: center;
}

#siteorigin-widgets-link{
    font-weight: bold;
    text-decoration: none;
    color: #4f6920;
    display: inline-block;
    position: relative;

    padding: 10px 15px;
    font-size: 13px;
    line-height: 16px;

	.gradient(#9ccc54, #9ccc54, #cbe385);
	.rounded(3px);
	.box-shadow(~"0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5)");

    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border: 1px solid #83a44d;
    position: relative;

    -moz-transition: background 0.5s, color 0.5s, -moz-box-shadow 0.5;
    -webkit-transition: background 0.5s, color 0.5s, -webkit-box-shadow 0.5;
    -o-transition: background 0.5s, color 0.5s, -o-box-shadow 0.5;
    transition: background 0.5s, color 0.5s, box-shadow 0.5;
}

#siteorigin-widgets-link:hover{
    color: #4a641b;

	.gradient(#a8d85f, #a8d85f, #d4ec8d);
	.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.25)");
}

#siteorigin-widgets-link:active{
    color: #476118;

	.gradient(#bbd975, #bbd975, #b3d46c);
	.box-shadow(~"0 0 1px rgba(0,0,0,0.25)");

    margin-top: 1px;
    margin-bottom: -1px;
    outline: none;
}

.panel-dialog h2.nav-tab-wrapper {
    margin-top: 0;
}

.panel-dialog h2.nav-tab-wrapper a.nav-tab{
    font-size: 11.5px;
    padding: 4px 8px;
    font-weight: bold;
    margin-right: 4px;
}

.panel-dialog h2.nav-tab-wrapper a.add-new {
    float: right;
    text-decoration: none;
}

/* Make sure the modals appear on the right layer */

.media-modal,
.appearance_page_so_panels_home_page .media-modal {
    z-index: 300010;
}

.media-modal-backdrop,
.appearance_page_so_panels_home_page .media-modal-backdrop {
    z-index: 300009;
}

#panels .message {
    background: #d0eaf5;
    border: 1px solid #a5c4ce;
    margin-bottom: 15px;
    padding: 5px 10px;

}

#panels .message p {
    margin: 0;
}

/* jQuery UI Styling */


/* jQuery UI Button */

#panels .ui-button,
#add-to-panels .ui-button,
.ui-dialog.panels-admin-dialog .ui-dialog-titlebar-close{
    display: inline-block;
    position: relative;
    margin-right: .1em;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    zoom: 1;
    overflow: visible;
    padding: 5px;

    border: 1px solid #aaa;

    margin: 0;

	.gradient(#e3e3e3, #e3e3e3, #FFFFFF);
	.rounded(2px);
	.box-shadow(~"0 1px 1px rgba(0,0,0,0.06)");

	&.ui-button-icon-only .ui-button-text{
	    display: none;
	}

	.ui-icon{
	    display: block;
	    width: 8px;
	    height: 8px;
	}

	.ui-icon.ui-icon-add{ background: url(images/icons/add.png); }
	.ui-icon.ui-icon-prebuilt{ background: url(images/icons/brush.png); }
	.ui-icon.ui-icon-columns{ background: url(images/icons/columns.png); }
	.ui-icon.ui-icon-settings{ background: url(images/icons/settings.png); }
	.ui-icon.ui-icon-move{ background: url(images/icons/move.png); }
	.ui-icon.ui-icon-remove{ background: url(images/icons/remove.png); }
	.ui-icon.ui-icon-gear{ background: url(images/icons/gear.png); }

	&:hover {
		.gradient(#F0F0F0, #F0F0F0, #FFFFFF);
	}

	&:active {
		.gradient(#FFFFFF, #FFFFFF, #FFFFFF);
	}
}


/* jQuery UI Dialog */


.ui-dialog.panels-admin-dialog{
	border: 1px solid #D0D0D0;
    background: white;
    z-index: 1001;
    padding: 0 !important;

	.rounded(3px);
	.box-shadow(~"0 0 5px rgba(0,0,0,0.3)");

	.ui-dialog-buttonpane {
	    border: none;
	    border-top: 1px solid #dddddd;
	    background: #f1f1f1;
	}

	.ui-dialog-titlebar{
	    background: #e0e0e0;
		.gradient(#ededed, #e0e0e0, #ededed);
		line-height: 1;

	    border: 1px solid #ccc;
	    border-color: #ccc #ccc #c0c0c0 #ccc;
	    padding: 10px;

		.border-radius(3px, 0, 0, 3px);

	    font-size: 13px;
	    color: #505050;
	    text-shadow: rgba(255,255,255,0.6) 0px 1px 0px;
	    font-weight: 600;

	    position: relative;
	    margin: -1px -1px 0 -1px;

		.ui-dialog-titlebar-close{
		    position: absolute;
		    top: 50%;
		    right: 8px;
		    margin-top: -10px;

			.ui-icon{
			    display: block;
			    width: 8px;
			    height: 8px;
			    background: url(images/icons/close.png);
			}
		}
	}

	.ui-dialog-content{
	    padding: 12px;
		max-height: 600px;
        overflow: auto;

		*:first-child{
		    margin-top: 0;
		}

		*:last-child{
            margin-bottom: 0;
		}

		label{
		    display: inline-block;
		    color: #333;
		}

		p:hover label{
		    color: #1c1c1c;
		}

		textarea, input.widefat{
		    margin-top: 6px;
			.box-sizing(border-box);
		}

		p{
		    margin: 15px 0 5px 0;

			&.description {
			    margin-top: 5px;
			}
		}

	}

	.ui-dialog-buttonpane{
        padding: 5px;

		.ui-button{
		    margin-right: 8px;
			.gradient(#21759b, #21759b, #2e9fd2);
			.box-shadow(~"inset 0 1px 0 rgba(120,200,230,0.6)");
		    border: 1px solid #1b607f;
		    color: #fff;
		    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
			padding: 6px 12px;
			.rounded(2px);
		}
	}

	&.panels-ajax-loading {
		.ui-dialog-buttonpane {
			background: #F1F1F1 url(./images/ajax-loader.gif) no-repeat 15px 17px;
		}
	}
}

#so-panels-recommended-plugins {
	text-align: center;

	a {
		.gradient(#3288d4, #3288d4, #43aee0);

		display: inline-block;
		padding: 12px 18px;
		color: #edffff;
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;

		.box-shadow(~"inset 0 1px 0 #69d2ee");
		border: 1px solid #2474a9;
		.rounded(2px);
		text-shadow: 0 1px 1px rgba(0,0,0,0.5);
	}

	small {
		display: block;
		font-size: 11px;
		color: #666;
		margin-top: 4px;
	}
}

#panels-row-style-select {
	position: absolute;
	display: none;
	background: #3f3f3f;
	.rounded(3px);
	min-width: 250px;
	z-index: 1000;

	ul {
		margin: 0;
		list-style: none;
		padding: 8px;

		li {
			font-weight: bold;
			font-size: 11px;
			.gradient(#fefefe, #d6d6d6, #fefefe);
			.box-shadow(~"0 1px 1px rgba(0,0,0,0.4)");
			padding: 8px;
			line-height: 1em;
			.rounded(2px);
			.transition();
			color: #474747;

			&:last-child {
				margin-bottom: 0;
			}

			text-shadow: 0 1px 0 rgba(255,255,255,0.4);
			cursor: pointer;
		}

		li:hover, li.selected {
			.gradient(#7fbadb, #5692b3, #7fbadb);
			color: #004f70;
		}
	}

	&:before {
		content: '';
		display: block;
		position: absolute;
		right: 32px;
		top: -4px;
		width: 8px;
		height: 4px;
		background: url(./images/pointer.png);
	}
}