﻿
/*

<div class="page-management-header"></div>
<div class="page-management">
	<a class="internal-link add-content-fragment selected"><span></span>Add a Widget</a>
	<a class="internal-link change-layout"><span></span>Change page layout</a>
	<a class="internal-link import-export-page"><span></span>Import/export</a>
	<a class="internal-link revert-page"><span></span>Revert to Default</a>
	<a class="internal-link view-previous-content-fragments"><span></span>Previous</a>
	<a class="internal-link view-next-content-fragments"><span></span>Next</a>
	<a class="internal-link view-previous-layouts disabled"><span></span>Previous</a>
	<a class="internal-link view-next-layouts disabled"><span></span>Next</a>
	<div class="content-fragment-search"><input type="text" /><a href="#" class="internal-link clear-content-fragment-search"><span></span>Clear</a></div>
	<div class="content-fragment-list-header"></div>
	<div class="content-fragment-list">
		<div class="content-fragment-type">...</div>
	</div>
	<div class="content-fragment-list-footer"></div>
	<div class="layout-list-header"></div>
	<div class="layout-list">
		<div class="layout selected"><a><img src="..." /></a></div>
		<div class="layout"><a><img src="..." /></a></div>
	</div>
	<div class="layout-list-footer"></div>
	<div class="loading-message">Loading...</div>
</div>
<div class="page-management-footer"></div>

*/

.page-management-header
{
}

.page-management
{
	text-align: left;
	font-family: Arial, Helvetica !important;
	font-size: 12px !important;
	position: relative;
	border-top: solid 2px #aaa; 
	background-color: #ccc; 
	padding: 8px; 
	height: 135px;
	min-width: 720px;
}

.page-management-footer
{
}

.page-management .loading-message
{
	font-weight: bold;
	font-size: 17px !important;
	text-align: center;
	position: absolute;
	left: 0;
	width: 100%;
	top: 75px;
	color: #666;
}

.page-management .internal-link
{
	z-index: 2;
}

.page-management .internal-link.add-content-fragment
{
	background-image: url('../images/layout/add-widget.gif');
	background-position: 4px center;
	background-repeat: no-repeat;
	font-weight: bold;
	padding: 0 8px 0 24px;
	text-decoration: none;
	border-right: solid 1px #667379;
	position: relative;
	z-index: 2;
}

.page-management .internal-link.change-layout
{
	background-image: url('../images/layout/change-layout.gif');
	background-position: 8px center;
	background-repeat: no-repeat;
	font-weight: bold;
	padding: 0 4px 0 28px;
	text-decoration: none;
	position: relative;
	z-index: 2;
}

.page-management .internal-link.selected:link, .page-management .internal-link.selected:active, .page-management .internal-link.selected:visited
{
	color: #333;
	text-decoration: none;
	background-color: Transparent;
}

.page-management .internal-link.import-export-page
{
	background-image: url('../images/layout/revert.gif');
	background-position: left center;
	background-repeat: no-repeat;
	position: absolute;
	padding: 0 8px 0 20px;
	right: 132px;
	top: 5px;
	font-weight: bold;
	margin: 4px;
	text-decoration: none;
	z-index: 2;
	border-right: solid 1px #667379;
}


.page-management .internal-link.revert-page
{
	background-image: url('../images/layout/revert.gif');
	background-position: left center;
	background-repeat: no-repeat;
	position: absolute;
	padding: 0 0 0 20px;
	right: 10px;
	top: 5px;
	font-weight: bold;
	margin: 4px;
	text-decoration: none;
	z-index: 2;
}

.page-management .content-fragment-search
{
	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 1;
}

.page-management .content-fragment-search input
{
	width: 210px;
	padding: 4px 40px 4px 10px;
	height: 16px;
	font-size: 11px !important;
	background-image: url('../images/layout/search.gif');
	background-position: top left;
	border-width: 0;
	background-color: Transparent;
}

.page-management .clear-content-fragment-search
{
	background-image: url('../images/layout/clear-search.gif');
	background-position: left center;
	background-repeat: no-repeat;
	padding: 0 0 0 20px;
	margin: -3px 0 0 10px;
	font-weight: bold;
	text-decoration: none;
	position: relative;
}

.page-management .content-fragment-list-header
{
}

.page-management .content-fragment-list
{
	height: 95px;
	position: absolute;
	top: 40px;
	left: 5%;
	width: 90%;
}

