﻿/***********************************************************************
	LAYOUT
************************************************************************/
/* the layout container */
#container {
	/* sets the width of the layout */
	width:990px;
	
	/* centers the layout */
	margin:10px auto 0 auto;

	color:#333;
	background-color:#fff;
	text-align:left;
}

.orange-st{
		color: #f7941d;
		font-weight:bold;
	}
	
.bold-13em {
		font-size:1.3em;
		font-weight:bold;	
	}
	
/* a section that's floated left */
.left {
	float:left;
	display:inline;
	margin-left:25px;
	width:520px;
	padding-bottom:25px;
}

.left h1
{
	        margin:1em 0;
	        color:#2a7a97;
	        font-weight:bold;
	        width:auto;
	        font-family: Arial, Helvetica, sans-serif;
	        background-color:White;
	        padding: 0 0 0 0;
	        font-size:2.4em; 
	        line-height:21.48pt;
}

/* a section that's floated right */
.right {
	position:relative;
	float:right;
	display:inline;
	width:410px;
	margin:0 10px 0 0;
	padding-bottom:25px;
}

/* a section that's floated left */
.leftNew {
	float:left;
	display:inline;
	margin-left:25px;
	width:480px;
	padding-bottom:25px;
}

/* a section that's floated right */
.rightNew {
	position:relative;
	float:right;
	display:inline;
	width:480px;
	margin:0 10px 0 0;
	padding-bottom:25px;
}

.lefthalf {
	float:left;
	display:inline;
	margin-left:25px;
	width:465px;
	padding-bottom:0px;
}

.lefthalf p
{
	font-size:medium;
	margin-top: 0;
	margin-bottom:0;
}

/* a section that's floated right */
.righthalf {
	position:relative;
	float:right;
	display:inline;
	width:465px;
	margin:0 10px 0 0;
	padding-bottom:0px;
}
.righthalf p
{
	font-size:medium;
	margin-top: 0;
	margin-bottom:0;
}
.right ul {
	margin:0;
}
.right li {
	margin:.5em 1.5em;
	line-height:1.5em;
}

/* a section that spands the full width of the layout */
.full_section {
	width:940px;
	clear:both;
	margin:0 25px;
}

/* a section with a gray background.
   should only be used within the "right" class */
.gray {
	margin:10px 0 0 0;
	padding:20px 25px 25px 25px;
	width:415px;
	color:#000;
	background-color:#eeeeee;
	/*background:#ddd url(../images/gray_gradient.gif) repeat-x 0 0;*/
}


.grayOld 	
{
	PADDING-RIGHT: 25px;	
    PADDING-LEFT: 25px;	
    BACKGROUND: url(../images/gray_gradient.gif) #ddd repeat-x 0px 0px;	
    PADDING-BOTTOM: 25px;	
    MARGIN: 10px 0px 0px;	
    WIDTH: 360px;	
    COLOR: #000;	
    PADDING-TOP: 20px
    }



/* a section with a dark green background.
   should only be used within the "right" class */
.dkgreen {
	margin:10px 0 0 0;
	padding:20px 25px 25px 25px;
	width:360px;
	color:#000;
	background:#a3bb52 url(../images/dkgreen_gradient.gif) repeat-x 0 0;
}
.dkgreen h2,
.dkgreen h3,
.dkgreen h4,
.dkgreen h5,
.dkgreen h6,
.dkgreen p {
	/* all text within the dark green box should be white in order to 
	   read easier */
	color:#fff;
}
/* a section with a light green background.
   should only be used within the "right" class */
.green {
	margin:20px 0 0 0;
	padding:20px 25px 25px 25px;
	width:360px;
	color:#000;
	background:#fff url(../images/green_gradient.gif) repeat-x 0 0;
}
/* three colomns with a light green background.
   should only be used within the "full_section" class */
.col1,
.col2,
.col3 {
	float:left;
	margin-right:11px;
	padding:0 25px;
	width:266px;
	background:#fff url(../images/green_gradient.gif) repeat-x 0 0;
}
.col3 {
	margin-right:0;
}

