@charset "UTF-8";
/* 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Title: Q Inc
Author: InterDevil.com / XHTMLiT.com
Website: Http://www.XHTMLiT.com / Http://www.INTERDEVIL.com
Description: This is the stylesheet, you can remove this entire note.
Created: June 24, 2008
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
*/

/* ==== GENERAL STYLES ==== */
body {margin:0;padding:0;}
img {vertical-align:middle;border:none;}
a {outline:none;}
.clear {clear:both;}
div#body-wrap {width:850px;margin:0 auto;padding:0;}

/* === IMAGE PRELOAD === */
img.preload {display:none;}

/* === HEADER STYLES === */
div#header {
	width:100%;
	height:160px;
	margin:0;
	padding:0;
}
   #header img#logo {
	padding:0;
	float:left;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 38px;
}
   #header p#tollfree {width:340px;margin:0;padding:56px 17px 0 0;font-family:Helvetica;font-size:15px;font-weight:normal;color:#636363;text-align:right;float:right;}
   
/* === HEADER -> NAVIGATION === */
   #header #nav {
	width:565px;
	padding:0;
	float:right;
	clear:right;
	margin-top: 15px;
	margin-right: 17px;
	margin-bottom: 0;
	margin-left: 0;
}
   #header #nav ul {margin:0;padding:0;list-style-type:none;}
   #header #nav ul li {margin:0;padding:0;float:left;}
   
   #header #nav ul li#steps a {
	width:155px;
	height:39px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	color:#464646;
	text-align:center;
	text-decoration:none;
	background:url(images/nav-3steps_norm.gif) no-repeat;
	display:block;
	padding-top: 22px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
   #header #nav ul li#steps:hover a {background:url(images/nav-3steps_roll.gif) no-repeat;}
   
   #header #nav ul li#whowework a {
	width:140px;
	height:39px;
	padding:22px 0 0 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	color:#464646;
	text-align:center;
	text-decoration:none;
	background:url(images/nav-whowework_norm.gif) no-repeat;
	display:block;
}
   #header #nav ul li#whowework:hover a {background:url(images/nav-whowework_roll.gif) no-repeat;}
   
   #header #nav ul li#ourteam a {
	width:85px;
	height:39px;
	padding:22px 0 0 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	color:#464646;
	text-align:center;
	text-decoration:none;
	background:url(images/nav-ourteam_norm.gif) no-repeat;
	display:block;
}
   #header #nav ul li#ourteam:hover a {background:url(images/nav-ourteam_roll.gif) no-repeat;}
   
   #header #nav ul li#aboutus a {
	width:81px;
	height:39px;
	padding:22px 0 0 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	color:#464646;
	text-align:center;
	text-decoration:none;
	background:url(images/nav-aboutus_norm.gif) no-repeat;
	display:block;
}
   #header #nav ul li#aboutus:hover a {background:url(images/nav-aboutus_roll.gif) no-repeat;}
   
   #header #nav ul li#contactus a {
	width:103px;
	height:39px;
	padding:22px 0 0 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	color:#464646;
	text-align:center;
	text-decoration:none;
	background:url(images/nav-contactus_norm.gif) no-repeat;
	display:block;
}
   #header #nav ul li#contactus:hover a {background:url(images/nav-contactus_roll.gif) no-repeat;}
   
/* ==== SERVICE TABS === */
div#service-tabs {
	width:845px;
	height:345px;
	margin: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

/* ==== SERVICE TABS -> CONTENT AREA RIGHT === */
   #service-tabs #group4 {width:598px;height:345px;margin:0;padding:0;background:url(images/group4_bg.gif) no-repeat left top;float:left;}
   #service-tabs #group4 h2 {
	padding:40px 40px 40px 0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:36px;
	font-weight:normal;
	color:#283a97;
	text-align:right;
	line-height:46px;
}
   #service-tabs #group4 p {
	width:428px;
	margin:0 0 0 82px;
	padding:0 0 0 37px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
	color:#252525;
	text-align:left;
	line-height:18px;
	background:url(images/tabs-arrow-left.gif) no-repeat left;
}
   
