/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/* -------------------------------------------------------------- 
   
   layout.css
   * Sets up basic page elements.
   
-------------------------------------------------------------- */

html {
	background-color:#000000;
	color: #fcf7dc;
	background-attachment: fixed;
	background-image: url(/images/elements/body/bg_tile.jpg);
	background-repeat: repeat-x;
}

/* @group global Layout */

/* @group footer navigation */

#footer a {
width: 300px !important;
}

#footer a.monkeypower,  a.monkeypower:link:visited:active:hover {
	display: none;
}


#footer p.copyright {
	position: relative;
	display: block;
	color:#ab8a5b;
	text-decoration: none;
	font-size: 70%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	text-transform:capitalize !important;
	text-align: center;
}


/* @end */

/* @group navigation */

div#nav {
    font-size: 0.8em;
	overflow:hidden;
	margin-top: 0px;
	margin: 0 auto;
}

* html div#nav {
    /* hide ie/mac \*/
    height: 29px;
    /* end hide */
}

/* HEADER */
#nav  { width: 100%; height: 29px; margin: 0px auto;  }
#nav { margin: 0; padding: 0; padding-left: 0px; }
#nav li { display: inline; text-indent: -9999px; font-size: 0; }
#nav li a { float: left; width: 116px; height: 0; padding-top: 29px; overflow: hidden; margin-left: 0; }
#nav li a {
	background-image: url(/images/elements/nav/menu_strip_v2.png);
	background-repeat: no-repeat;
	outline: none;
}

#nav li a:focus
{
  -moz-outline-style: none;
}


/* BUTTONS */
#n_home a { background-position: 0 0; }
#n_retail-cafes a { background-position: -116px 0; }
#n_catering a { background-position: -232px 0; }
#n_wholesale a { background-position: -348px 0; }
#n_about a  { background-position: -464px 0; }
#n_contact a  { background-position: -580px 0; }
#n_employment a  { background-position: -696px 0; }

/* OVER STATES */
#n_home a:hover { background-position: 0 -29px; }
#n_retail-cafes a:hover { background-position: -116px -29px; }
#n_catering a:hover { background-position: -232px -29px; }
#n_wholesale a:hover { background-position: -348px -29px; }
#n_about a:hover  { background-position: -464px -29px; }
#n_contact a:hover  { background-position: -580px -29px; }
#n_employment a:hover  { background-position: -696px -29px; }

/* PRESSED STATES */
#n_home a:active { background-position: 0 -58px; }
#n_retail-cafes a:active { background-position: -116px -58px; }
#n_catering a:active { background-position: -232px -58px; }
#n_wholesale a:active { background-position: -348px -58px; }
#n_about a:active  { background-position: -464px -58px; }
#n_contact a:active  { background-position: -580px -58px; }
#n_employment a:active  { background-position: -696px -58px; }

/* ON STATES */
#home #n_home a, #home #n_home a:hover, #home #n_home a:active { background-position: 0 -87px !important; cursor: default; }
#retail-cafes #n_retail-cafes a, #retail-cafes #n_retail-cafes a:hover, #home #n_retail-cafes a:active { background-position: -116px -87px !important; cursor: default; }
#catering #n_catering a, #catering #n_catering a:hover, #catering #n_catering a:active { background-position: -232px -87px !important; cursor: default; }
#wholesale #n_wholesale a, #wholesale #n_wholesale a:hover, #wholesale #n_wholesale a:active { background-position: -348px -87px !important; cursor: default; }
#about #n_about a, #about #n_about a:hover, #about #n_about a:active { background-position: -464px -87px !important; cursor: default; }
#contact #n_contact a, #contact #n_contact a:hover, #contact #n_contact a:active { background-position: -580px -87px !important; cursor: default; }
#employment #n_employment a, #employment #n_employment a:hover, #employment #n_employment a:active { background-position: -696px -87px !important; cursor: default; }

#locations #n_retail-cafes a, #locations #n_retail-cafes a:hover, #locations #n_retail-cafes a:active { background-position: -116px -87px !important; cursor: default; }
#banquets-meetings #n_retail-cafes a, #banquets-meetings #n_retail-cafes a:hover, #banquets-meetings #n_retail-cafes a:active { background-position: -116px -87px !important; cursor: default; }


/* End Nav */

