/** * @package Zhong - accessibletemplate * @version 1.0.2 * @author Francesco Zaniol, accessibletemplate - http://www.accessibletemplate.com * @copyright Copyright (C) 2011-Present Francesco Zaniol * @license http://ec.europa.eu/idabc/eupl.html EUPL v1.1 only **/ /* ------------------------ - ACCESSIBILITY BAR ------------------------ */ #access-bar{ display:block; margin:0 auto; width:100%; top:0; left:0; z-index:99999; } #access-bar.access-bar-position-fixed{position:fixed;} #access-bar.access-bar-position-relative{position:relative;} /* Basic bar style - elements --------------------------- */ #basic-bar,#basic-bar-inner{ display:block; width:100%; margin:0 auto; border:0 solid #d9d5d0; min-height:1.7em; background-color:#F0EEEE; } #basic-bar{border-bottom-width:1px;} #basic-bar .basic-bar-blocks{ padding:0; margin:0; min-height:1.7em; height:1.7em; } #basic-bar .basic-bar-blocks *{line-height:1.7em;} /* Full width style */ .full-layout-width #basic-bar{} /* Fixed width style */ .fixed-layout-width #basic-bar-inner{overflow:visible;border:0;} /* Breadcrumbs style --------------------------- */ #basic-bar #breadcrumbs{ float:left; border-right:1px #d9d5d0 solid; height:1.7em; padding:0 0.4em; white-space:nowrap; margin:0; font-style:italic; font-family:Georgia,serif; } #basic-bar #breadcrumbs a, #basic-bar #breadcrumbs a:link, #basic-bar #breadcrumbs a:visited{ text-decoration:none; font-style:normal; font-family:"Helvetica Neue", Tahoma, Arial, Helvetica, sans-serif; } #basic-bar #breadcrumbs a:hover, #basic-bar #breadcrumbs a:focus{} #basic-bar #breadcrumbs img{vertical-align:baseline;display:inline-block;} /* "Accessibility" button / "lock/unlock bar" button --------------------------- */ #basic-bar #toggle-lock-block, #basic-bar #show-advanced-access-block{ position: relative; float:right; border:1px #d9d5d0 solid; border-width:0 0 0 1px; } #basic-bar #toggle-lock-block{border-width:0 1px;} #basic-bar #toggle-lock-access-button, #basic-bar #show-advanced-access-button{ float:left; color:#333; text-transform:capitalize; background-color:transparent; background-position:8px 50%; background-repeat:no-repeat; border:none; padding:0 12px 0 24px; font-size:1em; overflow:hidden; } #basic-bar #toggle-lock-access-button:hover, #basic-bar #toggle-lock-access-button:focus, #basic-bar #show-advanced-access-button:hover, #basic-bar #show-advanced-access-button:focus{} #basic-bar .toggle-lock-button-locked{background-image:url('../images/arrow-up.png');} #basic-bar .toggle-lock-button-unlocked{background-image:url('../images/lock-bar.png');} #basic-bar .access-button-panel-hidden{background-image:url('../images/arrow-down.png');} #basic-bar .access-button-panel-showed{background-image:url('../images/arrow-up-red.png');} /* Button Style if accessibility icon is enabled */ .access-button-icon-enabled #basic-bar, .access-button-icon-enabled #basic-bar-inner, .access-button-icon-enabled #basic-bar .basic-bar-blocks, .access-button-icon-enabled #basic-bar #breadcrumbs{height:36px;line-height:36px;} .access-button-icon-enabled #basic-bar .basic-bar-blocks *{line-height:36px;} .access-button-icon-enabled #basic-bar #show-advanced-access-block{border:0;} .access-button-icon-enabled #basic-bar #show-advanced-access-button{ text-indent:-9999px; background-image:url('../images/accessibility-icons/accessibility-icon-dark-small.png'); padding:0; width:36px !important; height:36px !important; background-position:2px 2px; } .access-button-icon-enabled #basic-bar .access-button-panel-showed, .access-button-icon-enabled #basic-bar .access-button-panel-hidden:focus {background-image:url('../images/accessibility-icons/accessibility-icon-red-small.png') !important;outline:0 !important} /* tooltip fix height */ #basic-bar .basic-bar-blocks .tooltip-title, .access-button-icon-enabled #basic-bar .basic-bar-blocks .tooltip-title {line-height:1.4em;height:1.4em;font-size:0.81em;} /* tooltip fix font-size */ #basic-bar .basic-bar-blocks .tooltip-title, #advanced-bar .adv-bar-block .tooltip-title{font-size:0.81em;} /* Advanced bar style - elements --------------------------- */ #access-bar #advanced-bar{ width:100%; border-color:#d9d5d0; border-style:solid; border-bottom-width:3px; background-color:#FCFAFA; position:absolute; overflow:hidden; display:none; margin:0 auto; } #access-bar #advanced-bar-inner{ margin:0 auto; padding:0 0 1.6em 0; width:100%; overflow:hidden; } /* Tools style */ #access-bar #advanced-bar h3{margin-top:1em;} #access-bar #advanced-bar .adv-bar-block{ float:left; width:auto; padding:0; margin:0.6em 10%; } #access-bar #advanced-bar .adv-bar-block ul, #access-bar #advanced-bar .adv-bar-block ul li{ list-style:none; padding:0; float:left; clear:both; } #access-bar #advanced-bar .adv-bar-block ul{margin:0;} #access-bar #advanced-bar .adv-bar-block li{margin:0 0.4em;} #access-bar #advanced-bar .adv-bar-block h2{display:block;text-indent:6px;font-size:160%;} #access-bar #advanced-bar .adv-bar-block button{margin:0 1px 1px 0;} #access-bar #advanced-bar .adv-bar-block a, #access-bar #advanced-bar .adv-bar-block button{ float:left; clear:both; margin:0.24em 1px 0.24em 0; font-size:100%; text-transform:capitalize; display:block; } /* Font re-size block */ #access-bar #advanced-bar #fontsize-block li, #access-bar #advanced-bar #toggle-fullwidth-block li{ clear:none; margin-left:0.2em; margin-right:0.2em; } #access-bar #advanced-bar #fontsize-block button, #access-bar #advanced-bar #fontsize-block a, #access-bar #advanced-bar #toggle-fullwidth-block button, #access-bar #advanced-bar #toggle-fullwidth-block a{ clear:none; padding:0.6em 1.2em; font-size:1.2em; border-radius:3em; -moz-border-radius:3em; -webkit-border-radius:3em; } #access-bar #advanced-bar #layout-modes-block a, #access-bar #advanced-bar #font-style-block a{} /* access-bar-mod position */ #access-bar-mod{ width:92%; margin:1em 4%; clear:both; } /* ------------------------ - LAYOUT CONTAINER ------------------------ */ #layout-container{ margin:0 auto 1.8em auto; padding:1px; width:96%; background-color:#FFF; border:1px solid #D9D5D0; z-index:1; position:relative; } #layout-container.access-bar-position-relative{margin-top:0.8em;} #layout-container.access-bar-position-fixed{margin-top:3.2em;} /* ------------------------ - HEADER ELEMENTS ------------------------ */ #header{ position:relative; display:block; width:100%; background:#fff; border-bottom:solid 4px #333; } /* HEADER-TOP ( Website help, site map & mobile link - language switcher - search module ) --------------------------- */ #header #header-top{ float:right; clear:both; position:relative; overflow:hidden; } /* Website help, sitemap & mobile link --------------------------- */ #header #header-menu-outer{float:left;} #header #header-menu-inner-2,#header #header-menu-inner-1{ overflow:hidden; font-size:0.81em; padding:0.88em 0.44em 0.22em 0.44em; float:left; } #header #header-menu-outer ul{ list-style-type:none; padding:0; margin:0; overflow:hidden; } #header #header-menu-outer ul li{ margin:0; padding:0; overflow:visible; float:left; } #header #header-menu-outer ul a{ display:block; float:left; padding:0.1em 0.8em 0.2em 0.8em; margin:0 -2px 0 0; text-align:center; border-right:solid 1px #999; } #header #header-menu-inner-1 ul a{} #header #header-menu-inner-1 ul a:hover, #header #header-menu-inner-1 ul a:focus{} #header #header-menu-inner-2 ul a{} #header #header-menu-inner-2 ul a:hover, #header #header-menu-inner-2 ul a:focus{} /* Language switcher --------------------------- */ #header #language-switcher-outer{float:left;font-size:0.81em;clear:none;} #header #language-switcher-inner{float:left;padding:0.88em 0.7em 0.22em 0.7em;} #header #language-switcher-inner *{padding:0;margin:0;} #header #language-switcher-inner ul{list-style-type:none;float:left;} #header #language-switcher-inner li{float:left;} #header #language-switcher-inner img{display:inline-block;} #header #language-switcher-inner a{display:block;padding:0 0.3em;} /* Search box --------------------------- */ #header #search-block-outer{float:left;} #header #search-block-inner{ overflow:hidden; border:1px solid #FFF; float:left; position:relative; margin:0.4em 0.44em; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; } #header #search-block-inner form fieldset{ display:inline; float:left; padding:1.6em; text-align:left; width:6em; } #header #search-block-inner form label{ display:block; position:absolute; left:-9999px; top:-9999px; } #header #search-block-inner form .button{ float:right; margin:0; display:inline-block; padding:0 0.6em; height:2em; line-height:2em; border-color:#d9d5d0; background:#F0EEEE; background-image:none; color:#666; font-variant:small-caps; border-right:none; text-shadow:1px 1px 0 #FFF; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; -webkit-border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-topleft:6px; -moz-border-radius-bottomleft:6px; border-top-left-radius:6px; border-bottom-left-radius:6px; } #header #search-block-inner form .button:hover{background-color:#E7E4E4;color:#444;} #header #search-block-inner form .inputbox{ width:auto; display:inline-block; margin:0; padding:0 0.3em; height:1.8510em; line-height:2em; border:solid 1px #d9d5d0; font-size:0.81em; min-width:14em; color:#777; float:right; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; -webkit-border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-topright:6px; -moz-border-radius-bottomright:6px; border-top-right-radius:6px; border-bottom-right-radius:6px; } #header #search-block-inner form .inputbox:focus{color:#333;border-color:#D93322;} /* WEBSITE PRESENTATION --------------------------- */ #header #website-header{ clear:both; position:relative; width:96%; margin:0 2%; } #header #titles-container, #header #titles-container-middle, #header #titles-container-inner{ position:relative; } #header #title,#header #subtitle{white-space:nowrap;} #header #title{ font-size:3em; margin:0 0 0.1em 0; display:block; height:1.2em; font-style:normal; text-shadow:2px 2px 3px #ccc; } #header #subtitle{ font-size:1em; margin:0 0 0.4em 0; color:#777; text-align:left; text-indent:2.4em; } #header #logo-wrap, #header #logo-wrap img, #header #logo-wrap a{overflow:visible;display:block;} /* WEBSITE PRESENTATION BLOCKS ALIGNMENT ( LOGO + TITLE + SUBTITLE ) --------------------------- */ /* LEFT */ #header .presentation-align-left{float:left;} #header .presentation-align-left #logo-wrap{float:left;} #header .presentation-align-left.show-logo-true #titles-container {float:left;position:static;margin-left:0.6em;} #header .presentation-align-left.show-logo-true #titles-container-middle {position:absolute;top:50%;} #header .presentation-align-left.show-logo-true #titles-container-inner {position:relative;top:-2.4em;} #header .presentation-align-left.show-logo-true #titles-container #title, #header .presentation-align-left.show-logo-true #titles-container #subtitle {display:block;float:left;clear:both;} /* no logo style - left align */ #header .presentation-align-left.show-logo-false #titles-container {margin:1em 0;} /* CENTER */ #header .presentation-align-center{float:left;} #header .presentation-align-center #logo-wrap{width:100%;float:none;text-align:center;} #header .presentation-align-center #logo-wrap a{display:inline-block;margin:0 auto;} #header .presentation-align-center #logo-wrap img{display:block;} #header .presentation-align-center #titles-container, #header .presentation-align-center #titles-container-middle, #header .presentation-align-center #titles-container-inner {width:100%;float:none;} #header .presentation-align-center #titles-container #title, #header .presentation-align-center #titles-container #subtitle {text-align:center;text-indent:0;} /* no logo style - center align */ #header .presentation-align-center.show-logo-false #titles-container {margin:1em auto;} /* RIGHT */ #header .presentation-align-right{float:right;} #header .presentation-align-right.show-logo-true #logo-wrap{float:right;} #header .presentation-align-right.show-logo-true #titles-container {float:left;position:static;margin-left:0.6em;} #header .presentation-align-right.show-logo-true #titles-container-middle {position:absolute;top:50%;} #header .presentation-align-right.show-logo-true #titles-container-inner {position:relative;top:-2.4em;} #header .presentation-align-right.show-logo-true #titles-container #title, #header .presentation-align-right.show-logo-true #titles-container #subtitle {display:block;float:left;clear:both;} /* no logo style - right align */ #header .presentation-align-right.show-logo-false #titles-container {float:right;margin:1em 0;} /* ------------------------ - TOP MENU STYLE ------------------------ */ /* container */ #header #top-menu-block{ float:right; position:relative; overflow:visible; margin:0.8em 0 0 0; width:100%; clear:both; } /* VERTICAL STYLE ( GENERAL STYLE, not floated ) --------------------------- */ /* 1st level */ #header #top-menu-block ul.menu{ text-align:center; display:block; margin:0; padding:0; list-style-type:none; } #header #top-menu-block ul.menu li{ color:#333; display:inline; text-align:center; margin:0; padding:0; overflow:visible; } #header #top-menu-block ul.menu li a, #header #top-menu-block ul.menu li a:link, #header #top-menu-block ul.menu li a:visited{ display:inline-block; padding:0.3em 0.8em 0.2em; font-size:0.81em; line-height:1.5em; text-decoration:none; border-bottom:solid 1px #CFCFCF; margin:0 1px 0 0; background-color:#666; color:#FFF; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; border-top-left-radius:6px; border-top-right-radius:6px; } #header #top-menu-block ul.menu li a:hover, #header #top-menu-block ul.menu li:hover>a, #header #top-menu-block ul.menu li a:active, #header #top-menu-block ul.menu li a:focus, #header #top-menu-block ul.menu li.active>a{/* hover + current page style */ color:#FFF; background-color:#333; border-bottom:solid 1px #333; } /* current page link style - 1st level */ #header #top-menu-block ul.menu li.current>a, #header #top-menu-block ul.menu li.current>a:link, #header #top-menu-block ul.menu li.current>a:visited{} #header #top-menu-block ul.menu li.current>a:hover, #header #top-menu-block ul.menu li.current>a:focus, #header #top-menu-block ul.menu li.current>a:active{} /* Sub menus - 2nd level */ #header #top-menu-block ul.menu ul{ display:block; visibility:hidden; position:absolute; list-style-type:none; float:left; clear:both; background-color:#333; width:100%; margin:0; padding:1px 0 0 0; overflow:visible; text-align:left; } /* Sub menus - 3rd level */ #header #top-menu-block ul.menu ul ul{ padding-top:2px; margin-top:2px; border-top:1px dotted #555; } /* Parent elements - 2nd,3rd,4th... levels */ #header #top-menu-block ul.menu li.active>ul{ position:static; visibility:visible; } /* Links style - 2nd/3rd/4th... level */ #header #top-menu-block ul.menu ul a, #header #top-menu-block ul.menu ul a:link, #header #top-menu-block ul.menu ul a:visited{ padding:0.4em 22px; border:0; border:1px solid #333; border-left-color:#666; border-right-color:#666; margin:0; background-color:#333; color:#DDD; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; } #header #top-menu-block ul.menu ul a:hover, #header #top-menu-block ul.menu ul a:active, #header #top-menu-block ul.menu ul a:focus{ background-color:#444; border-top-color:#444; border-bottom-color:#444; color:#FFF; } #header #top-menu-block ul.menu ul li{ margin:0 -1px 0 0; } /* LINK STYLE:parent - active - current links - 2nd/3rd/4th... level */ #header #top-menu-block ul.menu ul li.parent>a, #header #top-menu-block ul.menu ul li.active>a, #header #top-menu-block ul.menu ul li.current>a{ padding:0.4em 20px 0.4em 18px; background-position:right center; background-repeat:no-repeat; } /* parent links */ #header #top-menu-block ul.menu ul li.parent>a{ background-image:url('../images/arrow-down-grey-alt.png'); } /* active links */ #header #top-menu-block ul.menu ul li.active>a{ background-color:#222; border-top-color:#666; border-bottom-color:#666; color:#EEE; background-image:url('../images/arrow-down-white-alt.png'); } /* current links */ #header #top-menu-block ul.menu ul li.current>a{ background-color:#4C4C4C; border-top-color:#666; border-bottom-color:#666; color:#FFF; background-image:url('../images/cube-white.png'); } /* hover states, parent, active & current links */ #header #top-menu-block ul.menu ul li.parent>a:hover, #header #top-menu-block ul.menu ul li.parent>a:focus, #header #top-menu-block ul.menu ul li.parent>a:active{} #header #top-menu-block ul.menu ul li.active>a:hover, #header #top-menu-block ul.menu ul li.active>a:focus, #header #top-menu-block ul.menu ul li.active>a:active{} #header #top-menu-block ul.menu ul li.current>a:hover, #header #top-menu-block ul.menu ul li.current>a:focus, #header #top-menu-block ul.menu ul li.current>a:active{} /* FLOATING MENU STYLE - VERTICAL & HORIZONTAL STYLE --------------------------- */ /* HORIZONTAL STYLE --------------------------- */ .topMenuStyleHorizFloat #header #top-menu-block ul.menu ul, .topMenuStyleHorizFloat #header #top-menu-block ul.menu li.active>ul{ text-align:center; visibility:hidden; position:absolute; margin:-1px 0 0 0; } .topMenuStyleHorizFloat #header #top-menu-block ul.menu ul li{ margin:0 -1px 0 0; } .topMenuStyleHorizFloat #header #top-menu-block ul.menu ul a{} /* Hover state - Sub levels */ .topMenuStyleHorizFloat #header #top-menu-block ul.menu ul:hover, .topMenuStyleHorizFloat #header #top-menu-block ul.menu li:hover>ul {visibility:visible;} /* VERTICAL STYLE --------------------------- */ /* top menu - 1st level */ .topMenuStyleVerticFloat #header #top-menu-block ul.menu{ text-align:left; float:right; } .topMenuStyleVerticFloat #header #top-menu-block ul.menu li{ position:relative; display:block; float:left; } .topMenuStyleVerticFloat #header #top-menu-block ul.menu li a, .topMenuStyleVerticFloat #header #top-menu-block ul.menu li a:link, .topMenuStyleVerticFloat #header #top-menu-block ul.menu li a:visited{ display:block; float:left; } /* Sub menus - 2nd,3rd,4th... level */ .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul, .topMenuStyleVerticFloat #header #top-menu-block ul.menu li.active>ul{ width:auto; margin:-1px 0 0 0; padding:0; border:0; display:block; position:absolute; visibility:hidden; top:100%; left:0; } .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul li{ margin:0; padding:0; border:0; width:100%; } /* Sub menu - 3rd/4th/5th... level */ .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul ul, .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul li.active>ul{ top:0; left:auto; right:100%; margin:0; } /* Last child - 2st level */ .topMenuStyleVerticFloat #header #top-menu-block ul.menu>li:last-child>ul {left:auto;right:1px;} /* Hover state - Sub levels */ .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul:hover, .topMenuStyleVerticFloat #header #top-menu-block ul.menu li:hover>ul {visibility:visible;} /* link style - 2nd,3rd,4th... levels */ .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul a, .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul a:link, .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul a:visited{ display:block; width:10em; float:left; padding:0.4em 20px 0.4em 18px; border:0; margin:0; } .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul a:hover, .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul li:hover>a, .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul a:active, .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul a:focus{ background-color:#555; color:#FFF; } /* LINKS STYLE:parent - active - current links - 2nd/3rd/4th... level */ /* active links */ .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul li.active>a{ background-color:#444; color:#EEE; background-image:url('../images/arrow-right-white-alt.png'); } /* current links */ .topMenuStyleVerticFloat #header #top-menu-block ul.menu ul li.current>a{ background-color:#444; color:#FFF; background-image:url('../images/cube-white.png'); } /* ------------------------ - CONTENT BODY ( #left, #content-area, #right ) ------------------------ */ #main-body{ display:block; width:100%; background:#FAF7F7; position:relative; border:none; font-size:0.81em; } /* ------------------------ - LEFT COLUMN STYLE ------------------------ */ #left{ float:left; background:none; margin-bottom:2em; } #left.width17{width:17%;} #left.width20{width:20%;} #left.floatLeftColumn{float:left;} #left.floatRightColumn{float:right;} /* ------------------------ - RIGHT COLUMN STYLE ------------------------ */ #right{ float:right; width:17%; background:none; margin-bottom:2em; } #right.width17{width:17%;} #right.width20{width:20%;} #right.floatLeftColumn{float:left;} #right.floatRightColumn{float:right;} /* ------------------------ - MENU STYLE - left/right column ------------------------ */ /* 1st level style */ #main-body ul.menu{border-top:dotted 1px #BBB;} #main-body ul.menu, #main-body ul.menu ul{ list-style-position:inside; list-style-type:none; margin:0; padding:0; width:auto; } #main-body ul.menu li{margin:0;padding:0;position:relative;width:100%;} /* Links style - 1st level */ #main-body ul.menu a, #main-body ul.menu a:link, #main-body ul.menu a:visited{ display:block; margin:0; padding:0.2em 0 0.2em 0.6em; color:#505050; font-weight:normal; border-bottom:1px dotted #BBB; text-decoration:none; text-align:left; line-height:1.5em; } #main-body ul.menu a:hover, #main-body ul.menu li:hover>a, #main-body ul.menu a:active, #main-body ul.menu a:focus{ background:#E8E8E8; color:#444; } /* last item menu */ #main-body ul.menu>li:last-child>a{} /* Parent links style */ #main-body ul.menu li.parent>a, #main-body ul.menu li.parent>a:link, #main-body ul.menu li.parent>a:visited{ background-image:url('../images/parent-level.png'); background-position:center right; background-repeat:no-repeat; padding-right:16px; } #main-body ul.menu li.parent>a:hover, #main-body ul.menu li.parent>a:focus, #main-body ul.menu li.parent>a:active{} /* Hidden submenus ( not active state ) */ #main-body ul.menu ul{ visibility:hidden; position:absolute; } /* Active menu style */ #main-body ul.menu li.active>ul{ visibility:visible; position:relative; top:0; left:0; } #main-body ul.menu li.active li{margin:0;width:auto;} #main-body ul.menu li.active ul{ border-bottom:1px solid #D4D0D0; margin:0 0 0 0.6em; } /* Links style - 2nd/3rd/4th... level */ #main-body ul.menu ul a, #main-body ul.menu ul a:link, #main-body ul.menu ul a:visited{ text-transform:capitalize; border-bottom:1px solid #FFFFFF; border-top:1px solid #D4D0D0; background-color:#EDF0E6; } #main-body ul.menu ul a:hover, #main-body ul.menu ul li:hover>a, #main-body ul.menu ul a:active, #main-body ul.menu ul a:focus {background-color:#FFF;} /* Active menu link */ #main-body ul.menu li.active>a, #main-body ul.menu li.active>a:link, #main-body ul.menu li.active>a:visited{ border-bottom:2px solid #444; border-top:none; padding-left:0.6em; background-color:#FFF; background-image:url('../images/arrow-down-empty-alt.png'); background-position:center right; background-repeat:no-repeat; } #main-body ul.menu li.active>a:hover, #main-body ul.menu li.active>a:focus, #main-body ul.menu li.active>a:active{} /* current page menu style */ #main-body ul.menu li.current ul{margin:0 0 -1px 0.5em;} #main-body ul.menu li.current li{ background-color:#EDF0E6; background-image:url('../images/left-arrow.png'); background-position:center left; background-repeat:no-repeat; } /* current page link style - all levels */ #main-body ul.menu li.current>a, #main-body ul.menu li.current>a:link, #main-body ul.menu li.current>a:visited{ background-color:#FFF; border-bottom:2px solid #444; border-top:none; margin:0; color:#333; padding-right:12px; padding-left:0.6em; background-image:url('../images/arrow-right.png'); background-position:center right; background-repeat:no-repeat; } #main-body ul.menu li.current>a:hover, #main-body ul.menu li.current>a:focus, #main-body ul.menu li.current>a:active{background-color:#FFF;} /* current page link style - 2nd/3rd/4th... level */ #main-body ul.menu ul li.current>a, #main-body ul.menu ul li.current>a:link, #main-body ul.menu ul li.current>a:visited {border-top:1px solid #CCC;} #main-body ul.menu ul li.current>a:hover, #main-body ul.menu ul li.current>a:focus, #main-body ul.menu ul li.current>a:active{} /* FLOATING MENU STYLE --------------------------- */ .sideMenuStyleFloat #main-body ul.menu, .sideMenuStyleFloat #main-body ul.menu ul, .sideMenuStyleFloat #main-body ul.menu li, .sideMenuStyleFloat #main-body ul.menu li.active li, .sideMenuStyleFloat #main-body ul.menu ul li.current{list-style:none;} .sideMenuStyleFloat #main-body ul.menu ul, .sideMenuStyleFloat #main-body ul.menu li.active ul{ position:absolute; visibility:hidden; margin:0; overflow:visible; left:100%; width:100%; top:-1px; border:solid 1px #CCC; border-bottom-color:#AAA; border-right-color:#AAA; } .sideMenuStyleFloat #main-body ul.menu li:hover>ul, .sideMenuStyleFloat #main-body ul.menu ul:hover{visibility:visible;} /* If the menu is on the right column */ .sideMenuStyleFloat #main-body .floatRightColumn ul.menu ul, .sideMenuStyleFloat #main-body .floatRightColumn ul.menu li.active ul{right:100%;left:auto;} /* links: level 2nd,3rd,4th... */ .sideMenuStyleFloat #main-body ul.menu ul a, .sideMenuStyleFloat #main-body ul.menu ul a:link, .sideMenuStyleFloat #main-body ul.menu ul a:visited{} .sideMenuStyleFloat #main-body ul.menu ul a:hover, .sideMenuStyleFloat #main-body ul.menu ul li:hover>a, .sideMenuStyleFloat #main-body ul.menu ul a:active, .sideMenuStyleFloat #main-body ul.menu ul a:focus{} /* LOGIN FORM - Left column --------------------------- */ #left #loginModContainer fieldset{display:block;width:auto;padding:4% 0 6% 0;} #left #loginModContainer #modlgn-username, #left #loginModContainer #modlgn-passwd{ display:block; margin:0.1em auto; padding:0.2em 0; width:80%; } #left #loginModContainer label{ font-weight:normal; font-style:italic; display:block; width:88%; margin:0.3em 0 0.3em 6%; } #left #loginModContainer #form-login-username, #left #loginModContainer #form-login-password, #left #loginModContainer #form-login-remember{margin:0;padding:0.2em 0;} #left #loginModContainer input.button{float:right;margin:0.6em 10% 0 0;} #left #form-login-remember label, #left #form-login-remember input{display:inline;padding-top:0;} #left #loginModContainer ul{list-style:none;margin:0;padding:0;} #left #loginModContainer ul li{margin-top:0.3em;padding:0;text-align:center;} /* ------------------------ - CONTENT AREA ------------------------ */ #content-area{ float:left; overflow:visible; background:none; margin-bottom:1.4em; } #content-area.width64{width:66%;} #content-area.width80{width:80%;} #content-area.width100{width:100%;} #content-area.width64 #content-area-inner{margin:1em 1%;} #content-area.width80 #content-area-inner, #content-area.width100 #content-area-inner{margin:1em 3%;} #content-area.floatLeftColumn{float:left;} #content-area.floatRightColumn{float:right;} /* Content area elements --------------------------- */ #content-area p{text-align:justify;} #content-area ul{} #content-area ol{} #content-area ul li,#content-area ol li{} /* headers in content area */ #content-area h1 a,#content-area h2 a,#content-area h3 a, #content-area h4 a,#content-area h5 a,#content-area h6 a{ text-decoration:none; display:block; border-bottom:1px dotted #BBB; padding:0 0 0.2em 0; } #content-area h1{} #content-area h2{} #content-area h3{margin:1.6em 0.6% 0.8em 0.6%;} #content-area h4{margin:1.3em 0.6% 0.5em 0.6%;} #content-area h5{margin:1em 0.6% 0.5em 0.6%;} #content-area h6{margin:0.8em 0.6% 0.5em 0.6%;} /* banner container --------------------------- */ #banner-container{ float:left; clear:both; margin:1em 4%; overflow:hidden; background:none; width:92%; } /* ------------------------ - FOOTER + FOOTER-MENU ------------------------ */ #footer,#footer-menu{ color:#FFF; background-color:#333; overflow:hidden; } #footer a,#footer a:link, #footer-menu a,#footer-menu a:link{ color:#EEE; } #footer a:visited, #footer-menu a:visited{color:#BBB;} #footer a:focus,#footer a:hover, #footer-menu a:focus,#footer-menu a:hover{color:#9ed16b;} /* ------------------------ - FOOTER ------------------------ */ #footer{ padding:2em 0; font-size:0.81em; } #footer h1,#footer h2,#footer h3, #footer h4,#footer h5,#footer h6{ color:#EEE; text-transform:uppercase; } #footer a, #footer a:link{} #footer a:visited{} #footer a:focus, #footer a:hover{} /* footer credits mod --------------------------- */ #footer #footer-credits{ width:92%; margin:3em 4% 1.6em 4%; color:#FFF; line-height:1.5; font-size:0.91em; } /* ------------------------ - FOOTER MENU ------------------------ */ #footer-menu{ font-size:0.81em; padding:2em 0; } /* first level */ #footer-menu ul.menu{ display:block; text-align:center; margin:0 auto; padding:0; width:auto; list-style-type:none; overflow:hidden; } /* sub-levels are hidden */ #footer-menu ul.menu ul{display:none;} #footer-menu ul.menu li{ display:inline; text-align:center; padding:0.3em 0.5em; margin:0; border:0; } #footer-menu ul.menu li a, #footer-menu ul.menu li a:link{ display:inline-block; color:#EEE; margin:0; padding:0; border:0; font-size:0.91em; } #footer-menu ul.menu li a:visited{color:#BBB;} #footer-menu ul.menu li a:focus, #footer-menu ul.menu li a:hover{color:#9ed16b;} /* current page link style */ #footer-menu ul.menu li.current>a, #footer-menu ul.menu li.current>a:link, #footer-menu ul.menu li.current>a:visited{color:#9ed16b;} #footer-menu ul.menu li.current>a:hover, #footer-menu ul.menu li.current>a:focus, #footer-menu ul.menu li.current>a:active{} /* ------------------------ - MODULETABLE STYLES ------------------------ */ /* MAINBODY - NO STYLE (no suffix) --------------------------- */ .moduletable, .moduletable_text, .module, .module_text{ width:auto; padding:.5em 2%; margin:.3em; overflow:visible; } /* headings */ .moduletable h1, .moduletable_text h1, .moduletable h2, .moduletable_text h2, .moduletable h3, .moduletable_text h3, .module h1, .module_text h1, .module h2, .module_text h2, .module h3, .module_text h3{ color:#333; text-indent:0.3em; text-align:left; font-size:1.31em; margin:0 0 0.54em 0; padding:0.54em 0.3em 0.24em 0.6em; border-bottom:1px #555 dashed; } /* MAINBODY - PLAIN & FULL-WIDTH CLASSES --------------------------- */ .moduletable_plain, .moduletable_full-width, .module_plain, .module_full-width{display:block;padding:0;margin:0;} /* plain */ .moduletable_plain, .module_plain{padding:0.8em 4%;} /* headings */ .moduletable_plain h1, .moduletable_full-width h1, .module_plain h1, .module_full-width h1, .moduletable_plain h2, .moduletable_full-width h2, .module_plain h2, .module_full-width h2, .moduletable_plain h3, .moduletable_full-width h3, .module_plain h3, .module_full-width h3{margin-top:0.6em;margin-bottom:1em;} /* MAINBODY - LIGHT & DARK CLASSES --------------------------- */ /* general */ .moduletable_light, .moduletable_dark, .module_light, .module_dark{ border-width:3px; border-style:solid; display:block; width:auto; margin:0.6em 2%; padding:0.4em 4% 0.8em 4%; -webkit-border-radius:0.4em; -moz-border-radius:0.4em; border-radius:0.4em; } .moduletable_light h1, .moduletable_light h2, .moduletable_light h3, .moduletable_dark h1, .moduletable_dark h2, .moduletable_dark h3, .module_light h1, .module_light h2, .module_light h3, .module_dark h1, .module_dark h2, .module_dark h3{ font-size:1.3em; display:block; margin:0 0.2em 0.6em 0.2em; padding:0.3em 0; text-indent:0.2em; border-bottom-width:1px; border-bottom-style:solid; } .moduletable_light p, .moduletable_dark p, .module_light p, .module_dark p{ margin:0.4em 1em 0.8em 1em; width:auto; } /* light module */ .moduletable_light, .module_light{ color:#555; border-color:#DEDBDB; background:#FFF; } .moduletable_light h1, .moduletable_light h2, .moduletable_light h3, .module_light h1, .module_light h2, .module_light h3{ color:#444; border-bottom-color:#E3E1E1; } .moduletable_light:hover, .module_light:hover{} /* dark module */ .moduletable_dark, .module_dark{ color:#6a6c6c; border-color:#CCC; background:#EEE; } .moduletable_dark h1, .moduletable_dark h2, .moduletable_dark h3, .module_dark h1, .module_dark h2, .module_dark h3{ color:#555; border-bottom-color:#CCC; } .moduletable_dark:hover, .module_dark:hover{} /* FOOTER - NO STYLE (no suffix) --------------------------- */ #footer .moduletable, #footer .moduletable_text, #footer .module, #footer .module_text{ width:auto; padding:1em 4%; } /* headings */ #footer .moduletable h1, #footer .moduletable_text h1, #footer .moduletable h2, #footer .moduletable_text h2, #footer .moduletable h3, #footer .moduletable_text h3, #footer .module h1, #footer .module_text h1, #footer .module h2, #footer .module_text h2, #footer .module h3, #footer .module_text h3{ font-size:1.2em; color:#DDD; text-transform:uppercase; padding:0.6em 0 0.4em 0.4em; border-bottom:solid 8px #404040; } /* FOOTER - MENU STYLE --------------------------- */ /* menu - ul element */ #footer ul.menu, #footer ul.menu li{ list-style:none; margin:0; padding:0; display:block; } /* menu links */ #footer ul.menu a, #footer ul.menu a:link{ text-decoration:none; padding:0.5em; margin:0 6% 0 6%; border-bottom:dotted 1px #444; display:block; width:auto; } #footer ul.menu a:visited{} #footer ul.menu a:hover, #footer ul.menu a:focus, #footer ul.menu a:active{} #footer ul.menu ul{display:none;} #footer ul.menu li.active>ul, #footer ul.menu li.current>ul{display:block;} /* child items */ #footer ul.menu ul li{list-style-type:circle;list-style-position:inside;} /* current item */ #footer ul.menu ul li.current{list-style-type:disc;} /* Last child link - all levels */ #footer ul.menu li:last-child>a{} /* active link */ #footer ul.menu li.active>a{font-weight:bold;} #footer ul.menu li.active>a:hover, #footer ul.menu li.active>a:focus, #footer ul.menu li.active>a:active{} /* parent link */ #footer ul.menu li.parent>a{} #footer ul.menu li.parent>a:hover, #footer ul.menu li.parent>a:focus, #footer ul.menu li.parent>a:active{} /* current link */ #footer ul.menu li.current>a{} #footer ul.menu li.current>a:hover, #footer ul.menu li.current>a:focus, #footer ul.menu li.current>a:active{} /* FOOTER - LIGHT & DARK CLASSES --------------------------- */ /* light module */ #footer .moduletable_light, #footer .module_light{ color:#AAA; border-color:#666; background:#444; } #footer .moduletable_light h1, #footer .moduletable_light h2, #footer .moduletable_light h3, #footer .module_light h1, #footer .module_light h2, #footer .module_light h3{ color:#CCC; border-bottom-color:#666; } /* dark module */ #footer .moduletable_dark, #footer .module_dark{ color:#7a7c7c; border-color:#444; background-color:#222; } #footer .moduletable_dark h1, #footer .moduletable_dark h2, #footer .moduletable_dark h3, #footer .module_dark h1, #footer .module_dark h2, #footer .module_dark h3{ color:#9a9c9c; border-bottom-color:#444; } /* ------------------------ - OTHER ELEMENTS ------------------------ */ /* form-buttons --------------------------- */ form button,form .button,form input[type=button]{float:right;} /* Anchors Menu elements (removed) --------------------------- */ .anchors-container{display:none;} /* "Jump to content" anchor ( displayed only in "default" layout mode ) --------------------------- */ a#jump-to-content{ position:fixed; z-index:999999; top:-9999px; left:-9999px; font-size:0.81em; text-decoration:none; padding:0.46em 10px 0.5em 20px; background-color:#FFEC42; color:#333; border:solid 2px #FF3100; outline:0; background-image:url('../images/internal-link.png'); background-position:center left; background-repeat:no-repeat; border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; } a#jump-to-content:focus{ top:2.6em; left:2em; } /* "Go to top" button --------------------------- */ #goto-top-block{width:100%;overflow:hidden;} #goto-top-block a,#goto-top-block a:link,#goto-top-block a:visited{ display:block; float:right; padding:0.3em 0.8em 0.2em; margin:2.4em 2px 0 0; line-height:1.5em; text-decoration:none; border:0; border-bottom:solid 1px #CFCFCF; background-color:#666; color:#FFF; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; border-top-left-radius:6px; border-top-right-radius:6px; } #goto-top-block a:hover,#goto-top-block a:focus{ color:#EEE; background-color:#333; border-bottom:solid 1px #333; } /* Section titles style ::: hidden --------------------------- */ .section-heading{ display:block; position:absolute; left:-9999px; top:-9999px; } /* obsolete browser alert --------------------------- */ .obsolete-browser-alert{ display:block; position:relative; z-index:999999; overflow:visible; padding:1em 0; background-color:#FBE3E4; margin:1em 10%; width:auto; color:#8A1F11; border:2px solid #FBC2C4; } .obsolete-browser-alert-inner{ position:relative; margin:1em 0; padding:0.6em 10%; margin:0 10%; border:solid 2px #FFF; } #hide-IE-message{ display:block; position:absolute; font-size:0.71em; color:#4C4848; left:0.2em; top:0.2em; } /* tooltip style --------------------------- */ .tooltip-title{ display:none; position:fixed; z-index:999999; left:-9999px; top:-9999px; background-color:#F7F7C3 !important; border:1px solid #CBCB6D; padding:0.1em; color:#000 !important; font-size:0.81em; max-width:20em; border-radius:0.1em; -moz-border-radius:0.1em; -webkit-border-radius:0.1em; } /* accordion block --------------------------- */ .accordion-block-readMore{ display:block; text-align:center; width:100%; background-color:#555 !important; color:#FFF !important; font-size:0.81em; position:absolute; left:0; bottom:0; cursor:pointer; cursor:hand; opacity:0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter:alpha(opacity=90); } .accordion-block-readMore:hover{background-color:#606060 !important;} /* accessibility-bar-message --------------------------- */ #accessibility-bar-message{ position:absolute; z-index:99999; top:0; right:0; margin:110% 10% 0 0; padding:7px 0 0 0; } #accessibility-bar-message-inner{ background:#FFFDCC; padding:1em 1.6em; color: #222; border:1px solid #555; border-bottom-color:#333; border-radius:0.2em; -moz-border-radius:0.2em; -webkit-border-radius:0.2em; } #accessibility-bar-message-inner p, #accessibility-bar-message-inner span{margin:0;padding:0;white-space:nowrap;} #accessibility-bar-message-arrow{ background:none; background-image:url('../images/accessibility-bar-message-arrow.png'); background-position:top right; background-repeat:no-repeat; height:14px; width:24px; position:absolute; top:0; right:0; } #accessibility-bar-message-clickHere{font-weight:bold;} /* z-index priority --------------------------- */ #header,#header ul.menu,#header ul.menu *{z-index:999;} #left,#right, #left ul.menu,#left ul.menu *, #right ul.menu,#right ul.menu *{z-index:777;} ul.menu,ul.menu *{z-index:999999;} /* ------------------------ - ADD YOUR PERSONAL STYLE HERE: ------------------------ */ #design-by-accessibletemplate{ padding:0.2em 2% 0.4em 2%; margin:0 auto 1em auto; width:auto !important; text-align:right; font-size:0.91em; } /* ------------------------ - MEDIA QUERIES - MOBILE DEVICES (I-Phone) ------------------------ */ @media screen and (max-device-width: 480px){ #layout-container.full-layout-width #access-bar{position:relative !important;} #layout-container.full-layout-width{margin-top:0.6em !important;} } /* ------------------------ - MEDIA QUERIES - SMALL SCREENS & MOBILES ------------------------ */ /* Note that all those properties are set only for a liquid layout */ @media screen and (max-width: 480px){ #layout-container.full-layout-width{margin-top:0.6em !important;} #layout-container.full-layout-width #header #header-top{float:right;position:relative !important;clear:both !important;} #layout-container.full-layout-width #header #search-block-outer{float:right !important;} #layout-container.full-layout-width #logo-wrap{ float:none !important; width:100% !important; text-align:center !important; margin:0 !important; } #basic-bar,#basic-bar-inner{height: auto !important;overflow: hidden !important;} #layout-container.full-layout-width #logo-wrap, #layout-container.full-layout-width #logo-wrap img, #layout-container.full-layout-width #logo-wrap a{margin:0 auto !important;} #layout-container.full-layout-width #titles-container, #layout-container.full-layout-width #titles-container-middle, #layout-container.full-layout-width #titles-container-inner, #layout-container.full-layout-width #titles-container #title, #layout-container.full-layout-width #titles-container #subtitle{ float:none !important; position:relative !important; width:100% !important; text-align:center !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; margin:0 0 0.2em 0 !important; padding:0 !important; text-indent:0 !important; } #layout-container.full-layout-width #titles-container #title{font-size:1.8em !important;} #layout-container.full-layout-width #titles-container #subtitle{font-size:1em !important;margin-bottom:0.6em !important;} #layout-container.full-layout-width #titles-container #title.invisible{ position:absolute !important; left:-9999px !important; top:-9999px !important; } #layout-container.full-layout-width #left, #layout-container.full-layout-width #content-area, #layout-container.full-layout-width #right, .adv-bar-block{ float:left !important; width:100% !important; clear:both; } /* Columns --------------------------- */ #layout-container.full-layout-width .column-1, #layout-container.full-layout-width .column-2, #layout-container.full-layout-width .column-3, #layout-container.full-layout-width .cols-1, #layout-container.full-layout-width .cols-2 .column-1, #layout-container.full-layout-width .cols-2 .column-2, #layout-container.full-layout-width .cols-3 .column-1, #layout-container.full-layout-width .cols-3 .column-2, #layout-container.full-layout-width .cols-3 .column-3, #layout-container.full-layout-width .cols-4 .column-1, #layout-container.full-layout-width .cols-4 .column-2, #layout-container.full-layout-width .cols-4 .column-3, #layout-container.full-layout-width .cols-4 .column-4, #layout-container.full-layout-width .col-style-full, #layout-container.full-layout-width .col-style-2, #layout-container.full-layout-width .col-style-3, #layout-container.full-layout-width .col-style-4, #layout-container.full-layout-width .col-style-5, #layout-container.full-layout-width .col-style-6, #layout-container.full-layout-width .user-mod-col-1, #layout-container.full-layout-width .user-mod-col-2, #layout-container.full-layout-width .user-mod-col-3, #layout-container.full-layout-width .user-mod-col-4, #layout-container.full-layout-width .marked-block-dark, #layout-container.full-layout-width .marked-block-light, #layout-container.full-layout-width .marked-block-dark.col-style-full, #layout-container.full-layout-width .marked-block-light.col-style-full, #layout-container.full-layout-width .marked-block-dark.col-style-2, #layout-container.full-layout-width .marked-block-light.col-style-2, #layout-container.full-layout-width .marked-block-dark.col-style-3, #layout-container.full-layout-width .marked-block-light.col-style-3, #layout-container.full-layout-width .marked-block-dark.col-style-4, #layout-container.full-layout-width .marked-block-light.col-style-4, #layout-container.full-layout-width .marked-block-dark.col-style-5, #layout-container.full-layout-width .marked-block-light.col-style-5, #layout-container.full-layout-width .marked-block-dark.col-style-6, #layout-container.full-layout-width .marked-block-light.col-style-6 {display:block;float:none;width:auto;margin:1em 2%;clear:both;} } /* ------------------------ - MEDIA QUERIES - NARROW SCREENS ------------------------ */ @media screen and (min-width: 480px) and (max-width: 719px){ #layout-container.full-layout-width #layout-container{margin-top:0.6em !important;} #layout-container.full-layout-width #left, #layout-container.full-layout-width #content-area, #layout-container.full-layout-width #right{ float:left !important; width:100% !important; clear:both; } #layout-container.full-layout-width #header #header-top{float:right;position:relative !important;clear:both !important;} #layout-container.full-layout-width #header #search-block-outer{float:right !important;} #layout-container.full-layout-width #logo-wrap{ margin-top:0 !important; } #layout-container.full-layout-width #titles-container #title{font-size:1.8em !important;} #layout-container.full-layout-width #titles-container #subtitle{font-size:1em !important;} } /* ------------------------ - MEDIA QUERIES - LARGE SCREENS ------------------------ */ @media screen and (min-width: 1025px){ #layout-container.full-layout-width{width:86% !important;} } /* ------------------------ - MEDIA QUERIES - SUPER LARGE SCREENS ------------------------ */ @media screen and (min-width: 1921px){ #layout-container.full-layout-width{width:70% !important;} }