@import "compass/css3/transition";

body {
	font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
	color: $forecolor;
	// @include baseline-grid-background(24px, darken($white, 7%));
	// padding-top: 5px;
	@include adjust-font-size-to(16px);
}

/* =p */
p {
	@include trailer(1);
}

/* =headings */
h1, h2, h3, h4 {
	font-weight: 500;
	margin-top: 24px;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
h1 {
	font-size: 4.25em;
	line-height: 4.5rem;
	position: relative;
	top: .07em;
}
h2 {
	@include adjust-font-size-to(42px);
	position: relative;
	top: .07em;
}
h3 {
	font-size: 1.625em;
	line-height: 1.5rem;
	position: relative;
	top: -0.125em;
}
h4 {
	@include adjust-font-size-to(24px);
	font-weight: 400;
	position: relative;
	top: .4em;
}
h5 {
	color: $primary;
}
h6 {
	font-weight: 300;
	@include adjust-font-size-to(15px);
	color: lighten($forecolor, 20%);
}

/* =links */
a, a:visited, a:hover, a:focus {
	color: $primary;
	// @include single-transition(all, .5s, 0s);
}
a:visited {
	color: lighten($primary, 10%);
}
a:hover {
	color: $secondary;
}
a:active {
	color: saturate($primary, 30%);
}
h1 a {
	text-decoration: none;
}

/* =blockquote */
blockquote {
	border-top: 1px $backcolor solid;
	font-weight: 300;
	@include padding-trailer(2);
	padding-right: 3em;
	padding-left: 3em;
	background-color: transparentize($forecolor, 0.9);
	border-left: darken($backcolor, 20%) .25em solid;
	&:before {
		content: '\201C';
		position: relative;
		top: .45em;
		left: -.5em;
		@include adjust-font-size-to(68px);
		color: lighten($forecolor, 15%);
	}
	p:first-child {
		@include leader(-1);
	}
	> p:last-of-type:after{
		content: '\201D';
		font-weight: 700;
		color: lighten($forecolor, 15%);
	}
}
cite {
	font-style: italic;
	&:before {
		content: '—';
	}
}

/* =lists */
ul, ol {
	margin-left: 1.5em;
}
ul { list-style-type: square; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-latin; }
ul ul { list-style-type: circle; }
dt, dfn {
	font-weight: 700;
	clear: both;
}
dl {
	padding: 1.5em;
	background-color: transparentize($forecolor, 0.9);
	dt {
		@include adjust-font-size-to(24px);
		font-weight: 300;
		position: relative;
		top: .4em;
	}
	dd { color: lighten($forecolor, 10%); }
	+ p, + h1, + h2, + h3, + h4, + h5 { clear: both; }
}

/* little elements */
strong { font-weight: 700; }
em { font-style: italic; }
abbr {
	font-weight: 300;
	border-bottom: 1px dotted darken($forecolor, 10%); 
}
mark { 
	background-color: $secondary;
	color: $white;
	padding: .2em;
	margin: -.2em;
}
pre code, code, pre {
	font-family: Menlo, "Lucida Console", Monaco, 'Courier New', Courier, monospace;
	font-size: 0.8125em;
	line-height: 1em;
}
pre { 
	@include trailer(1);
	background-color: $forecolor;
	background-color: transparentize($forecolor, 0.1);
	color: $backcolor;
	padding: 1.5em;
}

/* =tables */
table {
	width: 100%;
	@include trailer(1);
}
tr {
	width: 100%;
	border-color: darken($backcolor, 20%);
}
td, th {
	padding: 0.75em;
}
tbody tr:nth-child(even) td {
	background-color: transparentize($forecolor, 0.9);
}
thead th, tfoot td {
	background-color: transparentize($forecolor, 0.2);
	color: $white;
}

/* =forms */
form {
	background-color: transparentize($forecolor, 0.9);
	padding: 1.5em;
	@include trailer(1);
}
legend {
	@include adjust-font-size-to(26px);
	margin-bottom: .95em;
	position: relative;
	top: 0.34615384615385em;
}
select {
	margin-bottom: 1.6rem;
}
input, textarea {
	font-size: inherit;
	background-color: $backcolor;
	border: none;
	padding: 0.75em;
	width: 94%;
	margin-bottom: 1.65em;
}
textarea {
	height: 7.5em;
	margin-bottom: 1.15em;
}
label {
	margin-top: 3em;
}
.info {
	font-size: 0.625em;
	color: lighten($forecolor, 20%);
	margin-left: 1em;
}
.inline {
	@include trailer(-1);
}
.inline span {
	position: relative;
	top: -1.5em;
	left: 1.7em;
}
input[type=radio] {
	position: relative;
	// top: 1.2em;
	margin-bottom: 0.1875em;
}
.radio {
	margin-bottom: 0.0625em;
}
input[type=checkbox] {
	margin-bottom: 0.125em;
}
input[type=submit], input[type=reset] {
	width: 25%;
	border: 1px solid darken($backcolor, 30%);
	background-color: darken($backcolor, 10%);
	@include background-image(linear-gradient(darken($backcolor, 2%), darken($backcolor, 15%)));
	@include adjust-font-size-to(13px);
	border-radius: .25em;
	padding: .25em;
	margin-bottom: 1.15em;
	&:hover {
		@include background-image(linear-gradient(darken($backcolor, 15%), darken($backcolor, 2%)));
		cursor: pointer;
	}
	&:focus, &:active {
		box-shadow: 1px 1px 1px darken($backcolor, 30%) inset;
	}
}

/* =images */
img {
	margin: -0.375em 0 0;
	padding: 0;
}