/* This stylesheet is used to style the admin option form of the plugin. */

/* Plugin Prefix is specified in arlo-for-wordpress.php */


#adminmenu .toplevel_page_arlo-for-wordpress.current a.current .wp-menu-image {
	opacity: 1;
	filter: alpha(opacity=100);
	background: transparent url(../img/icon-20x20.png) no-repeat center;
}

.arlo-whatsnew-list {
	list-style: disc;
	margin-left: 2em;
}

.arlo-yellow {
	color: #ffd20d;
}

.arlo-gray {
	color: #ccc;
}

.arlo-blue {
	color: #0073aa;
}

.arlo-inlineblock {
	display: inline-block;
	margin: 0 0.5em;
}

.arlo-list-ellipsis {
	height: 2.4em;
	line-height: 1.2em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.arlo-error:not(.arlo-message) {
	border: 1px solid red;
}

.arlo-section {
	position: relative;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #f6f6f6;
}

.arlo-section:nth-of-type(1) {
	border-top-color: transparent;
}

.arlo-section:nth-of-type(4) {
	border-bottom-color: transparent;
}

.arlo-tooltip {
	float: right;
	margin-top: 16px;
	text-decoration: none;
}

.arlo-field-wrap, #arlo-template-select {
	margin-bottom: 1em;
}

.arlo-field-wrap.search {
	background-color: transparent;
}

.arlo-field [type='text'], .arlo-field [type='url'] {
	width: 100%;
}

.arlo-field [type='text'].arlo-inline-input {
	width: auto;
	display: inline-block;
}

.arlo-field .arlo_platform {
	display: inline-block;
	color: #aaa;
	margin-right: 6px;
}

.arlo-field .arlo_platform + input {
	width: 60%;
}

.arlo-check {
	float: left;
}

.arlo-check input {
	margin: 2px 10px 2px 0;
}

.arlo-field input[type=checkbox].arlo-check.hidden {
	display: none;
}

.arlo-check + .arlo-label {
	width: auto;
	float: left;
}

.arlo-submit input {
	float: right;
}

.js #arlo-template-select {
	display: block;
}

.js #arlo-template-select select {
	float: right;
	width: 70%;
}

.toplevel_page_arlo-for-wordpress p.webinar {
	color: #ccc;
}

.toplevel_page_arlo-for-wordpress p.webinar span {
	color: #444;
}

.toplevel_page_arlo-for-wordpress p.webinar i {
	margin: 0px 6px;
}

.toplevel_page_arlo-for-wordpress p.developer strong span {
	font-size: 1.3em;
}

.arlo-middle {
	vertical-align: middle;
}

.arlo-left {
	float: left;
}

.wp-editor-wrap {
	margin-top: 1em;
}

.arlo-domain {
	line-height: 27px;
}

#arlo_platform_name {
	width: 50%;
	float: left;
	margin: 0 5px;
}

/* regions */

#arlo-regions, 
#arlo-regions-header {
	width: 500px;
}

#arlo-regions-header,
#arlo-filters-header {
	margin-bottom: 3em;
}

#arlo-regions-header > div,
#arlo-filters-header > div {
	float: left;
	text-align: center;
	margin-left: 1em;
}

#arlo-regions li,
.arlo-filter-group li {
	clear:both;
	height: 2em;
	padding: 0.3em 0;
}

#arlo-regions li > div {
	float: left;
	margin-left: 1em;
}

.arlo-filter-group li > div {
	float: left;
	margin-right: 1em;
}

#arlo-regions li {
	cursor: move;
}

#arlo-regions .arlo-region-name,
#arlo-regions .arlo-region-controls,
.arlo-filter-group .arlo-filter-name,
.arlo-filter-group .arlo-filter-controls {
	float: right;
}

#arlo-regions .arlo-region-highlight,
.arlo-filter-group .arlo-region-highlight {
	height: 1.7em;
	border: 1px dotted #333;
}

.arlo-order-number,
.arlo-order-number {
	width: 30px;
	text-align: center;
	vertical-align: middle;
}

.arlo-region-id, .arlo-region-name {
	width: 170px;
}

.arlo-filter-old-value, .arlo-filter-new-value {
	width: 160px;
}

.arlo-region-controls,
.arlo-filter-controls {
	width: 60px;
}

