@charset "UTF-8";

html {
	overflow-y: scroll;	
}

body { color: #444; 
	margin: 0; 
	padding: 0; 
	background: #fff; 
	font-size: 12px; 
	font-family: tahoma, Helvetica, Geneva;
}
	
img {
	border: none;
	}
	
a, a:visited {
	color: #6aa021;
	}
	
a:hover, a:visited:hover {
	color: #0972b8;
	}
		
h1 {
	font-size: 20px;
	font-weight: normal;
	color: #111;
	font-family: helvetica;
	letter-spacing: .5px;
	margin-top: 18px;
	margin-bottom: 14px;
	padding: 0; 
	text-align: left;
}
	
h2 {
	font-size: 17px;
	font-weight: 500;
	color: #0972b8;
	font-family: helvetica;
	background: url(../images/h2_bg.gif) no-repeat 0 5px;
	margin-top: 10px;
	margin-bottom: 7px;
	padding: 0 0 1px 40px;
	border-bottom: 1px dashed #ccc;
	text-align: left;
	clear: both;
 }
	
h3 { 
	font-size: 13px; 
	font-weight: bold; 
	color: #444; 
	margin: 15px 0 2px 0; 
	padding: 0;
	text-align: left;
	font-family: helvetica;
}

.getstarted_h3 {
	color: #005AB6;
}
	
h4 {
	font-size: 12px;
	font-weight: bold;
	margin: 15px 0 5px 0;
	padding: 0;
	}
	
p { font-size: 12px; 
	margin-top: 0; 
	margin-bottom: 0; 
	padding-top: 0; 
	padding-bottom: 10px;
	}
	
li, td { font-size: 12px;  }



/* ------------------------------------------------------------------------------------------------------ BEGIN SITEWIDE STYLES */

.top_wide {
	height: 95px;
	background: url(../images/sub_top_wide_bg.jpg) repeat-x;
	}
	
.top {
	background: url(../images/sub_top_bg.jpg) no-repeat;
	width: 890px;
	height: 95px;
	margin: 0 auto;
	padding: 0 30px 0 30px;
	}
	
.index_content {
	background: url(../images/sub_content_bg.jpg) no-repeat;
	padding: 5px 25px 25px 25px;
	margin: 1px 0 15px 0;
	line-height: 20px;
	}
	
.bottom_wide {
	background: url(../images/sub_bottom_wide_bg.gif) repeat-x;
	}
	
.bottom {
	background: url(../images/sub_bottom_bg.jpg) no-repeat;
	width: 890px;
	margin: 0 auto;
	padding: 13px 30px 10px 30px;
	}

.bottom_videos {
	background: url(../images/sub_bottom_bg.jpg) no-repeat;
	width: 925px;
	margin: 0 auto;
	padding: 13px 0px 10px 0px;
	}

.crumbs {
	float: left;
	width: 427px;
	text-align: left;
	padding: 4px 0 0 221px;
	font-size: 10px;
	}
	
#why_crumbs {
	padding: 4px 0 0 197px;	
}
	
.portfolio .crumbs {
	float: left;
	width: 600px;
	text-align: left;
	padding: 4px 0 0 4px;
	}

.footer {
	font-size: 10px;
	border-top: 1px solid #e0e0e0;
	padding: 10px 0 40px 0;
	margin: 25px 0 0 0;
	text-align: right;
	clear: both;
	background: #fff;
	}
	
.clearer {
	clear: both;
	}
	
.red {
	color: #990000;
}

.getstarted_alt_row {
	background: #eee;	
}

/* ------------------------------------------------------------------------------------------------------ END SITEWIDE STYLES */




/* ------------------------------------------------------------------------------------------------------ BEGIN INDEX SPECIFIC STYLES */

.index_video {
	height: 247px;
	width: 950px;
	margin: 0 auto;
	}
	
.index_bottom {
	background: url(../images/index_bottom_bg.jpg) no-repeat;
	width: 840px;
	margin: 0 auto;
	padding: 13px 30px 10px 80px;
	}
	
.index_accordion {
	width: 611px;
	float: left;
	}

.index_news {
	width: 200px;
	float: right;
	margin: 0 0 25px 0;
	}
	
.index_news h2 {
	color: #333;
	font-weight: bold;
	font-size: 11px;
	padding: 6px 0 0 0;
	margin: 0 0 0 0;
	background: none;
	border: none;
	height: 40px;
	letter-spacing: 1px;
	text-transform: uppercase;
	}
	
