/*******************************************************************************

Agency Collective Website, main.css
(c) 2009 BuzaMoto. All rights reserved.
Author: Takashi Okamoto - http://www.buzamoto.com/

*******************************************************************************/
body {
  background-color: #000000;
  color: #ffffff;
  text-shadow: #000 0 1px 0;
  border-top: 2px solid #fff;
}

a {
  color: yellow;
  text-decoration: none;
}


/* ----------------------------------------------------------------------------
   HEADER
-----------------------------------------------------------------------------*/
#client-login {
  position: relative;
  top: 0;
  left: 815px;
  width: 100px;
  text-align: center;
  margin: 0;
  padding: 4px;
  background-color: #fff;
  color: #000;
  text-shadow: none;
}

#client-login a {
  color: #000;
  text-decoration: none;
}

#client-login a:hover {
  color: #000 !important;
  text-decoration: underline;
}

#header-wrapper {
  border-bottom: 1px dotted #191919;
  padding-bottom: 10px;
  color: #999999;
}

ul#header-nav li {
  color: yellow;
}

ul#header-nav li a {
  display: block;
  color: #cccccc;
  text-decoration: none;
}

ul#header-nav li a:hover { color: #ffffff; }

ul#header-nav li a.selected {
  color: yellow;
  font-weight: bold;
  font-style: italic;
}

/* ----------------------------------------------------------------------------
   FLASH
-----------------------------------------------------------------------------*/
div.flash-wrapper {
  border-bottom: 1px dotted #191919;
}

div#flash-notice,
div#flash-warning,
div#flash-message,
div#flash-error {
  color: #ffffff;
}

div.flash-wrapper a.small {
  color: #fff;
  background: url(/images/anchor-white-left_double_arrow.gif) no-repeat 0 75%;
  padding-left: 10px;
}

div.flash-wrapper a.small:hover {
  color: #999;
}


/* ----------------------------------------------------------------------------
   CLASSES
-----------------------------------------------------------------------------*/
div.title { text-shadow: #000 0 1px 0; }
div.title.underline { border-bottom: 1px dotted #191919; }
div.overline {
  border-top: 1px dotted #191919;
}
div.title.spacing { padding-bottom: 30px; }

div.client {
  float: left;
  font-size: 14px;
}

div.link {
  float: right;
  font-size: 14px;
}

div.link a { color: #ccc; }
div.link a:hover { color: #fff; }

a.black-left_double_arrow:hover,
a.black-right_double_arrow:hover,
a.black-up_double_arrow:hover,
a.black-down_double_arrow:hover,
a.black-left_double_arrow:hover,
a.white-right_double_arrow:hover,
a.white-up_double_arrow:hover,
a.white-down_double_arrow:hover {
  color: yellow !important;
}

ul.file-list li {
  list-style: none;
  margin-bottom: 1px;
  overflow: hidden;
}

ul.file-list li a {
  display: block;
  text-decoration: none;
  padding: 4px 12px;
  padding-left: 20px;
  color: #666666;
  background: #161616 url(/images/file-list-arrow.gif) no-repeat 6px 50%;
}

ul.file-list li a:hover,
ul.file-list li a.selected {
  color: #333;
  background-color: yellow;
  background-image: url(/images/file-list-arrow-over.gif);
  text-shadow: none;
}

div.heading { font-size: 21px; }

span.name { font-size: 24px; }

div.page-title { font-size: 30px; }

table tr {
  padding: 0;
}

table tr td {
  padding: 0;
}

table tr.odd {
  background-color: #111;
}

table tr.even {
  background-color: #222;
}

table tr td a {
  color: #ccc;
  text-decoration: none;
  font-style: italic;
}

table tr td a:hover {
  color: #fff;
}

table tr td a.preview {
  background: url(/images/anchor-white-down_double_arrow.gif) no-repeat 100% 75%;
  padding-right: 15px;
}

table tr td a.download {
  color: yellow;
  text-decoration: underline;
  font-style: normal;
}

table tr td a:hover {
  color: #fff;
}


/* ----------------------------------------------------------------------------
   LOGIN
-----------------------------------------------------------------------------*/
#login-wrapper {
  margin-top: 100px;
  color: #000;
  text-shadow: none;
}

#login-fields {
  margin: 0 auto;
  padding: 30px 40px;
  width: 390px;
  background-color: white;
}

#login-logo {
  margin: 10px 0;
  background: url(/images/logo-white.gif) no-repeat;
  width: 142px;
  height: 48px;
}

#login-fields div.title {
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
}

