body
{
    font-size :12px;
	color:#000;
	font-family:  Arial, Tahoma, "Lucida Grande", "Lucida Sans", sans-serif;
	margin:0;
	padding:0;
	background: #ffffff url(images/bg.jpg) repeat-x;  
	/* background-color: #d3d3d3 ; */
	
}
table.prod {
	background-color: white;
}
table.prod th 
{
	padding: 5px;
	background:#dff4f4 !important;
	color:#000000;
    border-top:solid 1px #3399ff;
    border-bottom:solid 1px #3399ff;
    text-align:left;

}
table.prod td {
	padding: 5px;
	background-color: white;
	color:#000000;
    border-top:solid 1px #3399ff;
    border-bottom:solid 1px #3399ff;

}

h1
{
	font-size:18pt;
}
a
{
    color:#dddddd;
  	text-decoration:none;
}
a:hover
{
    color:#ffffff;
	text-decoration: none;
}


.toughteam a
{
    color:#000000;
  	text-decoration:none;
}
.toughteam a:hover
{
    color:#333333;
	text-decoration:underline;
}


.hpproducts a
{
	font-weight:bold;
    color:#000000;
  	text-decoration:none;
}
.hpproducts a:hover
{
	font-weight:bold;
    color:#0F8B2D;
	text-decoration:none;
}



.footer a
{
    color:#ffffff;
  	text-decoration:none;
}
.footer a:hover
{
    color:#000000;
	text-decoration: underline;
}
.footer_footer a
{
    color:#96aebe;
  	text-decoration:none;
}
.footer_footer a:hover
{
    color:#000000;
	text-decoration: underline;
}

.top_center
{
    background-color:#96aebe; 
    height:15px;
    font-size :8pt;
}
.top_footer
{
    background:#5e686e url(images/bg_top.jpg) repeat-x;
}

.menu
{
    height:20px; 
    font-size :9pt; 
    color:#dddddd;
    width:100%;
}
.menu_left
{
  width:5px;
  background-image:url(images/bg_menu_left.jpg);
}
.menu_right
{
  width:5px;
  background-image:url(images/bg_menu_right.jpg);
}
.menu_center
{
  background:#5e686e url(images/bg_menu_center.jpg) repeat-x;
  text-align:center;
}

.middle2_left
{
width:62px;
background:#ffffff url(images/bg_middle2_left.jpg) repeat-y;
}
.middle2_right
{
width:62px;
background:#ffffff url(images/bg_middle2_right.jpg) repeat-y;
}


.middle_center
{
 background:#ffffff url(images/bg_middle_center.jpg) repeat-x;
 width:100%;
}




.main_wrap
{
  margin: 0px auto 0px auto;
  width: 900px;
 /* background: #5e686e;*/
  color:#000;
   position: relative;
  z-index: 20;
 padding:0px 0px 0px 0px;
}

.title_center a
{
    color:#0F8B2D;
  	text-decoration:none;
}
.title_center a:hover
{
    color:#000000;
	text-decoration: underline;
}

.main_wrap_center a
{
    color:#0F8B2D;
  	text-decoration:none;
}
.main_wrap_center a:hover
{
    color:#000000;
	text-decoration: underline;
}


.main_copyright
{
    height:22px;
    text-align:center;
    font-size:8pt;
}


.menu_footer
{
    height:3px; 
    background-color:#c1ddf1;
}
img
{
	border:0px;
}
.clearfix:after
{
	content:".";
	display:block;
	clear:both;
	visibility: hidden;
	line-height:0;
	height:0;
}

.title
{
	width:100%;
	font-weight:bold;
	text-align:left;
	background-color:#61768a;
	/*background-color:#8999a9;*/
	color:#ffffff;
}


/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <div><ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
 *                  </li>
 *              </ul></div>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu1 {
background:#ffffff url(images/menu_m.png) repeat-x scroll 0 0;
	
	top: 0;
	left: 0;
	color: #ffffff;
	font-family: Arial, sans-serif, Verdana, Helvetica, ;
	font-size: 12px;
	line-height: 150%;
}

ul.menu1 
{
    background:#ffffff url(images/menu_m.png) repeat-x scroll 0 0;
	clear: both;
	float: none;
	cursor: pointer;
	z-index: 1;
	position: relative;
	width:100%;
		padding: 0px 10px;

}

div#menu1 ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	float: left;
	z-index: 2;
	position: relative;
}

div#menu1 li {
	position: relative;
	margin: 0px;
	padding: 0px;
	display: block;
	overflow: visible;
	float: left;  
	height: 30px;
	z-index: 3; 
}
/* menu::level1 */
div#menu1 li a {
	height: 30px;
	display: block;
	float: left;
	line-height: 30px;
	text-decoration: none;
	color: #646464;
	overflow: hidden;
	z-index: 4;
  position: relative;
}

