/* VerveX3 template */
* {
	color: #000;
	/* default background is transparent, but can't be specified, or buttons will not get default, browser-specific 'button' rendering */
	padding: 0;
	margin: 0;
}
/* anchor pseudo-class order important */
a {
	text-decoration: none;
}
a:link {
	color: #004080;
}
a:visited {
	color: #ff4d0f;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: #004080;
}
abbr {
}
address {
	font-style: normal;
}
blockquote {
	margin: 0 0 0.5em 1em;
}
body {
	background: #64686b url('../images/background_page.png') repeat-x left top;
	font: normal 0.8em Arial, Helvetica, sans-serif;
	text-align: left;
}
hr {
	display: none;
}
h1 {
	color: #004080;
	font-size: 1.4em;
	font-weight: bold;
	padding: 0 0 0.5em 0;
}
h2 {
	color: #004080;
	font-size: 1.3em;
	font-weight: bold;
	padding: 0 0 0.4em 0;
}
h3 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 0.3em 0;
}
h4 {
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 0 0.2em 0;
}
/* img -- display: block and padding: attributes conflict with TinyMCE editor */
img {
	background: none;
	border: none;
}
li {
	margin-bottom: 0.5em;
}
/* Firefox2, IE -- marker-offset is not supported */
ol {
	margin: 0 0 6px 2em;
	padding: 0 0 0 0.5em;
}
p {
	margin-bottom: 0.5em;
}
ul {
	list-style: disc;
	margin: 0 0 6px 1.5em;
	padding: 0 0 0 0.5em;
}


.vxPadLiner {}
	/* use no styling directly on this element, instead always refer to 	its
	outermost directly nested parent div to style .vxPadLiner. As an example:

.vxMenuLeft .vxPadLiner {
	padding: 10px;
	}

.vxPadLiner is a generic liner box that can be nested inside any other div box, and its
purpose is primarily to provide global padding for the parent without affecting the
displayed width of the parent. If a parent div has no stated width, it doesn't need
a liner div inside to have padding.

NEVER assign styles to .vxPadLiner directly because this will affect all instances of it.
When padding or backgrounds are desired on an instance of .vxPadLiner, the selector
must always refer to the outer parent of the nested group, insuring that the stylings
don't go where they're not wanted.
*/





/* ========== forms ========== */
form {
	width: 98%;
}
fieldset {
	padding: 0.5em;
	border: 1px solid #666;
	margin: 0.5em;
}
button, input, select, textarea {
	max-width: 100%;
	font: normal 1em Arial, Helvetica, sans-serif; /* FF, Safari - required; Safari: input buttons will render with default size, regardless */
}
button {
	padding: 2px 10px;
}
/* Firefox2: button padding hack: https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
button::-moz-focus-inner, input::-moz-focus-inner {
	padding: 0;
	border: none;
}
/* input buttons */
input[type=button], input[type=image], input[type=reset], input[type=submit] {
	padding: 2px 10px;
}
input[type=checkbox], input[type=radio] {
	background: #fff;
}
input[type=password], input[type=text] {
	background: #fff;
	padding: 1px 2px;
	border: 1px solid #666;
}
/* All browsers: for <input type="file", very limited control over style -- no borders, height, width, etc. */
input[type=file] {
	background: #fff;
	border: 1px solid #666;
}
input[type=hidden] {
}
label {
	color: #004080;
}
/* Firefox2 note: padding does not seem changeable */
select {
	background: #fff;
	border: 1px solid #666;
}
textarea {
	background: #fff;
	padding: 1px 2px;
	border: 1px solid #666;
}
/* ========== table ========== */
/* table-layout:fixed conflicts with TinyMCE editor */
table {
	border-collapse: separate;
	border-spacing: 0;
}
td {
}
a.readon {
	display: block;
	text-align: right;
}


/* ========== Fore/Background Setup ========== */

#vxContainer {
	width: 1000px;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

