style.less

/*  
Theme Name: Ajax Framework
Theme URI: http://johnsardine.com/
Version: 0.6
Description: A simple base to build small ajax websites
Author: João Sardinha
Author URI: http://johnsardine.com
Tags:
*/

//import
@import url("assets/less/mixins.less");
@import url("assets/less/normalize.less");
@import url("assets/prettify/prettify.css");

//Page Width
@pageWidth: 600px;

//Links
@linkColor: #0069D6;
@linkColorHover: #0050A3;

//clear elements
.cf,
nav ul,
#target,
.steps ol li,
.icon-nav {
	zoom: 1;
	
	&:before,
	&:after {
		content:"";
		display:table;
	}
	
	&:after {
		clear: both;
	}
}

body {
	margin: 0 auto;
	color: #444;
	font-family: sans-serif;
	font-size: 13px;
	line-height: 20px;
	*font-size:small;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFklEQVQImWNgYGBg+PTp038GogBWlQA2kQerc92tOQAAAABJRU5ErkJggg==');
	
	padding: 60px 0 15px 0;
	background-attachment: fixed;
}

/* !Hyperlinks */
a {
	.transition-all();
}
a,
a:active,
a:visited {
	color: @linkColor;
	text-decoration: none;
}
a:hover {
	color: @linkColorHover;
	text-decoration: underline;
}

/* Images */
img {
	max-width: 100%;
	height: auto;
	.transition-all(all ease-in-out .3s);
	.box-shadow(0 1px 3px rgba(0,0,0,0.4));
}
a {
	&:hover {
		img {
			opacity: .8;
			filter: ~"alpha(opacity=80)";
			-ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"';
		}
	}
}

/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

::-moz-selection { background: @linkColor; color: #fff; text-shadow: none; }
::selection { background: @linkColor; color: #fff; text-shadow: none; }

/* Alignment */
.textcenter {
	display: block;
	text-align: center;
}
.textright {
	display: block;
	text-align: right;
}
img {
	margin: 0;
	height: auto;
	width: auto;
}
p img {
	margin-bottom: 0;
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 1em;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
}

/* Blockquote */
blockquote {
    border-left: 3px solid;
    margin: 1em 20px;
    padding-left: 20px;
    background: rgba(255,255,255,0.5);
}

/* Content Zones */
.inside {
	margin: 0 auto;
	width: @pageWidth;
}
#target {
	position: relative;
}

/* Header */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	
	
	background: #333;
	.box-shadow(0 1px 3px rgba(0,0,0,0.2));
	border: solid #666;
	border-width: 0 1px 1px 1px;
}
#header>div {
	margin: 0 auto;
	width: @pageWidth + 20px;
	height: 30px;
	min-width: 290px;
	
	#logo {
		display: inline-block;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		text-decoration: none;
		
		
		color: #fff;
		//.border-radius(0 0 0 3px);
		
		img {
			.box-shadow( 0 0 0 transparent);
		}
		
		&:hover {
			background: #666;
			opacity: 1;
			filter: ~"alpha(opacity=100)";
			-ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"';
		}
	}
	
	nav {
		float: right;
		
		ul {
			margin: 0;
			padding: 0;
			
			li {
				display: inline-block;
				list-style: none;
				float: left;
				
				a {
					display: inline-block;
					height: 30px;
					line-height: 30px;
					padding: 0 10px;
					
					color: #eee;
					border-left: 1px solid #666;
					
					&:hover,
					&.current {
						text-shadow: none;
						text-decoration: none;
						
						color: #fff;
						background: @linkColor;
					}
					&:focus {
						outline: none;
					}
				}
				
				&:last-child a {
					//.border-radius(0 0 3px 0);
				}
			}
		}
	}

}
/* Separators */
.separator {
	border-bottom: 2px solid;
	padding-bottom: 6px;
}

/* Footer */
#footer {
	margin-top: 1.5em;
	border-top: 1px dotted;
	text-align: right;
}

/* Unpin section */
.free {
	position: absolute;
}

/* Sections Nav */
#sections {
	margin: 0 auto;
	width: 300px;
	padding: 0 0 20px 0;
	li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	a {
		background: #fff;
		border: 1px solid #f06529;
		
		display: block;
		font-size: 1.3em;
		padding: 10px 0;
		text-align: center;
		margin-bottom: 10px;
		text-decoration: none;
		.border-radius(3px);
		.box-shadow(0 1px 3px rgba(0,0,0,0.2));
		
		&:hover {
			border-color: #e34c26;
			.box-shadow(0 1px 3px rgba(0,0,0,0.3));
		}
	}
	
}

/* Loading */
#loading {
	height: 100px;
	width: 100%;
	background: url(assets/loader.png) 48% 47% no-repeat;
}

/* Error Message */
//@-webkit-keyframes changeColor {
//	50% {
//		border-color: #E6DB55;
//		background-color: #FFFFE0;
//	}
//}
.error {
	padding: 0 20px;
	margin-bottom: 30px;
	border: 1px solid;
	border-color: #ccc;
	background-color: #fff;
	.border-radius(3px);
	.box-shadow(0 1px 3px rgba(0,0,0,0.2));
	
	-webkit-animation: changeColor 3s infinite;
}

