/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

body {
	background: url(images/bg.png) left top;
}

img {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#wrapper {
	width: 940px;
	height: 100%;
	background: #d5d5d5;
	margin: 0 auto;
}

#top, #about, #contact {
	min-height: 850px;
}

#footer {
	display: block;
	margin-top: 100px;
	background: #9f9f9f;
	padding: 20px 0;
	text-align: center;
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	font-size: 20px;
	color: #fff;
}

#thanks {
	display: block;
	padding: 200px 100px;
	text-align: center;
}

#thanks h1 {
	font-family: 'Lobster', cursive;
	font-size: 100px;
	color: #9f9f9f;
}

#nav {
	position: fixed;
	top: 0;
	width: 200px;
	height: 533px;
	background: url(images/bg-nav.png) left top;
}

#nav ul {
	position: relative;
	left: 40px;
	top: 315px;
	text-align: center;
	font-family: 'Fjalla One', sans-serif;
	font-size: 20px;
	text-transform: uppercase;
}

#nav ul li a {
	border-top: 1px solid #184f70;
	display: block;
	padding: 10px 0 8px 0;
	width: 140px;
	color: #fff;
	text-decoration: none;
}

#nav ul li a.last {
	border-bottom: 1px solid #184f70;
}

#nav ul li a:hover {
	background: #006097;
}

h1, h2, h3, h4 {
	font-family: 'Fjalla One', sans-serif;
}

h2.title {
	position: relative;
	top: 15px;
	display: block;
	background: #9f9f9f;
	color: #d5d5d5;
	font-size: 31px;
	text-indent: 240px;
	padding: 12px 0;
	letter-spacing: -2px;
	text-transform: uppercase;
}

/*RIBBON CORNER EFFECT* not being used - use negative left (before) and right (after) margins to create effect

h2.title:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0px;
  height: 0;
  width: 0;
  border-top: 10px solid #717171;
  border-left: 10px solid transparent;
}

h2.title:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0px;
  height: 0;
  width: 0;
  border-top: 10px solid #717171;
  border-right: 10px solid transparent;
}

*/

#content {
	width: 700px;
	padding: 28px 0 0 240px;
}

.list, .info {
	float: right;
}

.info {
	width: 210px;
	text-align: center;
}

.info h2, .list h2 {
	-moz-box-shadow: 0px 0px 6px #888;
	-webkit-box-shadow: 0px 0px 6px #888;
	box-shadow: 0px 0px 6px #888;
}

.info h2 {
	position: relative;
	margin: 25px -10px 0 0;
	background: #d11f1f;
	color: #fff;
	font-size: 22px;
	padding: 8px 10px 8px 0;
	letter-spacing: -1px;
	text-transform: uppercase;
}

/*RIBBON CORNER EFFECT*/
.info h2:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0px;
  height: 0;
  width: 0;
  border-top: 10px solid #5e1111;
  border-right: 10px solid transparent;
}

.info p {
	font-family: 'Fjalla One', sans-serif;
	color: #535353;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.list {
	margin-top: 50px;
	width: 210px;
}

.list h2 {
	position: relative;
	font-family: 'Lobster', cursive;
	font-size: 27px;
	color: #fff;
	background: #0075b8;
	padding: 8px 8px;
	margin: 0 -10px 0 0;
}

/*RIBBON CORNER EFFECT*/
.list h2:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0px;
  height: 0;
  width: 0;
  border-top: 10px solid #003d60;
  border-right: 10px solid transparent;
}

.list ul {
	list-style: square url(images/check.png);
	font-family: 'Fjalla One', sans-serif;
	font-size: 20px;
	color: #535353;
	margin: 10px 0 0 30px;
	text-transform: uppercase;
	letter-spacing: -1px;
}

.list li {
	line-height: 40px;
}

#top h3, #about h3, #contact h3 {
	margin: 10px 0 0 0;
	font-family: 'Lobster', cursive;
	font-size: 40px;
	color: #8d8d8d;
}

#top h3 em, #about h3 em {
	margin: 0 0 0 34px;
	font-family: 'Fjalla One', sans-serif;
	font-size: 90px;
	line-height: 90px;
	letter-spacing: -6px;
	text-transform: uppercase;
	color: #0075b8;
}

.text-area {
	margin: 15px 30px 70px 63px;
}

p {
	font-family: 'Pontano Sans', arial, sans-serif;
	font-size: 17px;
	line-height: 130%;
	color: #363636;
	margin: 0 0 35px 0;
}

#contact p {
	margin: 20px 0 0 0;
}

a.arrow, a.no-arrow {
	font-family: 'Fjalla One', sans-serif;
	font-size: 28px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: -1px;
	color: #fff;
	background: #d11f1f;
	padding: 10px 14px 10px 14px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

a.no-arrow:hover {
	background: #8d8d8d;
}

a.arrow {
	background: #d11f1f url(images/arrow-down.png) no-repeat center right;
	padding: 10px 50px 10px 14px;
}

a.arrow:hover {
	background: #8d8d8d url(images/arrow-down.png) no-repeat center right;
}

form {
	margin: 25px 0 0 0;
	width: 445px;
	padding: 0;
}

form p {
	font-family: 'Fjalla One', sans-serif;
	font-size: 17px;
	color: #0075b8;
	text-transform: uppercase;
	letter-spacing: -1px;
}

form input, form textarea {
	width: 429px;
	border: 1px solid #9f9f9f;
	padding: 2px;
	font-family: 'Pontano Sans', sans-serif;
	font-size: 16px;
	color: #535353;
}

form input[type=submit] {
	width: 90px;
	font-family: 'Fjalla One', sans-serif;
	font-size: 20px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: -1px;
	color: #fff;
	background: #d11f1f;
	padding: 8px 11px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor: pointer;
}

form input[type=submit]:hover {
	background: #8d8d8d;
}