/* use on the <p> tag that wraps around an image */
.image {
	margin:1em 0 0 0;
}
/* use on the <p> tag for the image caption */
.caption {
	margin:0 0 1em 0;
	padding:5px;

	font-weight:bold;
	background-color:#e4ebce;
}

/* Text within this class will not wrap to the next line */
.nowrap {
	white-space:nowrap;
}

/***************************** 
New Layout from Steffanie 
*******************************/

.marginTop
{
	margin-top:5px;
}

/* a section that's floated left */
.leftNew2 {
	position:relative;
	float:left;
	width:457px;
	margin-left:25px;
	margin-bottom:25px;
	clear:left;
}

.section {
	float:left;
	width:940px;
	padding:0 25px;
}

.section .leftNew2 {
	margin-left:0;
	margin-bottom:0;
}

/* a section that's floated right */
.rightNew2 {
	position:relative;
	float:right;
	width:457px;
	margin-right:25px;
	margin-bottom:25px;
}

.section .rightNew2 {
	margin-left:0;
	margin-bottom:0;
}

.first {
	margin:0;
}

/* a section with a gray background */
.gray-box2 {
	float:left;
	width:100%;
	background-color:#ddd;
	margin-bottom:25px;
}
.gray-box2-inner {
	padding:25px;
}


/* a section with a gray background.
   should only be used within the "right" class */
.gray-box {
	float:left;
	width:100%;
	background-color:#ddd;
}
.gray-box h2,
.gray-box h3 {
	margin:0 25px;
	padding:15px 0;
}

/* a section with a gray background */
.green-gradient-box {
	float:left;
	width:100%;
	background:#fff url(../images/green-gradient.gif) repeat-x 0 0;
}
.green-gradient-box-inner {
	padding:25px;
}
.green-gradient-box h2 {
	margin:0;
}

/* elements with this class will have no top margin */
.notopmargin {
	margin-top:0;
}

ul.arrow-list { }
ul.arrow-list li {
	margin:2em 0;
	padding:0 0 0 30px;
	list-style:none;
	background:#fff url(../images/bullet.gif) no-repeat 0 1px;
}
ul.arrow-list li h3 {
	padding-right:5px;
	line-height:1.1em;
	font-size:18px;
}

/* elements with this class will have thinner margins */
.thin-margin {
	margin:1em 0;
}

ul.arrow-list2 { 
	margin:0;
}
ul.arrow-list2 li {
	margin:0;
	padding:10px 15px 10px 25px;
	list-style:none;
	line-height:1.6em;
	background:#fff url(../images/bullet.gif) no-repeat -3px 12px;
	border-bottom:1px solid #ccc;
}
ul.arrow-list2 li.alt {
	background:#ededed url(../images/bullet2.gif) no-repeat -3px 12px;
}
ul.arrow-list2 li h3 {
	padding-right:5px;
	display:inline;
	line-height:1.1em;
	font-size:18px;
}

.more-info {
	margin:0;
	display:block;
}

ul.learnmore-list {
	float:left;
	width:100%;
	margin:0;
	padding:0;
}
ul.learnmore-list li {
	margin:0;
	padding:10px 25px 10px 75px;
	list-style:none;
	font-size:1em;
	border-top:2px solid #fff;
}
ul.learnmore-list li h3 {
	margin:0;
	font-weight:bold;
}
ul.learnmore-list li p {
	margin:0.2em 0 0 0;
	font-weight:normal;
}
li.learnmore-info {
	background:transparent url(../images/icon-info.png) no-repeat 25px 10px;
}
li.learnmore-money {
	background:transparent url(../images/icon-money.png) no-repeat 25px 10px;
}
li.learnmore-download {
	background:transparent url(../images/icon-download.png) no-repeat 25px 10px;
}

