/* @group Reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code,del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;} table {border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;} table, td, th {vertical-align: middle;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} a img {border: none;} :focus {outline: 0;} /* @end Reset */

/* @group Body */

body {
  background: #ffffe5;
  font: 15px/20px Georgia, "Times New Roman", Times, serif;
}

em {
  font-style: italic;
}

.inner {
  margin: 0 auto;
  width: 960px;
}

.clear {
  clear: both;
}

/* @end */

/* @group Header */

#header {
  background: #830006 url(../images/mars-bg.jpg) repeat-x center top;
}

#header h1 {
  background: url(../images/header-h1.png) no-repeat left top;
  display: inline;
  height: 122px;
  float: left;
  text-indent: -9999px;
  width: 610px;
}

#header h2 {
  background: url(../images/header-h2.png) no-repeat left top;
  display: inline;
  float: right;
  height: 122px;
  text-indent: -9999px;
  width: 350px;
}

#header h3 {
  background: url(../images/header-h3.png) no-repeat left top;
  clear: both;
  height: 120px;
  text-indent: -9999px;
  width: 960px;
}

#header h3 span {
  float: right;
}

/* @group Navigation */

#navigation {
  background: url(../images/starring2.png) no-repeat left top;
  clear: both;
  margin: 0 20px 0 0;
  overflow: auto;
  padding: 0 0 0 230px;
  width: 720px;
}

#navigation a:link,
#navigation a:visited {
  color: #ffffe5;
  display: block;
  text-decoration: none;
}

.nav-item a span {
  display: none;
}

.nav-item {
  color: #fff;
  display: inline;
  float: left;
  font: 600 26px/36px Tungsten, Helvetica, Arial, sans-serif;
  margin: 0 0 0 20px;
  width: 100px;
  text-transform: uppercase;
}

.nav-item a {
  display: block;
  float: left;
  padding-top: 58px;
  width: 100px;
}

#nav-about,
#nav-web,
#nav-illu,
#nav-print,
#nav-other,
#nav-contact {
  background-position: left top;
  background-repeat: no-repeat;
}

#nav-about {
  background-image: url(../images/nav-about.png);
}

#nav-web {
  background-image: url(../images/nav-web.png);
}

#nav-illu {
  background-image: url(../images/nav-illu.png);
}

#nav-print {
  background-image: url(../images/nav-print.png);
}

#nav-other {
  background-image: url(../images/nav-other.png);
}

#nav-contact {
  background-image: url(../images/nav-contact.png);
}

.nav-item img {
  display: block;
  height: 130px;
  margin: 0 10px 0 10px;
  width: 80px;
}

/* @end */

/* @end */

/* @group About */

#about {
  background: url(../images/city.png) repeat-x center top;
}

#about h2 {
  background: url(../images/call-out.png) no-repeat left top;
  height: 180px;
  text-indent: -9999px;
}

#about-text {
  background: #e6e5cd url(../images/about-text.png) repeat-x center top;
  padding: 40px 0 0 0;
  width: auto;
}

#about-text .inner {
  position: relative;
}

#about-text p {
  color: #935f56;
  display: inline;
  float: right;
  margin: 0 10px;
  padding: 0 0 40px 0;
  width: 700px;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
}

#about-text .inner img {
  bottom: -11px;
  left: -40px;
  margin: 0;
  position: absolute;
}

/* @end */

/* @group Quotes */

.mum blockquote,
.twitter blockquote {
  height: 100px;
  margin: 0 auto;
  text-indent: -9999px;
  width: 940px;
}

.mum {
  background: #800000 url(../images/quote-bg.jpg) repeat-x center top;
}

.mum blockquote {
  background: url(../images/mum.jpg) no-repeat top left;
}

.twitter {
  background: #800000 url(../images/quote-bg2.jpg) repeat-x center top;
}

.twitter blockquote {
  background: url(../images/brought.jpg) no-repeat top left;
}

.twitter blockquote a {
  display: block;
  height: 100px;
  width: 940px;
}

/* @end */

/* @group Work */

#work-container {
  clear: both;
  height: 500px;
  overflow: hidden;
  width: 940px;
}

#work-container h2 {
  font-size: 36px;
  line-height: 40px;
  margin: 0 0 18px 0;
}

#work-container p,
.work-info {
  margin: 18px 40px 18px 0;
}

#content-web a:link,
#content-web a:visited,
#content-print-id a:link,
#content-print-id a:visited {
  color: #ffffe5;
}

#content-web a:hover,
#content-print-id a:hover {
  border-bottom: solid 1px #ffffe5;
}