div#menu1 li span {  
	color: #646464; 
	display: block;
	padding: 0 0 0 10px;
  background-repeat: no-repeat;
	background-position: 95% 0px;
	z-index: 6;
	position: relative;
}

div#menu1 li span.bg { 
	display: block;
  background: transparent url('images/menu_level1_item.png') repeat-x scroll 0pt 100%;
  padding: 0;
	height: 30px;
	z-index: 5;
	position: relative;
  float: left;
}

div#menu1 li.current {  
	font-weight: bold;
}

div#menu1 li.current ul {  
	font-weight: normal;
}

/* menu::level2 */
div#menu1 ul.menu1 ul {
	padding: 0px 0px 10px;
	background: transparent url('images/menu_dropdown_bg.png') no-repeat scroll 0pt 100%; 
	_background: transparent url('images/menu_dropdown_bg.gif') no-repeat scroll 0pt 100%;	
	left: -999em; 
	width: 165px;
	position: absolute;
	top: 30px;
}

div#menu1 li:hover ul, div#menu1 li.sfhover ul { 
	left: 0px; 
	z-index: 100;
	visibility: visible; 
}

div#menu1 li li { 
	width: 100%; 
	text-indent: 0px;
	float: none; 
	height: auto;
}

div#menu1 li li a, div#menu1 li li span.separator { 
	margin: 0px 1px;
	padding: 0px; 
	background: url('images/menu_level2_item.gif') no-repeat scroll 100% bottom;
	height: auto; 
	float: none; 
	display: block; 
	line-height: 25px; 
	width: 163px;
}

div#menu1 li li a.parent { 
	background: url('images/menu_level2_item_parent.gif') no-repeat scroll 100% bottom;
}

/* menu::level3 */
div#menu1 li ul ul { 
	margin: -31px 0pt 0pt 164px;
}

div#menu1 li:hover ul ul, div#menu1 li.sfhover ul ul { 
	border-top: 1px solid #ccc; 
}

div#menu1 li:hover ul ul, div#menu1 li.sfhover ul ul, div#menu1 li:hover ul ul ul, div#menu1 li.sfhover ul ul ul, div#menu1 li:hover ul ul ul ul, div#menu1 li.sfhover ul ul ul ul { 
	left: -999em; 
}
div#menu1 li li:hover ul, div#menu1 li li.sfhover ul, div#menu1 li li li:hover ul, div#menu1 li li li.sfhover ul, div#menu1 li li li li:hover ul, div#menu1 li li li li.sfhover ul { left: 0pt; z-index: 100; }

div#menu1 a:hover {
	color: #000;
}
div#menu1 span:hover {
	color: #000;
}
div#menu1 li ul span:hover {
	color: #000000;
}
 
 
 
 
 
 
 
 
 
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: -1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 108px;
    height: 150px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 1;
    display: none;
}

.jcarousel-prev {
    z-index: 1;
    display: none;
}



.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    /*background: #F0F6F9;
    border: 1px solid #346F97;*/
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 776px;
    padding: 0px 0px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 108px;
    height: 776px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  776px;
    height: 150px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  108px;
    height: 776px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 108px;
    height: 150px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
   /* background: #fff;
    color: #000;*/
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 75px;
    right: -30px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 75px;
    left: -30px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}


div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	float: right;
	width: 500px; 
}
div.content a, div.navigation a {
	text-decoration: none;
	color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: underline;
}
div.controls {
	margin-top: 5px;
	height: 23px;
}
div.controls a {
	padding: 5px;
}
div.ss-controls {
	float: left;
}
div.nav-controls {
	float: right;
}
div.slideshow-container {
	position: relative;
	clear: both;
	height: 700px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 500px;
	height: 700px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	width: 500px;
	height: 700px; /* This should be set to be at least the height of the largest image in the slideshow */
	line-height: 700px; /* This should be set to be at least the height of the largest image in the slideshow */
	text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {
	vertical-align:top;
	border: 1px solid #ccc;
}
div.download {
	float: right;
}
div.caption-container {
	position: relative;
	clear: left;
	height: 75px;
}
span.image-caption {
	display: block;
	position: absolute;
	width: 500px;
	top: 0;
	left: 0;
}
div.caption {
	padding: 12px;
}
div.image-title {
	font-weight: bold;
	font-size: 1.4em;
}
div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
}
div.navigation {
	/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 5px 10px 5px 0;
	list-style: none;
}
a.thumb {
	padding: 2px;
	display: block;
	border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
	background: #000;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {
	clear: both;
}
div.navigation div.top {
	margin-bottom: 12px;
	height: 11px;
}
div.navigation div.bottom {
	margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	background-color: #eee;
	text-decoration: none;
}
div.pagination span.current {
	font-weight: bold;
	background-color: #000;
	border-color: #000;
	color: #fff;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}