//@import "reset.less";

//------------COLORS-------------------------//

// GREEN
@green: #34a92b;
@darkgreen: #078a06;
@border-green: #76d376;
@background-green: #CCFFCC;

// BLUE
@border-blue: #d5f1fc;
@background-blue: #f7fcfe;
@lightblue: #2BBAFD;

// GRAY
@darkgray: #333333;
@lightgray: #dfdfdf;
@mediumgray: #999999;
@border-gray: #F1F1F1;
@background-gray: #FAFAFA;
@border-darkgray: #FCFCFC;

// PINK
@pink: #dc66fe;

// BLACK
@offblack: #313131;

// PURPLE
@background-purple: #fbf8fe;
@darkpurple: #6715ba;

// RED
@red: #8C3838;
@border-red: #FFD0CC;
@background-red: #FFE4E0;

.hidden {
	display: none;
}

//------------TEXT CLASSES------------------------//

.green-txt{ color: @green; }
.offblack-txt{ color: @offblack; }

//------------BODY--------------------------------//

body {
	background: #ffffff url(../images/v2/body-bg-v2.jpg) repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: @darkgray;
	padding: 0px;
	margin: 0px;
	line-height:normal;
}

//------------RESET------------------------------//

form, input, h3 { padding:0px; margin:0px;}

a { outline:none; text-decoration:none;}
a:hover { outline:none;}

img { border:none;}
img a { border:none;}

.clr { clear:both;}
.flt_lft { float:left;}
.flt_rht { float:right;}

//------------WRAPPER----------------------------//

#wrapper{
	width:950px;
	margin:0px auto;
    padding-bottom: 50px;
}

//------------SIGNUP/LOGIN FORM ----------------//

#center-wrap{
	border: 1px solid @border-gray; //#e4e4eb; 
	background: @background-gray; 
	width: 950px; 
	#login-form{
		margin: 0 auto;
		width: 302px;
		padding-top: 10px;
		#login-status{
			margin: 10px 0 10px 0;
		}
		h2{
			font-size:14px;
			border-bottom: 1px solid #e4e4eb;
			width: 290px;
			padding-bottom: 7px;
			margin-bottom: 10px;
			color: #313131;
		}
		label {
			float:left;
			line-height: 25px;
			margin-right: 10px;
			width: 60px;
			text-align: right;
			color: gray;
		}
		input[type=text], input[type=password] {
			display: block;
			padding: 5px;
			border: 1px solid #BBB;
			margin-bottom: 10px;
			width: 208px;
		}
		a{
			display: block;
			float: left;
			margin: 0 0 10px 70px;
			color: #2BBAFD;
		}
		input[type=submit]{
			clear: both;
			float: left;
			margin: 0 0 20px 70px;
		}
	}	
	.index-form{
		margin: 0 auto; padding-top: 10px;
		h2{
			font-size:14px; 
			border-bottom: 1px solid @border-gray; //#e4e4eb; 
			padding-bottom: 7px; 
			margin-bottom: 10px; 
			color: @darkgray; //#313131;
		}
		label{
			float:left; 
			margin-right: 10px; 
			line-height: 25px; 
			text-align: right; 
			color: gray;
		}
		input[type=text], input[type=password]{
			padding: 5px; border: 1px solid #BBB;
		}
		ul{
			list-style: none;
			li{
				display: inline-block; 
				margin: 5px;
			}
		}
	}
	#signup-form{
		width: 400px;
		label{ width: 100px;}
		input[type=text], input[type=password] { width: 165px;}
		input[name='subs[]']{ width: 100px; }
		input[name='total_rooms[]']{ width: 50px;}
		img {vertical-align: middle;}
		#subs{
			img {height: 20px; width: 20px; }
		}
		#add-sub { 
			clear: both; 
			float: right; 
			margin: 5px 68px 0 0;
			img{ height: 20px; width: 20px;}
			span { line-height: 25px;}
		}
		input[type=submit] {
			clear: both; 
			float:right; 
			margin: 5px 68px 0 0;
		}
		.dash-spacer { 
			clear:both; 
			border-bottom: 1px dashed @border-gray; 
			width: 100%; 
			margin: 10px 0 10px 0;
		}
	}
	#forget-password-form, #new-password-form{
		width: 400px;
		label{ width: 100px;}
		input[type=text], input[type=password] { width: 165px;}
		input[name='subs[]']{ width: 100px; }
		input[name='total_rooms[]']{ width: 50px;}
		img {vertical-align: middle;}
		#subs{
			img {height: 20px; width: 20px; }
		}
		#add-sub { 
			clear: both; 
			float: right; 
			margin: 5px 68px 0 0;
			img{ height: 20px; width: 20px;}
			span { line-height: 25px;}
		}
		input[type=submit] {
			clear: both; 
			float:right; 
			margin: 5px 68px 0 0;
		}
		.dash-spacer { 
			clear:both; 
			border-bottom: 1px dashed @border-gray; 
			width: 100%; 
			margin: 10px 0 10px 0;
		}
	}
}

