//http://kuler.adobe.com/#themeID/1157177
@light: #F2DC86;
@base: #FAB66A;
@accent: #83BFA1;
@bold: #BF355D;
@dark: #ED8168;

@mute: #eeeeee;

//spacing
@big-padding: (18px * 1.5);

.glassy (@color: @base) {
    @from: (@color + #2a2a2a);
    @to: (@color - #2a2a2a);
    background-color: @color;
    background-image: -moz-linear-gradient(100% 100% 90deg, @from, @to);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@from), to(@to));
    filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF%m[1,6], endColorstr=#FF%m[1,6])", @from, @to);
}

body, .container {
    background: @mute;
}

.topbar {
    background: @bold;
    height: 6px;
    overflow: hidden;
}

.header {
    background: @base;
    border-bottom: 1px solid @mute;
    div.span-10 img {
      margin: (@big-padding / 3) 0 (@big-padding / 3) (@big-padding / 2);
    }
    div.span-14 div {
      margin: (@big-padding / 3) 0 0 (@big-padding);
      border-left: 3px solid (@bold * 0.7 + @base * 0.3);
      padding: (@big-padding * 1.0) 0 (@big-padding / 2) (@big-padding / 2);
      font-size: 125%;
    }
}

.footer {
    background: @bold;
    div {
      padding: (@big-padding / 4) (@big-padding / 2) (@big-padding / 4) (@big-padding / 2);
      color: @mute;
      a {
        color: inherit;
        text-decoration: none;
      }
      a:hover, a:active {
        color: inherit;
        text-decoration: underline;
      }
    }
}

.navbar {
  table {
    margin: 0;
  }
  table td {
    margin: 0;
    padding: 0;
    span, a {
      padding: (@big-padding / 2) (@big-padding / 4);
      display: block;
      .glassy(@dark);
      text-align: center;
      color: white;
      font-size: 130%;
      text-decoration: none;
      white-space: nowrap;
    }
    a:hover, a:active, a.active, span.active {
      .glassy(@light);
      color: black;
    }
  }
  table td + td a {
    border-left: 1px solid @mute;
  }
}

.article {
	> div {
		margin: @big-padding (@big-padding / 2);
	}
	background: @mute;
	width: (950px - (3px * 2));
	color: black;
	border: 3px solid @accent;
	border-top: 1px solid @mute;
	table {
		margin-top: (@big-padding / 2);
		thead td {
			font-size: 125%;
			font-weight: bold;
		}
		td.price {
			text-align: right;
		}
	}
	form {

	}
}

.welcome {
    .glassy(@accent);
    border-bottom: 1px solid @mute;
    > div > div {
        background: transparent;
        margin-left: @big-padding;
    }
    > div > .message {
        line-height: 115%;
        margin-top: (@big-padding * 4);
        margin-bottom: @big-padding;
        font-size: 325%;
        color: white;
    }
    > div > .trifold {
        .box {
            display: block;
            .glassy(@bold);
            color: white;
            text-decoration: none;
            height: 152px;
            h3 {
              text-transform: uppercase;
              color: @base;
              font-size: 120%;
              margin: 0.25em 0;
            }
            img {
              text-decoration: none;
              border: 0;
              margin: 0 auto;
              display: block;
            }
        }
    }
    > div.span-9 {
        height: 467px;
        position: relative;
        div {
            height: 530px;
            width: 100%;
            position: absolute;
            right: (@big-padding * 2);
            bottom: @big-padding;
            background: transparent url(masthead.png) bottom right no-repeat;
        }
    }
}