@import url(layout.css);

body {
	margin: 0;
	font-family: Verdana, Tahoma, Arial; font-size: 13px;
	text-align: center;
	background: #EEE url(../images/bg.gif) repeat-x;
}

a { text-decoration: none; }
p { margin: 15px 0; text-align: justify; }
h1 { margin: 0; padding: 10px 0; font-size: 16px; font-weight: bold; color: #CF0202; }
h2 { margin: 0; padding: 10px 0; font-size: 13px; font-weight: bold; color: #000; }
h3 { color: #666; font-size: 13px; font-family: Arial, Sans Serif; font-style: italic; }
h3.nav { margin: 10px 0 0 10px; }
img { border: 0; }
img.right { float: right; margin: 15px 0 10px 20px; }
ul li { margin: 10px 0; list-style-image: url(../images/arrow.gif) ; }
ul.half { float: left; width: 180px; margin: 0 0 10px 30px; padding: 0; }
ul.half li { margin: 5px 0 5px 20px; padding: 0; }
span.dn { display: none; }
.cb { clear: both; }
.right { text-align: right; }

/********************************************* header section ***/

.search_box {
	width: 200px; height: 25px;
	margin: 5px 3px 0 0; padding: 6px 0 0 0;
	float: right;
	background: url(../images/bg_search.gif) no-repeat;
	text-align: left;
}

#searchbar a#bookmark	{ float:right; margin:10px 11px 0 0; color:#000; }
#searchbar a#bookmark:hover	{ color:#1B4B9A; }

input.search {
	width: 120px; height: 16px;
	float: left;
	margin: 0 0 0 5px;
	background: #FFF url(../images/bg_search_box.gif) no-repeat; color: #1B4B9A;
	border: 0;
	font-size: 11px;
}

a.logo {
	width: 305px; height: 74px;
	margin: 24px 0 0 0; padding: 0;
	display: block; float: left;
}

a.logo span { display: none; }

/********************************************* banners ***/

.b2 { background: url(../images/banner2.jpg) no-repeat; }
.b1 { background: url(../images/banners/nailers-and-staplers.jpg) no-repeat; }

/********************************************* nav ***/

#nav ul {
	margin: 10px 0; padding: 0;
	list-style-type: none;
	font-size: 11px;
}

#nav ul li {
	margin: 0; padding: 0;
	display: block;
	list-style-image: none;
}

#nav ul li.title {
	width: 201px; height: 16px;
	margin: 0; padding: 4px 0 0 0;
	background: #E7E7E7 url(../images/bullet_over.gif) no-repeat; color: #666;
	font-weight: bold; text-align: center;
}

#nav ul li a {
	width: 178px; height: 16px;
	margin: 0; padding: 4px 0 0 23px;
	display: block;
	background: url(../images/bullet.gif) no-repeat; color: #000;
	border-bottom: #FFF 1px solid;
}

#nav ul li a.blank, #nav ul li a:hover.blank { margin: 0; padding: 0; display: block; border: 0; background: none; }

#nav ul li a:hover, #nav ul li.on a {
	background: #E7E7E7 url(../images/bullet_over.gif) no-repeat; color: #CF0202;
}

.request {
	width: 149px; height: 100px;
	margin: 10px 0 0 0; padding: 0;
	background: url(../images/request.gif) no-repeat;
}

input.subscribe {
	width: 173px; height: 20px;
	margin: 0 0 5px 8px; padding: 3px 5px 0 5px;
	background: #FFF url(../images/bg_text_box.gif) no-repeat; color: #1B4B9A;
	border: 0;
	font-size: 11px;
}

input.subscribe_button {
	width: 71px; height: 20px;
	margin: 0 0 10px 8px;
	font-size: 10px; font-weight: bold;
	font-family: Verdana, Tahoma, Arial;
	background: #FFF url(../images/bg_subscr_button.gif) no-repeat; color: #E86426;
	border: 0;
	cursor:pointer;
}

p.request_info { margin: 24px 0 24px 8px; }

/********************************************* content area ***/

#content_main a { color: #CF0202; }
#content_main a:hover { color: #666; }

/********************************************* footer section ***/
#footer a { color: #666; }
#footer a:hover { color: #000; }
#footer ul {
	height: 18px;
	margin: 2px 0 5px 0; padding: 8px 0 0 0;
	list-style-type: none;
}

#footer ul li {
	margin: 0; padding: 0 10px;
	display: inline;
	border-right: #FFF 1px solid;
}

#footer ul li.end { border: 0; }
#footer ul li a { color: #000; }
#footer ul li a:hover { color: #666; }

img.credit { float: left; display: block; margin: 5px 0 0 0; }


ul.products { margin: 0; padding: 0; list-style-type: none; clear: both; }
ul.products li {
	margin: 0; padding: 0;
	display: inline;
}

ul.products li a {
	width: 70px; height: 50px;
	margin: 0 2px 0 0; padding: 0 3px;
	display: block; float: left;
	text-align: center;
}
ul.products li a:hover { color: #FFF; }
ul.products li a.end { margin: 0; }


.product_img, .product_info { float: left; margin: 0 0 15px 0; padding: 0; }
.product_img { width: 158px; height: 190px; clear: both; }
.product_info { width: 310px; height: 190px; }
.product_info p { margin: 0 0 15px 0; }

.contact_info { font-size: 11px; }
.tel { font-weight: bold; font-size: 18px; }


.contact_form { width: 280px; height: 240px; margin: 0 10px 0 0; padding: 0 0 10px 0; float: left; }
.contact_form dl dt { width: 90px; float: left; margin: 3px 0; padding: 0 6px 0 6px; color: #666; text-align: right; }
.contact_form dl dd { width: 160px; float: left; margin: 3px 0; padding: 0; }
.contact_form input.field, .contact_form textarea, .contact_form select { width: 150px; padding: 3px; border: #959595 1px solid; font-family: Verdana, Tahoma; font-size: 13px; }
.contact_form textarea { height: 80px; font-family: Verdana, Tahoma; font-size: 13px; }
.contact_form dl, fieldset, form { border: 0; margin: 0; padding: 0; }

.bg_main { background: #FFF; }
.bg_about { background: #FFF url(../images/about.jpg) no-repeat top center; padding: 120px 0 0 0; }
.bg_faq { background: #FFF url(../images/faq.jpg) no-repeat top center; padding: 120px 0 0 0; }

table.products { font-size: 11px; }
table.products tr td { vertical-align: top; text-align: center; }

.crossover {
	width: 720px; height: 60px;
	margin: 0; padding: 5px 0 0 0;
	clear: both;
	background: #EEE;
}
.crossover a {
	width: 360px; height: 50px;
	margin: 0; padding: 0;
	display: block; float: left;
}
.crossover a span { display: none; }
.crossover a.cross_wj { background: url(../images/cross-wj.gif) no-repeat; }
.crossover a.cross_es { background: url(../images/cross-es.gif) no-repeat; }
.crossover a.cross_ms { background: url(../images/cross-ms.gif) no-repeat; }
.crossover a:hover { background-position: 0 -50px; }