/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *   Template Name: Real World Admin												   *
 *   File Name:  common.css															   *
 *   Description: Contains styles of common template pages.						       *					
 *   Version: 1.0																	   *
 *   Author: Weblusive																   *
 *   Author URI: http://www.weblusive.com/											   *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/************ LOGIN PAGE *************/

#login-body{
	background:#FEFEFE url('../images/structure/wrapper.png') repeat-x;
}

#login-form {
	margin:106px auto 0px auto;
	width:560px;
	border:solid 12px #E0E0E0;
	background:#E0E0E0;
	border-radius:12px;
	-moz-border-radius:12px;
	webkit-border-radius:12px;
}

#login-inner {
	border-radius:5px;
	-moz-border-radius:5px;
	webkit-border-radius:5px;
	background:url('../images/structure/ray.png') no-repeat scroll center top #eeeeee;
	margin:0 auto;
	padding:30px;
	width:500px;
}

#login-form	label{
	color:#111;
	display:block;
	font-size:1em;
	margin-bottom:2px;
	font-weight:bold
}

#login-form input.txt {
	background:url('../images/structure/login_input_bg.png') repeat-x scroll left top #F7FCFF;
	border:1px solid #CCC;
	color:#25313C;
	font-size:1.4em;
	width:486px;
	padding:4px;
}

#login-form input#login-button{
	text-transform:uppercase;
	float:right;
	margin-top:10px;
	color:#DDD;
}

#login-error {
	color:red; 
	padding:6px 0 6px 7px;
	float:left;
	font-size:12px; 
	width:330px; 
	text-align:center;
}

#login-form #wrapper{
	background: transparent url('../images/structure/login_back.png') repeat-x; 
	height: 50px;
	border-radius: 8px; 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	text-align:center;  
	width:494px; 
	margin:0px auto 30px auto;
	font-size:1.2em;
}

#login-form #wrapper p{
	padding-top:4px; 
	margin:0; 
	text-transform:uppercase; 
	letter-spacing:2px; 
	
	line-height:2.2em;
	color:#FFF;
	font-weight:bold;
	text-shadow:#111 0px 1px 1px
}

div#remember-me{
	float:left;
	width:300px; 
	margin-top:16px;
}

div#remember-me a{
	color:#000; 
	padding-right:10px;
	font-weight:bold;
	font-size:0.75em;
}

#login-title{
	width:560px; margin:60px auto 0px auto;
}

#login-title h1{
	background:url('../images/structure/logo.png') no-repeat;
	width:348px;
	height:41px;
	margin:0px auto;
	text-indent:-9999px;
}

h1#project-title{
	padding:18px 0px 0px 8px;	
}

#login-title p{
	background:none;
	text-shadow: #111 0px 1px 1px; 
	color:#fff9d8;
	font-weight:bold;
	text-align:center;
	padding-top:6px;
}

#login-bottom{
	
	border-top: 2px dotted #BBB; 
	padding: 3px;
}

.field-separator{
	width:560px;
	margin:0px auto 20px auto;
}

/********************************************/


/************** SAMPLE PAGE *****************/
#filter-panel{
	float:left;
	width:50%;
	padding:0.3% 1%;
	margin:10px;
	background:url('../images/structure/panel_back.png');
}

#sort-panel{
	float:right;
	width:27%;
	
	margin:10px 0px;
}

#filter-panel span{
	font-weight:bold;
	margin-right:10px;
}

/*--- Modal Window's Form's Structure and styles ---*/
#insert-form{
	color:#111;
}
#insert-form label{
	display:block; 
	padding-bottom:2px; 
	color:#111; 
	font-weight:bold;
	text-align:right;
}

#insert-form div.form-left{
	clear:both;
	width:100px;
	float:left;
	margin-top:15px;
	border-top:solid 1px #CCC;
	padding-top:10px;
}

#insert-form div.form-right{
	float:left;
	width:300px;
	margin-top:15px;
	border-top:solid 1px #CCC;
	padding:10px 0px 0px 20px;
}

#insert-form input.txt, #insert-form textarea,  #insert-form select{
	width:240px; 
}

#insert-form textarea{
	height:100px;
}

#heading-title{
	background:url('../images/structure/widget-content-bg.png') repeat-x;
	height:26px;	
}

#heading-title h2{
	font-weight:bold; 
	color:#FFF;
	font-size:1em;
	line-height:2.1em;
	padding-left:6px;
}

