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

/* updated april 18, 2010; version for test site  
 * includes styles for directions page 
 * updated june 22 for cargo screening menu items
 * updated june 23 with code to place home page seal and
 *   placement of video in carousel
 * updated july 6 - new color for send button on form
 */

/*-------------------------------------------------------------

	Default styles

--------------------------------------------------------------*/

body { 
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 100%;*/
	font-size: 18px;		
	}

h1, h2, h3, h4, h5, h6 {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;	
	margin: 0;	}
	
h1	{	font-size: 1.1em;	
		letter-spacing: 1px;
		line-height: 1.1em;
		font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
		color: rgb(0, 102, 185);	}
h2	{	font-size: .9em;		
		font-family: "Arial Narrow",Arial, Helvetica, sans-serif;
		line-height: 1.1em;
		margin-top: 1.2em;
		margin-bottom: .8em;
		color: rgb(0, 102, 185);}
h3	{	font-size: .625em;	
		font-weight: 700;
		line-height: 1.1em;
		margin-bottom: .3em;
		}
p	{	font-size: .625em;
		margin: .845em 0;
		line-height: 1.76em;	}
li	{	font-size: .625em;	} 
dt	{	font-size: .55em;		
		font-weight: 600;
		line-height: 1.5em;}
dd	{	font-size: .55em;
		margin: 0;
		line-height: 1.5em;
		color: rgb(0, 102, 185);	}
		
a {
	color: rgb(0, 0, 0);
	text-decoration: none;	}
	
a:link, a:visited {
	color: rgb(0, 102, 185);
	text-decoration: none; }
	
a:hover, a:active {	color: rgb(205, 24, 31);	}

.last	{
	margin-bottom: 0 !important;
	padding-bottom: 0  !important;
	}

	/*some kludgie overrides */
		
#about p	{margin-top: 0;}
#about h1	{margin-bottom: .5em;}

h1.billboard_title {
	font-size: .85em;
	z-index: 10;
	padding-bottom: 2px;}	
	
h1.continue { padding-top: 20px; }
	
.indent { padding-left: 1em;	}

	/* for directions page */
.twocol p	{
	line-height: 1.32em;
	margin: 0;	}
		


/*-------------------------------------------------------------

	Grid

--------------------------------------------------------------*/

#page {
	position: relative;
	display: block;
	margin: 22px auto;
	width: 900px;		}

	
/*-------------------------------------------------------------

	Grid rows

--------------------------------------------------------------*/
	
.row {
	position: relative;
	display: block;
	margin: 0 auto;		}
	
#header, .header {
	position: relative;
	display: block;
	margin: 0 auto;
	height: 115px;		}
	
#home .header {
	position: relative;
	display: block;
	margin: 0 auto;
	height: 200px;		}
	
.navbar	{
	height: 25px;	}
	
#content {	
	padding-top: 44px;
	padding-left: 25px;		}	/* added padding to overcome ie7 margin shift */
	
	
#home #content {
	padding-top: 28px;	
	padding-left: 25px;		}	/* ditto */
	
#footer {	height: 30px; 	}


/*-------------------------------------------------------------

	Grid - Columns

--------------------------------------------------------------*/
	
.column {
	position: relative;
	display: block;
	float: left;		}
	
.alignclear	{	clear:both;	}

.header #logo_container {	
	width: 290px;
	margin: 20px 0 0 25px;
	_margin-left: 12px;	}			/* IE 6 hack */

#home .header #logo_container {		
	/*width: 347px;  was 407px */
	width: 393px;
	height: 139px;	}

#home .header #movie_container {	
	width: 468px;	
	height: 200px;	
	float: right;
	 }
	
ul#mainmenu {
	float: right;	}

#main {	width: 550px;
	padding-bottom: 30px;	}			
			
#home #main {	width: 560px;	}		
		
#sidebar {	
	width: 284px;
	padding-left: 26px;		/* padding rather than margin for ie7 */
	padding-bottom: 20px;
	float: left; } 

#home #sidebar {	
	width: 280px;	
	padding-left: 30px;	}
	
	

	

/*-------------------------------------------------------------

	Grid - Sections

--------------------------------------------------------------*/
	
.section {
	position: relative;
	display: block;		}
	
/*billboards are in home page sidebar */	
dl.billboard{
	width: 274px;
	height: 113px;
	margin-bottom:4px; /* was 26px */	}