.work-info {
  list-style: none;
}

.work-info strong {
  clear: both;
  color: #ff0000;
  display: block;
  float: left;
  font: bold 11px/20px "Lucida Grande", Helvetica, Arial, sans-serif;
  width: 100px;
}

.piece1 .arrow,
.piece2 .arrow,
.piece3 .arrow,
.piece4 .arrow,
.piece5 .arrow {
  background: url(../images/arrow.png);
  height: 48px;
  left: 605px;
  position: absolute;
  width: 25px;
  z-index: 99999;
}

.piece1 .arrow {
  top: 21px;
}

.piece2 .arrow {
  top: 116px;
}

.piece3 .arrow {
  top: 211px;
}

.piece4 .arrow {
  top: 306px;
}

.piece5 .arrow {
  top: 401px;
}

#work {
  background: #222 url(../images/work-bg2.jpg) repeat-x top center;
  padding: 25px 0 15px 0;
}

#work h1 {
  display: none;
}

#work .inner {
  width: 940px;
}

#work-web,
#work-illustration,
#work-print-id,
#work-other {
  background: url(../images/work-border.png) no-repeat left top;
  padding: 10px;
}

#work-other {
  height: 470px;
  width: 940px;
}

#work-other img {
  padding: 1px;
}

/* @group Section Navigation */

#sub-nav {
  display: block;
  float: left;
  height: 46px;
  list-style: none;
  margin: 0 0 10px 0;
  overflow: auto;
  width: 640px;
}

#sub-nav li {
  display: inline;
  text-indent: -9999px;
}

#sub-nav-web,
#sub-nav-illu,
#sub-nav-print,
#sub-nav-other {
  background-repeat: no-repeat;
  background-position: left 0px;
  display: block;
  float: left;
  height: 46px;
}

#sub-nav-web {
  background-image: url(../images/sub-nav-web.png);
  width: 84px;
}

#sub-nav-illu {
  background-image: url(../images/sub-nav-illu.png);
  width: 248px;
}

#sub-nav-print {
  background-image: url(../images/sub-nav-print.png);
  width: 192px;
}

#sub-nav-other {
  background-image: url(../images/sub-nav-other.png);
  width: 116px;
}

#sub-nav a:hover {
  background-position: left -46px;
}

.active {
  background-position: left -92px !important;
}

#direction {
  display: inline;
  float: right;
  height: 46px;
  list-style: none;
  text-indent: -9999px;
  width: 185px;
}

#direction-top,
#direction-about,
#direction-contact {
  background-repeat: no-repeat;
  background-position: left 0px;
  display: block;
  float: left;
  height: 46px;
}

#direction-top {
  background-image: url(../images/sub-nav-top.png);
  width: 54px;
}

#direction-about {
  background-image: url(../images/sub-nav-about.png);
  width: 56px;
}

#direction-contact {
  background-image: url(../images/sub-nav-contact.png);
  width: 75px;
}

/* @end */

/* @group Work Navigation */

#work-nav-web,
#work-nav-illustration,
#work-nav-print-id,
#work-nav-other {
  border-left: solid 5px #ffffe5;
  display: inline;
  float: right;
  list-style: none;
  overflow: hidden;
  width: 285px;
}

#work-nav-web li,
#work-nav-illustration li,
#work-nav-print-id li,
#work-nav-other li {
  border-bottom: solid 5px #ffffe5;
  height: 90px;
  position: relative;
  width: 285px;
}

#work-nav-web li:hover span,
#work-nav-illustration li:hover span,
#work-nav-print-id li:hover span,
#work-nav-other li:hover span {
  opacity: 0.9;
}

#work-nav-web img,
#work-nav-illustration img,
#work-nav-print-id img,
#work-nav-other img {
  padding: 1px;
}

#work-nav-web span,
#work-nav-illustration span,
#work-nav-print-id span,
#work-nav-other span {
  background: url(../images/title-bg.png);
  bottom: 5px;
  border-radius: 3px;
  display: block;
  font: 11px/15px "Lucida Grande", Helvetica, Arial, sans-serif;
  left: 5px;
  opacity: 0.5;
  padding: 5px 7px;
  position: absolute;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

#work-nav-web a:link,
#work-nav-web a:visited,
#work-nav-illustration a:link,
#work-nav-illustration a:visited,
#work-nav-print-id a:link,
#work-nav-print-id a:visited,
#work-nav-other a:link,
#work-nav-other a:visited {
  color: #ffffe5;
  text-decoration: none;
}

