/* Body Layout */
html { overflow-y: scroll; }

body {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
	color: #FFFFFF;
	background: url(/images/bg.gif);
	text-align: center;
}

a:link, a:visited { color: #4F5053;	text-decoration: none; }
a:hover, a:active {	color: #FFFFFF;	text-decoration: none; background: #4F5053; }

p { line-height: 135%; margin: 0 0 15px 0; }

a img { border: 0px; }

h2 { margin: 0 0 23px; padding: 0; color: #C10435; font-size: 18px; }

/* Layout */
div#contentContainer {
	margin: 0 auto;
	width: 991px;
	padding: 0;
	text-align: left;
}

/* Header */
div#top { background: #000000; margin-bottom: 3px; }
div#logo { float: left; width: 273px; }
div#phone { float: right; width: 270px; }
div#hero { margin-bottom: -1px; }

/* Navigation */
div#nav { background: #D01144; margin-bottom: 3px; width: 991px; }

div#nav ul { margin: 0; padding: 0;}

div#nav ul li {
	list-style: none;
	display: inline;
	text-transform: uppercase;
	padding: 0 0 0 20px;
	float: left;
	background: #D01144; 
}

div#nav li, div#nav a {
	height: 27px;
	display: block;
}

div#nav ul li span { display: none; }

div#nav a:link, div#nav a:visited { color: #FFFFFF; text-decoration: none; }
div#nav a:hover, div#nav a:active { color: #000000; text-decoration: none; background: none; }

div#nav ul li#home a { width: 67px; background: url(/images/nav_home.gif) no-repeat; }
div#nav ul li#home a:hover { background: url(/images/nav_home.gif) 0px -27px no-repeat; }
div#nav ul li#homeOn a { width: 67px; background: url(/images/nav_home_on.gif) no-repeat; }

div#nav ul li#about a { width: 94px; background: url(/images/nav_about.gif) no-repeat; }
div#nav ul li#about a:hover { background: url(/images/nav_about.gif) 0px -27px no-repeat; }
div#nav ul li#aboutOn a { width: 94px; background: url(/images/nav_about_on.gif) no-repeat; }

div#nav ul li#services a { width: 110px; background: url(/images/nav_services.gif) no-repeat; }
div#nav ul li#services a:hover { background: url(/images/nav_services.gif) 0px -27px no-repeat; }
div#nav ul li#servicesOn a { width: 110px; background: url(/images/nav_services_on.gif) no-repeat; }

div#nav ul li#contact a { width: 109px; background: url(/images/nav_contact.gif) no-repeat; }
div#nav ul li#contact a:hover { background: url(/images/nav_contact.gif) 0px -27px no-repeat; }
div#nav ul li#contactOn a { width: 109px; background: url(/images/nav_contact_on.gif) no-repeat; }

div#nav ul li#join a { width: 127px; background: url(/images/nav_join.gif) no-repeat; }
div#nav ul li#join a:hover { background: url(/images/nav_join.gif) 0px -27px no-repeat; }
div#nav ul li#joinOn a { width: 127px; background: url(/images/nav_join_on.gif) no-repeat; }

div#nav ul li#news a { width: 70px; background: url(/images/nav_news.gif) no-repeat; }
div#nav ul li#news a:hover { background: url(/images/nav_news.gif) 0px -27px no-repeat; }
div#nav ul li#newsOn a { width: 70px; background: url(/images/nav_news_on.gif) no-repeat; }

div#nav ul li#gallery a { width: 85px; background: url(/images/nav_gallery.gif) no-repeat; }
div#nav ul li#gallery a:hover { background: url(/images/nav_gallery.gif) 0px -27px no-repeat; }
div#nav ul li#galleryOn a { width: 85px; background: url(/images/nav_gallery_on.gif) no-repeat; }

/* Content */
#main { background: url(/images/bg_content.gif);height:100%; }

div#content { 
	background: #000000;
	width: 399px;
	padding: 35px 35px 20px 35px;
	float: left;
	margin: 0 3px 3px 0;
}

div.panel {
	background: #000000;
	width: 125px;
	padding: 30px 23px 7px 23px;
	float: left;
	margin: 0 3px 3px 0;
	font-size: 11px;
}

div.panel ul  { padding: 0; margin: 0 0 23px 0; }

div.panel ul li {
	list-style: none;  
	line-height: 135%; 
	background: url(/images/bullet.gif) no-repeat left 3px;
	padding-left: 16px;
}

div.panel ul.noArrow li { background: none; color: #4F5053; padding-left: 0; }

div#clients { width: 991px; margin: 3px 0 -4px 0; float: left; }

div#contactBar { background: #000000; }

div.contactLogo { width: 213px; float: left; }

div#clientBar { width: 773px; float: left; background: #000000; height: 72px; text-align: right; padding-right: 5px; }

div.contactInfo {
	float: left;
	padding: 23px 25px;
	height: 26px;
	font-size: 11px;
}

a.info{
    position: relative; /*this is the key*/
    z-index: 24; 
}

a.info:hover{ z-index:25; }

a.info span{ display: none; }

a.info:hover span { /*the span will display just on :hover state*/
    display: block;
    position: absolute;
    left: 135px;
   	background: #000000;
	width: 125px;
	height: 212px;
	padding: 28px 23px 7px 23px;
	line-height: 135%;
	color: #4F5053;
}

/* Footer */
div#footer { 
	background: #000000; 
	margin: 3px 0; 
	text-align: center;
	font-size: 10px;
	color: #4F5053;
	padding: 6px;
}

/* Contact */
form {
	padding: 0;
	margin: 0;
}

.missing { border: 2px solid #D01144; }

input, textarea, select {
	border: 1px solid #4F5053;
	font-size: 12px;
	padding: 3px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	margin-bottom: 5px;
	width: 200px;
}

select { padding: 0; }

.submit { border: none; padding: 0; width: 40px; }

/* Services Panel */
#brand { top: -67px; }
#prod { top: -82px; }
#leaflet { top: -96px; }
#distrib { top: -110px; }
#exhib { top: -124px; }
#road { top: -138px; }
#demo { top: -152px; }
#admin { top: -166px; }


#brand, x:-moz-any-link { top: -69px; }
#brand, x:-moz-any-link, x:default { top: -69px; }
#prod, x:-moz-any-link { top: -84px; }
#prod, x:-moz-any-link, x:default { top: -84px; }
#leaflet, x:-moz-any-link { top: -99px; }
#leaflet, x:-moz-any-link, x:default { top: -99px; }
#distrib, x:-moz-any-link { top: -114px; }
#distrib, x:-moz-any-link, x:default { top: -114px; }
#exhib, x:-moz-any-link { top: -129px; }
#exhib, x:-moz-any-link, x:default { top: -129px; }
#road, x:-moz-any-link { top: -144px; }
#road, x:-moz-any-link, x:default { top: -144px; }
#demo, x:-moz-any-link { top: -159px; }
#demo, x:-moz-any-link, x:default { top: -159px; }
#admin, x:-moz-any-link { top: -174px; }
#admin, x:-moz-any-link, x:default { top: -174px; }


/* Miscellaneous */
div#logo a:hover, div#logo a:active,
div#scroll a:hover, div#scroll a:active { background: none; }

.red { color: #993333; }
.title { margin-bottom: 23px; padding: 0; }
.thumb { margin: 0 2px 0 0; width: 40px; float: left; }

div.clear {
	margin: 0;
	padding: 0;
	clear: both;
	height: 0.1em;
	overflow: hidden;
}