/* === SERVICE TABS -> TABS LEFT ==== */
   #service-tabs #tabs {width:247px;height:345px;margin:0;padding:0;background:url(images/tabs_bg.gif) no-repeat right bottom;float:left;}
   #service-tabs #tabs p {margin:0;padding:12px 0 5px 0;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;font-weight:normal;color:#4c4c4c;text-align:center;line-height:20px;}
   #service-tabs #tabs ul {margin:0;padding:0;list-style-type:none;}
   #service-tabs #tabs ul li {margin:0;padding:0;}
   
   #service-tabs #tabs ul li#red a {
	width:190px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#333333;
	text-align:left;
	text-decoration:none;
	background:url(images/tab_red_norm.gif) no-repeat left;
	display:block;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 58px;
	height: 48px;
}
   #service-tabs #tabs ul li#red:hover a {background:url(images/tab_red_hover.gif) no-repeat left;}
   #service-tabs #tabs ul li#red.active a {background:url(images/tab_red_active.gif) no-repeat left;}
   
   #service-tabs #tabs ul li#blue a {width:190px;height:48px;padding:20px 0 0 58px;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#333333;text-align:left;text-decoration:none;background:url(images/tab_blue_norm.gif) no-repeat left;display:block;}
   #service-tabs #tabs ul li#blue:hover a {background:url(images/tab_blue_hover.gif) no-repeat left;}
   #service-tabs #tabs ul li#blue.active a {background:url(images/tab_blue_active.gif) no-repeat left;}
   
   #service-tabs #tabs ul li#green a {width:190px;height:48px;padding:20px 0 0 58px;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#333333;text-align:left;text-decoration:none;background:url(images/tab_green_norm.gif) no-repeat left;display:block;}
   #service-tabs #tabs ul li#green:hover a {background:url(images/tab_green_hover.gif) no-repeat left;}
   #service-tabs #tabs ul li#green.active a {background:url(images/tab_green_active.gif) no-repeat left;}
   
   #service-tabs #tabs ul li#orange a {width:190px;height:48px;padding:20px 0 0 58px;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#333333;text-align:left;text-decoration:none;background:url(images/tab_orange_norm.gif) no-repeat left;display:block;}
   #service-tabs #tabs ul li#orange:hover a {background:url(images/tab_orange_hover.gif) no-repeat left;}
   #service-tabs #tabs ul li#orange.active a {background:url(images/tab_orange_active.gif) no-repeat left;}
   
/* ==== CONTENT STYLES ==== */
div#content {width:100%;margin:0;padding:0;}
	
/* ==== CONTENT -> SIDEBAR ==== */
   #content #sidebar {width:247px;margin:0;padding:0;float:left;}

/* ==== CONTENT -> SIDEBAR -> TABS === */
   #content #sidebar #tabs {width:249px;height:440px;margin:0;padding:0;background:url(images/tabs_bg2.gif) no-repeat right top;float:left;}
   #content #sidebar #tabs p {margin:0;padding:12px 0 5px 0;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;font-weight:normal;color:#4c4c4c;text-align:center;line-height:20px;}
   #content #sidebar #tabs ul {margin:0;padding:0;list-style-type:none;}
   #content #sidebar #tabs ul li {margin:0;padding:0;}
   
   #content #sidebar #tabs ul li#red a {width:190px;height:48px;padding:20px 0 0 58px;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#333333;text-align:left;text-decoration:none;background:url(images/tab_red_norm.gif) no-repeat left;display:block;}
   #content #sidebar #tabs ul li#red:hover a {background:url(images/tab_red_hover.gif) no-repeat left;}
   #content #sidebar #tabs ul li#red.active a {background:url(images/tab_red_active.gif) no-repeat left;}
   
   #content #sidebar #tabs ul li#blue a {width:190px;height:48px;padding:20px 0 0 58px;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#333333;text-align:left;text-decoration:none;background:url(images/tab_blue_norm.gif) no-repeat left;display:block;}
   #content #sidebar #tabs ul li#blue:hover a {background:url(images/tab_blue_hover.gif) no-repeat left;}
   #content #sidebar #tabs ul li#blue.active a {background:url(images/tab_blue_active.gif) no-repeat left;}
   
   #content #sidebar #tabs ul li#green a {width:190px;height:48px;padding:20px 0 0 58px;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#333333;text-align:left;text-decoration:none;background:url(images/tab_green_norm.gif) no-repeat left;display:block;}
   #content #sidebar #tabs ul li#green:hover a {background:url(images/tab_green_hover.gif) no-repeat left;}
   #content #sidebar #tabs ul li#green.active a {background:url(images/tab_green_active.gif) no-repeat left;}
   
   #content #sidebar #tabs ul li#orange a {width:190px;height:48px;padding:20px 0 0 58px;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#333333;text-align:left;text-decoration:none;background:url(images/tab_orange_norm.gif) no-repeat left;display:block;}
   #content #sidebar #tabs ul li#orange:hover a {background:url(images/tab_orange_hover.gif) no-repeat left;}
   #content #sidebar #tabs ul li#orange.active a {background:url(images/tab_orange_active.gif) no-repeat left;}
   
