html { background-color: #140E1A; }
body, a { color: #CCC; }

body {
  padding: 0;
  margin: 0;
  font-family: arial, sans-serif;
  font-size: 9pt;
}

/* Layout */

#page {
  width: 990px;
  margin: 0 auto;
}

#menu, #content, #sub-content, #footer {
  width: 904px;
  margin-left: 43px;
}

#header {
  background: url(/assets/images/conjure_header.png) no-repeat;
  width: 990px;
  height: 155px;
}

#content { 
  position: relative;
  height: 455px; 
  background: url(/assets/images/hairline_455.png) no-repeat; 
}

body.home #content,
body.work.index #content {
  height: 400px; 
  background: url(/assets/images/hairline_400.png) no-repeat; 
}

body.work.index #content { 
  background: none;
}

#content #graphic {
  position: relative;
}

body.home #content #graphic { 
  width: 902px;
  height: 397px;
  top: 1px;
  left: 1px;
}

body.work #content #graphic {
  top: 1px;
  left: 1px;
  width: 571px;
  height: 453px;
  background-color: #333;
}

body.work.beko #content #graphic               { background: url(/assets/images/portfolio/port_beko_main.jpg) no-repeat; }
body.work.black-light #content #graphic        { background: url(/assets/images/portfolio/port_black_light_main.jpg) no-repeat; }
body.work.locati #content #graphic             { background: url(/assets/images/portfolio/port_locati_main.jpg) no-repeat; }
body.work.over-c #content #graphic             { background: url(/assets/images/portfolio/port_over_c_main.jpg) no-repeat; }
body.work.farewell-my-lovely #content #graphic { background: url(/assets/images/portfolio/port_farewell_main.jpg) no-repeat; }
body.work.tipstar #content #graphic            { background: url(/assets/images/portfolio/port_tipstar_main.jpg) no-repeat; }
body.work.taxiapp #content #graphic            { background: url(/assets/images/portfolio/port_taxi_app_main.jpg) no-repeat; }
body.work.locatedit #content #graphic          { background: url(/assets/images/portfolio/port_located_it_main.jpg) no-repeat; }

#content #copy {
  position: absolute;
}

body.home #content #copy {
  width: 290px; 
  top: 100px;
  left: 65px;
}
body.home #content #copy p {
  width: 260px;
}

body.work #content #copy {
  width: 310px;
  padding: 10px;
  top: 0px;
  left: 573px;
}

body.careers #content #copy, 
body.contact #content #copy {
  width: 480px; 
  top: 20px;
  left: 30px;
}

#menu, #content, #sub-content, #footer {
  margin-top: 20px;
}

#sub-content {
  width: 926px;
  margin-left: 32px;
  margin-top: 9px;
}

#sub-content div.box {
  display: inline-block;
  vertical-align: top;
  background: url(/assets/images/promo_box.png) no-repeat;
  width: 306px;
  height: 156px;
}

#sub-content div.padder {
  display: inline-block;
  margin: 26px 30px;
  width: 180px;
}

#footer {
  color: #4D2B65;
  margin-bottom: 100px;
}

#footer .float-right img.twitter {
  margin-left: 8px;
  margin-bottom: -7px;
}

.float-left { float: left; }
.float-right { float: right; }

/* Cufon titles */

.bembo,
#menu ul li,
#menu ul li a {
  margin-top: 0;
  text-transform: uppercase;
  color: #9B999D;
}

h1, h2, h3 {
  color: #FFF;
  margin-top: 0;
}
h1 { font-size: 2.5em; }
h2 { font-size: 1.2em; }

body.home h2, .gold { text-transform: uppercase; }

p { line-height: 1.4em; }

/* Links */

a { text-decoration: none; }
a:hover, .gold { color: #F2C120; }
a img { border: none; }
a.external,
.jcarousel-skin-conjure .jcarousel-item p a {
  background: transparent url(/assets/images/icon_arrow.png) no-repeat -81px 0;
  padding-left: 10px;
}
a.app-store {
  background: transparent url(/assets/images/app_store.png) no-repeat 0 0;
  padding-left: 32px;
  padding-top: 4px;
  min-height: 24px;
  display: block;
}

/* Menu */

#menu {
  text-align: center;
  font-size: 1.1em;
}
#menu ul {
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
#menu ul li {
  display: inline;
}
#menu ul li .spacer {
  margin: 0 0.4em 0 0.6em;
  color: #4D2B65;
  line-height: 1em;
  vertical-align: bottom;
}
body.home #menu ul li.home a,
body.work #menu ul li.work a,
body.clients #menu ul li.clients a,
body.careers #menu ul li.careers a,
body.contact #menu ul li.contact a { 
  color: #F2C120;
}

/* Work */

body.work #content #copy h2 {
  padding-bottom: 13px;
  padding-top: 2px;
  border-bottom: 1px solid #3F1D61;
}
body.work .nav {
  position: absolute;
  right: 5px;
}
body.work .nav a.prev,
body.work .nav a.next {
  display: inline-block;
  vertical-align: top;
  width: 13px;
  height: 13px;
  background-repeat: no-repeat;
  margin: 3px;
}
body.work .nav a.prev.none,
body.work .nav a.next.none {
  cursor: default;
}
body.work .nav a.prev { background: transparent url(/assets/images/icon_arrow.png) no-repeat 0 0; }
body.work .nav a.next { background: transparent url(/assets/images/icon_arrow.png) no-repeat -75px 0; }
body.work .nav a.prev.none { background-position: -30px 0; }
body.work .nav a.next.none { background-position: -45px 0; }

/* Clients */

body.clients #content ul {
  list-style: none;
  padding: 0;
  margin: 18px;
  position: absolute;
}
body.clients #content ul li {
  margin: 15px 15px;
  float: left;
}

/* Careers */

body.careers #content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.careers #content ul li {
  border-top: 1px solid #3F1D61;
  padding: 15px 0;
}

/* Contact */

body.contact #content p.hairline {
  border-bottom: 1px solid #3F1D61;
  padding-bottom: 35px;
}
span.contact-box {
  display: inline-block;
  vertical-align: top;
  width: 140px;
  margin-top: 20px;
}