.inline-help{
	background:url('../images/icons/info-frame.png') no-repeat left;
	padding-left:20px;
	clear:both;
	margin-top:4px;
	color:#333;
	display:block;
}
/********************************************/


/************** ASSETS PAGE *****************/

/*--- Tab pane ---*/
#tabs-container {
	padding:0% 3% 4% 3%;
	background:#F9F9F9;
	border:solid 1px #DDD;
	border-width:0 1px 1px 1px;
	min-height:150px;
}

/*--- Left and Right Panels ---*/
#tree-panel{
	float:left; 
	width:28%;
	background:#EDEDED;
	border:solid 1px #DDD;
	min-height:434px;
	margin-left:2%;
}

#files-panel{
	float:left; 
	width:64%;
	margin-left:4%;
	min-height:440px;
}

/*--- Files Tree Styles ---*/
.filetree li {
	padding: 3px 0 2px 16px;
}

.filetree span.folder, .filetree span.file {
	padding: 1px 0 1px 16px; 
	display: block;
}

.filetree span.folder {
	background: url('../images/icons/folder-open.png') 0 0 no-repeat; 
}

.filetree li.expandable span.folder {
	background: url('../images/icons/folder.png') 0 0 no-repeat; 
}

.filetree span.file {
	background: url('../images/icons/view.png') 0 0 no-repeat; 
}

/*--- Elements Sorting ---*/
#sortable { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
}

#sortable li {
	margin: 1% 1% 1% 0; 
	padding: 6px 1px 1px 1px; 
	float: left; 
	width: 100px; 
	height: 90px; 
	text-align: center; 
	cursor:move;
}

#sortable li a{
	font-size:1em; 
	color:#111; 
	display:block; 
	font-weight:bold;
}

#sortable li a:hover{
	text-decoration:underline;
}

#sortable2 {
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	width: 100%; 
}

#sortable2 li { 
	margin: 0 3px 6px 3px; 
	padding: 0.4em 0em 0.4em 2.1em; 
	font-size: 1em; 
	height: 18px; 
	background:#FEFEFE url('../images/icons/folder.png') no-repeat 10px 6px;
}

#sortable2 li span {
	position: absolute; 
	margin-left: -1.3em;
}
/********************************************/


/*************** TASKS PAGE *****************/

/* --- COMMENT BLOCKS --- */
.comment-block{
	width:98%;
	border:solid 1px #CCC;
	padding:10px;
	clear:both;
}

.comment-block img{
	float:left; 
	width:48px;
	height:48px;
	padding-top:10px;
}

.comment-block a.reply{
	background:url('../images/icons/comments.png') no-repeat left;
	padding-left:20px;
	line-height:1.6em;	
	float:right;
	color:#113b47;
	font-size:0.9em;
}

a.add-comment{
	background:url('../images/icons/comments_add.png') no-repeat left;
	padding-left:20px;
	line-height:1.4em;
	float:right;
	color:#113b47;
	font-size:1.1em;
	margin-bottom:10px;
}

h4.commenter{
	font-weight:bold;	
	padding:10px;
	background:#fff8d3;
	line-height:2.2em;
	display:block;
}

h4.commenter a{
	font-weight:bold;
	color:#111;
	text-decoration:none;
	background:none;
	font-size:1.2em;
	padding:0;
	float:left;
}

h3.comments-main-title{
	float:left;
}

.comment-block p{
	
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	color:#fff;
	background:#075698; /* default background for browsers without gradient support */
	
	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
	background:-moz-linear-gradient(top, #2e88c4, #075698);
	background:-o-linear-gradient(top, #2e88c4, #075698);
	background:linear-gradient(top, #2e88c4, #075698);
}

/* creates triangle */
.comment-block p:after{
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-40px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	width:0;
	height:0;
	border-width:20px 0 20px 20px; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#075698 transparent transparent; 
}

.comment-block p.left{
	width:84%;
	margin-left:100px;
	background:#e1e1e1;
	color:#000;
}

/* creates triangle */
.comment-block p.left:after{
	top:16px; 
	left:-80px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:15px 40px 0; /* vary these values to change the angle of the vertex */
	border-color:transparent #e1e1e1 transparent transparent; 
}


/* --- TASKS SECTION PARTICIPANTS LIST STYLES --- */

#filterable-form{
	margin-top:20px;
}

#filterable-form label{
	font-weight:bold;
	padding:0px 10px 0px 10px;
	font-size:1.1em;
}

ul#participants-list{ 
	margin: 28px 0 0 10px; 
	padding: 0; 
	list-style: none; 
}