.billboard dt, .billboard dd {
	margin-left: 145px;
	margin-right: 14px;	} /*WAS 18PX */
.billboard dt { padding-top: 12px; }

.billboard dd.description {padding-top: 12px;}
	
/*-------------------------------------------------------------

	Grid - Sections - Slideshow

--------------------------------------------------------------*/
	
#slideshow {
	position: relative;
	width: 284px;
	height: 398px;		}

#slideshow dt, #slideshow dd {
	margin-left: 23px;
	margin-right: 29px;	}

/* window thru which images are seen */
#slideshow div.scrollable {
	position: relative;
	overflow: hidden;
	top: 22px;
	left: 23px;
	width: 230px;
	height: 200px;	
	margin-bottom: 30px;}
	
/*strip that contains images and gets scrolled */
.scrollable .items {
	position: absolute;
	clear: both;
	width: 10000em; }
.scrollable img {
	float:left;
	width: 230px;
	height: 200px; }
	
/* for video ... may or may not be used */
.scrollable .video_container {
	float:left;
	width: 230px;
	height: 200px; 
	margin: 0;
	padding: 0;}

/* toggles caption for carousel - first kludgie version */
/* these apply just to engineering and design pages */
dl .video_description_drop { display: block;	}
dl .video_description_vibration { display: none;	}

/* these apply to all others */
dl .video_description {display: block; }
dl .default_description { display: none; }	


/*-------------------------------------------------------------

	Grid - Sections - footer

--------------------------------------------------------------*/	
	
#footer {
	line-height: 30px;
	font-size: 9px;
	}

#footer .copyright {	
	float: left;	
	padding-top: 4px;
	padding-left: 25px;	}

	
#footer .credit {
	float: right;
	padding-top: 4px;
	padding-right: 20px;	}
	
/*-------------------------------------------------------------

	Grid - Sections - Form

--------------------------------------------------------------*/


#comment-form { 
	padding-bottom: 30px;
	border-bottom: 1px solid #000000;
	width: 500px;	}

#comment-form fieldset {
	margin: 0 0 8px 0;	}
	
#comment-form fieldset label 	{
	display: block;
	margin: 3px 0;
	color: rgb(0, 102, 185);
	font-size: .45em;
	}
	
#comment-form fieldset input {
	width: 170px;
	height: 16px;
}

#comment-form fieldset textarea {
	width:490px;
	height: 66px;
}
	
#comment-form fieldset input, #comment-form input,
#comment-form fieldset textarea {
	font-size: .65em;
	background-color: rgb(240, 240, 240);
	border: none;	}

#comment-form fieldset input:focus,
#comment-form fieldset textarea:focus	{
	border: 1px solid rgb(0, 102, 185);	}
	
#comment-form #button_container	{
	margin: 0;
	padding: 0;
	width: 100%;	
	background-color: #ffffff;	}

/* the submit button */	
#submit { 
	float: right;
	margin-top: 10px;	}
	
#button_container input.button {
	background-color: #c6e9fa;
	cursor: pointer;
	color: rgb(0, 102, 185);
	}

.form_intro	{
	font-size: .6em;
	width: 491px;	
	line-height: 1.3em;
	padding-bottom: 10px;	}
	
.options	{
	float: left;
	margin: 0;
	padding: 0;}
		
#packaging {
	width:270px;	}
	
#exporting {
	width:230px;	}
	
.options label {
	font-size: .6em;
	padding-left: .5em;	}
		
.form_subtitle {
		font-size: .8em;	
		letter-spacing: 1px;
		line-height: 1.1em;
		font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
		color: rgb(0, 102, 185);
		margin:0 0 8px 0;
		padding:0;	}
		
#contact #response	{
	border: 1px solid rgb(0, 102, 185);
	padding-left: 20px;
	margin-top: 20px; 
	margin-left: 25px;
	width: 488px;	}
	
label.error {color: rgb(159, 25, 27);}	

		
/*-------------------------------------------------------------

	Grid - Sections - Contact addresses
	

--------------------------------------------------------------*/

.threecol	{	
	width: 183px;
	float: left; 
	padding-top: 20px;}
	
table { 
	font-size: .6em;
	line-height: 1.4em; 
	text-align: left;	}
	
table.location img { 
	display: block; 
	padding-bottom: 14px;	}
	
