@variables {
  backgroundColor:#316bad;
  backgroundGradientStart:  modifyHsl( var( backgroundColor ) 1 1 *0.8 );
  backgroundGradientEnd: var( backgroundColor );
  backgroundGradient: var( backgroundGradientEnd ) url( ~/Image/Gradient/v-32-640-var( backgroundGradientStart )-var( backgroundGradientEnd ).png ) fixed repeat-x top;
  greenBackground: var( greenLighter ) url( ~/Image/Gradient/v-32-59-var( greenLighter )-var( greenDarker ).png ) repeat-x bottom;
  greenLighter: #8dd941;
  greenDarker: #85cc3d;
  logoBackgroundColor: #002c70;
  brandColor1: #002c70;
  brandColor2: #3e740e;
  brandColor3: #933600;
  brandColor4: #ca6300;
  mainBodyTextFontFamily: "Calibri", "Arial", sans-serif;
  headingBaseSize: 125%;
  heading2Size: var( headingBaseSize );
  heading3Size: eval( var( headingBaseSize ) * 0.85 );
  heading4Size: eval( var( headingBaseSize ) * 0.75 );
  heading5Size: eval( var( headingBaseSize ) * 0.7 );
  heading6Size: eval( var( headingBaseSize ) * 0.65 );
  headingFontFamily: "Avenir", "Century Gothic", sans-serif;
  headingTextTransform: uppercase;
  headingLetterSpacing: 0.1em;
  baseWhitespace: 2em;
  halfWhitespace: eval( var( baseWhitespace ) / 2 );
  quarterWhitespace: eval( var( baseWhitespace ) / 4 );
  borderRadius: eval( var( baseWhitespace ) * 0.375 );
}

* {
  margin: 0;
  padding: 0;
}

html {
  background: var( backgroundGradient );
  color: #fff;
}

html, #content input, #content textarea {
  font-family: var( mainBodyTextFontFamily );
  font-size: 100%;
}

body {
  width: 65em;
  max-width: 100%;
  min-width: 300px;
  margin: auto;
  color: #fff;
}

h1 {
  font-size: 100%;
  overflow: hidden;
  margin-bottom: eval( var( baseWhitespace ) - var( borderRadius ) );
  position: relative;
}

h1 a {
  background: var( logoBackgroundColor );
  color: #fff;
  padding: var( borderRadius );
  display: block;
  float: left;
  -moz-border-radius: var( borderRadius );
  -webkit-border-radius: var( borderRadius );
  -o-border-radius: var( borderRadius );
  -khtml-border-radius: var( borderRadius );
  border-radius: var( borderRadius );
  position: relative;
  z-index: 2;
}

h1 .decoration {
  position: absolute;
  z-index: 2;
  right: var( quarterWhitespace );
}

h1 .text {
  color: #fff;
  display: block;
  position: absolute;
  z-index: 3;
  right: var( quarterWhitespace ); 
  top: 50%;
  margin-top: -0.6em;
  font-style: italic;
  font-size: 140%;
  /* Faux outline by creating one shadow for each of 8 compass directions */
  text-shadow: 
    -1px -1px 0.05em var( greenDarker ),
     0   -1px 0.05em var( greenDarker ),
     1px -1px 0.05em var( greenDarker ),
     1px  0   0.05em var( greenDarker ),
     1px  1px 0.05em var( greenDarker ),
     0    1px 0.05em var( greenDarker ),
    -1px  1px 0.05em var( greenDarker ),
    -1px  0   0.05em var( greenDarker );
}

h1 img {
  border: 0;
  display: block;
}

h1 .shim, #navigation, #page {
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  -o-border-radius: 1px;
  -khtml-border-radius: 1px;
  border-radius: 1px;
}

h1 .shim {
  background: var( greenBackground );
  border: 1px solid var( greenDarker );
  border-top: 0;
  display: block;
  position: absolute;
  top: var( borderRadius );
  bottom: var( borderRadius );
  left: 0;
  right: 0;
  z-index: 1; 
  text-align: right;
  -moz-border-radius-topright: var( borderRadius );
  -webkit-border-top-right-radius: var( borderRadius );
  -o-border-top-right-radius: var( borderRadius );
  -khtml-border-top-right-radius: var( borderRadius );
  border-top-right-radius: var( borderRadius );  
}

#h1 .shim img {
  position: relative;
  z-index: 2;
}

h2 {
  color: var( brandColor1 );
  font-size: var( heading2Size );
}

h3 {
  font-size: var( heading3Size );
}

h3, .box  a, #content label, 
#content form em, #content .services-list strong {
  color: var( brandColor2 );
}

h4 {
  color: var( brandColor3 );
  font-size: var( heading4Size );
}

h5 {
  font-size: var( heading5Size );
}

h6 {
  font-size: var( heading6Size );
}

h5, h6 {
  color: var( brandColor4 );
}

h2, h3, h4, h5, h6, .box span, 
#content th {
  font-family: var( headingFontFamily );
  text-transform: var( headingTextTransform );
  letter-spacing: var( headingTextTransform );
}

#page {
  background: #fff;
  color: #343;
  border: 1px solid #8ab5d1;
  border-top: 0;
  padding: var( baseWhitespace );
  padding-top: eval( var( baseWhitespace ) - var( borderRadius ) );
}