li.last {
  border-bottom: none !important;
}

.three {
  height: 280px !important;
}

/* @end */

/* @group Content */

#content-web,
#content-illustration,
#content-print-id,
#content-other {
  display: inline;
  float: left;
  height: 470px;
  position: relative;
  width: 630px;
}

#content-web img,
#content-illustration img,
#content-print-id img,
#content-other img {
  padding: 1px;
}

#content-web .overlay,
#content-illustration .overlay,
#content-print-id .overlay,
#content-other .overlay {
  background: url(../images/overlay-bg.png);
  color: #ffffe5;
  display: none;
  height: 430px;
  left: 0;
  /*margin: 2px 0 0 2px;*/
  padding: 20px;
  position: absolute;
  top: 0;
  width: 590px;
  z-index: 9999;
}

#content-web:hover .overlay,
#content-illustration:hover .overlay,
#content-print-id:hover .overlay,
#content-other:hover .overlay {
  display: block;
  z-index: 9999;
}

.info {
  background: #fff url(../images/info.png);
  bottom: 40px;
  height: 29px;
  left: 35px;
  position: absolute;
  width: 29px;
  z-index: 998;
}

/* @end */

/* @end */

/* @group Contact */

#contact h1 {
  background: #800000 url(../images/h1-light-bg.png) repeat-x top center;
}

#contact h1 span {
  background: url(../images/contact-h1.png) no-repeat top left;
  display: block;
  height: 90px;
  margin: 0 auto;
  text-indent: -9999px;
  width: 940px;
}

.success {
  background: url(../images/contact-h1-success.png) no-repeat top left !important;
}

#contact {
  background: #830006 url(../images/mars-bg2.jpg) repeat-x center 90px;
}

#form {
  overflow: auto;
  padding: 25px 0 20px 0;
  width: 960px;
}

#contact label {
  display: block;
  height: 21px;
  text-indent: -9999px;
}

.form-name label {
  background: url(../images/form-name.png) no-repeat top left;
}

.form-email label {
  background: url(../images/form-email.png) no-repeat top left;
}

.form-time label {
  background: url(../images/form-time.png) no-repeat top left;
}

.form-budget label {
  background: url(../images/form-budget.png) no-repeat top left;
}

.input,
.input-sml {
  color: #ffffe5;
  display: inline;
  float: left;
  margin: 0 10px;
}

.input {
  width: 300px;
}

.input-sml {
  width: 140px;
}

.input input {
  background: url(../images/input-bg.png) no-repeat left top;
  border: none;
  color: #222;
  font: 15px/20px Georgia, Times, serif;
  height: 20px;
  margin: 0;
  padding: 10px;
  width: 280px;
}

.input-sml input {
  background: url(../images/input-bg.png) no-repeat left top;
  border: none;
  color: #222;
  font: 15px/20px Georgia, Times, serif;
  height: 20px;
  margin: 0;
  padding: 10px;
  width: 120px;
}

.alt input {
  background: url(../images/input-bg2.png) no-repeat left top;
}

.textarea {
  display: inline;
  float: left;
  margin: 0 10px;
  width: 620px;
}

.textarea textarea {
  background: url(../images/textarea-bg.png) no-repeat left top;
  color: #222;
  border: 0;
  font: 15px/20px Georgia, Times, serif;
  height: 140px;
  margin: 20px 0 0 0;
  padding: 10px;
  width: 600px;
}

.freelance {
  display: inline;
  float: left;
  height: 160px;
  margin: 20px 10px 0 10px;
  text-indent: -9999px;
  width: 140px;
}

.available {
  background: url(../images/available.png) no-repeat left top;
}

.submit {
  display: inline;
  float: left;
  height: 160px;
  margin: 20px 10px 20px 10px;
  width: 140px;
}

.life-easy {
  clear: both;
  color: #ffffe5;
  display: block;
  margin: 10px 0 0 10px;
  text-align: center;
  width: 940px;
}

.contact-details {
  clear: both;
  display: block;
  margin: 20px 0 20px 0;
  text-indent: -9999px;
  width: 940px;
}

.contact-details a {
  background: url(../images/contact-details.png);
  display: block;
  height: 40px;
  margin: 0 10px;
  width: 940px;
}

/* @end */

/* @group Credits */

#credits {
  background: #222 url(../images/credits-bg.jpg) repeat-x center top ;
}

#credits .inner {
  background: url(../images/credits.png) no-repeat center top;
  height: 136px;
  text-indent: -9999px;
}

/* @end */