/* -------------------------------------------------------------- 
Resets default browser CSS.
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body
{
	line-height: 1.5; 
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }


/* --------------------------------------------------------------
Hatech Gasdetectietechniek Styling
-------------------------------------------------------------- */

body
{
	height: 100%;
	background: #636363 url('../img/layout/background.jpg') repeat-y top center;
	font-family: Verdana;
	color: #002;
	font-size: 75%;
}

a { color: #009; text-decoration: underline; }
a:hover { color: red; }

table { margin-bottom: 1.4em; width:100%; }
th { font-weight: bold; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td { background: #e5ecf9; }
tfoot { font-style: italic; }
caption { background: #eee; }

em { font-style: italic; }

a.delete
{
	display: inline-block;
	width: 16px;
	height: 16px;
	background: transparent url( '../img/icons/delete_16.png' ) no-repeat top left;
}
a.delete span { display: none; }

a.editAmount
{
	display: inline-block;
	width: 16px;
	height: 16px;
	background: transparent url( '../img/icons/plus_16.png' ) no-repeat top left;
}
a.editAmount span { display: none; }


li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


table.normal th { background: #1A265B; color: white; padding: 4px 5px; white-space: nowrap; }
table.normal th.first { background: #1A265B url( '../img/layout/th_left.jpg' ) no-repeat top left!important; }
table.normal th.last { background: #1A265B url( '../img/layout/th_right.jpg' ) no-repeat top right!important; }
.altrow { background-color: #f0f0f0; }


.panel { position: relative; margin-bottom: 18px; }
.panel .content-wrapper { padding: 9px 0; }
.panel .caption { text-align: center; font-weight: bold; }
.panel .bottom { clear: left; }
.panel .clear { clear: left; }


.panel .a
{
	background: transparent url('../img/layout/rc_sub_topleft.png') no-repeat top left;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;
	position: absolute;
	z-index: -999;
}
.panel .b
{
	background: transparent url('../img/layout/rc_sub_topright.png') no-repeat top right;
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	position: absolute;
	z-index: -999;
}
.panel .c
{
	background: transparent url('../img/layout/rc_sub_bottomright.png') no-repeat bottom right;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 50%;
	position: absolute;
	z-index: -999;
}
.panel .d
{
	background: transparent url('../img/layout/rc_sub_bottomleft.png') no-repeat bottom left;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 50%;
	position: absolute;
	z-index: -999;
}
.panel .e
{
	background: transparent url('../img/layout/rc_middle.png') repeat-y top center;
	top: 25px;
	left: 0;
	right: 0;
	bottom: 25px;
	width: 100%;
	position: absolute;
	z-index: -1000;
}

.dropdown-header a
{
	background: white url('../img/buttons/dropdown_arrow_down.png') no-repeat center left;
	padding-left: 20px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	font-size: 150%;
	font-style: italic;
}
.dropdown-content .collapse-link
{
	background: white url('../img/buttons/dropdown_arrow_up.png') no-repeat center left;
	padding-left: 20px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	font-size: 150%;
	font-style: italic;
}


.panel .panel-section
{
	width: 50%;
	height: 126px;
	float: left;
	margin-bottom: 0px;
}
.wide .panel-section { width: 100%!important; }
.panel .panel-section .content-wrapper
{
	height: 72px;
	margin: 9px!important;
	padding: 18px!important;
	background: transparent url('../img/layout/box_topleft.png') no-repeat top left;
	/*
	background: red url('a../img/layout/box_bottomright.png') no-repeat bottom right;
	*/
}
.panel .panel-section .content-wrapper .image
{
	height: 60px;
	width: 60px;
	text-align: center;
	overflow: hidden;
	float: left;
	background: white;
	padding: 5px;
	border: solid #eee 1px;
	margin-right: 10px;
}
.panel .panel-section .content-wrapper .image .image-wrapper
{
	height: 60px;
	width: 60px;
	text-align: center;
	overflow: hidden;
}
.panel .panel-section .content-wrapper .image .image-wrapper img { height: 60px; }
.panel .panel-section .content-wrapper .title
{
	font-weight: bold;
	font-style: italic;
	margin-bottom: 9px;
	font-size: 100%;
}
.panel .panel-section .content-wrapper .title a { color: #444; text-decoration: underline; }
.panel .panel-section .content-wrapper .title a:hover { color: red; }
.panel .panel-section .content-wrapper .description
{
	margin-top: -27px;
	margin-bottom: -18px;
	margin-right: -18px;
	height: 72px;
	background: transparent url('../img/layout/box_bottomright.png') no-repeat bottom right;
}
.panel .panel-section .content-wrapper .description .text-wrapper
{
	margin-top: 27px;
	margin-bottom: 18px;
	margin-right: 18px;
	font-size: 80%;
	height: 60px;
	overflow: hidden;
}


.button-panel { margin: 18px 0; height: 27px; }
.button-panel .button
{
	height: 27px;
	border: none;
	background: white url( '../img/layout/button_wide.png' ) no-repeat top left!important;
	display: block;
	float: left;
	margin-right: 8px;
	text-align: center;
	text-decoration: none;
	color: white;
	font-weight: bold;
}
.button-panel .button:hover { color: red; }
.button-panel .last { margin-right: 0px!important; float: right; }
.button-panel .button span
{
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 4px 4px 0px 4px;
	background: transparent url( '../img/layout/button_right.png' ) no-repeat top right!important;
	text-align: center;
	color: white;
	font-weight: bold;
	white-space: nowrap;
}
.button-panel .button:hover span { color: red; }
.button-panel input.wide { width: 200px; }


select.update-cart-amount
{
	width: 4em;
}


.search-form
{
}
.search-form fieldset
{
	width: 400px;
	margin: auto;
}
.search-form legend
{
	display: none;
}
.search-form .search-form-input
{
	width: 300px;
}
.search-form .button
{
	width: 75px;
	height: 22px;
	font-size: 12px;
	background: transparent url( '../img/buttons/button_small_narrow.png' ) no-repeat top left;
	border: none;
	color: white;
	font-weight: bold;
}
.search-form a
{
}
.search-results table
{
	border: 1px solid #ccc;
}
.search-result-title-cell, .search-result-facet-cell
{
	padding: 9px 9px 2px 9px;
}
.search-result-link-cell
{
	padding: 2px 9px 9px 9px;
}
.search-result-title-cell
{
	font-weight: bold;
}
.search-result-facet-cell
{
	white-space: nowrap;
	color: #666;
	font-style: italic;
	text-align: right;
}
.search-result-link-cell a, .search-result-title-cell a
{
	text-decoration: none;
	color: black;
}
.search-result-link-cell a:hover, .search-result-title-cell a:hover
{
	color: red;
}
.search-result-noresults-cell
{
	text-align: center;
	font-style: italic;
}
.search-result-image-cell .image-wrapper
{
	text-align: center;
	overflow: hidden;
	width: 50px;
	height: 50px;
	border: 1px solid #ccc;
	background-color: white;
}
.search-result-image-cell .image-wrapper img
{
	height: 50px;
}
.facet-list, .facet-list ul
{
	list-style-type: none;
}
.facet-list li
{
	white-space: nowrap;
}
.facet-list .selected
{
	font-weight: bold;
}
.search-facet-list .button
{
	width: 200px;
	height: 27px;
	font-size: 12px;
	background: transparent url( '../img/buttons/button_wide.png' ) no-repeat top left;
	border: none;
	color: white;
	font-weight: bold;
	margin: auto;
	display: block;
}
.fancyTitle { font-weight: normal; color: #111; font-size: 1.5em; line-height: 1; margin-bottom: 1em; }



.index h3
{
	clear: left;
	font-weight: bold;
	font-size: 150%;
	margin-top: 36px;
	color: white;
	background: transparent url('../img/layout/navigation_background.png') repeat-x top left;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 8px;
}

.summary
{
	background: white url('../img/backgrounds/summary_topleft.png') no-repeat top left;
	width: 100%;
	height: 128px;
	margin-bottom: 18px;
}
.summary .content-wrapper
{
	padding: 18px;
	margin: 0!important;
	height: 92px;
	background: transparent url('../img/backgrounds/summary_bottomright.png') no-repeat bottom right;
}
.summary .image
{
	width: 75px;
	height: 75px;
	padding: 9px;
	float: left;
	background: white;
	border: solid #eee 1px;
	vertical-align: middle; /* center */
}
.summary .image .image-wrapper
{
	height: 75px;
	width: 75px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	text-align: center;
}
.summary .image img { height: 75px; }
.summary .title
{
	float: left;
	width: 375px;
	font-size: 150%;
	margin-bottom: 9px;
	margin-left: 9px;
}
.summary .title a { color: #444; text-decoration: underline; }
.summary .title a:hover { color: red; }
.summary .description { float: left; width: 500px; margin-left: 9px; }
.summary .add-to-cart-widget { white-space: nowrap; float: right; }
.summary .add-to-cart-widget .input { width: 20px; text-align: right; }
/*
.summary .add-to-cart-widget .button
{
	background: transparent url( '../img/buttons/button_80_narrow.png' ) no-repeat top left!important;
	font-size: 80%;
	width: 80px;
	height: 22px;
	padding: 2px 2px;
	color: white;
	font-weight: bold;
}
.summary .add-to-cart-widget .button:hover
{
	background: transparent url( '../img/buttons/button_80_narrow_hover.png' ) no-repeat top left!important;
}
*/

.product-summary { background: transparent!important; margin-bottom: 0!important; height: 110px!important; }
.product-summary .content-wrapper { background: transparent!important; padding: 9px!important; }


.product-view
{
}
.product-view .image, .news-image
{
	background: white;
	border: solid #eee 1px;
	padding: 9px;
	float: left;
	margin-right: 18px;
	margin-bottom: 9px;
	
	/* This is to prevent images that are too large from puching the document list and cart-button to the bottom */
	width: 175px;
	overflow: hidden;
}
.product-view .image img, .news-image img
{
	width: 100%;
}
.product-view .info
{
	margin-left: 220px;
}
.product-view .add-to-cart-widget
{
	white-space: nowrap;
	margin-bottom: 1em;
}
.product-view .add-to-cart-widget .input
{
	font-size: 90%;
	width: 2em;
	text-align: right;
}
/*
.product-view .add-to-cart-widget .button
{
	background: transparent url( '../img/buttons/button_80_narrow.png' ) no-repeat top left!important;
	font-size: 80%;
	width: 80px;
	height: 22px;
	padding: 2px 2px;
	color: white;
	font-weight: bold;
}
.product-view .add-to-cart-widget .button:hover
{
	background: transparent url( '../img/buttons/button_80_narrow_hover.png' ) no-repeat top left!important;
}
*/

.product-view .document-list
{
	list-style: none outside none;
	margin: 0;
	padding: 0;
}
.product-view .document-list li
{
	background: red;
	padding-left: 20px;
	background: white url( '../img/mime/unknown16.png' ) no-repeat top left;
}
.product-view .document-list .pdf
{
	background-image:url( '../img/mime/pdf16.png' );
}
.product-view .document-list .jpg
{
	background-image:url( '../img/mime/jpg16.png' );
}
.product-view .description
{
	clear: left;
}
.related-product-container
{
	padding: 5px;
	
	/* To make overflow look less messy */
	overflow: hidden;
	font-size: 80%;
}
.related-product .image
{
	width: 50px;
	height: 50px;
	padding: 9px;
	margin: 4px 9px;
	float: left;
	background: white;
	border: solid #eee 1px;
}
.related-product .image .image-wrapper
{
	width: 50px;
	height: 50px;
	overflow: hidden;
	text-align: center;
}
.related-product .image .image-wrapper img
{
	height: 50px;
}
.related-product .title
{
	margin-left: 86px;
	font-size: 125%;
	margin-bottom: 9px;
	margin-top: 3px;
}
.related-product .title a
{
	color: #444;
}
.related-product .description
{
	padding: 0px 9px;
	position: absolute;
	top: 41px;
	left: 83px;
}


.add-to-cart-form .button
{
	background: transparent url( '../img/buttons/button_80_narrow.png' ) no-repeat top left;
	font-size: 80%;
	width: 80px;
	height: 22px;
	padding: 2px 2px;
	color: white;
	font-weight: bold;
	border: none;
}
.add-to-cart-form .button:hover
{
	background: transparent url( '../img/buttons/button_80_narrow_hover.png' ) no-repeat top left;
}


.tube-letter-pager
{
	list-style-type: none;
	margin: 18px 0;
	padding: 0;
	width: 100%;
	height: 18px;
}
.tube-letter-pager li { display: inline; }
.tube-letter-pager li a
{
	float: left;
	width: 24px;
	text-align: center;
	font-weight: bold;
	font-size: 100%;
	text-transform: uppercase;
	text-decoration: none;
	color: black;
	border-right: 1px solid black;
}
.tube-letter-pager li a:hover { color: red; }


.product-set-item .config .header
{
	background: navy url('../img/layout/navigation_background.png') repeat-x top left;
	color: white;
	font-weight: bold;
	padding: 2px 5px;
	cursor: pointer; /* hand */
}
.product-set-item .config .header label { width: 100%; }
.product-set-item .config .content { background-color: #eee; display: none; }
.product-set-add-to-cart { position: relative; }
.product-set-add-to-cart .input
{
	font-size: 90%;
	width: 20px;
	text-align: right;
}

.product-set-item .config .static-content a span
{
	display: none;
}


.span-1, .span-5 { float: left; margin-right: 10px; }
.span-1  { width: 60px; }
.span-5  { width: 190px; }





.form-validation-error {
	background: yellow;
}
.form-validation-message {
	color: red;
	display: none;
}
#order-form legend
{
	display: none;
}
#order-form .control {
	margin-bottom: 9px;
	clear: left;
}
#order-form .control label {
	float: left;
	width: 200px;
	margin-right: 8px;
}
#order-form #OrderName,
#order-form #OrderCity,
#order-form #OrderCompany,
#order-form #OrderMail,
#order-form #OrderFaktuur {
	width: 200px;
}
/* these 2 don't need styling, but just a reminder that they exist
#order-form #OrderCountry
#order-form #OrderCopy
*/
#order-form #OrderPhone,
#order-form #OrderFax {
	width: 120px;
}
#order-form #OrderComment {
	width: 200px;
	height: 100px;
}

#order-form.view-only table,
#order-form.view-only table td
{
	border: 1px solid #000!important;
}




#container { height: 100%; width: 954px; margin: 0 auto; }


#header
{
	height: 136px;
	width: 100%;
	background: transparent url('../img/layout/header.png') no-repeat top left;
}


#navigation
{
	width: 100%;
	height: 45px;
	background: transparent url('../img/layout/navigation_background.png') repeat-x center left;
}
#menu ul
{
	margin: 0;
	padding: 0;
	margin-left: 18px;
}
#menu li
{
	display: block;
	float: left;
	width: 146px;
	position: relative;
	height: 31px;
	margin-right: 8px;
	padding-top: 6px;
	margin-bottom: 3px;
	background: transparent url('../img/layout/navigation_item_background.png') no-repeat top left;
}
#menu li.last
{
	margin-right: 0px;
}
#menu li:hover
{
	background: transparent url('../img/layout/navigation_item_background_hover.png') no-repeat top left;
}
#menu li a
{
	display: block;
	padding-top: 4px;
	text-align: center;
	color: white;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}


#breadcrumb { position: relative; }
#breadcrumb a { color: black; text-decoration: none; }
#breadcrumb a:hover { color: red; }
#breadcrumb .content-wrapper { margin: 9px 0 0 18px; }
#breadcrumb .separator
{
	background: white url( '../img/layout/breadcrumb_arrow.png' ) no-repeat center center;
	height: 9px;
	width: 5px;
	display: inline-block;
	margin: 0 4px;
}
#breadcrumb .separator span { display: none; }
#breadcrumb #sitemap-link { position: absolute; right: 18px; }


#sidebar { float: right; width: 258px; margin: 0px; }
#sidebar fieldset legend { display: none; }
#sidebar .panel { margin: 18px 18px 18px 0px; }
#sidebar .panel .content-wrapper { padding: 18px; }
#sidebar .search-form fieldset { width: auto!important; }
#sidebar .search-form .search-form-input { width: 165px; }
#sidebar .search-form .button
{
	width: 22px;
	height: 22px;
	background: transparent url( '../img/buttons/search_button.png' ) no-repeat top left;
	border: none;
}
#sidebar #shopping-cart h2
{
	width: 100%;
	height: 64px;
	background: transparent url( '../img/layout/cart_64x64.png' ) no-repeat top center;
}
#sidebar #calibration-gases h2, #sidebar #gasmasks h2 { text-align: center; font-size: 100%; font-weight: bold; }
#sidebar #product-spotlight h2
{
	width: 100%;
	height: 48px;
	background: white url( '../img/layout/spotlight_48x48.png' ) no-repeat top center;
}
#sidebar #shopping-cart h2 span, #sidebar #product-spotlight h2 span { display: none; }
#sidebar #shopping-cart td { font-size: 75%; }
#sidebar #shopping-cart p { text-align: center; }
#sidebar #shopping-cart hr { width: 40%; color: #ABABAB; margin-bottom: 9px; }
#sidebar #shopping-cart #checkout { text-align: center; }
#sidebar #shopping-cart #checkout .button { float: none; width: 80px; margin: auto; }
#sidebar #product-spotlight .item
{
	clear: left;
	margin-bottom: 9px;
	font-size: 75%;
	line-height: 14px;
}
#sidebar #product-spotlight .item .image
{
	float: left;
	width: 40px;
	height: 40px;
	padding: 5px;
	border: 1px solid #eee;
	background: white;
	margin-right: 9px;
}
#sidebar #product-spotlight .item .image .image-wrapper
{
	height: 40px;
	width: 40px;
	overflow: hidden;
	text-align: center;
}
#sidebar #product-spotlight .item .image .image-wrapper img { height: 40px; }
#sidebar #product-spotlight .item .title { font-weight: bold; }
#sidebar #product-spotlight .item .description { height: 42px; overflow: hidden; /* none */ }
#sidebar #product-spotlight .bottom { clear: left; }


#advanced-search-link
{
	margin-top: 4px;
	height: 22px;
	border: none;
	background: white url( '../img/buttons/button_sprite_narrow.png' ) no-repeat top left!important;
	display: block;
	text-align: center;
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-size: 90%;
	white-space: nowrap;
	width: 150px;
}
#advanced-search-link:hover { color: red; }
#advanced-search-link span
{
	display: inline-block;
	height: 100%;
	width: 100%;
	margin-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	background: transparent url( '../img/buttons/button_sprite_narrow.png' ) no-repeat top right!important;
	text-align: center;
	white-space: nowrap;
}



#content { margin-right: 258px; }
#content .content-wrapper { margin: 18px; }
#content h1 { display: none; }
#content h2
{
	font-size: 150%;
	margin-top: 9px;
	margin-bottom: 18px;
	font-weight: bold;
	color: #444;
}
#content p { margin-bottom: 1.5em; }


#footer { clear: both; background: #202C5C url('../img/layout/footer.jpg') repeat-y top center; }
#footer .content-wrapper
{
	width: 954px;
	height: 140px;
	margin: 0 auto;
}
#footer h2, #footer h3 { color: #8A8A8A; }
#footer h2
{
	font-size: 1.5em;
	margin-top: 0.5em;
	margin-bottom: 1.25em;
}
#footer h3
{
	font-size: 1em;
	font-weight: bold;
	margin-top: 1.5em;
}
#footer #contact-phone, #footer #contact-mail, #footer #contact-post
{
	width: 310px;
	float: left;
	margin-right: 0px;
	color: white;
}
#footer #contact-phone { margin-left: 18px; }


/* --------------------------------------------------------------
Some page specific styling
-------------------------------------------------------------- */

#advantages ul { list-style-type: none; margin: 0; padding: 0; width: 50%; float: left; }
#advantages ul li { background: white url('../img/layout/check_36x36.png') no-repeat top left; padding-left: 42px; margin-bottom: 1em; }

#brand-list { list-style: none inside none; margin: 0; padding: 0; }
#brand-list li { margin-bottom: 18px; }

#faq h2 { font-size: 125%; font-weight: bold; color: #444; }
#faq .faq-item { display: none; }
#faq .faq-section { padding-left: 64px; }
#faq #faq-section-1 { background: white url( '../img/layout/faq_1.png' ) no-repeat 6px 0px; }
#faq #faq-section-2 { background: white url( '../img/layout/faq_2.png' ) no-repeat 6px 0px; }
#faq #faq-section-3 { background: white url( '../img/layout/faq_3.png' ) no-repeat 6px 0px; }
#faq #faq-section-4 { background: white url( '../img/layout/faq_4.png' ) no-repeat 6px 0px; }
#faq #faq-section-5 { background: white url( '../img/layout/faq_5.png' ) no-repeat 6px 0px; }
#faq #faq-section-6 { background: white url( '../img/layout/faq_6.png' ) no-repeat 6px 0px; }


#detector-type .button { width: 180px; margin-right: 36px; }
#detector-type .last { margin-right: 10px!important; }
#detector-type #no-bio
{
	width: 78px;
	height: 27px;
	float: left;
	padding: 4px 0px;
	margin-right: 33px;
}

#tubelist-gasname-list { width: 225px; float: left; }
#tubelist-gasname-list h2
{
	font-size: 100%;
	font-weight: bold;
	font-style: italic;
	text-decoration: underline;
	margin-bottom: 2em;
}
#tubelist-gasname-list ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#tubelist-gasname-list a
{
	padding: 0px 3px;
	font-weight: bold;
	text-decoration: none;
	color: black;
	margin-bottom: 6px;
	display: block;
}
#tubelist-gasname-list a:hover { color: red; }
#tubelist-gasname-details
{
	float: left;
	width: 400px;
	margin-left: 20px;
	/* To align nicer with the 'select gas' header */
	padding-top: 6px;
}
#tubelist-gasname-details th { color: white; }
#tubelist-gasname-details .add-to-cart-widget { white-space: nowrap; }
#tubelist-gasname-details .add-to-cart-widget .input
{
	font-size: 90%;
	width: 20px;
	text-align: right;
}
/*
#tubelist-gasname-details .add-to-cart-widget .button
{
	font-size: 80%;
	padding: 2px 2px;
	color: white;
	font-weight: bold;
}
*/