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

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

*******************************************************************************/
body {
  background-color: #fff;
  color: #000;
  font-family: Arial, Helvetica, Verdana, "Lucida Grande", sans-serif;
  font-size: 10px;
  margin: 20px;
}

a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

a:hover { color: #e20079; }

input[type="text"] {
  background-color: #ccc;
  border: none;
  font-family: Arial, Helvetica, Verdana, "Lucida Grande", sans-serif;
  font-size: 20px;
  font-weight: bold;
}

textarea {
  background-color: #999;
  border: none;
  font-family: Arial, Helvetica, Verdana, "Lucida Grande", sans-serif;
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  resize: none;
}


/* ----------------------------------------------------------------------------
   CLASSES
-----------------------------------------------------------------------------*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.underline { border-bottom: 11px solid #e20079; }

.pink { color: #e20079; }

.big_text {
  font-size: 38px;
  line-height: 30px;
  letter-spacing: -1px;
}

.med_text {
  font-size: 21px;
  line-height: 16px;
  letter-spacing: -0.05em;
}

.bold { font-weight: bold; }

.faded {
  opacity: 0.3;
}


/* ----------------------------------------------------------------------------
   HEADER ELEMENTS
-----------------------------------------------------------------------------*/
.header-wrapper {
  width: 600px;
  height: 100px;
  overflow: hidden;
  background: url(../images/header-background.gif) no-repeat 200px 0;
}

.header {
  position: relative;
}

h1.masthead {
  float: left;
  font-size: 38px;
  letter-spacing: -1px;
  margin: -4px 0 0 0;
  padding: 0;
}

.navigation {
  position: absolute;
  top: 0;
  left: 225px;
}

.navigation ul {
  float: left;
  margin-top: 8px;
  margin-left: 28px;
  font-size: 19px;
}

.navigation ul:first-child {
  margin-left: 0;
}

.header ul li {
  list-style: none;
  line-height: 16px;
}


/* ----------------------------------------------------------------------------
   CONTROLLER ELEMENTS
-----------------------------------------------------------------------------*/
.controller-wrapper {
  width: 600px;
  height: 71px;
  font-size: 38px;
  letter-spacing: -1px;
  margin-top: -10px;
}

.controller-wrapper div { line-height: 1; }

.counter.empty {
  width: 0;
  overflow: hidden;
}
.counter.empty:before { content: "."; }

.controller {
  margin-top: -8px;
  background-repeat: no-repeat;
  background-position: 0 9px;
}

.controller a { color: #000; }
.controller a:hover { color: #fff; }
.controller a:first-child:hover { color: #e20079; }

.controller.studio { background-image: url(../images/studio-controller-background.gif) }

.controller.syntax,
.controller.context,
.controller.practice,
.controller.play { background-image: url(../images/syntax-controller-background.gif) }

.controller.otherswords { background-image: url(../images/otherswords-controller-background.gif) }
.controller.amuses      { background-image: url(../images/amuses-controller-background.gif) }

.controller.amuses a#gallery_next,
.controller.bates  a#gallery_next       { color: #e20079; }
.controller.amuses a#gallery_next:hover,
.controller.bates  a#gallery_next:hover { color: #fff; }

.controller.bates { background-image: url(../images/amuses-controller-background.gif) }


/* ----------------------------------------------------------------------------
   CONTENT ELEMENTS
-----------------------------------------------------------------------------*/
.content-wrapper {
  position: relative;
  width: 900px;
  min-height: 440px;
  padding-top: 1px;
}

.content {
  float: left;
  width: 600px;
  height: 440px;
  margin-right: 10px;
  overflow: hidden;
}

.text-content {
  float: left;
  width: 290px;
  height: 440px;
  overflow: auto;
  line-height: 13px;
}

#pink_underline {
  position: absolute;
  top: 58px;
  left: 0;
  background-color: #e20079;
  height: 1px;
  width: 600px;
  z-index: 0;
}

.droplet {
  position: relative;
  width: 22px;
  height: 36px;
  background: url(../images/cover_droplet.gif) no-repeat;
}

.droplet.cover {
  top: 80px;
  left: 282px;
}

.droplet.wishes {
  top: 154px;
  left: 194px;
}

.droplet.nb {
  top: 163px;
  left: 194px;
}


/* ----------------------------------------------------------------------------
   FOOTER
-----------------------------------------------------------------------------*/

.footer {
  position: absolute;
  top: 684px;
  font-size: 10px;
}

.footer a {
  font-weight: normal;
}


/* ----------------------------------------------------------------------------
   COVER
-----------------------------------------------------------------------------*/
#cover-content {
  margin-top: -36px;
  padding-top: 24px;
  font-size: 38px;
  letter-spacing: -1px;
  line-height: 1;
  height: 523px;
  font-weight: bold;
  color: #e20079;
  background: url(../images/cover_drops.gif) no-repeat 373px 0;
}


/* ----------------------------------------------------------------------------
   SUBPAGES
-----------------------------------------------------------------------------*/
.content-wrapper.studio,
.content-wrapper.contact,
.content-wrapper.nb,
.content-wrapper.wishes { margin-top: -8px; }

.content-wrapper.contact,
.content-wrapper.wishes,
.content-wrapper.nb { background: url(../images/pink-line.gif) no-repeat 0 59px; }


/* ----------------------------------------------------------------------------
   CONTACT
-----------------------------------------------------------------------------*/
form#form_contact { margin-top: 32px; }
#contact_form { position: relative; }
#contact_labels {
  position: absolute;
  z-index: 10;
}
#contact_labels li { line-height: 30px;}
#contact_values {
  position: absolute;
  left: 100px;
  z-index: 0;
}
#contact_values li {
  background-color: #999;
  margin: 6px 0;
  width: 500px;
}
#contact_values li.light {
  background-color: #ccc;
  height: 23px;
  overflow: hidden;
}

#contact_values li textarea {
  width: 100%;
  height: 302px;
  overflow: hidden;
}

#contact_send {
  position: absolute;
  top: 342px;
}

#contact_blob {
  position: absolute;
  top: 315px;
  left: 100px;
}

#contact_droplet {
  position: absolute;
  top: 359px;
  left: 601px;
}

#contact_notification {
  margin-left: 100px;
  background-color: #e20079;
  width: 500px;
  color: #fff;
  position: absolute;
  z-index: 10;
}

#contact_notification-content {
  padding: 10px;
  font-size: 20px;
  color: #fff;
}

#contact_notification a { color: #000; }
#contact_notification a:hover {
  color: #fff;
  text-decoration: none;
}


/* ----------------------------------------------------------------------------
   NB
-----------------------------------------------------------------------------*/
#nb-droplets {
  position: absolute;
  top: 303px;
  left: 373px;
  width: 110px;
  height: 253px;
  background: url(../images/nb-droplets.gif) no-repeat;
}


/* ----------------------------------------------------------------------------
   GALLERY
-----------------------------------------------------------------------------*/
ul#image-list {
  position: relative;
  height: 440px;
  width: 600px;
  overflow: hidden;
}

ul#image-list li {
  position: absolute;
  top: 0;
  width: 600px;
  height: 440px;
  text-align: center;
}

div#gallery-blob {
  position: absolute;
  background: url(../images/gallery-blob.png) no-repeat;
  width: 360px;
  height: 218px;
  top: -118px;
  left: 210px;
  z-index: 2000;
}