/* RESET STUFF */

form { 
  margin: 0; 
  padding: 0; 
}

form.dedication { 
  margin-top: 10px;
  margin-bottom: 10px; 
  padding: 0; 
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  list-style: none;
  padding: 0;
  display: inline;
}

/* BASE GRID STYLES */

.w1 {
  width: 152px;
}

.w2 {
  width: 319px;
}

.w3 {
  width: 486px;
}

.w4 {
  width: 653px;
}

.w5 {
  width: 820px;
}

.w6 {
  width: 987px;
}

.h1 {
  height: 62px;
}

.h2 {
  height: 137px;
}

.h3 {
  height: 212px;
}

.h4 {
  height: 287px;
}

.h5 {
  height: 362px;
}

.h6 {
  height: 437px;
}

.t0 {
  position: absolute;
  top: 0px;
}

.t1 {
  position: absolute;
  top: 75px;
}

.t2 {
  position: absolute;
  top: 150px;
}

.t3 {
  position: absolute;
  top: 225px;
}

.t4 {
  position: absolute;
  top: 300px;
}

.t5 {
  position: absolute;
  top: 375px;
}

.t6 {
  position: absolute;
  top: 450px;
}

.t7 {
  position: absolute;
  top: 525px;
}

.t8 {
  position: absolute;
  top: 600px;
}

.t9 {
  position: absolute;
  top: 675px;
}


.l0 {
  position: absolute;
  left: 0px;
}

.l1 {
  position: absolute;
  left: 167px;
}

.l2 {
  position: absolute;
  left: 334px;
}

.l3 {
  position: absolute;
  left: 501px;
}

.l4 {
  position: absolute;
  left: 668px;
}

/* LAYOUT */

html, body {
  margin:0;
  padding:0;
  font-family: "Lucida Grande", Geneva, Arial,Verdana,sans-serif;
  font-size: 12px;
  color: #555555;
}

div#container {
	position: relative; /* needed for footer positioning*/
	display: block;
	margin:0 auto; /* center, not in IE5 */
	height:auto !important; /* real browsers */
	width: 987px;
	margin-top: 10px;
/*	background: url(/images/grid_element.jpg); */
}

/* 3 MAIN AREAS */

#header { 
	padding: 0;
	text-align: left;
	height: 62px;
	margin-bottom: 13px;
  position: relative;
}

div#content {
	padding: 0em 0em 0em; /* bottom padding for footer */
	/*
	we don't want to specify this, right?
	height: 662px;
	*/
  position: relative;
  padding-bottom: 75px; /*grid element height + gutter height */
  background: white;
}

div#footer {
  position: absolute;
  bottom: 0;
}

/* ELEMENTS */

div#menu {
  position: absolute;
  /* left: 835px;  */
  left: 167px;
  width: 486px;
  height: 62px;
  background: white;
}

div#youkebox_menu {
  position: absolute;
  /* left: 835px;  */
  left: 167px;
  width: 319px;
  height: 62px;
  background: white;
}

div#login_status {
  position: absolute;
  left: 835px;
  /* left: 668px;  */
  width: 152px;
  height: 62px;
  background: white;
}

div#nick_setting {
  position: absolute;
  left: 0px;
  top: 75px;
  width: 319px;
  height: 137px;
  background: white;
}

div#avatar_setting {
  position: absolute;
  left: 334px;
  top: 75px;
  width: 319px;
  height: 137px;
  background: white;
}

div#password_setting {
  position: absolute;
  left: 668px;
  top: 75px;
  width: 319px;
  height: 137px;
  background: white;
}

div#sign_out {
  position: absolute;
  background: white;
}

div#youkebox_info {
  position: absolute;
  left: 501px;
  width: 486px;
  height: 62px;
  background: white;
  font-size: 16px;
  font-weight: bold;
}

div#youkebox_info span {
  font-weight: normal;
}

div#youkebox_info span em {
  font-style: italic;
}

div#youkebox_info a.low_key {
  color: #555555;
}


#youkebox_memberships {
  width: 319px;
  height: 512px;
  float: left;
  overflow: auto;
}

#public_youkeboxes {
  position: absolute;
  top: 0px;
  left: 334px;
  width: 319px;
  height: 512px;
  float: left;
  overflow: auto;
}