//------------MAIN MENU-------------------------//

#header {
	height: 69px;
	
	#logo{
		width: 130px; margin: 15px 0 0 0; float:left;
		p{ color: #dfdfdf; margin: 2px 0 0 25px;}
	}
	
	#main-menu{
		float: left; margin: 5px;
		ul{
			list-style: none;
			li{ 
				&.dash-active{
					background:url(../images/v2/pie-active.png) no-repeat left top;
					height: 37px;
					padding: 3px 0 0 50px;
					a{ color:#fff;}
				}
				&.dash-inactive{
					background:url(../images/v2/pie-inactive.png) no-repeat left top;
					height: 37px;
					padding: 3px 0 0 50px;
				}
				&.manage-active{
					background:url(../images/v2/pencil-active.png) no-repeat left top; 
					height: 37px; padding: 3px 0 0 50px;
					a{ color:#fff;}
				}
				&.manage-inactive{
					background:url(../images/v2/pencil-inactive.png) no-repeat left top; 
					height: 37px; padding: 3px 0 0 50px;
				}
				&.settings-active{
					background:url(../images/v2/gear-active.png) no-repeat left top; 
					height: 37px; padding: 3px 0 0 40px;
					a{ color:#fff;}
				}
				&.settings-inactive{
					background:url(../images/v2/gear-inactive.png) no-repeat left top;
					height: 37px; padding: 3px 0 0 40px; margin-right: 0px;
				}
				display: inline-block; margin: 0 35px 0 0;
				a{ 
					color: @lightgray; font-size: 16px; line-height: 18px;
					span{
						display: block; color: @mediumgray; font-size: 11px;
					}
				}
			}
		}
	}
	
	#login{
		margin-top: 10px;
		float:right;
		ul{
			list-style: none;
			li{
				display:block; float: left; padding: 0 10px 0 0; border-right: 1px solid @lightgray; margin: 0 0 0 10px;
				&.last{ border-right:none; }
				a{ color: @lightgray;}
			}
		}
	}
}

//------------SUB-NAV---------------------------//

#heading{
	background:url(../images/dotted-border.jpg) repeat-x left bottom;
	width: 950px;
	height: 53px;
	margin: 5px 0 10px 0;
	
	#main-heading{
		float:left;
		h1, p { display:inline;}
		h1 { line-height:53px; font-size:20px;}
		p { font-size: 12px; font-family: Georgia; color: @mediumgray;}
	}
	
	#sub-nav{
		float:right; padding-top:7px;
		ul { 
			list-style: none;
			li{ 
				display: inline-block; 
				margin: 0 10px 0 0;
				&.last{ margin-right: 0px;}
				a{ color: @pink;}
				&.active{
					padding: 2px 8px 2px 8px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					background: @pink;
					a{ color:#fff;}
				}
			}
		}
	}
}

//------------CONTENT---------------------------//

#content { width:950px; clear:both;}

//------------CALENDAR--------------------------//

/*---SHARED---*/
.calendar{
	border: 1px solid @border-gray;
	background: @background-gray;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 10px; width: 930px; height: 25px;
}