#login-fields div.fields {
  margin: 20px 0;
}

#login-fields div.fields ul li {
  margin-bottom: 20px;
  list-style: none;
}

#login-fields div.fields input[type="text"],
#login-fields div.fields input[type="password"] {
  font-size: 28px;
  width: 386px;
  border: 1px solid #000;
}

#login-fields div.fields input[type="submit"] {
  float: right;
  margin: 0;
  padding: 8px 12px;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  background-color: #111;
}
#login-fields div.fields input[type="submit"]:hover {
  color: #ddd;
  background-color: #333;
}

#login-fields a { color: #000; }
#login-fields a:hover { color: #222 !important; }

#login-fields label {
  font-size: 14px;
  color: #000;
}

#login-fields div.title { padding: 16px 0; }

#login-forgot-fields div.fields {
  border-top: 1px dotted #ccc;
  padding-top: 10px;
  margin: 0;
}

#login-forgot-fields div.fields p { font-size: 12px; }


/* ----------------------------------------------------------------------------
   PROJECTS-LISTING
-----------------------------------------------------------------------------*/
.projects-listing-content {
  width: 100%;
  margin-top: 20px;
  font-size: 12px;
  line-height: 20px;
  color: #ccc;
}

.project {
  float: left;
  padding-bottom: 2px;
  margin-left: 17px;
  margin-bottom: 20px;
  border-bottom: 2px solid #000;
  width: 218px;
}

.project img {
  float: left;
  line-height: 0;
}

.recent {
  float: left;
  padding-bottom: 2px;
  width: 318px;
  border-bottom: 2px solid #000;
}

#featured_project {
  margin-bottom: 20px;
}

#featured_project .label { text-align: right; }

.featured_project {
  float: left;
  width: 644px;
  border-bottom: 2px solid #000;
}

div.project {
	padding-top:8px;
}
.project:hover,
.recent:hover,
.featured_project:hover { border-bottom: 2px solid yellow; }

.project a,
.recent a,
.featured_project a {
  text-decoration: none;
  color: #fff;
}

.recent a:hover,
.featured_project a:hover {
  color: yellow;
}

.project a:hover { color: yellow; }

.featured_project .project-image {
  margin-bottom: 2px;
}

#featured_project .right-column {
	padding:0px;
}

.project.first {
  margin-left: 0px;
  clear: both;
}

.project span.name {
  font-size: 16px;
  line-height: 14px;
}

.project .open-project,
.recent .open-project,
.featured_project .open-project,
#main-gallery .open-project,
.project-image-gallery .open-project {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 4px;
  text-align: center;
  color: #000;
  font-size: 14px;
  background-color: yellow;
  visibility: hidden;
  z-index: 10;
  text-shadow: none;
}

.project:hover .open-project,
.recent:hover .open-project,
.featured_project:hover .open-project,
#main-gallery:hover .open-project,
.project-image-gallery:hover .open-project {
  visibility: visible !important;
}

#projects-categories {
  border-top: 1px dotted #191919;
  margin: 10px 0;
  padding: 20px 0 0 0;
}

#projects-categories div.column {
  float: left;
  margin-left: 17px;
  width: 218px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 10px;
}

#projects-categories #categories-column-left {
  margin-left: 0;
  margin-right: 0;
}

#projects-categories div.column ul li {
  list-style: none;
  margin-bottom: 1px;
  overflow: hidden;
}

#projects-categories div.column ul li a {
  display: block;
  text-decoration: none;
  padding: 4px 12px;
  color: #666666;
  background-color: #111;
}

#projects-categories div.column ul li a:hover,
#projects-categories div.column ul li a.selected {
  color: #fff;
}


/* ----------------------------------------------------------------------------
   PROJECT
-----------------------------------------------------------------------------*/
div#recent_project {
  padding-top: 5px;
}

div#recent_project .label {
  text-align: right;
  margin-bottom: 0px;
}