.index_news h3 {
	font-weight: bold;
	font-size: 10px;
	padding: 0 0 5px 0;
	margin: 0 0 0 0;
	}
	
.index_news p {
	font-size: 10px;
	line-height: 17px;
	padding: 0 0 19px 0;
	margin: 0 0 0 0;
	text-align: left;
	}
	
#tab-accordion .tab-element {
	clear: both;
	overflow: visible;
	}
	
.tab-element {
	height: 250px;
}

.tab-element p {
	font-size: 11px;
	line-height: 18px;
	padding: 0px 30px 25px 0;
	margin: 0px;
	height: 220px;
	overflow: hidden;
	text-align: justify;
}

.tab-element h2 {
	color: #333;
	font-size: 14px;
	padding: 10px 0px 0px 0px;
	margin: 14px 0px 3px 0px;
	background-image: none;
	font-weight: bold;
	border: none;
}
	
.tab-toggler {
	float: left;
	text-decoration: none;
	padding: 5px 0 5px 0;
	display: block;
	font-family: "Trebuchet MS";
	font-weight: bold;
	font-size: 11px;
	margin: 0 30px 0 0;
}

a.tab {
	text-decoration: none;
	color: #000;
}

#index_mass_screen {
	float: right;
	padding: 0;
	margin-top: -12px
}

#index_identity {
	float: right;
	padding: 0 25px 0 0;
	margin-top: -15px;
}

#index_marketing {
	float: right;
	padding: 0;
	margin: -15px 0 0 0;
}

#index_yardlover {
	float: right;
	padding: 0;
	margin-top: -12px;
}

#index_gamelink {
	float: right;
	padding: 0;
	margin-top: -12px;
}

/* ------------------------------------------------------------------------------------------------------ END INDEX SPECIFIC STYLES */




/* ------------------------------------------------------------------------------------------------------ BEGIN SUBPAGE SPECIFIC STYLES */

#sub_video_area, #web_design_video_area, #ecom_video_area, #indigo_video_area, #web_app_video_area {
	width: 950px;
	margin: 0 auto;
	height: 92px;
	}
	
#sub_header_image {
	width: 950px;
	margin: 0 auto;
	height: 92px;
	overflow: hidden;
	}
	
#sub_header_bar {
	height: 92px;
	width: 950px;
	margin: 0 auto;
	}
	
.sub_logo {
	position: absolute;
	top: 33px;
	}
	
.sub_title {
	height: 27px;
	clear: both;
	overflow: hidden;
	text-align: right;
	}
	
.sub_content {
	padding: 0 25px 25px 25px;
	margin: 1px 0 15px 0;
	line-height: 20px;
	}
	
.sub_content li {
	padding-bottom: 5px;	
}

#left_col {
	float: left;
	width: 155px;
	margin-right: 15px;
	font-size: 10px;
	line-height: 16px;
	color: #666;
	padding: 40px 0 0 0;
	}
	
#middle {
	background: url(../images/sub_content_bg.jpg) no-repeat;
	float: left;
	width: 450px;
	padding: 0 25px 0 25px;
	text-align: justify;
	}

#middle_wide {
	background: url(../images/sub_content_bg.jpg) no-repeat;
	float: left;
	width: 620px;
	padding: 0 25px 0 25px;
	}

#middle_medium {
	background: url(../images/sub_content_bg.jpg) no-repeat;
	float: left;
	width: 530px;
	padding: 0 25px 0 25px;
	}
	
#middle li, #middle_wide li, #middle_medium li {
	padding-bottom: 3px;	
}

#right_col {
	float: right;
	width: 170px;
	background: none;
	font-size: 11px;
	padding: 37px 0 0 0;
	}
	
#right_col p {
	font-size: 11px;	
}
	
#right_col ul {
	padding: 0 0 0 21px;
	margin: 0;
}
	
#right_col li {
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 5px;
}

.side_videos_bg {
	background: url(../images/side_videos_bg.jpg) 50% 0 no-repeat;
	padding: 5px 20px 0 20px;
	width: 130px;
	margin: 0;
}