.page-management .content-fragment-list-footer
{
	clear: both;
}

.page-management .content-fragment-type
{
	background-color: #FDFEFE;
	background-image: url('../images/layout/content-fragment-type-background.gif');
	background-position: left bottom;
	background-repeat: repeat-x;
	width: 22%;
	float: left;
	padding: 5px 1%;
	margin: 3px;
	border: solid 1px #92AEBD;
	cursor: move;
	color: #666;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	font-size: 11px !important;
}

.page-management .internal-link.view-previous-content-fragments
{
	background-image: url('../images/layout/left.gif');
	background-position: top left;
	background-repeat: no-repeat;
	width: 11px;
	padding: 20px 0 0 0;
	height: 0px;
	position: absolute;
	left: 15px;
	top: 75px;
	overflow: hidden;
}

.page-management .internal-link.view-previous-content-fragments.disabled
{
	background-image: url('../images/layout/left-disabled.gif');
}

.page-management .internal-link.view-next-content-fragments
{
	background-image: url('../images/layout/right.gif');
	background-position: top left;
	background-repeat: no-repeat;
	width: 11px;
	padding: 20px 0 0 0;
	height: 0px;
	position: absolute;
	right: 15px;
	top: 75px;
	overflow: hidden;
}

.page-management .internal-link.view-next-content-fragments.disabled
{
	background-image: url('../images/layout/right-disabled.gif');
}

.page-management .layout-list-header
{
}

.page-management .layout-list
{
	height: 95px;
	position: absolute;
	top: 40px;
	left: 5%;
	width: 90%;
}

.page-management .layout-list-footer
{
	clear: both;
}

.page-management .internal-link.view-previous-layouts
{
	background-image: url('../images/layout/left.gif');
	background-position: top left;
	background-repeat: no-repeat;
	width: 11px;
	padding: 20px 0 0 0;
	height: 0px;
	position: absolute;
	left: 15px;
	top: 75px;
	overflow: hidden;
}

.page-management .internal-link.view-previous-layouts.disabled
{
	background-image: url('../images/layout/left-disabled.gif');
}

.page-management .internal-link.view-next-layouts
{
	background-image: url('../images/layout/right.gif');
	background-position: top left;
	background-repeat: no-repeat;
	width: 11px;
	padding: 20px 0 0 0;
	height: 0px;
	position: absolute;
	right: 15px;
	top: 75px;
	overflow: hidden;
}

.page-management .internal-link.view-next-layouts.disabled
{
	background-image: url('../images/layout/right-disabled.gif');
}

.page-management .layout
{
	float: left;
	width: 11%;
	height: 95px;
	padding: 0;
	margin: 0 .25%;
	padding: 0 4px;
	overflow: hidden;
	text-align: center;
	background-color: #ccc;
}

.page-management .layout img
{
	height: 90px;
	max-width: 100%;
	border: solid 1px #999;
	margin: 1px;
}

.page-management .layout-list .layout.selected img
{
	border: solid 2px #0F64E3;
	margin: 0;
}


/* content-fragment-management */
/*

<div class="content-fragment-management">
	<div class="content-fragment-management-header">
		<a class="internal-link delete-content-fragment">Delete</a>
		<a class="internal-link configure-content-fragment">Configure</a>
		Widget Title
	</div>
	<div class="content-fragment-management-content">
		...
		<div class="content-fragment-management-shade"></div>
	</div>
</div>

*/

.content-fragment-management 
{ 
	display: block; 
	margin: 10px 5px 5px 5px;
}

.content-fragment-management.locked
{
}

.content-fragment-management .content-fragment-management-content
{
	overflow: hidden;
	position: relative;
	height: 1%;  /* for IE6 */
	width: 100%;
}

.content-fragment-management .content-fragment-management-content .content-fragment
{
	margin: 0 !important;
}

.content-fragment-management-shade
{
	background-image: url('../images/spacer.gif');
	position: absolute;
	top: 0;
	left: 0;
	width: 2000px;
	height: 20000px;
	z-index: 1000;
}

.content-fragment-management-header
{
	background: Transparent url('../images/layout/content-fragment-header.gif') no-repeat left top;
	font-weight: bold;
	font-size: 12px !important;
	color: #333;
	cursor: move;
	font-family: Arial, Helvetica;
	margin: 0 18px 0 12px;
	padding: 0 0 0 6px;
}

