@import url(/css/generic.css);

/******************************************************************************
* Site layout & general styles
*******************************************************************************/

body {
  font-family: 'Ubuntu', sans-serif; /* Requires Google Web Fonts stylesheet */
  font-weight: 400;
  color: #fff;
  background: #202020 url(/img/page-content-background.jpg) center 183px no-repeat;
}
body strong {
  font-weight: 700;
}

p#skip-navigation {
  position: absolute;
  left: -9999px;
}


/******************************************************************************
* Header
*******************************************************************************/

div#header {
  background: url(/img/header-background.png) repeat-x;
  height: 183px;
}
div#header div#header-inner {
  margin: 0 auto 0 auto;
  padding-top: 2px;
  width: 959px;
}

/* Logo and strapline */

div#header div#logo-and-strapline {
  overflow: hidden;
  zoom: 1;
  padding: 0 30px 0 30px;
  height: 130px;
}
div#logo-and-strapline p {
  margin: 0;
}
div#logo-and-strapline p.logo {
  float: left;
}
div#logo-and-strapline p.strapline {
  float: right;
}
div#logo-and-strapline p img {
  display: block;
}

/* Main navigation */

div#main-navigation {
  height: 50px;
}
div#main-navigation ul {
  list-style: none;
  position: relative;
  border-left: 1px solid #fcc000;
  margin: 0;
  padding: 0;
  height: 50px;
}
div#main-navigation ul li {
  background: url(/img/main-navigation-separator.png) right top no-repeat;
  float: left;
  margin: 0;
  padding: 0 2px 0 0;
  height: 50px;
}
div#main-navigation ul li.home {
  width: 39px;
}
div#main-navigation ul li.fuel {
  width: 87px;
}
div#main-navigation ul li.oil-tanks {
  width: 133px;
}
div#main-navigation ul li.stoves {
  width: 109px;
}
div#main-navigation ul li.special-offers {
  width: 180px;
}
div#main-navigation ul li.about-us {
  width: 131px;
}
div#main-navigation ul li.contact-us {
  width: 149px;
}
div#main-navigation ul li.basket {
  width: 114px;
}
div#main-navigation ul li a {
  color: #016921;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  text-align: center;
  font-size: 1.615em;
  font-weight: 500;
  line-height: 50px;
  display: block;
}
div#main-navigation ul li.home a {
  background: url(/img/main-navigation-home-icon-unselected.png) no-repeat;
  width: 39px;
  height: 50px;
}
div#main-navigation ul li.home a span {
  position: absolute;
  left: -9999em;
}
div#main-navigation ul li.selected a {
  background: #fff;
}
div#main-navigation ul li.home.selected a {
  background-image: url(/img/main-navigation-home-icon-selected.png);
}
div#main-navigation ul li span.arrow {
  background: url(/img/main-navigation-selection.png) no-repeat;
  position: absolute;
  bottom: -10px;
  width: 39px;
  height: 9px;
}
div#main-navigation ul li.home span.arrow {
  left: 0;
}
div#main-navigation ul li.fuel span.arrow {
  left: 65px;
}
div#main-navigation ul li.oil-tanks span.arrow {
  left: 175px;
}
div#main-navigation ul li.stoves span.arrow {
  left: 298px;
}
div#main-navigation ul li.special-offers span.arrow {
  left: 445px;
}
div#main-navigation ul li.about-us span.arrow {
  left: 603px;
}
div#main-navigation ul li.contact-us span.arrow {
  left: 745px;
}
div#main-navigation ul li.basket span.arrow {
  left: 878px;
}


/******************************************************************************
* Page content
*******************************************************************************/

div#page-content {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin: 0 auto 20px auto;
  padding: 20px 34px 45px 35px;
  width: 890px;
}
div#page-content #welcome {
  color: #fff;
  text-shadow: 0 1px 0 #000;
  background: url(/img/welcome-background.png) left bottom repeat-x;
  font-size: 1.923em;
  line-height: 1.231em;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0 0 18px 0;
}
#welcome em {
  color: #fd0;
  font-style: normal;
  font-weight: 700;
}
div#page-content #page-title {
  color: #fd0;
  text-shadow: 0 1px 0 #000;
  font-weight: 500;
  font-size: 2.615em;
  margin: 0 0 15px 0;
}


/******************************************************************************
* Panel
*******************************************************************************/

div.panel {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid #5e5e5e;
  border-radius: 5px;
  padding: 6px;
}
div.panel div.panel-inner {
  background: rgba(255, 255, 255, 0.82);
  color: #4d4d4d;
  padding: 22px 20px 22px 20px;
}
div.panel .panel-title {
  background: url(/img/panel-separator.png) left bottom repeat-x;
  font-size: 1.615em;
  font-weight: 500;
  text-shadow: 0 1px 0 #fff;
  color: #016921;
  margin: -8px 0 20px 0;
  padding-bottom: 7px;
}
div.panel .panel-title span {
  display: block;
  padding-top: 6px;
  min-height: 33px;
}
div.panel .panel-title.with-bullet span {
  background: url(/img/panel-title-bullet.png) no-repeat;
  padding-left: 43px;
}


/******************************************************************************
* Footer
*******************************************************************************/

div#footer {
  overflow: hidden;
  zoom: 1;
  margin: 0 auto 20px auto;
  width: 880px;
}
div#footer a {
  color: #fff;
  text-decoration: none;
}
div#footer a:hover {
  text-decoration: underline;
}
div#footer ul.links {
  list-style: none;
  overflow: hidden;
  zoom: 1;
  float: left;
  margin: 0;
  padding: 0;
}
div#footer ul.links li {
  background: url(/img/footer-item-separator.png) right top repeat-y;
  float: left;
  margin: 0;
  padding: 0 14px 0 12px;
}
div#footer ul.links li.first {
  padding-left: 0;
}
div#footer ul.links li.last {
  background: none;
}
div#footer div#copyright-and-tibus-credit {
  float: right;
}
div#copyright-and-tibus-credit p {
  float: left;
  margin: 0;
}
div#copyright-and-tibus-credit p.copyright {
  background: url(/img/footer-item-separator.png) right top repeat-y;
  margin-right: 12px;
  padding-right: 14px;
}


/******************************************************************************
* Footer logos
*******************************************************************************/

div#footer-logos {
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  margin: 0 auto 20px auto;
  padding: 6px;
  width: 946px;
}
div#footer-logos ul {
  list-style: none;
  overflow: hidden;
  zoom: 1;
  margin: 0;
  padding: 0;
}
div#footer-logos ul li {
  float: left;
  margin: 0;
  padding: 0;
}
div#footer-logos ul li img {
  display: block;
}