.project-content {
  width: 100%;
  margin-top: 20px;
  font-size: 12px;
  color: #ccc;
}

.page-content {
  width: 100%;
  margin-top: 20px;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 12px;
  color: #ccc;
}

.project-content .left-column,
.page-content .left-column  {
  float: left;
  width: 645px;
  margin-top: 20px;
  margin-right: 10px;
}

.left-column .project-image {
  margin-bottom: 10px;
  width: 644px;
  height: 364px;
  overflow: hidden;
}

#main-gallery,
.project-image-gallery {
  border: 1px solid #333;
  padding: 1px;
  width: 640px;
  height: 360px;
}

#main-gallery #main-image { float: left; }

img.bordered {
  border: 1px solid #111;
  padding: 1px;
}

.left-column .project-movies {
  float: left;
  width: 322px;
  font-family: Verdana, Helvetica, Arial, sans-serif !important;
}
.left-column .project-images {
  float: right;
  width: 310px;
  text-align: right;
}

.left-column .thumbnail {
  float: left;
  margin-left: 9px;
  margin-bottom: 9px;
  padding: 1px;
  border: 1px solid #ccc;
}

.left-column .thumbnail:hover { border-color: #666 !important; }

.project-content .right-column,
.page-content .right-column {
  float: right;
  width: 255px;
  line-height: 24px;
  padding-top:0px;
}

.project-content .right-column p:first-child { margin: 0; }

.project-content .project-description {
  font-family: Verdana, Helvetica, Arial, sans-serif !important;
}

.project-content .right-column {
	padding-top:12px;
}

#project-more {}

#project-more .gallery-title {
  border-top: 1px dotted #191919;
  margin-top: 10px;
  padding-top: 20px;
  font-size: 24px;
}

#project-more .project-content {
  margin-top: 10px;
}

#project-more {
  float: left;
}

.thumbnail.first {
  margin-left: 0;
  margin-right: 1px;
}

div.right-column {
	padding-left:15px;
}

.left-column .thumbnails {
  margin-top: 10px;
}

.left-column .thumbnail {
  float: left;
  margin-left: 14px;
  margin-bottom: 16px;
  opacity: 0.2;
  line-height: 0;
  height: 64px;
}

.left-column .thumbnail.first {
  margin-left: 0;
  margin-right: 1px;
}

.left-column .project-images .thumbnail {
  float: left;
  margin-left: 9px;
  margin-bottom: 12px;
  padding: 1px;
  border: 1px solid #666;
}

.left-column .thumbnail:hover,
.left-column .thumbnail.selected {
  border-color: #FFF000 !important;
  opacity: 1.0;
}

div.project_name {
  line-height: 22px;
}



li#movie-name { width: 300px; }

#project-movie-download-links div.spacing { padding-bottom: 10px; }
#project-movie-download-links ul li {
  float: left;
  list-style: none;
  margin-right: 30px;
  font-size: 10px;
  font-family: Verdana, Helvetica, Arial, sans-serif !important;
}

#project-movie-download-links ul li a {
  background: no-repeat;
  padding-left: 15px;
  color: #666;
  text-decoration: none;
  height: 15px;
  display: block;
}

#project-movie-download-links ul li a:hover { color: #ccc; }

#project-movie-download-links ul li a.iphone { background-image: url(/images/icon-iphone.gif); }
#project-movie-download-links ul li a.iphone:hover { background-image: url(/images/icon-iphone-on.gif); }

#project-movie-download-links ul li a.download { background-image: url(/images/icon-download.gif); }
#project-movie-download-links ul li a.download:hover { background-image: url(/images/icon-download-on.gif); }

ul.file-list li a {
  display: block;
  text-decoration: none;
  padding: 4px 12px;
  padding-left: 20px;
  color: #666666;
  background: #161616 url(/images/file-list-arrow.gif) no-repeat 6px 50%;
}

ul.file-list li a:hover,
ul.file-list li a.selected {
  color: #333;
  background-color: yellow;
  background-image: url(/images/file-list-arrow-over.gif);
  text-shadow: none;
}