ul#participants-list li{
	width: 120px; 
	height: 160px; 
	display: block; 
	float: left; 
	margin-right: 24px; 
	overflow: hidden; 
}

ul#participants-list li img{
	width:120px; 
	height:120px;
}

ul#participants-list li a{
	display: block; 
	width: 163px; 
	height: 120px; 
	overflow: hidden; 
	border: 1px solid #CDCDCD; 
	background: #eee;
	
}

ul#participants-list li p{
	font-size: 0.8em; 
	line-height: 15px;  
	margin: 5px 0; 
	font-size:0.9em;
}

/* --- INNER TOOLTIP --- */
.tooltip {
	display:none;
	background:transparent url('../images/tooltip/black_arrow.png');
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}
/********************************************/


/************* DASHBOARD PAGE ***************/
.column { 
	width: 33%; 
	float: left; 
	padding-bottom: 100px; 
	margin-left:3px;
}

.portlet {
	margin: 0 1em 1em 0;
}

.portlet-header { 
	margin: 0.3em; 
	padding: 3px 2px 3px 6px; 
	cursor:move;
}

.portlet-header .ui-icon { 
	float: right; 
	cursor:pointer;
}

.portlet-content { 
	padding: 0.4em; 
}

.ui-sortable-placeholder {
	border: 1px dotted black; 
	visibility: visible !important; 
	height: 50px !important; 
}

.ui-sortable-placeholder * {
	visibility: hidden;
}

.members-list-wrap{
	height:300px;
	overflow:hidden;
}
.members-list li {
	padding-bottom:10px;

}

.members-list li img{
  float:left; padding:6px 6px 0px 0px;
}

.members-list span{
	border-bottom:dotted 1px #CCC;
	clear:both;
	display:block;
	width:100%;
	margin-bottom:10px;
}

.members-list li p.member-info{
	line-height:1.4em;
	font-size:0.9em;
}

.task-icon{
	position:absolute;
	right:12px;
	top:10px;
	z-index:10;
	background-repeat: no-repeat; 
	background-position:right;
	font-weight:bold;
	font-size:0.8em;
	padding-right:20px;
}

.task-icon.high-priority{
	background-image:url('../images/icons/tasks/task-urgent.png');
	color:#be1111;
}

.task-icon.medium-priority{
	background-image:url('../images/icons/tasks/task-medium.png');
	color:#d6a73e;
}

.task-icon.low-priority{
	background-image:url('../images/icons/tasks/task-normal.png');
	color:#11a13c;
}

.task-content-back{
	background:#FEFEFE;
}


.scroll-pane {
	overflow: auto; 
	width: 99%; 
	float:left; 
}

.scroll-content {
	width: 670px; 
	float: left; 
	background:none;
}

.scroll-content-item {
	padding:6px; 
	width: 100px; 
	height: 100px; 
	float: left; 
	margin: 10px; 
	font-size: 1em; 
	text-align: center; 
	border:solid 1px #CCC;
}

* html .scroll-content-item { 
	display: inline; 
} /* IE6 float double margin bug */

.scroll-bar-wrap {
	clear: left; 
	padding: 0 4px 0 2px; 
	margin: 0 4px 2px 8px; 
}

.scroll-bar-wrap .ui-slider {
	background: none; 
	border:0; 
	height: 2em; 
	margin: 0 auto;  
}

.scroll-bar-wrap .ui-handle-helper-parent {
	position: relative; 
	width: 100%; 
	height: 100%; 
	margin: 0 auto; 
}

.scroll-bar-wrap .ui-slider-handle {
	top:.2em; 
	height: 1.5em;
}

.scroll-bar-wrap .ui-slider-handle .ui-icon { 
	margin: -8px auto 0; 
	position: relative; 
	top: 50%; 
}

p.info-block{
	padding:0px 10px; 
	font-size:0.9em;
}

p.info-block:first-letter{
	font-size:2em;
}


div.chart-container{
	margin:20px 0px;
}
/********************************************/

/************** THEMES PAGE *****************/
.theme-frame{
	float:left; 
	background-color:#EEE;
	border:solid 1px #DDD;
	padding:12px;
	margin-right:20px;
}

.theme-frame.active{
	background-color:#999;
}

.theme-frame p{
	font-size:1.1em;
	text-align:center;
	font-weight:bold;
	padding-top:10px;
}

#themeform{
	width:960px; 
	margin:0px auto;
}

#themeform label{
	cursor:pointer;
}

/********************************************/