@font-face {
    font-family: 'MEgalopolisExtraRegular';
    src: url('../fonts/megalopolisextra-webfont.eot');
    src: url('../fonts/megalopolisextra-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/megalopolisextra-webfont.woff') format('woff'),
         url('../fonts/megalopolisextra-webfont.ttf') format('truetype'),
         url('../fonts/megalopolisextra-webfont.svg#MEgalopolisExtraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {
  margin: 0px;
  padding: 0px;
}

body {
  text-align: center;
  background: #ecf9f9;
  font-family: Arial, Helvetica, sans-serif;
  color: #374a51;
  font-size: 14px;
}

h1, h2, h3, h4, h5 {
  font-family: 'MEgalopolisExtraRegular';
  margin-bottom: 10px;
  font-weight: normal;
}

a {
  color: #437f7c;
  text-decoration: none;
}
  a:hover {
    color: #d36144;
  }
  
p {
  line-height: 20px;
  margin-bottom: 10px;
}

cite {
  padding: 0 10px;
  font-style: italic;
}

hr {
  border-color: #ECF9F9;
  border-style: dashed;
  margin: 15px 0;
}

img.floatright, img.right {
  float: right;
  clear: right;
  margin: 10px 0 10px 10px;
}
img.floatleft, img.left {
  float: left;
  clear: left;
  margin: 10px 10px 10px 0;
}

div.clear {
  height: 1%;
  clear: both;
  float: left;
}

.round10 {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; /* future proofing */
  -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

#wrapper {
  width: 980px;
  text-align: left;
  margin: 0 auto;
}

#header {
  position: relative;
  width: 980px;
  height: 168px;
  background: transparent url('../images/layout/nav-background.gif') no-repeat bottom left;
}

#header #top-bar #logo {
  float: left;
  margin: 0 0 30px 20px;
  display: block;
  width: 343px;
  height: 88px;
  position: relative;
}
  #header #top-bar #logo span {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; 
    background: transparent url('../images/alternative-windows-logo.jpg') no-repeat 50% 50%;
  }
  
#header #top-bar #basket {
  float: right;
  display: block;
  height: 35px;
  width: 137px;
  margin: 32px 10px 0 0;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-family: 'MEgalopolisExtraRegular';
  font-size: 16px;
  text-transform: uppercase;
  background: transparent url('../images/buttons/view-basket.gif') no-repeat 50% 50%;
}

#header #top-bar #products_link {
  float: right;
  display: block;
  height: 35px;
  width: 137px;
  margin: 32px 10px 0 0;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-family: 'MEgalopolisExtraRegular';
  font-size: 16px;
  text-transform: uppercase;
  background: transparent url('../images/buttons/view-basket.gif') no-repeat 50% 50%;
}
  
  #header #nav-left {
    position: absolute;
    display: block;
    width: 20px;
    height: 41px;
    background: transparent url('../images/layout/nav-left.gif') no-repeat 50% 50%;
    bottom: 0px;
    left: -20px;
  }
  #header #nav-right {
    position: absolute;
    display: block;
    width: 20px;
    height: 41px;
    background: transparent url('../images/layout/nav-right.gif') no-repeat 50% 50%;
    bottom: 0px;
    right: -20px;
  }

#header #navigation {
  float: left;
  clear: both;
  display: block;
  list-style: none;
  width: 980px;
  height: 40px;
}
  #header #navigation li {
    display: inline;
  }
    #header #navigation li a {
      float: left;
      color: #fff;
      text-decoration: none;
      display: block;
      font-family: 'MEgalopolisExtraRegular';
      font-size: 14px;
      line-height: 40px;
      padding: 0 8px;
      cursor: pointer;
    }
      #header #navigation li a:hover {
        color: #437f7c;
      }
      #header #navigation li.first a {
        padding-left: 10px;
      }
      #header #navigation li.last a {
        padding-right: 0px;
      }

#content,
#paypal_solution {
  float: left;
  width: 940px;
  margin-left: 10px;
  padding: 10px 10px 20px 10px;
  background: #fff;
}
  #content #primary {
    width: 700px;
    float: left;
  }
  #content #primary.full {
    width: 940px;
  }
  #content #secondary {
    width: 220px;
    float: left;
    margin-left: 20px;
  }
  #content ul, #content ol {
    padding-left: 20px;
    line-height: 22px;
    margin-bottom: 10px;
  }
  #content ol {
    padding-left: 25px;
  }
  
  #content.section #primary img {
    margin: 0 0 10px 10px;
    padding: 7px;
    border: 1px dashed #ECF9F9;
  }
  
  #paypal_solution {
    text-align: right;
    width: 960px;
    padding: 0px 0px 10px 0px;
  }
  
ul.section_grid li {
  margin-bottom: 15px;
}
  ul.section_grid li a {
    font-weight: bold;
  }
  
