/*

Copyright 2008-2015 Clipperz Srl

This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.

* Clipperz is free software: you can redistribute it and/or modify it 
  under the terms of the GNU Affero General Public License as published 
  by the Free Software Foundation, either version 3 of the License, or 
  (at your option) any later version.

* Clipperz is distributed in the hope that it will be useful, but 
  WITHOUT ANY WARRANTY; without even the implied warranty of 
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public
  License along with Clipperz. If not, see http://www.gnu.org/licenses/.

*/

#loginPage {
	.content {
		background-color: $main-color;

		.body {
			background-color: $main-color;
		}

		.other {
			color: $main-alternate-text-color;
			background-color: $main-alternate-color;

			a {
				&:before {
					content: "> ";
				};
			}
		}

		footer {
			color: $main-alternate-text-color;
			background-color: $main-alternate-color;
		}
	}
}

#registrationPage {
	.content {
		background-color: $main-alternate-color;

		.body {
			background-color: $main-alternate-color;
		}

		.other {
			color: $main-text-color;
			background-color: $main-color;

			a {
				&:before {
					content: "< ";
				};
			}
		}
		
		footer {
			color: $main-text-color;
			background-color: $main-color;
		}
	}
}

#unlockPage {
	.content {
		background-color: $main-color;

		.body {
			background-color: $main-color;
		}

		footer {
			color: $main-alternate-text-color;
			background-color: $main-alternate-color;
		}
	}
}
//==============================================================

#loginPage, #registrationPage, #unlockPage {

	.content {
		text-align: center;
//		background-color: $main-color;

		header {
			@include align-items(flex-end);

			max-height: 15%;
			min-height: 70px;
			padding: 10px;
			color: $main-alternate-text-color;
			
			h3 {
				font-weight: bold;
				font-size: 38pt;
			}
			
			h5 {
				font-size: 16pt;
			}
		}

		.body {
//			@include align-items(center);
			@include align-items(flex-start);

			form {
				position: relative;
				background: $main-alternate-text-color;

				padding: 20px;
//				margin-bottom: 50px;
				max-width: 400px;

				margin-left: auto;
				margin-right: auto;

				label {
					display: none;
				}

				input {
					font-family: "clipperz-font";
					display: block;
					padding: 5px;
					margin-top: 5px;
					margin-bottom: 10px;
					font-size: 100%;
					font-size: 24pt;
					width: 100%;
					border: 1px solid #ccc;
					border-radius: 0px;
				}

				.steps {
					text-align: center;
//					margin-left: auto;
//					margin-right: auto;

					.step {
						display: none;

						&.center {
							display: block;
						}

						h1 {
							color: $solarize-Accent-Blue;
							font-size: 24pt;
							font-weight: 700;
							margin: 0px;
							padding-top: 15px;
						}
						p {
							color: $solarize-Content-50;
							font-size: 14pt;
							font-weight: 100;
							margin: 0px;
							padding: 5px 0px;
						}

						label {
							display: none;
						}

						input {
							font-family: "clipperz-font";
							display: block;
							padding: 5px;
		//					margin-top: 5px;
							margin-bottom: 10px;
							font-size: 100%;
							font-size: 24pt;
							width: 100%;
						}

						&.TERMS_OF_SERVICE {
							.checkboxBlock {
//								margin-top: 10px;
//								margin-bottom: 10px;
//								clear: both;

								input {
									display: block;
									float: left;
//									margin: 5px;
									margin-top: 10px;
									width: 30px;
								}

								p {
									font-size: 12pt;
									font-weight: 500;
									display: block;
									text-align: left;
									margin-left: 50px;
									line-height: 1.5em;
									cursor: pointer;

									a {
										color: $solarize-Accent-Red;
									}
								}
							}
							
							.stepIndex {
								margin-top: 10px;
							}
						}
				
						.stepBody {
							min-height: 140px;
						}

						.stepIndex {
							
							text-align: center;
							.stepIndexItem {
								font-weight: 900;
								font-size: 28pt;
								display: inline;
								color: lightgrey;

								&.center {
									color: gray;
								}
							}
						}	

						.buttons {
							text-align: center;
							margin-top: 10px;

							.button {
								margin: 10px;
								text-align: center;
								vertical-align: middle;
								display: inline-block;
								width: 80px;

								font-weight: 900;
								line-height: 45px;
								font-size: 24px;

								&.back {
									background-color: lightgrey;

									&.step_-1 {
										visibility: hidden;
									}
								}

								&.disabled {
									background-color: #c0c0c0;
									cursor: default;
								}
								
								&.enabled {
									background-color: $main-color;
								}
							}
						}
					}
				}

				button {
					font-family: "clipperz-font";
					min-height: 48px;
					min-width: 48px;

					color: white;
					font-size: 24pt;
					font-weight: 500;
					border: 0px;

					padding: 10px 25px;

					border: 1px solid white;
					background-color: $main-color;
					@include transition(background-color font-weight, 0.2s, linear);

					&:hover {
					};

					&:disabled {
						font-weight: 100;
						background-color: #c0c0c0;
						cursor: default;

						&:hover {
						};
					}
				}
			}
		}

		.other {
			font-size: 24pt;
			padding: 20px;
			max-height: 20%;

			a {
				cursor: pointer;
			}
		}

		footer {
			max-height: 50px;

			.links {
				ul {
					padding: 3px;
					padding-bottom: 6px;
					li {
						display: inline-block;
//						color: white;
						cursor: pointer;
			
						&:after {
							content: '-';
							padding-left: 4px;
							padding-right: 4px;
							cursor: default;
						};

						&:last-child:after {
							content: '';
							padding-left: 0px;
							padding-right: 0px;
						}
					}
				}
			}

			
			.applicationVersion {
				padding: 2px;
				font-size: 8pt;
				
				$applicationVersionColor: #999;

				span {
//					color: $applicationVersionColor;
					&:after {
						content: ":";
					};
				}

				a {
//					color: $applicationVersionColor;
					color: inherit;
					text-decoration: none;
					padding-left: 5px;
					font-weight: bold;
				}
			}
		}

		//----------------------------------------------------------

		&.narrow {
			header {
//				font-size: 30pt;
//				line-height: 70px;
			}

			footer {
//				line-height: 20pt;
			}
		}

		//----------------------------------------------------------
/*
		&.extra-short {
			header {
				font-size: 18pt;
			}

			div.form {
				form {
					padding: 10px;
					margin-bottom: 20px;

					input {
						padding: 3px;
						margin-top: 3px;
						margin-bottom: 5px;
						font-size: 16pt;
					}

					button {
						min-height: 20px;

						font-size: 12pt;
						padding: 3px 10px;
						border: 1px solid white;
					}
				}
			}

			footer {
				font-size: 14pt;
			}
		}
*/
	}

	//==============================================================


}