/*

Title:		16 COLUMN GRID
Author: 	@christopherdan
CMS: 		@ensocloud

*/


/* SECTION 1 : RESET
-------------------------------------------------------------------------------------------------------------------------------------------*/
html { -webkit-font-smoothing:antialiased !important; }

a, article, aside, blockquote, body, br, button, canvas, caption, col, colgroup, dd, div, dl, dt, embed, fieldset, figcaption, figure, footer,
form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, img, li, map, object, ol, output, p, pre, progress, section, table, tbody, textarea, tfoot,
th, thead, tr, ul, video  {
	-webkit-box-sizing:border-box; 					/* Makes life easier not having to deal with padding and borders. */
	-moz-box-sizing:border-box;						/* Makes life easier not having to deal with padding and borders. */
	box-sizing:border-box;							/* Makes life easier not having to deal with padding and borders. */
	margin:0;
	padding:0;
}

div, section, nav, article, aside, footer { margin:auto; overflow:hidden; }		/* Centers element clears all floats. */

a, a:hover, a:active, a:visited { outline:0; }									/* Remove ugly link outlines. */

a img { border:none; outline:0; }												/* Remove image borders when inside an anchor. */

img { vertical-align:bottom; max-width:100%; height:auto; }


/* SECTION 2 : COMMON CLASSES TO SPEED DEVELOPMENT
-------------------------------------------------------------------------------------------------------------------------------------------*/
.left			{ float:left; display:inline; left:0; }

.right			{ float:right; display:inline; right:0; }

.top			{ top:0; }

.bottom			{ bottom:0; }

.fixed			{ position:fixed; }

.abs			{ position:absolute; }

.relative		{ position:relative; }

.text-left		{ text-align:left; }

.text-right 	{ text-align:right; }

.text-center	{ text-align:center; }

.hidden			{ visibility:hidden; }

.none, .hide	{ display:none !important; }

.show 			{ display:block; }

.visible		{ overflow:visible; }

.test			{ background:rgba(255,0,0,.10); } /* This comes in handy when debugging element positioning. */



/* SECTION 3 : MARGINS
-------------------------------------------------------------------------------------------------------------------------------------------*/
.marg			{ margin:0 5px; } /* Warning: If you change this value you will need to change the widths below in Section 6. */

.marg-left  	{ margin-left:5px; } /* Warning: If you change this value you will need to change the widths below in Section 7. */

.marg-right 	{ margin-right:5px; } /* Warning: If you change this value you will need to change the widths below in Section 7. */

.marg-bottom 	{ margin-bottom:5px; }


/* SECTION 4 : WIDTHS
-------------------------------------------------------------------------------------------------------------------------------------------*/
.x1				{ width:60px;  }
.x2				{ width:120px; }
.x3				{ width:180px; }
.x4				{ width:240px; }
.x5				{ width:300px; }
.x6				{ width:360px; }
.x7				{ width:420px; }
.x8				{ width:480px; }
.x9				{ width:540px; }
.x10			{ width:600px; }
.x11			{ width:660px; }
.x12			{ width:720px; }
.x13			{ width:780px; }
.x14			{ width:840px; }
.x15			{ width:900px; }
.x16			{ width:960px; }

.x25			{ width:25%;   }
.x33			{ width:33.33%;}
.x50			{ width:50%;   }
.x100			{ width:100%;  }


/* SECTION 5 : 16 UNITS OF HEIGHT
-------------------------------------------------------------------------------------------------------------------------------------------*/
.y1				{ height:60px;  }
.y2				{ height:120px; }
.y3				{ height:180px; }
.y4				{ height:240px; }
.y5				{ height:300px; }
.y6				{ height:360px; }
.y7				{ height:420px; }
.y8				{ height:480px; }
.y9				{ height:540px; }
.y10			{ height:600px; }
.y11			{ height:660px; }
.y12			{ height:720px; }
.y13			{ height:780px; }
.y14			{ height:840px; }
.y15			{ height:900px; }
.y16			{ height:960px; }