.ui-datepicker-trigger{
	vertical-align: middle;
	width: 25px;
	height:25px;
	margin-right:10px;
}

/*---DASH---*/
#dash-cal{
	
	label{
		line-height: 25px;
		margin: 0 20px 0 10px;
		color: @offblack;
	}
	
	#date{ 
		float: left;
		height: 25px; 
		display: inline;
		input[type=text]{
			border: 1px solid #CCC;
			padding: 5px;
			margin-right: 10px;
			text-align: right;
			font-style: italic;
			color: @mediumgray;
		}
		#back, #forward, .disabled{
			vertical-align: middle;
			cursor: pointer;
		}
		#forward { margin-right: 5px;}
                &.disabled {
                        #back, #forward { display:none }
                        .disabled {
                            display:inline !important;
                            &.forward { margin-right: 5px;}
                         }
                }
	}
	
	#company{
		float: left;
	}
	
	#submit{
		float: right;
	}
}

/*---MISSING AUDITS---*/
.missingAuditDate{
	span,a{
		border: 1px solid #dc9cf0 !important;
		background: #f1e4f5 url(../images/v2/missingBG.png) 50% 50% repeat-x !important; 
		font-weight: bold; 
		color: #c942f2 !important;
	}
	a{
		opacity: 0.35;
		cursor: pointer;
	}
}

//------------FUTURE FIGURES--------------------//

#future-parent{
	width: 950px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	letter-spacing: 5px;
	margin-top: 10px;
	.child{
		width: 284px;
		border: 1px solid @border-blue; 
		background: @background-blue;
		display: block;
		float:	left;
		margin: 0 5px 0 5px;
		vertical-align: middle;
		padding: 10px;
		letter-spacing: normal;
		text-align: left;
		h3 {
			margin-bottom: 10px;
			span { font-size: 10px; font-style: italic; color: @mediumgray;}
		}
		p { font-size: 20px;}
	}
}

//------------DASH TABLES-----------------------//

/*----SHARED---*/
.dash-table{
	width: 952px; margin-top:10px;
	ul { 
		height:	14px;
		list-style:none; 
		margin:0px; padding:7px;
		li {display:block; float: left;}
	}
	
	.head{
		background: #17182d;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		ul{
			li{ 
				color: #fff; font-weight: bold;
				&.one{padding-right:5px;}
			}
		}
	}
	
	.body{
		ul{
			&.odd{ background: @background-gray;}
			&.even{ background: #fff;}
		}
	}
	
	.footer{
		background: #fcf0ff; font-weight: bold;
		ul{
			li{
				&.one{padding-right:5px;}
			}
		}
	}
	
	.sub{
		li{
			color:#5a5a5a;
			&.one{padding-left:5px;}
			&.two{padding-left:-5px;}
		}
	}
	
	.parent{ 
		border-bottom: 1px dashed @border-gray; 
		background: @background-purple; 
		color: @darkpurple; 
		cursor: pointer;
		img{
			float:right;
			display: block;
		}
	}
	
	.one { float:left;}
	.two, .three, .four, .five, .six, .seven{ text-align:right;}
}

/*----REVENUE----*/
#rev-table{
	.one { width: 135px;}
	.two, .three, .four, .five, .six, .seven{ width: 130px;}
	.subtotal { 
		display: none; 
		background: @background-blue; 
		font-weight: bold; 
		border-top: 1px solid @border-blue;
	}
}

/*----TOOL TIP-----*/
#tooltip{
	position: fixed;
}
.chat-bubble {
	display: none;
  	background-color:#000;
	border:2px solid #fff;
	color: white;
 	font-size:11px;	 
	line-height:1.3em;
	margin:10px auto;
 	padding:10px;
	text-align:center;
	width: 100px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-box-shadow:0 0 5px #888888;
	-webkit-box-shadow:0 0 5px #888888;
}

/*----STATS------*/
#stats-table{
	.one { width: 135px;}
	.two, .three, .four, .five, .six, .seven{ width: 130px;}
}

