/* DO NOT CHANGE ANY OF THESES SETTINGS UNLESS AUTHORIZED !!! */ body { color: #172b4d; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-size: 14px; font-weight: 400; line-height: 1.42857143; letter-spacing: 0; } a, a:visited, a:focus, a:hover, a:active, a.blogHeading, .wiki-content a, .wiki-content a:link, .wiki-content a:visited, .wiki-content a:focus, .wiki-content a:hover, .wiki-content a:active, .eu .toc-macro a, .eu .toc-macro a:link, .eu .toc-macro a:visited { color: #006bd5; } a img {cursor: pointer !important;} img, .wiki-content .confluence-embedded-file-wrapper .confluence-embedded-image[height], .wiki-content .confluence-embedded-file-wrapper .confluence-embedded-image[width] { max-width: 100%; height: auto; vertical-align: text-bottom; } /* Anchor Shift - START */ .expand-container { position: relative; } .confluence-anchor-link { position: relative; left: 0px; top: -80px; } /* Anchor Shift - END */ #homepage { position: relative; background-image: url("/download/attachments/33525368/sierraleone_oxfam_wash_190716_028.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 0px -100px; min-height: 800px; display: -ms-flex; display: -webkit-flex; display: flex; } .homepage-cover { position: relative; background: rgba(255, 255, 255, 0.1); min-height: 800px; height: 100%; } #homepage > .homepage-cover { flex:1; } .homepage-note { background: rgba(0, 0, 0, 0.5); padding: 15px; color: #FFFFFF; border-radius: 10px; margin: 0px 20px; } .homepage-note h1{ color: orange; text-shadow: 2px 2px 2px #000000; } .homepage-note a { font-size: 16px; color: #FFFFFF !important; text-shadow: 2px 2px 2px #000000; } .homepage-note a:hover { text-decoration: none; font-weight: 600; } .eu #content {font-size: 14px;} .eu #content h1 {font-size: 26px;} .eu #content h2 {font-size: 22px;} .eu #content h3 {font-size: 18px;} .eu #content h4 {font-size: 16px;} .eu #content h5 {font-size: 14px;} .eu #content h1 { font-weight: normal; line-height: 1.25; padding: 0px; } .eu #content, .eu #content h2, .eu #content h3, .eu #content h4, .eu #content h5 { font-weight: normal; line-height: 1.5; padding: 0px; margin: 10px 0 0 0; } .wiki-content h3 {font-weight: normal;} /* EUROPA THEME Hacks - START */ body.view-realsidebar #topheader, body.view-realsidebar #topmenu, body.view-realsidebar .preheader, body.view-realsidebar .header, body.view-realsidebar .sidebarMenu, body.view-realsidebar #custom-pagetree {display: none;} #topheader {position: relative;} body.view-content.view-realsidebar #content {margin-left: 0px; margin-top: 50px;} body.view-content #main {margin: 30px 0px 20px 0px !important; min-height: 1500px !important;} body.view-realsidebar #main {margin-left: 320px !important;} body.view-realsidebar .tools {top: 40px;} #custom-pagetree {display: none;} #custom-pagetree.displaytree {display: block;} .tools[style] {margin-left: 0px !important;} #draft-status-lozenge {display: none;} body.contenteditor #draft-status-lozenge {display: inline-block;} #topheader p {display: none;} .ia-splitter, #menu {overflow: initial !important;} /* so that sidebar menu can be sticky */ #main #content {overflow: hidden !important; padding-left: 20px;} .sidebarMenu {font-size: 16px; position: sticky; -webkit-position: sticky; top: 60px;} .center {max-width: none;} #title-text a {display: none;} .geDiagramContainer span {display: none;} #likes-and-labels-container {clear: both !important; padding: 20px 0px 0px 0px;} a.toggler {display: none;} /* EUROPA THEME Hacks - END */ /* TOC - START */ .eu .toc-macro, .eu .conf-macro div.toc-macro { width: 100%; float: none; margin: 10px 0 0 0; line-height: normal; padding: 0; background: none; border: none; position: relative; z-index: 1 !important; } .eu .toc-macro ul, .eu .toc-macro ul ul, .eu .toc-macro ul ul ul, .eu .toc-macro ul li, .eu .toc-macro ul ul li, .eu .toc-macro ul ul ul li { list-style-type: none; } .eu .toc-macro ul {margin-left: 0px;} .eu .toc-macro ul li a { background-image: url("/download/attachments/33525368/chevron-right.png"); background-size: 18px; background-repeat: no-repeat; background-position: left 5px !important; padding: 0px 0px 0px 25px !important; font-size: 22px; font-weight: 600; } .eu .toc-macro ul ul li a { background-image: url("/download/attachments/33525368/dot.png"); background-size: 5px; background-repeat: no-repeat; background-position: left 11px !important; padding: 0px 0px 0px 15px !important; margin-left: 5px; font-size: 18px; font-weight: 600; } .eu .toc-macro ul ul ul li a { background-size: 4px; font-size: 18px; font-weight: 500; } .eu .toc-macro ul ul ul ul li a { background-size: 3px; font-size: 16px; font-weight: 400; } .eu .toc-macro ul ul ul ul ul li a { background-size: 2px; font-size: 14px; font-weight: 300; } .eu .toc-macro ul ul ul ul ul ul li a { background-size: 1px; font-size: 12px; font-weight: 200; } /* TOC - END */ /* YOUTUBE video-container class for responsive 100% width video - START */ .youtube-player { width: 100% !important; max-width: 640px !important; margin: 20px auto !important; } /* YOUTUBE video-container class for responsive 100% width video - END */ /* EUROPA THEME Hacks - END */ .mobile-on {display: none;} .mobile-off {display: block;} .mobile-small {display: none;} .header-logo {display: inline-block; margin: 10px 10px 0 10px;} .header-logo img {width: auto; height: 100px;} .header-title { display: inline-block; } .top-title { position: relative; top: -25px; left: 20px; font-size: 25px; color: #ff9900; line-height: 30px; white-space: nowrap; } .top-subtitle { position: relative; top: -25px; left: 20px; font-style: italic; font-size: 14px; color: #696969; white-space: nowrap; } /* Search - START */ .header-search { position: relative; display: inline-block; left: 10%; margin: 10px; } .header-search .search-macro-medium { border: 1px solid #CCCCCC; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 5px #CCCCCC; } .search-macro-query input { padding: 5px 10px!important; font-size: 18px; line-height: 40px; height: 40px !important; color: blue !important; border: none; } .header-search input:focus { background-color: #e6f7fd; } .header-search .search-macro-medium, .search-macro-query input, .search-macro-query input.text, .header-search .search-macro-dropdown { position: relative; width: 400px !important; max-width: none !important; } .header-search .search-macro-medium > .search-macro-drop { position: relative; width: 400px !important; } .header-search .aui-button { border: none; background: none; } .header-search .aui-icon-small::before {font-size: 20px;} .header-search .aui-button .aui-icon {color: #254AA5;} .header-search .search-macro .search-macro-button { position: absolute; top: 0px; right: 10px; width: 35px; height: 35px; color: FFFFFF !important; } .header-search .search-macro .search-macro-button:hover { transform: scale(1.5); } .header-search .aui-dd-parent {margin-top: 0px;} .aui-dropdown ol li {height: 48px !important;} .aui-dropdown li a.additional {padding-left: 10px;} .aui-dd-parent .aui-dropdown li.active, .aui-dd-parent .aui-dropdown li.active span, .aui-dd-parent .aui-dropdown a:focus span {background: #0FC4FF; color: #FFFFFF;} /* Search - END */ .header { background: url("/download/attachments/33525368/header-bgd.png") no-repeat center; background-color: #FFFFFF; background-size: auto auto; background-size: cover; border-top: 5px solid #eb8d00; } /* Language selection - START */ .header-lang { display: inline-block; position: absolute; top: 20px; right: 20px; } .header-lang ul { position: relative; display: block; list-style-type: none; margin: 0; padding: 0; } .header-lang li { display: inline-block; } .header-lang li.selected, .header-lang li.selected:hover { background-color: #254AA5; border-radius: 5px; } .header-lang li:hover { background-color: #DDDDDD; border-radius: 5px; } .header-lang a { display: block; text-decoration: none; font-size: 16px; font-weight: 600; color: #2d5ac9; padding: 5px 10px; } .header-lang li.selected a { color: #FFFFFF; } .header-lang a:hover { color: #1d3980; } .header-lang li.selected a:hover { color: #FFFFFF; } /* Language selection - END */ /* Topmenu - START */ #top-menu { position: relative; } #topmenu { position: relative; margin: 0; padding: 0; display: inline-block; background: #0FC4FF; background: -webkit-linear-gradient(0deg, #007DA7, #0FC4FF); /* For Safari */ background: -o-linear-gradient(0deg, #007DA7, #0FC4FF); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(0deg, #007DA7, #0FC4FF); /* For Firefox 3.6 to 15 */ background: linear-gradient(0deg, #007DA7, #0FC4FF); /* Standard syntax (must be last) */ width: 100%; height: 40px; z-index: 999; margin-bottom: -5px; } #topmenu .toggle, [id^=drop] { display: none; } #topmenu ul { float: left; padding:0; margin:0; list-style: none; } #topmenu ul li { margin: 0px; display: inline-block; float: left; } #topmenu a { display: inline-block; color: #FFFFFF; text-decoration: none; font-size: 18px; font-weight: 500; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); line-height: 41px; padding: 0 15px; } #topmenu li:hover { background-color: rgba(0, 0, 0, 0.1); } #topmenu ul ul { display: none; position: absolute; top: 100%; background: #FFFFFF; padding:0; -webkit-box-shadow: 2px 2px 5px 0px rgba(105,105,105,1); -moz-box-shadow: 2px 2px 5px 0px rgba(105,105,105,1); box-shadow: 2px 2px 5px 0px rgba(105,105,105,1); } #topmenu ul li:hover > ul { display: inherit; } #topmenu ul ul li { position: relative; float: none; width: 220px; display: list-item; } #topmenu ul ul li:hover{ background: #0FC4FF; } #topmenu ul ul a, #topmenu ul ul ul a { display: block; color: #696969; font-size: 14px; text-shadow: none; font-weight: none; line-height: 41px; padding: 0px 15px; } #topmenu ul ul a:hover, #topmenu ul ul ul a:hover { color: #FFFFFF; } #topmenu ul ul ul { top: 0; left: 100%; } #topmenu ul li:hover > ul { display: block; } /* Topmenu - END */ #heading { position: absolute; top: -130px; left: 120px; text-align: left; width: 100%; } #sidebox div { padding: 5px 0; } .panel { border: none; } /* Simplify - START */ /* SECTIONS */ .section { clear: both; padding: 0px; margin: 0px; } /* COLUMN SETUP */ .col { display: block; float:left; margin-left: 1%; margin-bottom: 1%; } .col:first-child { margin-left: 0.5%; } /* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* For IE 6/7 */ } /* GRID OF TWELVE */ .span-12-12 { width: 100%; } .span-11-12 { width: 90.63%; /* 100/12*11-1% */ } .span-10-12 { width: 82.3%; } .span-9-12 { width: 73.97%; } .span-8-12 { width: 65.64%; } .span-7-12 { width: 57.31%; } .span-6-12 { width: 48.98%; } .span-5-12 { width: 40.65%; } .span-4-12 { width: 32.32%; } .span-3-12 { width: 23.99%; } .span-2-12 { width: 15.66%; } .span-1-12 { width: 7.33%; } .push { visibility: hidden; } .equal-cols { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .equal { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; max-height: 100%; } .table {display: table;} .table-cell {display: table-cell;} .switchtable {display: table; width: 100%; direction: rtl; margin-bottom: 10px;} .switchcell {display: table-cell; direction: ltr; width: auto; overflow: hidden;} .vertical-middle {vertical-align: middle;} .inline {display: inline-block;} .right {float: right;} .shiftup {padding-left: 20px;} .moveup {margin-top: -35px;} .hspace {display: none;} .pad {padding: 2% 2%;} #line-seperator { display: block; width: 100%; height: 5px; margin: 20px 0 auto; border-top: 5px solid #DDDDDD; } /* Simplify - END */ /* Sidebar & Expand - START */ .expand-control { white-space: nowrap; margin-top: 15px; } .expand-control-text { font-size: 20px; color: #006bd5; font-weight: normal; line-height: 1; margin: 10px 0 0 0; } .expand-content { margin: 0 0 20px 20px; } .aui-iconfont-chevron-right::before {content: none;} .aui-iconfont-chevron-down::before {content: none;} .aui-iconfont-chevron-right { background-image: url("/download/attachments/33525368/chevron-right.png"); background-size: 20px; display: inline-block; width: 20px; height: 20px; margin: 0px 10px 0px 10px; } .aui-iconfont-chevron-down { background-image: url("/download/attachments/33525368/chevron-down.png"); background-size: 20px; display: inline-block; width: 20px; height: 20px; margin: 0px 10px 0px 10px; } .plugin_pagetree_childtoggle.aui-iconfont-chevron-right { background-image: url("/download/attachments/33525368/chevron-right.png"); background-size: 16px; display: inline-block; width: 16px; height: 16px; margin: 0px 5px 3px 1px; } .plugin_pagetree_childtoggle.aui-iconfont-chevron-down { background-image: url("/download/attachments/33525368/chevron-down.png"); background-size: 16px; display: inline-block; width: 16px; height: 16px; margin: 0px 5px 3px 1px; } .icon-section-closed { background-image: url("/download/attachments/33525368/chevron-right.png"); background-size: 16px; display: inline-block; width: 16px; height: 16px; margin: 0px 5px 3px 1px; } div.plugin_pagetree ul.plugin_pagetree_children_list div.plugin_pagetree_children li {line-height: 1.25; margin: 5px 0;} .plugin_pagetree_children_span {margin-left: 5px;} .plugin_pagetree_children_span > a {padding: 1px 0 !important;} .acs-side-bar ul {padding: none;} .plugin_pagetree_children_list_noleftspace {border-top: 5px dotted #DDDDDD; padding-top: 20px;} .plugin_pagetree_childtoggle_container > .no-children.icon { height: 5px; width: 5px; background-color: #999999; } /* Sidebar & Expand - END */ /* Navicon - START */ .navicon { /* default navicon blue color button */ display: inline-block; position: relative; color: #FFFFFF; border: 1px solid #007DA7; border-radius: 100px; margin: 0px; padding: 0px; width: 32px; height: 32px; font-size: 18px; background: #0FC4FF; background: -webkit-linear-gradient(0deg, #007DA7, #0FC4FF); /* For Safari */ background: -o-linear-gradient(0deg, #007DA7, #0FC4FF); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(0deg, #007DA7, #0FC4FF); /* For Firefox 3.6 to 15 */ background: linear-gradient(0deg, #007DA7, #0FC4FF); /* Standard syntax (must be last) */ -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.5); box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.5); } .navicon.large {width: 44px; height: 44px; font-size: 30px; padding-bottom: 5px;} .navicon:hover { color: #FFFFFF; background: #0FC4FF; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.5), 0 0 15px rgba(38, 154, 212, 0.8); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.5), 0 0 15px rgba(38, 154, 212, 0.8); box-shadow: inset 0 0 2px rgba(0,0,0,.5), 0 0 15px rgba(38, 154, 212, 0.8); } #back-to-top { cursor: pointer; position: fixed; bottom: 20px; right: 20px; display: none; z-index: 9999; } /* Navicon - END */ /* Project Cycle Wheel - START */ #infographic { display: block; position: relative; width: 100%; z-index: 1; } #infographic a:hover { text-decoration: none; } .devco-graphic { background-image: url("/download/attachments/33525368/devco-project-cycle-2.png"); background-repeat: no-repeat; background-size: 600px 525px; display: block; position: relative; width: 600px; height: 525px; margin: 0 auto; margin-left: 30px; } /* gears */ .gear { float: none; position: absolute; text-align: center; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } #gear1 { background-image: url("/download/attachments/33525368/gear-1.png"); background-repeat: no-repeat; background-size: 232px 229px; width: 232px; height: 229px; left: 188px; top: 208px; animation-name: gears; animation-duration: 10s; } @keyframes gears { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Project Cycle Wheel - END */ .frame { background: #FFFFFF; border: 1px solid #B4B4B4; -webkit-border-radius: 10px; border-radius: 10px; vertical-align: top; box-shadow: 0 0 10px #CCCCCC; } .frame .title { background: -webkit-linear-gradient(0deg, #E7E7E7, #FFFFFF); /* For Safari */ background: -o-linear-gradient(0deg, #E7E7E7, #FFFFFF); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(0deg, #E7E7E7, #FFFFFF); /* For Firefox 3.6 to 15 */ background: linear-gradient(0deg, #E7E7E7, #FFFFFF); /* Standard syntax (must be last) */ font-size: 26px; font-weight: 600; color: #4c4c4c; border-bottom: 1px solid #B4B4B4; border-top-left-radius: 10px; border-top-right-radius: 10px; } .frame .title img { position: relative; top: 5px; left: 5px; } .tile { background: #FFFFFF; border: 1px solid #B4B4B4; vertical-align: top; box-shadow: 0 0 10px #CCCCCC; padding-bottom: 10px; } .tile .image { position: relative; top: 5px; } .tile .title { font-size: 24px; font-weight: 500; color: #FFFFFF; text-shadow: 1px 1px #3c3c3c; } .tile .image-inline { display: inline-block; position: relative; top: 5px; left: 5px; right: 5px; } .tile .title-inline { display: inline-block; font-size: 22px; font-weight: 600; color: #FFFFFF; margin-top: 5px; margin-left: 5px; text-shadow: 1px 1px #3c3c3c; vertical-align: top; } .page-title { font-size: 35px; color: #AAAAAA; border-bottom: 5px #DDDDDD dotted; padding: 5px; margin-bottom: 20px; } .page-title img { position: relative; top: 10px; } .btn { background: #FFFFFF; font-size: 14px; text-shadow: 1px 1px #3c3c3c; text-decoration: none; margin-left: 7px; padding: 5px 7px; border-radius: 5px; box-shadow: 0 0 10px #CCCCCC; cursor: pointer; white-space: nowrap; } .btn span {color: #FFFFFF;} .btntool { background: #FFFFFF; font-size: 14px; text-decoration: none; padding: 5px; line-height: 32px; border-radius: 5px; box-shadow: 0 0 5px #AAAAAA; cursor: pointer; white-space: nowrap; } .btn:hover, .btn:active, .btn:focus, .btntool:hover, .btntool:active, .btntool:focus, .border-blue:hover, .border-blue:active, .border-blue:focus { -webkit-box-shadow: 0 0 5px 1px #0099FF; -moz-box-shadow: 0 0 5px 1px #0099FF; box-shadow: 0 0 5px 1px #0099FF; text-decoration: none; } .border-orange:hover, .border-orange:active, .border-orange:focus { -webkit-box-shadow: 0 0 5px 1px #ff8300; -moz-box-shadow: 0 0 5px 1px #ff8300; box-shadow: 0 0 5px 1px #ff8300; text-decoration: none; } .border-red:hover, .border-red:active, .border-red:focus { -webkit-box-shadow: 0 0 5px 1px #e54219; -moz-box-shadow: 0 0 5px 1px #e54219; box-shadow: 0 0 5px 1px #e54219; text-decoration: none; } .border-green:hover, .border-green:active, .border-green:focus { -webkit-box-shadow: 0 0 5px 1px #bdd345; -moz-box-shadow: 0 0 5px 1px #bdd345; box-shadow: 0 0 5px 1px #bdd345; text-decoration: none; } .border-teal:hover, .border-teal:active, .border-teal:focus { -webkit-box-shadow: 0 0 5px 1px #78b5c4; -moz-box-shadow: 0 0 5px 1px #78b5c4; box-shadow: 0 0 5px 1px #78b5c4; text-decoration: none; } .border-grey:hover, .border-grey:active, .border-grey:focus { -webkit-box-shadow: 0 0 5px 1px #545a68; -moz-box-shadow: 0 0 5px 1px #545a68; box-shadow: 0 0 5px 1px #545a68; text-decoration: none; } .border-purple:hover, .border-purple:active, .border-purple:focus { -webkit-box-shadow: 0 0 5px 1px #842a84; -moz-box-shadow: 0 0 5px 1px #842a84; box-shadow: 0 0 5px 1px #842a84; text-decoration: none; } .border-blue {border: 3px solid #23a1d1;} .border-orange {border: 3px solid #ff8300;} .border-red {border: 3px solid #e54219;} .border-green {border: 3px solid #bdd345;} .border-teal {border: 3px solid #78b5c4;} .border-grey {border: 3px solid #545a68;} .border-purple {border: 3px solid #842a84;} .round-border {-webkit-border-radius: 10px; border-radius: 10px;} .bgd-lightblue {background-color: #b8dbe9;} .bgd-lightorange {background-color: #ffb362;} .bgd-lightred {background-color: #e59580;} .bgd-lightgreen {background-color: #dde8a3;} .bgd-lightteal {background-color: #aee0ed;} .bgd-lightgrey {background-color: #c4c5d6;} .bgd-lightpurple {background-color: #d4a8d3;} .warningnote { background-image: url("/download/attachments/33525368/warning.png"); background-repeat: no-repeat; background-size: 30px; background-position: 20px 10px; background-color: #fdfc88; margin: 10px 10px 30px 10px; padding: 15px 15px 15px 65px; border-left: 7px solid #ff8300; } .aui-iconfont-warning::before { content: url("/fpfis/wikis/s/en_GB/8100/b0984b7297905b7c7bd946458f753ce0130bfc8c/_/images/icons/emoticons/warning.svg"); margin-top: -10px; } .textbox { background: #faf3f2; margin: 30px; padding: 15px; font-style: italic; } .bluenote {border-left: 7px solid #23a1d1;} .orangenote {border-left: 7px solid #ff8300;} .orangemsg { background: #ffe2b5; border: 3px solid #ff9900; border-radius: 5px; margin: 10px; padding: 10px; box-shadow: 0px 0px 5px #AAAAAA; } .rednote {border-left: 7px solid #e54219;} .greennote {border-left: 7px solid #bdd345;} .tealnote {border-left: 7px solid #78b5c4;} .greynote {border-left: 7px solid #545a68;} .purplenote {border-left: 7px solid #842a84;} .hl_blue { background-color: #00ffff; padding: 2px 5px; } .hl_green { background-color: #00ff00; padding: 2px 5px; } .hl_red { background-color: #ff0000; padding: 2px 5px; color: #FFFFFF; } .hl_orange { background-color: #FFAA00; padding: 2px 5px; } .hl_yellow { background-color: #ffff00; padding: 2px 5px; } .hl_purple { background-color: #800080; padding: 2px 5px; color: #FFFFFF; } .hl_grey { background-color: #CCCCCC; padding: 2px 5px; } .blue-gradient { background: linear-gradient(0deg, #007DA7, #0FC4FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 22px; font-weight: 500; line-height: 30px; } .navigation { font-size: 20px; padding-left: 30px; margin: 10px; } .navigation.forwardlink { background-image: url("/download/attachments/33525368/chevron-right.png"); background-size: 20px; background-repeat: no-repeat; background-position: left 5px !important; } .navigation.forwardlink.right { float: right; background-position: right 5px !important; padding-left: 0px; padding-right: 30px; } .navigation.backlink { float: left; background-image: url("/download/attachments/33525368/chevron-left.png"); background-size: 20px; background-repeat: no-repeat; background-position: left 5px !important; } /* ARROW menu - START */ .arrowmenu { display: inline-block; margin: 10px; padding-right: 10px; } .arrowmenu a { text-decoration: none; outline: none; display: block; float: left; line-height: 40px; font-size: 18px; text-shadow: 1px 1px #3c3c3c; padding: 0 10px 0 30px; position: relative; cursor: pointer; margin-top: 5px; white-space: nowrap; } .arrowmenu a:first-child { padding-left: 20px; border-radius: 5px 0 0 5px; } .arrowmenu a:first-child:before { left: 14px; } .arrowmenu a:last-child { border-radius: 0 5px 5px 0; padding-right: 20px; } .arrowmenu a.active, .arrowmenu a.active:after { /* default colour */ background: #00B1EC; color: #FFFFFF; } .arrowmenu a:after { content: ''; position: absolute; top: 1px; right: -18px; width: 38px; height: 38px; transform: scale(0.707) rotate(45deg); z-index: 1; background: #FFFFFF; box-shadow: 2px -2px 0 1px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); border-radius: 0 5px 0 50px; } .arrowmenu a:last-child:after { content: none; } .grey a.level1.active, .grey a.level1.active:after { background: #545a68; } .grey a.level2.active, .grey a.level2.active:after { background: #666d7e; } .grey a.level3.active, .grey a.level3.active:after { background: #757e92; } .grey a.level4.active, .grey a.level4.active:after { background: #858fa5; } .grey a.level5.active, .grey a.level5.active:after { background: #929db6; } .grey a.level6.active, .grey a.level6.active:after { background: #9ba7c1; } .grey a.level7.active, .grey a.level7.active:after { background: #abb8d5; } .grey a.level8.active, .grey a.level8.active:after { background: #bbc9e9; } .grey a.level9.active, .grey a.level9.active:after { background: #c4d3f4; } .grey a.level10.active, .grey a.level10.active:after { background: #cddcff; } /* red #FF0000, orange #FFC000, yellow #FFFC00, green #2AFF00, cyan #00FFFF, magenta #FF00FF */ a.level1.active:hover, a.level1.active:hover:after, a.level2.active:hover, a.level2.active:hover:after, a.level3.active:hover, a.level3.active:hover:after, a.level4.active:hover, a.level4.active:hover:after, a.level5.active:hover, a.level5.active:hover:after, a.level6.active:hover, a.level6.active:hover:after, a.level7.active:hover, a.level7.active:hover:after, a.level8.active:hover, a.level8.active:hover:after, a.level9.active:hover, a.level9.active:hover:after, a.level10.active:hover, a.level10.active:hover:after {background: #0FC4FF;} a.level1.active.green:hover, a.level1.active.green:hover:after, a.level2.active.green:hover, a.level2.active.green:hover:after, a.level3.active.green:hover, a.level3.active.green:hover:after, a.level4.active.green:hover, a.level4.active.green:hover:after, a.level5.active.green:hover, a.level5.active.green:hover:after, a.level6.active.green:hover, a.level6.active.green:hover:after, a.level7.active.green:hover, a.level7.active.green:hover:after, a.level8.active.green:hover, a.level8.active.green:hover:after, a.level9.active.green:hover, a.level9.active.green:hover:after, a.level10.active.green:hover, a.level10.active.green:hover:after {background: #2AFF00;} /* ARROW menu - END */ .mini-text {font-size: 10px;} .small-text {font-size: 12px;} .medium-text {font-size: 16px; margin-bottom: 15px;} .large-text {font-size: 20px; margin-bottom: 20px;} .xl-text {font-size: 24px;} .eu-blue {color: #254AA5;} .eu-orange {color: #ff9900;} /* media queries*/ @media all and (max-width: 1600px) { .switchcell {display: block; float: left; width: 100%;} .shiftup {padding: 0px;} .devco-graphic {margin: 0 auto; margin-left: none;} } @media only screen and (max-width: 1366px) { .hideAdvMenu #main {width: 100%;} #homepage .span-4-12 {width: 50%;} #homepage .span-4-12.floatright {float: right;} #homepage .push {display: none;} } @media only screen and (max-width: 1024px) { body #main-content {margin-left: 0px !important;} body.view-content #main {min-height: 500px !important;} .mobile-on {display: block;} .mobile-off {display: none;} .header-logo img {width: auto; height: 50px;} .header-lang {top: 15px; right: 15px;} .switchcell {display: block; float: left; width: 100%;} } @media only screen and (max-width: 768px) { body #main-content {margin-left: 10px !important;} #main #content {padding-left: 0px; padding-right: 10px;} #likes-and-labels-container {padding: 0px 0px 0px 10px;} #comments-section {padding-left: 10px;} .header-search {left: 2%; right: 2%;} .header-search .search-macro-medium, .header-search .search-macro-query input, .header-search .search-macro-dropdown { position: relative; width: 250px !important; } #title-text {font-size: 30px !important;} .col {margin-left: 0%; margin-bottom: 2%;} .hspace {display: block; width: 100%; height: 10px;} .span-1-12, .span-2-12, .span-3-12, .span-4-12, .span-5-12, .span-6-12, .span-7-12, .span-8-12, .span-9-12, .span-10-12, .span-11-12, .span-12-12 {width: 100%;} .push {display: none;} .categories, .content, .sidebar {margin-bottom: 1%; width: 100%;} #homepage .span-4-12 {width: 100%;} #homepage .push {display: none;} #topmenu .toggle { display: block; color: #FFFFFF; text-decoration: none; font-size: 18px; font-weight: 500; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); line-height: 41px; padding: 0 15px; } .topmenu { background: #F0F0F0; padding: 0; width: 100%; border-bottom: 5px solid #254AA5; } #topmenu .toggle:hover { background-color: rgba(0, 0, 0, 0.1); cursor: pointer; } #topmenu .topmenu a, #topmenu .topmenu .toggle, .topmenu ul ul .toggle, .topmenu ul ul li .toggle, .topmenu ul ul a, .topmenu ul ul ul a { color: #696969; font-size: 14px; font-weight: none; text-shadow: none; border: none; } #topmenu .topmenu li:hover, #topmenu .topmenu a:hover, #topmenu .topmenu .toggle:hover, #topmenu ul ul li .toggle:hover { display: block; background: #0FC4FF; color: #FFFFFF; cursor: pointer; } #topmenu .toggle + a, .topmenu { display: none; } #topmenu [id^=drop]:checked + ul { display: block; } #topmenu ul li { display: block; width: 100%; } #topmenu ul ul { float: none; position:static; color: #ffffff; box-shadow: none; } #topmenu ul ul a, #topmenu ul ul li .toggle { background-color: #FFFFFF; color: #696969; padding: 0 20px; } #topmenu ul ul ul { border-bottom: 1px solid #DDDDDD; } #topmenu ul ul ul a, #topmenu ul ul ul li .toggle { padding: 0 40px; } #topmenu ul ul ul ul a, #topmenu ul ul ul ul li .toggle { padding: 0 60px; } #topmenu ul ul li:hover > ul, #topmenu ul li:hover > ul { display: none; } #topmenu ul ul li { display: block; width: 100%; } #topmenu ul ul ul li { position: static; } } @media only screen and (max-width: 480px) { #topheader {margin-top: -50px;} .mobile-small {display: block;} .tools {display: none;} .header-search {display: block;} #homepage, .homepage-cover {min-height: 900px;} }