style.less

@import "mixins.less";
@import "fonts.less";

@grid-padding: 24px;
@header-height: 96px;
@red: #cc1600;


//
//    ================
//    ---- mixins ----
//    ================
//
@spring-width: 24px;
@spring-height: 24px;


.spring-position( @col:0, @row:0, @width:@spring-width,  @height:@spring-height ){
	background-position: -( @col * @width ) -( @row * @height );
}

.spring( @col:0, @row:0, @width:1, @height:1, @url:url("../../img/spring.png") ){
	width: @width * @spring-width;
	height: @height * @spring-height;
	background: @url;
	background-repeat:no-repeat;
	.spring-position( @col, @row, @width,  @height );
}






body{
	background: white;
	height: 100%;
	.sans-serif(13px);
	color: #383838;
}

header{
	width: 100%;
	background-color: white;
	overflow: auto;
	a{
		line-height: 20px;
	}
	a.active{
		border-top: 1px solid #08c;
	}
}

#navbar{
	background-color: white;
	
	h2{
		border-bottom: 0px solid transparent;

		
		margin-top: 0;
		padding-top:  @grid-padding / 2;
		margin-bottom: 0;
		padding-bottom: @grid-padding / 2;
	}

	.shadow div{
		border-top: 1px solid #999;
		border-bottom: 1px solid #ccc;
		height:3px;
		overflow: hidden;
	}
}

@footer-background-color: #eee;
footer{
	background: @footer-background-color;
	border-top: 1px solid darken( @footer-background-color, 14%);
	border-bottom: 1px solid darken( @footer-background-color, 19%);
}

#footer-inner{
	background-color: transparent;
	margin-top: 3px;
	
	h2 a{
		color: crimson;
	}
	h3{
		.serif-slant(17px);
		color: #000;
	}
}

#logos{
	border-top: 1px solid darken( @footer-background-color, 18%);
	padding-top: @grid-padding/3;	
	padding-bottom: @grid-padding/3;	
}



h1{
	.sans-serif(24px);
}
h2{
	.mono-caps(14px);
	color: #000;
	.description{
		.mono(12px, lowercase);
	}
}

.items{
	// height: 200px;
	// min-height: 200px;
	// overflow-y:auto;
}

.item{
	margin-bottom: @grid-padding;

	padding-bottom: @grid-padding / 2;
	border-bottom: 1px solid #ccc;
	h3{
		.serif-slant(17px);
		color: #000;
	}
	h4{
		.serif(17px);
		color: #000;
	}
	blockquote{
		padding: @grid-padding/2 0 0 @grid-padding/2;
		margin:0;

	}
}	

#timeline-serie{
	background: fade( #005580, 90%);
	overflow: hidden;
	position:fixed;
	height:84px;
	bottom: -84px;
	width: 100%;
	.transition( bottom, .2s, ease-in-out );

	.section{
		
		color: white;
		height:30px;
	}
	.title{
		.mono-caps(17px);
		
		

	}
	#actual-serie{
		height:48px;
		border-top: 1px solid fade(white,50%);
		border-bottom: 1px solid fade(white,50%);
		
		margin:0;
		padding: 0;

		list-style-type:none;

		.drag-to-serie, .frame{
			background-color:white;
			height: 37px;
			float:left;
			display: inline;
			width: 54px;
			margin: 6px;
		}
	}
}

.frames{
	overflow: auto;
}

.frame{
	
	float:left;
	.spring( 0, 0, 1, 2, url("../../img/frame_types.png") );
	
	&.augment{
		.spring-position(0, 2);
		&:hover{
			.spring-position(1, 2);
		}
	}
	
	&.wander{
		&:hover{
			.spring-position(1, 0);
		}
	}
}


.frame___old{
	


	float:left;
	height: 50px;
	
	background: #ccc;
	border: 1px solid #bbb;
	margin: 8px 8px 6px 0;
	.counter{
		position: absolute;
		margin: 5px 0 0 10px;
		
	}

	.title{
		display: block;
		margin: 20px 10px 0px 10px;
		.sans-serif(13px);
	}
}


.story{
	margin-bottom: @grid-padding;

	padding-bottom: @grid-padding;
	border-bottom: 1px solid #ccc;
}


/*

																Reveal Modals
																-------------
*/

.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
}
	
.reveal-modal {
	visibility: hidden;
	top: 0; 
	left: 50%;
	margin-left: -245px;
	width: 470px;
	background: #fff;
	position: fixed;
	z-index: 101;
	padding: 30px 40px 34px;

	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
		
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
	
.reveal-modal .close-reveal-modal {
	font-size: 28px;
	line-height: .5;
	position: absolute;
	top: 8px;
	right: 11px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	
	cursor: pointer;
} 

input[type="text"]{
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px
}
select, button, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
	.mono(13px)
}




/*

																		Toast

*/
@toast-width: 280px;
@base-color: #292929;
.toast-container {
	width: @toast-width;
	z-index: 1999999999;
	position: fixed;
    left: 50%;
    top: 50%;
    
	&.toast-position-middle-center {
    	margin-left: -@toast-width/2;
    	margin-top: -40px;
    }
    &.toast-position-top-left {
    	left: 20px;
    	top: 20px;
	}
}


* html .toast-container {
	position: absolute;
}
@original-color: darken(@base-color, 38%);

.toast-item {
	height: auto;
	// opacity: 0.95;
	padding: 0 0 0 0;
	font-size: 14px;
	line-height: 20px;
	display: block;
	position: relative;
	margin: 0 0 12px 0;
	
	background: white;
	border: 1px solid fade( @original-color, 15%);
	
	.mono(16px, normal, 1.414);

	h1{
		color: #191919;
		border-bottom: 1px solid lighten( @original-color, 15%);
		margin: 12px;
		//.serif-slant(18px, normal, 1.44);
		.mono(16px, normal, 1.414);

		padding: 0 46px 12px 0;	
	}
	
	p{
    	text-align: left;
    	margin: 0 12px 14px 12px;
    	
	}

}


p.invalid{
	background-color: fade( #cc1400, 20%);
	border: 1px solid #cc1400;
	margin: @grid-padding/3;
	padding: @grid-padding/3;
	.border-radius(2px);
}

input.invalid, textarea.invalid{
	border: 1px solid #cc1400;
}

.toast-item-close {
    background:url("../../img/icons/32-Cross-white.png");
    width:32px;
    height:32px;
    position: absolute;
    top:7px;
    right:7px;
}

.toast-item-image {
    width:32px;
    height: 32px;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    float:left;
}

.toast-item-image-notice {
    /*background:url("../../img/icons/32-Alert.png");*/
    display:none;
}

.toast-item-image-success {
    background:url(../../images/success.png);
}

.toast-item-image-warning {
    background:url(../../images/warning.png);
}

.toast-item-image-error {
    background:url(../../images/error.png);
}


/*

																		Bootstrap mods

*/
.modal{
	width: 492px;
	margin-left: -246px;
	margin-top: 2px;
	.border-radius(0);
	&.fade.in {
		top: 0;
	}

	&.fade{
		top: -100%;
		opacity: 1;
	}
}
.modal-backdrop{
	&.fade.in{
		opacity: .12;
	}
}
.modal-body{
	max-height: 600px;
}

blockquote{
	border-left: 0px solid transparent;

}