path: root/library/jRange/demo/main.less

@font-family: 'Raleway' sans-serif;
html, body{
	height: 100%;
	width: 100%;
}
body{
	font-family: Helvetica Neue, Helvetica, Arial sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #434343;
}
a{
	text-decoration: none;
}
pre code{
	line-height: 1.5;
}
.container{
	width: 1130px;
	padding: 0 20px;
	margin: 0px auto;
}
.text-container{
	width: 900px;
	position: relative;
	margin: 0px auto;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.pane{
	position: relative;
	width: 100%;
	height: 50%;
	min-height: 450px;
}
.body{
	position: relative;
}
section.header{
	background-color: #606c88;

	background: -webkit-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Chrome 10+, Saf5.1+ */
	background:    -moz-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* FF3.6+ */
	background:     -ms-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* IE10 */
	background:      -o-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Opera 11.10+ */
	background:         linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* W3C */

	// background-image: radial-gradient(50% 102%, #3cb3db 48%, #2e6c9a 100%);
	footer{
		position: absolute;
		width: 100%;
		bottom: 0;
		padding: 10px 30px;
		box-sizing: border-box;
	}
}
.left{
	float: left;
	text-align: left;
}
.right{
	float: right;
	text-align: right;
}
div.header{
	color: #fff;
	width: 600px;
	text-align: center;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	// background-color: #333;
	border-radius: 5px;
	h1, h2{
		font-family: @font-family;
		font-weight: 100;
		line-height: 1;
		margin: 0;
	}
	h1{
		font-size: 72px;
		margin-bottom: 25px;
	}
}
section.demo{
	h2, h3{
		font-family: @font-family;
		font-weight: 300;
		line-height: 1;
		margin: 0;
		text-align: center;
	}
	h2{
		font-size: 48px;
		margin-top: 1em;
	}
	h3{
		font-size: 28px;
		margin: 0.8em 0 1em;
	}
	.demo-container{
		margin: 40px 0 80px;
	}
	.demo-section{
		margin: 20px 0;
		clear: both;
		.demo-code{
			width: 50%;
			float: left;
		}
		.demo-output{
			margin-left: 50%;
			padding: 50px 0;
		}
		.slider-container{
			margin: 0 auto;
		}
	}
	.text-container{
		h2{
			margin-top: 3em;
		}
	}
	.form-vertical{
		width: 200px;
		float: left;
	}
	.image-container{
		margin-left: 200px;
		padding: 1px;
		border: 1px solid #eee;
		// background-color: #333;
	}
	.form-group{
		margin-bottom: 20px;
	}
	label{
		color: #999;
		font-size: 13px;
		display: block;
	}
	input{
		width: 150px;
		margin-top: 3px;
		// border-radius: 2px;
		border: 1px solid #999;
		border-width: 0 0 1px 0;
		padding: 3px 0 3px;
		transition: 0.3s all;
		// color: #999;
		&:focus, &:active{
			outline: none;
			border-color: #2fc7ff;
			box-shadow: 0 1px 3px -3px #2fc7ff;
			color: #000;
		}
	}
	button{
		position: relative;
		overflow: visible;
		display: inline-block;
		padding: 0.3em 1em;
		border: 1px solid #d4d4d4;
		margin: 0;
		text-decoration: none;
		text-align: center;
		text-shadow: 1px 1px 0 #fff;
		font-size: 12px;
		color: #333;
		white-space: nowrap;
		cursor: pointer;
		outline: none;
		background-color: #ececec;
		background-image: linear-gradient(#f4f4f4, #ececec);
		background-clip: padding-box;
		border-radius: 0.2em;
		zoom: 1;
		transition: background-image 0.3s;
		&:hover, &:active{
			border-color: #3072b3;
			border-bottom-color: #2a65a0;
			text-decoration: none;
			text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
			color: #fff;
			background-color: #3c8dde;
			background-image: linear-gradient(#599bdc, #3072b3);
		}
	}
	p{
		font-family: @font-family;
		margin: 1em auto;
	}
	.footer{
		margin-top: 80px;
		text-align: center;
	}
	.large-github{
		display: inline-block;
		border: 1px solid #21b0ff;
		font-weight: 400;
		font-family: @font-family;
		text-shadow: none;
		background-color: #fff;
		background-image: none;
		padding: 8px 25px;
		color: #21b0ff;
		font-size: 18px;
		border-radius: 25px;
		&:hover, &:active{
			background-color: #21b0ff;
			color: #fff;
			background-image: none;
			text-shadow: none;
		}
	}
}
.two-coloumn{
	em{
		font-weight: normal;
		text-decoration: none;
		font-style: normal;
		display: inline-block;
		width: 85px;
	}
}
.plugin-options{
	font-size: 14px;
	margin-bottom: 40px;
	width: 900px;
	font-weight: 200;
	td, th{
		padding: 8px ;
		text-align: left;
		vertical-align: top;
		&:first-child{
			font-weight: bold;
		}
	}
	td{
		&:nth-child(2), &:nth-child(3){
			font-size: 13px;
			color: #999;
		}
		p{
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			margin: 4px 0;
			&:first-child{
				margin-top: 0;
			}
		}
	}
	th{
		background-color: #358ccb;
		color: #fff;
	}
	tr{
		&:nth-child(2n + 1){
			td{
				background-color: #f5f5f5;
			}
		}
	}
	small{
		display: block;
		// white-space: nowrap;
	}
	ul{
		list-style: none;
		padding: 0;
		ul{
			list-style: circle inside;
			// padding-left: 25px;
		}
	}
}
section.footer{
	margin-top: 80px;
	padding: 30px;
	text-align: center;
	background-color: #333;
	color: #999;
	font-weight: 300;
	font-size: 13px;
	p{
		margin: 5px 0;
	}
	a{
		color: #fff;
	}
}