ul#project-presses {
  margin: 10px 0;
  font-family: Verdana, Helvetica, Arial, sans-serif !important;
}
ul#project-presses li {
  list-style: none;
  line-height: 1.5em;
}

ul#project-presses li a {
  display: block;
  text-decoration: none;
  padding: 4px 12px;
  padding-left: 20px;
  color: #666666;
}

ul#project-presses li a.kind_0 {
  background: url(/images/icon-big-paper.gif) no-repeat 0 50%;
  height: 63px;
  padding-left: 75px;
  padding-top: 20px;
}
ul#project-presses li a.kind_1 {
  background: url(/images/icon-big-trophy.gif) no-repeat 0 50%;
  height: 63px;
  padding-left: 75px;
  padding-top: 10px;
}

ul#project-presses li a:hover {
  color: #fff;
}
ul#project-presses li a.kind_0:hover { background-image: url(/images/icon-big-paper-on.gif); }
ul#project-presses li a.kind_1:hover { background-image: url(/images/icon-big-trophy-on.gif); }

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.9;
  z-index: 100;
}

#press {
  position: fixed;
  top: 100px;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: left;
  color: #000;
  text-shadow: none;
}

#press-header {
  line-height: 1em;
}

#press-title {
  font-size: 18px;
}

#press-content {
  padding: 10px;
  width: 500px;
  background: #fff;
  margin: 0 auto;
}

#press-content a {
  color: #000;
  text-decoration: none;
}

#press-content a:hover {
  text-decoration: underline;
}

img#press-image {
  float: left;
  margin-right: 10px;
}

#press-detail {
  clear: both;
}


/* ----------------------------------------------------------------------------
   REEL
-----------------------------------------------------------------------------*/
#reel-wrapper {
  width: 920px;
  height: 518px;
  padding: 1px;
  border: 1px solid #333;
}


/* ----------------------------------------------------------------------------
   INFO
-----------------------------------------------------------------------------*/
#info-content-area {
  border-bottom: 2px solid #000;
  color: #ccc;
  text-shadow: #000 0 1px 0;
  font-size: 16px;
  line-height: 18px;
  min-height: 320px;
  margin-top: 40px;
}

#info-content-area img {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}

#info-content-area h1 {
  text-shadow: #000 0 1px 0;
  font-weight: normal;
  color: #fff;
  margin-bottom: 40px;
  font-size: 24px;
}

#info-content-area p {
  margin: 0;
  padding: 0;
}

#info-content-area blockquote {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 24px;
}

#info-content-area blockquote p {
  margin: 10px 0 40px 0;
}

#info-content-area img {
padding: 1px;
border: 1px solid #333;
}

#info-navigation { margin-top: 36px; }
#info-navigation ul li a {
  display: block;
  text-decoration: none;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  padding: 4px 12px;
  padding-left: 20px;
  color: #333;
  background: #111 url(/images/anchor-white-left_double_arrow.gif) no-repeat 6px 55%;
}

#info-navigation ul li a:hover,
#info-navigation ul li a.selected {
  color: #fff;
  background-color: #333;
}

#info-content-area span.name {
  font-size: 20px;
  color: #fff;
}

#info-content-area .press {
  margin-bottom: 50px;
  font-size: 11px;
}

#info-content-area .press .left {
  float: left;
  width: 180px;
}

#info-content-area .press .right {
  float: right;
  width: 435px;
  margin-right: 20px;
}

#info-content-area .press .press-title { margin-bottom: 10px; }

#info-content-area .press .description,
#info-content-area .careers .description {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 24px;
}

#info-content-area .careers .description {
  margin-top: 10px;
  margin-right: 10px;
}

#info-content-area .careers .description p {
  margin: 1em 0;
}

#info-content-area .careers { margin-bottom: 100px; }

#client-content-area {
  padding: 20px 20px 0px 5px;
  line-height: 30px;
  color: #ccc;
  font-size: 12px;
  margin-bottom: 20px;
}

#client-content-area .column {
  float: left;
  margin-left: 40px;
  margin-right: 10px;
  width: 250px;
}

#careers-content-area {
  margin-left: 30px;
}

#careers-content-area div.name {
  font-size: 16px;
  margin: 10px 0;
}

#careers-content-area div.description {
  font-size: 12px;
  color: #ccc;
}

