@charset "utf-8";

/* resets */
a, p, h1, h2, h3, body, html, div, ul, li {
  margin:0px;
  padding:0px;
}

.clear {
  clear:both;
  height:0px;
  width:0px;
}

/* body */
body {
  background:#262122 url(images/bg_gradient.jpg) repeat-x;
  font:11px Arial, Helvetica, sans-serif;
  height:100%;
}

html {
  height:100%;
}

#overlay {
  background:#000;
  position:absolute;
  left:0px;
  top:0px;
  display:none;
  z-index:175;
  right:0px;
  bottom:0px;
  cursor:pointer;
  height:100%;
  width:100%;
  min-height:100%;
  display:none;
}

#reader {
  padding:30px;
  background:#444;
  font-size:15px;
  width:650px;
  z-index:175;
  display:none;
  color:#FFF;
  position:absolute;
  margin:10px;
}

#reader h1 {
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:14px;
  font-weight:normal;
}

.highlight {
  color:#F7901E
}

/* container */
#container {
  width:940px;
  margin:0px auto;
}

#container a {
  text-decoration:none;
}

#container a:hover {
  color:#F7901E;
}

#container a:focus {
  outline:none;
}

#container a:active {
  outline:none;
}

/* header */
#container #header {
  height:132px;
  position:relative;
  background:url(images/bg_header_shadow.jpg) no-repeat 0px 62px;
}

#container #header #logo {
  position:absolute;
  left:18px;
  top:66px;
}

/* nav */
#container #header #nav {
  position:absolute;
  right:20px;
  font-size:10px;
  top:66px;
}

#container #header #nav ul {
  list-style:none;
}

#container #header #nav li {
  float:left;
  display:block;
  margin:10px 4px;
  color:#ddd;
}

#container #header #nav li a {
  color:#ddd;
}
#container #header #nav li .active {
  color:#F7901E;
}

#container #header #nav li a:hover, #container #header #nav li .active {
  color:#F7901E;
}

/* content */
#container #content {
  height:535px;
  z-index:1;
}

#container #content #left {
  float:left;
  width:174px;
  height:460px;
  background:#474444;
  padding-top:25px;
  padding-left:18px;
  padding-right:18px;
  position:relative;
  color:#f1f1f2;
  font-size:12px;
}

#container #content #left h1 {
  font-size:10px;
  text-transform:uppercase;
  line-height:14px;
}

#container #content #left h2 {
  color:#F7901E;
  font-size:11px;
  line-height:14px;
}

#container #content #left .orange {
  color:#F7901E;
}

#container #content #left .orange:hover {
  color:#FFF;
}

#container #content #left ul {
  list-style:none;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
}

#container #content #left li {
  line-height:16px;
}

#container #content #left li a {
  color:#F1F1F2;
}

#container #content #left li a:hover, #container #content #left .active {
  color:#F7901E;
}

#container #content #left #description {
  overflow:hidden;
  position:absolute;
  left:0px;
  top:339px;
  height:136px;
  width:210px;
}

#container #content #left #description h1 {
  color:#F7901E;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
}

#container #content #left #description #text {
  font-size:10px;
  line-height:13px;
  color:#d1d3d4;
  position:absolute;
  left:0px;
  top:0px;
  width:165px;
  padding-right:27px;
  padding-left:18px;
  padding-top:3px;
}

#container #content #left #scroller {
  position:absolute;
  right:7px;
  bottom:10px;
}

#container #content #left #scroller img {
  cursor:pointer;
}

#container #content #left #icons {
  position:absolute;
  bottom:18px;
  left:18px
}

/* right */
#container #content #right {
  float:right;
  width:730px;
  height:535px;
  overflow:hidden;
  position:relative;
  z-index:10;
}

#container #content #right h1 {
  font-size:10px;
  color:#000;
  letter-spacing:1px;
  text-transform:uppercase;
}

#container #content #right #image-container {
  width:10000px;
  height:730px;
  position:relative;
  z-index:20;
}

#container #content #right #image-container .image {
  float:left;
  width:750px;
  background:#474444;
}

#container #content #right #featured-text {
  position:absolute;
  right:20px;
  bottom:33px;
  z-index:20;
  color:#B0B0B0;
}

#container #content #right #paging {
  position:absolute;
  right:20px;
  bottom:18px;
  z-index:20;
}

#container #content #right #paging .button {
  float:left;
  height:10px;
  width:14px;
  border:1px solid #B0B0B0;
  margin-left:5px;
  cursor:pointer;
}

#container #content #right #login {
  color:#FFF;
  height:100px;
  width:100%;
  font-weight:bold;
  font-size:10px;
}

#container #content #right #login .textfield {
  font-size:10px;
  width:175px;
  color:#06C;
  border:1px solid #333;
}

#container #content #right #login .submit {
  font-size:10px;
  background:#CCC;
  display:block;
  border:1px solid #333;
  padding-right:5px;
  padding-left:5px;
}

#container #content #right #login .submit:hover {
  background:#EEE;
}

/* studio */
#container #content #right #studio {
  height:485px;
  width:730px;
  background:#D3D4D4;
  color:#58595B;
  overflow:hidden;
}

#container #content #right #studio #mask {
  height:448px;
  width:730px;
  overflow:hidden;
}

#container #content #right #studio #image {
  float:left;
}

#container #content #right #studio #text {
  float:left;
  width:225px;
  padding:25px 30px 25px 25px;
}

#container #content #right #studio #press {
  padding-top:60px;
  position:relative;
}

#container #content #right #studio #press img {
  margin-bottom:50px;
  margin-left:50px;
}

#container #content #right #studio #scroller {
  position:absolute;
  right:6px;
  bottom:50px;
}

#container #content #right #studio #scroller img {
  cursor:pointer;
}

#container #content #right #studio #client-list {
  position:relative;
}

#container #content #right #studio #client-list .columns {
  float:left;
  width:300px;
  padding:25px 30px 25px 25px;
}

/* footer */
#container #footer {
  font:9px Arial, Helvetica, sans-serif;
  color:#a8a8a8;
  margin-top:25px;
}

#container #footer a {
  color:#a8a8a8;
}

#container #footer a:hover {
  color:#F7901E;
}