@charset "utf-8";
body { 
overflow-y: visible;
background-image : url(/2008/graphics/bkg.jpg); 
background-repeat : repeat-x; 
padding : 0; 
margin : 0; 
} 
#bodyDiv #contentContainer { 
width : 922px; 
} 
#contentContainer #bodyDiv { 
padding : 10px; 
font-family : Arial, Helvetica, sans-serif; 
font-size : small; 
} 
#bodyTileRight { 
width : 201px; 
float : left; 
border-right : 1px solid #ccc; 
} 
#bodyTileLeft { 
width : 335px; 
float : right; 
padding-left: 20px;
padding-right: 10px;
margin-left : 10px; 
border-left : 1px solid #ccc; 
} 

#bodyTileLeft  li {
list-style-image : url("/2008/graphics/tickli.jpg"); 
margin-bottom: 10px;
}

#bodyTileLeft h4{ 
color : #5c5b5b; 
font-family : Arial, Verdana, sans-serif; 
font-size : 22px; 
} 
#bodyTileLeft h5{ 
color : #5c5b5b; 
font-family : Arial, Verdana, sans-serif; 
font-size : 14px; 
} 
#header div.logo { 
margin-left : 40px; 
margin-right : 40px; 
margin-bottom : 20px; 
color : #444444; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
} 
#bodyTileRight div.leftbox { 
margin-left : 7px; 
margin-right : 7px; 
padding-top : 10px; 
color : #444444; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
} 
#bodyTileRight div.leftboxlink { 
margin-left : 2px; 
margin-right : 6px; 
padding-top : 10px; 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
text-decoration : underline; 
} 
#bodyTileRight a { 
margin-left : 2px; 
margin-right : 6px; 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
text-decoration : underline; 
border : none; 
} 
#bodyTileRight a img { 
margin-left : -7px; 
margin-right : 0; 
border : none; 
} 
#bodyTileLeft div.rightbox { 
margin-left : 7px; 
margin-right : 7px; 
padding-top : 10px; 
color : #444444; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
} 
#bodyTileLeft div.rightboxlink { 
padding-top : 10px; 
color : #ff8400; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
text-decoration : underline; 
} 
#bodyTileLeft a, a:visited { 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 16px; 
font-weight: bold;
text-decoration : underline; 
} 
#bodyTileLeft a:hover { 
color : #5c5b5b; 
font-family : Arial, Verdana, sans-serif; 
font-size : 16px; 
font-weight: bold;
text-decoration : underline; 
}
#bodyTileLeft a img { 
margin-left : 6px; 
margin-right : 0; 
border : none; 
} 
#menu2 a img { 
margin-left : 2px; 
margin-right : 6px; 
border : none; 
} 
#menu2 { 
width : 213px; 
float : left; 
border-right : 1px solid #ccc; 
} 
#menu { 
width : 175px; 
float : left; 
border-right : 1px solid #ccc; 
} 
#menu a:hover { 
font-weight : bold; 
color : #506273; 
text-decoration : none; 
} 
#menu a, a:visited { 
font-weight : normal; 
color : #506273; 
text-decoration : none; 
} 

