/*========= SUPERMENU STYLES =========*/
.supermenu, .supermenu * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.supermenu {
    line-height:    1.0;
	position:relative;
}
.supermenu ul {
    position:        absolute;
    top:            -999em;
    width:            10em; /* left offset of submenus need to match (see below) */
}
.supermenu ul li {
    width:            100%;
}
.supermenu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.supermenu li {
    float:            left;
    position:        relative;
}
.supermenu a {
    display:        block;
    position:        relative;
    background-color:#D5FFFF;
}
.supermenu li:hover ul,
.supermenu li.sfHover ul {
    left:            0;
    top:            auto; /* match top ul list item height */
    z-index:        99;
}
ul.supermenu li:hover li ul,
ul.supermenu li.sfHover li ul {
    top:            -999em;
}
ul.supermenu li li:hover ul,
ul.supermenu li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}
ul.supermenu li li:hover li ul,
ul.supermenu li li.sfHover li ul {
    top:            -999em;
}
ul.supermenu li li li:hover ul,
ul.supermenu li li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}
/*** adding sf-vertical in addition to supermenu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
	top:	0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** arrows **/
.supermenu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			0.2em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			4px;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.supermenu ul .sf-sub-indicator { background-position:  -10px 0; }
.supermenu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.supermenu ul a:focus > .sf-sub-indicator,
.supermenu ul a:hover > .sf-sub-indicator,
.supermenu ul a:active > .sf-sub-indicator,
.supermenu ul li:hover > a > .sf-sub-indicator,
.supermenu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*========= EINDE SUPERMENU STYLES =========*/
/*========= ACCORDEONMENU STYLES =========*/

ul.accmenu li ul{
	
}

/*========= EINDE ACCORDEONMENU STYLES =========*/

/*========= PORTFOLIO STYLES =========*/
#portfolio{
	display:none;
}
#portfolioslidewrap{
	width:470px;
	height:200px;
	overflow:hidden;
	position:relative;
}
#portfolioslide{
	position:absolute;
}
#portfolionumbers{
	display:block;
	height:25px;
	width:470px;
	background-color:#EFEFEF;
}
#portfolionumbers a{
	display:block;
	padding:0 8px;
	height:25px;
	line-height:25px;
	float:left;
	border-right: 1px solid #FFF;
	background-color:#EFEFEF;
	color:#494B4F;	
}
#portfolioinfo{
	width:448px;
	padding:10px;
	margin-bottom:15px;
	border-top: 1px none #DADADA;
	border-right: 1px solid #DADADA;
	border-bottom: 1px solid #DADADA;
	border-left: 1px solid #DADADA;
}
#portfolioheader{
	clear:both;
}
#portfolioheader h2{
	float:left;
}

#portfolioheader h3{
	float:left;
	font-size:1.4em;
}
#portfoliodescription{
	clear:both;
}


/*========= EINDE PORTFOLIO STYLES =========*/

/*========= MAGNIFIER STYLES =========*/
#dio-lens{
	border:1px solid #000;
	z-index: 10000;
}

#dio-sensor{
	z-index: 11000;
	cursor:crosshair;
}

#dio-loader{
	background:#fff url('../img/preloader.gif') no-repeat center 40px;	
	text-indent:-30000px;
}

/*========= EINDE MAGNIFIER STYLES =========*/

@charset "UTF-8";

/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container. *
 */
.Accordion {
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 */
.AccordionPanelTab {
	margin: 0px;
	padding: 3px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	color:#333;
	border-top-width: 1px;
	border-bottom-width: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCC;
	border-bottom-color: #CCC;
	font-weight: bold;	
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	margin: 0 0 0 3px;
	padding: 0px;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	color:#5e6163;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	color:#5e6163;
}
.AccordionPanelOpen .AccordionPanelTabHover {
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {

}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {



}

.FaqCategorySection
{
    font-weight: bold;
}