/*
	Site: itiinternational.com
	Date Created: 08/26/2010
	Date Modified: 08/26/2010
	Author: Larry Chartier www.etw.ca
	Description: Core CSS File
	Additional CSS Files:
		1.
		2. 
		3. 

	WEB COLORS USED FOR THIS SITE
	---------------------------------------------------------------------
	#000000		Color		Used for: 
	#000000		Color		Used for: 
	#000000		Color		Used for: 
	#000000		Color		Used for: 
	#000000		Color		Used for: 
	#000000		Color		Used for: 
	#000000		Color		Used for: 	
	---------------------------------------------------------------------
*/

/* --------------------------- BASE REMOVALS --------------------------- */

:link, :visited { text-decoration: none }
ul { list-style: none }
h1,h2,h3,h4,h5,h6,pre,code { font-size: 1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,dl,dt,dd,input { margin: 0; padding: 0; font-weight: normal;}
a img, :link img, :visited img { border: none }
address { font-style: normal }
a, a:link, a:visited, a:hover, a:active { outline: 0; }
* {outline: 0;}


/* --------------------------- GLOBAL STYLES --------------------------- */

body {
	font-family: Helvetica,arial,sans-serif;
	font-size: 12px;
	color: #444;
	background: #e7e3df;}

h1 {font-size: 21px;}
h2 {font-size: 16px;}
h3 {font-size: 14px;font-weight: bold;}
h4 {font-size: 12px;font-weight: bold;}

p {line-height: 16px;}

br.clear {clear: both;}
div.wrapper {width: 960px;margin: 0 auto;}

/* HEADER 
------------------------------------------------------ */

div#header {background: url(iti-header-bg.png) repeat-x;height: 120px;width: 100%;}
div#header h2 {width: 255px;height: 120px;background: url(divider.png) 254px 4px no-repeat;float: left;}
div#header h2 a {background: url(iti-logo.png) no-repeat;margin: 26px 0 0 20px;display: block;text-indent: -99999px;width: 196px;height: 74px;}
div#header h3 {padding: 28px 0 0 18px;width: 205px;float: left;}
div#header h3 a {background: url(fleetsafer-logo.png) no-repeat;text-indent: -9999px;display: block;width: 200px;height: 69px;}

div#header h4 {padding: 36px 0 0 18px; width: 215px;float: left;}
div#header h4 a {background: url(mapeverywhere-logo.png) no-repeat;text-indent: -9999px;display: block;width: 215px;height: 69px;}

div#header h5 {padding: 36px 0 0 18px;width: 200px;float: left;}
div#header h5 a {background: url(fastmall-logo.jpg) no-repeat;text-indent: -9999px;display: block;width: 200px;height: 69px;}


/* CONTENT 
------------------------------------------------------ */

div#main {min-height: 200px;border-bottom: 1px solid #d5d0cc;padding-bottom: 20px;}
div.home {background: url(focal-bg.jpg) repeat-x #fff;}
div.internal {background: url(focal-bg.jpg) 0 -80px repeat-x #fff;}


div#main a {color: #06F;}
div#main a:hover {color: #000;text-decoration: underline;}

div#main div#leftside {width: 236px;float: left;}

div#main div#leftside div#nav {min-height: 280px;margin: 28px 0 0 0;background: url(nav-bg.png) no-repeat;padding: 3px 0 0 0;}
div#main div#leftside div#nav ul {margin:0;}
div#main div#leftside div#nav ul li {background: #fff; position:relative; border-bottom: 1px solid #fff;border-top:1px solid #e0e0e0;padding: 0 0 0 0;font-size: 14px;line-height:18px;font-weight: bold;margin: 0;}
div#main div#leftside div#nav ul li a {color: #a3a3a3;display: block;margin: 0;padding: 10px 0 10px 16px;}
div#main div#leftside div#nav ul li a.fleetsafer {color: #59964c;}
div#main div#leftside div#nav ul li a.fleetsafer span {font-size: 12px;color: #666;}
div#main div#leftside div#nav ul li a:hover {color: #333;text-decoration: none;}


div#main div#leftside div#nav ul li.active {background: #fff; border-bottom: 1px solid #fff; border-top:1px solid #e0e0e0; padding: 0 0 0 0; font-size: 14px; line-height:18px; font-weight: bold; margin: 0;}
div#main div#leftside div#nav ul li.active a {color: #a3a3a3;display: block;margin: 0;padding: 10px 0 10px 16px; background: #ececec;}
div#main div#leftside div#nav ul li.active a:hover {background: #ececec; text-decoration: none;}


/*INCLUDING THE .ACTIVE ONLY CONTROLS THE DROPDOWN OF GPS FLEET*/

/*div#main div#leftside div#nav ul li.active ul.submenu li a{color: #888888; background: #e8e8e8;}
div#main div#leftside div#nav ul li.active ul.submenu li a:hover{color: #000000; background: #fff;}*/

/*DELETING THE .ACTIVE ALLOWS THIS CODE TO CONTROL BOTH - DAVE 11-2011*/
div#main div#leftside div#nav ul li ul.submenu li a{color: #888888; background: #e8e8e8;}
div#main div#leftside div#nav ul li ul.submenu li a:hover{color: #000000; background: #fff;}


div#nav ul.submenu{
	width:236px;
	padding:0 0 0 20px;
	overflow:hidden;
	display:none;
	position:absolute;
	top:0;
	left:216px;
	z-index:9999;
}
div#nav ul li:hover > ul.submenu{
	display:block;
}





/*
div#main div#leftside div#nav ul li:hover {background: url(nav-active.png) no-repeat;text-decoration: none;}
div#main div#leftside div#nav ul li.active {background: url(nav-active.png) no-repeat;}
*/

div#main div#leftside div#nav ul li.active a {color: #b1552e;}



div#main div#leftside h2 {font-size: 20px;line-height: 24px;color: #555;margin-bottom: 5px;}
div#main div#leftside ul {}
div#main div#leftside ul li.pdf {background: url(pdf-icon.png) no-repeat;padding: 0 0 0 50px;line-height: 48px;}


div#main div#rightside {width: 684px;float: right;display: inline;}
div#main div#rightside h1.distracted {padding: 28px 0 54px 20px;}

div#main div#rightside h1.distracted a {background: url(on-the-road.png) no-repeat;width: 589px;height: 107px;display: block;text-indent: -9999px;} 
div#main div#rightside h1.distracted a:hover {background: url(on-the-road.png) 0 -105px no-repeat;}


/*
div#main div#rightside h1.distracted a {background: url(h1-distacteddriving.png) no-repeat;width: 566px;height: 107px;display: block;text-indent: -9999px;} 
div#main div#rightside h1.distracted a:hover {background: url(h1-distacteddriving.png) 0 -107px no-repeat;}
*/


div#main div#rightside h1.title {text-indent: -9999px;display: block;width: 680px;height: 36px;margin: 28px 0 54px 20px;}
div#main div#rightside h1.about {background: url(h2-aboutus.png) no-repeat;}
div#main div#rightside h1.fleetsafer {background: url(h2-fleetsafer.png) no-repeat;}
div#main div#rightside h1.proservices {background: url(h2-proservices.png) no-repeat;}
div#main div#rightside h1.tracking {background: url(h2-tracking.png) no-repeat;}
div#main div#rightside h1.immobilizer {background: url(h2-immobilizer.png) no-repeat;}
div#main div#rightside h1.skyPatrol {background: url(h2-skypatrol.png) no-repeat;}
div#main div#rightside h1.products {background: url(h2-products.png) no-repeat;}
div#main div#rightside h1.contact {background: url(h2-contactus.png) no-repeat;}
div#main div#rightside h1.privacy {background: url(h2-privacy.png) no-repeat;}
div#main div#rightside h1.vehicle {background: url(h2-vehicle.png) no-repeat;}
div#main div#rightside h1.asset {background: url(h2-asset.png) no-repeat;}
div#main div#rightside h1.personal {background: url(h2-personal.png) no-repeat;}
div#main div#rightside h1.fastmall {background: url(h2-fastmall.png) no-repeat;}
div#main div#rightside h2 {font-size: 20px;line-height: 24px;color: #555;margin: 0 20px 10px 20px;}
div#main div#rightside h2 span {font-size: 13px;}
div#main div#rightside h3 {font-size: 17px;line-height: 20px;color: #555;margin: 0 20px 10px 20px;}
div#main div#rightside h4 {font-size: 14px;line-height: 18px;color: #365256;margin: 0 20px 10px 20px;}
div#main div#rightside h4 span, div#main div#rightside h3 span {color: #333;font-size: 11px;font-weight: normal;}

div#main div#rightside p,div#main div#rightside ul, div#main div#rightside ol {font-size: 13px;line-height: 18px;margin: 0 20px 10px 20px;}
div#main div#rightside p span {color:red;}
div#main div#rightside p.required {font-size:11px;}

div#main div#rightside ul.disc li {list-style: disc;margin: 0 0 5px 20px;}
div#main div#rightside ul.tick li {padding-left: 24px;margin: 0 0 5px 0;background: url(tick.png) no-repeat;}
div#main div#rightside ul.arrow-med li {padding-left: 24px;margin: 0 0 5px 0;background: url(arrow-000-medium.png) no-repeat;}
div#main div#rightside ul.arrow li {padding-left: 24px;margin: 0 0 5px 0;background: url(arrow-000-small.png) no-repeat;font-size: 11px;}
div#main div#rightside ul li ul {margin: 5px 0;}


div#main div#rightside div.calltoaction {background: #dcebed;padding: 9px 0;border: 1px solid #c2d4d6;margin: 0 0 10px 0;}
div#main div#rightside div.calltoaction a.lm {background: url(learn-more.png) no-repeat;width: 211px;height: 30px;display: block;text-indent: -9999px;margin: 0 20px;float: left;}
div#main div#rightside div.calltoaction a.lm:hover {background: url(learn-more.png) 0 -30px no-repeat;}
div#main div#rightside div.calltoaction a.gs {background: url(get-started.png) no-repeat;width: 211px;height: 30px;display: block;text-indent: -9999px;margin: 0 20px;float: left;}
div#main div#rightside div.calltoaction a.gs:hover {background: url(get-started.png) 0 -30px no-repeat;}
div#main div#rightside div.calltoaction p {line-height: 30px;font-size: 16px;font-weight: bold;color: #333;float: left;margin: 0;padding: 0;}

div#main div#rightside img.fright {float: right;display: inline;margin: 0 0 20px 20px}
div#main div#rightside img.border {border: 1px solid #ccc;padding: 2px}
div#main div#rightside img.left {margin:0 0 22px 20px;}
div#main div#leftside img.pres {float: left;display: inline;margin: 5px; 0 20px 5px}
div#main div#leftside img.border {border: 1px solid #ccc;padding: 2px}
div#main div#leftside div#presentation {text-align: center;margin:0; color:#0066FF; font-size:14px; font-weight:bold; text-decoration:underline;}
div#main div#leftside div#presentation iframe {margin:0 0 20px 0;}
div#main div#rightside div.sub {padding: 20px; background: #dcebed; border: 1px solid #c2d4d6; margin: 0 0 10px 0;}
div#main div#rightside div.sub p {margin: 0 0 10px 0;}
div#main div#rightside div.sub p.nm {margin-bottom: 0;}
div#main div#rightside div.sub a.learn-more {width: 108px;height: 30px;text-indent: -9999px;display: block;background: url(learn-more-sm.png) no-repeat;margin-bottom: 10px}
div#main div#rightside div.sub a.learn-more:hover {background: url(learn-more-sm.png) 0 -30px no-repeat;}
div#main div#rightside div.sub a.contact-us {width: 108px;height: 30px;text-indent: -9999px;display: block;background: url(contact-us-sm.png) no-repeat;}
div#main div#rightside div.sub a.contact-us:hover {background: url(contact-us-sm.png) 0 -30px no-repeat;}
div#main div#rightside div.sub h3 {margin-left: 0;margin-bottom: 5px;}

div#main div#rightside table.contact {float:left;width:300px;margin:10px 20px 20px 0;}
div#main div#rightside table.contact td {vertical-align:top;font-size:12px;line-height:18px;color:#333;padding:0 0 5px 0;}
div#main div#rightside table.contact td.title {text-align:right;padding:0 20px 0 0;font-weight:bold;width:70px;}

div#main div#rightside form {margin-left: 20px;}
div#main div#rightside form p {margin:0;font-size:11px;font-weight:bold;}
div#main div#rightside form input.info {margin:0 0 12px 0;width:200px;padding:2px;}
div#main div#rightside form textarea {margin:0 0 12px 0;padding:2px;font-family:arial;font-size:11px;width:400px;height:120px;}

div#main table.report-table {border: 1px solid #ccc; margin:0 0 10px 20px;}
div#main table.report-table tr.bg {background-color:#E0E0E0}
div#main table.report-table td {padding:5px 0px 5px 5px;}
div#main table.report-table th.thHeader { background-color:#666; color:#fff; padding:6px 0 6px 4px; font-size:110%;}


/* FOOTER 
------------------------------------------------------ */

div#footer {padding: 20px 0;border-top:1px solid #fff;}
div#footer div.left {float: left;width: 236px;}
div#footer div.left img {}


div#footer div.right {float: right;width: 664px;display: inline;}
div#footer h5 {width: 357px;height: 24px;text-indent: -9999px;display: block;background: url(contact.png) no-repeat;}
div#footer p.phone {margin:0 0 10px 0;width: 307px;height: 21px;text-indent: -9999px;display: block;background: url(phone.png) no-repeat;float: left;}
div#footer p.email a {margin:0 0 10px 0;width: 181px;height: 21px;text-indent: -9999px;display: block;background: url(email.png) no-repeat;float: left;}
div#footer p.email a:hover {background: url(email-r.png) no-repeat;}
div#footer p.copy {clear: left;font-size: 11px;margin:0 0 10px 0;color:#666;}
div#footer a {color: #555;}
div#footer a:hover {color: #b1552e;}


/* FOOTER END
------------------------------------------------------ */

/*HOME PAGE SIDE BAR*/

.survey-results {
	padding: 5px;
	background: #dcebed;
	border: 1px solid #c2d4d6;
	width: 226px;
	margin:5px 0px 20px 0px;
	line-height:20px;
	text-align:center;
}

.video-sidebar {
	padding: 5px 0;
	width: 236px;
	margin:5px 0 10px 0;
	border-top:1px dashed #999;
}

.video-sidebar p {
	text-align:center;
	color:#0066FF;
	font-size:16px;
	padding:5px 0;
	font-weight:bold;
	line-height:1.2em;
}

.video-sidebar img {
	padding:5px 0; 
}

.opp-sidebar {
	margin:0;
	padding:5px 0;
	text-align:center;
	border-top:1px dashed #999;
}

.opp-sidebar img {
	padding-top:4px;
}

.video-fast {
	width: 620px;
	height: 268px;
	background: #fff;
	padding:8px 8px;
	margin:5px 10px;
	border:1px solid #CCC;
}

.video-fast img {
	float:right;
}

.video-fast iframe {
	float:left;
}