/* CSS for YouTube Activity Stream Viewer application */

body {
  background-color: #fff;
  color: #1F1F1F;
  font-family: Helvetica, Sans, Arial;
  font-size: medium;
  line-height: 150%;
}

img {
  border: none;
}

input {
  margin-left: 10px;
  margin-top: 2px;
}

h4 {
  padding: 2px;
  border-bottom: 1px solid #999;
  background-color: #eee;
}


/* == main page sections == */
#all {
  width: 800px;
  height: 80%;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -15px;
}

#top {
  background-color: #fff;
  font-size: small;
  padding: 20px 10px 5px 10px;
  vertical-align: middle; 
}

#options {
  background-color: #E4E4E4;
  border: 1px solid #999;
  color: #0033D3;
  display: none;
  height: 50px;
  padding: 20px 10px 5px 10px;

}

#loginlogout {
  display: inline;
  float: right;
  margin-top: -25px;
}
  
#status {
  display: none;
  background-color: #fff;
  padding: 10px;
}

#user_status {
  background-color: #fff;
  padding: 10px;
  display: none;
  margin: 5px;
  width: 200px;
  height: 200px;
}

#video_thumbnail {
  display: inline;
  float: left;
  padding-right: 10px;
}
  
#activity_stream {
  background-color: #fff;
  margin-top: -25px;
  padding: 10px;
}

/* == form selection elements == */

#feed_type_select {
  display: inline;
}
  
#user_activity_input {
  display: inline;
}

#friend_user_select_div {
  display: inline;
}
  
#user_input_fake_form {
  display: inline;
  margin-top: -25px;
  width: 300px;
  float: right;
  padding-left: 10px;
}




/* == classes for messages and smaller elements == */

.activity_entry {
  padding: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.api_not_available {
  color: red;
  padding-left: 3px;
}

.clear_both {
  clear: both;
}

.dark_text {
  color: #1F1F1F;
  font-size: x-small;
  padding-left: 10px;
}

.title {
  color: #000;
  display: inline;
  font-size: 100%;
  padding-left: 3px;
}

a.login_link {
  padding: 2px;
  text-decoration: none;
}

a.login_link:hover {
  padding: 2px;
  text-decoration: underline;
  background-color: #10D72F;
}

a.logout_link {
  padding: 2px;
  text-decoration: none;
}

a.logout_link:hover {
  padding: 2px;
  text-decoration: underline;
  background-color: #EE6969;
}

a.username_link {
  padding: 2px;
  text-decoration: none;
  background-color: #F2FF7F;
  color: #1F1F1F;
}

a.username_link:hover {
  background-color: #A2DF0D;
  color: #000;
}

li.feed_item {
  list-style: none;
  border-bottom: 1px solid #ddd;
}

span.activity_timestamp {
  padding: 2px;
  color: #222;
  background-color: #eee;
  font-size: small;
}

span.metadata_not_found {
  color: #4F4F4F;
  font-size: x-small;
  background-color: #BFBFBF;
  padding: 2px;
}

span.my_username_link {
  padding: 2px;
  text-decoration: none;
  color: #000;
}

span.user_activity_not_found {
  color: #000;
  background-color: #BFBFBF;
  padding: 2px;
}

span.video_id {
  color: #7F7F7F;
  font-size: x-small;
}

span.video_metadata {
  font-size: small;
  color: #7F7F7F;
}

span.video_title, a {
      font-size: 105%;
      color: #000;
      text-decoration: none;
      padding: 2px;
}

span.video_title:hover {
  font-size: 105%;
  padding: 2px;
  color: #000;
  text-decoration: none;
  background-color: #eee;
  border-bottom: 1px solid #000;
}

/* == classes for the divs that indicate the different activity types == */
.icon {
  display: inline;
  padding: 0px 2px 0px 2px;
  margin-right: 5px;
  font-size: small;
}

.friend_added {
  background-color: #F5FFAF;
}

.user_subscription_added {
  background-color: #B9FFAF;
}

.video_commented {
  background-color: yellow;
}

.video_favorited{
  background-color: #D7AFFF;
}

.video_rated {
  background-color: #FFAFAF;
}

.video_shared {
  background-color: #AFFFFF;
}

.video_uploaded {
  background-color: #EE2D30;
}

/* == hidden elements for playing embeddable videos == */

#play_video {
display: none;
}

#videobox {
display: none;
}