/* A list separated by boxes */
ul.box-list {
	float:left;
	width:100%;
	margin:0;
	paddin:0;
}
ul.box-list li {
	margin:0;
	padding:10px 25px;
	list-style:none;
	line-height:1.5em;
	border-top:2px solid #fff;
}

/***********************************************************************
	HEADER
************************************************************************/
/* "Skip to content" is used for accessibility. Hide for normal users.
   Screen readers will be able to see this. */
#skip {
	position:absolute;
	left:-999em;
}
#header {
	float:left;
	width:100%;
	position:relative;
	background:#fff url(../images/header_bg.gif) repeat-x 0 0;
}
.logo {
	float:left;
	margin:0;
	padding:25px 0 25px 25px;
}

/* Top navigation list */
ul#navigation {
	float:right;
	margin:40px 25px 0 0;
	padding:0 0 15px 0;
}
ul#navigation li {
	margin:0;
	padding:0 0 0 15px;
	list-style:none;
	display:inline;
	text-transform:uppercase;
}
ul#navigation li a {
	padding:5px 10px;
	color:#000;
	text-decoration:none;
}
ul#navigation li a:hover {
	color:#fff;
	background-color:#c1272d;
}

.title_wrapper {
	float:left;
	width:940px;
	padding:10px 25px;
	color:#fff;
	background-color:#1a1a1a;
}



/***********************************************************************
	FOOTER
************************************************************************/
#footer {
	clear:both;
	background-color:#ddd;
}
/* Bottom navigation */
p.footer_nav {
	margin:0;
	padding:15px 0;
	text-align:center;
	font-size:1.2em;
}
p.footer_nav a,
p.footer_nav strong {
	margin:0 10px;
}
p.footer_nav strong {
	font-weight:normal;
}
p.copy {
	margin:0;
	padding:5px 0;
	font-size:1.1em;
	border-top:5px solid #c1272d;
	color:#fff;
	
	/* use the background color to make it look like
	   it's out of the container*/
	background-color:#777777;
}
p.copy a {
	color:#fff;
	text-decoration:none;
}
p.copy a:hover {
	color:#fff;
	text-decoration:underline;
}



/***********************************************************************
	HOME PAGE
************************************************************************/
/* top */
.top {
	float:left;
	width:100%;
	padding-bottom:25px;
	color:#fff;
	background:#0d455b url(../images/top-bg.jpg) repeat 0 40px;
	clear:both;
}
.top .title_wrapper h1 {
	/* hide from view */
	position:absolute;
	left:-999em;
}
.top .title_wrapper h2 {
	margin:0;
	padding:0;
	font-size:1.8em;
	line-height:20px;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
}
.top h3 {
	float:left;
	display:inline;
	width:940px;
	margin:0 25px;
	padding:35px 0 0 0;
	color:#fff;
	font-size:2.5em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:right;
}
.top h4 {
	float:left;
	display:inline;
	width:940px;
	margin:0 25px;
	color:#fff;
	font-size:4em;
	line-height:1.1em;
	font-family: Tahoma, Geneva, sans-serif;
	text-align:right;
}
.top p {
	float:left;
	display:inline;
	width:940px;
	margin:0 25px;
	padding:5px 0 0 0;
	text-align:right;
}
.top .button {
	float:right;
}

/* diagram */
.diagram {
	position:relative;
	margin:20px 0;
}
.diagram p {
	margin:0;
}
a.diagram_hover,
a.diagram_hover:hover {
	z-index:500;
	color:#000;
	text-decoration:none;
}
a.diagram_hover img {
	float:left;
	width:22px;
	height:22px;
}
a.diagram_hover strong {
	/* hide from view */
	text-indent:-999em;

	/* needed to activate the text-indent */
	display:block;

	overflow:hidden;
}
a.diagram_hover span {
	/* hide from view */
	position:absolute;
	left:-999em;
}
a.diagram_hover:hover span {
	/* display on hover */
	top:11px;
	left:11px;
	
	float:left;
	width:150px;
	padding:5px 5px 5px 20px;
	
	font-size:12px;
	line-height:1.5em;
	
	background-color:#f7941d;
	border-top:5px solid #000;
}
/* Without Web Stimulus client
   positions hover box to the exact spot */