#youkebox_creation {
  position: absolute;
  background: white;
  top: 300px;
  left: 334px;
  height: 137px;
  width: 319px;
}

#youkebox_invitations {
  position: absolute;
  top: 300px;
  left: 668px;
  width: 319px;
  height: 137px;
  background: #fff;
}

#about {
  position: absolute;
  top: 450px;
  left: 0px;
  width: 987px;
  height: 62px;
  text-align: center;
  font-size: 10px;
  background: white;
}

#secondary_menu {
  background: white;
  border-top: 1px solid #eee;
}

#secondary_menu #padding {
  padding: 10px;
  padding-left: 0px;
}

#faq {
  background: white;
}

#faq h2 {
  margin-top: 10px;
}

#youkebox_footer {
  position: absolute;
  /*
  top: 600px;
  */
  top: 570px;
  left: 0px;
  width: 987px;
  /* 
  no need to specify this
  height: 62px;
  */
  text-align: center;
  font-size: 10px;
  background: white;
  color: #bbb;
  padding-top: 10px;
}

#youkebox_stats {
  position: absolute;
  top: 0px;
  left: 334px;
  width: 319px;
  height: 137px;
  background: #fff;
}

#youkebox_settings {
}

#week_lists {
  position: absolute;
  top: 0px;
  left: 668px;
  width: 319px;
  height: 137px;
  background: #fff;
}

#manage_youkebox_memberships {
  position: absolute;
  top: 150px;
  left: 0px;
  width: 486px;
  background: #fff;
  min-height: 287px;
}

#manage_youkebox_invitations {
  position: absolute;
  top: 150px;
  left: 501px;
  width: 486px;
  background: #fff;
  min-height: 287px;
}

#explanation {
  background: #eee;
  border: solid 1px #ddd;
}

#explanation div {
  padding: 10px;
}

div#tweetz {
  position: absolute;
  left: 668px;
  top: 0px;
  /* left: 668px;  */
  width: 319px;
  background: white;
}


div#upcoming ul li {
  display: block;  
}


#logo {
  float: left;
  margin-left: -6px;
  margin-top: -2px;
  width: 158px;
  background: white;
}

#logo a img {
  
}

div#youkebox_name {
  float: left;
  padding-top: 29px;
  padding-left: 25px;
  font-weight: bold;
  color: #666;
}

div#youkebox_id {
  visibility: hidden;
}

div#notice {
  background: #eee;
  padding: 1em;
  border: 1px solid #ccc;
  margin-bottom: 13px;
}

div#notice.success {
  border: 1px solid #afa;
  background: #cdffcd;
}

div#notice.failure {
  border: 1px solid #fcc;
  background: #fee;
}

div#notice.alert {
  border: 1px solid #fcb;
  background: #fec;
}

#ytapiplayer {
  
}

#right_hand_container {
  float: right;
  width: 486px;
}

#video {
  background: #eee;
  width: 486px;
  height: 273px;
}

#video object {
}

#left_hand_container {
  height: 437px;
  width: 486px;
  /*
  width: 501px;
  */
}

div#top_menu {
  padding: 0.4em;
  padding-bottom: 1em;
  padding-top: 24px;
  padding-left: 10px;
  float: left;
}

#top_menu li {
  display: block;
}

#top_menu ul li a {
  color: gray;
  text-decoration: none;
  padding: 0.2em;
  margin-bottom: 1.6em;
  font-family: Georgia;
  font-size: 18px;
}

#top_menu ul li a:hover {
  color: #386ff9;
}

#play_controls {
  background: rgb(86, 134, 255);
  width: 486px;
  height: 26px;
  margin: 0px;
  padding: 0px;
}

#play_controls div {
  background: rgb(86, 134, 255);
  width: 97px;
  height: 22px;
  text-align: center;
  display: block;
  float: left;
  margin: 0px;
  padding: 0px;
  padding-top: 4px;
}

#play_controls div:active {
  background: #ff9933;
}

#play_controls div.inactive:active {
  background: rgb(86, 134, 255);
}

#play_controls div a {
  text-decoration: none;
  font-size: 13px;
  color: white;
}

#play_controls div a:active {
}

#play_controls div.inactive a:hover {
  cursor: default; 
}