#careers-content-area div.description p { line-height: 24px; }

/* ----------------------------------------------------------------------------
   CONTACT
-----------------------------------------------------------------------------*/
#addresses {
  color: #ccc;
  font-size: 14px;
  width: 100%;
  line-height: 16px;
  margin-bottom: 100px;
}

#addresses div.left {
  float: left !important;
  width: 330px;
}

#addresses div.right {
  float: left !important;
}

#addresses a {
  color: #ccc;
  text-decoration: none;
}
#addresses a:hover { color: #fff; }

ul#contact-fields {
  line-height: 5px;
  margin: 0;
  padding: 0;
}

ul#contact-fields li {
  list-style: none;
  margin: 0;
  padding: 2px;
  margin-bottom: 10px;
}

ul#contact-fields li input[type="text"],
ul#contact-fields li textarea {
  background-color: #ccc;
  border: 1px solid #fff;
  width: 100%;
  margin-left: -2px;
  padding: 0;
  font-size: 15px;
  font-family: Georgia, "Times New Roman", serif !important;
}

ul#contact-fields li textarea {
  height: 168px;
}

ul#contact-fields li input[type="text"]:focus,
ul#contact-fields li textarea:focus {
  background-color: #fff;
  border: 1px solid #ccc;
}

ul#contact-fields li input[type="submit"] {
  margin: 0 0 0 -2px;
  padding: 4px 8px;
  background-color: #111;
  border: 1px solid #333;
  color: #999;
  cursor: pointer;
}
ul#contact-fields li input[type="submit"]:hover {
  background-color: #222;
  border: 1px solid #333;
  color: #ccc;
}


/* ----------------------------------------------------------------------------
   TWEETS
-----------------------------------------------------------------------------*/
#page-content .column-title {
  font-size: 30px;
  margin-bottom: 30px;
  color: #fff;
}

#tweets {
  float: left;
  width: 470px;
}

.tweet {
  background: url(/images/bird.gif) no-repeat 5px 100%;
  padding-bottom: 34px;
  margin-bottom: 30px;
}

.tweet .box {
  background-color: #111;
  padding: 10px 20px;
}

.tweet .box .who { font-size: 24px; }
.tweet .box p {
  font-size: 16px;
  margin: 0.5em 0;
}
.tweet .box .when {
  font-size: 11px;
  color: #333;
}

#press-awards {
  float: left;
  width: 430px;
  margin-left: 20px;
}

#press-awards .press {
  clear: both;
  margin-bottom: 20px;
}

#press-awards .press a {
  text-decoration: none;
  color: #fff;
}

#press-awards .image {
  float: left;
  width: 55px;
  height: 73px;
  margin-right: 20px;
}

#press-awards .details {
  float: left;
  width: 350px;
}

#press-awards .details .source,
#press-awards .details .title {
  font-size: 16px;
  line-height: 1em;
}

#press-awards .details .subtext {
  font-size: 12px;
}

#press-awards .content {
  margin: 0;
  float: left;
  width: 430px;
  clear: both;
  line-height: 24px;
  color: #ccc;
}


/* ----------------------------------------------------------------------------
   USER PAGE
-----------------------------------------------------------------------------*/
.user-content { margin: 20px 0; }
.user-content p { margin: 10px 0; }
.user-content ul li a { color: #ccc; }
.user-content ul li a:hover { color: #222; }
.user-content ul li { margin-left: 20px; }


/* ----------------------------------------------------------------------------
   FOOTER
-----------------------------------------------------------------------------*/
#footer-wrapper {
  border-top: 1px dotted #191919;
  color: #666666;
}

#footer-wrapper a {
  color: #666666;
  text-decoration: none;
}

ul#footer-nav li a {
  display: block;
}

div#footer-address a:hover,
ul#footer-nav li a:hover { color: #ffffff; }

p#buzamoto-credit { color: #111; }
p#buzamoto-credit a { color: #111; }
p#buzamoto-credit a:hover { color: #333; }


/* ----------------------------------------------------------------------------
   ERROR
-----------------------------------------------------------------------------*/
.error-status {
  font-size: 24px;
  line-height: 24px;
  margin-bottom: 100px;
}