/*******************Layout ****************************/
#wrapper{
	margin: auto;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}
#upperhalf{
   clear:both;
	width:800px;
	height:50px;
	position:relative;
	margin:auto;
	background: #FFFFFF;
}   
#upperhalf2{
   clear:both;
	width:780px;
	height:40px;
	position:relative;
	background: #666633;
	margin: 0 auto;
	margin-top: 4px;
}   
#upperhalftext{
    padding: 5px;
}
#bottomhalf{
    clear:both;
	width:800px;
	height:70px;
	position:relative;
	margin: auto;
	background-color: #FFFFFF;
}  
#flcont{
    clear:both;
	width:800px;
	position:relative;
	margin: auto;
	background-color: #666633;
}  
#globalNav{
	color: #cccccc;
	white-space: nowrap;
	position:relative;
	width:784px;
	padding: 4px 0px 4px 0px;
	background-color: #666633;
	margin: 0 auto;
} 
#maincont{
    width: 800px;
	margin: auto;
	height: 100%
	position:relative;
	background-color: #FFFFFF;
	color:#FFFFFF;
	overflow:hidden;
}
#siteframe{
    width: 780px;
	position: relative;
	height: 100%
	overflow: hidden;
	/*border: solid 1px #666666;*/
	margin: 10px auto;
	color:#FFFFFF;
	background-color:#FFFFFF;
	
}
#sitecolumn1{
   width: 201px;
   height: 550px;
   background-color:#FFFFFF;
   float: left;
   padding: 3px;
   margin-left: 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#000000;
   font-size:12px;
}
#sitecolumn2{
   /*border: solid 1px #333333;*/
   background-color:#FFFFFF;
   width: 535px;
   float: left;
   padding: 0px;
   margin-top: 4px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#000000;
   font-size:12px;
   overflow:hidden;
   
}

#sidebar1{
   width: 176px;
   height: 60px;
   background-color: #006633;
   font-family: Verdana, Arial, Helvtica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   padding: 10px;
 }
#navigation_pane {
  width:194px;
  left: 21px;
  border-top: solid 1px #999;
  border-right: solid 1px #404040;
  border-bottom: solid 1px #3a3a3a;
  border-left: solid 1px #404040;
}
#effectsTransport a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 75%;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin: 0 1px 0 0;
	padding: 4px 8px;
	width: 176px;
	display: block;
	-moz-user-select: none;
	-khtml-user-select: none;
}
#effectsTransport a:link {
	background: #666 url('../img/bg_grad_gray1.gif') repeat-x;
	color: #fff;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}
#effectsTransport a:visited {
	background: #666 url('../img/bg_grad_gray1.gif') repeat-x;
	color: #fff;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}
#effectsTransport a:hover {
	background: #666 url('../img/bg_grad_gray2.gif') repeat-x;
	color: #000;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}
#productnav{
    width: 782px;
	position: relative;
	height: 60px;
	border: solid 1px #666666;
	margin: 0px auto;	
}
#probox1{
   background-color:#FFFFFF;
   float: right;
   padding: 3px;
   margin: 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#000000;
   font-size:12px;
  }
#probox{
   border: solid 1px #333333;
   background-color:#CCCCCC;
   float: right;
   padding: 3px;
   margin: 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#000000;
   font-size:12px;
  }


/************************** Look and feel ****************************/
 a.creditnav:link, a.creditnav:visited {
	color: #999999;
	text-decoration: underline;
}

a.creditnav:hover {
	text-decoration: none;
}
.clearme{
  clear:both;
  }
.sitetext1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.sitetext2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.sitetext3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	
}
.pageheadertext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font:bold;
	color: #999999;
}
.siteproducttext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	padding-left: 10px;
	margin: 3px;
	padding:3px;
	
}
.bullet1 {
	list-style-image: url(../img/blt1.jpg);
	list-style-position: outside;
	list-style-type: disc;
}

.announcement {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-indent: 10px;
}
.bgcolor {
	background-color:#666666;
}
/*********** #navBar link styles ***********/
 