.arlo-region-controls i,
.arlo-filter-controls i {
	margin-left: 0.2em;
	margin-top: 0.2em;
	display: inline-block;
	cursor: pointer;
	float: left;
}

.arlo-region-controls i.arlo-icons8-plus,
.arlo-filter-controls i.arlo-icons8-plus {
	display: none;
}

#arlo-regions li:last-of-type .arlo-region-controls i.arlo-icons8-plus,
.arlo-filter-group li:last-of-type .arlo-filter-controls i.arlo-icons8-plus {
	display: inline-block;
}

#arlo-region-empty,
#arlo-filter-empty {
	display: none;
}

.arlo-filter-new-value {
	display: none;
}

.arlo-filter-old-value select {
	width: 160px;
}

.arlo-available-filters {
	display: none;
}


/* hide the template edit select box if no javascript */
.no-js #arlo-template-select {
	display: none;
	visibility: hidden;
}

.arlo-preview {
	float: right;
}

.arlo-template-editor-wrap {
	margin-bottom: 1em;
}
/* only hide the editors if javascript is enabled */
.js .arlo_pages_section > [class^='arlo'] {
	display: none;
}


.arlo-validate.invalid {
	background-color: #FEE;
}

.arlo-validate.invalid:focus {
	border-color: #F22;
	-webkit-box-shadow: 0 0 2px rgba(255,34,34,.8);
	box-shadow: 0 0 2px rgba(255,34,34,.8);
}

.arlo-field small {
	display: none;
}

.arlo-field .invalid + small {
	display: block;
}

/* label font size and weight is based on WP 3.9 admin styles, though not using those styles directly as the label would need to be in a table header cell, urgh */
.arlo-label label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 29px;
	width: 100%;
}

.arlo_template_section label {
	visibility: hidden;
	height: 1px;
}

.arlo-codes {
	font-size: 11px;
	margin-top: 0;
}

.arlo-codes ul {
	margin-left: 15px;
}

.arlo-reload-template {
	cursor: pointer;
	display: inline-block;
	line-height: 2em;
}

.arlo-sub-template-select {
	display: inline-block;
	margin-right: 1em;
}

table.arlo-welcome td.logo {
	width: 80px;
	padding-top: 15px;
}

.arlo-template-table {
	width: 100%;
}

.arlo-template-table td {
	padding: 0.5em;
}

.arlo-template-table td:first-of-type {
	width: 190px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	padding-right: 0;
}

.arlo-new_custom .arlo-template-table td {
	vertical-align: top;
}

.arlo-block {
	display: inline-block;
}

.notice.arlo-connected-message {
	background: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
}

.arlo-connected-message .arlo-block {
	margin-left: 1em;
}

/* clearing for divs containing floated elements */

.cf:before,
.cf:after {
    content: " "; 
    display: table;
}

.cf:after,
.arlo-clear {
    clear: both;
}

/* vertical tab */
.nav-tab-wrapper.vertical-nav-tab-wrapper {
	border-bottom: 0;
	padding: 10px 0;
}

.nav-tab.vertical-nav-tab {
	float: none;
	display: block;
	border: 1px solid #ccc;
	border-right: none;	
	margin-right: 1px;
	margin-bottom: 3px;
}	

.nav-tab.vertical-nav-tab.nav-tab-active {
	border-right: 1px solid #f1f1f1;
	margin-right: -1px;
	margin-bottom: 3px;
}

.nav-tab.vertical-nav-tab.arlo-for-wordpress-pages-new_custom {
	background-color: #d2d2d2;
	margin-top: .5em;
}

.nav-tab.vertical-nav-tab.arlo-for-wordpress-pages-new_custom:hover {
	background-color: white;
}

.nav-tab.vertical-nav-tab.arlo-for-wordpress-pages-new_custom.nav-tab-active {
	background-color: #f1f1f1;
}

.nav-tab.vertical-nav-tab.arlo-for-wordpress-pages-new_custom::before,
.arlo-filter-section-toggle h2:before {
    content: '+';
    display: inline-block;
    margin-right: 5px;
}

.arlo-filter-section-toggle h2:before {
	width: 10px;
}

.filter-section-expanded .arlo-filter-section-toggle h2:before {
    content: '-';
}

.arlo-template-table .arlo-label + .arlo-field.arlo-template-field,
.arlo-template-table .arlo-template-field .arlo-label.arlo-full-width {
	width: 100%;
}