#nav ul {
	position:relative;
	float:left;
	list-style:none;
	margin:0px;
	padding:0px;
}

#manual_nav {
	position:relative;
	float:left;
	list-style:none;
	margin:0px;
	padding:0px;
	width:812px;
	background:#000000;
	border-bottom: 1px solid #8f6724;
}
	
#manual_nav li {
	position:relative;
	float:left;
	text-align:center;
	font-family: "Arial Narrow";
}

#manual_nav li a, #manual_nav li a:link {
	width: 116px;
	color:#f3de93;
	text-decoration:none;
	font-size:80%;
	display:block;
	padding-top: 8px;
	padding-left: 0;
	padding-bottom: 8px;
	padding-right: 12px;
	text-transform:capitalize;
	outline: none;
}

#manual_nav li a:hover {
	color: #fff;	
}

#manual_nav li a:active {
	background-image: none;
	color: #8f6724;
}

#manual_nav li a.navactive, a.navactive:link:visited:active:hover {
	background: #000;
	color: #d10027;
}

#manual_nav li#s_welcome a {
	background-image: url(/images/cafes/nav/welcome_tab_cafe.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	width: 75px !important;
	background-position: 0 0;
}

#retail-cafes #manual_nav li#s_welcome a, #retail-cafes #manual_nav li#s_welcome a:hover, #retail-cafes #manual_nav li#s_welcome a:active {
	background-position: 0 -56px !important;
	cursor: default;
}

#manual_nav li#s_welcome a:hover {
	background-position: 0 -28px;
}

#manual_nav li#s_banquets a {
	background-image: url(/images/cafes/nav/banquets_tab_cafe.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	background-position: 0 0;
	width:116px !important;
}

#banquets-meetings #manual_nav li#s_banquets a, #banquets-meetings #manual_nav li#s_banquets a:hover, #banquets-meetings #manual_nav li#s_banquets a:active {
	background-position: 0 -56px !important;
	cursor: default;
}

#manual_nav li#s_banquets a:hover {
	background-position: 0 -28px;
}

#manual_nav li#s_locations a {
	background-image: url(/images/cafes/nav/locations_tab_cafe.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	width: 100px !important;
	background-position: 0 0;
}

#locations #manual_nav li#s_locations a, #locations #manual_nav li#s_locations a:hover, #locations #manual_nav li#s_locations a:active {
	background-position: 0 -56px !important;
	cursor: default;
}

#manual_nav li#s_locations a:hover {
	background-position: 0 -28px;
}

/* @end */

/* @group footernav */

#footernav {
position:relative;
float:left;
width:812px;
background:#000000;
border-top: 1px solid #8f6724;
}

#footernav ul {
	position:relative;
	float:left;
	list-style:none;
	padding:0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
}
	
	
#footernav li {
	position:relative;
	float:left;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

#footernav li a, a:link {
color:#FFFFFF;
text-decoration:none;
font-size:70%;
display:block;
margin: 0;
outline: none;
}

#footernav li a:visited {
color:#999966;
color:#FFFFFF;
text-decoration:none;
display:block;
}

#footernav li a:hover {
color:#FFFFFF;
text-decoration:underline;
display:block;
}

#footernav li a:active {
color:#FFFFFF;
text-decoration:underline;
display:block;
}


/* @end */

#wrapper {
	margin: 0 auto;
	padding:0px;
	width:812px;
	background: #f3e9ca;
	
}
#nav {
position:relative;
width:812px;
background:#000000;
border-bottom: 1px solid #8f6724;

}



#home #head {
	height: 0;
	border: 0;
}

#head {
	position:relative;
	background-image: url(/images/elements/header/Default_Header_v2.jpg);
	height:99px;
	width: 812px;
	border-bottom: 1px solid #8f6724;
}

#catering #head {
	position:relative;
	float:left;
	background-image: url(/images/catering/Catering_Header_v2.jpg);
	height:99px;
	width: 812px;
	border-bottom: 1px solid #8f6724;
}

#wholesale #head {
	position:relative;
	float:left;
	background-image: url(/images/wholesale/Wholesale_Header.jpg);
	height:99px;
	width: 812px;
	border-bottom: 1px solid #8f6724;
}


#maincontent {
	position:relative;
	float:left;
	width:543px;
	padding:0;
	
}
#maincontentwide {
	position:relative;
	float:left;
	width:812px;
	padding: 0;
}

