body
{
padding: 0 0 0 0;
vertical-align: top;
}

/* get rid of those system borders being generated for A tags */
a:active
{
outline: none;
}

:focus
{
-moz-outline-style: none;
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable1
{
/* required settings */
position: relative;
overflow: hidden;
width: 99%;
height: 107px; /* custom decorations */;
border: 1px solid #ccc;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable1 .items1
{
/* this cannot be too large */
width: 20000em;
position: absolute;
clear: both;
height: 111px;
}

/* single scrollable item */
.scrollable1 img
{
float: left;
background-color: #fff;
padding: 2px;
border: 1px solid #ccc;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

/* active item */
.scrollable1 .active
{
border: 2px solid #000;
z-index: 9999;
position: relative;
}

.scrollable2
{
/* required settings */
	position: relative;
overflow: hidden;
width: 876px;
height: 164px; /* custom decorations */;
border: 1px solid #ccc;
}

.scrollable2 .items2
{
/* this cannot be too large */
	width: 20001em;
position: absolute;
clear: both;
}

/* single scrollable item */
.scrollable2 img
{
float: left;
margin: 20px 5px 20px 21px;
background-color: #fff;
padding: 2px;
border: 1px solid #ccc;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

/* active item */
.scrollable2 .active
{
border: 2px solid #000;
z-index: 9999;
position: relative;
}

/* this makes it possible to add next button beside scrollable */
.scrollable1
{
float: left;
top: 0px;
left: 0px;
}

.scrollable2
{
float: left;
top: 0px;
left: 0px;
}

.simple_overlay
{
/* must be initially hidden */
display: none; /* place overlay on top of other elements */;
z-index: 10000; /* styling */;
background-color: #333;
width: auto;
top: auto;
min-height: 200px;
border: 1px solid #666;
/* CSS3 styling for latest browsers */-moz-box-shadow: 0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}

/* close button positioned on upper right corner */
.simple_overlay .close
{
background-image: url('http://www.hoffmanamps.com/images2/close.png');
position: absolute;
right: -15px;
top: -15px;
cursor: pointer;
height: 35px;
width: 35px;
}

/* some styling for triggers */
#triggersLeft
{
float: left;
vertical-align: middle;
height: auto;
width: auto;
cursor: pointer;
}

#triggersRight
{
float: right;
text-align: center;
vertical-align: middle;
height: auto;
width: auto;
cursor: pointer;

}

#triggersCenter
{
margin-left: auto;
margin-right: auto;
float: none;
text-align: center;
vertical-align: middle;
height: auto;
width: auto;
cursor: pointer;
}

#triggers img
{
cursor: pointer;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

/* styling for elements inside overlay */
.details
{
font-size: 18px;
color: #fff;
width: auto;
text-align: center;
}

/* the large image. we use a gray border around it */
#img
{
border: 1px solid #666;
}

/* "next image" and "prev image" links */
.next, .prev
{
/* absolute positioning relative to the overlay */
	position: absolute;
top: 10%;
border: 1px solid #666;
cursor: pointer;
display: block;
padding: 10px 20px;
color: #fff;
font-size: 11px; /* upcoming CSS3 features */;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.prev
{
left: 0;
border-left: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
}

.next
{
right: 0;
border-right: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-top-right-radius: 0;
}

.next:hover, .prev:hover
{
text-decoration: underline;
background-color: #000;
}

/* when there is no next or previous link available this class is added */
.disabled
{
visibility: hidden;
}

/* the "information box" */
.info
{
position: absolute;
bottom: 0;
left: 0;
padding: 0px 15px 0px 15px;
color: #fff;
font-size: 11px;
border-top: 1px solid #666;
}

.info strong
{
display: block;
}

/* progress indicator (animated gif). should be initially hidden */
.progress
{
position: absolute;
top: 45%;
left: 50%;
display: none;
}

/* everybody should know about RGBA colors. */
.next, .prev, .info
{
background: #333 !important;
background: rgba(0, 0, 0, 0.6) url('http://www.hoffmanamps.com/images2/h80.png') repeat-x;
}

/* main vertical scroll */
#main
{
position: relative;
overflow: hidden;
height: 204px;
top: 0px;
left: 0px;
width: 983px;
}

/* root element for pages */
#pages
{
position: absolute;
height: 20001.4em;
width: 1028px;
top: 0px;
left: 0px;
}

/* single page */
.page
{
height: 207px;
width: 990px;
}

/* root element for horizontal scrollables */
.scrollable
{
position: relative;
overflow: hidden;
width: 510px;
height: 433px;
}

/* root element for scrollable items */
.scrollable .items
{
width: 20000em;
position: absolute;
clear: both;
}

/* single scrollable item */
.item
{
border: thin #000000;
float: left;
cursor: pointer;
width: 220px;
height: 200px;
}

/* main navigator */
#main_navi
{
float: left;
padding: 0px !important;
margin: 0px !important;
width: 215px;
height: 1309px;
}

#main_navi li
{
background-color: #595959;
border-top: 1px solid #666;
clear: both;
color: #00FFFF;
font-size: 12px;
height: 130px;
list-style-type: none;
padding: 10px;
width: 190px;
cursor: pointer;
}

#main_navi li.active
{
background-color: #A2A2A2;
}

#main_navi li:hover
{
background-color: #000000;
}

#main_navi img
{
float: left;
margin-right: 10px;
}

#main_navi strong
{
display: block;
}

#main div.navi
{
margin-left: 6px;
cursor: pointer;
}

/* DEPRECATED FILE */
/* this makes it possible to add next button beside scrollable */
div.scrollable
{
float: left;
top: 0px;
left: 0px;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage
{
display: block;
width: 18px;
height: 18px;
background: url('http://www.hoffmanamps.com/images2/left.png') no-repeat;
float: left;
cursor: pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover
{
background-position: 0px -18px;
}

/* disabled navigational button */
a.disabled
{
visibility: hidden !important;
}

/* next button uses another background image */
a.next, a.nextPage
{
background-image: url('http://www.hoffmanamps.com/images2/right.png');
clear: right;
}

/*********** navigator ***********/
/* position and dimensions of the navigator */
div.navi
{
width: 420px;
height: 20px;
float: left;
}

/* items inside navigator */
div.navi a
{
width: 8px;
height: 8px;
float: left;
margin: 3px;
background: url('http://www.hoffmanamps.com/images2/navigator.png') no-repeat 0 0;
display: block;
font-size: 1px;
}

/* mouseover state */
div.navi a:hover
{
background-position: 0 -8px;
}

/* active state (current page state) */
div.navi a.active
{
background-position: 0 -16px;
}

/* prev, next, prevPage and nextPage buttons */
a.browse
{
background: url('http://www.hoffmanamps.com/images2/arrows.png') no-repeat;
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
}

/* right */
a.right
{
background-position: 0 -20px;
clear: right;
}

a.right:hover
{
background-position: -20px -20px;
}

a.right:active
{
background-position: -40px -20px;
}

/* left */
a.left
{
}

a.left:hover
{
background-position: -20px 0;
}

a.left:active
{
background-position: -40px 0;
}

/* up and down */
a.up, a.down
{
background: url('http://www.hoffmanamps.com/images2/vert_large.png') no-repeat;
float: none;
margin: 10px 50px;
}

/* up */
a.up:hover
{
background-position: -30px 0;
}

a.up:active
{
background-position: -60px 0;
}

/* down */
a.down
{
background-position: 0 -30px;
}

a.down:hover
{
background-position: -30px -30px;
}

a.down:active
{
background-position: -60px -30px;
}

/* disabled navigational button */
a.disabled
{
visibility: hidden !important;
}

/* remove margins from the image */
.items1 img
{
margin: 0;
width: auto;
height: 100px;
}

/* make A tags our floating scrollable items */
.items1 a
{
display: block;
float: left;
height: auto;
}

/* tooltip styling */
#tooltip
{
display: none;
background: url('http://www.hoffmanamps.com/images2/black_arrow_bottom2.png');
font-size: 10px;
height: 75px;
width: 194px;
padding: 20px 20px 20px 20px;
color: #fff;
text-align: center;
}

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion
{
background: #EBEBEB 0 0;
width: auto;
border: 1px solid #333;
-background: #666;
}

/* accordion header */
#accordion h2
{
background: #ccc;
margin: 0;
padding: 4px 4px;
font-size: 10pt;
font-weight: bold;
border: 1px solid #fff;
border-bottom: 1px solid #ddd;
cursor: pointer;
}

/* currently active header */
#accordion h2.current
{
cursor: default;
background-color: #FFFF5B;
}

/* accordion pane */
#accordion div.pane
{
border: 1px solid #fff;
border-width: 0 2px;
display: none;
height: auto;
padding: 4px;
color: #000000;
font-size: 10pt;
}

/* a title inside pane */
#accordion div.pane h3
{
font-weight: normal;
margin: 0 0 -5px 0;
font-size: 10pt;
color: #999;
}