fikugsen/style.less

@font-size: 18; //in pixels

@column: 30;
@gutter: 10;

// from Frameless - http://framelessgrid.com/
.width (@cols:1) {
	width: (@cols * (@column + @gutter) - @gutter) / @font-size * 1em;
}

/*
	Margin, padding, and border resets
	except for form elements
*/

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
}


/*
	Consistency fixes
	adopted from http://necolas.github.com/normalize.css/
*/

article, aside, details, figcaption, figure, 
footer, header, hgroup, nav, section, audio, canvas, video {
	display: block;
}

html {
	height: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}

	body {min-height: 100%; font-size: 100%;}

sub, sup {
	font-size: 75%; 
	line-height: 0; 
	position: relative; 
	vertical-align: baseline;
}

sup {top: -0.5em;}
sub {bottom: -0.25em;}

pre {
	white-space: pre; 
	white-space: pre-wrap; 
	word-wrap: break-word;
}

b, strong {font-weight: bold;}
abbr[title] {border-bottom: 1px dotted;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a img, img {
	-ms-interpolation-mode: bicubic;
	border: 0;
}

input, textarea, button, select {
	margin: 0;
	font-size: 100%;
	line-height: normal;
	vertical-align: baseline;
}

button,
html input[type="button"], 
input[type="reset"], 
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
	
input[type="checkbox"],
input[type="radio"] {
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
	
textarea {overflow: auto;}

#wrapper_overview{
	margin: 1em auto;
	.width(20);
}
.group{
	margin-top: @font-size * 1px;
	.width(10);
	.parameter{
		.width(2);
		display: inline-block;
		.value{
			display: inline;
		}
	}
	.name{
		.width(8);
		display: inline-block;
		input{
			margin-left: 0.5em;
		}
	}
}
.invert(left){
	text-align: right;
}
.invert(right){
	text-align: left;
}
.align(@x) {
	float: @x;
	.value{
		text-align: @x;
	}
	.name{
		.invert(@x);
	}
}

#specials, #skills{
	.align(left);
}
#derived{
	.align(right);
}

.increment, .decrement{
	visibility: visible;
}
#skills{
	/* checkboxes! */
}
/* Colors */
@text: black;
@background: white;
@links: blue;
body{
	color: @text;
}
a {
	color: @links;
}