
/* Structure */
/* **************************** */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

*:first-child+html .clearfix { min-height: 0; }

* html .clearfix { height: 1%; }


* {
	margin: 0;
	padding: 0;
}


/* Typo, Links, Buttons */
/* **************************** */

body {
	background: #000000;
}

@font-face {
    font-family: 'plane_crashregular';
    src: url('plane_crash-webfont.eot');
    src: url('plane_crash-webfont.eot?#iefix') format('embedded-opentype'),
         url('plane_crash-webfont.woff') format('woff'),
         url('plane_crash-webfont.ttf') format('truetype'),
         url('plane_crash-webfont.svg#plane_crashregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body, small, span, select, input, textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #fff;
}

select, input, textarea {
	color: #000;
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h2, h3, dt {
	font-family: plane_crashregular, Arial, Helvetica, sans-serif;
}

h1 {
	display: none;
}

h2 {
	font-size: 32px;
	line-height: 32px;
	color: #fff;
	margin: 0 0 30px;
}

h3 {
	font-size: 20px;
	line-height: 26px;
	color: #fff;
}

h4 {
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
	margin: 0 0 20px;
}


p {
	font-size: 16px;
	margin-bottom: 30px;
}

ul {
	list-style-type: none; 
	margin-bottom: 30px;
}
li {
	font-size: 16px;
	margin-bottom: 10px;
}


dl {
	margin: 0 0 40px 0;
}

dt {
	font-size: 13px;
	line-height: 21px;
	margin: 0 0 8px 0;
	font-weight: bold;
}

dd {
	margin: 0 0 40px 0;	
}

.gap-down {
	margin-bottom: 40px;	
}

#wrapper {
	position: relative;	
	margin-left: auto;
	margin-right: auto;
	width: 940px;	
}

#leftColumn {
	display: block;
	width: 230px;
	height: 2000px;
	float: left;
}

#rightColumn {
	display: block;
	width: 700px;
	height: 2000px;	
	float: right;
}




/* Foot-Navigation */
/* **************************** */

#navFootContainer {
	display: block;
}
#navFoot {
	position: fixed;
	bottom: 10px;
	right: 10px;
	display: block;
	font-weight: bold;
}


/* Navigation */
/* **************************** */

#mainRedLine {
	position: fixed;
	margin-left: 100px;		
}
.redLineVertical {
	display: block;
	width: 4px;
	height: 100%;
	background: #f00;
}


#navContainer {
	position: fixed;	
	height: 400px;	
	width: 100px;
	top: 250px;
	z-index: 1000;
}

#navContainer #x {
	position: absolute;
	top: 0px;
	left: 49px;	
	display: block;
	width: 106px;
	height: 107px;
	background: url(../img/x.png) no-repeat;
}
#navContainer #x ul {
	list-style: none;
}
#navContainer #x .nav-button {
	position: absolute;
	display: block;
	height: 53px;
	width: 53px;		
}
#navContainer #x .nav-button span {
	display: none;
	position: absolute;
	text-transform: uppercase;
	font-weight: bold;
}
#navContainer #x .active .nav-button span,
#navContainer #x .nav-button:hover span {
	display: block;	
}
#navContainer #x a:hover {
	display: block;	
	text-decoration: none;
}


#navContainer #x .home {
	left: 53px;
	top: 0px;
}
#navContainer #x .references {	
	left: 53px;
	top: 53px;
}
#navContainer #x .vita {	
	left: 0px;
	top: 53px;
}
#navContainer #x .contact {	
	left: 0px;
	top: 0px;
}


#navContainer #x .home span {
	left: 53px;	
	top: -13px;
}
#navContainer #x .references span {
	left: 53px;	
	top: 53px;
}
#navContainer #x .vita span {
	left: -75px;	
	top: 53px;
}
#navContainer #x .contact span {
	left: -50px;	
	top: -13px;
}


#navContainer #xLine.redLineVertical {
	position: absolute;
	top: 53px;
	left: 100px;
	height: 70px;
}

#navContainer #o {
	position: absolute;
	top: 130px;
	left: 46px;
	display: block;
	width: 112px;
	height: 124px;
	background: url(../img/o.png) no-repeat;
}

#navContainer #o .redLineVertical {
	position: absolute;
	left: 54px;
	height: 30px;
}


/* Content */
/* **************************** */

.header {
	margin-bottom: 80px;
}
.content {
	margin-bottom: 300px;
}


.redLineHorizontal {
	position: absolute;
	left: 0px;
	display: block;
	right: 0px;
	height: 4px;
	background: #f00;
	margin-top: -15px;
}



/* Home */
/* **************************** */

#home {
	padding-top: 62px;	
}
#home img {
	margin-bottom: 20px;
}

#home .header {
	margin-bottom: 40px;	
}
#home .header img,
#home .redLineHorizontal {
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
}
#home .header img {
	margin-bottom: 30px;
}
#home .redLineHorizontal {
	margin-top: -25px;	
}



/* references */
/* **************************** */
#references .contentBox {
	margin-bottom: 10px;
}
#references .contentBox img,
#references .placeholder {
	float: left;
	margin-right: 20px;
}
#references .placeholder {
	display: block;
	width: 250px;
	height: 150px;
}

#references h2,
#references .redLineHorizontal {
	-moz-transform: rotate(3deg);
	-webkit-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);	
}


#references h3 {
	margin-bottom: 20px;
}

#references .lastBox {
	margin-bottom: 80px;
}

/* Vita */
/* **************************** */

#vita #pictureLine {
	display: block;
	width: 100%;
	height: 120px;
	background: url(../img/vita.png) no-repeat;
	margin-bottom: 30px;
}

#vita h2,
#vita .redLineHorizontal {
	-moz-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
}

/* downloads */
/* **************************** */

#downloads h2,
#downloads .redLineHorizontal {
	-moz-transform: rotate(4deg);
	-webkit-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
}
#downloads .content #press_download {
	display: block;
	width: 257px;
	height: 157px;
	background: url(../img/press_information.png) no-repeat;	
	background-position: 0px 0px;
	margin-left:-60px;
}
#downloads .content #press_download:hover {
	background-position: 0px -157px;
}

/* contact */
/* **************************** */

#contact {

}
#contact h2,
#contact .redLineHorizontal {
	-moz-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
}

#contactForm input,
#contactForm textarea {
	padding: 2px;
}
#contactForm label {
	display: inline-block;
	width: 70px;
}

#contactFormMessages.show{
	margin: 0px 0px 20px 0px;
	padding: 20px;
	border: 1px solid #A4A4A4;
	width: 300px;
}
#contactFormMessages.error {
	background: #ffe3e3;
	color: #FF0000;
}
#contactFormMessages.success {
	background: #cfe7d3;
	color: #007e15;
}
#contactFormMessages .icon {
	display: block;
	width: 48px;
	height: 48px;
	float: left;
}
#contactFormMessages.error .icon {
	background: url("../img/error.png") no-repeat;	
}
#contactFormMessages.success .icon {
	display: block;
	background: url("../img/success.png") no-repeat;	
}

#contactFormMessages ul {
	padding: 8px 0 8px 50px;
	margin: 0px;
	list-style: none;
}


/* about */
/* **************************** */

#about h2,
#about .redLineHorizontal {
	-moz-transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
}	

#about .contentContainer {
	width: 220px;
	margin: 0 20px 20px 0;
	float: left; 	
}
#about #easy-on {
	margin-left: 240px;
	margin-top: 50px;
}

#about #easy-on dt {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