.slot.product {
  float: left;
  width: 220px;
  background: #FFF3D8;
  margin-bottom: 10px;
}
.slot.product.bundle {
  background: #ecf9f9;
}
  .slot.product .product-bottom {
    float: left;
    clear: both;
    width: 200px;
    padding: 0 10px 10px 10px;
  }
    .slot.product .product-bottom .price-box {
      float: left;
    }
      .slot.product .product-bottom .price-box .rrp {
        font-size: 12px;
        color: #b2b2b2;
      }
      .slot.product .product-bottom .price-box .price {
        color: #d36144;
        font-family: 'MEgalopolisExtraRegular';
        font-size: 16px;
      }
    .slot.product .product-bottom .button.buy {
      float: right;
      height: 33px;
      padding: 0 5px;
      text-align: center;
      font-family: 'MEgalopolisExtraRegular';
      font-size: 14px;
      background: #4ea39f;
      line-height: 33px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
      .slot.product .product-bottom .button.buy a {
        color: #fff;
        display: block;
        padding-left: 30px;
        background: transparent url(/images/icons/download-white.png) no-repeat 0px 3px;
      }
  .slot.product p {
    margin: 0px 10px 10px 10px;
  }
  .slot.product h3 {
    font-size: 15px;
    width: 200px;
    margin: 10px 10px 5px 10px;
    float: left;
    clear: both;
  }
    .slot.product h3 a {
      color: #374a51;
    }
    .slot.product .icon {
      float: left;
      width: 55px;
      height: 55px;
      margin: 0 10px 5px 10px;
    }
      .slot.product .icon.pdf {
        background: transparent url('../images/icons/pdf-55.png') no-repeat 50% 50%; 
      }
      .slot.product .icon.cd {
        background: transparent url('../images/icons/cd-55.png') no-repeat 50% 50%; 
      }
      .slot.product .icon.exe {
        background: transparent url('../images/icons/exe-55.png') no-repeat 50% 50%; 
      }
      
#content #primary.full .slot.product {
  background: #FFF3D8;
  margin-left: 20px;
}
#content #primary.full .slot.product.first {
  margin-left: 0px;
  clear: left;
}
      
/*==================
* Homepage
===================*/
.one_col, .two_col {
  width: 940px;
  float: left;
  clear: both;
}
.one_col.bottom, .two_col.bottom {
  padding-bottom: 0px;
}

.col {
  float: left;
  padding: 20px;
}

.col.col_one {
  margin-right: 20px;
}

.col.banner {
  width: 900px;
}
.col.banner h1 {
  float: left;
  width: 560px;
}
.col.banner img {
  padding: 7px;
  border: 1px dashed #ECF9F9;
  margin-left: 5px;
}

.col.feature {
  width: 560px;
  background: #fff3d8;
}
  .col.feature div {
    width: 328px;
    float: left;
  }
  .col.feature img {
    float: right;
    background: #fff;
    padding: 5px;
    border: 1px solid #ffd67a;
  }

.col.product {
  width: 280px
}
  .col.product h3 {
    width: 100%;
    margin: 0px 0px 8px 0px;
  }
  .col.product p {
    margin: 0px 0px 8px 0px;;
  }
  .col.product .product-bottom {
    padding: 0px;
    width: 100%;
  }
  .col.product .icon {
    margin: 0px 8px 5px 0px;
  }
  
#breadcrumb {
  margin-bottom: 10px;
  font-family: 'MEgalopolisExtraRegular';
  color: #6ea19d;
}

/*==================
* Contact
===================*/
#contactFormHolder ul.col {
  float: left;
  padding: 0px;
  margin-right: 20px;
}
#contactFormHolder li {
  list-style: none;
  float: left;
  clear: left;
  margin-bottom: 5px;
}
#contactFormHolder li label,
#contactFormHolder li input,
#contactFormHolder li textarea,
#contactFormHolder li select {
  float: left;
  clear: left;
}
#contactFormHolder li input,
#contactFormHolder li textarea {
  width: 300px;
  padding: 0 10px;
  background: #FFF3D8;
  border: 1px solid #c2b8a2;
  color: #968e7d;
  
}
#contactFormHolder li input {
  height: 30px;
  line-height: 30px;
}
#contactFormHolder li textarea {
  padding: 10px;
  height: 200px;
}
#contactFormHolder .error_list {
  color: #e26342;
  font-size: 0.8em;
  padding: 0px;
}

/*==================
* Fabric Estimate
===================*/
table.estimate {
  border-collapse: collapse;
}
table.estimate td {
  background: #FFF3D8;
  border: 1px solid #C2B8A2;
  padding: 10px;
}
table.estimate td.result {
  background: #ECF9F9;
}


/*==================
* Footer
===================*/

#footer {
  width: 980px;
  float: left;
  color: #ecf9f9
}
  #footer a {
    font-size: 12px;
    line-height: 18px;
    color: #ecf9f9;
  }
  #footer h3 a {
    color: #437f7c;
  }
  #footer #footer-header {
    float: left;
    position: relative;
    width: 960px;
    height: 51px;
    padding: 0px 10px;
    background: transparent url('../images/layout/footer-header.gif') no-repeat 50% 50%;
  }
  #footer #footer-header h2 {
    font-size: 14px;
    line-height: 40px;
    float: left;
  }
  #footer #footer-content {
    float: left;
    width: 960px;
    margin-left: 10px;
    padding: 10px 0;
    background: #5db3af;
  }
  #footer #footer-left {
    position: absolute;
    display: block;
    width: 20px;
    height: 41px;
    background: transparent url('../images/layout/footer-left.gif') no-repeat 50% 50%;
    bottom: 0px;
    left: -20px;
  }
  #footer #footer-right {
    position: absolute;
    display: block;
    width: 20px;
    height: 41px;
    background: transparent url('../images/layout/footer-right.gif') no-repeat 50% 50%;
    bottom: 0px;
    right: -20px;
  }
  #footer #footer-content ul {
    width: 220px;
    float: left;
    margin: 0 9px 15px 10px;
  }
  #footer #footer-content li {
    list-style: none;
  }
  #footer #footer-content ul ul {
    margin: 0px;
  }
  #footer .social {
    float: right;
    margin-top: 10px;
    width: 80px;
  }
  
  #footer .runner {
    float: left;
    clear: both;
    width: 920px;
    padding: 20px;
    font-size: 11px;
  }
  #footer .runner a {
    font-size: 11px;
    text-decoration: underline;
  }
  #footer .runner .brand {
    float: right;
  }