/*----COMPETITION----*/
#comp-table{
	.one { width: 165px;}
	.two { width: 100px;} 
	.three, .four, .five, .six, .seven{ width: 130px;}
	.footer li.first { width: 175px;}
	.head li.first { width: 175px; }
}

/*-----OTHER--------*/
#other-table{
	.one { width: 600px;}
	.two, .three, .four { width: 100px;}
	.footer li.first { width: 605px;}
	.head li.first { width: 605px; }
}

/*-----ATTACHMENTS--------*/
#attach-table{
	.one { width: 700px;}
	.two, .three { width: 100px;}
	.footer li.first { width: 710px;}
	.head li.first { width: 710px; }
}


//------------CHARTS---------------------------//

#chart-holder{
	width: 950px;
	background: #FAFAFA;
	border: 1px solid #F1F1F1;
	margin-top: 10px;
	.gvChart{
		width: 700px;
		margin: auto;
	}
	.charttitle{
		text-align: center;
	    font-weight: bold;
	    font-size: 14px;
		margin-top: 20px;
	}
}

//------------DASH COMMENTS--------------------//

#dash-comments{
	height: 150px; 
	border: 1px solid @border-gray; 
	background: @background-gray; 
	margin-top: 20px; padding: 15px;
	h3 { 
		color: @green; 
		font-size: 18px; 
		margin: 0 0 10px -2px;}
	h4, p {
		float: left; margin: 0; padding: 0;
	}
	h4 {
		margin-right: 20px;
	}
}

//------------SIDE NAV-------------------------//

#side-nav{
	margin-top: 10px;
	float:left;
	width: 200px;
	border: 1px solid @border-gray;
	background: @background-gray;

	ul{
		margin: 0px; padding: 20px;
		li{
			list-style:none; 
			&.selected { 
				background: url(../images/icons/arrow-round.png) no-repeat 0px 8px;
				background-size: 14px 14px;
			}
			text-indent: 20px;
			line-height: 30px; 
			border-bottom: 1px solid @border-gray; 
			border-top: 1px solid @border-darkgray;
			&.first{ border-top:none;}
			&.last{ border-bottom:none;}
			a{ color: @lightblue;}
		}
	}
}

//------------MANAGE, ACCOUNT, SETTINGS CONTENT-------------//

/*
#################################
#								#
# THREE-PANEL LAYOUT			#
#								#
#################################
*/

#three-panel-1{
	margin-top: 10px;
	float:left;
	width: 200px;
	border: 1px solid @border-gray;
	background: @background-gray;

	ul{
		margin: 0px; padding: 20px;
		li{
			list-style:none; 
			&.selected { 
				background: url(../images/icons/arrow-round.png) no-repeat 0px 8px;
				background-size: 14px 14px;
			}
			text-indent: 20px;
			line-height: 30px; 
			border-bottom: 1px solid @border-gray; 
			border-top: 1px solid @border-darkgray;
			&.first{ border-top:none;}
			&.last{ border-bottom:none;}
			a{ color: @lightblue;}
		}
	}
}

