@charset "utf-8";
/* CSS Document */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
.strength_meter{
position: absolute;
left: 0px;
top: 29px;
width: 100%;
height: 43px;
z-index:-1;
border-radius:5px;
}
.button_strength {
text-decoration: none;
color: #FFF;
font-size: 13px;
}
.strength_meter div{
	width:0%;
height: 43px;
text-align: right;
color: #000;
line-height: 43px;
-webkit-transition: all .3s ease-in-out;
padding-right: 12px;
border-radius:5px;
}
.strength_meter div p{
position: absolute;
top: 48px;
right: -11px;
color: #FFF;
font-size:13px;
}

.veryweak{
	background-color: #FFA0A0;
border-color: #F04040!important;
width:25%!important;
}
.weak{
background-color: #FFB78C;
border-color: #FF853C!important;
width:50%!important;
}
.medium{
background-color: #FFEC8B;
border-color: #FC0!important;
width:75%!important;
}
.strong{
background-color: #C3FF88;
border-color: #8DFF1C!important;
width:100%!important;
}

/*SITE STYLING*/
html{
	background:#4EC094;
	font-family: 'Lato', sans-serif;
	color:white;
}
.clear{
	clear:both;
	display:block;
}
h1{
	color:#4EC094;
	font-size:50px;
	text-align:center;
	padding-top:30px;
	margin-bottom:20px;
}
h1 span{
	font-weight:bold;
	color: rgba(78, 192, 148,.3);
}
h2,h3{
		color:#777;
		text-align:center;
		width:500px;
		margin: 0 auto;
}
h3{
text-align: left;
font-size: 28px;
}
h4,h5{
color: #4EC094;
margin-bottom: 20px;
font-size: 19px;
}
h5{
	font-size:16px;
}
.prettyprint{
	padding:20px;
}
p{
	margin-bottom:20px;
	color:#777;
	line-height:150%;

}
.left,.right{
	width:46%;
	float:left;
}
.left{
	margin-right:8%;
}
.demointro{
	color: #FFF;
width: 500px;
margin: 0 auto;
text-align: left;
margin-bottom: 30px;
}
#mainbuttons{
width: 350px;
margin: 0 auto;
}
#mainbuttons li{
	float:left;
	margin-right:10px;
}
#footerlink{
text-decoration: none;
padding-bottom: 20px;
background: #FFF;
width: 100%;
text-align: center;
display: block;
color: #777;
}
#footerlink:hover{
	text-decoration:underline;
}
#mainbuttons li:nth-child(2){
	margin-right:0px;
}
#mainbuttons li a,.button{
	display:block;
	padding:10px 15px;
	background:#7bb7fa;
	color:white;
	width:140px;
	text-decoration:none;
	text-transform:uppercase;
	-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
-o-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
border:0px;
}
#mainbuttons li a:hover,.button:hover{
background:#6298D5;
cursor:pointer;
}
#myform{
	width:400px;
	margin: 0 auto;
	position:relative;
}
#myform,#myform2{
width: 500px;
margin: 0 auto;
position: relative;
margin-bottom:60px;
}
#myform label,#myform2 label{
	margin-bottom:5px;
	display:block;
	text-transform:uppercase;
	font-size:14px;
	color:#3c9471;
	font-weight:bold;
}
.white{
	color:#557DA8;
}
#myform input[type="password"],#myform input[type="text"]{
		background:transparent;
	border: 2px solid #46AC84;
color: #777;
font-family: "Lato", sans-serif;
font-size: 14px;
padding: 9px 5px;
height: 21px;
text-indent: 6px;
-webkit-appearance: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: border .25s linear, color .25s linear;
-moz-transition: border .25s linear, color .25s linear;
-o-transition: border .25s linear, color .25s linear;
transition: border .25s linear, color .25s linear;
-webkit-backface-visibility: hidden;
width:100%;
}
#myform textarea{
	height:80px;
}
#myform input[type="password"]:focus,#myform input[type="text"]:focus{
outline:0;
	border: 2px solid white;
}
#container{
	width:100%;
	background:white;
}
#header{
	background:white;
	height:300px;
	width:100%;
}
.regular-checkbox {
    -webkit-appearance: none;

  border: 2px solid #6EA5E1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 7px;
    border-radius: 0px;
    display: inline-block;
    position: relative;
    margin-right:10px;
}

.regular-checkbox:active, .regular-checkbox:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked {

    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: #99a1a7;
}

.regular-checkbox:checked:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: -2px;
    left: 1px;
    color: white;
}
pre, code {
font-family: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCC;
padding: 5px;
margin: 10px 0;
overflow: hidden;
background: #F8F8F8;
color: #333;
}
pre{
	margin-bottom:20px;
}
.wrapper{
	padding:30px;
	width:800px;
	margin:0 auto;
	max-width:100%;
margin-top: 314px;

}
.wrapper ul{
margin-left:20px;
}
.wrapper ul li{
color: #777;
list-style-type:disc;
margin-bottom:20px;
	}
.wrapper h3{
	width:100%;
	margin-bottom:20px;
}
hr{
	border: 0px;
width: 100%;
border-top: 1px dotted #C0C0C0;
margin-top: 60px;
margin-bottom: 60px
}
table{
	width:100%;
		color:#777;
		margin-bottom:20px;
}
table thead tr th{
	font-weight:bold;
}
table  tr{
	border-bottom:1px solid #C0C0C0;

}
table th,table td{
	padding:10px;
}
table tr:nth-child(odd){
	background:#F8F8F8;
}
table tr:hover{
background:#FFF6BF;
}
table thead tr,table thead tr:hover{
	background:none!important;
}
.doclink{
	color: #777;
display: block;
margin-top: 20px;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
}
.doclink:hover{
text-decoration: underline;
}
.demo{
	color: #FFF;
margin-top: 30px;
margin-bottom: 30px;
}