/*=======================================================
 CSS Document for Safety Zone
=======================================================*/

@import url("global.css");

.hidden { display: none; }
.show { display: block; visibility: visible; }

/*=============================================================
	Main layout
=============================================================*/

.wrapper { width: 100%; height: 100%; background: url('../images/core/bg-repeat.jpg') repeat 50% 0; display: block; }
.bg-wrap { width: 100%; height: 100%; background: url('../images/core/bg.jpg') repeat-x 50% 0; display: block; }
#container { width: 990px; height: auto; display: block; margin: 0 auto; background: transparent; clear: both; }
.wrapper:after, .bg-wrap:after, #container:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }
.popup #container { width: 600px; height: auto; display: block; padding: 0 10px; margin: 0 auto; }

/*=============================================================
	Product Search Box
=============================================================*/
#SearchBox{
	position:relative; top:1px; left:8px; width: 250px;
}
input.SearchBox {
	width:196px; font-size: 13px; height:20px; padding: 4px 10px 0 5px; color: #000; background: none!important; border: 0;
}
.SearchBtn {
	background: url('../images/core/schbtn.jpg') no-repeat 0 0; overflow: hidden!important; width: 35px; height:32px; display: inline; float: right; padding-left: 2px; text-align: center; font-weight:bold; color:#FFFFFF;
}
#SearchBox .SearchBtn:hover { background-position: -35px 0!important; }

/*=============================================================
	Left Panel
=============================================================*/

#left-panel { width: 230px; height: auto; float: left; display: inline; }
#logo { width: 220px; height: 190px; display: block; float: left; clear: both; }
.popup #logo { float: left; display: inline; width: 170px; height: 150px; clear: none!important; }
#contact-info { width: 205px; height: auto; padding: 0 25px 0 0; clear: both; float: left; margin: 15px 0 0 0; display: inline; }
#contact-info p { margin: 15px 0 0 0!important; font-size: 1.4em; line-height: 19px; color: #fff; text-align: right!important; }
#contact-info a { color: #edc921; text-decoration: none; }
#contact-info a:hover { color: #edc921; text-decoration: underline; }

/*product catalogue nav*/
#catalogue { width: 230px; height: auto; display: block; float: left; clear: both; }
#catalogue h2 { margin: 0; height: 34px; padding: 12px 25px 0 0; text-align: right; color: #f9d130; font-size: 1.7em; }
#catalogue ul { list-style: none!important; margin: 0!important; display: block; width: 230px; }
#catalogue ul li { width: 230px; height: 31px; padding: 0; background: url('../images/core/bg-subnav-li.gif') no-repeat 0 bottom; display: inline; float: left; clear: both; }
#catalogue ul li a { width:205px; height: 25px; padding: 5px 25px 0 0; color: #fff; font-size: 15px; float: left; display: block; text-align: right!important; text-decoration: none; }
#catalogue ul li a:hover, #catalogue ul li a.selected  { background: url('../images/core/bg-subnav-hover.gif') no-repeat 0 0; padding-right: 10px; width: 220px; color: #000!important; text-decoration: none; }

/*=============================================================
	Right Panel
=============================================================*/

#right-panel { width: 720px; height: auto; float: right; display: inline; padding: 50px 20px 20px 20px; }
h2#slogan { width: 320px; height: 30px; overflow: hidden; text-indent: -9999em; float: right; margin: 0; display: block; clear: both; }

/*main nav*/
ul#nav { list-style: none!important; width: 705px; height: 30px; display: inline; float: right; margin: 15px 0; padding: 10px 0; clear: both; }
* html ul#nav { margin-top:-35px }
ul#nav li { display: inline; margin: 0 10px 0 0; float: left; }
ul#nav a { height: 30px; overflow: hidden; text-indent: -9999em; display: block; float: left; }
ul#nav a:hover { background-position: 0 -30px!important; }
/*bg*/
a#navhome { background: url('../images/core/nav-home.gif') no-repeat 0 0; width: 75px; }
a#navabout { background: url('../images/core/nav-about.gif') no-repeat 0 0; width: 95px; }
a#navcatalogue { background: url('../images/core/nav-catalogue.gif') no-repeat 0 0; width: 185px; }
a#navspecials { background: url('../images/core/nav-specials.gif') no-repeat 0 0; width: 95px; }
a#navcontact { background: url('../images/core/nav-contact.gif') no-repeat 0 0; width: 95px; }
a#bookmark { background: url('../images/core/nav-bookmark.gif') no-repeat 0 0; width: 100px; }
/*on stage*/
body#home-page a#navhome, body#about-page a#navabout, body.catalogue-page a#navcatalogue, body#specials-page a#navspecials, body#contact-page a#navcontact { background-position: 0 -30px!important; }

/*flash-banner*/
.banner { position: relative; z-index: 10; width: 720px; display: block; margin: 0 0 15px 0; clear: both; background: url('../images/core/bg-banner.jpg') no-repeat 0 0; height: 210px; }
body#home-page .banner { background: none!important; height: 350px!important; }
#banner-homepage { position: absolute; z-index: 10; top: 0; right: 0; display: block; }

