/*
 *   SHORTCUTS
 *   Classes used as fast wrappers for common used styles
 */

.ClearPosition { top: auto; right: auto; left: auto; bottom: auto; }
.ClearMargins  { margin: 0;    }
.ClearPaddings { padding: 0;   }
.ClearBorders  { border: none; }

/*/////////////////////////////////////////////////////////////////////////////
  // Canvas class names is used for indicating all its child elements that
  // coordinate (0,0) is top-left of this container instead of the body
  /////////////////////////////////////////////////////////////////////////////*/
.Canvas { position: relative; }

/*/////////////////////////////////////////////////////////////////////////////
  // Box alignment is used for placing a container and stick it to one of its
  // parent sides. If parent is not body, it should have position: relative; or
  // use the Canvas class name
  /////////////////////////////////////////////////////////////////////////////*/
.BoxAlignBottom { position: absolute; bottom: 0; }
.BoxAlignTop    { position: absolute; top: 0;    }
.BoxAlignLeft   { position: absolute; left: 0;   }
.BoxAlignRight  { position: absolute; right: 0;  }

/*/////////////////////////////////////////////////////////////////////////////
  // Box wrapping allows the contents after its definition in HTML to flow by
  // its right or left side.
  /////////////////////////////////////////////////////////////////////////////*/
.BoxWrapRight { float: left; margin-right: 15px; margin-left: 0;  }
.BoxWrapLeft  { float: right; margin-right: 0; margin-left: 15px; }

/*/////////////////////////////////////////////////////////////////////////////
  // Box expansion allows the container to expands and fill all the space
  /////////////////////////////////////////////////////////////////////////////*/
.BoxExpandHorizontal { width: 100%; }
.BoxExpandVertical   { height: 100%; }
.BoxExpandAll        { width: 100%; height: 100%; }

/*/////////////////////////////////////////////////////////////////////////////
  // Content alignment is used for horizontally aligning a container contents.
  // Note that only inline contents will be affected by these settings.
  /////////////////////////////////////////////////////////////////////////////*/
.ContentAlignCenter  { text-align: center; }
.ContentAlignLeft    { text-align: left;   }
.ContentAlignRight   { text-align: right;  }

/*/////////////////////////////////////////////////////////////////////////////
  // Container and IsolatedContainer forces any container to adapt its size so
  // any floating content is taken into account.
  /////////////////////////////////////////////////////////////////////////////*/
.Container, .IsolatedContainer  { overflow: hidden; }
.IsolatedContainer              { clear: both;      }