.side_videos_bg h3 {
	color: #0972b8;
	font-size: 11px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

.side_videos_bg p {
	padding: 0;
	margin: 0;
	font-size: 10px;
	color: #666;
	line-height: 13px;
}

.left_thumbs {
	float: right;
	clear: right;
}

.tsr-pg-wrapper { line-height: 15px; margin-bottom: 7px; padding: 0 15px 7px 0; border-bottom: 1px dotted #e6e6e6; color: #777; font-size: 10px; }
	
.staff-photo { background-color: white; margin: 7px 0 20px 15px; padding: 5px; border: solid 1px #d8d8d8; }

.quote { line-height: 15px; margin-bottom: 7px; padding: 0px 20px 7px 0px; border-bottom: 1px dotted #e6e6e6; color: #666; }

.comparison_table { margin-top: 15px; }
.comparison_table td { vertical-align: top; padding: 7px; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.comparison_table th { font-size: 14px; font-weight: bold; background-color: #f0f0f0; text-align: center; padding: 2px; border-right: 1px solid white; }
td.comparison_table_title { font-weight: bold; background-color: #f0f0f0; text-align: right; border-bottom: 1px solid #fff; border-right-style: none; }
.comparison_table ul { margin: 0; padding: 0 0 0 15px; }
.comparison_table li { font-size: 11px; }

	
/* ------------------------------------------------------------------------------------------------------ END SUBPAGE SPECIFIC STYLES */




/* ------------------------------------------------------------------------------------------------------ BEGIN PORTFOLIO SPECIFIC STYLES */

.port_content {
	background: url(../images/port_content_bg.gif) 100% 0 repeat-y;
	padding: 20px 0 0 0;
	margin: 1px -30px 45px 0;
	line-height: 20px;
	}

.port_content #right_col {
	margin: -10px 0 0 0;
	padding: 0;
	width: 255px;
	float: right;
	}
	
.port_content #left {
	width: 640px;
	float: left;
	}
	
.port_thumb {
	width: 197px;
	float: left;
	margin: 0 15px 7px 0;
	}
	
.port_thumb p {
	margin: 0;
	padding: 2px 0 0 5px;
	font-size: 10px;
	font-weight: bold;
	color: #555;
	background: url(../images/port_name_bg.jpg) no-repeat;
	}
	
.port_tip {
	color: #333;
	font-size: 9px;
	background: url(../images/port_tip_bg.jpg) repeat-x;
	padding: 0;
	}
	
.port_tip_print {
	color: #333;
	font-size: 9px;
	background: #fff url(../images/port_tip_bg_print.jpg) no-repeat;
	padding: 0;
	}
	
.port_tip #screen {
	float: left;
	}
	
.port_tip #button {
	float: right;
	padding: 0 21px 15px 0;
	}
	
.port_tip p {
	margin: 0;
	padding: 0;
	font-size: 10px;
	float: right;
	width: 204px;
	padding: 0 21px 21px 0;
	line-height: 18px;
	color: #4a4a4a;
	}
	
.port_tip ul {
	width: 204px;
	float: right;
	margin: 0 0 11px;
}

.port_tip li {
	font-size: 10px;	
	color: #4a4a4a;
	padding: 0 10px 7px 0;
}
	
.port_tip h5 {
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	padding: 25px 0 11px 37px;
	width: 214px;
	float: left;
	color: #242424;
	clear: right;
	}
	
<!-- IE 6 HACK -->
* html .port_tip h5 {
	float: none;
}

<!-- IE 7 HACK -->
*:first-child+html .port_tip h5 {
	float: none;
}
	
/* CSS to go with Prototip.Styles */
.prototip {
	font: 11px Arial, Helvetica, sans-serif;
	color: #000;
}

/* the default style */
.prototip .default {
	width: 250px;
	color: #000;
}
.prototip .default .toolbar {
	font-weight: bold;
	padding: 0;
	display: none;
}
.prototip .default .title { padding: 0px; }
.prototip .default .content {
	padding: 0;
	background: #fff;
}

/* This is how to resize the close button for a style */
.prototip .protogrey .toolbar .close {
	width: 14px;
	height: 14px;
}


/* loader gif */
.prototipLoader {
	position: absolute;
	top: -1000px;
	left: -1000px;
	height: 14px;
	width: 14px;
	border: 1px solid #dddddd;
	overflow: hidden;
}

.showTip {
	cursor: default;
	}	


/* Required for all tooltips, do not modify */
.prototip{position:absolute;overflow:hidden;}.prototip .tooltip,.prototip .toolbar,.prototip .toolbar .title{position:relative;}.prototip .content{clear:both;}.prototip .toolbar .close{position:relative;text-decoration:none;float:right;width:19px;height:15px;display:block;line-height:0;font-size:0;border:0;cursor:pointer;}.prototip .tooltip{clear:both;float:left;}.prototip .borderLeftWrapper,.prototip .borderRightWrapper{position:absolute;top:0;left:0;width:300px;height:20px;}.prototip .borderFrame{height:100%;width:100%;float:left;margin:0;padding:0;position:relative;}.prototip .borderTop,.prototip .borderBottom{overflow:hidden;}.prototip .borderRow{list-style-type:none;float:left;width:100%;position:relative;clear:both;margin:0;padding:0;}.prototip_CornerWrapper{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;clear:both;}.prototip_Corner{float:left;position:relative;}.prototip canvas{position:relative;float:left;}.prototip_CornerTr,.prototip_CornerBr{float:right;}.prototip_BetweenCorners{position:absolute;top:0;left:0;width:100%;overflow:hidden;clear:both;}.prototip .borderMiddle{position:relative;float:left;}.prototip .borderCenter{position:relative;float:left;height:100%;}.prototip_StemWrapper{position:relative;width:100%;height:auto;clear:both;}.prototip_StemBox{float:left;position:relative;}.prototip_Stem{width:100%;position:absolute;overflow:hidden;}.iframeShim{position:absolute;border:0;margin:0;padding:0;background:none;overflow:hidden;}.prototip .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.prototip .clearfix{display:inline-block;}/* IE Mac Hide \*/ .prototip .clearfix{display:block;}/* IE Mac Hide End */
	
.video_hdr_div { padding: 4px 0 3px 5px; margin: 0 auto; background-image: none; background-color: #f9f9f9; font-weight: bold; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-right-style: none; border-left-style: none; }
.video_hdr { color: #444; font-size: 13px; padding: 0; margin: 0; background-image: none; font-weight: normal; width: 700px; border-style: none; text-align: left; }

	
/* ------------------------------------------------------------------------------------------------------ END PORTFOLIO SPECIFIC STYLES */



/* ------------------------------------------------------------------------------------------------------ BEGIN NAVIGATION STYLES */



/* ------------------------------------------------------------------------------------------------------ END NAVIGATION STYLES */














/* ------------------------------------------------------------------------------------------------------ BEGIN OLD NAVIGATION STYLES */

.navigation {
	margin: 0;
	padding: 0;
	width: 500px;
	float: right;
	font-family: "Trebuchet MS";
	}

.navigation a, .navigation a:visited {
	color: #aeaeae;
	text-decoration: none;
	padding: 2px 0 2px 0;
	margin: 0;
	background: #fff;
	}
	
.navigation a:hover, .navigation a:visited:hover {
	color: #8cc63f;
	text-decoration: none;
	}

.navigation #last_link {
	padding-right: 0;
	}

.navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
	}
	
.navigation li {
	float: left;
	height: 33px;
	padding: 62px 0 0 0;
	margin: 0 0 0 25px;
	font-size: 13px;
	font-weight: bold;
	text-transform: lowercase;
	}
	
.navigation li:hover {
	background: url(../images/navigation_li_on_gray.jpg) no-repeat;
	}
	
.navgation li:hover a, .navigation li:hover a:visited {
	color: #8CC63F;	
}
	



	
.index #nav_home {
	display: none;
	}

.company #nav_company {
	background: url(../images/navigation_li_on.jpg) no-repeat;
	}
	
.company #nav_company a, .company #nav_company a:visited {
	color: #8cc63f;	
}