table.location th { 
	width: 42px; 
	font-weight: bold;	
	padding-bottom: 3px;	}
	
table.location th, table.location td { 	
	padding-bottom: 0px;	}	

table.location td.indent	{ padding-left: 8px;}	

		
/*-------------------------------------------------------------

	Grid - Sections - Worldwide offices and Directions pages
	

--------------------------------------------------------------*/

#iemessage { 
	display: none;
	_display: block;
	_padding: 25px 30px 400px 25px;}
	
#worldwide_offices #content, #directions #content { 
	_display: none;	}

/* left column on Worldwide offices page */	
#main_offices {
	width: 420px;
	padding-bottom: 30px;	}

/* right column on Worldwide offices page */	
#mapframe {
	width: 425px;
	padding-right: 26px;
	padding-bottom: 20px;
	float: right;	}

/* div that holds the map */	
#map {
	width: 370px;
	height: 300px;
	margin-left: 20px;
	margin-top:20px;
	margin-bottom:120px;	}
	
#worldwide_offices th	{
	color: rgb(0, 102, 185);
	font-size: .75em;
	padding-bottom: 6px;
	text-align: left;
	}
	
#cityList	{
	width: 220px;
	height: 120px;
	padding: 3px;
	background-color: rgb(240, 240, 240);	}
	
#worldwide_offices table td {
	vertical-align: top;	}
	
	/* divs to hold columns of info for office descriptions */
.twocol {
	width: 165px;
	height: 240px;
	margin-right: 26px;	
	float: left;
	position: relative;}
	
.twocol img { padding-bottom: 9px; } 



/*-------------------------------------------------------------

	Navigation Menu
	
	note: when adding secondary menu item, must change height
	of popup menu, AND add body id under "highlight current 
	section in nav bar so the top-level menu item will be
	highlighted when the new page is displayed
--------------------------------------------------------------*/

	/* nav bar items */

ul#mainmenu li.primary {
	float: left;   /*floating to accommodate child floats */
	position:relative;}
	
ul#mainmenu li.primary a {
	display: block;
	float: left;
	padding: 0 23px;  /*was 26px */
	line-height: 25px;	
	color: rgb(255, 255, 255);
	text-decoration: none;	}
	
/* highlight current section in nav-bar. Every page must be listed
	note that some pages share a body id	*/
	
ul#mainmenu li.primary a:hover, ul#mainmenu li.primary a:active,
ul#mainmenu li.primary a.current,
body#home ul#mainmenu li#home_link a,
body#corrugated ul#mainmenu li#products_link a,
body#protective ul#mainmenu li#products_link a,
body#wood ul#mainmenu li#products_link a,
body#engineering ul#mainmenu li#support_link a,
body#warehousing ul#mainmenu li#support_link a,
body#catalog ul#mainmenu li#support_link a,
body#international ul#mainmenu li#support_link a,
body#cargo_screening ul#mainmenu li#support_link a,
body#contact ul#mainmenu li#contact_link a,
body#contact_forwarding ul#mainmenu li#contact_link a,  /*added */
body#about ul#mainmenu li#about_link a,
body#directions ul#mainmenu li#contact_link a,	/*added */

body#international_forwarding ul#mainmenu li#services_link a,

body#international_packing ul#mainmenu li#packing_link a,
body#international_shipping ul#mainmenu li#shipping_link a,

body#international_related_services ul#mainmenu li#related_link a,

body#worldwide_offices ul#mainmenu li#shipping_link a,
body#worldwide_offices ul#mainmenu li#services_link a
{
	background-color: rgb(205, 24, 31);	}
	
/* exceptions for first level menu items that are a link */
	
ul#mainmenu li#about_link a:hover, ul#mainmenu li#about_link a:active,
ul#mainmenu li#home_link a:hover, ul#mainmenu li#home_link a:active {
	color: rgb(255, 211, 0);	}
	
/* 
 * blocks that hold popup menu ... HEIGHT of each imust be specified
 *	according to number menu items. 23px for each item if IE6; 22 for all others
 */

ul#mainmenu li.primary ul {
	background-color: rgb(159, 25, 27);
	position: absolute;
	z-index: 10;
	display: none;
	_zoom: 1;				/* ie 6 hack */
 }
 
 /* for hp */
	