#contentGeneral li { 
list-style-image : url("/2008/graphics/productsarrow3.jpg"); 
margin-top : 10px; 
color : #444444; 
font-family : Verdana, Arial, sans-serif; 
font-size : 11px; 
} 
#contentGeneral a img { 
margin-left : 2px; 
margin-right : 6px; 
border : none; 
} 
#contentTabs li.tabs { 
list-style-image : url("/2008/graphics/productsarrow3.jpg"); 
color : #444444; 
margin-top : 8px; 
margin-right : 10px; 
font-family : Verdana, Arial, sans-serif; 
font-size : 11px; 
} 
#contentTabs a img { 
margin-left : 2px; 
margin-right : 6px; 
border : none; 
} 
#contentMain li { 
list-style-image : url("/2008/graphics/productsarrow3.jpg"); 
margin-top : 10px; 
margin-right : 10px; 
color : #444444; 
font-family : Verdana, Arial, sans-serif; 
font-size : 11px; 
} 
#contentMain img { 
margin-left : 2px; 
margin-right : 6px; 
border : none; 
} 
#contentMain a, a:visited {
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 12px; 
font-weight : bold; 
text-decoration: underline; 
} 
#contentMain a:hover { 
color : #5c5b5b; 
font-family : Arial, Verdana, sans-serif; 
font-size : 12px; 
font-weight : bold; 
text-decoration: underline; 
}
#contentProducts li { 
list-style-image : url("/2008/graphics/productsarrow3.jpg"); 
margin-top : 10px; 
margin-right : 10px; 
color : #444444; 
font-family : Verdana, Arial, sans-serif; 
font-size : 11px; 
} 
#contentProducts a img { 
margin-left : 2px; 
margin-right : 6px; 
border : none; 
} 
#contentMain div.link a, a:visited a:hover { 
margin-left : 2px; 
margin-right : 6px; 
padding-left : 10px; 
padding-right : 12px; 
padding-top : 10px; 
color : #ff8400; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
text-decoration : underline; 
} 
#contentMain { 
width: 510px;
padding-left : 10px; 
} 
#contentGeneral a, a:visited a:hover { 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 12px; 
text-decoration : underline; 
} 
#contentProducts a, a:visited a:hover { 
margin-left : 2px; 
margin-right : 6px; 
padding-left : 10px; 
padding-right : 12px; 
padding-top : 10px; 
color : #ff8400; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
text-decoration : underline; 
} 
#overviewPg a, a:visited a:hover { 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 12px; 
text-decoration : underline; 
} 
#technicalPg a, a:visited a:hover { 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 12px; 
text-decoration : underline; 
} 
#documentationPg a, a:visited a:hover { 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 12px; 
text-decoration : underline; 
} 
#accessoriesPg a, a:visited a:hover { 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 12px; 
text-decoration : underline; 
} 
#samplePg a, a:visited a:hover { 
color : #00599e; 
font-family : Arial, Verdana, sans-serif; 
font-size : 12px; 
text-decoration : underline; 
} 
#contentProducts { 
padding-left : 190px; 
} 
#contentGeneral { 
padding-left : 225px; 
} 
#contentTabs { 
padding-left : 190px; 
} 
#dsLeft { 
background-image : url(/2008/graphics/main_ds_left.jpg); 
background-repeat : no-repeat; 
width : 946px; 
margin : auto; 
padding-left : 12px; 
background-position : left top; 
} 
#contentContainer { 
background-color : #ffffff; 
} 
#dsright { 
width : 934px; 
text-align : left; 
background-image : url(/2008/graphics/main_ds_right.jpg); 
background-position : right top; 
} 
h4 { 
font-size : 14px; 
margin-top : 0; 
color : #00599e; 
font-family : Trebuchet MS, Verdana, Arial, sans-serif; 
} 
h3 { 
font-size : 16px; 
margin-top : 0; 
color : #00599e; 
font-family : Trebuchet MS, Verdana, Arial, sans-serif; 
} 
h2 { 
font-size : 18px; 
margin-top : 0; 
color : #00599e; 
font-family : Trebuchet MS, Verdana, Arial, sans-serif; 
} 
h1 { 
margin-top : 0; 
padding-top : 0; 
color : #427bbe; 
font-family : "Myriad Pro", Verdana, Arial, sans-serif; 
font-size : 180%; 
} 
.smallPicRight { 
margin-left : 15px; 
} 
p { 
margin-top : 5px; 
margin-right : 5px; 
color : #444444; 
font-family : Verdana, Arial, sans-serif; 
font-size : 11px; 
} 
#footer { 
background-color : #ffffff; 
width : 922px; 
clear : both; 
} 
#footer p { 
margin-left : 20px; 
margin-right : 20px; 
margin-bottom : 10px; 
text-align : center; 
background-color : #dce4eb; 
padding-top : 15px; 
padding-bottom : 15px; 
color : #444444; 
font-family : Arial, Verdana, sans-serif; 
font-size : 11px; 
} 
#footer a, a:visited { 
text-decoration : none; 
color : #444444; 
}  
} 
#footer a:hover { 
text-decoration : underline; 
color : #444444; 
} 
hr { 
margin-left : 10px; 
margin-right : 10px; 
} 
input, textarea { 
background-color : #ffffff; 
border-bottom : 1px solid #c8d1d6; 
border-left : 1px solid #c8d1d6; 
border-right : 1px solid #c8d1d6; 
border-top : 1px solid #c8d1d6; 
color : #000000; 
font-family : Arial; 
font-size : 10px; 
} 
.comparisonTable { 
font-family : Arial, Helvetica, sans-serif; 
font-size : 12px; 
} 
.comparisonTable p, div { 
margin-top : 0; 
margin-bottom : 0; 
font-family : Arial, Helvetica, sans-serif; 
font-size : 12px; 
} 
.comparisonTable th { 
padding-top: 15px;
padding-bottom: 5px;
font-weight : bold; 
color : #003366; 
border-bottom-style : solid; 
border-bottom-width : 2px; 
border-bottom-color : #003366; 
text-align : left; 
} 
.borderLeft { 
border-left-width : 1px; 
border-left-style : solid; 
border-left-color : #003366; 
} 
.oddRow { 
background-color : #e8e8e8; 
} 
#nav { 
font-family : Arial, Helvetica, sans-serif; 
font-size : 12px; 
font-weight : bold; 
} 
#mainNavContainerDiv { 
background-image : url(/2008/graphics/topNavbg.png); 
background-repeat : repeat-x; 
} 
#topMenu { 
height : 46px; 
overflow : hidden; 
margin-top : 0; 
vertical-align : top; 
background-color : #efefef; 
background-image : url(/2008/graphics/topNavbg.png); 
background-repeat : repeat-x; 
} 
#topMenu a { 
color : #ffffff; 
text-decoration : none; 
padding-left : 0px; 
padding-right : 0px; 
position : relative; 
top : -4px; 
padding-top : 0px; 
padding-bottom : 0px; 
} 
#topMenu .active { 
padding-top : 11px; 
padding-bottom : 20px;
background-image : url(/2008/graphics/menuPointer.png); 
background-repeat : no-repeat; 
background-position : center top; 
} 
#topMenu td { 
background-image : url(/2008/graphics/seperator.png); 
background-repeat : no-repeat; 
background-position : 0 -3px; 
} 
#subNavContainerDiv { 
background-image : url(/2008/graphics/subnavbg.jpg); 
height : 30px; 
overflow : hidden; 
padding-right : 0; 
padding-bottom : 0; 
padding-left : 0; 
background-color : #efefef; 
background-repeat : repeat-x; 
} 
#subNavContainerDiv div { 
margin-top : 3px; 
} 
#subNavContainerDiv span { 
color : #999999; 
padding-right : 1.5em; 
padding-left : 1.5em; 
} 
#subNavContainerDiv span a, a:visited, a:hover { 
color : #666666; 
text-decoration : none; 
background-repeat : no-repeat; 
background-position : center center; 
font-weight : bold; 
} 
#subNavContainerDiv span a:hover { 
color : #376ba4; 
} 
.hideMe { 
display : none; 
} 
.showMe { 
display : block; 
} 

