html, body {
  height: 100%;
}
.page-wrapper{
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -130px; 
}
.page-wrapper:after {
  content: "";
  display: block;
}
.footer-wrapper, .page-wrapper:after {
  height: 130px; 
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html, body {
  font-family: 'Lato', sans-serif;
}

.container
{
  width:900px;
}

.header-wrapper .container {
  position:relative;
  padding-left:180px;
}

.header-wrapper {
  height:100px;
  background-color:#297dc1;
  border-top:5px solid #318ac7;
}

.menu-wrapper {
  background-color:#374a9f;
}

.menu-wrapper .container {
  position:relative;
  padding-left:165px;
}

.footer-wrapper {
  height:130px;
  border-top:5px solid #585aa8;
  background-color:#2e3192;
}

.logo
{
  position:absolute;
  top:5px;
  left:26px;
  width:127px;
  height:126px;
  background:url(../images/cs-logo.png) no-repeat;
}

.logo a {
  display:block;
  width:127px;
  height:126px;
}

.wordmark {
  display:block;
  float:left;
  width:390px;
  height:40px;
  margin-top:37px;
  background:url(../images/cs-wordmark.png) no-repeat;
  text-indent:-9999px;
}

.header-nav {
  float:right;
}

.header-nav ul {
  list-style:none;
}

.header-nav ul li {
  float:left;
}

.header-nav ul li a {
  color:#fff;
  font-family: 'Josefin Slab', serif;
}

.header-nav ul > li > a:hover,
.header-nav ul > li > a:focus {
  background-color:transparent;
  text-decoration:underline;
}

.header-search {
  float:right;
}

.header-search input {
  float:left;
  padding: 2px 7px;
}

.header-search button {
  float:left;
  margin: 3px 0 0 8px;
  background-color:transparent;
  background-image: url(../images/icon-search.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 19px;
  width: 19px;
  border: none;
}

.header-search button span {
  display:none;
}

.main-nav > li {
  display:block;
  float:left;
}

.main-nav > li > a {
  position:relative;
  display:block;
  color:#fff;
  padding:15px 15px 12px;
  font-family: 'Josefin Slab', serif;
  text-transform:uppercase;
}

.main-nav > li:hover > a,
.main-nav > li > a:hover,
.main-nav > li > a:focus {
  background-color:#318ac7;
}

.main-nav > li:hover > a,
.main-nav > li > a:hover {
  z-index: 10;
}

.main-nav > li:hover .dropdown-container {
  display:block;
}

.dropdown-container {
  display:none;
  position:absolute;
  top:auto;
  left:0;
  width:460px;
  padding:20px 0;
  background-color:#fffeee;

  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);

  z-index:5;
}

.dropdown-container ul
{
  float:left;
  width:230px;
  padding:5px 20px;
  border-right:2px solid #2e3192;
  list-style:none;
}

.dropdown-container ul li a {
  color:#2e3192;
}

.dropdown-container ul:last-child {
  border-right:none;
}

.home .main-container {
  background-image:url(../images/home-bg.jpg?v=1.0);
  background-repeat:no-repeat;
  background-position:center center;
  min-height:500px;
}

footer
{
  color:#fff;
  font-size:12px;
}

.footer-left
{
  float:left;
  padding-top:25px;
}

.footer-left ul
{
  padding-left:25px;
  list-style:none;
}

.footer-left ul strong {
  margin-right:5px;
}

.footer-right
{
  float:right;
  padding-top:55px;
}

.notice 
{
  width: 400px;
  margin: 30px auto 30px;
  padding: 25px;
  color:#2e3192;
  background-color:#f2f0e0;
  text-align:center;

  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}

.notice h2
{
  margin:0 0 15px 0;
  font-family: 'Josefin Slab', serif;
  font-weight:bold;
}

.notice p {
  margin:15px 0 15px 0;
  font-family: 'Josefin Slab', serif;
  font-size:20px;
  line-height:24px;
}

.notice .forgot {
  font-size:12px;
  line-height:16px;
  color:#2e3192;
}

.notice .notice-hr
{
  position:relative;
  margin:25px 0 25px 0;
  border-bottom:2px solid #2e3192;
}

.notice .notice-hr span {
  position:absolute;
  left:50%;
  top:-20px;
  margin-left: -21px;
  padding:10px;
  background-color:#f2f0e0;
  font-family: 'Josefin Slab', serif;
  font-size:16px;
}

.notice .textbox
{
  display:block;
  width:100%;
  margin:10px 0;
  padding:10px;
  border-radius:5px;
  border:1px solid #2e3192;
  color:#404041;
  background-color:#fff;
  font-family: 'Lato', sans-serif;
  font-size:18px;
  font-weight:bold;
  text-align:center;
}

.notice .sign-in 
{
  display:block;
  width:100%;
  margin:10px 0;
  padding:10px;
  border-radius:5px;
  border:none;
  color:#fff;
  background-color:#2e3192;
  text-transform:uppercase;
  font-family: 'Lato', sans-serif;
  font-size:18px;
  font-weight:bold;
}

.notice a.sign-up 
{
  display:block;
  padding:10px;
  border-radius:5px;
  color:#fff;
  background-color:#297dc1;
  text-decoration:none;
  text-transform:uppercase;
  font-family: 'Lato', sans-serif;
  font-size:18px;
  font-weight:bold;
}

.main-column
{
  margin-left:20%;
  padding:50px 0;
}

h3
{
  margin:0 0 20px 0;
  font-weight:bold;
}

h4 {
  margin:0 0 20px 0;
  font-weight:bold;
  line-height:26px;
}

span.error-message 
{
  color:#a94442;
}

.categories .main-container
{
  padding-top:30px;
  padding-bottom:30px;
}

.categories .featured,
.product-details .featured
{
  text-align:center;
}

.categories .featured img,
.product-details .featured img {
  width:80%;
}

.categories .main-container ul
{
  padding:0;
  list-style:none;
}

.product-details .main-container
{
  padding-top:60px;
  padding-bottom:30px;
}

.product-details .featured {
  padding-top:50px;
}

.product-details .featured a.product-image
{
  display:block;
}

.product-details .featured a.large-preview {
  display:inline-block;
  margin: 20px 0 20px -25px;
  padding-left:25px;
  background-image:url(../images/icon-zoom.png);
  background-repeat:no-repeat;
  background-position:left center;
  font-size:16px;
}

.product-details .product-price {
  width:45%;
  background-color:#f2f0e0;
  margin-bottom:20px;
}

.product-details .product-price.ink-price {
  width:100%;
}

.product-details .product-price th {
  padding:10px 0;
  text-align:center;
  color:#2e3192;
  font-size:16px;
}

.product-details .product-price.ink-price th {
  padding:10px;
}

.product-details .product-price td {
  padding:5px 0;
  text-align:center;
  color:#404040;
}

.product-details .product-price.ink-price td {
  padding:5px 10px;
}

.product-details .product-price tbody tr:nth-child(odd) {
  background-color:#faf8ec;
}

.product-details a.share-product {
  display:inline-block;
  margin: 20px 0 20px 0;
  padding-left:30px;
  background-image:url(../images/icon-share.png);
  background-repeat:no-repeat;
  background-position:left center;
  font-size:16px;
}

.products .main-container
{
  padding-top:30px;
  padding-bottom:30px;
}

.categories h4 {
  color:#2e3192;
  font-family: 'Josefin Slab', serif;
  text-transform:uppercase;
}

.categories > ul
{
  padding:0;
  list-style:none;
}

.categories > ul a
{
  color:#2e3192;
}

.categories > ul > li > a
{
  font-weight:bold;
}

.categories > ul > li > ul
{
  margin:5px 0;
  padding:0 0 0 20px;
  list-style:none;
}

.product-list .row
{
  margin-bottom:25px;
}

.products .product
{
  text-align:center;
}

.products .product a,
.products .product a span {
  display:block;
  color:#231f20;
}

.products .product a img {
  width:90%;
  margin-bottom:10px;
}

.products h3
{
  margin-bottom:0;
}

.products .pagination
{
  float:right;
  margin:0 0 10px 0;
}

.products .pagination > li > a
{
  color:#318ac7;
}

.products .pagination > .active > a,
.products .pagination > .active > span,
.products .pagination > .active > a:hover,
.products .pagination > .active > span:hover,
.products .pagination > .active > a:focus,
.products .pagination > .active > span:focus {
  background-color:#318ac7;
}
















