body {
	background: #FFFFFF;
	font: 14px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
	font: normal 42px/1.238 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #333;
	text-align: center;
	margin-top: 20px;
}

h2 {
	font: normal 28px/1.357 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #333;
	text-align: center;
	margin-bottom: 40px;
}

section {
	/*width: 1000px;*/
	width: 100%;
	/*margin: 60px auto 80px auto;*/
	margin: 0 auto;
	/*border: 1px solid #BADA55;*/
}

.group {
	width: 460px;

	/*float: left;*/
	/*margin-right: 40px;*/
	margin: 0 auto;
}


header, footer{
	display: block;
	margin: 0 auto;
	width: 90%;
	max-width: 540px;
	/*border: 1px solid #BADA55;*/
}

footer{
	font-size: x-small;
	text-align: right;
	color: #CACACA;
}


footer a {
	text-decoration: none;
	color: #CACACA;
}

footer a:hover {
	text-decoration: underline;
	color: #000000;
}

section .group:last-of-type {
	/*margin-right: 0;*/
}

/* Micro clearfix hack */
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}


input[type=submit]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.login-form {
	/*margin-bottom: 60px;*/
	padding: 20px;
	position: relative;
	display: inline-block;
	zoom: 1; /* ie7 hack for display:inline-block */
	*display: inline;
	border: 1px solid #bbb;
	-moz-border-radius:    10px;
	-webkit-border-radius: 10px;
	border-radius:         10px;
	-moz-box-shadow:    0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	box-shadow:         0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	behavior: url(PIE.htc);
}

.login-form.nolabel {   /* only requipurple for the demo */
	/*margin-bottom: 105px;*/
}

.login-form label {
	color: #444;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	margin-bottom: 10px;
}

.login-input {
	width: 398px;
	height: 20px;
	padding: 6px 10px;
	margin-bottom: 20px;
	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #333;
	outline: none;
	background-color: #fff;
	border: 1px solid #ccc;
	position: relative;
	-moz-border-radius:    8px;
	-webkit-border-radius: 8px;
	border-radius:         8px;
	-moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(255, 255, 255, 0.7);
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(255, 255, 255, 0.7);
	box-shadow:         inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(255, 255, 255, 0.7);
	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
	-moz-transition:    all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition:      all 0.4s ease-in-out;
	-ms-transition:     all 0.4s ease-in-out;
	transition:         all 0.4s ease-in-out;
	behavior: url(PIE.htc);
}

/* Focus style */
.login-form .login-input:focus {
	border: 1px solid #5eaaf8;
	-moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #5eaaf8;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #5eaaf8;
	box-shadow:         inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #5eaaf8;
}

/* Error style */
.login-form .login-input:-moz-ui-invalid {
	border: 1px solid #e00;
	-moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #e00;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #e00;
	box-shadow:         inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #e00;
}

.login-form .login-input.invalid {
	border: 1px solid #e00;
	-moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #e00;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #e00;
	box-shadow:         inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 3px #e00;
}

/* Placeholder style */
.nolabel ::-webkit-input-placeholder {
	color: #888;
}

.nolabel input:-moz-placeholder {
	color: #888;
}

.login-btn {
	width: 100px;
	height: 30px;
	color: #fff;
	font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
	letter-spacing: 1px;
	text-align: center;
	border: 1px solid #1972c4;
	outline: none;
	cursor: pointer;
	position: relative;
	background-color: #1d83e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#77b5ee), to(#1972c4)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #77b5ee, #1972c4); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #77b5ee, #1972c4); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #77b5ee, #1972c4); /* IE10 */
	background-image:      -o-linear-gradient(top, #77b5ee, #1972c4); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #77b5ee, #1972c4);
	-pie-background:          linear-gradient(top, #77b5ee, #1972c4); /* IE6-IE9 */
    -moz-box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.5);
	box-shadow:         inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.5);
	-moz-border-radius:    18px;
	-webkit-border-radius: 18px;
	border-radius:         18px;
	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
	behavior: url(PIE.htc);
}

