/* @import must be at top of file, otherwise CSS will not work */
/* RESET
================================================== */
@import "components/yui_reset.less";

/* COLORI
================================================== */
@red: #ff0000;
@grey: #dfdfdf;

/* DICHIRAZIONE PARAMETRI
================================================== */
@vogue-color: @red;
@vogue-border: 30px;
@vogue-border-sm: 15px;	
@vogue-font: 'BaskervilleMTStd-Regular';
@vogue-bg: #000;

@glamour-color: @grey;
@glamour-border: 60px;
@glamour-border-sm: 20px;
@glamour-font: 'Dosis', sans-serif;
@glamour-bg: #1f1f1f;


/* MIXINS
================================================== */
.inline-me(){
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

/* MEDIA QUERIES BREAKPOINTS
================================================== */

/*  Extra small screen / phone */

@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;

/*  Small screen / tablet */
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;

/*  Medium screen / desktop */
@screen-md:                  992px;
@screen-md-min:              @screen-md;

/*  Large screen / wide desktop */
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;;

@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);



body,html { 
	width:100%;
	height:100%;	

}

body {  

	text-align:center;
	color:#000;
	.wrapper { 

		&.glamour{
			@logo-margin-left:-10px;
			@border-color: @glamour-color;
			@border-width: @glamour-border;
			font-family: @glamour-font;
			font-weight:300;
			h1, h2, h3, h4, h5, h6 {
				font-weight:300;
			}
			@border-width-sm: @glamour-border-sm;
			@bg-color: @glamour-bg;
			.unsubscribe();
		}
		&.vogue {	
			@logo-margin-left:-25px;
			@border-color: @vogue-color;
			@border-width: @vogue-border;
			font-family: @vogue-font;
			font-weight:normal;
			@border-width-sm: @vogue-border-sm;
			@bg-color: @vogue-bg;
			.unsubscribe();
		}
		
		.unsubscribe() {
			position:relative;
			@media (max-width: @screen-xs-max) {
				min-height:320px;
			}
			header {
				position:absolute;
				top:90px;		
				.logo{
					margin-left:@logo-margin-left;
				}
				@media (max-width: @screen-xs-max) {
					top:50px;
					padding:0 60px;
				}
				left:0;				
				right:0;	
				h1{
					color:#a3a3a3;
					letter-spacing:8px;
					padding-top:6px;
					font-size:21px;	
					@media (max-width: @screen-xs-max) {
						font-size:18px;
					}
				} 
			}  
			footer {
				position:absolute;
				bottom:90px;	
				@media (max-width: @screen-xs-max) {
					bottom:50px;
				}
				left:0;
				right:0;
				.btn {
					.inline-me();	
					background:@bg-color;
					color:#fff;		
					@media (max-width: @screen-xs-max) {
						font-size:15px;
						padding:17px 35px 17px;
					}
					font-size:22px;
					padding:25px 42px 26px;
				}
			}
		
			display: table;
			width: 100%;
			&:before {
				content: '';
				.inline-me();
				height: 100%;
				margin-right: -0.25em;
			}
			border:@border-width solid @border-color;	
			@media (max-width: @screen-xs-max) {
				border-width: @border-width-sm;
			}
		
			width:100%;
			height:100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			.logo{
				max-width:100%;
				.inline-me();
				height:auto;
			} 
			.centered {
				display: table-cell;
				text-align: center;
				vertical-align: middle;
				.content {
					@media (max-width: @screen-xs-max) {	
						padding:160px 30px;
					}
					padding:210px 30px;	
					.inline-me();
					p {
						@media (max-width: @screen-xs-max) {	
							font-size:16px;
							line-height:18px;
						}
						font-size:32px;
						line-height:36px;
						&.lead{
							@media (max-width: @screen-xs-max) {	
								font-size:26px;
								line-height:36px;
							}
							font-size:58px;
							line-height:65px;
							margin-bottom:30px;
						}
						a { 
							color:#000;
							text-decoration:underline;
						}
					}
				}
			}
		}
	} 
}