/* IFAD Layout
 * This layout is a fixed layout, with a width of 1000px.
 * It's composed by four macro-blocks that have to be created using the Structure Tree:
 * Header (contains title and dates)
 * Content (contains video and social widgets)
 * BottomContent (contains abstract and navigation)
 * Footer
 */

body {
  font-family: sans-serif;
  font-size: 12px;
  /* The blue background that appear below the header */
  background: transparent url(bg.jpg) repeat-x 0 120px;
}

#header, #content, #content_bottom, #footer {
  width: 945px;
  margin: auto;
}

/* The headline is not used in this template */
#event_headline {
  display: none;
}

/* The header div has to be created using the Structure Tree in the Template form.
 * It should contain:
 * - A div #logo, created with the Structure Tree
 * - Title and dates items
 */
#header {
  padding: 0;
  margin-top: 20px;
}

#header #logo {
  background: transparent url(http://webapps.ifad.org/logo.png) no-repeat 0 0;
  height: 100px;
  margin-left: 20px;
}

#header #event_title, #header #event_dates {
  color: white;
  margin-top: 5px;
  margin-bottom: 0;
  font-weight: normal;
  display: block;
}

#header #event_title {
  width: 1050px;
  font-size: 32px;
  vertical-align: baseline;
  font-family: Times;
  margin-left: 20px;
}

#header #event_dates {
  margin-top: 4px;
  padding-left: 20px;
  font-size: 14px;
}

/* The content div has to be created using the Structure Tree in the Template form.
 * It should contain:
 * Video Player (or video clips at the end of the event)
 * Social Widgets
 */
#content {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 10px;
}

/* The notification block is automatically created by the Video Player block.
 * This block should be hidden by default and it should appear to show video errors
 * The color effects of this box are managed by the application javascript, but can be
 * overridden.
 */
#content #notification {
  position: absolute;
  top: 116px;
  background: none !important;
  color: white;
  right: 0;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -ms-box-shadow: none;
}

/* The close button for the notification box. In this layout it is not used */
#content #notification .close {
  display: none;
}

/* Video box and social widgets are positioned side by side. */
#content #event_video, #content #social {
  display: inline-block;
  vertical-align: top;
}

#content #event_video {
  width: 538px;
  height: 400px;
  overflow: hidden;
}

#event_video #video {
  width: auto;
  height: 360px;
}

/* This box will be shown when the video is loading */
#event_video #video.loading {
  background: #dddddd url(loader-video.gif) no-repeat center center;
}

#event_video #video .error {
  position: relative;
  top: 125px;
  background-color: #fff;
}
#event_video #video .error img {
  float: left;
  margin-right: 10px;
}

/* The social widget contains facebook and twitter chats. It's better to assign an height to this box */
#content #social {
  width: 380px;
  padding: 0 0 0 20px;
}

/* Inside the social widget there is one .tabber div and two .tab-element divs.
 * The standard l&f of the .tabber div is similar to a tabs container, where each anchor is a tab
 * When the user clicks over an anchor in the .tabber div, the corresponding .tab-element will be shown
 */
#social .tabber {
  border-bottom: 1px solid #98999D;
  margin-top: 0;
}

#social .tabber li {
  padding: 4px 16px;
  text-align: left;
}

#social .tabber li a {
  color: white;
}

#social .tabber li.active a {
  color: #666;
}

#social .tab-element {
  background-color: white;
  overflow-y: scroll;
}

/* Facebook Like widget */
#social fb\:like {
  height: 35px;
}

#social fb\:comments {
  min-height: 200px;
}

/* The tweet class is applied to the div containing the single tweet in the timeline */
#twitter .tweet {
  position: relative;
}

#twitter .tweet .avatar {
  position: absolute;
  top: 10px;
  z-index: 1000;
}

#twitter .tweet .content {
  margin-left: 70px;
}

#twitter .tweet .content .text {
  margin: 3px 0;
}

#twitter .tweet .content .screen_name a {
  color: #000;
}

#twitter .tweet .content .timestamp {
  font-size: 11px;
  color: #666;
}

/* The ContentBottom div has to be created using the Structure Tree in the Template form.
 * It should contain: abstract and navigation bar
 */
#content_bottom { }

/* In this template abstract and nav bar are aligned side by side */
#content_bottom #abstract, #content_bottom #nav_bar {
  display: inline-block;
  vertical-align: top;
}

#abstract {
  margin-left: 170px;
  max-width: 530px;
}

/* Each paragraph of abstract is rendered like a single block.
 * The max-width rule in the abstract box will prevent to show
 * more than two paragraphs in the same line.
 */
#abstract p {
  border-left: 1px solid #c0c0c0;
  padding-left: 10px;
  display: inline-block;
  width: 250px;
  font-size: 12px;
  vertical-align: top;
}

#nav_bar {
  border-left: 1px solid #c0c0c0;
  padding-left: 10px;
  margin-top: 10px;
  color: #000;
}

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

#nav_bar ul li {
  margin-bottom: 5px !important;
}

#footer {
  color: #000;
  text-align: center;
}

#footer > * {
  display: inline;
  vertical-align: top;
}