/*============== IMPORT LESS CONSTANTS =======================*/
@import "shared";

/*================ WEB FONTS =================================*/
@font-face {
    font-family: 'SpringsteelSerifHeavy';
    src: url('fonts/SpringsteelSerif-Heavy-webfont.eot');
    src: url('fonts/SpringsteelSerif-Heavy-webfont.eot?iefix') format('eot'),
         url('fonts/SpringsteelSerif-Heavy-webfont.woff') format('woff'),
         url('fonts/SpringsteelSerif-Heavy-webfont.ttf') format('truetype'),
         url('fonts/SpringsteelSerif-Heavy-webfont.svg#webfontGZk5WScN') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*
	Code from HTML5 Reset :: style.css
	----------------------------------------------------------
	Credits for HTML5 reset code:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: ~"expression(document.execCommand('BackgroundImageCache', false, true))";}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  


/*================ SITE STYLES START HERE =====================*/

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

body {font: 16px Helvetica, Arial, sans-serif;}

body, select, input, textarea {color: @colorText;}

body{
	background: @colorLightOrange;	
    /*width:960px;*/
    margin: 0 auto;
}

h1, h2, h3, h4, h5{
    font: 85px 'Droid Sans', Georgia, serif;
    line-height: 72px;
}

h2{ font-size: 65px; line-height: 52px; }
h3{ font-size: 45px; line-height: 32px;}
h4{ font-size: 25px; line-height: 12px; }
h5{ font-size: 15px; line-height: 10px;}

section{
    h1,h2,h3,h4,h5{ margin-bottom: 20px; }
}

header{
	padding-top: 30px;
    position:relative;
    
    nav{
        width:100%;       
        
        a{
        	
            text-decoration:none;
            color:@colorText;
            .transition(color 0.2s linear); 
            
            &:hover{ 
                color:darken(@colorText,50%);
            }
        }
        
        ol{
            list-style:none;                        
        	float:right;
        }
        
        li{
            float:left;
            display:block;
            margin-right: 45px;
            padding:8px 10px;
            font: 24px 'Droid Sans', Georgia, serif;
            .rounded(10px);
            .transition(background 0.2s linear); 
                       
            &:hover{                
                background:@colorVeryLight;                
                cursor:pointer;
            }                        
        }
        
        li:last-of-type{
        	margin-right:0;
        }
        
        .active { background:@colorVeryLight; }        
    }
}

#contentWrapper{
	min-height: 100%;
	width:100%;
	height: auto !important;
	height: 100%;
	
	
	background:url(img/bkgnd-dirt.png) repeat-x 0 100%, url(img/clouds.svg) no-repeat 0 0, -moz-linear-gradient(50% 67.6667% 90deg,@colorLightOrange 0%, @colorDarkOrange 94.5813%) no-repeat 0 0;
	background:url(img/bkgnd-dirt.png) repeat-x 0 100%, url(img/clouds.svg) no-repeat 0 0, -webkit-gradient(linear,50% 67.6667%,50% 3.66663%,color-stop(0, @colorLightOrange),color-stop(1, @colorDarkOrange)) no-repeat 0 0; 
	background-size: 960px 72px, 100% 600px, 100% 600px;
}

#innerWrapper{
	margin: 0 auto -35px; /* Set footer height. */
	width:960px;
	padding-bottom:50px;
}

footer, .push {
	height:35px;
	clear: both;
}

footer{
	width:100%;
	text-align:center;
	color:@colorDarkOrange;
	background: url(img/bkgnd-dirt.png) repeat-x 0 100%;
	
	a {
		color: @colorLightOrange;
		text-decoration:none;
	}
}

a {color: darken(@colorDarkOrange,30%);}
a:hover {color: @colorDarkOrange;}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

#tweets{
    /*-webkit-column-count: 2;
	-webkit-column-gap: 5px;

	-moz-column-count: 2;
	-moz-column-gap: 10px;

    -ms-column-count:2;
    -ms-column-gap:10px;

	column-count: 2;
	column-gap: 5px;*/
    
    height:275px;
    padding:10px;
    width:100%;
    background:#242424 url(img/bkgnd-dark-linen.jpg) repeat-x 0 0;
    margin:50px 5px 1px 5px;
    float:left;
    .shadow2(inset 0px -5px 5px #000, inset 0px 5px 5px #000);
    overflow:hidden;
    
    h2{
    	color:@colorDarkOrange;
    	float:left;
    	margin:150px 15px 0 15px;
    	font-size:28px;
    	line-height:28px;
    	width:300px;
    }
    
    ul{
        list-style:none;
        margin:0 0 0 340px;
    }
    
    li{
        height: 100px;
        width: 260px; 
        margin: 0 15px 8px 0 !important;
        background: #545454;
        border: solid 1px gray;
        color: #DDD;
        
        a{
        	color:#AAA;
        }
    }
    
    time{
        display:block;
        font-size:11px;
        color:lighten(@colorText,30%);
        margin-top:5px;
    }
}

