@import "reset.less";

// Define variables
@base-url: 'http://localhost/~imrane/revmgr/sales/app';

// Define colors
@gray-txt: #BFBFBF;
@title-stroke: #3a3c6f;

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

// Define sizes
@h1Size: 2em;

.title-underline{
	font-size: 36px; 
	margin-top: 30px; 
	color: #333; 
	border-bottom: 1px solid #EBEBEB;
	padding-bottom: 15px;
	margin-bottom: 30px; 
	width: 96%
}
.green-btn{
	background: url(../img/green-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;
}
.green-txt{ color: #4dfb40;}
.clr{ clear: both;}
 
h1 { font-size: @h1Size; }
h2 { font-size: @h1Size * .8; }
h3 { font-size: @h1Size * .6; }
h4 { font-size: @h1Size * .4; }
h5 { font-size: @h1Size * .2; }

body { font-family: Arial, Helvetica, sans-serif; }

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

#contactus-error{
	display: none;
	font-size: 12px;
	margin-bottom: 10px;
	width: 480px;
}

#header-wrap{
	background:#ffffff url(../img/home-header-bg.jpg) repeat-x left top;
	height: 69px;
	
	#header{
		width: 950px;
		margin: 0 auto;
		
		img { margin: 20px 0 0 0;}
		ul	{ 
				float: right; 
				margin: 40px 30px 0 0;
		
			li 	{ 	display: inline-block;
			 		margin-right: 5px;
			 		font-size: 14px;
		
				a	{ 	color: @gray-txt; text-decoration: none; 
					&:hover{ color: white;}
					&.selected{ color: white;}
					
					}
			
			}
		
		}
	
	}
	
	
}

#banner-wrap{
	background: url(../img/header-bg-blue.jpg);
	height: 310px;
	
	#feature{
		width: 950px;
		margin: 0 auto;
		position: relative;
		
		#left-feature{
			position: absolute; top: 10px; left: 0px;
			width: 450px;
			h1 { 
				padding-top: 30px;
				line-height: 40px;
				color: white; font-family: Nobile;
				text-shadow: -2px 0 @title-stroke, 0 2px @title-stroke, 2px 0 @title-stroke, 0 -2px @title-stroke;
			}
			p {
				padding-top: 10px;
				line-height: 20px;
				font-size: 18px;
				letter-spacing: 1.2px;
				color: white;
				text-shadow: 2px 0 black; 
			}
			img {
				margin: 25px 0 0 -2px;
				cursor: pointer;
				&.signup {margin-left: 5px;}
			}
		}
		
		#right-feature{
			position: absolute; top: 10px; right: -20px;
			width: 500px;
			img { }
		}
	}
	
}

#available-on-wrap{
	height: 75px;
	background: #F4F4F4;
	border-top: 1px solid @title-stroke; border-bottom: 1px solid #999999;
	
	#available-on{
		width: 950px;
		margin: 0 auto;
		h2 { padding-top: 20px; line-height: 30px; float: left;}
		ul{
			li{ 
				display: inline;
				float: left;
				margin: 15px 30px 0px 100px;
				overflow: hidden;
				a { display:block; padding-top: 66px;}
				&.iphone{ 
					height: 50px;
					a{ background: url(../img/ios.png) 0 0 no-repeat; width: 70px;}
				}
				&.android{
					height: 50px;
					a{ background: url(../img/android.png) 0 0 no-repeat; width: 120px;}
				}
				&.blackberry{
					height: 50px;
					margin-left: 50px;
					a{ background: url(../img/blackberry.png) 0 0 no-repeat; width: 180px;}
				}
			} 
		}
	}
	
}

#content-wrap{
	margin: 10px 0 50px 0;
	
	#content{
		width: 950px;
		margin: 0 auto;
	

	}
}