#three-panel-2{
	margin: 10px 0 0 10px;
	float:left;
	width: 414px;
	border: 1px solid @border-gray;
	padding: 10px;
	.table{
		h3{ 
			background: @background-purple; 
			color: @darkpurple; 
			padding: 10px; 
			border: 1px solid @background-gray;
		}
		ul{
			height:	40px;
			&.parent{ 
				border-bottom: 1px dashed @border-gray;
				width:inherit;
				line-height: 40px;
				margin: 0; padding-left: 10px;
				list-style: none;
				font-weight: bold;
				img{ margin-right: 10px; vertical-align: middle; padding-bottom: 5px;	}
				span{ font-size: 10px; color: @mediumgray; font-weight: normal;}
			}
			&.sub{
				list-style: none;
				width: inherit;
				padding-left: 10px;
				margin: 0;
				li{
					padding-top:	10px;
					display: block;
					float:	left;
					input[type="text"]{ border: 1px solid @border-gray; padding: 5px; text-align: right; width: 110px;}
					#delete{ display: none; cursor: pointer;}
					input {
						margin-top: -5px;
					}
				}
			}
			&.odd{ background: @background-gray; }
			&.even{ background: #fff; }
			&.submit{
				float:right;	
				margin: 10px 5px 0 0;
			}
		}
	}
	.m-revenue{
		.one{ width: 62%; }
		.two{ width: 30%; }
		.three{ width: 4%}
	}
	.m-rooms{
		.one{ width: 62%; }
		.two{ width: 30%; }
		.three{ width: 4%}
	}
	.m-competition{
		.one{ width: 66%; }
		.two{ width: 33%; }
	}
	.m-payments{
		.one{ width: 62%; }
		.two{ width: 30%; }
		.three{ width: 4%}
	}
	.m-attach{
		.one{ 
			width: 75%; 
			img{ vertical-align: middle; margin-right: 5px;}
		}
		.two{ width: 14%; text-align: right; }
		.three{ width: 7%; text-align: right; }
	}
	.m-revenue-budgets{
		.one{ width: 66%; }
		.two{ width: 33%; }	
	}
	.s-competitor{
		.one{ width: 79%;}
		.two{
			width: 20%; 
			font-size: 10px; 
			color: @mediumgray;}
	}
	.s-users{
		.one{ width: 50%;
			span{ font-size: 10px; color: @mediumgray;} 
		}
		.two{ width: 39%; }
		.three{ width: 9%; }
	}
	.a-companies{
		.one{ width: 60%;}
		.two{ width: 12%; font-size: 10px; }
		.three{ width: 23%; font-size: 10px; color: @mediumgray;}
		.four{ width: 2%; font-size: 10px; color: @mediumgray;}
	}
}

#three-panel-3{
	margin: 10px 0 0 10px;
	float:left;
	width: 270px;
	border: 1px solid @border-gray;
	padding: 10px;
	.add{
		border: 1px solid @background-gray;
		h3{ background: @background-gray; padding: 10px; }
		form{ 
			background: #fff; 
			padding: 10px;
			ul{
				width:inherit;
				line-height: 40px;
				margin: 0; padding: 0;
				list-style: none;
				li{
					input[type=text]{
						border: 1px solid @border-gray;
						padding: 8px;
						&.input-blur{ color: #979797;}
					}
				}
			}
			
			
		}
	}
}

/*
#################################
#								#
# TWO-PANEL LAYOUT				#
#								#
#################################
*/

#two-panel-1{
	margin-top: 10px;
	float:left;
	width: 200px;
	border: 1px solid @border-gray;
	background: @background-gray;

	ul{
		margin: 0px; padding: 20px;
		li{
			list-style:none; 
			&.selected { 
				background: url(../images/icons/arrow-round.png) no-repeat 0px 8px;
				background-size: 14px 14px;
			}
			text-indent: 20px;
			line-height: 30px; 
			border-bottom: 1px solid @border-gray; 
			border-top: 1px solid @border-darkgray;
			&.first{ border-top:none;}
			&.last{ border-bottom:none;}
			a{ color: @lightblue;}
		}
	}
	
}

#two-panel-2{
	margin: 10px 0 0 10px;
	float:left;
	width: 716px;
	border: 1px solid @border-gray;
	padding: 10px;
	.table{
		h3{ 
			background: @background-purple; 
			color: @darkpurple; 
			padding: 10px; 
			border: 1px solid @background-gray;
		}
		ul{
			&.parent{ 
				border-bottom: 1px dashed @border-gray;
				width:inherit;
				line-height: 40px;
				margin: 0; padding-left: 10px;
				list-style: none;
				font-weight: bold;
				img{ margin-right: 10px; vertical-align: middle; padding-bottom: 5px;	}
				span{ font-size: 10px; color: @mediumgray; font-weight: normal;}
			}
			&.sub{
				list-style: none;
				width: inherit;
				padding-left: 10px;
				margin: 0;
				line-height: 40px;
				li{
					display: block;
					float: left;
					input[type="text"]{ border: 1px solid @border-gray; padding: 5px; text-align: right; width: 110px;}
					input[type="password"]{ border: 1px solid @border-gray; padding: 5px; text-align: right; width: 110px;}
				}
			}
			&.odd{ background: @background-gray; }
			&.even{ background: #fff; }
			&.submit{
				float:right;	
				margin: 10px 5px 0 0;
			}
		}
	}
	.m-future{
		.one{ width: 81%;}
		.two{ width: 18%;}
	}
	.m-audit{
		.one{ 
			width: 66%;
			vertical-align: top;
		}
		.two{
			width: 33%;
			.chzn-container{ 
				li { 
					display: block;
					float: none;
				}
			}
			textarea{ 
				padding: 5px;
				width: 220px;
				height: 200px;
				margin-top: 10px;
				border: 1px solid @mediumgray;
			}
		}
	}
	.m-room-budgets{
		.one{ width: 81%;}
		.two{ width: 18%;}
	}
	.a-info{
		.one{ width: 81%;}
		.two{ width: 18%;}
	}
}