.y25			{ height:25%;   }
.y33			{ height:33.33%;}
.y50			{ height:50%;   }
.y100			{ height:100%;  }


/* SECTION 6 : GRID WHEN USING .MARG ON .X CLASS
-------------------------------------------------------------------------------------------------------------------------------------------*/
.marg.x1		{ width:50px;  }
.marg.x2		{ width:110px; }
.marg.x3		{ width:170px; }
.marg.x4		{ width:230px; }
.marg.x5		{ width:290px; }
.marg.x6		{ width:350px; }
.marg.x7		{ width:410px; }
.marg.x8		{ width:470px; }
.marg.x9		{ width:530px; }
.marg.x10		{ width:590px; }
.marg.x11		{ width:650px; }
.marg.x12		{ width:710px; }
.marg.x13		{ width:770px; }
.marg.x14		{ width:830px; }
.marg.x15		{ width:890px; }
.marg.x16		{ width:950px; }


/* SECTION 7 : GRID USING .MARG-LEFT [OR] .MARG-RIGHT ON .X CLASS.
-------------------------------------------------------------------------------------------------------------------------------------------*/
.marg-left.x1,     /* OR */    .marg-right.x1     { width:55px;  }
.marg-left.x2,     /* OR */    .marg-right.x2     { width:115px; }
.marg-left.x3,     /* OR */    .marg-right.x3     { width:175px; }
.marg-left.x4,     /* OR */    .marg-right.x4     { width:235px; }
.marg-left.x5,     /* OR */    .marg-right.x5     { width:295px; }
.marg-left.x6,     /* OR */    .marg-right.x6     { width:355px; }
.marg-left.x7,     /* OR */    .marg-right.x7     { width:415px; }
.marg-left.x8,     /* OR */    .marg-right.x8     { width:475px; }
.marg-left.x9,     /* OR */    .marg-right.x9     { width:535px; }
.marg-left.x10,    /* OR */    .marg-right.x10    { width:595px; }
.marg-left.x11,    /* OR */    .marg-right.x11    { width:655px; }
.marg-left.x12,    /* OR */    .marg-right.x12    { width:715px; }
.marg-left.x13,    /* OR */    .marg-right.x13    { width:775px; }
.marg-left.x14,    /* OR */    .marg-right.x14    { width:835px; }
.marg-left.x15,    /* OR */    .marg-right.x15    { width:895px; }
.marg-left.x16,    /* OR */    .marg-right.x16    { width:955px; }


/* VARIABLES
-------------------------------------------------------------------------*/
@pt-sans-stack: "PT Sans", Arial, Helvetica, sans-serif;

@open-sans-stack: "Open Sans", Arial, Helvetica, sans-serif;

@museo-slab-stack: "museo-slab", Arial, Helvetica, sans-serif;

@black: #1b1b1b;

@gray-lightest: #ccc; /* Text */

@gray-light: #777; /* Text */

@gray: #555;

@gray-dark: #333; /* Headers */

@white:	#fff; /* Site Navigation */

@link: #369ae0;


/* MIXINS
-------------------------------------------------------------------------*/
.rounded (@radius: 8px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.text-shadow-dark { text-shadow:1px 1px 1px rgba(0, 0, 0, 0.65); }

.feature-shadow { text-shadow:1px 1px 0 #000; }

.inset {
	-webkit-box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.25);
	-moz-box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.25);
	box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.25);
}

.button {
  	font:bold 13px/40px @open-sans-stack;
  	display:inline-block;
  	margin:15px 15px 0 0;
	text-shadow:none;
	padding:0 20px;
	height:40px;
	.rounded(3px);
}

