/** 
 * Structure for regions in current theme.
 *
 */


/** --------------------------------------------------------------
 * Base
 */
html{
  .alwaysShowScrollbar();
}

body{
  margin: 0;
  padding: 0;
}


/** ==============================================================
 * Header 
 */
#outer-wrap-header{

}

#inner-wrap-header{
  .wrap();
  //height: @magicNumber * 4;
}

#header{
  .column(@columns);
  margin-top: @magicNumber / 2;
  .clearfix();
}


/** --------------------------------------------------------------
 * Banner 
 */
#banner{

}

#site-logo{

}

#site-title {
  color: @colorSiteTitle;
  font-family: @fontFamilySiteTitle;
  font-size: @fontSizeSiteTitle;
  line-height: 1;
  .anchor-none();
}

#site-slogan{
  color: @colorSiteSlogan;
}


/** --------------------------------------------------------------
 * Login menu
 */
#login-menu{
  float: right;
  .font-size(@fontSizeSmall);
  .anchor-anonymous(@anchorColorAnonymous, @anchorColorAnonymousHover);

  img.gravatar{
    vertical-align: middle;
  }
}


/** --------------------------------------------------------------
 * Navbar
 */
#outer-wrap-navbar {

}

#inner-wrap-navbar {
  .wrap();
}

#navbar {
  .column(24);
  margin-bottom: @magicNumber;
}

#navbar1 {
  display: inline-block;
}

#navbar2 {

}


#ucp-navbar {
  margin-bottom: @magicNumber;
}



/** ==============================================================
 * Header below
 */
#outer-wrap-header-below{

}

#inner-wrap-header-below{
  .wrap();
  height: @magicNumber;
}

#header-below {
  .column(@columns);
  margin-bottom: @magicNumber;
}


/** --------------------------------------------------------------
 * Breadcrumb
 */
#breadcrumb {

}



/** ==============================================================
 * The flash area.
 *
 */
#outer-wrap-flash {

}

#inner-wrap-flash {
  .wrap();
  margin-bottom: @magicNumber;
}

#flash {
  .column(@columns);
}

#flash-1,
#flash-2,
#flash-3,
#flash-4 {
  .column(@columns / 4);
}



/** ==============================================================
 * The featured area.
 *
 */
#outer-wrap-featured {

}

#inner-wrap-featured {
  .wrap();
  margin-bottom: @magicNumber * 2;
}

#featured-first,
#featured-middle,
#featured-last {
  .column(@columns / 3);
  height: 100%;
}



/** ==============================================================
 * The main content area.
 *
 */
#outer-wrap-main {
  margin-top: @magicNumber;
}

#inner-wrap-main {
  .wrap();
  margin-bottom: @magicNumber * 3;
}

#primary {
  //word-wrap: break-word;
  .column(@columns * 2 / 3);

  &.full-width{
    .column(@columns);
  }
}

#custom {
  .column(@columns);
}

//#primary-fullwidth{.column(24);}th
#sidebar {
  .column(@columns / 3 - 1);
  .push(1);
}

// .sidebar {
  //margin-top: @magicNumber * 2;
//}

 

/** ==============================================================
 * The triptych area.
 *
 */
#outer-wrap-triptych{

}

#inner-wrap-triptych {
  .wrap();
  margin-bottom: @magicNumber * 2;
}

#triptych {

}

#triptych-first,
#triptych-middle,
#triptych-last {
  .column(@columns / 3);
  height: 100%;
}



/** ==============================================================
 * The footer column area.
 *
 */
#outer-wrap-footer {

}


/** --------------------------------------------------------------
 * The footer column area.
 */

#outer-wrap-footer-column {

}

#inner-wrap-footer-column{
  .wrap();
}

.footer-column-wrapper {
  margin-bottom: @magicNumber;
}

.footer-column {
  .column(@columns / 4);
}


/** --------------------------------------------------------------
 * The footer area.
 */
#inner-wrap-footer {
  .wrap();
}

#footer {
  .column(@columns);
  padding-top: @magicNumber / 2;
}