@import "reset.css";

body{ text-align:center; font-family: /*Comfortaa, */Arial; font-size:14px; color:#fff; background:#000 url(../img/top-bg.png) repeat-x top;}

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

#header{ height:100px}
#hub-header{ text-align:center}

#header #logo{ float:left; margin-top:5px}

/* navigation styles */
#top-nav{ float:right; padding-top:10px;}
#top-nav a{ font-weight:bold; color:#fff; padding:0 10px; font-size:12px; text-decoration:none}
#top-nav a:hover{ text-decoration:underline}

#main-nav{ padding:35px 0 0 350px}

#nav, #info-nav{ padding:0; margin:0; list-style:none}
#nav li{ float:left; margin-right:15px}
#nav a{ display:block; line-height:55px; width:140px; text-indent:-5000px; background:url(../img/header-btns.png) no-repeat}

#nav a.gallery-link{ background-position:left top}
#nav a.gallery-link:hover, #nav a.gallery-active{ background-position:right top}

#nav a.custom-link{ background-position:left -55px}
#nav a.custom-link:hover, #nav a.custom-active{ background-position:right -55px}

#nav a.info-link{ background-position:left -110px}
#nav a.info-link:hover, #nav a.info-active{ background-position:right -110px}

#info-nav-wrapper{ float:left; width:220px}
#info-nav li{ margin-bottom:10px}
#info-nav a{ display:block; width:220px; height:70px; text-indent:-5000px; background:url(../img/link-btns.png) no-repeat}
#info-nav a.news{ background-position: left top}
#info-nav a.news:hover, #info-nav .active a.news{ background-position: right top}
#info-nav a.stuff{ background-position: left -70px}
#info-nav a.stuff:hover, #info-nav .active a.stuff{ background-position: right -70px}
#info-nav a.yummies{ background-position: left -140px}
#info-nav a.yummies:hover, #info-nav .active a.yummies{ background-position: right -140px}
#info-nav a.company{ background-position: left -210px}
#info-nav a.company:hover, #info-nav .active a.company{ background-position: right -210px}
#info-nav a.feedback{ background-position: left -280px}
#info-nav a.feedback:hover, #info-nav .active a.feedback{ background-position: right -280px}
#info-nav a.colour{ background-position: left -350px}
#info-nav a.colour:hover, #info-nav .active a.colour{ background-position: right -350px}

#popup-btns{ margin-top:10px}
#popup-btns a{ display:block; float:left; text-indent:-5000px; width:220px; height:70px; background:url(../img/custom-btns.png) no-repeat; margin-left:22px}
#popup-btns a.frame{ background-position:left top}
#popup-btns a.frame:hover{ background-position:right top}
#popup-btns a.print{ background-position:left -70px}
#popup-btns a.print:hover{ background-position:right -70px}
#popup-btns a.quality{ background-position:left -140px}
#popup-btns a.quality:hover{ background-position:right -140px}
#popup-btns a.help{ background-position:left bottom}
#popup-btns a.help:hover{ background-position:right bottom}

/* content styles */
#content-wrapper{ /*background:url(../img/bg.jpg) no-repeat top;*/ padding:10px 0; min-height:490px}
/*#ie-wrapper #content-wrapper{ height:490px}*/

#btn-wrapper{ padding:50px 90px 0}

#btn-wrapper a{ display:block; width:240px; height: 335px; margin:0 15px; float:left; text-align:center}
#btn-wrapper a img{ margin-top:125px}
#btn-wrapper a.gallery-btn{ background:url(../img/gallery-btn.png) no-repeat top left}
#btn-wrapper a.custom-btn{ background:url(../img/custom-btn.png) no-repeat top left}
#btn-wrapper a.info-btn{ background:url(../img/info-btn.png) no-repeat top left}
#btn-wrapper a:hover{ background-position:top right}

#title{ text-align:center; margin-bottom:10px}
#title p{ font-size:20px; color:#fff; text-transform:uppercase; padding-top:10px}

#info-book{ width:770px; height:505px; float:right; background:url(../img/open-book2.jpg) no-repeat}
#info-book p{ color:#333}
#info-book a{ color:#333; }
#blog{ float:left; width:335px; height:460px; margin:25px 0 0 40px; overflow:auto}

#bargains{ float:right; width:335px; height:460px; margin:25px 40px 0 0; overflow:auto}

#info-content{ margin-left:230px}
#info-content td{ padding:10px}

#comment-wrapper{ width:400px; border:2px solid #fff}
#comment-list{ padding:0; margin:0; list-style:none}
#comment-list li{ padding:10px; border-bottom:1px dotted #fff}

.comment-name{ color:#78c4ec; text-align:right}
.comment-text  strong { color:#78c4ec; }

.column{ float:left}
.half{ width:495px}
.quarter{ width:247px}
.right{ float:right}
.left{ float:left}

.right-align{ text-align:right}

img.right{ margin:0 0 10px 10px}

.emphasis{ font-size:16px; font-weight:bold}

.step{ text-transform:uppercase; font-weight:bold}

.red{ color:#d12439}
.orange{ color:#e46725}
.yellow{ color:#f7ee23}
.green{ color:#74be43}
.dark-green{ color:#043825}
.purple{ color:#802879}
.dark-blue{ color:#14488d}
.blue{ color:#78c4ec}

#footer{ text-align:center; font-size:11px; color:#fff; line-height:30px}

.clear{ clear:both}
.hidden{ display:none}
.inner{ padding:10px}
.centered{ text-align:center}

.caption{ font-weight:bold; font-size:11px}

.fine-print{ font-size:10px}

strong{ font-weight:bold}
p{ line-height:18px; color:#fff; margin-bottom:10px; font-size:14px}
a{ color:#fff; font-weight:bold}
a:hover{ text-decoration:none; color:#75BD29}

h1{ display:none}
h2{ font-size:18px; letter-spacing:-1px; margin-bottom:5px}

ul{ margin-left:20px; padding-left:20px; list-style:disc}
li{ line-height:18px; color:#fff; font-size:14px}

.form-wrapper td{ padding:5px}

.half{ width:50%; float:left}
.half .inner{ padding:0 5px 0 0}
.right-half .inner{ padding:0 0 0 5px}
.col-img{ float:right; margin:30px -95px 5px 5px}
.spacer{ width:95px; height:205px; float:left; margin-top:30px}

.img-caption{ border:1px solid #999; padding:10px 5px}