#maincontentwide a {
	font-size: 100%;
	display: inline;
	color: #ca0022;
}


#right {
	position:relative;
	float:left;
	width:250px;
	padding:20px 0px 0px 0px;
}

#footer {
	position:relative;
	float: left;
	width:812px;
	background: #000000;
	border-top: 1px solid #8f6724;
}

/* @end */

/* @group Home Layout */

#home_content* html div#roll_over{
    /* hide ie/mac \*/
    height: 234px;
    /* end hide */
}
#homemaincontent {
	position:relative;
	float:left;
	width:812px;
}

/* @end */

/* @group Input Styles */

td {
	margin-left: 5px;
	padding: 5px !important;
	text-align: left;
}

/* @end */

/* @group Type Styles */

/* @group headings and paragraphs */

h1, h2, h3, h4, h5, h6{
}

h1 {
	font-size: 197%;

}
h2 {
	font-size: 182%;
}
h3 {
	font-size: 161.6%;
	margin-top: 1em;
	margin-bottom: 0;
}
h4 {
	font-size: 146.5%;
		margin-top: 1em;
	margin-bottom: 0;
}
h5 {
	font-size: 123.1%;
}
h6 {
	font-size: 100%;
}

P {
	margin-top: 1em;
	line-height:170%;
	
}

p.top {
	margin-top: 0;
	
}

img {
	margin: 0;
	padding: 0;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

/* @end */

.whitebox {
	margin-bottom: 20px;
	color: #600511;
	font-size: 77%;
	background-color: #fdffda;
	background-image: url(/images/elements/body/catering_bg.gif);
	background-repeat: no-repeat;
	background-position: right 20px;
}

.whiteappbox {
	background: none;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #600511;
	font-size: 77%;
	min-height: 200px;
	background-repeat: no-repeat;
	background-position: 95% 90%;
	background-color: #fff;
	background-image: url(/images/elements/body/catering_bg.gif);
}

.darkbox {
	background: #210f08;
	color:#f3dd92;
	font-size: 77%;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	float: left;
	width: 752px;
}

.darkbox p {
	color: #fbeec1;
}

.redbox {
	margin-bottom: 0;
	background-image: url(/images/elements/body/redbox_bg.png);
	background-repeat: repeat-x;
	background-position: top;
	width: 752px;
	font-size: 85%;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	background-color: #380a0a;
	float: left;
}

.redbox p {
	line-height: 2em;
}
.redbox .right, .tanbox .right, .greenbox .right  {
	float: right;
}

.tanbox {
	margin-bottom: 0;
	background: #fff url(/images/elements/body/catering_bg.gif) no-repeat right 20px;
	width: 752px;
	font-size: 85%;
	color: #471e00;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 60px;
	padding-left: 30px;
	text-align: left;
	float: left;
}

.employment {
	padding-right: 300px;
	width: 482px;
	background-image: url(/images/elements/body/employment_bg.gif);
	background-repeat: no-repeat;
	background-position: right 75px;
}

.tanbox ul {
	margin-top: 1em;
}

.tanbox li {
	list-style-position: inside;
	list-style-type: disc;
}

.tanbox hr {
	height: 1px;
	color: #471e00;
	margin-top: 2em;
}

.signinbox {
	min-height: 200px;
	float: left;
	width: 600px;
}

.locations_bg {
	background-image: url(/images/elements/body/locations_bg.jpg);
	background-repeat: no-repeat;
	background-position: 200px 60%;
}

.about_bg {
	background-image: url../images/catering_bg.gif);
	background-repeat: no-repeat;
	background-position: 95% 90%;
}

.tanbox .column_1 {
	width: 200px;
	float: left;
}

.tanbox .column_2 {
	width: 500px;
	float: left;
}

.tanbox a {
	font-weight: bold;
	color: #c30025;
	text-decoration: none;
	margin: 0;
	padding: 0;
	font-size: 100%;
	width: 100%;
	display:inline;
}

.tanbox h3 {
	color: #5c0511;
	font-weight: bold;
}

.tanbox a:hover {
	font-weight: bold;
	color: #5c0511;
	text-decoration: underline;
}


.greenbox {
	margin-bottom: 0;
	background: #24170e;
	width: 752px;
	font-size: 85%;
	color: #fbeec1;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
}