#navigation {
  margin-bottom: var( baseWhitespace );
  padding: 0 var( quarterWhitespace );
}

#navigation, #content input[type=submit] {
  background: #ff9000;
  border: 1px solid #f28900;
  border-top: 0;
}

#navigation  ul{
  list-style: none;
  overflow: hidden;
}

#navigation li {
  float: left;
}

#navigation span, #navigation a {
  display: block;
  float: left;
  font-size: 120%;
  font-weight: bold;
  padding: var( borderRadius ) var( quarterWhitespace );
}

#navigation a:hover {
  background: #ffa633;
}

#navigation li.last {
  padding-right: 0;
}

#navigation span {
  color: #945400;
}

#navigation a {
  text-decoration: none;
}

#navigation, #navigation a {
  color: #fff;
}

#content {
  overflow: auto;
}

#content p, #content ul, #content ol, #content table, #content h2, #content h3, 
#content h4, #content h5, #content h6, .directory, .testimonials {
  margin-bottom: var( halfWhitespace );
}

#content h3 {
  clear: both;
  border-top: 2px solid #8dda41;
  margin-top: var( baseWhitespace );
  padding-top: var( baseWhitespace );
}

.directory, .testimonials {
  float: right;
  margin-left: var( baseWhitespace );
}

.directory .image {
  margin-bottom: var( baseWhitespace );
  text-align: right;
}

#content p, #content ul, #content ol, #content table {
  line-height: 1.4;
}

#content ul, #content ol {
  margin-left: var( halfWhitespace );
}

#footer {
  font-size: 90%;
  padding: var( halfWhitespace ) 0;
  text-align: right;
}

#footer a {
  text-decoration: none;
}

#footer, #footer a {
  color: #fff;
}

#footer a:hover {
  color: #aaf;
  text-decoration: underline;
}

.column .paddingWrapper {
  border-left: 2px solid #8dda41;
  padding: 0 var( baseWhitespace );
}

.column:first-child .paddingWrapper {
  border-left: 0;
  padding-left: 0;
}

.column:last-child .paddingWrapper {
  padding-right: 0;
}

.box {
  overflow: hidden;
}

.clients .image {
  float: left;
  width: 25%;
}

.box .image, .pageLink.box  {
  display: block;
  position: relative;
}

.clients .image a {
  padding: eval( var( halfWhitespace ) + 4 ) var( halfWhitespace ) var( halfWhitespace ) var( halfWhitespace );
  margin: var( baseWhitespace );
  margin-left: 0;
  margin-top: 0;
}

.services-side-box  .image a {
  margin-bottom: var( halfWhitespace );
  padding: eval( var( halfWhitespace ) + 3 ) var( halfWhitespace ) var( halfWhitespace ) var( halfWhitespace );
}

.box a {
  display: block;
  text-align: center;
}

.box a:hover {
  background: #ddf4c6;
}

.clients .image span {
  left: var( halfWhitespace );
  right: eval( var( halfWhitespace ) + var( baseWhitespace ) );
}

.box span {
  display: block;
  font-size: 90%;
  font-weight: bold;
  position: absolute;
  top: var( halfWhitespace );
}

.services-side-box .image span {
  left: var( halfWhitespace );
  right: var( halfWhitespace );
}

.pageLink.box span {
  left: var( halfWhitespace );
  right: var( halfWhitespace );
}

.pageLink.box em {
  font-size: 90%;
  display: block;
  margin-top: var( quarterWhitespace );
}

.pageLink.box a {
  padding: 3.5em var( halfWhitespace ) var( halfWhitespace ) var( halfWhitespace );
  margin-bottom: var( halfWhitespace );
}

#content form em {
  font-size: 80%;
}

.box  a, .food-styling .image, #content form {
  background: #e8f8d9;
  -moz-border-radius: var( borderRadius );
  -webkit-border-radius: var( borderRadius );
  -o-border-radius: var( borderRadius );
  -khtml-border-radius: var( borderRadius );
  border-radius: var( borderRadius );   
}

#content form {
  float: left;
  padding: var( halfWhitespace );
  padding-bottom: 0;
}

#content th, #content td {
  vertical-align: top;
  text-align: left;
  padding: var( quarterWhitespace );
  padding-left: 0;
  padding-top: 0;
}

#content input[type=text], #content textarea {
  border: 1px solid #8dda41;
  padding: eval( var( baseWhitespace ) / 8 );
  width: 20em;
}

#content textarea {
  height: 10em;
}

#content input[type=submit] {
  color: #fff;
  float: right;
  font-size: 120%;
  padding: var( quarterWhitespace ) eval( var( baseWhitespace ) * 0.375 );
}

#content input[type=submit]:hover {
  background: #ffa633;
  cursor: pointer;
}

#content .services-list ul {
  margin-left: 0;
  list-style: none;
}

#content .services-list li {
  margin-bottom: var( quarterWhitespace );
}

.food-styling {
  overflow: hidden;
}

.food-styling .image {
  float: left;
  margin-right: var( baseWhitespace );
  margin-bottom: var( baseWhitespace );
  padding: var( halfWhitespace );
}