/*  Tails for Whales
 *  Page.css
 *  ---! This stylesheet contains styles for the pages template only !---
 *  Use home.css for homepage template styles or base.css for global styles
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

div#container {
  position:relative;
  background:url(../images/back.png) bottom right repeat-x #000000; 
  clear:both;
  padding:0 0 0 0;
}

/*  Content
 * * * * * */
div#content {
  width:780px;
  padding:117px 0 200px 70px;
  position:relative;
}


/*  Typography
 * * * * * * */

div#content h2{
  font-size:52px;
  line-height:58px;
  font-weight:normal;
  margin:0 0 20px 0;
  padding:0 0 0 0;
  width:100%;
  clear:both;
  letter-spacing:-1px;
}

div#content h4{
  font-size:23px;
  color:#00abb9;
  line-height:27px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  font-weight:normal;
}

div#content a{
  color:#00abb9;
}
div#content a:hover {
  color:#00eaff;
}

div#content p{
  color:#999999;
  margin:14px 0;
  line-height:18px;
  padding-right:10px;
}
div#content strong{
  font-weight:bold;
  color:#fff;
}

div.headline {
  position:relative;
  clear:both;
}

div.notes {
  position:relative;
  clear:both;
}

div.note-box-large {
  float:left;
  position:relative;
}
div.note-box-large h3 {
  margin:20px 0 0 0;
  padding:0 0 0 0;
  font-size:16px;
  color:#cccccc;
  line-height:22px;
  font-weight:normal;
}
div.note-box-large img {
  float:left;
  height:100px;
  width:100px;
  background:#020a14;
  margin:0 30px 0 0;
}

div.note-box {
  float:left;
  position:relative;
  width:385px;
  margin:0 0 10px 0;
  display:block;
}
div.note-box h3 {
  margin:20px 30px 0 0;
  padding:0 0 0 0;
  font-size:16px;
  color:#cccccc;
  line-height:22px;
  font-weight:normal;
}
div.note-box img {
  margin:0 30px 0 0;
  float:left;
  height:100px;
  width:100px;
  background:#020a14;
}
div.notes {
	margin-top:20px;
}
div #ready-to-add p{
	color: #fff;
}
div.clearer {
	clear:both;
}

/*  Join Form
 * * * * * */
#join{
	position: relative;
	float: left;
}

#join, #join #overlay { width: 520px }

#join p{
	position: relative;
	margin: 0 !important;
	padding-bottom: 30px !important;
	line-height: normal !important;	
}
#join p.permission{
	padding-left: 170px;
}

#join p,
#join p input,
#join p label,
#join select{
	display: block;
	height: 40px;
	font-size: 20px;
}
#join p input,
#join p select,
#join p textarea{
	border: 1px solid #FFF;
}
#join .photo input,
#join .permission input,
#join .action input{
	border: none;
}
#join p input{
	line-height: 40px;
	vertical-align: baseline;
}
#join p label{
	display: block;
	float: left;	
	width: 170px;
	padding-top: 10px;
	color: #00abb9;
	font-weight: bold;
}
#join em{
	display: block;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
}

#join input, #join textarea { width: 320px }
#join #member_show_full_name,
#join #member_over_18,
#join #member_action_alerts,
#join #member_photo_permission,
#join #add-my-tail {
	width: auto
}
#join textarea { height: 100px }

#join .last_name{
	padding-bottom: 10px!important;
}
#join .answer{
	height: 100px;
}
#join .permission{
	position: relative;
	height: 20px;
}
#join .permission input{
	height:	auto;
}
#join .permission .error-with-field input{
  border-width: 0!important;
  background-color: transparent !important;
}
#join .permission label{
	display: block;
	width: auto;
	margin: -30px 0 0 30px;
	font-size: 16px;
	font-weight: normal;
	color: #cccccc;	
}
#join .permission small.error{	
	position: absolute;
	top: 5px;
	left: -10px;
}
#join .address-permission{
  height: 30px;
  font-size: 12px;
}
#join .mandatory{
  color: #FFF;
}

#join .photo_permission .error-with-field input{
	border-width: 0!important;
}
#join .full_name label{
	font-size: 13px;
}
#join .action input{
	float: right;
}

#join #overlay {
	background: #000;
	height: 100%;
	position: absolute;
	z-index: 1;
}

#join .warning{
	height: 0;
	padding-bottom: 0 !important;
}
#join #errorExplanation h2{
	font-size: 16px;
}
.show-errors .error-with-field label,
.error-with-field small,
.error {
	color: #ba0000 !important;
}
.show-errors .error-with-field input{
	border: 1px solid #ff3333 !important;
	background-color: #ffcccc;
}
.error-with-field small{
	font-size: 12px;
}

.hide-errors .error-with-field small { display: none; }

#upload-info h4 { font-size: 15px !important; font-style: normal; color: #33bcc7 !important; font-weight: bold !important; margin-top: 10px }
#upload-info #upload-queue { list-style-type: none; padding-left: 0px; padding-top: 10px; max-height: 400px; overflow-y: auto }
#upload-info #upload-queue img { margin-right: 8px }
#upload-queue img { vertical-align: middle }
#upload-info #upload-queue li { position: relative; margin-bottom: 10px }
#upload-info #upload-queue li a { outline: none }
#upload-info #upload-queue li.current { border: 2px solid #00ABB9; }
#upload-info #upload-queue li a.stop-btn { position: absolute; top: 1px; right: 1px; padding: 0; margin: 0 }
#upload-info #upload-queue li a.stop-btn img { padding: 0; margin: 0; outline: none }
#upload-info #upload-queue li.uploading { background: #00325a; }
#upload-info #upload-queue li.error { background: none; }
#upload-info #upload-queue li.error a { color: #BA0000; }
#upload-info #upload-queue li.done { background: #262626; }
#upload-info #upload-queue li.stopped { background: none; }
#upload-info #upload-queue li.stopped a { color: #BA0000; }
#upload-info #upload-queue li.current .cte { display: none }
#upload-info #upload-queue li a { display: block; padding: 10px; color: #fff }
#upload-info #add_another img, #upload-info #im_done_here img { display: block; margin: 30px auto; text-align: center; outline: hidden }
#upload-info #next-actions #done { text-align: center }

#join #messages div {
	width: 470px; text-align: center; background: #00ABB9; color: #00000;
	padding: 1em; margin: 6px 0px 27px; font-weight: bold; line-height: 18px; font-size: 14px;
}
#join #messages i {
	color: black;
}