﻿/* FRAMED */
body { background-color:#fff; }
#content { padding-bottom:10px;}

a img,
.command img{ margin-right:1px; vertical-align:middle; }

.toolbar
{
	position:fixed;
	_position:absolute;
	background:#fff url(../img/framed_toolbar.gif) repeat-x;
	top:0;
	left:0;
	width:100%;
	border-bottom:solid 1px #dedad7;
	height:30px;
}
	.toolbar .inner { margin: 0 10px;}
	.toolbar a,
	.toolbar .command
	{
		display:block;
		float:left;
		color:#4f5559;
	}
	.toolbar .command
	{
		height:20px;
		padding:6px 4px 2px 4px;
		
		margin:1px 0;
		overflow:hidden;
		text-decoration:none;
		font-weight:bold;
		float:left;
		overflow:hidden;
		font-size:1.2em;
	}
	.toolbar .toggled,
	.toolbar .command:hover
	{
		background-color:#f7f7f7;
		border:solid 1px #dedad7;
		padding:5px 3px 1px 3px;
	}
	.toolbar .command:active
	{
		background-color:#dedad7;
	}
 	.toolbar .plain,
	.toolbar .cancel
	{
		font-size:1em;
		font-weight:normal;
	}
.content
{
	margin:40px 20px;
	_margin-top:40px;
}


select,
input,
label
{
	vertical-align:middle;
}
.cbl input
{
	vertical-align:middle;
}
.cbl label
{
	float:none;
	font-weight:normal;
}
#toolbar
{
	z-index:77;
	white-space:nowrap;
}
#toolbar label
{
	color:#333333;
	float:none;
	clear:none;
}
ul
{
	list-style-type:disc;
	margin:0 0 0 10px;
	padding:0;
}
.formField
{
	clear:both;
	margin:5px 0;
}
.formField label
{
	vertical-align:top;
}

.info,
.validator
{
	display:block;
	background:#D6D9D8 none no-repeat 5px 50%;
	margin:10px 0;
	padding:10px;
	border:solid 1px #cecac7;
}

.info
{
	padding-left:24px;
}

/* validation */
.validator
{
	background-image:url(../img/ico/exclamation.gif);
	padding-left:24px;
}
.validator ul
{
	margin-left:20px;
}



/* GRIDVIEW */
.gv { margin-bottom:10px;}
    .gv,
    .gv tr,
    .gv th,
    .gv td { border:solid 1px #e0e0e0; border-collapse:collapse; }
    .gv th,
    .gv td { padding:2px; background:#fff none; }
    .gv th { text-align:left; background:#f7f7f7 none; }
    .gv .alt td { background:#f7f7f7 none; }
    .gv a { display:block; }




/* NAVIGATCONTEXTMENU */
#contextMenu { min-width:75px; border:solid 1px silver; background:#fff; position:absolute; top:-9999px; left:-9999px; }
    #contextMenu a { margin:1px; }
    #contextMenu a:hover { background-color:#f7f7f7; border-color:#dedad7; text-decoration:none; }
    #contextMenu .command { display:block; padding:1px; white-space:nowrap; border:solid 1px #fff; }
    #contextMenu .command img { margin-right:3px; }
    #contextMenu .separator { border-bottom:solid 1px #dedad7; margin:0 1px;}
    #contextMenu .languages { display:block; width:75px; }

/* NAVIGATIONTABLE */
.path { display:block; }
    .path a { white-space:nowrap; }
    .path .current { font-weight:bold; }

.list table { margin-top:10px; }
.gv .sort a { display:inline; }
.tb,
.btn { vertical-align:middle; }
a.title { white-space:nowrap; }




/* navigation */

.navigation form { padding:5px; }
.nav .selected { font-weight:bold; border: 1px dotted #CCC; margin:0;}

/* tree */

.tree { }
	.nav a { color:#000; text-decoration:none; padding:0 4px 0 1px; white-space: nowrap; margin:1px;}
	
	.tree li, 
	.tree ul { padding:0; margin:0; display:block; clear:both; padding-bottom:1px; }

	.tree li { background: transparent none no-repeat 0 0; list-style: none; position:relative; }
	.tree li.leaf { background-image: url(../img/treeview/leaf.gif); }
	.tree li.leaf-last { background-image: url(../img/treeview/leaf-last.gif); }
	.tree .folder-close { background-image: url(../img/treeview/expandable.gif); }
	.tree .folder-close-last { background-image: url(../img/treeview/expandable-last.gif); }
	.tree .folder-open { background-image: url(../img/treeview/collapsable.gif); }
	.tree .folder-open-last { background-image: url(../img/treeview/collapsable-last.gif); }

		.tree li li { padding-left:16px; }

	.tree .toggler { left:0; position:absolute; height:16px; width:16px; background-image:url(../img/treeview/spacer.gif); cursor:pointer; }

	.tree ul.ajax { background: url(../img/treeview/spinner.gif) no-repeat 0 0 #ffffff; height: 16px; display:none; }
		.tree ul.ajax li { display:none; }

	.droppable-hover { background-color:#eee; }



/* NEW */
.type { clear:both; }
.type a { display:block; padding:2px 0; }
.type a:hover { background-color:#f8f8f8; }
.type .title { font-weight:bold; }


.position { width:100%; }
.position blockquote { font-size:.9em; background-color:#eee; border:solid 1px #ddd; padding:5px; margin:2px 10px 10px 25px; }
.position em { font-weight:bold; color:Green; }

#nav .day { color:#393; }
#nav .week { color:#363; }
#nav .invisible{ color:#999;}
#nav .unpublished,
#nav .expired,
#nav .locked { color:#C66; }

#nav .locked { padding-right:16px; background:transparent url(../Img/Ico/bullet_key.gif) no-repeat 100% 50%; }
#nav .unpublished { padding-right:16px; background:transparent url(../Img/Ico/bullet_arrow_down.gif) no-repeat 100% 50%; }
#nav .expired { padding-right:16px; background:transparent url(../Img/Ico/bullet_arrow_top.gif) no-repeat 100% 50%; }


/* TABS */

.tabs
{
	list-style-type:none;
	padding:0;
	display:block;
	margin:10px 10px 0 10px;
	background: transparent url(../img/tabs_begin.gif) no-repeat 0% 100%;
	padding-left:5px;
	height:35px;
}


.tabs li
{
	float:left;
	display:block;
	
	background:transparent url(../img/tab_end.gif) no-repeat 100% 100%;
	margin-right:-1px;
	padding-right:5px;
	height:35px;
}
.tabs a
{
	float:left;
	display:block;
	text-decoration:none;
	color:#333;
	display:block;
	padding:10px 8px 0 8px;
	height:25px;
	-moz-outline-style:none;
	color:#444;
}


.tabs .selected
{
	border-bottom:none;
	font-weight:bold;
	background-image:url(../img/tab_selected.gif);
	z-index:1;
	position:relative;
}
.tabs .selected a
{
	background:transparent url(../img/tab_selected.gif) no-repeat 0% 100%;
	position:relative;
	left:-8px;
	padding:10px 2px 0 14px;
	color:#000;
}


.tabPanel
{
	background:#fff url(../img/tabs_base.gif) repeat-x;
	border:solid 1px #c0c3c2;
	border-top-style:none;
	padding:15px 10px;
	position:relative;
	left:-10px;
	top:-5px;
}
.tabContentHidden
{
	position:absolute;
	top:-10000px;
	left:-10000px;
}
    .tabPanel .tabPanel
    {
        margin-left:10px;
	    background-position: 0 -3px;
    }
    .tabPanel .tabs li
    {
    	height:32px;
    	background-position:100% 0;
    }
    .tabPanel .tabs li a
    {
    	padding:8px 5px 0 7px;
        background-position:0 0;
    }
    .tabPanel .tabs .selected a
    {
    	padding:8px 0 0 12px;
    }



/* command options opener */

.commandOptions
{
	height:30px;
}
.commandOptions .optionGroup a
{
	float:none;
	display:block;
	width:280px;
}
.commandOptions .opener
{
	background:transparent url(../img/framed_opener.gif) no-repeat 0% 100%;
	height:10px;
	float:left;
	display:block;
	padding:12px 8px 8px 2px;
	position:relative;
	cursor:pointer;
	cursor:hand;
}

.date { white-space:nowrap;}




/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(../img/ico/png/calendar.png) no-repeat; 
	text-decoration:none;
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
}


table.jCalendar {
    border-collapse: separate;
    border-spacing: 2px;
    margin:0 auto;
}
table.jCalendar th {
	background: #333;
	color: #fff;
	font-weight: bold;
	padding: 3px 5px;
}
table.jCalendar td {
	background: #ccc;
	color: #000;
	padding: 3px 4px;
	text-align: center;
	border:solid 1px silver;
}
table.jCalendar td.other-month {
	background: #ddd;
	color: #aaa;
}
table.jCalendar td.today {
	color:blue;
	border:solid 1px blue;
}
table.jCalendar td.selected {
	border:dotted 1px black;
	font-weight:bold;
}
table.jCalendar td.selected:hover {
}
table.jCalendar td:hover, table.jCalendar td.dp-hover {
	border:dotted 1px black;
}
table.jCalendar td.disabled, table.jCalendar td.disabled:hover {
	background: #bbb;
	color: #888;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

div.dp-popup {
	position: relative;
	background: #ccc;
	font-size: 10px;
	font-family: arial, sans-serif;
	padding: 2px;
	width: 182px;
	line-height: 1.2em;
	text-align:center;
}
div#dp-popup {
	position: absolute;
	z-index: 199;
}
div.dp-popup h2 {
	font-size: 12px;
	text-align: center;
	margin: 4px 0;
	padding: 0;
}
a#dp-close {
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	display: block;
}
a#dp-close:hover {
	text-decoration: underline;
}
div.dp-popup a {
	color: #000;
	text-decoration: none;
	padding: 3px 2px 0;
}
div.dp-popup div.dp-nav-prev {
	position: absolute;
	top: 2px;
	left: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-prev a {
	float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
	cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
	cursor: default;
}
div.dp-popup div.dp-nav-next {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-next a {
	float: right;
}
div.dp-popup a.disabled {
	cursor: default;
	color: #aaa;
}
div.dp-popup td {
	cursor: pointer;
	font-size: 10px;
}
div.dp-popup td.disabled {
	cursor: default;
}

div.dp-popup .dp-nav-prev a,
div.dp-popup .dp-nav-next a
{
    font-family:Courier;
    vertical-align:middle;
    padding:2px 1px;
}
div.dp-popup .dp-nav-prev .dp-nav-prev-month,
div.dp-popup .dp-nav-next .dp-nav-next-month 
{
    font-weight:bold;
    font-size:15px;
    padding:3px 6px;
}

.datePicker { width:75px; }
.timePicker { width:75px; }