/* * *
* Dreamsoft.no
* Alexander L�vheim <alexander@dreamsoft.no>
* * */

* { border:none; outline:none; box-shadow:none; margin:0; padding:0; }
.error { background-color:#990000; color:#FFF; padding:10px; margin-bottom:10px; border-radius:5px; }
.success { background-color:#669900; color:#FFF; padding:10px; margin-bottom:10px; border-radius:5px; }
.linkButton { background-color:#FFF; border:1px solid #CCC; padding:10px 20px 10px 10px; border-radius:5px; margin-right:10px; cursor:pointer; }
.linkButton:active { background-color:#000; border:1px solid #000; color:#FFF; }
.writeComment { margin-top:5px; border-radius:3px; overflow:hidden; height:100px; font-family:Verdana, Tahoma; font-size:15px; padding:10px; resize:none; }
.avatar { width:20px; height:20px; border-radius:100px; background-color:#CCC; background-position:center; background-size:100%; }
.onlyMobile { display:none; }

body {
	background-color:#333;
	color:#FFF;
	font-family:Verdana, Tahoma;
	font-size:12px;
	cursor:default;
}

/* Login */
#loginBox {
	position:fixed;
	top:30%;
	left:50%;
	width:400px;
	margin:0 0 0 -200px;
	background-color:#FFF;
	border-radius:10px;
}
	#loginBox #whiteBackground {
		background-color:#FFF;
		padding:10px 0;
		border-bottom:1px solid #CCC;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	}
		#loginBox #whiteBackground #logo {
			width:200px;
			height:50px;
			background:url('../images/vb_serviceportal_logo.png') center center #FFF no-repeat;
			margin:auto;
		}
	#loginBox #info {
		padding:10px;
		background-color:#222;
		color:#FFF;
		text-align:center;
	}
	#loginBox form {
		overflow:hidden;
	}
		#loginBox form input {
			background-color:#FFF;
			font-size:16px;
			font-family:Verdana, Tahoma;
			padding:10px;
			border-bottom:1px solid #CCC;
			color:#222;
			width:100%;
		}
		#loginBox form button {
			display:block;
			width:100%;
			background-color:#222;
			padding:13px 0 10px 0;
			text-location:center;
			color:#FFF;
		}
			#loginBox form button:hover, #loginBox form button:active {
				background-color:#666;
				cursor:pointer;
			}
			
/* Once we're logged in */
#topContent {
	position:fixed;
	background-color:#222;
	color:#FFF;
	padding:10px;
	z-index:2;
	right:0;
	left:0;
	box-shadow: 0px 0px 5px #000;
}
	#topContent .avatar {
		float:left;
		margin-right:10px;
		width:20px;
		height:20px;
		border-radius:100px;
		background-color:#333;
		background-position:center;
		background-size:100%;
	}

#topContentMobile {
	display:none;
	position:fixed;
	background-color:#222;
	color:#FFF;
	z-index:2;
	width:100%;
	box-shadow: 0px 0px 5px #000;
}
	#topContentMobile .fa-navicon {
		float:left;
		font-size:25px;
		color:#888;
		padding:15px 20px 10px 20px;
		font-weight:100;
		cursor:pointer;
	}
	#topContentMobile .fa-power-off {
		float:right;
		color:#888;
		font-size:25px;
		padding:15px 20px 10px 20px;
		font-weight:100;
		cursor:pointer;
	}
		#topContentMobile .fa-navicon:hover, #topContentMobile .fa-power-off:hover {
			color:#FFF;
			background-color:#FF3300;
		}
	#topContentMobile .avatar {
		margin:5px auto 0 auto;
		width:40px;
		height:40px;
	}
	#topContentMobile #menuMobile {
		display:none;
		background-color:#111;
		overflow:auto;
	}
		#topContentMobile #menuMobile a {
			display:block;
			color:#FFF;
			font-size:18px;
			padding:20px;
			text-decoration:none;
			border-bottom:1px solid #222;
		}
			#topContentMobile #menuMobile a:hover {
				background-color:#333;
			}

#leftMenu {
	position:fixed;
	margin-top:40px;
	height:100%;
	width:200px;
	background-color:#FFF;
}
	#leftMenu a {
		display:block;
		color:#444;
		text-decoration:none;
		padding:15px;
		margin-left:10px;
		border-top:1px solid #EAEAEA;
		border-top-left-radius:5px;
		border-bottom-left-radius:5px;
	}
		#leftMenu a:active, #leftMenu a:hover {
			background-color:#EAEAEA;
			color:#000;
			border-top:1px solid transparent;
		}

		#leftMenu a.active {
			border-top:1px solid transparent;
			background-color:#333;
			color:#FFF;
		}
	#leftMenu .logo {
		width:200px;
		height:50px;
		background:url('../images/vb_serviceportal_logo.png') center center #FFF no-repeat;
		margin:20px auto;
	}