#vxContainer.vxGreen {background: #005000 url('../images/foreground_green.jpg') no-repeat left top;}
#vxContainer.vxBlue {background: #002c64 url('../images/foreground_blue.jpg') no-repeat left top;}
#vxContainer.vxOrange {background: #ef6806 url('../images/foreground_orange.jpg') no-repeat left top;}
#vxContainer.vxSlate {background: #202b31 url('../images/foreground_slate.jpg') no-repeat left top;}

#vxTop, #vxBottom {
	width: 100%;
	background-attachment: scroll;
	background-color: transparent;
	background-image: url('../images/frame_horz2.png');
	background-repeat: no-repeat;
	overflow: hidden;
}
#vxTop {
	height: 110px;
	background-position: left top;
}
#vxBottom {
	height: 90px;
	background-position: 0px 100%;
}
/* ========== Top Logo, Menu, Contact Us ========== */
.vxTopLogo {
	float: left;
	width: 200px;
	padding: 50px 0 0 54px;
}
.vxTopLogo>a {
	border: none;
}
.vxTopMenu {
	display: block;
	float: left;
	width: 640px;
	padding: 38px 0 0 0;
}
.vxTopMenu ul {
	display: block;
	float: left;
	background: transparent url('../images/top_menu_sprite.png') no-repeat 0 0;
	list-style: none;
	width: 640px;
	height: 38px;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
.vxTopMenu ul.vxGreen {
	background-position: 0 -80px;
}
.vxTopMenu ul.vxBlue {
	background-position: 0 -40px;
}
.vxTopMenu ul.vxOrange {
	background-position: 0 -120px;
}
.vxTopMenu li {
	display: block;
	float: left;
	height: 38px;
	overflow: hidden;
}
.vxTopMenu li>a {
	background: transparent;
	color: transparent;
	display: block;
	font-size: 0.9em;
	padding: 38px 0 0 0;
	border: none;
	margin: 0;
}
/* widths for individual items */
.vxTopMenu a#vxItemBusiness {
	width: 122px;
}
.vxTopMenu a#vxItemCreative {
	width: 82px;
}
.vxTopMenu a#vxItemWeb {
	width: 49px;
}
.vxTopMenu a#vxItemProcess {
	width: 77px;
}
.vxTopMenu a#vxItemTechnology {
	width: 106px;
}
.vxTopMenu a#vxItemDesign {
	width: 66px;
}
.vxTopMenu a#vxItemManagement {
	width: 124px;
}
.vxTopTab {
	float: left;
	width: 85px;
	padding: 32px 0 0 0;
}
.vxTopTab>a {
	display: block;
	border: none;
	position: relative;
	right: 11px;
	top: 10px;
}
.vxTopTab>a:link {
	color: #000;
}
.vxTopTab>a:visited {
	color: #000;
}
.vxTopTab>a:hover {
	text-decoration: none;
}

/* ========== Middle, Content Zone ========== */