#play_controls div.inactive a {
  color: #94b2fc;
}

#menu a {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  font-size: 16px;
  width: 97px;
  height: 22px;
  text-align: center;
  display: block;
  float: left;
  margin-top: 20px;
}

#play_controls div a:hover {

}

#now_playing {
  height: 62px;
  margin-bottom: 13px;
}

a {
  text-decoration: none;
  color: #386ff9;
}

a.mini_button {
  background: #5686ff; 
  color: white; 
  font-size: 9px; 
  padding-left: 2px; 
  padding-right: 2px;
}

a.mini_button:active {
  background: #ff9933 ;
}

div#upcoming {
  background: white;
  position: absolute;
  color: #555555;
  top: 300px;
  left: 501px;
  width: 486px;
  height: 212px;
  overflow : auto;
}

span.cued_by {
  color: #999;
}

span.loading {
  color: #999;
}

#cue_video {
  position: absolute;
  top: 525px;
  height: 62px;
  width: 486px;
  left: 501px;
  background: white;
}

#clear {
  clear: both;
}

.clear {
  clear: both;
}

div#chat_participants {
  background: white;
  color: #fe5c31;
  /*
  width: 486px;
  */
  width: 501px;
}

div#chat_participants div {
  display: block;
  width: 52px;
  height: 52px;
  float: left;
  border: 1px solid #eee;
  margin-right: 4px;
}

div#chat_messages {
  clear: left;
  overflow: auto;
  color: #555555;
  font-family: "Lucida Grande", Geneva, Arial,Verdana,sans-serif;
  font-size: 12px;
  /* line-height: 1.4em; */
  /* background: url(/images/tall_light_gradient.png);
  background-repeat: repeat-x;  */
  background: white;
  height: 437px;
  /*
  width: 501px;
  */
  width: 486px;
}

div#chat_messages.autoscrolling_disabled {
  /*
  background: url(/images/tall_even_lighter_gradient.png);
  background-repeat: repeat-x; 
  */
}

div#new_comment {
  position: absolute;
  top: 525px;
  height: 62px;
  width: 486px;
  background: white;
}

div#debug {
  padding: 1em;
  background: #eee;
  overflow : scroll;
  height: 100px;
}

#debug:before {
  content: "console";
  color: #999;
}

#centered_container {
	padding: 0px;
	text-align: left;
	width: 319px;
	margin: 0 auto;
	margin-top: 0px;
	/*
	background: url(/images/grid_element.jpg);
	*/
}

div#huge_logo {
  float: left;
}

div#sign_in_area {
  background: white;
}

div#sign_in_area input {
  margin-bottom: 8px;
}

div#sign_in_area div {
  background: #eee;
  padding: 10px;
  border: 1px solid #ddd;
}

#login { 
}

#copyright {
  margin-top: 10px;
  color: #999;
}

/* this class pertains to the individual messages inside the chat messages window */
#chat_messages div {
  width: 466px; /* on safari, 471 would be suitable. but we have to accomodate all scrollbars */
}

#chat_messages div.user {
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
}

#chat_messages div.user div {
  float: left;
  width: 52px;
  height: 52px;
  text-align: center;
  border: 1px solid #eee;
  margin-right: 6px;
}

#chat_messages div.user div img {
}

#chat_messages div.user span {
  font-size: 8px;
}

.system {
  color: #999;
}

div#mini_wrapper {
  padding: 1em;
}

div#youkeboxes {
  position: absolute;
  height: 437px;
  top: 0px;
}

ul.youkebox_list {
  margin-left: -15px;
  margin-top: 12px;
}

ul.youkebox_list li {
  display: block;
  height: 62px;
  width: 319px; /* let's deduct a scrollbar width here... say 15px */
  width: 300px; /* let's deduct a scrollbar width here... say 15px */
  margin-bottom: 2px;
  margin-left: 15px;
  float: left;
  cursor: pointer;
}

#youkebox_avatar {
  float: left;
  margin-right: 3px;
  height: 62px;
  width: 62px;
}

ul.youkebox_list li #youkebox_avatar {
  float: left;
  margin-right: 3px;
}


ul.list li {
  display: block;
  padding-left: 8px;
  list-style-type: disc;
}

