/**
 * @file
 *
 * Layout Styling (DIV Positioning).
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Zen Columns layout method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow.
 *
 * ELMCIP uses grid from 960gs (http://960.gs/demo.html)
 * Width 960px
 * 12 col.
 * Gutters 20px
 * Content 940px
 * 1 col 60px
 * 4 col = (60*4) + (3*20) = 300px
 * 6 col (50%) = 460px
 */

body {
  background-color: #F3F2EA;
}

#page-wrapper,
.region-bottom {
  /*
   * If you want to make the page a fixed width and centered in the viewport,
   * this is the standards-compliant way to do that. See also the ie6.css file
   * for the necessary IE5/IE6quirks hack to center a div.
   */
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

.sidebar .block {
  margin-bottom: 1.5em;
}

/*
 * Header
 */
#header .block .content {
  margin: 0 10px;
}

#header .region-header .content {
  margin: 0;
}

.region-header {
  position: relative;
  margin: 10px;
}

.region-header-top,
.region-header-bottom {
  background-color: #bebdae;
}

.region-header-bottom {
  margin: 0 0 1em 0;
}

#header .block {
  float: left;
  width: 33.333%;
}

#header .region-header-bottom .block {
  width: 100%;
  float: none;
}

#header .block-search-api-page {
  bottom: 0;
  position: absolute;
  right: 0;
  width: inherit;
}

.logo-container img {
  width: 100%;
}

#header .logo-container > a {
  margin: 0;
}

#header a,
#header .block.first.last a {
  float: left;
  margin: 0.714em 1.5em 0.714em 0;
}

#header .even a,
#header .block.last a {
  float: right;
  margin: 0.714em 0 0.714em 1.5em;
}

#header .social a {
  margin: 5px 0 0 20px;
}

/*
 * Main (container for everything else).
 */
#main-wrapper {
  position: relative;
  margin: 1.5em 0 3em;
}

/*
 * Content
 */
#content,
.no-sidebars #content {
  float: left; /* LTR */
  width: 960px;
  margin-left: 0; /* LTR */
  margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */
}

.sidebar-first #content {
  width: 720px;
  margin-left: 240px; /* LTR */ /* The width of .region-sidebar-first. */
  margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
}

.sidebar-second #content {
  width: 760px;
  margin-left: 0; /* LTR */
  margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
}

.two-sidebars #content {
  width: 560px;
  margin-left: 200px; /* LTR */ /* The width of .region-sidebar-first */
  margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
}

.no-sidebars.page-news #content,
.no-sidebars.page-taxonomy #content,
.no-sidebars.node-type-page #content,
.no-sidebars.node-type-story #content {
  margin-right: -800px;
  margin-left: 80px;
  width: 800px;
}

#content .section {
  margin: 0 10px;
}

/**
 * Front Page Panel styles.
 */
.panels-flexible-row {
  margin: 0 0 20px 0;
}

.panels-flexible-row-last {
  margin: 0;
}

#frontpage .panels-flexible-row,
#frontpage .inside,
#frontpage .transparent .pane-content,
#frontpage .view-content {
  padding: 0;
}

.group-left .inner,
#frontpage .pane-content {
  padding: 10px;
}

.conference,
.anthology,
.kb {
  border-bottom: solid 8px #333;
}

.panel-flexible img {
  width: 100%;
  height: auto;
}

.sponsors .panels-flexible-region,
.kb-header .panels-flexible-region {
  float: none;
  width: 100%;
}

/**
 * Front page general section, about and latest news.
 */
.general .panels-flexible-region {
  width: 460px;
}

.general .panels-flexible-region-first {
  margin: 0 10px 0 0;
}

.general .panels-flexible-region-last {
  margin: 0 0 0 10px;
}

.panels-flexible-row.kb-header {
  margin: 0;
}

.kb-header .pane-title {
  background-color: #F3F2EA;
  margin: 0;
  padding: 0.714em 1em;
}
.kb-header .pane-content {
  display: none;
}