ul#mainmenu li#products_link ul { 
	width: 158px;
	top: -88px;
	_top: -92px;
	left: 0;	}
	
ul#mainmenu li#support_link ul { 
	width: 200px;
	top: -110px;
	_top: -115px;
	left: 0;	}
	

/*  for hf   */

ul#mainmenu li#services_link ul {
	width: 170px;
	top: -88px;
	_top: -92px; 
	left: 0;}

/*  for hi  */

ul#mainmenu li#packing_link ul { 
	width: 133px;
	top: -132px;
	_top: -138px;
	left: 0;	}
	
ul#mainmenu li#shipping_link ul { 
	width: 190px;
	top: -66px;
	_top: -69px;
	left: 0;	}
	
ul#mainmenu li#related_link ul { 
	width: 170px;
	top: -132px;
	_top: -138px;
	left: 0;	}
	
/* all */
	
ul#mainmenu li#about_link ul  {
	width: 84px;
	top: -22px;
	_top: -23px;
	left: 0;	}
	
ul#mainmenu li#contact_link ul {
	width: 84px; /* was 88 */
	top: -44px;
	_top: -46px;
	left: 0;	}
	
/*  menu items in popups*/
		
ul#mainmenu li.primary ul li {
	_width: auto;
	_height: auto;
	_border-bottom: 1px solid rgb(159, 25, 27);
}
	
		
ul#mainmenu li.primary ul li a {
	margin: 0;
	display: block;
	padding: 0 0 0 14px;
	line-height: 22px;
	font-size: 11px;
	background-color: rgb(159, 25, 27);
	color: rgb(255, 255, 255);
	text-decoration: none;
	text-align: left;
	width: 100%;	} 

	
/*ul#mainmenu li ul li a:link, ul#mainmenu li ul li a:visited {
	width: 100%;
	display: block;	}*/
	
ul#mainmenu li.primary ul li a:hover, ul#mainmenu li.primary ul li a:active {
	color: rgb(255, 211, 0);	}
	



/*-------------------------------------------------------------

	Links and buttons

--------------------------------------------------------------*/

#sectionlinks a {
	color: rgb(0, 0, 0);
	font-style: italic;	}
	
#sectionlinks a:link, #sectionlinks a:visited {
	text-decoration: none;	}
	
#sectionlinks a:hover, #sectionlinks a:active {
	/*width: 100%;
	border-bottom: 1px dotted  rgb(205, 24, 31);	causes ie7 problem */
	color: rgb(205, 24, 31);	}
	
/* more buttons are on index pages, also directions page
	NOTE: more buttons are now labelled LINK (or FIND on directions) */	
.morebutton {
	display: block;
	width: 57px;
	height: 21px;
	position: absolute;
	bottom: 15px;
	right: 0;
	background: transparent
		url(../images/buttons/link.gif)
		no-repeat;	}

.morebutton a, .more a {
	font-size: 1em;
	font-weight: bold;
	line-height: 1em;
	letter-spacing: .05em;
	display: block;
	width: 100%;
	height: 100%;
	margin-top: 6px;
	margin-left: 9px;
	color: rgb(0, 102, 185);	}
	
.morebutton a:link, .morebutton a:visited {
	text-decoration: none;	}
	
.morebutton a:hover, .morebutton a:active {
	text-decoration: none;	}

/* klugie override for buttons on the directions page */	
.morebutton a.find { 
	font-size: 11px; }

.more {
	position: absolute;
	bottom: 32px;
	right: 60px;
	}
	
.more a:link, .more a:visited {
	text-decoration: none;	}
	
.more a:hover, .more  a:active {
	text-decoration: none;	}

/* old approach - may or may not use */	
#slideshow .controls {
	font-size: .8em;
	line-height: .8em;
	margin-right: 5px;
	padding: 2px 3px;
	float: left;
	/* display: inline-block; */
	border: 1px solid rgb(0, 102, 185);	}
	
/* questions buttons are on slideshow carousels */

.questionsbutton {
	display: block;
	width: 95px;
	height: 21px;
	position: absolute;
	bottom: 25px;
	right: 0;
	background: transparent
		url(../images/buttons/questions.gif)
		no-repeat;	}

.questionsbutton a {
	font-size: 1em;
	font-weight: bold;
	line-height: 1em;
	margin-left: 9px;
	margin-top: 5px;
	letter-spacing: .05em;
	display: block;
	width: 100%;
	height: 100%;
	color: rgb(0, 102, 185);	}
	