input.lupa {border: 0px;}

#header br {margin-top: 10px;}

#contentTabs br {margin-top: 0px;}

#menu img{
border: 0px;
}

#topMenu a, a:visited, a:hover {
font-weight : bold;
font-size: 12px; 
}

.loginButton {
position : relative; 
top : -22px; 
left: 140px;
}

#login
{
background: url(/2008/graphics/login_top.gif) no-repeat;
float:left;
}

#login h2
{
    color:#989898;
    font-weight:normal;
    font-size:26px;
}

#login .middle
{
background: url(/2008/graphics/login_middle.gif) repeat-y;
float:left;
margin-top:15px;
padding-left:25px;
}

#login .bottom
{
background: url(/2008/graphics/login_bottom.gif) no-repeat;
margin-bottom:15px;
clear:both;
}

#reg_middle
{
    float: left;
    width: 100%;
    padding-left:30px;
    background: url(/2008/graphics/registration_middle.gif) repeat-y;
}
#reg_bottom
{
    float:left;
    width:100%;
    height:26px;
    padding-left:30px;
    background: url(/2008/graphics/registration_bottom.jpg) no-repeat;
}

#registration {
    padding: 20px 0 30px 0;
    background: url(/2008/graphics/registration_top.jpg) no-repeat;
    width:462px;
    float:left;
}

