@charset "UTF-8";
/* CSS Document */

body					{background: url('images/background.jpg') top left repeat-x #009ed9; font-family:Helvetica, sans-serif;  line-height:1.2em;}

a, a:link				{text-decoration:none; font-weight:bold; color:#00516f;}
a:visited				{color:#999;}
a:hover, a:active		{color:#6ac1e1;}

p 						{ font-size: 13px; margin-bottom:7px; }
h1 						{ font-size: 20px; padding-top:5px; color: #0081b1; padding-bottom: 0px; margin:0; margin-bottom:4px; font-weight: normal; line-height:1.3em; }
h2 						{ font-size: 20px; margin-top: 5px; margin-bottom:5px; letter-spacing:.03em; line-height:1.2em; color: #669722 }
h3						{color:#fff; font-size:16px; font-weight:normal;}
h4						{}
h5						{}
h6						{}

h1#weblogo				{background:url('images/4wordsystems-weblogo.png') no-repeat top left; margin-bottom:0; width:307px; height:58px; cursor:pointer; text-indent:-4000px; margin-left:25px; float:left;}

input.text 				{border:1px solid #8b8b8b; background: url('images/text-background.jpg') top left repeat-x #fbfbfb; color:#333; font-size:12px; padding:2px 3px;}
input.button 			{border:1px solid #386001; background: url('images/button-background.jpg') top left repeat-x #5c9214; color:#fff; font-size:12px; padding:2px 5 px; }
input.text:focus		{border:1px solid #fff}

#container				{width: 900px; margin:0 auto;}
#header					{width: 900px; height:58px; margin:58px 0 37px 0; position:relative;}
#content				{width: 848px; position:relative; padding:25px; border:1px solid #c2c2c2; background:url('images/content-background.jpg') top left repeat-x #eee; clear:both;}
#footer					{width: 850px; position:relative; height:72px; margin-top:10px; padding:35px 25px; background:url('images/footer-background.png') top left no-repeat;}

ul#nav					{list-style:none; float:right;}
ul#nav li				{float:left; padding:0px 15px; background:url('images/bluepipe.jpg') top right no-repeat; font-size:18px; font-weight:normal;}
ul#nav li.last			{background:0;}
ul#nav li a				{color:#fff; font-weight:normal}
ul#nav li a:hover		{color:#8bc33d;}

.featured-work										{width:590px; height:208px; background:#8dc63f; position:relative; line-height:1.2em; margin-bottom:30px;}
.featured-work .check-out-our-work					{position:absolute; top:-25px; left:-30px;}
/* .featured-work #our-work							{ width:590px; height:208px;} */
.featured-work #our-work ul							{list-style:none; margin:0; padding:0;}
.featured-work #our-work ul li						{ width:590px; height:208px; position:relative; cursor:pointer;}
.featured-work #our-work ul li .site_img			{position:absolute; top:-20px; right:-15px; width:316px; height:237px;}
.featured-work #our-work ul li .info				{width:235px; float:left; color:#fff; font-weight:bold; font-size:13px; line-height:1.2em; position:relative; margin-top:30px; margin-left:30px;}
.featured-work #our-work ul li .info h2				{ color: #444; font-size: 27px; line-height:1em; }
.featured-work #our-work ul li .info h5				{ color: #cbf093; font-size: 13px; text-decoration: none; font-weight:bold;  margin-bottom:10px}
.featured-work #our-work ul li .info h5 a 			{ color: #cbf093; font-size: 13px; text-decoration: none; font-weight:bold;}	
.featured-work #our-work ul li .info h5 a:hover 	{ color: #fff;}	
 
a.more 					{ font-size: 13px; font-weight: bold; text-decoration: none; color: #009fd9; float: right; margin-top:7px; }
a.more:hover 			{ color: #8ec63f }

.left-col				{float:left; width:593px; margin-right:15px;position:relative; }
.right-col				{float:left; width:224px; border-left:1px solid #d5d5d5; padding-left:15px}
.the-team-page .left-col {width:817px; margin-left:40px;}

.right-col h2 			{ font-size: 19px; color: #686868; font-weight: normal; padding-bottom: 3px; margin-bottom: 5px; margin-top: 10px;}

.recent-news ul 			{ padding: 0px; margin: 0px;}
.recent-news li				{font-size: 13px; height:30px; color: #999; background: url(images/news-underline.png) bottom left no-repeat;; padding-left: 10px; list-style: none; }
.recent-news li a 			{color: #999;text-decoration: none }
.recent-news li a:hover 	{ color: #009fd9 }

.client-login 			{color:#fff; width:171px; height:99px; padding:25px 20px 0px 25px; background:url('images/client-login-background.png') no-repeat top left;}
.client-login label 	{color:#fff; font-size:12px; float:left; padding-right:15px; height:20px; margin-top:1px; margin-bottom:5px;}
.client-login input.text{padding:1px; width:90px; margin-bottom:5px;}
.client-login br 		{clear:both;}

.newsletter-signup			{color:#fff; width:171px; height:99px; padding:25px 20px 0px 25px; background:url('images/newsletter-background2.png') no-repeat top left;}
.newsletter-signup label 	{color:#fff; font-size:12px; float:left; padding-right:15px; height:20px; margin-top:1px; margin-bottom:5px;}
.newsletter-signup input.text {padding:1px; width:90px; margin-bottom:5px;}
.newsletter-signup br 		{clear:both;}

.careers 				{color:#fff; width:191px; height:106px; padding:9px 7px 0px 10px; background:url('images/careers-background.png') no-repeat top left;}
.careers h3				{color: #444; font-size: 15px; margin-bottom: 2px; padding-bottom: 0px;}
.careers p				{font-size: 12px; margin-bottom: 2px; line-height:1.2em;}
.careers a 				{font-weight: bold; color: #ccc; }
.careers a:hover 		{color: #fff}

.member-photo			{width:206px; padding:8px; border:1px solid #CFCFCF; background:#fff;}

.separator				{margin:5px 0px 5px 45px;}

.member-name			{float:left; font-size:30px;}
.member-description		{float:left; font-size:14px; color:#999; margin-top:22px; margin-left:8px;}

.meet-the-team			{width:247px; height:153px; background:url(images/meet-the-team.png) no-repeat top left; position:absolute; top:-7px; right:-27px;}
.meet-the-team .cont	{padding:30px;}

.team-description		{width:442px; height:247px; background:url(images/team-description.png) no-repeat top left; position:absolute; top:-32px; left:-42px;}
.team-list				{width:223px; height:378px; background:url(images/member-list-medium.png) no-repeat top left; position:absolute; top:-38px; left:-45px; display: inline; float: left; }
.team-member			{float:left; width:167px; padding:8px; border:1px solid #CFCFCF; margin-right:9px; margin-bottom:9px; background:#fff; line-height:1em; }
.team-member img		{}
.team-member a			{color:#333;}
.team-member a:visited	{color:#666;}
.team-member h4			{font-size:13px; margin:0; padding:0; font-weight:bold; margin-top:3px; margin-bottom:1px;}
.team-member p			{margin:0; padding:0; font-size:12px;}
p.team-description span	{margin:0; padding:0; font-size:11px;}

.divlink				{display:block; cursor:pointer;}
/* begin footer */
.footer-address 			{width: 175px; color: #fff; float: left; border-right:1px solid #618b99; }
.footer-address p 			{font-size: 11px; margin:0; padding:0; line-height:1.4em}

.footer-checkout 			{ width: 290px; margin-left:25px; padding-bottom:0; color: #fff; float: left; border-right:1px solid #618b99;}
.footer-checkout h3			{float:left;}
.footer-checkout ul 		{list-style: none; float: left; margin-left: 20px; margin-top: 0px; margin-bottom:0;}
.footer-checkout ul li		{margin-bottom:5px;}
.footer-checkout a 			{color: #fff; }
.footer-checkout a:hover 	{color: #8ec63f }

.footer-nav 				{width: 350px; color: #fff; float: left; text-align: right; line-height: 0.9em;}
.footer-nav ul 				{list-style: none; margin-top: 0px; float:right;}
.footer-nav li 				{padding:0 10px 0 0; float:left;}
.footer-nav a 				{font-size: 12px; color: #fff;}
.footer-nav a:hover 		{color: #8ec63f }

.footer-nav .copyright 		{color: #999; margin:0; padding:0; padding-right:10px; font-size: 11px; text-align:right; clear:both; }

.clear						{clear:both;}
.left						{float:left;}
.right						{float:right;}
strong						{font-weight:bold}
.hide						{display:none;}
.show						{display:block;}

/* our work */
.portfolio					{padding:0; margin:0;}
.portfolio ul 				{list-style:none; padding:0; margin:0;}
.portfolio ul li			{width:169px; text-align:center; line-height:1em; float:left; background:url('images/portfolio-background.gif') top left repeat-x; border:1px solid #d4d4d4; padding:8px; margin:0 8px 8px 0;}
.portfolio ul li:hover		{background:url('images/portfolio-background.gif') bottom left repeat-x;}
.portfolio ul li.last		{margin-right:0;}
.portfolio ul li img		{width:167px; height:89px; border:1px solid #999;}
.portfolio ul li h2			{color:#000; font-size:14px; font-weight:bold; margin-top:5px;padding-bottom:0; margin-bottom:0;}
.portfolio ul li h4			{color:#8b8b8b; font-size:12px; font-weight:bold; margin:0; padding:0;}
.portfolio ul li a.more		{color:#004f6c; font-weight:bold; font-size:11px;}

.portfolio ul li:hover h2	{color:#000;}
.portfolio ul li:hover h4	{color:#666}


.border-left				{ padding:5px; margin-bottom:5px; margin-right:15px; background:url('images/text-background.gif') top left repeat-x #fbfbfb; border:1px solid #d4d4d4;}
.border-right				{ padding:5px; margin-bottom:5px; margin-left:15px; background:url('images/text-background.gif') top left repeat-x #fbfbfb; border:1px solid #d4d4d4;}

.address p 					{font-size: 13px; margin-bottom:8px; padding:0; line-height:1.4em}
.address					{margin-bottom:5px;}
.address h2					{color:#00506d; font-size:18px; font-weight:bold; margin-top:5px;padding-bottom:0; margin-bottom:0;}

.contact-form				{Margin-top:20px;}
.contact-bg					{background: url('images/contact-background.png') no-repeat top left; width:510px; padding:40px; height:236px;}
.contact-form label 		{color:#fff; font-size:13px; width:100px; float:left; font-weight:bold; padding-right:15px; height:20px; margin-top:1px; margin-bottom:10px;}
.contact-form label.comments{width:100%;}
.contact-form input.text,
.contact-form textarea.text {padding:2px; width:387px; margin-bottom:10px; font-size:13px;}
.contact-form textarea.text	{height:50px;}
.contact-form input.button	{margin-left:25px; font-size:17px;}

.employees					{float:right;}


/* NEWS STYLES */
.news-post  	{font-size:13px; line-height:1.3em; padding:0 0 10px 0; margin-bottom:10px; border-bottom:1px solid #666}
.news-post .date {font-size:11px; color:#999; text-transform:uppercase;}
.news-post .content {font-size:13px; line-height:1.4em;}
.news-post .content p {margin-bottom:10px; white-space:normal; text-align:left;}


.special { background-image:url(images/spring-special.png); background-repeat:no-repeat; width:590px; height: 265px; margin-top: 0px; border: 1px solid #fafafa; }
.special h2 { margin-top: 85px; color: #000; font-size: 14px; font-family: verdana; margin-left: 25px; font-weight: 500; font-style: italic;}
.special h2 strong { font-family: verdana; font-weight: bolder;}
.special p { margin-left: 200px; margin-right: 19px; line-height:normal; margin-top: 16px; }
#learn-more { font-weight: bold; float: right; text-align:right; margin-bottom: 16px; font-style:italic; font-size: 14px;}
.special a:visited { color: #006 }
.special a:hover { color:#8ec63f; }

ul { margin-top: 3px; margin-bottom: 5px;  }
ul li { font-size: 12px; }