.questionsbutton a:link, .questionsbutton a:visited {
	text-decoration: none;	}
	
.questionsbutton a:hover, .questionsbutton a:active {
	text-decoration: none;
	color: rgb(0, 102, 185);}	
	
#footer a:link, #footer a:visited,
#footer a:hover, #footer a:hover{
	color: rgb(0, 0, 0);
	text-decoration: none;	}
	
/*-------------------------------------------------------------

	Navigator buttons for the carousel slideshow

--------------------------------------------------------------*/

.arrows {
	position: relative;
	margin-left:23px;
	margin-bottom: 12px;
	height:18px;		}

/* items inside prev and next */
.arrows a {
	width:17px;
	height:18px;
	float:left;
	margin:0 13px 0 0;
	display:block;
	font-size:1px;	
	cursor:pointer; }

a.prev {
	background:url(../images/buttons/prev.gif) 0 0 no-repeat;
}

a.next {
	background:url(../images/buttons/next.gif) 0 0 no-repeat;
}

.arrows a:hover {
	background-position:0 -18px;      
} 

/* disabled navigational button */
a.disabled {
	/*visibility:hidden !important;
	display: none; */
	opacity:.40;
	filter: alpha(opacity=40); 
	-moz-opacity: 0.40;		
} 

.arrows a.disabled:hover {
	background-position:0 0;
	cursor: default;      
}	

/* old carousel navigation */ 

.navi {
	position: relative;
	margin-left:23px;
	margin-bottom: 12px;
	height:20px;	}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}
	


/*-------------------------------------------------------------

	Chrome 

--------------------------------------------------------------*/

body 	{ background-color: rgb(204, 204, 204);	}
#page	{ background-color: rgb(255, 255, 255); }

#header_hp	{ background-color: rgb(0, 102, 185);	}
#header_hf	{ background-color: rgb(0, 102, 185);	}
#header_hi	{ background-color: rgb(0, 70, 140);	}

#navbar_hp	{ background-color: rgb(0, 70, 140); 	}
#navbar_hf	{ background-color: rgb(0, 130, 220); 	}
#navbar_hi	{ background-color: rgb(0, 102, 185); 	}

#footer	{ background-color: rgb(204, 204, 204);	}


/*-------------------------------------------------------------

	Chrome - Header 

--------------------------------------------------------------*/


#home #header_hp h1#logo_container  {  
	line-height: 345px;	/* 3 times actual height of logo */
	overflow: hidden;	
	background: transparent
		url(../images/logos/horn_packaging_corp_logo.gif)
		no-repeat ;	} /*was 23px 24px */
		

#home #header_hf h1#logo_container  {  
	line-height: 345px;	/* 3 times actual height of logo */
	overflow: hidden;	
	background: transparent
		url(../images/logos/horn-forwarding-logo.gif)
		no-repeat ;	} 
		
#home #header_hi h1#logo_container  {  
	line-height: 345px;	/* 3 times actual height of logo */
	overflow: hidden;	
	background: transparent
		url(../images/logos/horn-international-logo.gif)
		no-repeat ;	} 
		

		

/*-------------------------------------------------------------

	Chrome - sections - billboard/slideshow

--------------------------------------------------------------*/

/*billboards are in home page sidebar */

.billboard {	
	overflow: hidden;
	background: transparent
		url(../images/billboardbackground.png)
		no-repeat 0 0;	}
		
.billboard dd.pic  { 
	position: absolute;
	top:3px;
	left:3px; 
	margin: 0;
	padding: 0;	}
	
/*slideshows are in secondary page sidebar */
	
#slideshow {	
	overflow: hidden;
	background: transparent
		url(../images/slideshowbackground.jpg)
		no-repeat 0 0;	}
		
/* frame for google map		*/	
#mapframe {	
	overflow: hidden;
	background: transparent
		url(../images/mapbackground.jpg)
		no-repeat 0 0;	}
		
#footer	{ 
	background: rgb(204, 204, 204)	
		url(../images/footer.jpg)
		no-repeat 0 0;	}
		


/*-------------------------------------------------------------

	Special - homepage seal

--------------------------------------------------------------*/

img#seal {
	float: right;
	padding: 0 0 15px 20px;
	}