.arlo-template-table .arlo-template-field .arlo-label.arlo-full-width label {
	font-weight: normal;
}

.arlo-template-table .arlo-template-field .wp-editor-wrap {
	float: left;
	width: 68%;
}

.arlo-template-table .arlo-template-field .wp-editor-wrap .wp-editor-wrap {
	width: 100%;
}

.arlo-template-table .arlo-template-field .arlo-shortcodes {
	float: right;
	width: 28%;
}

.arlo-template-table .arlo-template-field .arlo-shortcodes h4 {
	margin-bottom: 0.5em;
}

.arlo-template-table .arlo-template-field .arlo-shortcodes .arlo-codes {
	margin-top: 2em;
}

.arlo-wrap.arlo-list .arlo_log #id{
	width: 70px;
}

.arlo-wrap.arlo-list .arlo_log #created{
	width: 150px;
}

.arlo-wrap.arlo-list .arlo_log #import_id{
	width: 150px;
}

.arlo-wrap.arlo-list .arlo_log .column-id{
	text-align: right;
}

.arlo-system-requirements-table .arlo-required-setting-icon {
	width: 24px;
	height: 24px;
}

.arlo-system-requirements-table .arlo-required-setting {
	width: 300px;
	text-align: left;
}

.arlo-system-requirements-table .arlo-required-setting-value {
	text-align: center;
	width: 80px;
}

.green {
	color: green;
}

.red {
	color: darkred;
}

.hidden {
	display: none;
}

.arlo-delete-button {
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    margin-left: 1em;	
}

#arlo-themes-for-designers a:focus,
.arlo-field a:focus {
	box-shadow: none;
}

.arlo-themes .arlo-theme {
	width: 250px;
	height: 240px;
	float: left;
	margin-right: 1em;
}

.arlo-themes .arlo-theme .arlo-theme-desc {
	border: 1px solid #ccc;
	height: 183px;
	position: relative;
	background-color: white;
	overflow: hidden;
}

.arlo-themes .arlo-theme .arlo-theme-desc a {
	text-decoration: none;
}

.arlo-themes .arlo-theme .arlo-theme-desc .arlo-theme-desc-text {
	line-height: 1em;
	font-size: 1em;
	margin-top: 5em;
}

.arlo-themes .arlo-theme .arlo-theme-desc .arlo-theme-desc-text .arlo-theme-name {
	margin-top: 0.5em;
	text-align: center;
	font-size: 2em;
	margin-bottom: 0.5em;
	color: #0085BA;
}

.arlo-themes .arlo-theme .arlo-theme-desc .arlo-theme-desc-text .arlo-theme-icon {
	width: 48px;
	margin: 0 auto;
	margin-top: -3em;
	margin-bottom: 1em;
	color: #0085BA;
}

.arlo-themes .arlo-theme .arlo-theme-desc .arlo-theme-desc-text .arlo-theme-description {
	text-align: center;
	color: #aaa;
}

.arlo-themes .arlo-theme .arlo-theme-desc img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.arlo-themes .arlo-theme .arlo-theme-desc .arlo-theme-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    text-align: center;
    line-height: 183px;
    color: white;
    background-color: white;
    font-size: 2em;
	opacity: 0;
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}

.arlo-themes .arlo-theme .arlo-theme-desc .arlo-theme-overlay .arlo-theme-desc-text {
	color: black;
	font-size: 0.5em;
}

.arlo-themes .arlo-theme .arlo-theme-desc .arlo-theme-overlay .arlo-theme-desc-text .arlo-theme-description {
	color: black;
}

.arlo-themes .arlo-theme .arlo-theme-desc .arlo-theme-desc-text .arlo-theme-for-designer {
	color:red;
	margin-top: 1em;
	text-align: center;
}

.arlo-themes .arlo-theme .arlo-theme-desc.arlo-theme-inverse .arlo-theme-overlay {
	background-color: darkgray;
}

.arlo-themes .arlo-theme .arlo-theme-desc.arlo-theme-inverse .arlo-theme-overlay .arlo-theme-desc-text .arlo-theme-description,
.arlo-themes .arlo-theme .arlo-theme-desc.arlo-theme-inverse .arlo-theme-overlay .arlo-theme-desc-text,
.arlo-themes .arlo-theme .arlo-theme-desc.arlo-theme-inverse .arlo-theme-overlay .arlo-theme-desc-text .arlo-theme-name,
.arlo-themes .arlo-theme .arlo-theme-desc.arlo-theme-inverse .arlo-theme-overlay .arlo-theme-desc-text .arlo-theme-icon  {
	color: white;
}

