/*=======================================================*
** virtualboardroom.css
========================================================*/

/* -------------- utility -------------- */

.clear { clear:both }
.hide { display:none }


/* -------------- icons -------------- */

.icon {
	width:100%;
	height:24px;
	background-position:0 0;
	background-repeat:no-repeat;	
}

.icon-discussion { background-image:url(../images/icon-discussion.png) }
.icon-file { background-image:url(../images/icon-file.png) }


/* -------------- global -------------- */

/* main container */
.vb { 
	/* width:800px; */
	margin:50px auto 0 auto;
	font-family:Arial;
	font-size:14px;
}

.ie9 .vb {
	
}

.vb h1 { margin:0 0 5px 0 }

.vb h2 { margin:5px 0 5px 0 }

.vb p { line-height:18px }

.vb hr {
	height:1px;
	max-height:1px;
	margin:10px 0 0 0;
	background:#eee;
	color:#eee;
	border:none;	
}


/* -------------- forms -------------- */

.form div { margin:5px 0 5px 0 }

.form label { font-weight:bold; }

.form input[type=text] {
	width:50%;
	padding:8px;
	background:url(../images/bg-input.png) #FFF repeat-x;
	border:1px solid #ccc;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-khtml-border-radius:3px;	
}

.form textarea {
	font-family:Arial;
	background:url(../images/bg-input.png) #FFF repeat-x;
	padding:8px;
	margin:0 0 10px 0;
	width:98%;
	height:150px;
	border:1px solid #ccc;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-khtml-border-radius:3px;
	resize:none;
}


/* -------------- buttons -------------- */

.vb .button {
	display:inline-block;
	font-size:12px;
	padding:8px 12px 8px 12px;
	text-decoration:none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
}

.vb .button.back {
	float:right;
	border:1px solid #ccc;
	color:#666;
	margin:3px 0 0 0;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDIzOCwyMzgsMjM4LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMjA0LDIwNCwyMDQsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
	background: -o-linear-gradient(top, rgba(238,238,238,1), rgba(204,204,204,1));
	background: -moz-linear-gradient(top, rgba(238,238,238,1), rgba(204,204,204,1));
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(238,238,238,1)), color-stop(1, rgba(204,204,204,1)));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFEEEEEE,EndColorStr=#FFCCCCCC);
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFEEEEEE,EndColorStr=#FFCCCCCC)";
}

.vb .button.add {
	font-weight:bold;
	font-size:14px;
	border:1px solid #6fbb01;
	color:#FFF;
	cursor:pointer;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDEzMywyMjYsMCwxKTsiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDExMSwxODcsMSwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);
	background: -o-linear-gradient(top, rgba(133,226,0,1), rgba(111,187,1,1));
	background: -moz-linear-gradient(top, rgba(133,226,0,1), rgba(111,187,1,1));
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(133,226,0,1)), color-stop(1, rgba(111,187,1,1)));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF85E200,EndColorStr=#FF6FBB01);
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF85E200,EndColorStr=#FF6FBB01)";
	text-shadow: 1px 1px 1px #4d8201;
	-moz-text-shadow: 1px 1px 1px #4d8201;
	-webkit-text-shadow: 1px 1px 1px #4d8201;
	
}

.vb .button.back:hover {
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
}

.vb .button.add:hover {
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
}

.vb .button.high {
	margin:18px 0 0 0;	
}



/* -------------- tabs -------------- */

.tabs {
	margin:40px 0 0 0;
	padding:0;
	height:25px;
}

.tabs ul {
	margin:0;
	padding:0;
}

	.tabs ul li {
		float:left;
		list-style:none;
		margin:0 5px 0 0;
	}

		.tabs ul li a{
			padding:10px 20px 10px 20px;
			cursor:pointer;
			color:#FFF;
			text-decoration:none;
			background:#b6c1c6;
			border-top-right-radius:5px;
			border-top-left-radius:5px;
			-moz-border-top-right-radius:5px;
			-moz-border-top-left-radius:5px;
			-webkit-border-top-right-radius:5px;
			-webkit-border-top-left-radius:5px;
		}
		
		.tabs ul li a:hover{
			color:#FFF;
			text-decoration:none;
			background:#000;
			text-shadow: 0px 0px 0px #888;
			-moz-text-shadow: 0px 0px 0px #888;
			-webkit-text-shadow: 0px 0px 0px #888;
		}
		
		.tabs ul li a.on{
			border-top:1px solid #ccc;
			border-left:1px solid #ccc;
			border-right:1px solid #ccc;
			color:#444;
			background:#eee;
			text-decoration:none;
			font-weight:bold;
			cursor:default;
			text-shadow: 0px 0px 0px #888;
			-moz-text-shadow: 0px 0px 0px #888;
			-webkit-text-shadow: 0px 0px 0px #888;
		}
		
		
/* -------------- panel -------------- */

.panel {
	border:1px solid #ccc;
	padding:20px;
	background:#eee;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-top-right-radius:5px;
	-moz-border-bottom-left-radius:5px;
	-moz-border-bottom-right-radius:5px;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
}

.panel .inner {
	background:#FFF;
	border:1px solid #ccc;
	padding:20px;
}


/* -------------- list items -------------- */

.panel ul {
	margin:0;
	padding:0;
	list-style:none;	
}

	.panel ul li {
		display:block;
		border:1px solid #eee;
		margin:0 0 10px 0;
		padding:10px;
		font-size:12px;
		background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDI1MywyNTMsMjUzLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMjM4LDIzOCwyMzgsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
		background: -o-linear-gradient(top, rgba(253,253,253,1), rgba(238,238,238,1));
		background: -moz-linear-gradient(top, rgba(253,253,253,1), rgba(238,238,238,1));
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(253,253,253,1)), color-stop(1, rgba(238,238,238,1)));
		filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFDFDFD,EndColorStr=#FFEEEEEE);
		-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFDFDFD,EndColorStr=#FFEEEEEE)";
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		-khtml-border-radius:3px; 
	}
	
	.panel ul li:hover {
		border:1px solid #ccc;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
		-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
		-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
	}
	
	.panel ul li:last-child { margin:0 }
	
		.panel ul li .col-left {
			float:left;
			width:5%;
		}
		
		.panel ul li .col-right {
			float:right;
			width:95%;
		}
		
			.col-right .name {
				font-weight:bold;
			}
			
			.col-right .created {
				color:#555;
				font-size:11px;
			}
			
			.col-right .file {
				margin:6px 0 0 0;
				font-size:14px;
			}
			
			.col-right span { font-size:12px }
			
			.col-right .content {
				margin:3px 0 0 0;
			}