* { margin: 0; padding: 0; }
* html { height: 100%; }
html { font-size: 12px; }
html, body { height: 100%;}
body { padding-top: 5px; text-align: center; margin: 0; border: 0; padding: 0; background-color: #FFF; color: #000; font-family: Verdana; font-weight: normal; font-size: 12px; }
/*spinning icon gets faded out ************************************************/
#content_loading { float: left; position: relative; width: 950px; min-height: 100%; }
#rotation_animation { position: absolute; top: 50%; left: 50%; width: 16px; }
#container_page { position: relative; margin: 0 auto; width: 950px; min-height: 100%; height: auto!important; text-align: center; display: none;/* gets faded in */ }
#container_head{ float: left; width: 950px; clear: both; height: 159px; }
#header{ float: left; position: relative; width: 950px; height: 159px; background-image: url(/assets/images/Tref/tref_top_header_background.png); background-repeat: none; }
/* inside the HEADER div ***************/
#container_search_box { position: absolute; top: 0px; right: 0px; width: 220px; height: 30px; }
/* inside the HEADER div ***************/
#header_logo { position: absolute; top: 7px; left: -2px; width: 124px; height: 143px; }
/* inside the HEADER div ***************/
#menu_container{ position: relative; position: absolute; width: 804px; height: 23px; top: 127px; left: 150px; background-image: url(/assets/images/Tref/tref_top_menu_bar.png); background-repeat: none; }
#menu_container a { color: #00814A; font-family: Verdana; font-weight: bold; }
#menu_container a:hover { color: #1d3d2b; }
#menu_container a.selected { color: #1d3d2b; }
#bedding_plants { position: absolute; left: 20px; top: 3px; }
#pot_plants { position: absolute; left: 150px; top: 3px; }
#vegetable_culture { position: absolute; left: 250px; top: 3px; }
#biological_culture { position: absolute; left: 400px; top: 3px; }
#perennials{ position: absolute; left: 550px; top: 3px; }
#tree_culture { position: absolute; left: 650px; top: 3px; }
img { border: 0px; }
a, a:visited, h1 a, h2 a, h3 a, h4 a { color: #000; outline: none; text-decoration: none; }
a.selected, a:hover { text-decoration: none; color: #1d3d2b; }
/* the site container - margin excluded */
#container_content { width: 950px; height: 100%; float: left; clear: both; text-align: center; }
/* SIDE BAR NAVIGATION MODULE *******************************************/
#container_sidebar{ float: left; width: 120px; margin-top: 0px;}
/* div that will hold the ul-li layout generated by wayfinder */
.navigation_module { float: left; position: relative; width: 120px; }
/* remove the bullets and list styles */
.navigation_module ul { padding: 0px; margin: 0px;list-style-type: none;}
/* what makes the sub levels be shown ************************************/
/* hide the sub levels and give them a positon absolute, so they'll show up when hovering on them, and the right spot, but they take up no room when not shown */
.navigation_module ul ul { visibility: hidden; position: absolute; top: 0px; left: 120px; width: 120px; }
/* When hovering the UL elements, make the second level visible when hover on first level list OR link */
.navigation_module ul :hover ul{ visibility: visible; }
/* position relative so that you can position the sub levels */
.navigation_module li { position: relative; }
/* style the links */
.navigation_module a, .navigation_module a:visited { display: block; text-decoration: none; line-height:30px; width: 120px; text-align: left; font-weight: normal; text-indent: 5px; color: #00814A; }
/* define the cursors when hovering over links */
.navigation_module a:hover, .navigation_module li a:hover, .navigation_module li ul li a:hover { cursor: pointer; }
/* style the 1st level li */
.navigation_module li { /*first level background*/ background-image: url(/assets/images/Tref/side_menu.png); height: 30px; }
/* style the 2nd livel li */
.navigation_module li ul li { /* sub menu background */ width: 120px; overflow: hidden; /*opacity:.75;filter: alpha(opacity=75); -moz-opacity: 0.75;*/ z-index: 99; }
.navigation_module li ul li a { color: #00814A; text-indent: 5px; }
/* first level menu: add a background color when I hover over the LINKS in the list whether there is a sub menu or not */
.navigation_module li:hover { /* first level link */ background-image: url(/assets/images/Tref/side_menu_rollover.png); }
.navigation_module li:hover a { color: #1d3d2b; }
/* repeat the style so it doesn't cascade to the sub menu */
.navigation_module li:hover ul li { background-image: url(/assets/images/Tref/side_menu_rollover.png); }
.navigation_module li:hover ul li a { color: #00814A; }
/* First level menu: Active effect */
.navigation_module li a.active { color: #1d3d2b; }
/* Second Level menu (sub menu): Hover effect */
.navigation_module li ul li:hover { background-image: url(/assets/images/Tref/side_menu_rollover.png); }
.navigation_module li:hover ul li a:hover { color: #1d3d2b; }
.navigation_module li ul li:hover a { color: #1d3d2b; }
/* if there's no submenu give the effects to the background - same as first level menu */
.navigation_module li.active { color: #1d3d2b; background-image: url(/assets/images/Tref/side_menu_rollover.png); }
.navigation_module li.active:hover {/*nothing for the time being*/ }
/* make sure that the sub menu links don't keep the top level style after being visited - override the inherited style */
.navigation_module li ul li a:visited { color: #00814A; }
/* Menu item is Active - define styles for menu and sub menu items********************* */
/* when the menu is active , make the link bold and change the colour */
.navigation_module li.active a{ font-weight: normal; color: #1d3d2b; }
/* for children, just change the colour of the font */
.navigation_module li.active a:hover { color: #1d3d2b; }
.navigation_module li.active ul li { width: 120px; background-image: url(/assets/images/Tref/side_menu_rollover.png); }
/* when the menu is active, the sub menu's text should be normal */
.navigation_module li.active ul li a { font-weight: normal; }
/* when the menu is active, the sub menu items should have a hover effect for the text, but nothing for the background, so I repeat the style for the background so it doesn't cascade from its parent, to ensure that the background won't change on hover or selected */
.navigation_module li.active ul li:hover{ background-image: url(/assets/images/Tref/side_menu_rollover.png); }
.navigation_module li.active ul li:hover a { color: #1d3d2b; width: 120px; }
/* when menu item is active, and the sub menu item has been selected (active), give it a different style **/
.navigation_module li.active ul li.active a { color: #1d3d2b; }
/* sign up Box below the side bar */
#sign_up_box_container { float: left; width: 120px; height: 180px; background-image: url(/assets/images/Tref/sign_up_background.png);margin-top: 1px; }
#sign_up_box_text { float: left; width: 120px; text-align: center; margin-top: 10px; font-weight: bold; }
#sign_up_box { float: left; position: relative; width: 120px; height: 180px; }
#email_field { position: absolute; top: 10px; left: 3px; }
#email_field input { width: 110px; }
#go_button { position: absolute; top: 40px; left: 40px; width: 30px; }
/* MAIN CONTENT AREA **************************************************************************/
#center_column{ float: left; width: 810px; padding-left: 20px; padding-top: 9px; text-align: left;}
#page_title { float: left; width: 810px; margin-bottom: 20px; font-weight: bold; color: #00814A; text-transform: uppercase; }
/* now the breadcrumbs are at the bottom */
#breadcrumbs_nav { float: left; width: 810px; margin-bottom: 20px; margin-top: 40px; }
.B_currentCrumb { font-weight: bold; color: #00814A;}
/* TITLES AND SECTION HEADERS for page text heading 16px */
H2 { font-size: 16px; font-weight: normal; color: #00814A; margin-bottom: 10px; margin-top: 10px; }
H3 { font-size: 14px; font-weight: normal; color: #00814A; margin-bottom: 10px; margin-top: 10px; }
H4 { font-size: 10px; color: #00814A; text-transform: uppercase; padding-bottom: 10px;}
/* style the links on the main content area - the class can be set using the editor - advanced tab */
a.site_links, a.site_links:visited { color: #00814A; }
a.site_links:hover { color: #1d3d2b; }
/* Home page *********************************************/
#home_info_container { float: left; width: 810px; text-align: left; }
#home_about {float: left; width: 400px; padding-right: 5px; }
#home_about_image1 { float: left; width: 400px; margin-top: 10px; margin-bottom: 10px; }
#home_about_image2 { float: left; width: 400px; margin-top: 10px; margin-bottom: 10px; }
#home_news { float: left; width: 400px; padding-left: 5px; }
/* each of the home page news items *********/
.home_news_item { width: 400px; float: left; }
.home_news_item_date { width: 400px; float: left; padding-bottom: 5px; font-size: 9px; }
.home_read_more_link { color: #00814A; font-weight: normal; font-size: 9px; }
a.home_read_more_link, a.home_read_more_link:visited { color: #00814A; }
a.home_read_more_link:hover { color: #1d3d2b; }
.home_article_separator_dashline {float: left; width: 400px; overflow: hidden; padding-top: 10px; }
/* all clickable galleries ****************************/
#gallery_container { width: 810px; float: left; margin-top: 20px; }
/* classes added by maxigallery */
/* each img - the rest of the styling, such as the right margin was modified in the default.css file directly */
.thumbnail { width: 130px; }
/* for embedded images resized and scaled with phpthumb, the classes represent how many images side by side I fit in a single 810px wide row (max width of the content area) *****/
#images_container { width: 810px; float: left; margin-top: 20px; }
.two_images { float: left; width: 400px; padding-right: 5px; }
.three_images { float: left; width: 265px; padding-right: 5px; }
.four_images { float: left; width: 197px; padding-right: 5px; }
/* wherever there are tables ************************/
table { width: 810px; }
table th { padding-bottom: 5px; vertical-align: top;}
table td { padding-left: 0px; padding-right: 0px;padding-bottom: 10px; vertical-align: top; }
/* News & Events *********************************/
.news_item { float: left; width: 810px; }
.article_separator_dashline{ float: left; padding-top: 10px; }
.article_separator_dashline img { width: 810px; }
.news_item_date { width: 810px; float: left; padding-bottom: 10px; font-size: 9px; }
.news_titles { color: #00814A; font-weight: bold; font-size: 14px; padding-bottom: 10px; }
.read_more_link { color: #00814A; font-weight: normal; font-size: 9px;}
a.read_more_link, a.read_more_link:visited { color: #00814A; }
a.read_more_link:hover { color: #1d3d2b; }
#navigation_controls { float: left; width: 810px; }
#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; }
/*single news/event view navigation ***************/
#news_nav_controls { float: left; width: 810px; text-align: left; margin-bottom: 20px;}
.next { font-weight: bold; padding-left: 5px; }
.previous { font-weight: bold; padding-right: 5px; }
#single_news_title {float: left; width: 810px; font-weight: bold; font-size: 14px; text-transform: uppercase; color: #00814A; padding-bottom: 10px; }
#single_news_date { float: left; width: 810px; padding-bottom: 5px; font-size: 9px; }
/* Contact Us page ***********************/
#contact_form_container { float: left; width: 810px; margin-top: 20px; }
#contact_form_container table { float: left; width: 810px; }
#contact_form_container td { padding-bottom: 15px; }
/* Subscribe page + form ****************/
#subscribe_form_container { float: left; width: 810px; margin-top: 20px; }
#subscribe_form_container table { float: left; width: 810px; }
#subscribe_form_container td { padding-bottom: 15px; }
/* locations & Contact Info MAPS *********************************/
#map_container { width: 810px; height: 315px; float: left; position: relative; z-index: 1;}
#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 */
#america_wrapper { float: left; width: 343px; height: 315px; }
#europe_wrapper { float: left; width: 129px; height: 315px; }
#asia_wrapper { float: left; width: 203px; height: 315px; }
#pacific_ocean_wrapper { float: left; width: 135px; height: 315px; }
/* 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; }
/* hover effect - div containing image to be shown on hover */
#america_rollover { width: 232px; height: 315px; display: none; position: absolute; top: 0px; left: 111px; z-index: 3;}
#europe_rollover { width: 129px; height: 140px; display: none; position: absolute; top: 0px; left: 343px; z-index: 3;}
#africa_rollover { width: 112px; height: 118px; display: none; position: absolute; top: 137px; left: 360px; z-index: 3;}
#asia_rollover { width: 240px; height: 197px; display: none; position: absolute; top: 24px; left: 449px; z-index: 3;}
#australia_rollover { width: 102px; height: 65px; display: none; position: absolute; top: 212px; left: 563px; z-index: 3;}
/* contact info map - divs holding rollover images **/
#north_america_rollover_contact { width: 187px; height: 152px; display: none; position: absolute; top: 22px; left: 126px; z-index: 3;}
#south_america_rollover_contact { width: 105px; height: 123px; display: none; position: absolute; top: 173px; left: 230px; z-index: 3;}
#europe_rollover_contact { width: 123px; height: 106px; display: none; position: absolute; top: 34px; left: 349px; z-index: 3;}
#asia_rollover_contact { width: 232px; height: 184px; display: none; position: absolute; top: 31px; left: 453px; z-index: 3;}
#north_africa_rollover_contact { width: 112px; height: 118px; display: none; position: absolute; top: 138px; left: 360px; z-index: 3;}
#south_africa_rollover_contact { width: 112px; height: 118px; display: none; position: absolute; top: 138px; left: 360px; z-index: 3;}
#middle_east_rollover_contact { width: 58px; height: 50px; display: none; position: absolute; top: 129px; left: 428px; z-index: 3;}
#australia_rollover_contact { width: 102px; height: 61px; display: none; position: absolute; top: 216px; left: 563px; 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/Tref/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/Tref/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/Tref/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/Tref/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/Tref/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/Tref/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/Tref/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/Tref/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/Tref/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/Tref/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/Tref/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; }
/* Products page ****************************************/
#single_product_container { float: left; position: relative; width: 810px; height: 860px; }
#single_product_header { position: absolute; top: 0px; left: 0px; width: 810px; }
#single_product_content { position: absolute; top: 100px; left: 20px; width: 790px; }
#single_product_text { float: left; width: 810px; margin-bottom: 20px; }
.single_product_image { float: left; margin-right: 10px; }
/* Search Results *****************************/
.ajaxSearch_result { float: left; width: 810px; margin-bottom: 20px; }
.ajaxSearch_resultLink { float: left; width: 810px; margin-bottom: 10px; font-weight: bold; }
/* footer is inside container_content *****************************/
#container_foot { float: left; width: 950px; height: 92px; margin-top: 10px; }
#footer { float: left; width: 950px; font-size: 9px; }
#company_address { position: relative; }
#address { position: absolute; top: 30px; left: 14.5%; }
#jiffy_group { position: absolute; top: 0px; right: 25%; }