/*
#################################
#								#
# BUTTONS						#
#								#
#################################
*/

.green-btn{
	background: url(../images/v2/signin-btn-bg.jpg) repeat-x left top;
	font-family: "Lucida Grande", Lucida, Verdana; 
	color: white;
	font-weight: bold;
	padding: 4px 12px 5px;
	border-style: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
}

.red-btn{
	background: url(../images/v2/cancel-btn-bg.jpg) repeat-x left top;
	font-family: "Lucida Grande", Lucida, Verdana; 
	color: white;
	font-weight: bold;
	padding: 4px 12px 5px;
	border-style: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
}

/*
#################################
#								#
# ICONS							#
#								#
#################################
*/

.erase-icon {
	position:			absolute;
	margin-left:		-6px;
	margin-top:			12px;
}

/*
#################################
#								#
# ERRORS/SUCCCESS				#
#								#
#################################
*/

.error{
	color: @red;
	font-weight: bold;
	background: @background-red url(../images/v2/icon_error.gif) no-repeat 10px 5px;
	padding: 0 0 0 40px;
	border: 1px solid @border-red;
	line-height: 24px;
}

#dash-error{
	width: 910px;
	margin-top: 10px;
}

#manage-error{
	margin-top: 10px;
}

.success{
	color: @darkgreen;
	font-weight: bold;
	background: @background-green url(../images/v2/icon_success.png) no-repeat 10px 5px;
	padding: 0 0 0 40px;
    border: 1px solid @border-green;
	line-height: 24px;
}

#success-manage{
	width: 655px;
	display: none;
}

#manage-status{
	margin-top: 10px;
}

.loading{
	font-family: 'Lucida Grande';
	color:  @lightblue;
	font-weight: bold;
	background: #fff url(../images/icons/ajax-loader-blue.gif) no-repeat 10px 4px;
	padding: 0 0 0 35px;
    border: 5px solid @border-blue;
	border-radius: 5px;
	line-height: 24px;
}

#add-loading{
	margin-top: 10px;
}

#edit-saving{
	display: none;
	width: 200px;
}

.edit-success{
	font-family: 'Lucida Grande';
	color: @darkgreen;
	font-weight: bold;
	background: @background-green url(../images/v2/icon_success.png) no-repeat 10px 4px;
	padding: 0 0 0 35px;
    border: 5px solid @border-green;
	border-radius: 5px;
	line-height: 24px;
}

.edit-error{
	font-family: 'Lucida Grande';
	color: @red;
	font-weight: bold;
	background: @background-red url(../images/v2/icon_error.gif) no-repeat 10px 4px;
	padding: 0 0 0 35px;
    border: 5px solid @border-red;
	border-radius: 5px;
	line-height: 24px;
}

/*
#################################
#								#
# Demo account					#
#								#
#################################
*/
#demo-creds{
	margin:	30px 30px 0 0;
    float:	right;
    border: 1px dashed #e4e4eb;
    background: #f0fff0;
    width: 200px;
    padding: 20px;

		h2{ font-size: 12px;}
		li{ clear: both; list-style-type:none;}
		ul{ line-height: 20px; padding: 0;}
		ul span{ color: #00afd6; font-weight: normal;}
}