#mainContent{
	width:100%;
	border-top:none;
	border-bottom:none;
	float:left;
	margin-left:3px;
	padding: 10px;
}

.postWrapper{
	width:100%;
	float:left;
}

#post, #contentArea{
	margin-top:90px;
	background: hsla(50,0,1,.4);
	padding:65px 15px 15px 15px;
	.rounded(10px);
	margin-right:26%;
	color:#111;
	
	h1,h2,h3{
		margin-top:30px;
	}
	
	h1{
		font-size: 38px;
		line-height: 42px;
	}
	
	h2{
		font-size: 30px;
		line-height: 35px;
	}
	
	h3{
		font-size: 24px;
		line-height: 29px;
	}
	
	p{
		margin: 1.3125em 0;
		font-size: 1.1429em;
		line-height: 1.3125em;
	}
	
	ol, ul{
		margin:30px;
		font-family: Helvetica, Arial, sans-serif;
	}
	
	li{
		margin-bottom:10px;
	}
	
	ul{
		list-style:square;
	}
	
	time{
		color:#949494;
	}
	
	code{
		font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
		background-color: hsla(50,0,1,.4);
		padding: 1px 5px;
	}
	
	.author{
		font-size: 80%;
		border: 1px #999 dashed;
		border-left:none;
		border-right:none;
		padding: 20px 0;	
		margin-top: 50px;
		
		p{
			margin-top:2px;
			margin-left: 125px;
		}
		
		img{
			float:left;
			width:110px;
		}
	}
}

#contentArea{
	margin: 125px 5px 5px 5px;
	
	ul{
		list-style:square;
		margin: 25px 0 25px 50px;
	}
	
	li{
		margin:0 0 20px 0;
	}
	
	em{
		font-weight:bold;
	}
}

#relatedPost{
	margin-top:110px;
	float:left;
	width:20%;
	margin-left:-24%;
	
	
	h3{
		font-size: 28px;
	}
}

#demosWrapper{
    width:100%;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;    
    
    h2{
    	-moz-column-span:all;
    	-webkit-column-span:all;
    	column-span:all;
    }
    
    ul{
        margin: 10px 0 50px 50px;
        list-style: disc;
        display:block;
    }
    
    li{
    	margin-bottom:5px;
    }
    
}

#demoRight{

}

#demoLeft{

}

.bigHand{
	font: 98px 'Just Another Hand', sans-serif;
    line-height: 82px;
}

.bigSpring{
	font: 85px 'SpringsteelSerifHeavy', Georgia, serif;
	line-height: 72px;
	letter-spacing: normal;
    background: url(img/html-ui-avatar.png) transparent no-repeat 100px 5px;
    padding-left: 120px;
    .innerShadow;
}

.sharing {
	font-size: 20px;
	vertical-align: top;
	margin: 60px auto 20px;
	padding: 10px 0 8px 40px;
	background: hsla(50,0,1,.4);	
	.rounded(5px);
	width:70%;

	span {
		display: block;
		background: url(img/thumbs-up.png) no-repeat 0 0;
		height: 84px;
		float: left;
		width: 67px;
		margin: -35px 10px 0 -20px;		
	}
}

.accent { color: @colorAccent; }

.drop-shadow {
    position:relative;
    float:left;
    width:40%;    
    padding:1em; 
    margin:2em 10px 4em; 
    background:#fff;
    .shadow(0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset);
}
 
.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute; 
    z-index:-2;
}
 
.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}
 
 
.lifted {
    -moz-border-radius:4px; 
    border-radius:4px;
}
 
.lifted:before,
.lifted:after { 
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    .shadow;
    .rotated(-3deg);
}
 
.lifted:after {
    right:10px; 
    left:auto;
    .rotated(3deg);
}

.tag{
    width: 300px;
    background:@colorCream;
}

.tagWrapper{
    .rotated(-10deg);
    position:absolute;
    left:0px;
    top:0px;  
    width:351px;
    height:241px;
    text-align:center;
    padding-top:65px;
    .transition(all 0.5s ease-in-out);
    background: transparent url(img/big-cloud.png) no-repeat 0 0;
    cursor:hand;
    z-index:9000;
    
    h1{
    	font-family: 'Pacifico', Georgia, Serif;
    	font-size:62px;
    	padding-right:40px;
    }
    
    a{
        text-decoration:none;
        color:@colorText;
    }
}

.ie6 .tagWrapper{
    float:right;
    top:0px;
    left:0px;
}

.tagWrapper:hover{
    .rotated(-5deg);
}

/* Print styles! - If, when you've got some
-------------------------------------------------------------------------------*/
@media print {

}


/* Media queries - Target Form Factors 
-------------------------------------------------------------------------------*/
@media screen and (max-device-width: 480px) {


}

@media all and (orientation: portrait) {

}

@media all and (orientation: landscape) {

}