#features-testimonials{
	height: 500px;

	#features-wrap{
			width: 550px; 
			float: left;
			border-right: 1px dashed #F1F1F1;
			.feature{
				width: 520px;
				padding: 15px;
				img{ border: 2px solid #F4F4F4; float: left; margin-right: 20px}
				h3{ color: #48495D; font-weight: bold; font-size: 16px;}
				p{ margin-top: 5px; line-height: 20px; color: #B8B8B8; font-size: 12px;}
				clear: both;
			}
		}
	
	#testimonial-wrap{
		width: 350px;
		float: left;
		margin: 20px 0 0 20px;
		.testimonial{
			font-size: 14px;
			float: left;
			span{ color: #48495D;}
			.top{ 
				background: white url(../img/testimonial-top.jpg);
				width: 317px; height: 4px; float: left; overflow: hidden;
			}
			.body{
				background: white url(../img/testimonial-body.jpg);
				width: 317px; float: left;
				p{ color: #467fdd; margin: 20px; line-height: 20px; text-shadow: 1px 0 white; }
			}
			.bottom{
				background: white url(../img/testimonial-bottom.jpg);
				width: 317px; height: 20px; float: left;
				p{ color: #467fdd; margin: 20px;}
			}
			.client{
				width: 317px;
				float: left;
				margin-bottom: 20px;
				img{ float: left; margin: 5px 10px 0 10px;}
				p{ line-height: 25px; color: #48495D; font-weight: bold;}
				span{ color: #B8B8B8; font-size: 12px;}
			}	
		}	
	}
	
}

#email-overlay{
	color: #fff;
	width: 200px; height: 350px;
	position: absolute; top: -200px;	right: 0px; background: #000;
	z-index: 200; opacity: 0.85;
	padding: 20px;
	//border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	
	h3 { border-bottom: 1px solid #fff; padding-bottom: 10px;}
	p { font-size: 10px; font-weight: normal; margin: 10px 0 10px 0; line-height: 15px}
	input { display: block; margin: 5px 0 10px 0; border: 1px solid #ebebeb; padding: 5px;}
	input[type="submit"]{ 
		border: none;
		margin-top: 20px;}
		
	#email-error{ 
		color: #e7002c;
		a{
			display: block;
			color: #467FDD;
		}
	}
	#optout{ 
		position: absolute; 
		bottom: 20px; 
		font-size: 12px; 
		color: #fff; 
		text-decoration: none;
		&:hover{ color: #e7002c;}
		}
	
}

#footer-wrap{
	clear: both;
	background: #1b1d34;
	height: 200px;
	#footer{
		width: 950px;
		margin: 0 auto;
		.column{
			padding-top: 20px;
			margin-left: 15px;
			width: 220px;
			display: inline;
			float: left;
			dl{
				dt{ color: #7779a5; margin-bottom: 5px;}
				dd{ 
					padding: 2px;
					a{ color: white; text-decoration: none; font-size: 12px; }
				}
			}
		}
	}
}

#pricing{
	height: 500px;
		
	#description{
		width: 250px;
		margin-right: 50px;
		float: left;
		h3{
			color: #34A92B;
			font-size: 36px; line-height: 40px;
			margin-bottom: 20px;
		}
		p{
			color: #333;
			font-size: 14px;
			line-height: 20px;
			margin-bottom: 20px;
		}	
	}
	
	#details{
		width: 600px;
		background: #EBEBEB;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		float: left;
		
		#top{
			width: 500px;
			margin: 0 auto;
			padding: 10px 0 10px 0 ;
			border-bottom: 1px solid #D0D0D0;
			
			h3{
				text-align: center;
				font-family: Georgia, Serif;
				line-height: 75px;
				span{
					color: #e70075;
					font-style: italic;
					font-size: 75px;
					text-shadow: 2px 1px black;
				}
			}
		}
		
		#bottom{
			width: 500px;
			border-top: 1px solid #fff;
			margin: 0 auto;
			ul{
				display: inline-block;
				margin: 20px 0 20px 0;
				padding: 5px 15px 5px 15px;
				&:first-child{ float: left; border-right: 1px solid #D0D0D0; }
				&:last-child{  border-left: 1px solid #fff; padding-left: 25px;}
				li{ 
					color: #333; 
					font-size: 14px; 
					padding: 8px 0;}
			}
		}
	}
	
	
}

#contactus{
	height: 500px;
	
	form{
		
		ul{
			li{ 
				margin: 0 0 10px 0; 
				label{ 	display: inline-block; 
						text-align: right; 
						margin-right: 10px; 
						width: 150px; 
						color: #333;
						&.message{vertical-align: top; margin-top: 10px;}		
				}
				
				input, textarea{
				 	width: 340px;
					padding: 7px;
					font-size: 14px;
				}
				#submit{
					margin-left: 405px;
					cursor: pointer;
				}
			}
		}
	}
	
}
	