.kb .panels-flexible-region {
  float: left;
  width: 300px;
  margin: 0 10px;
  min-height: 440px;
}

.kb .pane-title {
  margin: 0;
  padding: 0.714em 1em;
}

.kb .panels-flexible-region-first {
  margin: 0 10px 0 0;
}

.kb .panels-flexible-region-last {
  margin: 0 0 0 10px;
}

.kb .panels-flexible-region-inside {
  padding: 0;
}

/**
 * Conference secton.
 */
.conference .panels-flexible-region-first p {
  margin: 0;
}

.conference .panels-flexible-region-first {
  margin: 0 10px 0 0;
  width: 300px;
}

.conference .panels-flexible-region-last {
  margin: 0 0 0 10px;
  width: 620px;
}
/* End of front page panel */

/**
 * Unlinking rounded corner background images that formed the previous rounded
 * panel boxes on kb front page from as defined in Drupal system css.
 */
#kbpage .more-link {
  margin: -2.9em 0 0 0;
}

/* Removing top margin from Add new content links aka view footer on KB front page. */
#kbpage div.view-footer p {
  margin-top: -1.5em
}

/**
 * Knowledge base records. Specific styles for views and fields can be found in
 * fields.css and views-styles.css respectively.
 */
.group-left {
  float: left;
  margin: 0 10px 0 0;
  width: 300px;
}

.group-left .inner {
  padding: 1.5em 10px;
}

.group-left .title {
  border-bottom: 1px solid #bbb;
}

.group-right {
  float: left;
  margin: 1.5em 0 0 10px;
  width: 620px;
}

.group-right > div,
.group-left .inner > div {
  margin-bottom: 1.5em;
}

.group-right > div:first-child,
.group-left .inner > div:last-child {
  margin-bottom: 0;
}

div.group-meta {
  margin-top: 3em;
}

/**
 * Navigation.
 */
#navigation {
  float: left; /* LTR */
  width: 100%;
  margin-left: 0; /* LTR */
  margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
  height: 3em; /* The navigation can have any arbritrary height. We picked one
                    that is the line-height plus 1em: 1.3 + 1 = 2.3
                    Set this to the same value as the margin-top below. */
}

.with-navigation #content,
.with-navigation .region-sidebar-first,
.with-navigation .region-sidebar-second {
  margin-top: 3em; /* Set this to the same value as the navigation height above. */
}

/**
 * First sidebar.
 */
.region-sidebar-first {
  float: left; /* LTR */
  width: 240px;
  margin-left: 0; /* LTR */
  margin-right: -240px; /* LTR */ /* Negative value of .region-sidebar-first's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-first .section. */
}

.region-sidebar-first .section {
  margin: 0 10px; /* LTR */
  padding: 0;
}

/*
 * Second sidebar.
 */
.region-sidebar-second {
  float: left; /* LTR */
  width: 200px;
  margin-left: 760px; /* LTR */ /* Width of content + sidebar-first. */
  margin-right: -960px; /* LTR */ /* Negative value of .region-sidebar-second's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-second .section. */
}

.region-sidebar-second .section {
  margin: 0 0 0 20px; /* LTR */
  padding: 0;
}

/*
 * Footer.
 */
.region-footer {
  margin: 0 10px;
  padding-bottom: 2em;
}

.region-footer p {
  margin: 0;
}

.region-footer h2.block-title {
  text-align: left;
}

.region-footer .block:nth-of-type(3n+1) {
  margin-left: 0;
}

.region-footer .block:nth-of-type(3n) {
  margin-right: 0;
}

.region-footer .block:nth-of-type(3n) h2.block-title {
  text-align: right;
}

.region-bottom {
  padding: 1em 0.5em;
}

/*
 * Prevent overflowing content.
 */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-bottom {
  overflow: visible;
  word-wrap: break-word; /* A very nice CSS3 property */
}