/*features*/
.features { position: relative; z-index: 20; width: 230px; height: 117px; padding: 15px; float: right; clear: both; display: block; margin: 17px 5px 0 0; background: url('../images/core/bg-featured.gif') no-repeat 0 0; }
.features img { width: 110px; height: 110px; display: inline; border: 3px solid #646464; line-height: 0; margin: 0 0 0 10px; background-color: #000; overflow: hidden; float: right; }
.borhover { border-color: #fff!important; }
.features h2 { font-size: 2em; height: 20px; margin: 0 0 18px 0; color: #5e5e5e; }
.features h3 { font-size: 1.4em; color: #fff; font-weight: normal; line-height: 17px; margin-bottom: 10px; }
.features a { width: 95px; height: 28px; overflow: hidden; display: block; background: url('../images/core/button-view.gif') no-repeat 0 0; text-indent: -9999em; text-decoration: none; }
.features a:hover { background-position: 0 -28px!important; text-decoration: none; }

/*=============================================================
	Main contents
=============================================================*/

#main-contents { width: 720px; height: auto; display: block; float: left; clear: both; }
body#home-page #main-contents { position: relative; z-index: 50; }
* html #main-contents { width: 700px; }
.text { padding: 0 20px; display: block; }
* html .text { height:500px; }
.popup .text { width: 380px; display: block; margin: 15px auto; clear: both; height: auto; }

/*listing*/
ul.listings { margin: 0 0 20px 0; list-style: none!important; width: 720px; height: auto; float: left; }
ul.listings li { text-align: center!important; font-size: 1em; width: 150px; height: 255px; overflow: hidden!important; display: inline; float: left; background-color: #f5f5f5; margin: 0 5px 10px 5px; border: 1px solid #e2e2e2; padding: 9px; }
#cats li { height: 235px; }
#cats li .product-thumb { margin-bottom: 10px; }
ul.listings li h2 { margin-bottom: 0; height: 45px; font-size: 1.5em; line-height: 16px; text-align: center!important; padding: 0; }
ul.listings li .product-thumb { width: 150px; height: 150px; overflow: hidden; background-color: #fff; vertical-align: middle!important; display:block; }
table.alignment { width: 150px; height: 150px; padding: 0; display: block; margin: 0 auto; text-align: center; }
table.alignment td { vertical-align: middle!important; padding: 0!important; width: 150px; height: 150px; display: block; margin: 0!important; text-align: center!important; }
ul.listings li .product-thumb td img { text-align: center!important; }
ul.listings li h3 { text-align: center; padding: 5px 0; margin: 0; clear: both; font-size: 1.4em; font-weight: normal; color: #da1921; }
ul.listings li a { display: block; width: 95px; height: 28px; margin: 0 auto; text-align: center; background: url('../images/core/button-view2.gif') no-repeat 50% 0; text-indent: -9999em; text-decoration: none; overflow: hidden; }
ul.listings li a:hover { background-position: 0 -28px!important; text-decoration: none; }

/*details page*/
.details-page h2, .details-page h3, .details-page p { text-align: justify; display: block; padding: 0 10px 5px 10px; border-bottom: 1px dotted #d2d2d2; }
.details-page h2 { color: #cc5106; }
.details-page h3 { color: #da1921; }
h3 span.normalise { color: #4f4f4f!important; font-weight: normal!important; }
.details-page em { font-style: normal!important; color: #666666; font-size: 0.9em; }
.details-page .image-gallery { float: right; display: block; width: 160px; margin-bottom: 10px; padding-left: 20px; background-color: #fff; }
.details-page .image-gallery a { width: 150px; height: auto; overflow: hidden!important; display: block; float: left; clear: both; background-color: #fff; margin-bottom: 10px; border: 3px solid #fff; text-decoration: none; }
.details-page .image-gallery img { margin: 0 auto; text-align: center; line-height: 0; }
.downloads { padding: 10px 15px; background-color: #f4f4f4; margin-bottom: 15px; display: block; }
.downloads a { background: url('../images/core/icon-pdf.gif') no-repeat 0 0; vertical-align: middle; font-size: 1.3em; padding-left: 25px; line-height: 25px; }
a.popup { clear: both; float: right; margin-bottom: 20px; display: block; width: 175px; height: 28px; background: url('../images/core/button-enquire.gif') no-repeat 0 0; text-indent: -9999em; text-decoration: none; overflow: hidden; }
a.popup:hover { background-position: 0 -28px!important; text-decoration: none; }

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

.footer-wrapper { width: 100%; height: 175px; padding: 0; background: url('../images/core/bg-footer.gif') repeat-x 50% 0; float: left; clear: both; }
#footer { width: 990px; height: auto; padding: 0; margin: 0 auto; display: block; }
#footer h2 { text-indent: -9999em; width: 900px; height: 25px; margin: 0 30px 25px 0; display: block; float: right; clear: both; }
#footer h3 { float: left; width: 250px; height: 30px; display: block; text-indent: -9999em; color: #fff; margin: 0; }
#footer p { font-size: 1.2em; float: left; display: inline-block; padding-top: 5px; color: #6f6f6f; }
#footer img#credits { float: right; margin: 0 15px 0 10px; display: inline; width: 110px; height: 30px; }
#footer a { color: #6f6f6f; text-decoration: none;}
#footer a:hover { color: #fff; text-decoration: underline;}


/*=======================================================
 End of CSS Document for 
=======================================================*/