.login-btn:active {
	border: 1px solid #77b5ee;
	background-color: #1972c4;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#1972c4), to(#77b5ee)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #1972c4, #77b5ee); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #1972c4, #77b5ee); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #1972c4, #77b5ee); /* IE10 */
	background-image:      -o-linear-gradient(top, #1972c4, #77b5ee); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #1972c4, #77b5ee);
	-pie-background:          linear-gradient(top, #1972c4, #77b5ee); /* IE6-IE9 */
	-moz-box-shadow:    inset 0 0 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
	box-shadow:         inset 0 0 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
}

.forgot {
	color: #555;
	font-style: italic;
	font-size: 12px;
	display: block;
	margin-bottom: 20px;
}

.forgot a {
	color: #3a3a3a;
	-moz-transition:    all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition:      all 0.4s ease-in-out;
	-ms-transition:     all 0.4s ease-in-out;
	transition:         all 0.4s ease-in-out;
}

.forgot a:hover {
	color: #000;
}

.login-form.tbbar {
	background-color: #f6f6f6;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#d4d4d4)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #fefefe, #d4d4d4); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #fefefe, #d4d4d4); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #fefefe, #d4d4d4); /* IE10 */
	background-image:      -o-linear-gradient(top, #fefefe, #d4d4d4); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #fefefe, #d4d4d4);
	-pie-background:          linear-gradient(top, #fefefe, #d4d4d4); /* IE6-IE9 */
}

/* Title bar */
.tbar {
	font: bold 16px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
	padding: 15px;
	margin: -20px -20px 20px -20px;
	position: relative;
	-moz-border-radius:    8px 8px 0 0;
	-webkit-border-radius: 8px 8px 0 0;
	border-radius:         8px 8px 0 0;
	-moz-box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow:         inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
	behavior: url(PIE.htc);
}


/* Bottom bar */
.bbar {
	margin: 20px -20px -20px -20px;
	padding: 20px;
	overflow: hidden;
	position: relative;
	border-top: 1px solid #aaa;
	background: #ddd;
	-moz-border-radius:    0 0 8px 8px;
	-webkit-border-radius: 0 0 8px 8px;
	border-radius:         0 0 8px 8px;
	-moz-box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.7);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
	box-shadow:         inset 0 1px 0 rgba(255, 255, 255, 0.7);
	behavior: url(PIE.htc);
}

.bbar .forgot {
	float: left;
	margin-bottom: 0;
}

.bbar .login-btn {
	float: right;
}




/************ Color Styles **************/

/******* Vertical Gradient *******/

/*** Light Gray ***/

.login-form.vlgray {
	border: 1px solid #d2d1d0;
	background-color: #ededed;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d2d1d0)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #f6f6f6, #d2d1d0); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #f6f6f6, #d2d1d0); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #f6f6f6, #d2d1d0); /* IE10 */
	background-image:      -o-linear-gradient(top, #f6f6f6, #d2d1d0); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #f6f6f6, #d2d1d0);
	-pie-background:          linear-gradient(top, #f6f6f6, #d2d1d0); /* IE6-IE9 */
}

.vlgray .login-input {
	border: 1px solid #d2d1d0;
}



/*** Light Blue ***/

.login-form.vlblue {
	border: 1px solid #5abcd1;
	background-color: #c4e7ef;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#c4e7ef), to(#5abcd1)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #c4e7ef, #5abcd1); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #c4e7ef, #5abcd1); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #c4e7ef, #5abcd1); /* IE10 */
	background-image:      -o-linear-gradient(top, #c4e7ef, #5abcd1); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #c4e7ef, #5abcd1);
	-pie-background:          linear-gradient(top, #c4e7ef, #5abcd1); /* IE6-IE9 */
}

.vlblue .login-input {
	border: 1px solid #5abcd1;
}



/*** Light Green ***/

.login-form.vlgreen {
	border: 1px solid #91c551;
	background-color: #d1e7b7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#d1e7b7), to(#91c551)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #d1e7b7, #91c551); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #d1e7b7, #91c551); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #d1e7b7, #91c551); /* IE10 */
	background-image:      -o-linear-gradient(top, #d1e7b7, #91c551); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #d1e7b7, #91c551);
	-pie-background:          linear-gradient(top, #d1e7b7, #91c551); /* IE6-IE9 */
}

.vlgreen .login-input {
	border: 1px solid #91c551;
}



/*** Light Purple ***/

.login-form.vlpurple {
	border: 1px solid #9d87b5;
	background-color: #d9d1e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#d9d1e2), to(#9d87b5)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #d9d1e2, #9d87b5); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #d9d1e2, #9d87b5); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #d9d1e2, #9d87b5); /* IE10 */
	background-image:      -o-linear-gradient(top, #d9d1e2, #9d87b5); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #d9d1e2, #9d87b5);
	-pie-background:          linear-gradient(top, #d9d1e2, #9d87b5); /* IE6-IE9 */
}

.vlpurple .login-input {
	border: 1px solid #9d87b5;
}



/*** Light Brown ***/

.login-form.vlbrown {
	border: 1px solid #e2792a;
	background-color: #f2c4a2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f2c4a2), to(#e2792a)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #f2c4a2, #e2792a); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #f2c4a2, #e2792a); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #f2c4a2, #e2792a); /* IE10 */
	background-image:      -o-linear-gradient(top, #f2c4a2, #e2792a); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #f2c4a2, #e2792a);
	-pie-background:          linear-gradient(top, #f2c4a2, #e2792a); /* IE6-IE9 */
}

.vlbrown .login-input {
	border: 1px solid #e2792a;
}






/******* Horizontal Gradient *******/

/*** Light Gray ***/

.login-form.hlgray {
	border: 1px solid #d2d1d0;
	background-color: #ededed;
	background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #d2d1d0), color-stop(50%, #f6f6f6), color-stop(100%, #d2d1d0)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(left, #d2d1d0, #f6f6f6, #d2d1d0); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(left, #d2d1d0, #f6f6f6, #d2d1d0); /* FF3.6 */
	background-image:     -ms-linear-gradient(left, #d2d1d0, #f6f6f6, #d2d1d0); /* IE10 */
	background-image:      -o-linear-gradient(left, #d2d1d0, #f6f6f6, #d2d1d0); /* Opera 11.10+ */
	background-image:         linear-gradient(left, #d2d1d0, #f6f6f6, #d2d1d0);
	-pie-background:          linear-gradient(left, #d2d1d0, #f6f6f6, #d2d1d0); /* IE6-IE9 */
}

.hlgray .login-input {
	border: 1px solid #d2d1d0;
}



/*** Light Blue ***/

.login-form.hlblue {
	border: 1px solid #5abcd1;
	background-color: #5abcd1;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5abcd1), color-stop(50%, #c4e7ef), color-stop(100%, #5abcd1));
	background-image: -webkit-linear-gradient(left, #5abcd1, #c4e7ef, #5abcd1); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(left, #5abcd1, #c4e7ef, #5abcd1); /* FF3.6 */
	background-image:     -ms-linear-gradient(left, #5abcd1, #c4e7ef, #5abcd1); /* IE10 */
	background-image:      -o-linear-gradient(left, #5abcd1, #c4e7ef, #5abcd1); /* Opera 11.10+ */
	background-image:         linear-gradient(left, #5abcd1, #c4e7ef, #5abcd1);
	-pie-background:          linear-gradient(left, #5abcd1, #c4e7ef, #5abcd1); /* IE6-IE9 */
}

.hlblue .login-input {
	border: 1px solid #5abcd1;
}



/*** Light Green ***/

.login-form.hlgreen {
	border: 1px solid #91c551;
	background-color: #91c551;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #91c551), color-stop(50%, #d1e7b7), color-stop(100%, #91c551)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(left, #91c551, #d1e7b7, #91c551); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(left, #91c551, #d1e7b7, #91c551); /* FF3.6 */
	background-image:     -ms-linear-gradient(left, #91c551, #d1e7b7, #91c551); /* IE10 */
	background-image:      -o-linear-gradient(left, #91c551, #d1e7b7, #91c551); /* Opera 11.10+ */
	background-image:         linear-gradient(left, #91c551, #d1e7b7, #91c551);
	-pie-background:          linear-gradient(left, #91c551, #d1e7b7, #91c551); /* IE6-IE9 */
}

.hlgreen .login-input {
	border: 1px solid #91c551;
}



/*** Light Purple ***/

.login-form.hlpurple {
	border: 1px solid #9d87b5;
	background-color: #9d87b5;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9d87b5), color-stop(50%, #d9d1e2), color-stop(100%, #9d87b5)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(left, #9d87b5, #d9d1e2, #9d87b5); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(left, #9d87b5, #d9d1e2, #9d87b5); /* FF3.6 */
	background-image:     -ms-linear-gradient(left, #9d87b5, #d9d1e2, #9d87b5); /* IE10 */
	background-image:      -o-linear-gradient(left, #9d87b5, #d9d1e2, #9d87b5); /* Opera 11.10+ */
	background-image:         linear-gradient(left, #9d87b5, #d9d1e2, #9d87b5);
	-pie-background:          linear-gradient(left, #9d87b5, #d9d1e2, #9d87b5); /* IE6-IE9 */
}

.hlpurple .login-input {
	border: 1px solid #9d87b5;
}



/*** Light Brown ***/

.login-form.hlbrown {
	border: 1px solid #e68c48;
	background-color: #e68c48;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e68c48), color-stop(50%, #f2c4a2), color-stop(100%, #e68c48)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(left, #e68c48, #f2c4a2, #e68c48); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(left, #e68c48, #f2c4a2, #e68c48); /* FF3.6 */
	background-image:     -ms-linear-gradient(left, #e68c48, #f2c4a2, #e68c48); /* IE10 */
	background-image:      -o-linear-gradient(left, #e68c48, #f2c4a2, #e68c48); /* Opera 11.10+ */
	background-image:         linear-gradient(left, #e68c48, #f2c4a2, #e68c48);
	-pie-background:          linear-gradient(left, #e68c48, #f2c4a2, #e68c48); /* IE6-IE9 */
}

.hlbrown .login-input {
	border: 1px solid #e68c48;
}





/******* Top and Bottom bars *******/

/*** Light Gray ***/

.lgray .tbar {
	background-color: #c4c4c4;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#c4c4c4), to(#818181)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #c4c4c4, #818181); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #c4c4c4, #818181); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #c4c4c4, #818181); /* IE10 */
	background-image:      -o-linear-gradient(top, #c4c4c4, #818181); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #c4c4c4, #818181);
	-pie-background:          linear-gradient(top, #c4c4c4, #818181); /* IE6-IE9 */
}




/*** Light Blue ***/

.lblue .tbar {
	background-color: #82ccdc;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#82ccdc), to(#2f92a7)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #82ccdc, #2f92a7); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #82ccdc, #2f92a7); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #82ccdc, #2f92a7); /* IE10 */
	background-image:      -o-linear-gradient(top, #82ccdc, #2f92a7); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #82ccdc, #2f92a7);
	-pie-background:          linear-gradient(top, #82ccdc, #2f92a7); /* IE6-IE9 */
}




/*** Light Green ***/

.lgreen .tbar {
	background-color: #a9d277;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a9d277), to(#669130)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #a9d277, #669130); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #a9d277, #669130); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #a9d277, #669130); /* IE10 */
	background-image:      -o-linear-gradient(top, #a9d277, #669130); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #a9d277, #669130);
	-pie-background:          linear-gradient(top, #a9d277, #669130); /* IE6-IE9 */
}




/*** Light Purple ***/

.lpurple .tbar {
	background-color: #b7a7c8;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#b7a7c8), to(#72588f)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #b7a7c8, #72588f); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #b7a7c8, #72588f); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #b7a7c8, #72588f); /* IE10 */
	background-image:      -o-linear-gradient(top, #b7a7c8, #72588f); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #b7a7c8, #72588f);
	-pie-background:          linear-gradient(top, #b7a7c8, #72588f); /* IE6-IE9 */
}




/*** Light Brown ***/

.lbrown .tbar {
	background-color: #e89557;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e89557), to(#a15216)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #e89557, #a15216); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #e89557, #a15216); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #e89557, #a15216); /* IE10 */
	background-image:      -o-linear-gradient(top, #e89557, #a15216); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #e89557, #a15216);
	-pie-background:          linear-gradient(top, #e89557, #a15216); /* IE6-IE9 */
}






/******* 3d Style *******/

.login-form.form3d {
	background-color: #ebebeb;
	background-image: -webkit-gradient(linear, left top, left bottom, from(0, #cdcdcd), to(50px, #ebebeb)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #cdcdcd 0, #ebebeb 50px); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #cdcdcd 0, #ebebeb 50px); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #cdcdcd 0, #ebebeb 50px); /* IE10 */
	background-image:      -o-linear-gradient(top, #cdcdcd 0, #ebebeb 50px); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #cdcdcd 0, #ebebeb 50px);
	-pie-background:          linear-gradient(top, #cdcdcd 0, #ebebeb 50px); /* IE6-IE9 */
	-moz-box-shadow:    0 1px 0 #aaa, 0 2px 0 #fff, 0 3px 0 #aaa, 0 4px 0 #fff, 0 5px 0 #aaa, 0 6px 0 #fff, 0 7px 0 #aaa, 0 8px 0 #fff, inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 8px 2px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0 1px 0 #aaa, 0 2px 0 #fff, 0 3px 0 #aaa, 0 4px 0 #fff, 0 5px 0 #aaa, 0 6px 0 #fff, 0 7px 0 #aaa, 0 8px 0 #fff, inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 8px 2px rgba(0, 0, 0, 0.7);
	box-shadow:         0 1px 0 #aaa, 0 2px 0 #fff, 0 3px 0 #aaa, 0 4px 0 #fff, 0 5px 0 #aaa, 0 6px 0 #fff, 0 7px 0 #aaa, 0 8px 0 #fff, inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 8px 2px rgba(0, 0, 0, 0.7);
}




/******* Login form as a bar *******/

.login-form.bar {
	display: block;
	width: 480px;
	padding: 10px;
	margin: 0 auto;
	border: 1px solid #ccc;
	background-color: #ededed;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d2d1d0)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #f6f6f6, #d2d1d0); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #f6f6f6, #d2d1d0); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #f6f6f6, #d2d1d0); /* IE10 */
	background-image:      -o-linear-gradient(top, #f6f6f6, #d2d1d0); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #f6f6f6, #d2d1d0);
	-pie-background:          linear-gradient(top, #f6f6f6, #d2d1d0); /* IE6-IE9 */
	-moz-box-shadow:    0 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7);
	box-shadow:         0 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.login-form.bar .login-input {
	width: 173px;
	height: 20px;
	padding: 6px 10px 6px 35px;
	margin: 0 5px 0 0;
	border: 1px solid #ccc;
	float: left;
	-moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
	box-shadow:         inset 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
}

.login-form.bar input[type=text] {
	background: #fff url(user.png) 10px center no-repeat;
	-moz-border-radius:    8px 0 0 8px;
	-webkit-border-radius: 8px 0 0 8px;
	border-radius:         8px 0 0 8px;
}

.login-form.bar input[type=password] {
	background: #fff url(key.png) 10px center no-repeat;
	margin-right: 0;
	padding-right: 45px;
	-moz-border-radius:    0 8px 8px 0;
	-webkit-border-radius: 0 8px 8px 0;
	border-radius:         0 8px 8px 0;
}

.login-form.bar .login-btn {
	width: 32px;
	height: 32px;
	position: absolute;
	top: 11px;
	right: 11px;
	border: 1px solid #b9b9b9;
	background-color: #ededed;
	background: url(login.png) center center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#a9a9a9)); /* Saf4+, Chrome */
	background: url(login.png) center center no-repeat, -webkit-linear-gradient(top, #f6f6f6, #a9a9a9); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background: url(login.png) center center no-repeat,    -moz-linear-gradient(top, #f6f6f6, #a9a9a9); /* FF3.6 */
	background: url(login.png) center center no-repeat,     -ms-linear-gradient(top, #f6f6f6, #a9a9a9); /* IE10 */
	background: url(login.png) center center no-repeat,      -o-linear-gradient(top, #f6f6f6, #a9a9a9); /* Opera 11.10+ */
	background: url(login.png) center center no-repeat,         linear-gradient(top, #f6f6f6, #a9a9a9);
	-pie-background: url(login.png) center center no-repeat,    linear-gradient(top, #f6f6f6, #a9a9a9); /* IE6-IE9 */
	-moz-border-radius:    0 8px 8px 0;
	-webkit-border-radius: 0 8px 8px 0;
	border-radius:         0 8px 8px 0;
	-moz-box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	box-shadow:         inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.login-form.bar .login-btn:active {
	background-color: #ccc;
	background: url(login.png) center center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#f6f6f6)); /* Saf4+, Chrome */
	background: url(login.png) center center no-repeat, -webkit-linear-gradient(top, #a9a9a9, #f6f6f6); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background: url(login.png) center center no-repeat,    -moz-linear-gradient(top, #a9a9a9, #f6f6f6); /* FF3.6 */
	background: url(login.png) center center no-repeat,     -ms-linear-gradient(top, #a9a9a9, #f6f6f6); /* IE10 */
	background: url(login.png) center center no-repeat,      -o-linear-gradient(top, #a9a9a9, #f6f6f6); /* Opera 11.10+ */
	background: url(login.png) center center no-repeat,         linear-gradient(top, #a9a9a9, #f6f6f6);
	-pie-background: url(login.png) center center no-repeat,    linear-gradient(top, #a9a9a9, #f6f6f6); /* IE6-IE9 */
	-moz-box-shadow:    inset 0 0 2px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
	box-shadow:         inset 0 0 2px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1281px){
                /*FOR TABLETS*/
            .screen-deskpto{
                    width: 300px;
                }
}

@media (min-width: 1025px) and (max-width: 1280px){
                /*FOR TABLETS*/
            .screen-deskpto{
                    width: 300px;
                }
}


@media (min-width: 768px) and (max-width: 1024px){
                /*FOR TABLETS*/
            .screen-deskpto{
                    width: 300px;
                }
            .image-header-mobile{
                    width: 320px;
                    height: auto;
                    float: center;
                    margin: 0em -5em 0em;
                }
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
                /*FOR TABLETS*/
            .text-header-mobile{
                    display: none;
                }
            .screen-deskpto{
                    width: 300px;
                }

            .image-header-mobile{
                    width: 320px;
                    height: auto;
                    float: center;
                    margin: 0em 9em 0em;
                }
}


@media (min-width: 481px) and (max-width: 767px){
                /*FOR TABLETS*/
            .text-header-mobile{
                    display: none;
                }
            .screen-deskpto{
                    width: 300px;
                }
            .image-header-mobile{
                width: 320px;
                height: auto;
                float: center;
                margin: 0em 6em 0em;
            }

            .login-form-mobile{
                width: 100%;
                margin: 0em -1.5em 0em;
            }

            .login-label-mobile{
                 width: 90%;
            }
}

@media (min-width: 320px) and (max-width: 480px) {
			.text-header-mobile{
                    display: none;
            	}
            .screen-deskpto{
                    width: 300px;
                }

            .image-header-mobile{
                width: 320px;
                height: auto;
                float: center;
                margin: 0em 0em 0em;
            }

            .login-form-mobile{
                width: 90%;
                margin: 0em -0.5em 0em;
            }

            .login-label-mobile{
                 width: 90%;
            }
}