.navheader{
   background-image:url(../img/navbar_header.jpg);
   height: 22px;
   width: 194px;
   text-align:center;
   padding-top: 4px;
 }
 a.mainnav:link, a.mainnav:visited {
	color: #FFFFFF;
	text-decoration: underline;
}

a.mainnav:hover {
	text-decoration: none;
}
a.sitenav:link, a.sitenav:visited{
    color:#000000;
	text-decoration:none;
}
a.sitenav:hover {
    text-decoration:none;
}
a.prodnav:link, a.prodnav:visited{
    color:#000000;
	text-decoration:none;
}
a.prodnav:hover {
    text-decoration:none;
	color: #FFFFFF;
}
/************** .feature  and .story styles ***************/

.imagecontainer{
  float:left;
  padding: 2px;
  margin: 5px;
  border: 1px solid #CCCCCC;
}
.imagecontainer2{
  padding: 2px;
  border: 1px solid #CCCCCC;
}
.imagetext{
   float:left;
   padding: 4;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px;
}
.feature{
	padding: 10px 0px 0px 0px;
	left: 80px;
	position:relative;
	width: 799px;
	background-color:#CC9900;
}

.story img{
	float: right;
	padding: 4px;
	margin: 5px;
	border:1px solid #000000;
}
.photo_brdr1 {
	border: 1px solid #666666;
	margin: 4px;
	padding: 4px;
}
.photo_label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-indent: 10px;
	white-space: pre;
}


.story{
	
	padding:10px;
	left: 80px;
	position:relative;
	width: 600px;
	background-color:#FFFFFF;
}
.story2 img{
	float: left;
	padding: 4px;
	margin: 5px;
	border:1px solid #000000;
}
.story2{
	
	padding:10px;
	left: 80px;
	position:relative;
	width: 600px;
	background-color:#FFFFFF;
}
.story3{
    padding:0px;
	position:relative;
	width: 480px;
	background-color:#FFFFFF;
	}
/* adjust margins to change separation between the feature image and text flowing around it */

/************** form styles **********************/
fieldset { 
    border:0;margin:0;padding:5px; 
}
label { 
	display:block; 
	font:10px/10px verdana,arial,sans-serif;
	padding: 5px;
}
input.text,textarea { 
	width:300px;
	font:10px/10px verdana,arial,sans-serif;
	color:#333;
	padding:3px;
	margin:1px 0;
	border:1px solid #ccc; 
}
input.submit { 
	padding:2px 5px;
	font:bold 10px/10px verdana,arial,sans-serif; 
}

/* 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;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* 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;
}
/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg {
	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. .textareaRequiredState) 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".
 */
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: * focus, required / 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 TEXTAREA
 * - the widget id is placed on the TEXTAREA element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
.textareaValidState textarea, textarea.textareaValidState {
	background-color:#B8F5B1;
}

/* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color:#FF9F9F;
}

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

/* This class applies only for a short period of time and changes the way the text in the textarea looks like.
 * It applies only when the widget has enforce max chars enabled and the user tries to type some more.
 */
.textareaFlashState textarea, textarea.textareaFlashState{
	color:red !important;
}
/************************************
/*  Display messages for form validation
*/
.validMsg{
	width:16px;
	height:16px;
	margin-left:6px;
	margin-top:-2px;
	display:none;
}
.textfieldValidState .validMsg, .textareaValidState .validMsg, .selectValidState .validMsg, .checkboxValidState .validMsg{
	display:inline;
}
.checkboxRequiredState .checkboxRequiredMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg, .selectRequiredState .selectRequiredMsg, .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg, .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg{
	border:0px;	
	padding-left:22px;
	margin-left:4px;
	background-image:url(images/error.gif);
	background-repeat:no-repeat;
}
#errors{
	float:left;
	height:25px;
	margin-top:10px;
}
.bulklist {
	margin-left: 5px;
	padding-bottom: 4px;
	padding-left: 5px;
	margin-bottom: 5px;
	list-style-type: none;
	
}