.content-fragment-management-header-inner
{
	background: Transparent url('../images/layout/content-fragment-header.gif') no-repeat right top;
	padding: 8px 10px 8px 4px;
	height: 14px;
	overflow: hidden;
	margin-right: -6px;
}

.content-fragment-management-fragment-name
{
	white-space: nowrap;
	overflow: hidden;
	padding-right: 80px;
}

.content-fragment-management.locked .content-fragment-management-header
{
	cursor: auto;
	color: #999;
}

.content-fragment-management-header a
{
	float: right;
	font-size: 12px;
	font-weight: normal;
}

.content-fragment-management .internal-link.configure-content-fragment
{
	width: 12px;
	height: 0;
	padding: 12px 0 0 0;
	overflow: hidden;
	margin: 0 4px;
	background-image: url('../images/layout/configure-content-fragment.gif');
	background-position: left top;
	background-repeat: no-repeat;
}

.content-fragment-management .menu-button.content-fragment-wrapper-format-button
{
	width: 12px;
	height: 0;
	padding: 12px 0 0 0;
	overflow: hidden;
	margin: 0 4px;
	background-image: url('../images/layout/toggle-content-fragment-header.gif');
	background-position: left top;
	background-repeat: no-repeat;
}

.content-fragment-management .internal-link.delete-content-fragment
{
	width: 12px;
	height: 0;
	padding: 12px 0 0 0;
	overflow: hidden;
	margin: 0 4px;
	background-image: url('../images/layout/delete-content-fragment.gif');
	background-position: left top;
	background-repeat: no-repeat;
}

.content-fragment-management.placeholder 
{ 
	display: block; 
	border: dashed 1px #333;
	margin: 5px;
	background-color: #ccc;
	height: 1em;
	padding: 7px 4px;
}

.menu.content-fragment-wrapper-format-content
{
	background-color: #ddd;
	border: solid 1px #666;
	color: #333;
	padding: 0;
	margin: 0;
	font-size: 10px;
}