.button-blue {
  	text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  	border: 1px solid #3079ED;
  	background-color: #4b8cf7;
	background-image: -moz-linear-gradient(top, #4d90fe, #4787ed);
	background-image: -ms-linear-gradient(top, #4d90fe, #4787ed);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed));
	background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed);
	background-image: -o-linear-gradient(top, #4d90fe, #4787ed);
	background-image: linear-gradient(top, #4d90fe, #4787ed);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d90fe', endColorstr='#4787ed', GradientType=0);
	color:@white;
	.button;
}

.button-blue:hover, .button-blue:focus, .button-blue:active {
  	border: 1px solid #2F5BB7;
  	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  	background-color: #4387f5;
  	background-image: -moz-linear-gradient(top, #4d90fe, #357ae8);
  	background-image: -ms-linear-gradient(top, #4d90fe, #357ae8);
  	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8));
  	background-image: -webkit-linear-gradient(top, #4d90fe, #357ae8);
  	background-image: -o-linear-gradient(top, #4d90fe, #357ae8);
  	background-image: linear-gradient(top, #4d90fe, #357ae8);
  	background-repeat: repeat-x;
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d90fe', endColorstr='#357ae8', GradientType=0);
  	color:@white;
}

.button-blue:active, .button-blue.active {
  	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.button-gray {
  	border: 1px solid #dcdcdc;
  	background-color: #f3f3f3;
  	background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
  	background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
  	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f1f1f1));
  	background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  	background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
  	background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
  	background-repeat: repeat-x;
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f1f1f1', GradientType=0);
  	.button;
  	color:@gray-dark;
}

.button-gray:hover, .button-gray:focus, .button-gray:active {
  	border: 1px solid #c6c6c6;
  	background-color: #4387f5;
  	background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f8f8f8), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
  	background-repeat: repeat-x;
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d90fe', endColorstr='#357ae8', GradientType=0);
  	color:@gray-dark;

}

.button-gray:active, .button-gray.active {
  	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}


/* TAGS
-------------------------------------------------------------------------*/
body { background:@white; color:@gray; font:normal 14px/24px @open-sans-stack; padding-bottom:60px; }

a { color:#369ae0; text-decoration:none; }

a:active { color:#31bd20; }

a:hover { color:#299ef0; }

strong { color:@gray-dark; }

h1, h2, h3, h4, h5 { color:@gray-dark; margin-top:30px; }
h1 { font:normal 26px/36px @open-sans-stack;  }
h2 { font:normal 20px/30px @open-sans-stack; }
h3 { font:normal 18px/30px @open-sans-stack; }

h1:first-child { margin-top:0; }

ul, ol { margin:0 15px; padding:15px;  } /* Sets a normal bullet scheme */

ul + h1,
ul + h2,
ul + h3 { margin-top:15px; }

h1 + ul,
h2 + ul,
h3 + ul { margin-top:0; }

li { margin:0; padding:0; } /* Sets a normal bullet scheme */


/* MASTHEAD
-------------------------------------------------------------------------*/
.masthead {
	background:#333 url(../images/classy_fabric-light.png);
	height:75px;
	z-index:10;
	box-shadow:0 1px 10px #000;
	.x100;
	.fixed;
	.top;
	.left;
	overflow:visible;
}

.masthead-stage { .x16; .relative; overflow:visible; }


/* LOGO
-------------------------------------------------------------------------*/
.site-logo {
	height:75px;
	margin-top:24px;
	.x3;
	.left;
}


/* SITE NAVIGATION
-------------------------------------------------------------------------*/
.site-nav {
	height:75px;
	padding-top:23px;
	.x13;
	.right;
	.text-right;
}

.site-nav ul { list-style:none; margin:0; padding:0; }

.site-nav li { display:inline; }

.site-nav li a {
	display: inline-block; /* This keeps the last li from being cut-off when wrapping to 2nd line */
	padding:0 18px;
	margin-left:13px;
	font:bold 11px/30px @open-sans-stack;
	letter-spacing:1px;
	color:@white;
	.text-shadow-dark;
	text-transform:uppercase;
}

.site-nav li a:hover, .site-nav li.active a {
	background:rgba(0, 0, 0, 0.2);
	.inset;
	.rounded(20px);
}

.site-nav li:nth-last-child(2) a { color:#47ea47; }

li.draft a { font-style:italic !important; }


/* NEWSLETTER
-------------------------------------------------------------------------*/
.newsletter {
	.abs;
	.right;
	top:75px;
	.text-center;
	color:#fff;
}

.newsletter a {
	display:block;
	height:30px;
	font:bold 13px/30px @open-sans-stack;
	color:#fff;
	background:rgba(0,0,0,.3);
	padding:0 18	px;
}

.newsletter a:hover {
	background:rgba(0,0,0,.5);
}


/* STAGE
-------------------------------------------------------------------------*/
.stage {
	.x100;
}


/* FEATURE
-------------------------------------------------------------------------*/
.feature-section {
	background:#333 url('../images/classy_fabric.png');
	height:400px;
	.x100;
}

.feature {
	margin-top:130px;
	.x16;
}

.feature-header {
	font:300 50px/75px @open-sans-stack;
	color:@white;
	margin-top:0;
}

.feature-text {
	font:normal 18px/60px @open-sans-stack;
	color:@gray-lightest;
	.feature-shadow;
	.left;
	.x16;
}

.feature-text a.button-blue {
	text-transform:uppercase;
}


/* SUB-FEATURES
-------------------------------------------------------------------------*/
.sub-features {
	margin-top:50px;
	.x16;
}

.sub-features-big-header h2 { font:normal 32px/65px @open-sans-stack; }

.sub-feature-item { padding-bottom:120px; }

.sub-feature {
	.x5;
	padding:20px 0 0 15px;
}

.sub-feature.left { padding-right:30px; }

.sub-feature.right { padding-left:30px; }

.sub-feature-photo { .x11; }

.sub-feature-header {
	font:bold 14px/24px @open-sans-stack;
	text-transform: uppercase;
	padding-bottom:5px;
	color:@black;
}

.sub-feature-text {
	font:normal 14px/28px @open-sans-stack;
	color:@gray;
}


/* CALL TO ACTION
-------------------------------------------------------------------------*/
.cta { .x16; }

.benefits {
	.x8;
	.left;
}

.benefits-header {}

.benefits-text { margin-top:10px; }

.benefits-text ul {
	list-style:none;
	margin:0;
	padding:0;
}

.benefits-text li {
	background:url(../images/homepage-li-checked.gif) left 5px no-repeat;
	font:normal 15px/40px @open-sans-stack;
	list-style-position:inside;
	padding-left:40px;
	display:block;
	height:40px;
}

.signup {
	.x8;
	.left;
}


/* FEATURE SUBPAGE
-------------------------------------------------------------------------*/
.feature-section-subpage {
	background:#333 url('../images/classy_fabric.png');
	.x100;
}

.feature-section-subpage .feature { margin-top:120px; padding-bottom:60px; }

.feature-section-subpage .feature-header   {
	.x16;
	color:@white;
	font:400 40px/60px @open-sans-stack;
}

.feature-section-subpage .feature-text {
	font:normal 16px/30px @open-sans-stack;
	color:@gray-lightest;
	.left;
	.x16;
}


/* SUBPAGE
-------------------------------------------------------------------------*/
.subpage {
	margin-top:40px;
	.x16;
}

.sidebar {
	.x4;
	.left;
}

.sidebar-header {
	color:@gray-light;
	font:normal 14px/50px @open-sans-stack;
	margin-top:58px;
}

.sidebar-nav ul {
	list-style:none;
	margin:0;
	padding:0;
	margin-top:-1px;
}

.sidebar-nav li {
	margin:0;
	padding:0;
	min-height:36px;
	margin-bottom:1px;
}

.sidebar-nav li a {
	display:block;
	min-height:3px;
	font:normal 13px/36px @open-sans-stack;
	width:200px;
	text-indent:20px;
	border-left:5px transparent solid;
	-webkit-transition:color .5s ease-in;
	-moz-transition:color .5s ease-in;
	transition:color .5s ease-in;
}

.sidebar-nav li a:hover {
	font:normal 13px/36px @open-sans-stack;
	color:@gray-dark;
	border-left:5px #666 solid;
	background:#f5f5f5;
	text-indent:20px;
}

.sidebar-nav li.active a {
	font:normal 13px/36px @open-sans-stack;
	color:@gray-dark;
	border-left:5px #31bd20 solid;
	background:#f5f5f5;
	text-indent:20px;
}

.content-text {}

.code {
	display: block;
	padding:15px 5px 15px 15px;
	margin:0;
	border:none;
	font:bold 13px/22px Terminal, "Courier New", Courier, monospace;
	color:@white;
	background:@gray-dark url('/images/code-bg.gif');
	.rounded(10px);
}

.highlight-token { color:#4fef00; }

.content-text table { border-collapse:collapse; width:100%; }

.content-text table, th, td { border:1px solid #e2e2e2; }

.content-text th, td { padding:10px; }





/* PRICING GRID
-------------------------------------------------------------------------*/
.pricing-grid { }

.feature-list {
	.x4;
	.left;
}

.feature-list-signup a {
	display:block;
	height:100px;
	color:#31bd20;
	font:normal 18px/100px @open-sans-stack;
	-moz-transition:font-size .1s ease-in; /* Firefox 4 */
	-webkit-transition:font-size .1s ease-in; /* Safari and Chrome */
	border-bottom:1px solid #eee;
	.text-center;
}

.feature-list-signup a:hover { font-size:22px; }

.feature-list ul, .plan ul { list-style:none; margin:0; padding:0; }

.feature-list li {
	margin:0;
	padding:0 0 0 20px;
	background:@white;
	height:40px;
	font:normal 13px/40px @open-sans-stack;
	border-bottom:1px solid #eee;
}

.plan-feature li img { vertical-align:middle; }

.plan li {
	margin:0;
	padding:0;
	height:40px;
	font:normal 13px/40px @open-sans-stack;
	color:@gray;
	text-shadow:none;
	border-bottom:1px solid #fff;
}

.plan.a { background:#ebebeb; .x3; .left;  }

.plan.b { background:#e1e1e1; .x3; .left; }

.plan.c { background:#d7d7d7; .x3; .left; }

.plan.d { background:#ccc; .x3; .left;  }

.plan-name {
	background:@gray-dark url('/images/code-bg.gif');
	color:@white;
	font:bold 12px/20px @open-sans-stack;
	height:20px;
	.text-center;
}

.plan-price {
	height:80px;
	font:bold 40px/80px @open-sans-stack;
	color:@white;
	text-shadow:0 1px 0 #258f19;
	border-bottom:1px solid #fff;
	.text-center;
	background:#31bd20;
	border-right:1px solid #eee;
}

.small-text { font-size:12px; color:#aaa; }

.plan-price .small-text { color:@white; }

.plan-feature { .text-center; }

.plan-signup { height:80px; color:@white; .text-center; padding-top:20px;  }

.plan-signup a {
	background:#31bd20;
	display:inline-block;
	width:160px;
	height:50px;
	border:5px solid @white;
	font:bold 14px/40px @open-sans-stack;
	color:@white;
	margin-top:15px;
	.rounded(6px);
	text-shadow:0 1px 0 #258f19;
}

.plan-signup a:hover { background:#2ae214; }


/* REPEATERS
-------------------------------------------------------------------------*/
.repeater {
	.x100;
	.left;
}

.repeater ul { margin:0; padding:0; list-style-position:inside; list-style:none; }

.repeater ol  { margin:0; padding:0; list-style-position:inside; list-style:none; }

.repeater li { margin:0; padding:0; height:41px; font:normal 13px/40px arial, helvetica, sans-serif; border-bottom:dotted 1px #e4e4e4; }

.repeater li:first-child { border-top:dotted 1px #e4e4e4; }

.repeater a { display:block; height:40px; padding:0 3px; font:normal 13px/40px arial, helvetica, sans-serif; }

.repeater a:hover { color:#4a4a4a; background:#f4f4f4; }



/* SHOWCASE
-------------------------------------------------------------------------*/
.content {
	.x12;
	.right;
	overflow:visible;
}

.subpage { overflow:visible; }

.showcase-repeater {
	.x12;
	overflow:visible;
}

.showcase-item {
	.left;
	overflow:visible;
	background:@white;
	padding:10px;
	border:1px solid #ddd;
	margin-right:20px;
	margin-bottom:20px;
}

.showcase-text {
	margin-top:5px;
	font:normal 13px/30px @open-sans-stack;
}

.showcase-text a { color:@black; }

.showcase-text a:hover { color:@link; }

.showcase-photo {
	height: 150px;
	width: 165px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

.showcase-photo img {
	max-width:100%;
	height:auto;
	max-height: 100%;
}

.showcase-item-screenshot-container { margin-top:12px; position:relative; }

.showcase-item-screenshot {
	padding-top:50px;
	background:url(../images/browser.png) no-repeat;
	border:1px solid #cbcbcb;
	margin-top:2px;
}

.showcase-item-name {
	.abs;
	top:12px;
	left:78px;
	font:normal 8px/20px arial;
	text-shadow:0 1px 0 #fff;
}

.showcase-item-url {
	.abs;
	top:31px;
	left:85px;
	font:normal 9px/20px arial;
	text-shadow:0 1px 0 #fff;
}

.showcase-item-tags { }

.showcase-item-tags ul { margin:0; padding:0; }

.showcase-item-tags li {
	margin:0;
	padding:0;
	list-style:none;
	.left;
	margin-right:5px;
	border-radius:1px;
	font:bold 10px/24px arial;
	text-transform:uppercase;
}

.showcase-item-tags li a {
	color:#fff;
	display:block;
	height:24px;
	width:100%;
	border-radius:3px;
	padding:0 10px;
	background:#31bd20;
	white-space:nowrap;
	margin-top:5px;
}

.showcase-item-tags li a:hover {
	background:#666;
	color:#fff;
	text-shadow:none;
}

ul.box li:before,
ul.box li:after {
	content: '';
	z-index: -1;
	position: absolute;
	left: 10px;
	bottom: 10px;
	width: 70%;
	max-width: 300px;
	max-height: 100px;
	height: 55%;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	transform: skew(-15deg) rotate(-6deg);
}

ul.box li:after {
	left: auto;
	right: 10px;
	transform: skew(15deg) rotate(6deg);
}


/* BLOG
-------------------------------------------------------------------------*/
.post-sidebar {
	.x3;
	.left;
	padding-bottom:80px;
}

.post-content {
	.x13;
	.left;
	padding-bottom:80px;
}

.post-date {
	font:bold 18px/20px @open-sans-stack;
	width:100px;
	height:100px;
	background:#31bd20;
	border-radius:50px;
	.text-center;
	padding-top:33px;
	color:@white;
}

.post-title { padding-top:23px;  }

.post-summary {
	font:italic 18px/28px @open-sans-stack;
	color:#444;
	margin-top:15px;
}

.post-text {
	font:normal 15px/26px @open-sans-stack;
	color:#666;
	margin-top:15px;
}

.post-comments  { margin-top:30px; border-top:1px solid #eee; padding:20px 0 15px 0; }

.post-comments-button { width:140px; }

.post-comments .btn { margin:0; margin-right:5px; padding: 6px 10px;  }

.post-permalink { font:normal 12px/32px @open-sans-stack; }


/* SIGNUP
-------------------------------------------------------------------------*/
.signup {  }

.signup label { font-weight:bold; }

.signup .input-prepend .add-on { margin-left:0; } 						/* Fixes formatting bug with bootstrap or my reset. */

.radio input[type="radio"] { margin-left:-15px; margin-right:8px; }		/* Fixes formatting bug with bootstrap or my reset. */

.modal-footer { padding-top:15px; }

.quote { font:italic 13px/32px @open-sans-stack; color:#333; padding:25px 30px 10px 0; }

.quote h4 { font:italic 18px/32px @open-sans-stack; color:#999;  }



.twitter { width:85px; }






.content-home ul { list-style:none; margin:0; padding:0;  }

.content-home li {
	height:40px;
	background:url(../images/homepage-li-checked.gif) left 4px no-repeat;
	list-style-position:inside;
	padding-left:40px;
	font:normal 15px/40px "PT Sans", Arial, Helvetica, sans-serif;
	display:block;
}

.content-home li:hover { cursor:pointer; }

/* FORM ELEMENTS
-------------------------------------------------------------------------*/
textarea {
	border:1px #ebebeb solid;
	outline:none;
	font:normal 13px/26px Arial, Helvetica, sans-serif;
	color:#404040;
	width:374px;
	height:125px;
	background:url(/images/input-bg.gif);
	outline:none;
	font:normal 14px/45px Courier, "Courier New", monospace;
	padding-left:10px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-moz-box-shadow:inset 1px 1px 4px rgba(0,0,0,.15);
  	-webkit-box-shadow:inset 1px 1px 4px rgba(0,0,0,.15);
  	box-shadow:inset 1px 1px 4px rgba(0,0,0,.15);
}

input[type=text], input[type=password] {
	border:1px #ebebeb solid;
	width:360px;
	height:45px;
	background:url(/images/input-bg.gif);
	outline:none;
	font:normal 14px/45px Courier, "Courier New", monospace;
	color:#4a4a4a;
	padding-left:10px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-moz-box-shadow:inset 1px 1px 4px rgba(0,0,0,.15);
  	-webkit-box-shadow:inset 1px 1px 4px rgba(0,0,0,.15);
  	box-shadow:inset 1px 1px 4px rgba(0,0,0,.15);
}

input[type=button], input[type=submit] {
	background:#31bd20;
	padding:0 26px;
	height:50px;
	width:200px;
	border:5px solid #eee;
	border-radius:6px;
	font:bold 16px/40px "PT Sans", Arial, Helvetica, sans-serif;
	display:block;
	color:#fff;
	text-align:center;
	margin-top:20px;
	margin-bottom:10px;
}

input[type=button]:hover {
	background:#2ae214;
	color:#fff;
}

input[type=radio] { margin-right:5px; }

label { margin-left:5px; }

.radio-toggle { padding-top:20px; padding-bottom:20px; }

.small-text { font-size:12px; color:#aaa; }


.content-home-signup-header {
	font:normal 20px/38px "PT Sans", Arial, Helvetica, sans-serif;
	padding-bottom:5px;
}


.trial-mode {
	color:#999;
	margin-right:15px;
	font-size:11px;
}


a.cta-link {
	background:#35B600;
	padding:0 26px;
	height:50px;
	width:170px;
	border-radius:6px;
	border:5px solid #EEE;
	font:bold 14px/40px arial, helvetica, sans-serif;
	display:block;
	color:#fff;
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}

.content-home-header h2 { margin-top:0; }


/* TAG CREATOR
-------------------------------------------------------------------------*/
.tag-chooser {
	.x16;
	.left;
}

.tag {
	.x16;
	.left;
}

.tag label {
	margin:0;
	padding:0;
	margin-top:5px;
	font-weight:bold;
}

.tag input[type="text"] {
	height:20px;
	width:200px;
	color:@gray-light;
	padding:0;
	margin:0;
	font:normal 12px/20px arial, helvetica, sans-serif;
	padding:2px 5px;
	box-shadow:none;
}

.tag select, input[type="file"] {
	height: 20px;
	line-height: 20px;
}

.tag-parent-wrapper { padding-bottom:20px;}

.tag-attributes {
	.x4;
	.left;
}

.tag-attributes h2 {
	padding-bottom:10px;
}

.tag-preview {
	.x11;
	.right;
}

.tag-content-code h2 { margin-top:0; padding-bottom:0; }

.tag .code {
	.x100;
	margin-top:10px;
}

.tag-edit {
	.x100;
}

.tag-output {
	.x100;
}

.tag-note {
	margin-top:5px;
}

.tag-notes strong {
	display:block;
	margin-top:10px;
}

.customers-header { padding-bottom:30px; }