* {  margin: 0; padding: 0; }
* html { height: 100%;} 
/* so it knows how to calculate the widths and heights according to the viewport */
html, body { height: 100%; }
body { text-align: center; margin: 0; border: 0;  padding: 0; background-color: #fff;  color: #bbb; font-weight: bold; font-family:  Verdana; font-size: 12px; text-decoration: none;  text-align: center; font-weight: normal; letter-spacing: 1px; }

/* SPLASH PAGE */
/* the whole page wrapper: content + footer */
/* CENTER CONTENT with Automatic Margins: DO NOT FLOAT ***************************/

#page    {  width: 800px; margin: auto; position: relative; min-height: 100%; /*so it uses all avail height*/text-align: center; } 
/* content wrapper - no footer */
#content {  float: left; width: 800px; clear: both; display: none; position: relative;   } 
#jiffy_group_logo_container {  width: 800px; height: 200px;float: left; position: relative; margin-top: 6%; }
#splash_jiffy_group_logo { position: absolute; top: 0px; left: 26%; }
#gray_bar {  float: left; width: 800px; height: 1px; }
#splash_mission { float: left; width: 800px; margin-top: 10px; margin-bottom: 20px; }
#splash_mission span { color: #6c6c6c; font-size: 10px; text-align: center; letter-spacing: 0.2px; }

#jiffy_companies_container {  float: left; width: 800px; margin-top: 20px;  margin-bottom: 5%; }
#splash_jiffy_logo { float: left; }
#splash_ferry_morse_logo { float: left;  }
#splash_tref_logo { float: left;  }
#splash_mckenzie_logo { float: left;  }
/* Footer */
#splash_container_foot { width: 800px; height: 20px; float: left; }
#splash_footer  { float: left; width: 800px; padding: 0; font-size: 10px; letter-spacing: 0.2px; text-align: center;}

/*******************************************************************************/

/* common for Splash and all pages in the site */
#prepage_loading {  position: absolute; top: 400px; left: 420px; } 

#container-page { margin: 0 auto;width: 900px; position: relative; min-height: 100%; height: auto !important; height: 100%; text-align: center; }
#container-head { float: left; width: 900px; clear: both;}

#header      { float: left; width: 900px; height: 104px; background-color: #ffffff;  } 

.header_menu { float: left; line-height: 0px; font-size: 0px;}
/*
e { font-size:13px; color: #3333ff; }
*/
/* main content area ***************************************************************/
.frontpage_main_container { width: 900px; float: left; clear: both; background-color: #ffffff; text-align: center;/* gets faded in */}

.center_column {float: left; clear: right; width: 650px; text-align: justify; padding-left: 12px;  padding-top: 10px; color: #5C5C5C; font-size: 10px; } 

/* navigation side bar ***************************************/
#left_column {float: left; width: 189px; margin-top: 0px; }
/* div that will hold the ul-li layout generated by wayfinder */
#navigation_module {float: left; width: 189px; position: relative; padding-top: 1px;}
/* remove the bullets and list types */
#navigation_module ul { padding: 0px; margin: 0px; list-style-type: none; }
/* making the sub levels be shown: 
hide the sub levels and give them an abolsute position, so they will show up on hover of the menu item, they will not take any room when not being shown */
#navigation_module ul ul { visibility: hidden; position: absolute; top: 0px; /* from this parent menu item */ left: 189px; /* from this parent item */ width: 189px; }
/* When hovering over the UL parent item, make the second UL level visible */
#navigation_module ul :hover ul { visibility: visible; }

/* in order to position the sub levels ABSOLUTE, the parent level must have RELATIVE position*/
#navigation_module li { position: relative; }
/* style the HREF links */
#navigation_module a, #navigation_module a:visited { display: block; text-decoration: none; width: 189px; text-align: left; font-weight: normal; text-indent: 5px; color: #009966;  line-height: 30px; font-size: 12px; letter-spacing: normal; }
/* make the cursor a HAND so the user knows he can click there */
#navigation_module a:hover, #navigation_module li a:hover, #navigation_module li ul li a:hover { cursor: pointer; }
/* Style the PARENT LI*/
#navigation_module li {   background-image: url(/assets/images/side_menu.png); height: 30px; }
/* Style the CHILD LI*/
#navigation_module li ul li { width: 189px; overflow: hidden; z-index: 99; /* sub menu backgd*/ background-image: url(/assets/images/side_menu.png); }
/* style the CHILD A link*/
#navigation_module li ul li a { color: #00814A; text-indent: 5px; }

/* PARENT level: add a background color on HOVER over the links, even though there's no child item*/
#navigation_module li:hover { /* first level link*/ background-image: url(/assets/images/side_menu_rollover.png);}
/* change the color of the LINK on HOVER */
#navigation_module li:hover a { color: #1d3d2b;  }

/* Must repeat style so it doesn't cascade to the sub menu */
#navigation_module li:hover ul li { /* first level link background-image: url(/assets/images/side_menu_rollover.png);)*/  background-color: #6E8B3D;}  
#navigation_module li:hover ul li a { color: #00814A;  }

/* ACTIVE Effects *****************/
/* First level*/
#navigation_module li a.active {  color: #1d3d2b; }
/* first level ACTIVE, on HOVER on Sub menu*/
#navigation_module li ul li:hover { /**/ background-image: url(/assets/images/side_menu_rollover.png);  }
#navigation_module li:hover ul li:hover { color: #1d3d2b; }
#navigation_module li ul li:hover a { color: #1d3d2b; }

/* if there's NO Submenu links don't keep the top level style after being visited, so OVERRIDE inherited style again */
#navigation_module li.active { color: #1d3d2b; background-image: url(/assets/images/side_menu_rollover.png); }
#navigation_module li.active:hover {  /* nothing */ }

/* Ensure that sub menu links do NOT keep top level inherited style after being visited */
#navigation_module li ul li a:visited { color: #00814A; }

/* When menu item is ACTIVE, define the styles for the sub menu 
Active item will  change color */
#navigation_module li.active a {  font-weight: normal; color: #1d3d2b; } 
/* for ACTIVE parent , style child item changing color */
#navigation_module li.active a:hover {  color: #1d3d2b; }
#navigation_module li.active ul li.active a {  color: #1d3d2b; }

/* for ACTIVE parent, sub menu text is normal */
#navigation_module li.active ul li a { font-weight: normal; }

/* for ACTIVE parent sub menu items must have a HOVER effect for the text, not the backgd
Repeat style for the background so it doesn't get inherited and change on Hover or Selected */
#navigation_module li.active ul li:hover { background-image: url(/assets/images/side_menu_rollover.png); }
#navigation_module li.active ul li:hover a { color: #1d3d2b; width: 189px; }
/*  when both parent and child are ACTIVE */
#navigation_module li.active ul li.active a { color: #1d3d2b; }

/* Jiffy Group Logo ******************************************************/
#jiffy_group_logo { float: left; width: 190px; height: 92px;  }


/*********************************************************************************************************/
/* css for the template var in modx , clear: both is fix for IE*/
.content_text { width: 620px; clear: both; float: left; padding-bottom: 10px;padding-top: 5px; padding-left: 12px; text-align: justify; font-size:11px;}


/* Home page - news *******************************************************************/
#navigation_controls { float: left; width: 620px;  }
#navigation_controls_previous { float: left; padding-right: 10px; }
#navigation_controls_page_info { float: left; padding-right: 10px; }
#navigation_controls_next { float: left; padding-right: 10px; }


.section_header { float: left; width: 672px; padding-left: 5px;clear: both; }
html>body .section_header { float: left; width: 620px; padding-left: 5px;clear: right; }

#terms_and_conditions tr td { margin-bottom: 10px; }
/* wherever there are tables ************************/
table {   width: 620px;  }  
table th { padding-bottom: 5px; vertical-align: top;}  
table td {   padding-left: 0px; padding-right: 0px;padding-bottom: 10px; vertical-align: top; } 





/*.catalogue_page { float: left; text-align: left; color: #000000; margin-bottom: 3px; font-size: 13px; padding:5px; width: 165px; display: inline;}*/

/* gallery common CSS - most of it is on default.css provided by maxigallery - I override here some details ****/
/* classes added by maxigallery */
/* each img - the rest of the styling, such as the right margin was modified in the default.css file directly */
#gallery_container {  width: 620px; float: left; } 
.thumbnail {  width: 120px;  } 

/* locations & Contact Info MAPS *********************************/
#map_container {  width: 630px; height: 334px; float: left; position: relative; z-index: 0;}
#map_container img { z-index: 2;}
.continents { float: left; } /* divs that contain the images for each continent or region */
/* wrapper divs that enclose vertical regions containing blocks or pieces of the map, such as continents, ocean, etc */
/* Both maps!!! */
#america_wrapper { float: left; width: 235px; height: 334px;  }
#europe_wrapper { float: left; width: 138px; height: 334px; }
#asia_wrapper { float: left; width: 225px; height: 334px; }
#pacific_ocean_wrapper { float: left; width: 32px; height: 334px; }

/* locations map - make the cursor a hand so the user knows he/she can click on it */
#america_rollover { cursor: pointer; cursor: hand; }
#europe_rollover {  cursor: pointer; cursor: hand; }
#africa_rollover {  cursor: pointer; cursor: hand; }
#asia_rollover {  cursor: pointer; cursor: hand; }
#australia_rollover {  cursor: pointer; cursor: hand; }
/* contact info map - make the cursor a hand so the user knows he/she can click on it */
#north_america_rollover_contact {  cursor: pointer; cursor: hand; }
#south_america_rollover_contact {  cursor: pointer; cursor: hand; }
#north_africa_rollover_contact {  cursor: pointer; cursor: hand; }
#middle_east_rollover_contact {  cursor: pointer; cursor: hand; }
#south_africa_rollover_contact {  cursor: pointer; cursor: hand; }
#asia_rollover_contact {  cursor: pointer; cursor: hand; }
#europe_rollover_contact {  cursor: pointer; cursor: hand; }
#australia_rollover_contact {  cursor: pointer; cursor: hand; }

/* Locations map - hover effect - div containing image to be shown on hover */
#america_rollover { width: 221px; height: 334px; display: none;  position: absolute; top: 0px; left: 14px; z-index: 3;}
#europe_rollover { width: 138px; height: 145px; display: none;  position: absolute; top: 0px; left: 235px; z-index: 3;}
#africa_rollover { width: 138px; height: 189px; display: none;  position: absolute; top: 145px; left: 235px; z-index: 3;}
#asia_rollover { width: 225px; height: 213px; display: none;  position: absolute; top: 0px; left: 373px; z-index: 3;}
#australia_rollover { width: 130px; height: 121px; display: none;  position: absolute; top: 213px; left: 468px; z-index: 3;}

/* contact info map - divs holding rollover images **/
#north_america_rollover_contact { width: 221px; height: 178px; display: none;  position: absolute; top: 0px; left: 14px; z-index: 3;}
#south_america_rollover_contact { width: 221px; height: 156px; display: none;  position: absolute; top: 178px; left: 14px; z-index: 3;}
#europe_rollover_contact { width: 138px; height: 145px; display: none;  position: absolute; top: 0px; left: 235px; z-index: 3;}
#asia_rollover_contact { width: 225px; height: 213px; display: none;  position: absolute; top: 0px; left: 373px; z-index: 3;}
#north_africa_rollover_contact { width: 138px; height: 189px; display: none;  position: absolute; top: 145px; left: 235px; z-index: 3;}
#south_africa_rollover_contact { width: 138px; height: 189px; display: none;  position: absolute; top: 145px; left: 235px; z-index: 3;}
#middle_east_rollover_contact { width: 73px; height: 64px; display: none;  position: absolute; top: 125px; left: 322px; z-index: 3;}
#australia_rollover_contact { width: 130px; height: 121px; display: none;  position: absolute; top: 213px; left: 468px; z-index: 3;}

/* blocks containing the addresses  for Locations */
#america_block { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/locations/address_block.png);}
#europe_block { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/locations/address_block.png); background-repeat: auto;}
#africa_block { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/locations/address_block.png); background-repeat: auto;}
#asia_block { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/locations/address_block.png); background-repeat: auto;}
#australia_block { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/locations/address_block.png); background-repeat: auto;}

/* blocks containing the addresses for Contact Info *********/
#north_america_block_contact { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/contact_info/address_block.png);}
#south_america_block_contact { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/contact_info/address_block.png);}
#europe_block_contact { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/contact_info/address_block.png);}
#north_africa_block_contact { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/contact_info/address_block.png); background-repeat: auto;}
#south_africa_block_contact { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/contact_info/address_block.png); background-repeat: auto;}
#middle_east_block_contact { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Jiffy/contact_info/address_block.png); background-repeat: auto;}
#asia_block_contact { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Tref/contact_info/address_block.png);}
#australia_block_contact { width: 300px; height: 300px; display: none;  position: absolute; top: 5px; left: 200px; z-index: 4; background-image: url(/assets/images/Tref/contact_info/address_block.png);}

/* divs that hold the chunks with the text - this is the same for both maps *************/
#america_address { text-align: left; padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto;}
#europe_address { text-align: left; padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto; }
#africa_address { text-align: left; padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto; }
#asia_address { text-align: left; padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto;}
#australia_address { text-align: left; padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto; }
/* for Contact Info map only *******/
#north_america_address_contact { text-align: left; padding-left: 5px;width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto;}
#south_america_address_contact { text-align: left; padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto;}
#north_africa_address_contact { text-align: left;padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto; }
#middle_east_address_contact { text-align: left; padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto; }
#europe_address_contact { text-align: left; padding-left: 5px;width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto; }
#asia_address_contact { text-align: left; padding-left: 5px; width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto; }
#australia_address_contact { text-align: left; padding-left: 5px;width: 255px; height: 260px; position: absolute; top: 20px; left: 20px; overflow: auto; }




#dashed_line { position: absolute; top: 0px; left: 592px; width: 1px; height: 700px; background-image: url(/assets/images/dashline.png); background-repeat: repeat-y; }

#container-foot { width: 1000px;height: 20px; float: left; clear: both;}

#footer  { background-color: #ffffff; padding: 0;line-height: 18px;}

a, a:visited, a:hover, h1 a, h2 a, h3 a, h4 a { color: #009966; outline: none; }

.green { color: #009966; }

H1 { font-size: 4.0em; letter-spacing: 3px; line-height: 1.0em; font-weight: normal;  }
H2 { font-size: 14px; font-weight: normal; letter-spacing: 3px; line-height: 1.0em;  }
H3 { font-size: 3.0em; font-weight: normal; letter-spacing: 3px; line-height: 1.0em;  }
H4 { font-size: 1.5em; font-weight: normal; line-height: 1.0em;  }

IMG { border: 0; }

em { font-style: normal;}

.error {  color: red; font-size: 1.2em;  }

.large_text{ font-size: 1.8em; font-weight: normal; line-height: 1.4em; letter-spacing: 0.2em;  }
.small_text{ font-size: 0.8em; font-weight: normal; }

strong { letter-spacing: 0.1em; }


/* clear both fix for IE */

/* .news{width: 620px; /*clear: both;*/ 
/* float: left; position:relative; padding-bottom: 10px;  } */
.news{width: 620px; clear: right; float: left; padding-bottom: 10px; }
/* html>body .news{width: 620px; clear: right; float: left; padding-bottom: 10px; } */

/* .news_item { float: left;/* clear: both;*/
/* text-align: justify;   width: 620px;} */
.news_item { float: left; clear: both; text-align: justify;   width: 620px;}
/* html>body .news_item { float: left; clear: both; text-align: justify;   width: 620px;} */

.news_item p { color: #5C5C5C; font-size: 10px;} 
.news_item H4 { font-size: 10pt; color: #339966; text-transform: uppercase; padding-bottom: 10px;}
.news_item_date { font-size: 9pt; color: #006633; font-weight: bold;padding-bottom: 10px;}
.dashline {float: left; clear: both; }
.dashline img {width: 630px; padding-bottom: 10px; padding-top: 8px;}

/* Contact Us section ******************/
#contact_form_container { float: left; width: 630px; margin-top: 20px; text-align: left; }
#contact_form_container table { float: left; width: 630px; }
#contact_form_container td { padding-bottom: 15px; }

#catalogue_menu {text-align: left;}

#catalogue_menu ul li {width: auto; display: inline; float: left; list-style: none; text-align: center; text-transform: uppercase; font-size: 13px;padding: 5px;}

#catalogue_menu ul li a {text-decoration: none;text-transform: uppercase;}

#catalogue_menu ul li a:hover, #catalogue_menu ul li a.active {color:  #006633;}

.selected, .selected a, .selected a:hover { color: #000000; }
.tooltip { background-color:#fff; background:#fff; color:#828282; font-size:1.2em; border: 1px solid #474747; padding: 0;margin: 0; }
.tooltip_title { background: #fff; border-bottom: 1px solid #474747; margin: 3px;}
.tooltip_content { background: #fff; margin: 3px; text-align: left;}