#registration h2
{
    color:#989898;
    font-weight:normal;
    font-size:26px;
}

#registration .umbSignupError
{
margin-top: 38px; padding-right: 60px;
}

#registration table {
text-align: left;
margin-bottom: 10px;
}

#registration td{
padding-right: 20px;
color : #4372a6; 
font-family : Arial, Verdana, sans-serif; 
font-size : 15px; 
}

#SignUp_3_chkNewsLetter {
border: 0px;
}

#SignUp_3_chkShare {
border: 0px;
}

select {
border: 1px solid #bbbbbb;
}

#SignUp_3_txtEmail, #SignUp_3_txtUserName, #SignUp_3_country, #SignUp_3_txtPassword, #SignUp_3_txtPasswordAgain {
margin-left: 5px;
}

#SignUp_3_btnSignUp {
background-color : #4372a6;
border-bottom : 1px solid #ffffff;
border-left : 1px solid #ffffff;
border-right : 1px solid #ffffff;
border-top : 1px solid #ffffff;
color : #ffffff;
font-family : Arial;
font-size : 12px;
}

#fpNewsTable a{
font-weight:normal
}

div.lgpanel .lblUserName {
padding-left: 50px;
color : #4372a6; 
font-family : Arial, Verdana, sans-serif; 
font-size : 17px; 
}

div.lgpanel .lblPassword {
padding-left: 50px;
color : #4372a6; 
font-family : Arial, Verdana, sans-serif; 
font-size : 17px; 
}

div.lgpanel .btnLogin {
margin-left: 50px;
margin-top: 15px;
padding-left: 17px;
padding-right: 17px;
background-color : #4372a6;
border-bottom : 1px solid #ffffff;
border-left : 1px solid #ffffff;
border-right : 1px solid #ffffff;
border-top : 1px solid #ffffff;
color : #ffffff;
font-family : Arial;
font-size : 12px;
}

div.lgpanel .txtUserName {
margin-left: 15px;
}

div.lgpanel .txtPassword {
margin-left: 23px;
}


div.lgpanel
{    
padding-top: 10px;
width: 400px;
}


h6 {
float: right;
margin: 10px 10px 10px 10px;
}

h1 {
float: left;
margin: 10px 10px 10px 0;
}

#homeMenuLink, #productsMenuLink, #applicationsMenuLink, #supportMenuLink, #wheretobuyMenuLink, #newsandeventsMenuLink, #aboutusMenuLink, #downloadMenuLink{
margin-left: 20px;
margin-right: 20px;
}






/* POPBOX */

/* Sample PopBox CSS Classes */
/* PopBox.js, Copyright (c) 2007, C6 Software, Inc. (http://www.c6software.com/)*/

.PopBoxImageSmall
{
	border: none 0px #ffffff;
	cursor: url("/2008/images/magplus.cur"), pointer;
}
.PopBoxImageLarge
{
	border: none 0px #ffffff;
	cursor: url("/2008/images/magminus.cur"), pointer;
}
.PopBoxImageShrink
{
	cursor: url("/2008/images/magminus.cur"), pointer;
}
.PopBoxImageLink
{
	cursor: pointer;
}
.PopBoxImageMove
{
	border: none 0px #ffffff;
	cursor: pointer;
}


/* TABS */


/*
* This File: TAB_styles.css
* Contains all CSS declarations to visually format Accessible Tabs. Contains
* CSS 1.0 and 2.0 styles and is hidden from 4.0 and older browsers by being
* imported via the @import method.
*
* Version - Accessible Tabs: 1.0
* By Greg Burghardt
* greg_burghardt@yahoo.com
*/