/* ==== CONTENT -> SIDEBAR -> SIDE NOTE (WITH QUOTE) ==== */
   #content #sidebar #sidenote {width:200px;margin:-40px auto 0 auto;padding:30px 0 0 0;background:url(images/sidenote_quotes.gif) no-repeat top left;}
   #content #sidebar #sidenote p {width:200px;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#636363;text-align:left;}
   #content #sidebar #sidenote p.more {text-align:right;}
   #content #sidebar #sidenote p.more a {color:#636363;text-decoration:underline;}
   
/* ==== CONTENT -> SIDEBAR -> SHADOW BOX (These can be simply recreated using the same styles as below, copy and paste usually works the best :D ) ==== */
   #content #sidebar .shadow-box {width:250px;margin:10px auto;padding:0;background:url(images/shadow-box_bg.gif) repeat-y center;}
   #content #sidebar .shadow-box h1 {margin:0 0 0 25px;padding:0;font-family:Georgia, "Times New Roman", Times, serif;font-size:22px;font-weight:normal;color:#273996;text-align:left;}
   #content #sidebar .shadow-box p {margin-left:25px;margin-right:20px;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#636363;text-align:left;}
   #content #sidebar .shadow-box p.icon {padding-left:75px;background:url(images/download-paperwclip.gif) no-repeat top left;}
   #content #sidebar .shadow-box p.more {margin-right:20px;text-align:right;}
   #content #sidebar .shadow-box p.more a {color:#636363;text-decoration:underline;}
   #content #sidebar .shadow-box p a {color:#636363;text-decoration:underline;} 
   #content #sidebar .shadow-box label {width:50px;margin:10px 0 0 25px;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#636363;text-align:left;float:left;} 
   #content #sidebar .shadow-box input {width:151px;height:21px;margin:5px 0 0 0;padding:5px 5px 0 5px;border:0;background:url(images/download-input_bg.gif) no-repeat top left;float:left;}
   #content #sidebar .shadow-box input.button {width:99px;height:30px;margin:10px 0 0 85px;padding:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#636363;text-align:center;background:url(images/sidebar-button_bg.gif) no-repeat;outline:none;cursor:pointer;} 
   
/* ==== CONTENT -> CONTEXT ==== */
div#content #context {width:555px;margin:0;padding:20px 0 60px 25px;float:left;}
   #content #context h1 {
	margin:0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:22px;
	font-weight:normal;
	color:#273996;
	text-align:left;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
   #content #context h2 {font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;color:#363636;text-align:left;}
   #content #context p {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#363636;text-align:left;line-height:22px;}
   #content #context p.quote {width:70%;margin:0 auto;padding:0 0 0 65px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;font-weight:normal;color:#636363;text-align:left;background:url(images/sidenote_quotes.gif) no-repeat left;}
   #content #context img.placer {margin:0 0 10px 10px;float:right;}
   #content #context ul.numbered {margin:0 0 0 25px;padding:0;list-style-type:decimal;}
   #content #context ul.disc {
	padding:0;
	list-style-type:disc;
	margin-top: 15;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 25px;
}
   #content #context ul li {
	padding:0 0 10px 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:normal;
	color:#363636;
	text-align:left;
	line-height:22px;
}
   