#diagram_without {
	position:absolute;
	top:86px;
	left:10px;
}
/* With Web Stimulus client
   positions hover box to the exact spot */
#diagram_with {
	position:absolute;
	top:210px;
	left:168px;
}
/* WS Server
   positions hover box to the exact spot */
#diagram_server {
	position:absolute;
	top:122px;
	left:383px;
}
/* WS Application
   positions hover box to the exact spot */
#diagram_app {
	position:absolute;
	top:92px;
	left:425px;
}

/* Without Web Stimulus client
   positions hover box to the exact spot */
#diagram_without_small {
	position:absolute;
	top:65px;
	left:7px;
}
/* With Web Stimulus client
   positions hover box to the exact spot */
#diagram_with_small {
	position:absolute;
	top:164px;
	left:131px;
}
/* RSW - added for backgrounder use of diagram 
   WS Server
   positions hover box to the exact spot */
#diagram_server_small {
	position:absolute;
	top:95px;
	left:298px;
}
/* WS Application
   positions hover box to the exact spot */
#diagram_app_small {
	position:absolute;
	top:71px;
	left:331px;
}
#diagram_server_small:hover span,
#diagram_app_small:hover span {
	left:-160px;
}



#home_page ul.arrow-list li {
	background:#fff url(../images/bullet.gif) no-repeat 0 2px;
}
#home_page ul.arrow-list li strong {
	font-size:1.2em;
	font-weight:normal;
}
#home_page .gray-box h2 {
	float:left;
	display:inline;
}
#home_page .gray-box p.button-wrapper {
	margin:10px 20px 0 0;
	float:right;
	display:inline;
}

/* quote box */
blockquote.quote {
	margin:0;
	padding:20px 25px 25px 25px;
	width:407px;
	color:#fff;
	background:#0d455b url(../images/testimonials-bg.jpg) no-repeat 0 0;
}
blockquote.quote p {
	margin-top:0;
	margin-bottom:.5em;
	font-size:2em;
	line-height:1.2em;
}
/* Used on the <p> tag that wraps around the speaker of the quote */
blockquote.quote p.speaker {
	margin:0;
	padding:0;
	font-size:1.3em;
	line-height:1em;
	text-align:right;
}
blockquote.quote p a {
	color:#f7941e;
	font-size: .75em;
	text-decoration:none;
}
blockquote.quote p a:hover {
	text-decoration:underline;
}
ul.prev-next {
	padding:30px 0 20px 0;
	margin:0;
}
ul.prev-next li {
	margin:0;
	padding:0;
	list-style:none;
}
ul.prev-next li.prev {
	float:left;
}
ul.prev-next li.next {
	float:right;
}
ul.prev-next li a {
	display:block;
	width:15px;
	height:15px;
	text-indent:-999em;
	overflow:hidden;
}
ul.prev-next li.prev a {
	background:transparent url(../images/prev-btn.png) no-repeat 0 0;
}
ul.prev-next li.next a {
	background:transparent url(../images/next-btn.png) no-repeat 0 0;
}

/***********************************************************************
	Contact box
************************************************************************/
#contact_box {
	float:left;
	color:#666;
}
#contact_box ul {
	margin:0;
	padding:0;
}
#contact_box li {
	float:left;
	margin:0;
	padding:5px 0;
	line-height:1.5em;
	list-style:none;
}
#contact_box li strong {
	float:left;
	width:110px;
	text-transform:uppercase;
}
#contact_box li span {
	float:right;
	width:245px;
}


/***********************************************************************
	WEB STIMULUS
************************************************************************/
#requirements h4 {
	margin:.5em 0 0 0;
}