/* Percentage font size prevents large leaps in size when resizing text in
* Internet Explorer-Win. */
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 80%;
}

/* Opera seems to size text too small when assigning the size in a percentage
* in the BODY element, so we'll give Opera a friendly size. */
html>body {
 font-size: .8em;
}

/* The UL element containing the tabs when JavaScript is enabled. */
.tabbedNavOn {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

/*************** Common styles for both .tabOff and .tabOn *****************/
.tabbedNavOn a {
 display: block;
}

.tabbedNavOn a:link,
.tabbedNavOn a:visited,
.tabbedNavOn a:active,
.tabbedNavOn a:hover,
.tabbedNavOn a:focus {
 text-decoration: none;
}

.tabbedNavOn a span {
 display: block;
}

.tabbedNavOn a span span {
 padding: .33em .75em;
}
/*************** End common styles for .tabOff and .tabOn ******************/

/* This class is a tab when it is not active. */
.tabOff {
 cursor: pointer;
 cursor: hand;
 display: block;
}

/* Non active Tab text color when in the visited and non visited states. */
.tabOff:link,
.tabOff:visited {
 color: #424141;
}

/* Non active tab background color & graphic when in the visited or non
* visited states. */
.tabOff:link span,
.tabOff:visited span {
 background: #ffffff url(/2008/images/off_left.gif) no-repeat scroll 0 0;
}

/* Non active tab's right background graphic when the tab is in a visited or
* non visited state. */
.tabOff:link span span,
.tabOff:visited span span {
 background: transparent url(/2008/images/off_right.gif) no-repeat scroll 100% 0;
}

/* Non active tab's text color in the active, focus, an hover states. */
.tabOff:active,
.tabOff:focus,
.tabOff:hover {
 color: #fff;
}

/* Non active tab's background color and left background graphic when in the
* active, focus and hover states. */
.tabOff:active span,
.tabOff:focus span,
.tabOff:hover span {
 background: #3D75B0 url(/2008/images/on_left.gif) no-repeat scroll 0 0;
}

/* Non active tab's background graphic when in the active, focus and hover
* states. */
.tabOff:active span span,
.tabOff:focus span span,
.tabOff:hover span span {
 background: transparent url(/2008/images/on_right.gif) no-repeat scroll 100% 0;
}

/* This class is a tab that is switched "on" */
.tabOn {
 cursor: default;
 display: block;
}

/* Active tab text color when in the visited and non visited states. */
.tabOn:link,
.tabOn:visited,
.tabOn:active,
.tabOn:hover {
 color: #00599E;
}

/* Active tab background color & graphic when in the visited, non visited,
* active, and hover states. */
.tabOn:link span,
.tabOn:visited span,
.tabOn:active span,
.tabOn:hover span {
 background: transparent url(/2008/images/act_left.gif) no-repeat scroll 0 0;
}

/* Active tab's right background graphic when in the visited, non visited,
* active, and hover states. */
.tabOn:link span span,
.tabOn:visited span span,
.tabOn:active span span,
.tabOn:hover span span {
 background: transparent url(/2008/images/act_right.gif) no-repeat scroll 100% 0;
}

/* The active tab when it has the system focus. */
.tabOn:focus {
 color: #00599E;
}

/* The active tab's BG color & graphic when it has the system focus. */
.tabOn:focus span {
 background: #EDEDE url(/2008/images/act_left.gif) no-repeat scroll 0 0;
}

/* The active Tab's right BG graphic when it has the system focus. */
.tabOn:focus span span {
 background: transparent url(/2008/images/act_right.gif) no-repeat scroll 100% 0;
}

.tabbedNavOn li {
 float: left;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
}

/* Tab boxes when JavaScript is disabled. */
.tabBox {
 font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
 font-size: 1.25em;
}

.tabBox .tabBoxNav {
 display: none;
}

/* Hide the tab boxes when they are turned off. */
.tabBoxOff {
 display: none;
}

/* The tab box is switched "on" */
.tabBoxOn {
background-image: url(/2008/images/bordertop.png);
background-repeat: no-repeat;
 background-color: #ffffff;
 margin-top: -0.6em;
 
 
}

/* Padding and borders around the tab content. */
.tabBoxOn .tabBoxGutter {
background-image : url(/2008/images/left.gif);

margin : auto;
padding-left : 12px;
background-position : left top;
border-top: 0px solid #C2C2C2;
 border-left: 0px solid #C2C2C2;
 border-right: 2px solid #C2C2C2;
 border-bottom: 2px solid #C2C2C2;
 padding: 0 12px;
 
}

/* The tab's bottom text links for Next and Previous */
.tabBoxOn .tabBoxNav {
 background-color: #ffffff;
 display: block;
 margin: 0;
 padding: .33em 5px 0 5px;
}

/* The tab's bottom text links when the link is visited and non visited. */
.tabBoxOn .tabBoxNav a:link,
.tabBoxOn .tabBoxNav a:visited {
 color: #fff;
 text-decoration: none;
}

/* The tab's bottom text links when the link is active, hovered on, or has
* the system focus. */
.tabBoxOn .tabBoxNav a:active,
.tabBoxOn .tabBoxNav a:hover,
.tabBoxOn .tabBoxNav a:focus {
 color: #fff;
 text-decoration: underline;
}

/* Gap below the tab's bottom links, and the bottom of the tab box. */
.tabBoxOn .tabBoxNav .tabSpacer {
 height: .33em;
}

.tabBoxOn .tabBoxNavLeft {
 float: left;
 padding-right: 5px;
}

.tabBoxOn .tabBoxNavRight {
 float: right;
 padding-left: 5px;
}

/* When JavaScript is disabled, hide the link to jump back to the tabs. */
.tabOptionsOff {
 display: none;
}

/* The link to jump back to the tabs when JavaScript is enabled. */
.tabOptionsOn {
 margin: 0;
}

.tabOptionsOn a {
 margin: -1.5em 0 0 0;
 position: absolute;
 text-align: center;
 width: 100%;
}

.tabOptionsOn a:link,
.tabOptionsOn a:visited {
 color: #fff;
 z-index: -1;
}

.tabOptionsOn a:active,
.tabOptionsOn a:focus,
.tabOptionsOn a:hover {
 color: #fff;
 z-index: 1;
}

/* Spacer DIV under the tabs when JavaScript is disabled. */
.tabSpacerOff {
 display: none;
}

/* Spacer DIV under the tabs when JavaScript is enabled. The 1px font size
* fixes an IE-Win bug that sizes the height too high in certain cases. */
.tabSpacerOn {
 background-color: #c60;
 clear: both;
 font-size: 1px;
 height: 0px;
 overflow: hidden;
 width: 350px; /* Width required by Safari and IE5-Mac */
}

/* The DIV tag that encapsulates one entire tab structure. */
.tabWrapper {
 position: relative;
 width: 700px;
}



/* ENQYERY FORM */


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

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

/* These are the classes applied on the messages
 * (required message and invalid state message)
 * which prevent them from being displayed by default.
 */ 
.selectRequiredMsg, .selectInvalidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states (required, invalid).
 * These classes set a default red border and color for the error text.
 * The state class (.selectRequiredState or .selectInvalidState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg {
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

/* The next three group selectors control the way the core element (SELECT) looks like when the widget is in one of the states: 
 * focus, required / invalid, valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the SELECT
 * - the widget id is placed on the SELECT element itself (there are no error messages)
 */
 
/* When the widget is in the valid state the SELECT has a green background applied on it. */
.selectValidState select, select.selectValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the SELECT has a red background applied on it. */
select.selectRequiredState, .selectRequiredState select,
select.selectInvalidState, .selectInvalidState select {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the SELECT has a yellow background applied on it. */
.selectFocusState select, select.selectFocusState {
	background-color: #FFFFCC;
}


/* ENQYERY FORM */

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

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


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText{
	color: red !important;
}