.greenbox p {
	
}

.greenbox h3 {
	font-weight: bold;
	color: #fff;
}

.greenbox a {
	font-weight: bold;
	color: #5c0511;
	text-decoration: none;
}

.greenbox a:hover {
	font-weight: bold;
	color: #5c0511;
	text-decoration: underline;
}

.promobox {
	margin-bottom: 0;
	width: 812px;
	height: 274px;
	font-size: 77%;
}

.promobox p {
	margin: 0;
	padding: 0;
	color: #fbeec1;
}

.promobox a {
	margin: 0;
	padding: 0;
}

#story_about {
	background-image: url(/images/about/story_header.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 27px;
	text-indent: -9999px;
	font-size: 0;
}

#current_employment {
	background-image: url(/images/employment/employment_header.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 27px;
	text-indent: -9999px;
	font-size: 0;
}

#philosophy_about {
	background-image: url(../../XImages/about/headers/philosophy_header.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 26px;
	text-indent: -9999px;
	font-size: 0;
}

#welcome_cafe {
	background-image: url(/images/home/headlines/welcome.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 21px;
	padding-bottom: 5px;
	text-indent: -9999px;
	font-size: 0;
}

#banquet_cafe {
	background-image: url(/images/home/headlines/banquet_1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 27px;
	text-indent: -9999px;
	font-size: 0;
}

#banquet_cafe2 {
	background-image: url(/images/cafes/headers/banquet_2.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 27px;
	text-indent: -9999px;
	font-size: 0;
}

#locations_cafe {
	background-image: url(/images/cafes/headers/locations_v2.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 27px;
	text-indent: -9999px;
	font-size: 0;
}

.clearboth {
	clear: both;
}

span.attn {
	color: red;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */


/* Catering Temp Page */

#catering_headline {
	width: 252px;
	padding-top: 119px;
	height: 0;
	background-image: url(/images/catering/full_service_catering.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
	float: left;
}

#contact_headline {
	width: 254px;
	padding-top: 25px;
	height: 0;
	background-image: url(../../XImages/catering/images/contact_us_today.png);
	background-repeat: no-repeat;
	background-position: right top;
	text-indent: -9999px;
	float: right;
	width: 752px;
	margin-top: 50px;
}

#contact_info {
	text-align: right;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	float: right;
	margin-top: 0.25em;
	font-family:arial,helvetica,clean,sans-serif;
}

#contact_info span {
	text-transform: uppercase;
	font-size: 0.5em;
	color:#CCCCCC;
}

#contact_info a {
	color: #fff;
	font-weight: normal;
}

#contact_info a:hover {
	text-decoration: underline;
}


.float_block #copy {
	float: right;
 	border: 1px solid #4f442a;
	padding: 10px;
	color: #f8e2a9;
	font-size: 14px;
	line-height: 25px;
	width: 440px;
	margin-top: 0.5em;
}

.float_block #copy span {
	color: #fff;
}

#list li {
	padding-bottom: 9px;
}

#list {
	color: #fff;
	font-size: 20px;
	list-style-type: circle!important;
	padding-right: 10px!important;
	float: left;
	width: 752px;
	background-image: url(/images/catering/box_lunch.jpg);
	background-repeat: no-repeat;
	background-position: 90% top;
	padding-top: 60px;
	height: 215px;
	margin-top: 0;
}

#catering .darkbox {
	background-image: url(/images/catering/catering_bg.jpg);
	background-repeat: no-repeat;
	background-position: left 95%;
	padding-bottom: 125px;
	min-height: 500px;
}

.float_block {
	float: left;
	width: 752px;
}

.whole_sale_container {
	width: 580px;
	float: right;
}

#wholesale_headline {
	width: 580px;
	padding-top: 35px;
	height: 0;
	background-image: url(/images/wholesale/wholesale_header.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
	float: left;
}

.whole_sale_container p {
	color: #f8f3e6;
	font-size: 1.2em;
	padding-top: 1.1em;
}