.menu.content-fragment-wrapper-format-content .menu-item { padding: 5px; cursor: pointer; }
.menu.content-fragment-wrapper-format-content .menu-item.selected { background-color: #333; color: #eee; }

/* Layouts */

.layout-content  { height: 1%; text-align:left; overflow:hidden; }

.layout-content .layout-region-inner { min-height: 700px; }

.layout-content.content .layout-region.content { width: 100%; float: left; }

/* 2 column layout (Blogs, etc) */
.layout-content.content-left-sidebar-right .layout-region.content { width:665px; height: 1%; overflow: hidden; padding:0 10px;}
.layout-content.content-left-sidebar-right .layout-region.right-sidebar { width: 296px; float: right;display:none;visibility:hidden; padding:0 10px 0 0; background:url(../../generic/images/tvn/sidebg.jpg) 0 0 repeat-y; margin-bottom:-2000px;padding-bottom:2000px;}

.layout-content.sidebar-left-content-right .layout-region.left-sidebar { width: 270px; float: left; }
.layout-content.sidebar-left-content-right .layout-region.content { height: 1%; overflow: hidden; }

/* 3 column layout */
.layout-content.sidebar-left-content-center-sidebar-right .layout-region.left-sidebar { width: 229px; float: left;border-right:1px solid #ddd; margin-bottom:-2000px;padding-bottom:2000px; }
.layout-content.sidebar-left-content-center-sidebar-right .layout-region.content { height: 1%; overflow: hidden; }
.layout-content.sidebar-left-content-center-sidebar-right .layout-region.right-sidebar { width: 279px; float: right; background:url(../../generic/images/tvn/sidebg.jpg) 0 0 repeat-y; margin-bottom:-2000px;padding-bottom:2000px; }

.layout-content.content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.content { height: 1%; overflow: hidden; }
.layout-content.content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.split-sidebar-left { width: 270px; float: right; }
.layout-content.content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.split-sidebar-right { width: 270px; float: right; }
.layout-content.content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.right-sidebar { width: 540px; float: right; clear: right; }

.layout-content.header-top-content-left-sidebar-right .layout-region.header { width: 100%; }
.layout-content.header-top-content-left-sidebar-right .layout-region.content { height: 1%; overflow: hidden; width: auto; }
.layout-content.header-top-content-left-sidebar-right .layout-region.right-sidebar { width: 270px; float: right; clear: both; }

.layout-content.header-top-sidebar-left-content-right .layout-region.header { width: 100%; }
.layout-content.header-top-sidebar-left-content-right .layout-region.left-sidebar { width: 270px; float: left; clear: both; }
.layout-content.header-top-sidebar-left-content-right .layout-region.content { height: 1%; overflow: hidden; }

.layout-content.header-top-sidebar-left-content-center-sidebar-right .layout-region.header { width: 100%; }
.layout-content.header-top-sidebar-left-content-center-sidebar-right .layout-region.left-sidebar { width: 270px; float: left; clear: both; }
.layout-content.header-top-sidebar-left-content-center-sidebar-right .layout-region.content { height: 1%; overflow: hidden; }
.layout-content.header-top-sidebar-left-content-center-sidebar-right .layout-region.right-sidebar { width: 270px; float: right; }

.layout-content.header-top-content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.header { width: 100%; }
.layout-content.header-top-content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.content { height: 1%; overflow: hidden; }
.layout-content.header-top-content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.split-sidebar-left { width: 270px; float: right; }
.layout-content.header-top-content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.split-sidebar-right { width: 270px; float: right; clear: both; }
.layout-content.header-top-content-left-split-sidebar-right-top-single-sidebar-right-bottom .layout-region.right-sidebar { width: 540px; float: right; clear: right; }

.layout-content.split-content .layout-region.content { width: 49.99%; float: left; }
.layout-content.split-content .layout-region.right-sidebar { width: 49.99%; float: right; }

.layout-content.header-top-split-content .layout-region.header { width: 100%; }
.layout-content.header-top-split-content .layout-region.content { width: 49.99%; float: left; }
.layout-content.header-top-split-content .layout-region.right-sidebar { width: 49.99%; float: right; clear: both; }

.layout.active .layout-region.header { padding-top: 10px; }
.layout-content .layout-region .layout-region-inner { width: 100%; overflow: hidden; }

/* Tab Styles */

.page-tabs.active { background: #ccc url('../images/layout/page-tabs-background.gif') repeat-x left bottom; }

.tab.placeholder { border-color: #333; background-color: #999; border-style: dashed; width: 40px; height: 1.25em; padding: 5px; }

.tab .internal-link.edit-tab 
{
	display: inline-table;
	display: -moz-inline-box;
	display: inline-block;
	width: 9px;
	height: 0;
	padding: 9px 0 0 0;
	overflow: hidden;
	margin: 2px 2px 2px 6px;
	position: relative;
	top: 3px;
	background-image: url('../images/layout/tab-icons.gif');
	background-position: left top;
	background-repeat: no-repeat;
}

.tab .internal-link.edit-tab:hover
{
	background-position: left -9px;
}

.tab .internal-link.delete-tab 
{
	display: inline-table;
	display: -moz-inline-box;
	display: inline-block;
	width: 9px;
	height: 0;
	padding: 9px 0 0 0;
	overflow: hidden;
	margin: 2px 2px 2px 4px;
	position: relative;
	top: 3px;
	background-image: url('../images/layout/tab-icons.gif');
	background-position: left -18px;
	background-repeat: no-repeat;
}

.tab .internal-link.delete-tab:hover
{
	background-position: left -27px;
}

/* TODO: The modal styles should be removed */
/* Modal Styles */

.modal-mask
{
	opacity: .85;
	filter: alpha(opacity=85);
	background: #000;
}

.modal
{
	background-color: #fff;
	border: solid 6px #333;
}

.modal-title
{
	border-bottom: solid 1px #333;
	padding: 8px 0 2px 0;
	font-size: 150%;
	margin: 0 8px;
	font-weight: bold;
	color: #333;
	cursor: move;
	min-height: 24px;
}

.modal-content
{
	background-color: #fff;
}

.modal-footer
{
	width: 100%;
	height: 12px;
}

.modal-close
{
	width: 16px;
	height: 15px;
	background-image: url(../images/common/close.gif);
	background-repeat: no-repeat;
	overflow: hidden;
	cursor: pointer;
	position: absolute;
	right: 8px;
	top: 8px;
	margin: 0;
}

.modal-resize
{
	width: 12px;
	height: 12px;
	background-image: url(../images/common/resize.gif);
	background-repeat: no-repeat;
	overflow: hidden;
	position: absolute;
	right: 6px;
	bottom: 6px;
	cursor: se-resize;
}