@charset "UTF-8";

/*********************** general ***********************/

* { margin: 0px; padding: 0px; }
p { margin-top: 1em; line-height: 1.5em; }
p:first-child { margin-top: 0px; }
a img { border: none; }

a { color: #444; }
a:hover { text-decoration: none; color: #666; }

a.iconed { text-decoration: none; }
.iconed > span { vertical-align: middle; }
.iconed > span.icon { margin-right: 5px; vertical-align: -6px; }
.iconed.right > span.icon { margin-right: 0px; margin-left: 5px; }
*:first-child+html .iconed > span.icon { vertical-align: -2px; }
a.iconed > span.text { text-decoration: underline; }
a.iconed:hover > span.text { text-decoration: none; }

body, td, th, button, textarea { font-family: "Arial", "Trebuchet MS", sans-serif; font-size: 12px; }
input, select, textarea { font-size: 1em; }
input:focus, select:focus, textarea:focus, button:focus { outline: none; }

table td, table th { vertical-align: top; paddig: 0.5em auto; }

/*********************** default css classes ***********************/

.alignLeft { text-align: left; }
.alignCenter { text-align: center; }
.alignRight { text-align: right; }
.floatLeft { float: left; }
.floatRight { float: right; }

/*********************** clearfix ***********************/

.clearfix:after, .sideCol:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}
 
.clearfix, .sideCol {
	display: inline-block;
	}
 
html[xmlns] .clearfix, html[xmlns] .sideCol {
	display: block;
	}
 
* html .clearfix {
	height: 1%;
	}

* html .sideCol {
	height: 1%;
	}
	
/*********************** layout ***********************/

body {
	width: 100%;
	position: relative;
	
	color: #333;
	background: #888;
	background-image: radial-gradient(center 0deg, circle cover, #bbb 0%, #555 100%);
	background-image: -moz-radial-gradient(center 0deg, circle cover, #bbb 0%, #555 100%);
	background-image: -webkit-radial-gradient(center 0deg, circle cover, #ccc 0%, #555 100%);
	background-image: -ms-radial-gradient(center 0deg, circle cover, #ccc 0%, #555 100%);
	background-image: -o-radial-gradient(center 0deg, circle cover, #bbb 0%, #555 100%);
	}

	body > .stripe {
		color: white;
		background: rgb(80,80,80);
	
		width: 100%;
		height: 30px;
		line-height: 30px;
	
		position: fixed;
		z-index: 999;
		}
		
		body > .stripe.top {
			top: 0px;
			}

		body > .stripe.bottom {
			bottom: 0px;
			}

		body > .stripe a {
			color: white;
			}
			
			body > .stripe a, body > .stripe a.iconed > .text {
				text-decoration: none;
				}

		body > .stripe.bottom > progress {
			width: 200px;
			display: none;
			margin-left: 1em;
			}

		body > .stripe > ul {
			margin-left: 1em;
			display: inline-block;
			}
			
			*:first-child+html body > .stripe > ul {
				display: inline;
				} 

			body > .stripe > ul > li {
				display: inline-block;
				margin-right: 2em;
				}
				
				*:first-child+html body > .stripe > ul > li {
					display: inline;
					}

			/* menu */
			body > nav li {
				position: relative;
				list-style-type: none;
				}
				
				body > nav.stripe > ul > li {
					margin-right: 0em;
					}
					
					body > nav > ul > li > .iconed {
						display: inline-block;
						padding: 0px 1em;
						}
								
						body > nav > ul > li:hover > .iconed {
							background: #f8f8f8;
							color: #333;
							}
						
				body > nav > ul ul {
					position: absolute;
					top: 29px;
					left: 0px;
					
					display: none;
					min-width: 200px;
					
					background: #f8f8f8;
					border: 1px solid #c0c0c0;
					
					box-shadow: 0px 0px 3px rgba(80,80,80,0.8);
					-moz-box-shadow: 0px 0px 3px rgba(80,80,80,0.8);
					-webkit-box-shadow: 0px 0px 3px rgba(80,80,80,0.8);
					-ms-box-shadow: 0px 0px 3px rgba(80,80,80,0.8);
					-o-box-shadow: 0px 0px 3px rgba(80,80,80,0.8);
					}
					
					body > nav.stripe li > span {
						cursor: default;
						}
						
					body > nav.stripe > ul ul li > a, body > nav.stripe > ul ul li > span {
						color: #333;
						
						display: block;
						padding: 0.5em;
						
						line-height: 1.33em;
						text-decoration: none;
						border-top: 1px dotted #ccc;
						}
						
						body > nav.stripe > ul ul li:first-child > a, body > nav.stripe > ul ul li:first-child > span {
							border-top: none;
							}
						
						body > nav.stripe > ul ul li > * > .subIcon {
							position: absolute;
							right: 1em;
							top: 10px;
							
							display: inline-block;
							width: 0;
							height: 0;
							
							border-top: 5px solid transparent;
							border-bottom: 5px solid transparent;
							border-left: 5px solid #505050;
							}
						
						body > nav.stripe > ul ul li:hover {
							background: #d0e0f8;
							}
													
					body > nav > ul ul ul {
						top: 0px;
						left: 100%;
						}
					
					body > nav li:hover {
						z-index: 999;
						}
							
						body > nav li:hover > ul {
							display: block;
							position: absolute;
							z-index: -1;
							}
		
	body > .content {
		position: fixed;
		top: 40px;
		bottom: 30px;
		left: 0px;
		right: 0px;
	
		overflow: auto;
		padding: 10px;
		}

	body > iframe {
		width: 0px;
		height: 0px;
		
		filter: alpha(opacity=0);
		opacity: 0;
		
		position: absolute;
		top: 0px;
		zIndex: -999;
		}
		
	body.blur > .stripe, body.blur > .content, body > .overlay.blur {
		filter: url("../img/resources.svg#gaussian_blur");
		-webkit-filter: blur(3px);
		}

/*********************** window ***********************/

.window {
	margin: 0px 5px 20px;
	background: #f5f5f5;
	
	box-shadow: 0px 0px 5px #888;
	-moz-box-shadow: 0px 0px 5px #888;
	-webkit-box-shadow: 0px 0px 5px #888;
	-ms-box-shadow: 0px 0px 5px #888;
	-o-box-shadow: 0px 0px 5px #888;
	
	border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	}

	.window > .content {
		padding: 10px 15px;
		background: #f5f5f5;
	
		border-radius: 3px;
		-moz-border-radius: 3px;
		-ms-border-radius: 3px;
		-o-border-radius: 3px;
		-webkit-border-radius: 3px;
		}
		
	.window > .header {
		background-color: #dadada;

		border-radius: 3px 3px 0px 0px;
		-moz-border-radius: 3px 3px 0px 0px;
		-o-border-radius: 3px 3px 0px 0px;
		-webkit-border-radius: 3px 3px 0px 0px;
		-ms-border-radius: 3px 3px 0px 0px;

		font-size: 1em;
		font-weight: bold;
		
		line-height: 20px;
		height: 20px;
		padding: 5px 15px;
		}
		
		.window > .header > span {
			vertical-align: middle;
			margin-right: 1em;
			}

		.window > .content h1 { font-size: 16px; }
		.window > .content h2 { font-size: 14px; }
		.window > .content h3 { font-size: 13px; }
		.window > .content h1, .window > .content h2, .window > .content h3 { margin: 1em 0em 0em; }
		.window > .content h1:first-child, .window > .content h2:first-child, .window > .content h3:first-child { margin-top: 0em; }
		.window > .content ul { margin-top: 1em; }
		.window > .content li { margin-left: 2em; }

	.window .window {
		margin: 30px -15px 15px;
		}
		
/*********************** icons ***********************/

.icon {
	text-decoration: none;
	display: inline-block;

	width: 20px;
	height: 20px;

	overflow: hidden;
	line-height: 1000px;
	
	background: url('../img/icons.png') no-repeat left top;

	filter: alpha(opacity=50);
	opacity: 0.5;
	
	vertical-align: text-bottom;
	}
	
	.icon:hover, a:hover .icon, .iconed:hover > .icon, .button .icon, form button .icon, .window > .header > .icon,
		.niceSelect .container .hintBox .value:hover .icon, .niceSelect .container .hintBox .value.selected .icon,
		.grid .row:hover .icon {
			filter: none;
			opacity: 1;
			}

.icon.none { background-position: 20px 20px; }
.icon.log { background-position: 0px 0px; }
.icon.note { background-position: -20px 0px; }
.icon.music { background-position: -40px 0px; }
.icon.login { background-position: -60px 0px; }
.icon.help { background-position: -80px 0px; }
.icon.process { background-position: -100px 0px; }
.icon.globe { background-position: -120px 0px; }
.icon.newpage { background-position: -140px 0px; }
.icon.back { background-position: -160px 0px; }
.icon.forward { background-position: -180px 0px; }
.icon.notebook { background-position: 0px -20px; }
.icon.new { background-position: -20px -20px; }
.icon.oldclock { background-position: -40px -20px; }
.icon.mail { background-position: -60px -20px; }
.icon.link { background-position: -80px -20px; }
.icon.key { background-position: -100px -20px; }
.icon.info { background-position: -120px -20px; }
.icon.picture { background-position: -140px -20px; }
.icon.piechart { background-position: -160px -20px; }
.icon.home { background-position: -180px -20px; }
.icon.helpsign { background-position: 0px -40px; }
.icon.film { background-position: -20px -40px; }
.icon.redstar { background-position: -40px -40px; }
.icon.edit { background-position: -60px -40px; }
.icon.error { background-position: -80px -40px; }
.icon.creditcard { background-position: -100px -40px; }
.icon.comments { background-position: -120px -40px; }
.icon.comment { background-position: -140px -40px; }
.icon.clock { background-position: -160px -40px; }
.icon.calendar { background-position: -180px -40px; }
.icon.calculator { background-position: 0px -60px; }
.icon.cancel { background-position: -20px -60px; }
.icon.warning { background-position: -40px -60px; }
.icon.clip { background-position: -60px -60px; }
.icon.plus { background-position: -80px -60px; }
.icon.zoomout { background-position: -100px -60px; }
.icon.zoomin { background-position: -120px -60px; }
.icon.users { background-position: -140px -60px; }
.icon.logout { background-position: -160px -60px; }
.icon.delete { background-position: -180px -60px; }
.icon.settings { background-position: 0px -80px; }
.icon.starempty { background-position: -20px -80px; }
.icon.starhalf { background-position: -40px -80px; }
.icon.starfull { background-position: -60px -80px; }
.icon.cart { background-position: -80px -80px; }
.icon.shield { background-position: -100px -80px; }
.icon.zoom { background-position: -120px -80px; }
.icon.save { background-position: -140px -80px; }
.icon.refresh { background-position: -160px -80px; }
.icon.process.dark { background-position: -180px -80px; }
.icon.first { background-position: 0px -100px; }
.icon.last { background-position: -20px -100px; }
.icon.previous { background-position: -40px -100px; }
.icon.next { background-position: -60px -100px; }
.icon.filterin { background-position: -80px -100px; }
.icon.filterout { background-position: -100px -100px; }
.icon.excel { background-position: -120px -100px; }
.icon.tick { background-position: -140px -100px; }
.icon.news { background-position: -160px -100px; }
.icon.pin { background-position: -180px -100px; }
.icon.user { background-position: -80px -120px; }
.icon.greenflag { background-position: -100px -120px; }
.icon.redflag { background-position: -120px -120px; }
.icon.pdf { background-position: -140px -120px; }
.icon.editpage { background-position: -160px -120px; }
.icon.adduser { background-position: -180px -120px; }
.icon.circle.green { background-position: -40px -140px; }
.icon.circle.yellow { background-position: -60px -140px; }
.icon.circle.red { background-position: -80px -140px; }
.icon.circle.blue { background-position: -100px -140px; }
.icon.circle.violet { background-position: -120px -140px; }
.icon.up { background-position: -140px -140px; }
.icon.down { background-position: -160px -140px; }

.icon.sortASC { background-position: 0px -140px; }
.icon.sortDESC { background-position: -20px -140px; }
.icon.sortNone { background-position: 20px -140px; }	/* do not render icon */
.icon.sortNone.hidden { width: 0px; }	/* do not render icon */
.icon.sortASC.hoverFlip:hover, :hover > .icon.sortASC.hoverFlip { background-position: -20px -140px; }
.icon.sortDESC.hoverFlip:hover, :hover > .icon.sortDESC.hoverFlip { background-position: 0px -140px; }
.icon.sortNone.hoverFlip:hover, :hover > .icon.sortNone.hoverFlip { background-position: 0px -140px; width: 20px; }

/*********************** forms ***********************/

form, .formView {
	position: relative;
	}
	
	form .inputWrapper, .formView .inputWrapper {
		display: inline-block;
		vertical-align: top;
		width: 80%;
		}
		
		form .inputWrapper.noLabel, .formView .inputWrapper.noLabel {
			width: 100%;
			}
			
		form .inputWrapper .description, form .error {
			display: block;
			}

		form .inputWrapper .description {
			font-style: italic;
			font-size: 0.9em;
			}
			
		form .error {
			font-weight: bold;
			color: #b72f24;
			}

	form label, .formView label {
		display: inline-block;
		
		width: 20%;
		margin-bottom: 0.5em;
		margin-top: 1px;
		
		font-weight: bold;

		vertical-align: top;
		}

		form .mandatory label:after {
			content: " *";
			display: inline;
			}

	form .input {
		display: block;
		margin-right: 11px; /* to avoid overlapping inputs */
		}
		
	form .input input, form .input select, form .input textarea, form .input .inputLike {
		display: inline-block;
		width: 100%;
		
		border: 1px solid #dfdfdf;
		
		border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		-webkit-border-radius: 3px;
		-ms-border-radius: 3px;

		padding: 5px;
		}
		
		form .input .inputLike {
			cursor: text;
			background: white;
			}
		
	form .input input[type=checkbox], form .input input[size], form .input textarea[cols] {
		width: auto;
		}
		
		form .input textarea {
			resize: vertical;
			}

	.button, form button {
		border: 1px solid #bbb;
		border-radius: 2px;
		
		cursor: pointer;
		display: inline-block;
		
		padding: 0.2em 1em;
		background: #f9f9f9;
		margin-right: 0.5em;
	
		font-weight: bolder;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		white-space: nowrap;
		
		box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
		-ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
		-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
		}
		
		.button.disabled, form button[disabled] {
			cursor: default;
			color: #999;
			}
				
			.button.disabled .icon, form button[disabled] .icon {
				filter: url("../img/resources.svg#grayscale");
				filter: gray alpha(opacity=50);
				opacity: 0.5;
				-webkit-filter: grayscale(1);
				}

		.button:hover, form button:hover, form button:focus,
			form input:hover, form .inputLike:hover, form .inputLike.hover, form input:focus, form select:hover, form select:focus,
			form textarea:hover, form textarea:focus,
			form .input.fileInput:hover, form .input.fileInput.hover {
				box-shadow: 0px 0px 3px 1px #6699cc;
				-moz-box-shadow: 0px 0px 3px 1px #6699cc;
				-webkit-box-shadow: 0px 0px 3px 1px #6699cc;
				-ms-box-shadow: 0px 0px 3px 1px #6699cc;
				-o-box-shadow: 0px 0px 3px 1px #6699cc;
				}
		
			.button.disabled:hover, form button[disabled]:hover, form button[disabled]:focus,
				form input[disabled]:hover, form input[disabled]:focus, form select[disabled]:hover, form select[disabled]:focus,
				form textarea[disabled]:hover, form textarea[disabled]:focus {	
				box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
				-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
				-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
				-ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
				-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
				}
				
	form .input.fileInput {
		overflow: hidden;
		position: relative;

		width: 100%;
		display: block;
		
		background: white;
		border: 1px solid #DFDFDF;
		border-radius: 3px 3px 3px 3px;
		}
			
		form .input.fileInput > .value {
			z-index: 0;
			position: relative;
			padding: 5px;

			width: auto;			
			display: block;
			}
		
		form .input.fileInput > .icon.error {
			position: absolute;
			top: 4px;
			right: 5px;
			
			z-index: 200;
			display: none;
			}

		form .input.fileInput > input {
			position: absolute;
			top: -10px;
			right: -100px;
			width: auto;
			z-index: 100;
			font-size: 1000px;
			
			filter: alpha(opacity=0);
			opacity: 0;
			}				
	
	form .input.captcha audio {
		display: block;
		width: 170px;
		min-height: 30px;
		margin-bottom: 5px;
		}
		
	form .input.captcha input {
		width: 160px;
		height: 60px;
		line-height: 60px;
		
		vertical-align: top;
		margin-top: -1px;
		
		font-size: 3em;
		text-align: center;
		}
		
.formView > p {
	padding: 0em;
	margin: 0.5em 0em 0em;
	border-bottom: 1px dotted #ccc;
	}
	
/***************************** overlay *****************************/

body > .overlay {
	position: fixed;
	z-index: 10000;
	
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;

	background: url('../img/blackPixel01.png') left top repeat;
	background: rgba(0,0,0,0.1);
	}
	
	body.browserOpera > .overlay {
		background: rgba(0,0,0,0.7);
		}

	body > .overlay > .content {
		width: 10px;
		left: 50%;
		top: 20px;
		bottom: 20px;
		position: absolute;
		}
		
		body > .overlay > .content > div {
			width: 900px;
			max-height: 100%;
			
			position: absolute;
			top: 0px;
			bottom: 50px;
			left: -450px;
			}

			body > .overlay > .content > div > .window {
				border: 1px solid #888;
				}
				
				body > .overlay > .content > div > .window > .header, body > .overlay > .content > div > .window > .content {
					position: absolute;
					top: 0px;
					left: 0px;
					right: 0px;
					z-index: 10002;
					}
					
				body > .overlay > .content > div > .window > .content {
					top: 30px;
					z-index: 10001;
					
					max-height: 100%;
					overflow-y: auto;
				
					box-shadow: 0px 0px 15px #333;
					-moz-box-shadow: 0px 0px 15px #333;
					-webkit-box-shadow: 0px 0px 15px #333;
					-ms-box-shadow: 0px 0px 15px #333;
					-o-box-shadow: 0px 0px 15px #333;
					}

		body > .overlay > .content > a {
			z-index: 10010;
			position: absolute;
			top: 0px;
			right: -440px;
			width: 20px;
			height: 20px;
			padding: 5px;
			
			background: rgba(100,100,100,0.4);
			border-radius: 0px 3px 0px 0px;
			}
			
/*********************** messages ***********************/

body > .messages {
	position: fixed;
	bottom: 30px;
	right: 0px;

	background: #ddd;
	background: rgba(221,221,221,0.7);
	background: linear-gradient(center top, rgba(200,200,200,0.7) 0%, rgba(240,240,240,0.7) 10px );
	background: -moz-linear-gradient(center top, rgba(200,200,200,0.7) 0%, rgba(240,240,240,0.7) 10px );
	background: -webkit-linear-gradient(center top, rgba(200,200,200,0.7) 0%, rgba(240,240,240,0.7) 10px );
	background: -ms-linear-gradient(center top, rgba(200,200,200,0.7) 0%, rgba(240,240,240,0.7) 10px );
	background: -o-linear-gradient(center top, rgba(200,200,200,0.7) 0%, rgba(240,240,240,0.7) 10px );

	border-style: solid;
	border-color: #777;
	border-width: 1px 0px 0px 1px;

	border-radius: 5px 0px 0px 0px;
	-moz-border-radius: 5px 0px 0px 0px;
	-webkit-border-radius: 5px 0px 0px 0px;
	-ms-border-radius: 5px 0px 0px 0px;
	-o-border-radius: 5px 0px 0px 0px;

	z-index: 9999;
	}

	body > .messages .error {
		color: #ff1100;
		}

	body > .messages > div {
		font-weight: bold;
		padding: 0.5em 1em;
		}
		
		body > .messages > div > span {
			}

/*********************** jQuery UI ***********************/

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

/********************* select grid *********************/

.niceSelect {
	}
		
	.niceSelect .container {
		position: relative;
		}
		
		form .input.niceSelect .container.inputLike {
			padding: 0px 5px;
			}
			
		.niceSelect .container .hintBox {
			position: absolute;
			z-index: 999;
			top: 100%;
			left: 0em;
			
			width: 100%;

			border: 1px solid #dfdfdf;
			box-shadow: 0px 0px 3px 1px #6699cc;
			-moz-box-shadow: 0px 0px 3px 1px #6699cc;
			-webkit-box-shadow: 0px 0px 3px 1px #6699cc;
			-ms-box-shadow: 0px 0px 3px 1px #6699cc;
			-o-box-shadow: 0px 0px 3px 1px #6699cc;
			
			background: white; /* IE 7 */
			}
			
		.niceSelect .container .value {
			cursor: pointer;
			position: relative;
			}
			
			.niceSelect .container > .value {
				display: inline-block;
				
				height: 20px;
				padding: 2px 5px;
				margin: 2px 5px 2px 0px;
				border: 1px solid #ccc;
	
				background: #eee;
				}
	
			.niceSelect .container .hintBox .value {
				display: block;
				background: white;
				padding: 2px 5px;
				}
	
				.niceSelect .container .hintBox .value.new {
					font-style: italic;
					}
					
				.niceSelect .container .hintBox .value:hover, .niceSelect .container .hintBox .value.selected {
					background: #cfe0e8;
					}

				.niceSelect .container .hintBox .value .icon {
					position: absolute;
					top: 2px;
					right: 0.5em;
					}
	
			.niceSelect .container .value > .label {
				margin-right: 1em;
				}
				
			.niceSelect .container .value > * {
				vertical-align: middle;
				}
				
			.niceSelect .container .value > .icon.error {
				display: inline-block;
				}
				
			.niceSelect .container input {
				border: none;
				
				display: inline-block;
				box-shadow: none;
				-moz-box-shadow: none;
				-webkit-box-shadow: none;
				-ms-box-shadow: none;
				-o-box-shadow: none;
				}

/*********************** toolbar ***********************/

.toolbar {
	padding: 0px;
	}

	.toolbar a, .toolbar button, .toolbar .button {
		display: inline-block;
		padding: 3px 10px;
		margin: 5px 0px 5px 5px;
		}

		.toolbar button {
			padding: 2px 7px;
			}

		.toolbar button.smaller, .toolbar .button.smaller {
			padding: 2px 5px;
			}
			
/*********************** grid ***********************/

.grid .summary {
	margin: 1em 0em;
	text-align: center;
	font-style: italic;
	}
	
	.grid .summary span {
		display: block;
		}

.grid .pagination {
	float: right;
	height: 20px;
	}

.grid .toolbar > .search, .grid .pageBy {
	float: right;
	margin-right: 20px;
	}
	
	.grid .toolbar > .search input, .grid .pageBy input {
		height: 20px;
		padding: 3px 5px;
		vertical-align: middle;
		border: 1px solid #ccc;
		}

.grid table {
	background-color: #fdfdfd;
	border: 2px solid #ddd;
	color: #222;
	margin: 10px 0px;
	border-collapse: collapse;
	width: 100%;
	}

.grid td, .grid th {
	padding: 0.3em 0.5em 0.1em;
	border-bottom: 1px dotted #eee;
	line-height: 1.5em;
	}
	
	.grid td p:first-child, .grid th p:first-child {
		margin-top: 0px;
		}
		
	.grid td.nowrap, .grid th.nowrap {
		white-space: nowrap;
		}
		
.grid th {
	color: #555;
	text-align: left;
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #bbb;
	border-right: 1px solid #ddd;
	}
	
	.grid th.alignRight {
		text-align: right;
		}
		
	.grid th.alignCenter {
		text-align: center;
		}
		
	.grid th > span, .grid th > a {
		display: block;
		line-height: 20px;
		padding: 4px 24px 4px 0px;
		position: relative;
		}
		
		.grid th > * > .icon {
			position: absolute;
			top: 4px;
			right: 4px;
			}

.grid .row {
	background-color: #fdfdfd;
	}

	.grid .row:hover {
		background-color: #cfe0e8 !important;
		}

	.grid .row.odd {
		background-color: #fafafa;
		}

.grid .action {
	width: 100px;
	white-space: nowrap;
	padding: 0px;
	text-align: center;
	}

.grid .actions {
	white-space: nowrap;
	}

/*********************** data table ***********************/

table.data {
	margin-top: 1em;
	border-collapse: collapse;
	}
	
	table.data tr > * {
		padding: 0.2em 1em;
		margin: 0px;
		}
		
		table.data tr > th {
			text-align: left;
			}
		
			table.data tr > th.alignRight {
				text-align: right;
				}
		
	table.data tr.border > * {
		border-style: solid;
		border-color: #333;
		border-width: 0px;
		}
		
		table.data tr.border.top > * {
			border-top-width: 1px;
			}
		 
		table.data tr.dashed > * {
			border-style: dashed;
			}
		 
		table.data tr.dotted > * {
			border-style: dotted;
			}

/*********************** tabs ***********************/

dl.contentron-tabs {
	margin-top: 1em;
	}
	
	dl.contentron-tabs > dd {
		display: inline-block;
		
		background-color: #f5f5f5;

		border-radius: 3px 3px 0px 0px;
		-moz-border-radius: 3px 3px 0px 0px;
		-o-border-radius: 3px 3px 0px 0px;
		-webkit-border-radius: 3px 3px 0px 0px;
		-ms-border-radius: 3px 3px 0px 0px;

		font-size: 1em;
		font-weight: bold;
		
		line-height: 20px;
		height: 20px;
		padding: 2px 10px;
		margin-right: 1px;
		
		border: 1px solid #cccccc;
		
		cursor: pointer;
		}
		
		dl.contentron-tabs > dd.visible, dl.contentron-tabs > dd:hover {
			background-color: #eee;
			
			box-shadow: 0px 0px 3px #6699cc;
			-moz-box-shadow: 0px 0px 3px #6699cc;
			-webkit-box-shadow: 0px 0px 3px #6699cc;
			-ms-box-shadow: 0px 0px 3px #6699cc;
			-o-box-shadow: 0px 0px 3px #6699cc;
			}

		dl.contentron-tabs > dd:hover {
			text-decoration: underline;
			}
			
		dl.contentron-tabs > dd.visible {
			cursor: default;
			text-decoration: none;
			}

	dl.contentron-tabs > dt {
		display: none;
		}
		
	dl.contentron-tabs > dt.visible {
		display: block;
		border: 1px solid #ccc;
		margin-top: -1px;
		padding: 1em;
		background: #f5f5f5;
		position: relative;
		z-index: 10;
		}

/*********************** sideCol content ***********************/

.sideCol { display: block; }
	.sideCol > .fixedCol { float: right; width: 80px; margin-right: 10px; }
		.sideCol.s50 > .fixedCol { width: 50px; }
		.sideCol.s100 > .fixedCol { width: 100px; }
		.sideCol.s150 > .fixedCol { width: 150px; }
		.sideCol.s200 > .fixedCol { width: 200px; }
		.sideCol.s300 > .fixedCol { width: 300px; }
		.sideCol.s400 > .fixedCol { width: 400px; }
		.sideCol.s500 > .fixedCol { width: 500px; }
		.sideCol.left > .fixedCol { float: left; margin-right: 0px; margin-left: 10px; }
	.sideCol > .content { margin-right: 100px; }		
		.sideCol.s50 > .content { margin-right: 70px; }		
		.sideCol.s100 > .content { margin-right: 120px; }		
		.sideCol.s150 > .content { margin-right: 170px; }		
		.sideCol.s200 > .content { margin-right: 220px; }		
		.sideCol.s300 > .content { margin-right: 320px; }		
		.sideCol.s400 > .content { margin-right: 420px; }		
		.sideCol.s500 > .content { margin-right: 520px; }
	.sideCol.left > .content { margin-left: 100px; margin-right: 0px; }		
		.sideCol.left.s50 > .content { margin-left: 70px; }		
		.sideCol.left.s100 > .content { margin-left: 120px; }		
		.sideCol.left.s150 > .content { margin-left: 170px; }		
		.sideCol.left.s200 > .content { margin-left: 220px; }		
		.sideCol.left.s300 > .content { margin-left: 320px; }		
		.sideCol.left.s400 > .content { margin-left: 420px; }		
		.sideCol.left.s500 > .content { margin-left: 520px; }
				
	.sideCol.empty > .fixedCol { width: 0px !important; }
	.sideCol.empty > .content { margin-left: 0px !important; margin-right: 0px !important; }
	
/************************ context menu ************************/

body > .contextMenu {
	position: absolute;
	z-index: 1000;
	border: 1px solid #999;
	box-shadow: 0px 5px 5px #999;
	background: white;
	list-style-type: none;
	padding: 0em 1em;
	}
	
	body > .contextMenu li {
		padding: 0.5em 1em;
		margin: 0em -1em;
		min-width: 100px;
		max-width: 200px;
		}
		
		body > .contextMenu li:hover {
			background: #cfe0e8;
			cursor: pointer;
			}

	body > .contextMenu li.sep {
		height: 0px;
		padding: 0em;
		margin: 0.5em 0em;
		border-top: 1px dotted #ccc;
		cursor: default;
		background: none;
		}

/************************ print ************************/

@media print {
	body > .stripe {
		display: none;
		}
	
	body > .content {
		position: relative;
		}
			
	.window {
		max-width: 100%;
	
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		
		border-radius: 0px;
		-moz-border-radius: 0px;
		-ms-border-radius: 0px;
		-o-border-radius: 0px;
		-webkit-border-radius: 0px;
		}
	
		.window > .content {
			padding: 0px;
			}
			
		.window > .header {
			border-radius: 0px;
			-moz-border-radius: 0px;
			-o-border-radius: 0px;
			-webkit-border-radius: 0px;
			-ms-border-radius: 0px;
	
			padding: 0px;
			}
			
	.toolbar {
		display: none;
		}
		
	.sideCol > .fixedCol {
		display: none;
		}
		
	.sideCol > .content {
		margin-left: 0px !important;
		margin-right: 0px !important;
		}
}