.arlo-themes .arlo-theme .arlo-theme-desc:hover .arlo-theme-overlay {
	opacity: 1;
}

.arlo-themes .arlo-theme .arlo-theme-desc:hover > .arlo-theme-desc-text{
	opacity: 0;
}

.arlo-themes .arlo-theme .arlo-theme-desc:hover.arlo-theme-inverse .arlo-theme-desc-text .arlo-theme-for-designer {
	color: white;
}

.arlo-themes .arlo-theme .arlo-theme-information {
	margin-top: 2px;
}

.arlo-themes .arlo-theme .arlo-theme-information .arlo-theme-name {
	font-weight: 900;
	float: left;
}

.arlo-themes .arlo-theme .arlo-themes-developer-banner {
    top: -30px;
    right: -90px;
    left: auto;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 200px;
    background: darkgray;
    position: absolute;
    text-align: center;
    line-height: 1.5em;
    padding: 42px 0 7px;
    font-weight: bold;
    color: white;
    font-size: 11px;
	text-transform: uppercase;
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
	z-index: 20;
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
	cursor: pointer;
}

.arlo-themes .arlo-theme .arlo-theme-desc.arlo-theme-inverse:hover .arlo-themes-developer-banner {
	box-shadow: none;
}

.arlo-themes .arlo-theme .arlo-theme-buttons {
	float: left;
}

.arlo-themes .arlo-theme .arlo-theme-buttons {
	display: block;
	margin-top: 0.4em;
}

.arlo-themes .arlo-theme .arlo-theme-buttons li {
	float: left;
	text-transform: uppercase;
	color: white;
	margin-right: 0.3em;
}

.arlo-themes .arlo-theme .arlo-theme-buttons li a {
	text-decoration: none;
	color: white;
	padding: 0.3em 0.5em;
	background-color: lightgray;
	display: inline-block;
	font-size: 0.95em;
}

.arlo-themes .arlo-theme .arlo-theme-buttons li a:hover {
	background-color: darkgray;
}

.arlo-themes .arlo-theme .arlo-theme-buttons li.arlo-theme-current {
	background-color: #ffd100;
	padding: 0.3em 0.5em;
	font-size: 0.95em;
}

#arlo-webinar-admin-notice {
	display: none;
}

a .arlo-icons8 {
	text-decoration: none;
}


/* filters section */

.arlo_filters_section .arlo-filter-group {
	display: none;
}

.arlo-filter-group, 
#arlo-filters-header {
	width: 570px;
}

.arlo-filter-group li > .arlo-filter-toggle {
	float: right;
}

.arlo-filter-group li > .arlo-filter-toggle,
#arlo-filters-header > div.arlo-filter-toggle {
	width: 118px;
}

.arlo-filter-group li > .arlo-filter-toggle input {
	margin: 0 auto;
	display: block;
}

a.arlo-filter-section-toggle {
    border: 1px solid #ccc;
    display: block;
    width: 300px;
    cursor: pointer;
    padding: 1em;
    margin-bottom: .5em;
    background-color: #e5e5e5;
}

a.arlo-filter-section-toggle h2 {
    margin: 0;
}

.arlo-filter-settings {
	margin-bottom: 1em;
}

.arlo-select-page {
	margin-bottom: 1em;
}

/* media queries, these match the wordpress admin breakpoints as of WP 3.9 */

@media only screen and (min-width: 601px) {

}

@media only screen and (min-width: 783px) {
	
	.arlo-label {
		float: left;
		width: 30%;
	}

	.arlo-label + .arlo-field {
		float: left;
		width: 70%;
	}
	
	.arlo-template-table .arlo-template-field .arlo-label {
		float: left;
		width: 20%;
	}

	.arlo-template-table .arlo-template-field .arlo-label + .arlo-field {
		float: left;
		width: 80%;
	}	

	.arlo-check input {
		margin: 6px 10px 6px 0;
	}
	
}

@media screen and (max-width: 782px) {
	.arlo-domain {
		line-height: 35px;
	}	
}


@media only screen and (min-width: 901px) {
	
}