/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
	background-color: #666666;
	color: #001D77;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
	color: #001D77;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
	padding-bottom: 12px;
	padding-left: 18px;
	padding-top: 12px;
}
/* Commonly used to style section titles. */
h2 {
	color: #BA6F2E;
	font-size: 15px;
	font-weight: bold;
	line-height: 18px;
	padding-left: 12px;
}
/* Sets the style for the h3 header. */
h3 {
	color: #FFFFFF;
	font-size: 11px;
	line-height: 14px;
	padding-left: 20px;
}
h4 {
	color: #001D77;
	font-size: 13px;
	font-weight: bold;
	padding-left: 12px;
}
p {
	color: #001D77;
	margin-top; -14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-top: -1px;
	padding-left: 12px;
}
/* Sets the style for unvisited links. */
a,  a:link {
	color: #5456ef;
	font-weight: bold;
	text-decoration: underline;
	padding-left: 0px;
}
/* Sets the style for links on mouseover. */
a:hover {
  color: #3a32c4;
  text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
  color: #3a32c4;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
  color: #383644;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
	background-color: #F3F1F2;
	background-image: url(../images/bg2.jpg);
	background-repeat: repeat-y;
	margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: left; /* Redefines the text alignment defined by the body element. */
	width: 915px;
}

#contentWrapper {
	position: relative;
}

#leftColumn {
	/*float: left;*/ /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 150px;
	padding-top: 35px;
	padding-right: 25px;
	padding-bottom: 150px;
	padding-left: 24px;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#content {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 205px;
	padding-top: 38px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 58px;
}




/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper .clearFloat {
  clear: left;
  display: block;
}
/* Contains the cut-out picture of the house. */
.cut-out {
	padding-top: 15px;
	padding-bottom: 15px;
}
#associa {
	padding-left: 0px;
}
/* The navigations system. */
#nav {
	padding-top: 15px;
	padding-bottom: 60px;
	padding-left: 15px;

}
 #nav ul {
	list-style: none;
	margin: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 5px;
	text-align: center;
	width: 129px;
}
#nav li {
	padding-top: 0px;
	padding-bottom: 4px;
}
#nav li a {
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	margin: 0px;
	padding-top: 6px;
	padding-right: 6px;
	padding-bottom: 7px;
	padding-left: 6px;
	display: block;
}
#nav li a:link {
	color: #001D77;
	background-image: url(../images/normal.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
#nav li a:visited {
	color: #001D77;
	background-image: url(../images/normal.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
#nav li a:hover {
	color: #FFFFFF;
	background-image: url(../images/hover.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
#nav li a.current {
	color: #000000;
	background-image: url(../images/current.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
#leftColumn a {
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	line-height: 14px;

}
li { 
	color: 001D77;
}

h6 {
	color: #001D77;
	font-size: 14px;
	font-weight: bold;
	line-height: 14px;
	padding-left: 12px;

}
h7 {
	color: #001D77;
	font-size: 14px;
	font-weight: bold;
	line-height: 14px;
	padding-left: 12px;

}

#boxout {
	float: right;
	width: 175px;
	padding-bottom: 25px;
	padding-left: 25px;
} 
.check {
	list-style-position: outside;
	list-style-image: url(../images/check.gif);
}
#siteDesign {
	padding-top: 24px;
	text-align:center;
}
#siteDesign a {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 12px;
	font-weight: bold;
}
#siteDesign a:visited {
	color: #000000;
}
.red {color: #983222}
/* Form */
#form {
	margin-left:20px;
}
.labels {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #112F89;
}
.labelsBlue {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #263F6A;	
}
.fieldBrown {
	width: 220px;
	height:20px;
}
.fieldBlue {
	background-color: #BFCFFF;
	width: 215px;
	height: 20px;
}
.fieldBlueDescription {
	background-color: #BFCFFF;
	width: 450px;
	margin-top: 5px;
}
.button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background-color: #263F6A;
	padding: 3px;
	margin-top 12px;
}
/* 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: #b0a493;
}

/* 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;
}
.sprytextfield1 {
	background-color: #D59971 !important;
	width: 215px;
	height:20px;
}
.clearFloat {
  clear: right;
  display: block;
}
.clearmenu {
	margin-bottom: 100px;
}
.clearmenu2 {
	margin-bottom: 150px;
}
#video {
	background-color: #f4f0f1;
	float: right;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-left: 10px;
	clear: right;
	margin-top: 12px;
	width: 290px;
}
#video_left {
	background-color: #f4f0f1;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-right: 12px;
	float: left;
	margin-right: 12px;
	clear: right;
	margin-top: 12px;
	width: 290px;
}
#align_left {
	margin-left:15px;
}
#gallery {

}
#video h4, #video_left h4 {
	color: #C3763E;
	font-size: 13px;
	font-weight: bold;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
}
#video p {
	color: #C3763E;
	font-size: 11px;
	padding-left: 12px;
	padding-bottom: 0px;
}
#video_left p {
	color: #C3763E;
	font-size: 11px;
	padding-left: 12px;
	padding-bottom: 28px;
}

#video_caps {
	width: 270px;
	margin-top: 12px;
}
#video_caps_left {
	width: 250px;
	margin-bottom: 50px;
	margin-top: 12px;
}
#video_index {
	text-align:left;
	margin-bottom: 0px;
	width: 440px;
}
#video_process {
	background-color: #f4f0f1;
	float: left;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-left: 12px;
	margin-top: 12px;
	width: 440px;
}
#video_caps_process {
	width: 420px;
	margin-top: 12px;
}
#call2action {
	background-image: url(../images/call2action2.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	float: right;
	width: 150px;
	padding-top: 60px;
	padding-bottom: 125px;
	clear: right;
	padding-left: 0px;
	padding-right: 15px;
}
#call2action_you {
	background-image: url(../images/call2action3.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	width: 250px;
	padding-top: 10px;
	padding-bottom: 60px;
	clear: right;
	margin-right: 25px;
	margin-top: 15px;
	margin-bottom: 50px;
	float: left;
	position: relative;
}
#call2action_us {
	background-image: url(../images/call2action3.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	float: right;
	width: 250px;
	padding-top: 25px;
	padding-bottom: 50px;
	clear: right;
	margin-right: 25px;
	margin-top: 10px;
	margin-bottom: 25px;
}
#video_first {
	background-color: #f4f0f1;
	float: right;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-left: 12px;
	clear: both;
	width: 290px;
}
#call2action h1 {
	font-size: 36px;
	line-height: 36px;
	font-weight: bold;
	text-align: center;

}
#call2action_you h1 {
	font-size: 24px;
	line-height: 28px;
	font-weight: bold;
	text-align: center;

}
#call2action h2 {
	font-size: 18px;
	line-height: 28px;
	font-weight: bold;
	text-align: center;
	color: #001C73;

}
#call2action_us h1 {
	font-size: 21px;
	line-height: 28px;
	font-weight: bold;
	text-align: center;

}
#call2action_gallery {
	background-image: url(../images/call2action2.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	float: right;
	width: 115px;
	padding-top: 60px;
	padding-bottom: 100px;
	clear: right;
	padding-left: 0px;
	padding-right: 15px;
	margin-top: 225px;
}
#call2action_gallery h1 {
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;
	text-align: center;

}
#video_caps_aboutus h4 {
	color: #C3763E;
	
}
#video_caps_process h4 {
	color: #C3763E;
	padding-bottom: 6px;
	
}
#sitemap {
	padding-top: 25px;
	padding-left: 8px;

}
#sitemap a {
	font-weight: bold;
	color: #001D8D;
	font-size: 10px;

}
#tag {
padding-top:30px;
}