.company #nav_company li a, .company #nav_company li a:visited {
	color: #666;	
}

.company #nav_company li:hover a, .company #nav_company li:hover a:visited {
	color: #005AB6;	
}
	
.services #nav_services {
	background: url(../images/navigation_li_on.jpg) no-repeat;
	}
	
.services #nav_services a, .services #nav_services a:visited {
	color: #8cc63f;	
}

.services #nav_services li a, .services #nav_services li a:visited {
	color: #666;	
}

.services #nav_services li:hover a, .services #nav_services li:hover a:visited {
	color: #005AB6;	
}
	
.portfolio #nav_portfolio {
	background: url(../images/navigation_li_on.jpg) no-repeat;
	}
	
.portfolio #nav_portfolio a, .portfolio #nav_portfolio a:visited {
	color: #8cc63f;	
}

.portfolio #nav_portfolio li a, .portfolio #nav_portfolio li a:visited {
	color: #666;	
}

.portfolio #nav_portfolio li:hover a, .portfolio #nav_portfolio li:hover a:visited {
	color: #005AB6;	
}
	
.contact #nav_contact {
	background: url(../images/navigation_li_on.jpg) no-repeat;
	}
	
.contact #nav_contact a, .contact #nav_contact a:visited {
	color: #8cc63f;	
}