/* Code Styling */
pre {
	padding: 5px 10px;
	.border-radius(3px);
	.box-shadow(0 1px 3px rgba(0,0,0,0.4));
	
	ol {
		padding-left: 30px;
	}
}

/* Modal */
.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10;
	background: rgba(0255,255,255,1);
	padding: 20px;
	border: 1px solid #ccc;
	.border-radius(3px);
	.box-shadow(0 1px 3px rgba(0,0,0,0.2));
	padding-bottom: 23px;
	
	&:before,
	&:after {
	    content: "";
	    display: block;
	    left: -1px;
	    width: inherit;
	    height: 5px;
	    position: absolute;
	    right: -1px;
	    z-index: -12;
	    
	    background: rgba(0255,255,255,1);
	    padding: 20px;
	    border-left: 1px solid #ccc;
	    border-right: 1px solid #ccc;
	    border-bottom: 1px solid #ccc;
	    .border-radius(0 0 3px 3px);
	}
	&:before {
	    bottom: 1px;
	}
	&:after {
	    bottom: 3px;
	}
	
	/* Close button positioning */
	.close {
		position: absolute;
		top: 20px;
		right: 20px;
	}
}
.close {
	height: 15px;
	width: 15px;
	display: block;
	text-indent: -999em;
	.transition-all( none );
	background: url(assets/close.png) top left no-repeat;
	
	&:hover {
		background-position: bottom left;
	}
	&:focus {
		outline: none;
	}
}
.overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255,255,255,0.9);
}

/* Steps List */
ol.steps,
ol.steps ol {
	counter-reset:li; /* Initiate a counter */
	margin-left:0; /* Remove the default left margin */
	padding-left:0; /* Remove the default left padding */
	
	> li {
		position:relative; /* Create a positioning context */
		margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
		padding:0 0 4px 16px; /* Add some spacing around the content */
		list-style:none; /* Disable the normal item numbering */
		border-top:2px solid;
		
		&:before {
			content:counter(li); /* Use the counter as content */
			counter-increment:li; /* Increment the counter by 1 */
			/* Position and style the number */
			position:absolute;
			top:-2px;
			left:-2em;
			-moz-box-sizing:border-box;
			-webkit-box-sizing:border-box;
			box-sizing:border-box;
			width:2em;
			/* Some space between the number and the content in browsers that support
			generated content but not positioning it (Camino 2 is one example) */
			margin-right:8px;
			line-height: 3.7em;
			height: 4em;
			border-top:2px solid #444;
			.border-radius(0 0 3px 3px);
			color:#fff;
			background:#444;
			font-weight:bold;
			text-align:center;
		}
	}
}

ol.steps > li:before {
    height: 100%;
	background: #f06529;
}

/* Steps Index */
ol.index,
ol.index ol {
	margin: 0;
	padding: 0 0 0 27px;
	
	li {
		font-weight: bold;
		margin: 3px 0;
		
		small {
			display: block;
			color: #666;
			font-size: .9em;
			font-weight: normal;
		}
	}
}

/* Target: IE7 */
.ie7 {
	
	.modal#ie-notice {
		display: block;
		width: 400px;
		&:before,
		&:after {
			width: inherit;
		}
	}
	.overlay {
		display: block;
	}
	
	ol.steps {
		li {
			border-top: none;
			
			h2,
			h3 {
				border-bottom: 2px solid;
				padding-top: 5px;
				padding-bottom: 8px;
			}
		}
	}
	
}

/* Nav Arrows */
.icon-nav {
	a {
		float: left;
	}
	span {
		display: none;
	}
}
.previous,
.next {
	display: inline-block;
	width: 15px;
	height: 15px;
	text-indent: -999em;
	
	.transition-all(none);
	
	&:hover {
		background-position: bottom;
	}
}
.previous {
	background: url(assets/previous.png);
}
.next {
	background: url(assets/next.png);
}
.main {
	height: 15px;
	width: 15px;
	display: block;
	text-indent: -999em;
	.transition-all( none );
	background: url(assets/close-1.png) top left no-repeat;
	
	&:hover {
		background-position: bottom left;
	}
	&:focus {
		outline: none;
	}
}

/* Alignment exception */
h2.separator + .icon-nav {
	position: absolute;
	right: 0;
	top: 16px;
}

/* Media Block */
.media {
	margin:10px;
	padding: 0;
	
	.bd {
		overflow: hidden;
		_overflow: visible;
		zoom: 1;
		margin-bottom: 10px;
	}
	.img {
		float: left;
		margin-right: 10px;
		
		img {
			display: block;
		}
	}
	.imgExt {
		float: right;
		margin-left: 10px;
	}
	li {
		position: relative;
		list-style: none;
	}
	h3 {
		margin-bottom: .3em;
	}
	* {
		margin-top: 0;
	}
	
	
	//ui controls
	.uiControls {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
	}
	li:hover {
		.uiControls {
			display: block;
		}
	}
}

/* ==== * Helpers * ==== */
.js .no-js {
	display: none;
}
.no-js .no-js {
	display: block;
}