/* Colors: Orange - #FF7200 */



@import "reset.css";



/* -------------------- */

/* -- General Styles -- */

/* -------------------- */

#wrap { width: 800px; margin: 0 auto 50px; }

body { font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #555; font-weight: normal; }

h1 { font-size: 38px; margin: 10px 0 10px 0; }

h2 { font-size: 34px; margin: 10px 0 10px 0; }

h3 { font-size: 24px; margin: 0 0 10px 0; }

h4 { font-size: 18px; margin: 0 0 10px 0; }

h5 { font-size: 16px; margin: 0 0 5px 0; }

h6 { font-size: 14px; margin: 0 0 5px 0; }

p { margin: 0 0 15px 0; }

a { text-decoration: none; color: #FF7200; }

a:hover { color: #222; }

em { font-style: italic; }

ul { margin: 0 0 15px 15px; list-style-type: circle; }ck

ol { margin: 15px 0 15px 20px; list-style-type: decimal; }

strong, b { font-weight: bold; }

.hide { display: none; }



/* ------------ */

/* -- Layout -- */

/* ------------ */

#main { margin: 10px 0 60px 0; overflow: hidden; }

#content { float: left; width: 450px; }

#sidebar { float: right; width: 200px; margin: 0 2px 0 0; }



/* ------------ */

/* -- Header -- */

/* ------------ */

#header { padding: 20px 0 0 0; margin: 0 0 30px 0; }

#header h1 { float: left; font-size: 30px; color: #555; letter-spacing: -1px; font-weight: bold; margin: 0 0 35px 0; }

#header h1 a { color: #555; }

#header h2 { float: right; font-size: 20px; color: #aaa; font-weight: normal; margin: 3px 0 0 0; }



/* --------- */

/* -- Nav -- */

/* --------- */

#nav { clear: both; margin: 0; padding: 10px 0 9px 0; overflow: hidden; border-top: 1px #ddd dotted; border-bottom: 1px #ddd dotted; }

#nav li { float: left; list-style: none; }

#nav li span { padding: 0 10px; font-weight: bold; }

#nav li a { color: #555; font-weight: bold; font-size: 14px; }

#nav li a:hover { color: #FF7200; font-weight: bold; }

#nav li a.current { color: #FF7200; }



/* ---------------- */

/* -- Front Page -- */

/* ---------------- */

#intro { border-bottom: 1px #ddd dotted; text-align: justify; }

#intro h3 { font-size: 22px; font-weight: normal; line-height: 34px; margin: 0 0 15px 0; }

.frontpage h4 { font-size: 14px; }



/* -------------- */

/* -- Sidebars -- */

/* -------------- */

#sidebar img { width: 200px; border: 1px #eee solid; margin: 0 0 20px 0; }

#sidebar .project-title { display: block; margin: 0 0 2px 0; }

#sidebar h5 { font-size: 14px; margin: 0 0 15px 0; }

.contact-sidebar { background-color: #f5f5f5; padding: 20px 20px 10px 20px; border: 1px #eee solid; }

.contact-sidebar p { line-height: 18px; }





/* -------------- */

/* -- Articles -- */

/* -------------- */

.article { margin: 0 0 0 0; border-bottom: 1px #ddd dotted; padding: 30px 0; }

.article-title { font-size: 14px; font-weight: bold; margin: 0 0 4px 0; }

.article-overview { margin: 0 0 4px 0; }

.article-read-more { margin: 0; }

#article-nav p { margin: 8px 0 0 0; }

.articles .first { padding-top: 0; }





/* ------------- */

/* -- Contact -- */

/* ------------- */

#contact-form { clear: both; margin: 24px 0 0 0; border: none; }

#contact-form input[type=text] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }

#contact-form textarea { width: 350px; height: 150px; border: 1px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }

#contact-form input[type=submit] { background: url(../images/submit-button-orange.jpg) no-repeat; width: 109px; height: 38px; margin: 15px 0 0 -5px; border: none; cursor: pointer; }

#contact-form input[type=submit]:hover { background: url(../images/submit-button-orange-hover.jpg) no-repeat; }

#response { padding: 10px; border: 1px #ddd solid; background-color: #eee; color: #9e0616; }



/* ------------ */

/* -- Footer -- */

/* ------------ */

#footer { clear: both; border-top: 1px #ddd dotted; margin: 40px 0 0 0; padding: 5px 0 0 0; color: #aaa; }

#footer .twitter { float: right; }

#footer2 { text-align: left; padding-left: 55px;margin-left: 200px; }




.left {
  float: left;
  margin-right: 1em;
}


article {
  padding: 1em;
  width: 65%;
  margin: 0 auto;
}


figure {
  text-align: center;
  text-transform: uppercase;
  padding: .2em;
  margin: 0;
}

figure img {
  max-width: 100%;
}