// Here you can easily change your sites's layout.
// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.

//$header-font-size: 1em;
//$header-padding-top: 1.5em;
//$header-padding-bottom: 1.5em;

//$max-width: 1350px;
//$indented-lists: true;

// Padding used for layout margins
//$pad-min: 18px;
//$pad-narrow: 25px;
//$pad-medium: 35px;
//$pad-wide: 55px;

// Sidebar widths used in media queries
//$sidebar-width-medium: 240px;
//$sidebar-pad-medium: 15px;
//$sidebar-pad-wide: 20px;
//$sidebar-width-wide: 300px;

// The following fix img and imgcap warnings/errors for foxslide theme

// from base/layout
.flex-content { max-width: 100%; height: auto; }
.basic-alignment {
  &.left { float: left; margin-right: 1.5em; }
  &.right { float: right; margin-left: 1.5em; }
  &.center { display:block; margin: 0 auto 1.5em; }
  &.left, &.right { margin-bottom: .8em; }
}

// from base/typogrpahy
$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default;
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default;
.sans { font-family: $sans; }
.mono { font-family: $mono; }

@mixin mask-image($img, $repeat: no-repeat){
  @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms);
  @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms);
  width: image-width($img);
  height: image-height($img);
}

@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) {
  @include border-radius($border-radius);
  @include box-shadow($shadow);
  @include box-sizing(border-box);
  border: $border;
}

@mixin reset-shadow-box() {
  @include shadow-box(0px, 0px, 0px);
}

article {
  img, video, .flash-video, .caption-wrapper {
    @extend .flex-content;
    @extend .basic-alignment;
    @include shadow-box;
    &.caption {
      @include reset-shadow-box;
    }
  }
  .caption-wrapper {
    display: inline-block;
    margin-bottom: 10px;
    .caption-text {
      background: #fff;
      text-align: center;
      font-size: .8em;
      color: #666;
      display: block;
    }
  }
}

article img.left    { float:left;margin-right:1.5em }
article img.right   { float:right;margin-left:1.5em }
article img.center  { display:block;margin:0 auto 1.5em }