ul.list {
  list-style-type: disc;
  list-style-position: inside;
  margin-bottom: 10px;
}

ul.list li:before {
	content: "- ";
}

th {
  text-align: left;
}

div.big_dialogue {
  position: absolute;
  top: 75px;
  left: 167px;
  width: 653px;
  height: 287px;
  background: white;
  padding: 20px;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

img {
  border: 0;
}

div.scrollable_list {
  margin-top: 10px;
  height: 250px;
  overflow: auto;
}

table#the_list_table tr td {
  height: 21px;
}

div.dedicate {
  position: absolute;
  top: 140px;
  left: 200px;
  width: 400px;
  background: white;
  padding: 20px;
  border: 2px solid #ccc;
}

p {
  margin-top: 0px;
  margin-bottom: 5px;
}

h1 {
  font-size: 31px;
  font-weight: bold;
  margin-bottom: 10px;
}

h2 {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  border-bottom: 1px solid #ddd;
}

div.close_dialog {
  float: right;
  font-size: 16px;
}

div.error {
  background: #fdd;
  padding: 1em;
  border: #999;
  width: 40em;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid #f99;
}

table {
  font-size: 12px;
}

th {
  font-weight: bold;
}

td {
  padding-right: 10px;
}

table#upcoming tr td {
  width: 121px;
  padding: 0px;
}

table#upcoming tr td.title a {
  color: #555555;
}

table#upcoming tr td.title {
  width: 270px;
  overflow: hidden;
}

table#upcoming tr td.cued_by {
  width: 100px;
  overflow: hidden;
}

table#upcoming tr td.commands {
  width: 100px;
  overflow: hidden;
}
div.tweet {
  margin-bottom: 6px;
  margin-top: 8px;
}

.tweet span {
  font-size: 10px;
}

div#blogs {
  background: white;
  left: 0px;
  /* left: 668px;  */
  width: 653px;
  padding-right: 20px;
}

#youkebox_settings h3 {
  font-size: 12px;
}

.error ul li {
  display: list-item;
  list-style: disc;
  margin-left: 18px;
}

strong {
  font-weight: bold;
}

img.thumbnail {
  width: 64px;
  height: 48px;
}

div#new_comment textarea {
  height: 39px; /* not 40px because of IE */
  width: 300px;
  float: left;
}

div#new_comment input {
  margin-top: 0px;
  margin-left: 3px;
  float: left;
}

div#new_comment a {
  margin-top: 4px;
  margin-left: 3px;
}
.fopup {
  background: #eee;
  padding: 8px;
  border: 1px solid #ddd;
}
a.fopup_link {
  cursor: pointer;
}

.list_of_youkeboxes {
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.list_of_youkeboxes tr td {
  font-size: 16px;
  border-bottom: 1px solid #eee;
}

.list_of_youkeboxes tr th {
  padding-right: 10px;
}

.list_of_youkeboxes tr td div {
  padding: 2px;
}

.list_of_youkeboxes tr td div img {
  vertical-align: middle;
  height: 36px;
  width: 36px;
  border: 1px solid #eee;
}

.pagination {
  text-align: center;
  width: 100%;
  font-size: 16px;
  margin-top: 24px;
  margin-bottom: 16px;
}

#featured_youkebox div span {
  font-size: 20px;
  float: left;
  padding-top: 16px;
  margin-left: 4px;
}

#featured_youkebox p {
  margin-top: 8px;
}

#contacts {
  font-size: 16px;
}

#contacts p {
  margin-bottom: 10px;
}

#team span {
  margin-bottom: 10px;
}

#team h2 {
  margin-top: 20px;
}

#new_youkebox input {
  margin-bottom: 8px;
}

#notice h2 {
  color: rgb(85, 85, 85);
  border-width: 0px;
}

#youkebox_filter {
  float: right;
}

.space_on_top {
  margin-top: 20px;
}

.halp {
  border: 1px solid #ccc;
  padding: 5px;
  background: #eee;
}

a.textual_link {
  cursor: pointer;
}

a.textual_link:active {
  color: #ff9933;
}

span.time_left {
  font-size: 9px;
}

#popular {
  font-size: 13px;
}

#popular span {
  font-size: 9px;
}

#popular img {
  float: left;
  margin-right: 5px;
  margin-bottom: 3px;
}