/* ==== CONTENT -> CONTEXT -> BIGGER SHADOWBOX (CONTACT FORM) (This can also be recreated by copy and paste) ==== */
   #content #context .big-shadowbox {width:565px;margin:0;padding:0;background:url(images/shadow-box_big_bg.gif) repeat-y left;text-align:center;}
   #content #context .big-shadowbox h1 {margin:0 20px;padding:0;font-family:Georgia, "Times New Roman", Times, serif;font-size:22px;font-weight:normal;color:#273996;text-align:left;}
   #content #context .big-shadowbox p {margin:0;padding:10px 20px;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#363636;text-align:left;line-height:22px;}
   #content #context .big-shadowbox p a {color:#636363;text-decoration:underline;} 
   
/* ==== CONTENT -> CONTEXT -> BIGGER SHADOWBOX (CONTACT FORM INPUT AND TEXTAREA STYLES) ==== */
   #content #context .big-shadowbox input {width:172px;height:27px;margin:15px 10px 0 5px;padding:5px;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#363636;text-align:left;background:url(images/contactus_input.gif) no-repeat;border:none;float:left;}
   #content #context .big-shadowbox textarea {width:423px;height:90px;margin:15px 10px 0 5px;padding:5px;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#363636;text-align:left;background:url(images/contactus_textarea.gif) no-repeat top left;border:none;}
   #content #context .big-shadowbox label {margin:20px 0 0 20px;padding:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#363636;text-align:right;float:left;}
   #content #context .big-shadowbox label.left {width:85px;}
   #content #context .big-shadowbox label.right {width:50px;margin-left:5px;}
   #content #context .big-shadowbox input.button {width:75px;height:30px;margin:15px auto 0 auto;padding:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#363636;text-align:center;border:none;background:url(images/contactus_send_bg.gif) no-repeat center;float:none;cursor:pointer;}

/* ==== BOTTOM CONTENT STYLES (MAIN PAGE OR LANDING PAGE ONLY) ==== */
div#bottom-content {width:843px;margin:0;padding:40px 0 60px 0;background:url(images/landing-bottom_content_bg.gif) no-repeat top left;}
   #bottom-content .text-box {width:245px;margin:0 28px 0 0;padding:0;float:left;}
   #bottom-content .text-box h1 {margin:0;padding:0;font-family:Georgia, "Times New Roman", Times, serif;font-size:22px;font-weight:normal;color:#273996;text-align:center;}
   #bottom-content .text-box p {font-family:Helvetica;font-size:14px;font-weight:normal;color:#636363;text-align:left;line-height:20px;}
   #bottom-content .text-box p.more {text-align:right;}
   #bottom-content .text-box p.more a {color:#636363;text-decoration:underline;}
   #bottom-content .text-box ul#list {margin:0 0 0 25px;padding:0;list-style-type:decimal;color:#636363;font-weight:bold;}
   #bottom-content .text-box ul#list li {font-family:Helvetica;font-size:14px;font-weight:normal;color:#636363;text-align:left;line-height:20px;}
   #bottom-content .text-box ul#clients {margin:10px 0 0 25px;padding:0;list-style-type:disc;color:#636363;font-weight:bold;}
   #bottom-content .text-box ul#clients li {font-family:Helvetica;font-size:14px;font-weight:normal;color:#636363;text-align:left;line-height:25px;}
   
/* ==== FOOTER STYLES ==== */
div#footer {width:100%;height:170px;margin:0;padding:30px 0 0 0;background:url(images/footer_bg.gif) no-repeat top;}
   #footer p {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#464646;text-align:center;}
   #footer ul {margin:0;padding:0;list-style-type:none;}
   #footer ul.nav1 {width:65%;margin:0 auto;}
   #footer ul.nav2 {width:45%;margin:5px auto 10px auto;}
   #footer ul li {margin:0;padding:0 5px;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:normal;color:#464646;text-align:center;float:left;border-right:1px solid #464646;}
   #footer ul li a {color:#464646;text-decoration:underline;}
#header img#logo-header {
	padding:0;
	float:left;
	margin-top: 0px;
	margin-right: 0;
	margin-left: 20px;
	margin-bottom: 0px;
}
#landing-header-space {
	height: 15px;
}
#body-wrap #footer .credit {
	font-size: 11px;
	color: #666666;
}