#contentData {
	margin-left:200px;
	padding:50px 10px 10px 10px;
	overflow:hidden;
}
	#contentData .box {
		background-color:#EAEAEA;
		padding:10px;
		color:#333;
		border-radius:5px;
		margin-bottom:10px;
		overflow:auto;
	}
		#contentData .box h3 {
			font-size:11px;
			text-transform:uppercase;
			font-weight:700;
			padding:0 0 5px 0;
			border-bottom:2px solid #999;
		}
			#contentData .box h3 a {
				color:#000;
				font-weight:700;
			}
		#contentData .box p {
			margin-bottom:10px;
		}
	
/* Tables */
.mainTable {
	width:100%;
}
	.mainTable th {
		background-color:#333;
		color:#FFF;
		font-size:11px;
		padding:8px 10px;
		text-align:left;
		border-left:1px solid #222;
		box-shadow: 0px 0px 5px #222;
	}
	.mainTable tr:nth-child(even) {
		background-color:#F0F0F0;
	}
	.mainTable tr:nth-child(odd) {
		background-color:#FFF;
	}
		.mainTable tr td {
			color:#333;
			padding:10px;
			border-left:1px solid #FFF;
			border-bottom:1px solid #FFF;
		}
		.mainTable tr td input, .mainTable tr td select {
			border:1px solid #CCC;
			padding:10px;
			background-color:#FFF;
			border-radius:5px;
			width:90%;
		}
		
.tabMenu {
	background-color:#E0E0E0;
	overflow:auto;
	float:right;
	font-size:13px;
	border-radius:3px;
}
	.tabMenu a {
		display:block;
		float:left;
		padding:12px 20px;
		color:#444;
		text-decoration:none;
		border-top:5px solid #CCC;
	}
	.tabMenu a:hover, .tabMenu a.active {
		background-color:#FFF;
		color:#000;
		border-top:5px solid #000;
	}

.detailTable {
	width:100%;
}
	.detailTable th {
		background-color:#222;
		box-shadow:none;
	}
	.detailTable td {
		background-color:#CCC;
	}

#endComment {
	display:none;
	position:fixed;
	background-color:#CCC;
	padding:10px;
	color:#000;
	top:40px;
	right:0;
	left:0;
	bottom:0;
}
	#endComment h3 {
		border-bottom:2px solid #FFF !important;
		margin-bottom:5px;
	}

.comment {
	background-color:#FFF;
	padding:10px;
	border-radius:5px;
	overflow:hidden;
	margin-bottom:10px;
}
	.comment .author {
		background-color:#222;
		padding:10px;
		border-top-left-radius:5px;
		border-top-right-radius:5px;
	}
		.comment .author .avatar {
			float:left;
			width:30px;
			height:30px;
			background-color:#444;
			background-position:center;
			background-size:100%;
			margin:-8px 5px 0 -8px;
			border-radius:100px;
			border:3px solid #555;
		}
		
		.comment .author .timestamp {
			float:right;
			font-size:10px;
			font-weight:700;
			text-transform:uppercase;
			padding:5px 0 0 0;
			color:#999;
		}
		.comment .author .serviceCompany {
			font-size:12px;
			border-top:3px solid #555;
			color:#999;
		}
	.comment .viewImage {
		position:fixed;
		display:none;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:#000;
		background-repeat:no-repeat;
		background-position:center;
		background-size:100%;
	}
	.comment .content {
		color:#333;
		background-color:#EAEAEA;
		padding:10px;
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
	}
		.comment .content .imageBox {
			cursor:pointer;
			border:5px solid #CCC;
			margin:20px 0 0 0;
			background-color:#EAEAEA;
			background-position:center;
			background-size:100%;
		}
		
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

/* MISC */
.normalInput {
	background-color:#FFF;
	padding:10px;
	border:1px solid #CCC;
	border-radius:5px;
}

#footer {
	position:fixed;
	background-color:#222;
	padding:0 0 0 10px;
	color:#888;
	font-size:10px;
	text-align:center;
	bottom:0;
	right:0;
	left:0;
}
	#footer .owner {
		float:left;
	}
		#footer .owner i {
			border-left:1px solid #444;
			padding:10px;
		}
			#footer .owner i:hover {
				color:#FFF;
				cursor:pointer;
				background-color:#333;
			}
	#footer .author {
		position:absolute;
		right:10px;
		bottom:3px;
		opacity:0.2;
		cursor:pointer;
	}
		#footer .author:hover {
			opacity:1.0;
		}
		#footer .author img {
			height:18px;
		}