#vxMiddle, #vxMiddle .vxLeftEdge {
	background-repeat: no-repeat;
	/* Large vertical paddings on the .vxColPainter divs confer "natural"
	min-height; to increase min-height beyond the sum of those paddings, use a greater
	px value in this min-height declaration. Currently 395px is the sum of the vertical paddings. */
}
#vxHome #vxMiddle, #vxHome #vxMiddle .vxLeftEdge {
	background-image: url('../images/frame_vert.png');
}
#vxInner #vxMiddle, #vxInner #vxMiddle .vxLeftEdge {
	background-image: url('../images/frame_vert2.png');
}
#vxMiddle {
	background-position: -22px 0px;
	padding: 0 0 0 56px;
}
.vxPathway {
	margin: 0 0 -1.75em 198px;
	width: 480px;
}
.vxLeftEdge {
	background-position: 924px 0px;
	padding: 0 22px 0 0;
	position: relative;
}     /* This class was previously called "vxContentZone" and was changed to reflect the elements' function. */
.vxLeftEdge .vxSlideshow {
	width: 900px;
	height: 450px;
	background: transparent url('../images/background_slide.jpg') no-repeat left top;
	padding: 12px 0 0 0;
	margin: 42px 0 0 0;
}
.vxLeftEdge>.vxVertLine {
	position: absolute;
	width: 0;
	border-right-style: solid;
	border-right-width: 1px;
	top: 38px;
	bottom: 10px;
	right: 260px;
/* 	min-height: 345px; */
}     /* This div paints the vertical divider line between the center and right columns. */
.vxGreen .vxLeftEdge>.vxVertLine {border-right-color: #6e9e6c;}
.vxBlue .vxLeftEdge>.vxVertLine {border-right-color: #7a9ece;}
.vxOrange .vxLeftEdge>.vxVertLine {border-right-color: #edad50;}
.vxSlate .vxLeftEdge>.vxVertLine {border-right-color: #7e8e9d;}

/***
The .vxColPainter group of three nested divs work together to "paint" the visible column backgrounds.
Thes divs (in order) supply the top, bottom, and repeated middle backgrounds. The top padding on
.vxColPainter1 and the bottom padding on .vxColPainter2 restict .vxColPainter1's height. To allow
content within .vxColPainter3 to cover the BG's on the other divs, a fourth element, div.vxExpander,
is nested inside .vxColPainter3 and has negative vertical margins that match the heights of the
top and bottom BG images respectively.
***/

.vxColPainter1 {
	margin-left: -40px;     /* this neg margin pulls the col group to the left so it matches the design */
	padding-top: 75px;     /* should match the height of the top BG image and top margin on .vxExpander */
}

.vxColPainter2 {
	padding-bottom: 320px;     /* matches the height of the bottom image and bottom margin on .vxExpander */
}

.vxColPainter3 {
	padding: 1px 0;     /* must have vertical padding to trap any child margins that may exist */
}

.vxExpander {
	margin: -75px 0 -320px 0;     /* the vertical negative margins correct the padding of the vxColPainter classes */
	min-height: 420px;
	position: relative;
	overflow: hidden;
}     /* This div expands its top and bottom edges to overlap and cover the backgrounds on the painting divs
surrounding it. These negative vertical margins should match the vertical paddings on the painting divs
and the associated top and bottom BG image heights. */



/*** Below are the BG rules for the different page-color types ***/

.vxGreen .vxColPainter1 {background: url(../images/threecol-green-top.png) no-repeat;}
.vxGreen .vxColPainter2 {background: url(../images/threecol-green-bottom.png) 0 100% no-repeat;}
.vxGreen .vxColPainter3 {background: url(../images/threecol-green-repeater.png) repeat-y;}

.vxBlue .vxColPainter1 {background: url(../images/threecol-blue-top.png) no-repeat;}
.vxBlue .vxColPainter2 {background: url(../images/threecol-blue-bottom.png) 0 100% no-repeat;}
.vxBlue .vxColPainter3 {background: url(../images/threecol-blue-repeater.png) repeat-y;}

.vxOrange .vxColPainter1 {background: url(../images/threecol-orange-top.png) no-repeat;}
.vxOrange .vxColPainter2 {background: url(../images/threecol-orange-bottom.png) 0 100% no-repeat;}
.vxOrange .vxColPainter3 {background: url(../images/threecol-orange-repeater.png) repeat-y;}

.vxSlate .vxColPainter1 {background: url(../images/threecol-slate-top.png) no-repeat;}
.vxSlate .vxColPainter2 {background: url(../images/threecol-slate-bottom.png) 0 100% no-repeat;}
.vxSlate .vxColPainter3 {background: url(../images/threecol-slate-repeater.png) repeat-y;}


/*** The following rules define bullet colors of the left col link list for the different color schemes ***/

.vxGreen .vxMenuLeft li {color: #040;}
.vxBlue .vxMenuLeft li {color: #012b67;}
.vxOrange .vxMenuLeft li {color: #bb3f08;}
.vxSlate .vxMenuLeft li {color: #1a242d;}




/*** left column ***/

.vxMenuLeft {
	float: left;
	width: 211px;
	padding-top: 50px;
}

.vxMenuLeft>.vxPadLiner {
	padding: 1px 10px 80px 32px;     /* must have vertical padding to trap any child margins that may exist */
}     /* .vxPadLiner is a liner div to provide padding and BGs without affecting the sized parent div */

.vxMenuLeft ul {
	width: 160px;
	margin-left: 0px;
	list-style: disc outside;
}     /* Style all UL list elements inside .vxMenuLeft, mainly for spatial tweaks */

.vxMenuLeft li {
	list-style: disc;
	margin-left: 16px;
}

.vxMenuLeft li a {
	color: white;
	font-weight: bold;
/* 	line-height: 1.3em; */
}


/*** home page expander ***/
.vxHomeExpander {
	padding: 1px 0 0 0;
	overflow: hidden;
}	/* similar to .vxColPainter, vertical padding is required to 'trap' margins in child divs, and not push background of parent divs down */

/*** center column ***/

.vxContent {
	float: left;
	width: 482px;
	margin: 0 0 0 26px;
}     /* margin-right creates a gap between the middle and right cols. The space is for
an optional vertical-divider element; kill the right margin to close the cols together. */

.vxContent.vxFullWidth {
	width: 700px;
	margin-left: 26px;
	margin-right: 0;
}

.vxContent>.vxPadLiner {
	padding: 36px 12px 10px 12px;
}     /* .vxPadLiner is a liner div to provide padding and BGs without affecting the sized parent div. */

#vxMiddle a, #vxMiddle blockquote, #vxMiddle li, #vxMiddle p, #vxMiddle td {
	line-height: 1.3em;
}

/* slideshow module title */
.vxSlideshow > .moduletable > h3 {
	padding: 8px 0 0 36px;
	font-size: 1.6em;
}
.vxSlidePicture {
	display: block;
	float: left;
	max-width: 495px;
	padding: 0 40px 0 0;
	overflow: hidden;
}
.vxSlidePicture img {
}
.vxSlideDesc {
	display: block;
	float: left;
	width: 365px;
	padding: 0 0 0 0;
}
.vxSlideDesc h2 {
	display: block;
	background: transparent url('../images/header_background.png') no-repeat right top;
	color: #fff;
	font-size: 1.4em;
	line-height: 32px;
	padding: 2px 10px 2px 0;
	margin: 0 0 0.5em 0;
	text-align: right;
	width: 355px;
}
.vxSlideDesc li, .vxSlideDesc p {
	font-weight: bold;
	margin-left: 28px;
}
/*** right column ***/

.vxSidebarRight {
	float: left;
	width: 214px;
}

.vxSidebarRight>.vxPadLiner {
	padding: 36px 12px 10px 12px;
}     /* .vxPadLiner is a liner div to provide padding and BGs without affecting the sized parent div. */

#vxCopyright p {
	display: block;
	font-size: 0.8em;
	text-align: center;
}


/* ========== Bottom Tagline, Menu ========== */
#vxBottom .vxBottomTagline {
	float: left;
	padding: 25px 0 0 38px;
	width: 416px;
}
#vxBottom .vxBottomMenu {
	float: left;
	width: 500px;
	padding: 46px 0 0 10px;
}
.vxBottomMenu ul {
	float: right;
	list-style: none;
	padding: 0 15px;
	margin: 0;
}     /* Style all UL list elements inside .vxMenuLeft, mainly for spatial tweaks */
.vxBottomMenu li {
	display: block;
	float: left;
}
.vxBottomMenu li:before {
	content: "/";
	color: #666;
	font-size: 1.5em;
	font-weight: bold;
	padding: 0 4px;
	vertical-align: baseline;
}
.vxBottomMenu li:first-child:before {
	display: none;
}
/*
.vxBottomMenu li {
	display: block;
	float: left;
	padding-left: 10px;
	border-left: 2px solid #666;
	margin-left: 10px;
}
.vxBottomMenu li:first-child {
	padding-left: 0;
	border-left: none;
	margin-left: 0;
}
*/
.vxBottomMenu li a {
	color: #666;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5em;
	padding: 4px 10px;
	vertical-align: top;
}
.vxBottomMenu li a:hover {
	color: #fff;
	text-decoration: none;
}