/***********************************************************************
	ABOUT STIMULUS TECHNOLOGy
************************************************************************/
/* Executive team list */
#exec_team ul li {
	margin:0;
	padding:0;
	float:left;
	width:445px;
	font-size:1em;
	list-style:none;
	clear:right;
}
/* Use on every other one on the list. */
#exec_team ul li.alt {
	margin-right:50px;
	clear:left;
}
/* Bio photo */
#exec_team ul li img {
	margin:1.5em 0 0 0;
	/* place the image on the left */
	float:left;
}
#exec_team ul li p {
	margin-left:100px;
}
#exec_team h3 {
	clear:both;
}

.web-stimulus-speed {
	margin:0 0 0 10px;
	float:left;
	width:970px;
	height:70px;
	background:transparent url(../images/web-stimulus-speed.gif) no-repeat 0 0;
	text-indent:-999em;
}

/***********************************************************************
	CONTACT US
************************************************************************/
/* Required elements on the contact form
   Colors text red */
.required {
	color:#c1272d;
}
form {
	color:#333;
}
form ul {
	margin:0;
	padding:0;
}
form ul li {
	float:left;
	margin:0 0 0px 0;
	padding:2px 2px 2px 10px;
	width:480px;
	font-size:1em;
	list-style:none;
	background-color:#ddd;
}

form ul li label {
	float:left;
	width:200px;
	font-size:1.4em;
	line-height:2.5em;
	text-transform:uppercase;
	clear:left;
}
input.textbox {
	width:258px;
	padding:2px;
	font-size:14px;
	clear:right;
	border:1px solid #999;
	margin-top: 5px;
}
	input.textbox:hover {
		border:1px solid #666;
	}
	input.textbox:focus {
		border:1px solid #c1272d;
	}
textarea {
	width:97%;
	border:1px solid #ddd;
	margin-bottom: 10px;
}
	textarea:hover {
		border:1px solid #bbb;
	}
	textarea:focus {
		border:1px solid #d07300;
	}
fieldset.radio {
	position:relative;
	width:290px;
	float:left;
}
fieldset.radio legend {
	width:200px;
	font-size:1.4em;
	line-height:2.5em;
	text-transform:uppercase;
}
fieldset.radio label {
	position:relative;
	top:-25px;
	left:0;
	padding:2px 0;
	width:290px;
	text-transform:none;
	font-size:1.2em;
	line-height:1em;
	margin-left:200px;
}
fieldset.radio span {
	position:relative;
	top:-25px;
	left:0;
	padding:2px 0;
	width:290px;
	text-transform:none;
	font-size:1.2em;
	line-height:1em;
	margin-left:200px;
}

input.button {
	margin-top:10px;
	border:none;
	width:204px;
	height:38px;
	color:#fff;
	font-weight:bold;
	letter-spacing:.05em;
	background:transparent url(../images/btn2.png) no-repeat 0 0;
	cursor: pointer;
}

input.button-smaller {
	margin-top:10px;
	border:none;
	width:99px;
	height:38px;
	color:#fff;
	font-weight:bold;
	letter-spacing:.05em;
	background:transparent url(../images/btn-smaller.png) no-repeat 0 0;
	cursor: pointer;
}

input.bluebutton {
	margin-top:10px;
	border:none;
	width:200px;
	height:30px;
	color:#fff;
	text-transform:uppercase;
	font-weight:bold;
	letter-spacing:.05em;
	background:transparent url(../images/btn_blue.png) no-repeat 0 0;
	cursor: pointer;
}

input.bluebutton:hover {
	color:#ff9c25; 
}

a.button {
	float:left;
	padding-left:10px;
	color:#fff;
	text-decoration:none;
	text-align:center;
	background:transparent url(../images/button.png) no-repeat 0 0;
}
	a.button:hover {
		color:#fff;
		text-decoration:underline;
	}
a.button span {
	display:block;
	padding-right:10px;
	background:transparent url(../images/button.png) no-repeat 100% -100px;
}
a.button span span {
	padding:0 5px;
	line-height:38px;
	white-space:nowrap;
	background:transparent url(../images/button.png) repeat-x 0 -200px;
}