#faq{
	h3{
		margin-top: 30px;
		color: #34A92B;
		font-size: 16px
	}

	dl{
		margin-left: 20px;
		dt{
			color:#8F9AA3;
			font-size: 14px;
			cursor: pointer;
			padding-left: 25px;
			margin-top: 15px;
			position: relative;
			&:hover{ color:#5f6a73;}
			.icon{ 
				height:12px;
				left:0;
				position:absolute;
				top:3px;
				width:12px;
				background: url(../img/bullets.png) no-repeat
				}
			&.opened .icon{background-position:left bottom;}
		}
		
		dd{
			font-size:12px;
			color:#717f89;
			line-height:1.5;
			padding:10px 0 0 25px;
			width:580px;
			display:none;
		}
	
	}

}

#faq-admin{
	
	#add{
		a{ text-decoration: none; font-size: 12px; }
		#new-faq{
			display:none; 
			width: 92%;
			border: 1px solid #F1F1F1; 
			background: #FAFAFA;
			padding: 10px; margin: 10px 0 10px 0;
			
			ul{
				li{
					padding: 5px;
					label{
						font-size: 12px;
					}
					input[type=text]{
						border: 1px solid #F1F1F1;
						padding: 5px;
						width: 300px;
					}
				}
			}
			
		}
		
	}

	#faq-list{
		ul{
			li{
				&.i{width: 200px;}
				&.ii{width: 550px;}
				&.iii{width: 50px;}
				&.iv{width: 50px;}
				font-size: 12px;
			}
			&.header {
				border: 1px solid #F1F1F1;
				background: #FAFAFA;
				padding: 5px;
				margin-top: 10px;
				li{ display: inline-block;}
			}
		}
			
		#view{
			ul{
				padding: 5px;
				li{display: inline-block;}
			}	
		}
		
		#edit{
			display: none;
		}
	}
	
}

#about-us{
	height: 500px;
	p { line-height: 22px; color: #989797; margin-bottom: 30px; font-size: 14px; width: 95%;}
	h3 { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #EBEBEB; width: 95%; }
	#team-member{
		width: 95%;
		p{ margin-bottom: 10px;	}
		img { float: left; height: 155px; width:222px; border: 1px solid #EBEBEB; margin-right: 20px; padding: 3px;	 }
		h4 { 
			font-size: 20px; margin-bottom: 10px;
			span { font-size: 12px; color: #989797;	font-style: italic;}
		}
		#links{
			float: left;
			width: 400px; height: 100px;
			a { 
				display: inline-block; 
				margin-right: 30px;
				height: 30px;
				text-indent: 35px; 
				font-size: 12px; 
				line-height: 30px;
				text-decoration: none; 
				color: #48495D; 
				&.twitter { background: url(../img/twitter.png) no-repeat left top;}
				&.email {background: url(../img/mail-icon.png) no-repeat left top;}
			}
		}
	}
}
	
#privacy-policy{

	h3{
		margin: 30px 0 10px 0;
		font-size: 16px;
		font-weight: bold;
	}
	p{
		width: 900px;
		margin: 10px 0 10px 0;
		font-size: 13px;
		line-height: 20px;
	}
	ul{
		li{
			list-style-type: disc;
			margin: 0 0 10px 15px;
			font-size: 13px;
		}
	}
	#address{
		margin-top: 20px;
		ul{
			li{
				list-style: none;
				margin-left: 0px;
			}
		}
	}

}
	
#affiliates{height: 500px;}
#terms-of-service{
	ol{margin:0;padding:0}p{margin:0}
	.c9{width:468pt;background-color:#ffffff;padding:72pt 72pt 72pt 72pt}
	.c10{list-style-type:decimal;margin:0;padding:0}
	.c4{list-style-type:disc;margin:0;padding:0}
	.c6{padding-left:0pt;margin-left:36pt}
	.c1{height:11pt;direction:ltr}
	.c0{font-size:9pt}
	.c2{direction:ltr}
	.c7{font-size:16pt}
	.c8{text-decoration:underline}
	.c5{font-size:14pt}
	.c3{font-weight:bold}
}
#api-docs{height: 500px;}