.contact #nav_contact li a, .contact #nav_contact li a:visited {
	color: #666;	
}

.contact #nav_contact li:hover a, .contact #nav_contact li:hover a:visited {
	color: #005AB6;	
}
	


#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 153px;
	w\idth: 153px;
	padding: 2px 0 0 0;
	margin: 14px 0 0 -11px;
	text-align: left;
	background: #e7e7e7 url(../images/nav_ul_bg.jpg) repeat-x;
	}

<!-- IE 6 HACK -->
* html #nav li ul {
	margin: 30px 0 0 -70px;	
}

<!-- IE 7 HACK -->
*:first-child+html #nav li ul {
	margin: 31px 0 0 -70px;
	padding: 2px 0 3px 0;
}
	
#nav li li {
	margin: 1px 3px 3px 3px;
	width: 137px;
	padding: 6px 0 10px 10px;
	color: #000;
	font-size: 12px;
	height: 13px;
	}

	
#nav li li:hover {
	background: #f2f2f2;
	border-top: 1px solid #d1d1d1;
	margin-top: 0;
}

#nav #nav_services ul {
	width: 226px;
}

#nav #nav_services li {
	width: 210px;	
}
	
#nav li li a {
	background: none;
	}
	
#nav li li li {
	font-size: 10px;
	}
	
#nav li li:hover {
	}
	
#nav li li a {
	color: #666;
	}
	
#nav li ul a:hover {
	color: #0972b8;
	}
	
#nav li ul ul {
	margin: -23px 0 0 165px;
	background: #fff;
	}
	
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
	left: -999em;
	}
	
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
	left: auto;
	}
	
#nav li:hover, #nav li.sfhover {
	
	}
	
#nav li:hover, #nav li.hover {
    position: static;
	}



/*

#nav, #nav ul {
	list-style: none;
	font-size: 11px;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	font-weight: bold;
	}
	
#nav a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 0;
	margin: 0;
	}
	
#nav a.daddy {
	background: transparent;
	padding: 0;
	}
	
#nav a:hover.daddy {
	background: transparent;
	}
	
#nav li {
	width: auto;
	background: transparent;
	padding: 0 18px 0 18px;
	text-transform: uppercase;
	line-height: 42px;
	float: left;
	font-size: 10px;
	background: url(../images/nav_li_bg.gif) 100% 0 no-repeat;
	}
	
#sub #nav li {
	background: url(../images/nav_li_bg_sub.gif) 100% 0 no-repeat;
	} */
	

	
/*	
	
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 175px;
	w\idth: 175px;
	padding: 0 0 0 10px;
	margin: 0 0 0 0;
	text-align: left;
	border: 1px solid #4e74b2;
	background: #fff;
	}
	
#nav li li {
	border-bottom: 1px solid #27528e;
	margin: 0 -10px 0 -10px;
	width: 175px;
	padding: 5px 0 0 10px;
	background: none;
	color: #000;
	font-size: 1em;
	}
	
#nav li li a {
	background: none;
	}
	
#nav li li li {
	font-size: 1em;
	}
	
#nav li li:hover {
	}
	
#nav li ul a {
	width: 145px;
	w\idth: 145px;
	color: #000;
	}
	
#nav li ul a:hover {
	color: #cae3c0;
	}
	
#nav li ul ul {
	margin: -23px 0 0 165px;
	background: #fff;
	}
	
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
	left: -999em;
	}
	
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
	left: auto;
	}
	
#nav li:hover, #nav li.sfhover {
	
	}
#nav a:hover {
	color: #cae3c0;
	text-decoration: none;
	}
	
#nav a:visited:hover {
	color: #cae3c0;
	text-decoration: none;
	}
	
#nav li:hover, #nav li.hover {
    position: static;
	}
	
/* ------------------------------------------------------------------------------------------------------ END OLD NAVIGATION STYLES */