.whole_sale_container ul {
	color: #fff;
	font-size: 1.25em;
	font-weight: bold;
	margin-top: 2em;
	margin-left: 1em;
	background-image: url(/images/wholesale/wholesale_bg.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	min-height: 185px;
	padding-left:20px; 
margin-left:0px; 
list-style:disc; 
list-style-position:outside; 

}

.whole_sale_container li {
	list-style-type: disc!important;
	padding-bottom: 1em;
	font-family:Arial, Helvetica, sans-serif;
	padding-right: 350px;
	
}

.whole_sale_container #contact_info {
	text-align: left;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	float: left;
	margin-top: 0;
	padding-top: 0.5em;
	font-family:arial,helvetica,clean,sans-serif;
}

.whole_sale_container #contact_headline {
	width: 254px;
	padding-top: 25px;
	height: 0;
	background-image: url(/images/wholesale/contact_us_today.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
	float: left;
	width: 585px;
	margin-top: 25px;
}

#login_instructions {
	position: relative;
	top: 10px;
	width: 120px;
}

#login_instructions p {
	color: #bcbcbc;
}

#login_instructions a, #login_instructions a:visited, #login_instructions a:hover {
	color: #bcbcbc;
}

#login_instructions a:hover, #login_instructions a:focus, #login_instructions a:active {
	text-decoration: underline;
}

.paragraph_1 {
	width: 270px;
	float: left;
	padding-right: 20px;
}

.paragraph_2 {
	width: 270px;
	float: left;
}

.about_img {
	float: right;
	padding-left: 20px;
	padding-bottom: 175px;
	
}

#contact #phone_number, #contact #contact_person, #contact #company_name, #contact #email, #contact textarea {
	border: 1px solid #999;
	padding: 3px;
	width: 265px;	
}

/*ibox styles*/
#ibox_content { background: #e4e4e4; border-color: #222; color: #696969; }
#ibox_wrapper { background: #222; border-color: #444; }
#ibox_footer_wrapper { left: 0; right: 0; top: 0; padding: 3px 10px; }
#ibox_footer_wrapper, #ibox_footer_wrapper a { color: #dedbe2; background: #431d21; }
#ibox_footer_wrapper a { color: #8dd6e2; font-weight: bold; text-decoration: none; padding: 0 3px; }
#ibox_content { margin: 25px 0 0 0; padding: 10px; }

/* Home Styles */

#home_content {
	background-image: url(/images/home/home_content_v2.jpg);
	height: 557px;
	width: 812px;
}
* html div#roll_over{
    /* hide ie/mac \*/
    height: 234px;
    /* end hide */
}
#roll_over {
	overflow:hidden;
	width: 812px;
	height: 489px;
}

#roll_over_wrapper {
	left: 0;
	bottom: 0;
	height: 234px;
	margin-top: 255px;
}

#roll_over #roll_over_menu { margin: 0; padding: 0; padding-left: 0px; }
#roll_over #roll_over_menu li { display: inline; text-indent: -9999px; font-size: 0; }
#roll_over #roll_over_menu li a { float: left; width: 270px!important; height: 0; padding-top: 271px; overflow: hidden; }
#roll_over #roll_over_menu li a {
	outline: none;
	background-image: url(/images/home/roll_over_glow4.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#roll_over #roll_over_menu li#retail_rollover a {
	background-position: 0 0;
}
#roll_over #roll_over_menu li#retail_rollover a:hover, #roll_over #roll_over_menu li#catering_rollover a:active {
	background-position: 0 -234px;
}
#roll_over #roll_over_menu li#catering_rollover a {
	background-position: -271px 0;
}
#roll_over #roll_over_menu li#catering_rollover a:hover, #roll_over #roll_over_menu li#catering_rollover a:active {
	background-position: -271px -234px;
}
#roll_over #roll_over_menu li#wholesale_rollover a {
	background-position: -541px 0;
}
#roll_over #roll_over_menu li#wholesale_rollover a:hover, #roll_over #roll_over_menu li#wholesale_rollover a:active {
	background-position: -541px -234px;
}




#coming_soon {
	background-image: url(http://coconut.mnkysoft.com/dev3/usercontent/XImages/coming_soon/coming_soon.gif);
	width: 812px;
	height: 557px;
	background-repeat: no-repeat;
	background-position: center 400px;
}
#coming_soon p {
	text-indent: -9999px;
	font-size: 0;
}

/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6 */

/* 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;
	font-size: 0.9em
}



/* 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 {
}

/* 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 {
}

/* 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;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
	/*color: red !important;*/
}