/**********************************************************************************************/ /* COLOR DEFINITIONS - The color values were verified with GIMP */ /**********************************************************************************************/ /* #8EC222 = GimselYellowGreen - As used in the Gimsel logo */ /* #006633 = rgb( 0, 102, 51 ) = GroenterijDarkGreen - As used in font of the Groenterij logo */ /* "darkred" as defined in html = GimselDarkRed - Also color of the fonts in the Gimsel Logo */ /* "lawngreen" = Color for highlighting GimselYellowGreen */ /**********************************************************************************************/ /**********************************************************************************************/ /* GENERAL SETTINGS VALID FOR ALL HTML ELEMENTS AND BACKGROUND COLORS FOR THE NOT USED AREA'S */ /**********************************************************************************************/ body, html { ; background-color: lightgreen ; font-family: arial, helvetica, liberation, sans-serif ; color: #006633 /* rgb( 0, 102, 51 ) = GroenterijDarkGreen */ ; } /********************************************************************************/ /* OUTER AREA LIMITING THE BORDERS ON LEFT AND RIGHT AND MAIN BACKGROUND COLOR */ /********************************************************************************/ #wrap_div { ; background-color: white /* Overwrites setting in the 2 columns GRID template */ ; } #wrap_div a { text-decoration:none; color: darkred; } /* = GimselDarkRed */ #wrap_div a.highlight { background-color: #8EC222 ; } /* #8EC222 = GimselYellowGreen *//* ///TBD: POSTPONED: Make the links on page Fruitmand and Abonnement highlighted. */ #wrap_div a:link { text-decoration: underline; } /* unvisited link */ #wrap_div a:visited { text-decoration: underline; } /* visited link */ #wrap_div a:hover { color: darkred; background-color: #8EC222; } /* mouse over link *//* darkred = GimselDarkRed *//* #8EC222 = GimselYellowGreen */ #wrap_div a:active { color: white;font-style:italic; } /* selected link */ /******************************************************************************/ /* HTML PAGE HEADER */ /******************************************************************************/ #header_div { ; background-color: darkgray /* Overwrites setting in the 2 columns GRID template */ ; height: 125px ; ; /* TOP | RIGHT | BOTTOM | LEFT */ ; border-style: none none double none ; border-width: 0px 0px 3px 0px ; margin: 0px 0px 10px 0px ; } /* HORIZONTAL BAR WITH TEXT */ #header_horizontal_bar_div { ; position: absolute ; background-color: #8EC222 /* GimselYellowGreen */ ; width: 1024px ; height: 40px ; ; /* TOP | RIGHT | BOTTOM | LEFT */ ; padding: 0px 0px 0px 0px ; margin: 70px 0px 0px 0px ; } #bar_text { ; position: absolute ; background-color: none ; color: darkred /* GimselDarkRed */ ; /* TOP | RIGHT | BOTTOM | LEFT */ ; margin: 6px 0px 0px 16em ; padding: 0px 0px 0px 0px ; border: 0px 0px 0px 0px ; ; font-size: 24px ; font-weight: bold ; } /* LOGO LEFT IN THE PAGE HEADER */ #colored_area_behind_Gimsel_Logo_div { /* In IE is displaying of the border color of an image not supported. */ ; position: absolute ; background-color: white ; width: 152px /* 142 + 5 + 5 */ ; height: 119px /* 99 + 20 + 20 */ ; border-color: green ; ; /* TOP | RIGHT | BOTTOM | LEFT */ ; padding: 0px ; margin: 0px 0px 0px 12px /* margin-left = 17 - 5 */ ; border-style: none solid solid none ; border-width: 0px 2px 2px 0px ; } #header_logo_img { ; position: absolute ; background-color: white ; width: 142px ; height: 99px ; ; /* TOP | RIGHT | BOTTOM | LEFT */ ; border: 0px ; padding: 0px ; border-style: none ; margin: 10px 0px 5px 17px ; } /* NAVIGATION ON TOP OF THE PAGE HEADER */ #header_topnav_div { ; position: absolute ; background-color: none ; width: 500px ; padding-top: 5px ; padding-left: 390px /* ///TBD: POSTPONED: For some reason "text-align: center" does not function - find out later. */ ; } #topnav_buttongroup_div .claim_knopje_topnav { width: 90px; } /* The button width, the height is automatically adjusted with the font-height */ /* ///TBD: POSTPONED: Make the buttons behave as real radio buttons. The button of the active page looks "pressed". */ /* Format the text and color of the button */ #topnav_buttongroup_div .content_knopje_topnav { ; color: darkred /* GimselDarkRed */ ; font-size: 12px ; font-weight: bold /* 400=normal 700=bold */ ; text-transform: uppercase ; text-align: center ; /* TOP | RIGHT | BOTTOM | LEFT */ ; padding: 1px 0px 0px 0px ; border-style: none solid solid none ; border-width: 0px 1px 1px 0px ; } /* Format the dynamic color and border behaviour of the button. */ #topnav_buttongroup_div .border_knopje_topnav { background-color: #8EC222; } /* GimselYellowGreen */ #topnav_buttongroup_div .border_knopje_topnav :hover{ background-color: lawngreen } /* Color of green used to highlight the green text in announcement_BOXes */ #topnav_buttongroup_div .border_knopje_topnav :active{ ; color: white; ; /* TOP | RIGHT | BOTTOM | LEFT */ ; border-style: solid none none solid ; border-width: 1px 0px 0px 1px ; } /* Format the behaviour of hypertext links and their presentation */ #topnav_buttongroup_div a { text-decoration:none; } /* darkred = GimselDarkRed */ #topnav_buttongroup_div a:link { text-decoration: none; } /* unvisited link */ #topnav_buttongroup_div a:visited { text-decoration: none; } /* visited link */ #topnav_buttongroup_div a:hover { background-color: #8EC222; } /* #8EC222; = GimselYellowGreen *//* mouse over link */ #topnav_buttongroup_div a:active { color:white; font-style:italic; } /* selected link */ /* GROENTERIJ ART TEXT RIGHT IN THE HORIZONTAL BAR */ #header_arttext_img { ; position: relative ; float: right ; height: 36px ; border-color: green ; ; /* TOP | RIGHT | BOTTOM | LEFT */ ; margin: 72px 7px 0px 0px ; border-style: none none none none ; border: 0px 0px 0px 0px ; } /******************************************************************************/ /* HTML WEBPAGE CONTENT - COLUMNS */ /******************************************************************************/ #col_tainer_1_div { ; background-color: white /* Overwrites setting in the 2 columns GRID template */ ; } #column_1_div { ; background-color: white /* Overwrites setting in the 2 columns GRID template */ ; /* width: 20% *//* 205px according to firefox */ ; width: 175px /* used a bit smaller wooden-boxes, so a value less that 205px is used. */ ; } /* The unordered item list with links to other web pages is formatted below. Nice examples for formatting LISTs * can be found on "http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html" */ #wooden_box_small_img { ; width: 152px ; height: 55px ; /* TOP | RIGHT | BOTTOM | LEFT */ ; margin: -1px 0px -2px 0px ; border-style: none none none none ; background-color: none ; } .left_menu_wooden_box_txt_line_div { ; background-color: none ; color: darkred /* GimselDarkRed */ ; font-size: 15px ; font-weight: 900 /* 400=normal 700=bold */ ; text-transform: uppercase ; text-align: center ; /* TOP | RIGHT | BOTTOM | LEFT */ ; margin: -26px 0px 4px -24px ; } #column_1_div ul { list-style: none; text-align: left; } #column_1_div ul a { text-decoration: none; } #column_1_div ul a:link { text-decoration: none; } /* unvisited link */ #column_1_div ul a:visited { text-decoration: none; } /* visited link */ #column_1_div ul a:hover { background-color: lawngreen; } /* #8EC222; = GimselYellowGreen *//* mouse over link */ #column_1_div ul a:active { background-color: lightgray; } /* selected link */ #column_1_div ul li { ; background-color: #8EC222 /* GimselYellowGreen */ ; border-color: #006633 /* rgb( 0, 102, 51 ) = GroenterijDarkGreen */ ; /* TOP | RIGHT | BOTTOM | LEFT */ ; margin: 5px 5px 10px -35px ; padding: 5px 0px 5px 5px ; border-style: solid solid solid solid ; border-width: 0px 2px 2px 0px ; } #column_1_div ul li:hover { ; background-color: lawngreen ; } #column_1_div ul li:active { ; background-color: lightgray ; /* TOP | RIGHT | BOTTOM | LEFT */ ; margin: 5px 5px 10px -35px ; padding: 5px 0px 5px 5px ; border-style: solid solid solid solid ; border-width: 2px 0px 0px 2px ; } #column_1_div .margin_contact_info_ruimte { ; clear: both ; /* TOP | RIGHT | BOTTOM | LEFT */ ; margin: 20px 5px 5px 5px ; } #column_1_div .border_contact_info_ruimte { ; border-style: double ; border-color: #006633 /* GroenterijDarkGreen */ ; background-color: #8EC222 /* GroenterijYellowGreen */ ; border-width: 6px ; } #column_1_div .content_contact_info_ruimte { ; background-color: darkgray ; /* TOP | RIGHT | BOTTOM | LEFT */ ; padding: 0px 0px 0px 5px ; text-align: left ; font-size: 15px ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; color: darkred /* GimselDarkRed */ ; } /* WARNING - When COLUMN 3 is ENABLED then many settings for column 2 are overwritten by CSS_EXT.groenterij_columnwidth_for_3colums.css - WARNING */ /* CHECK file - CSS_EXT.groenterij_columnwidth_for_3colums.css */ #column_2_div { ; background-color: white /* Overwrites setting in the 2 columns GRID template */ ; width: 80% /* 819px according to firefox */ ; width: 822px /* used a bit smaller wooden-boxes, so a bit higher value thn 819px is used. */ ; /* TOP | RIGHT | BOTTOM | LEFT */ ; border-style: none none none solid ; border-width: 0px 0px 0px 1px ; padding: 0px 10px 0px 10px ; } /******************************************************************************/ /* SETTINGS FOR THE ANNOUNCEMENT BOXES THAT ARE SHOWN IN COLUMN 3 */ /******************************************************************************/ #announce_area_div .claim_announce { ; /* background-color: Should be the same as background color of COLUMN3 !! */ ; color: #8EC222 /* GimselYellowGreen */ ; /* This is the COLOR of the BORDER around the ANNOUNCEMENT BOX (if any) */ ; /* This is also the default color for the fonts inside the ANNOUNCEMENT BOX !! */ ; font-family: arial, helvetica, liberation, sans-serif ; } #announce_area_div .margin_announce { ; /* background-color: Should be the same as background color of COLUMN3 !! */ ; margin-left: 0px ; margin-right: 0px ; margin-bottom: 4px /* Distance to a BOX placed below this BOX */ ; } #announce_area_div .content_announce { ; background-color: #006633 /* rgb( 0, 102, 51 ) = GroenterijDarkGreen */ ; color: #8EC222 /* GimselYellowGreen *//* This is the default font color */ ; } /* WARNING: Don't use any CSS instructions related to the dimensions of padding and border in the * * html class declarations above. Use the methods setBorder, setPadding instead for formatting BOX * * related php classes. See file "/php_blocks/all.pages.PHP.build_objects.php" */ #announce_area_div .head_announce { ; height: 25px /* height of the head area */ ; background-color: #8EC222 /* GimselYellowGreen */ ; } #announce_area_div .head_announce_text { ; color: white ; font-size: 15px ; font-weight: bold /* 400=normal 700=bold */ ; text-transform: uppercase ; margin-left: 5px ; margin-top: 4px ; } #announce_area_div .head_announce_logo { ; height: 24px /* The related width is calculated by the browser. */ ; } #announce_area_div .head_announce a{ /* Prevent unwanted effects for IE when using the logo in combination with a hyperlink */ ; text-decoration:none ; } #announce_area_div .inner_announce { ; background-color: #006633 /* rgb( 0, 102, 51 ) = GroenterijDarkGreen */ ; color: #8EC222 /* GimselYellowGreen */ ; padding-top: 2px ; padding-left: 5px /* sets the left margin inside the element. */ ; padding-right: 5px ; padding-bottom: 2px } #announce_area_div .inner_announce strong { font-weight: bold; color: lawngreen; } #announce_area_div .inner_announce em { color: lawngreen; } #announce_area_div .inner_announce a { text-decoration:none; color: #8EC222; } /* GimselYellowGreen */ #announce_area_div .inner_announce a:link { text-decoration: underline;} /* unvisited link */ #announce_area_div .inner_announce a:visited { text-decoration: underline;} /* visited link */ #announce_area_div .inner_announce a:hover { color: darkred; } /* mouse over link */ #announce_area_div .inner_announce a:active { font-style: italic; } /* selected link */ #announce_area_div .inner_announce_text { ; } #announce_area_div .inner_announce_image_L, .inner_announce_image { /* ; background-color: white */ ; color: black ; font-size: 10px ; float: left ; margin-top: -2px ; margin-left: -5px ; margin-right: 5px ; margin-bottom: -3px } #announce_area_div .inner_announce_image_R { /* ; background-color: white */ ; color: black ; font-size: 10px ; float: right ; margin-top: -2px ; margin-left: 2px ; margin-right: -5px ; margin-bottom: -3px } #announce_area_div .foot_announce { ; height: 16px ; background-color: darkgray /* #A7A7A7 *//* This is a kind of gray color */ ; color: darkred /* GimselDarkRed */ ; padding-top: 2px ; padding-left: 5px ; padding-right: 5px ; font-size: 12px ; } #announce_area_div .foot_announce_text_left { } #announce_area_div .foot_announce_text_center { } #announce_area_div .foot_announce_text_right { } /******************************************************************************/ /* HTML PAGE FOOTER */ /******************************************************************************/ #footer_div { ; background-color: darkgray /* Overwrites setting in the 2 columns GRID template */ ; color: darkred /* GimselDarkRed */ ; /* TOP | RIGHT | BOTTOM | LEFT */ ; border-style: double none double none ; border-width: 3px 0px 3px 0px ; margin-top: 10px ; } #footer_div p { text-decoration: none; color: darkred; font-size: 12px; } /* darkred = GimselDarkRed */ #footer_div a { text-decoration: none; color: darkred;} /* darkred = GimselDarkRed */ #footer_div a:link { text-decoration: underline; } /* unvisited link */ #footer_div a:visited { text-decoration: underline; } /* visited link */ #footer_div a:hover { background-color: lawngreen; } /* GimselYellowGreen (==#8EC222) *//* mouse over link */ #footer_div a:active { font-style:italic; } /* selected link */ #footer_bottomnav_div { ; clear: both /* No elements allowed on both sides of the bottom navigation. */ ; height: 38px ; } #footer_bottomnav_text_div { ; display: block ; padding-top: 10px ; padding-left: 365px ; font-size: 12px ; } #footer_bottomnav_text_div ul { ; list-style-type: none ; margin-top: 0px ; padding: 0px ; } #footer_bottomnav_text_div li { ; float:left ; } #footer_bottomnav_text_div ul li a:hover { ; background-color: lawngreen /* lawngreen <> GimselYellowGreen (==#8EC222) */ ; } #footer_contact_webmaster_div { ; clear: both /* ; font-size: 12px */ ; text-align: center ; } #footer_copyright_div { /* ; clear: left */ ; float:left /* ; font-size: 12px */ ; margin-left: 10px; ; } #footer_kvk_number_div { /* ; float: left */ ; text-align: center ; } #footer_lastupdate_div { /* ; clear: right */ ; float: right /* ; font-size: 12px */ ; margin-right: 10px; ; } /******************************************************************************/ /* The general font settings for the Groenterij webpage. */ /******************************************************************************/ h1 { ; font-weight: bold ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; color: #006633 = rgb( 0, 102, 51 ) = GroenterijDarkGreen ; } h1.center { ; text-align: center ; margin-right: 55px ; } h1.onderkop { ; font-size: 20px ; font-weight: bold ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; color: darkred /* GimselDarkRed */ ; } h1.onderkop_center{ ; text-align: center ; font-size: 20px ; font-weight: bold ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; color: darkred /* GimselDarkRed */ ; } h2 { ; font-weight: bold ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; color: darkred /* GimselDarkRed */ ; } h2.center { ; text-align: center ; margin-right: 55px ; }h2.onderkop { ; font-size: 16px ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; font-weight: bold ; color: darkred /* GimselDarkRed */ ; } h3 { ; font-weight: bold ; font-style: normal ; font-family: arial, helvetica, liberation, sans-serif ; color: #006633 /* GroenterijDarkGreen (==rgb( 0, 102, 51 ) */ ; } h4 { ; font-weight: normal ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; color: darkred /* GimselDarkRed */ ; } h5 { ; font-weight: normal ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; color: darkred /* GimselDarkRed *//* rgb(0, 0, 0) */ ; } h6 { ; font-weight: normal ; font-family: arial, helvetica, liberation, sans-serif ; font-style: normal ; color: darkred /* GimselDarkRed *//* rgb(0, 0, 0) */ ; } p { ; font-family: arial, helvetica, liberation, sans-serif ; color: #006633 /* = rgb( 0, 102, 51 ) = GroenterijDarkGreen */ ; } em { ; } strong { ; color: darkred; ; font-weight: bold /* 400=normal 700=bold */ ; } p.tabelkop, p.tussenkop { ; font-weight: bold /* 400=normal 700=bold */ ; font-size: 18px ; } p.note, p.note_small, p.note_small_strong, p.disclaimer, .filenaam, .filename { ; color: darkred ; } p.note_small, p.note_small_strong, p.disclaimer, .filenaam, .filename { ; font-size: 12px ; } p.note_small_strong { ; font-weight: bold /* 400=normal 700=bold */ ; } .filenaam, .filename { ; font-weight: bold ; } p.disclaimer{ ; background-color: lightgray ; margin-bottom: 25px ; }