/* --- World Health Organization ----------------------------------------------------- */
/* --- CSS Framework: roadsafety Cobrand -------------------------------------- */
/* --- Version 1.1 

 ======================================================================================*/

/*<![CDATA[*/
@media all {
	
	
/* -------------------------------------------------------------------------------------
 layout.css
 ======================================================================================*/

/* -------------------------------------------------------------------------------------
 branding
 ---------------------------------------------------------------------------------------*/
#header {
	background: url(roadsafety_branding_bkg.gif) no-repeat;
	background-color: #006600;
}

#branding {
	height: 65px; /* height of branding area does not include lang. nav */
	padding-top: 1px;
}
#header #branding a { 
	width: 530px; /* logo width */
	height: 45px; /* logo height */
	margin:10px auto; /* R&L padding = (980 - logo width) / 2 */
	display: block;
	text-indent: -99999px;
}
#header #branding a.roadsafety-logo-en {
  background: url(mroadsafety_logo_en.gif);
}
#header #branding a.roadsafety-logo-es {
  background: url(mroadsafety_logo_es.gif);
}
#header #branding a.roadsafety-logo-fr {
  background: url(mroadsafety_logo_fr.gif);
}
#header #branding a.roadsafety-logo-ar {
  background: url(mroadsafety_logo_ar.gif);
  width: 512px;
}
#header #branding a.roadsafety-logo-ru {
  background: url(mroadsafety_logo_ru.gif);
}
#header #branding a.roadsafety-logo-zh {
  background: url(mroadsafety_logo_zh.gif);
}

/* -------------------------------------------------------------------------------------
 navigation
 ---------------------------------------------------------------------------------------*/
#navigation {
	background-color: #006600;
	height: 0px;	
}

/* subnavigation */
#subnavigation ul li a:visited {
	color: #006699;
}
#subnavigation ul li a:hover, #subnavigation ul li a:active{
	color:#BD8E20;
}
#subnavigation li.selected a, #subnavigation li.selected a:visited {
	color: #BD8E20;
}
/*when using subnav as main nav */
#subnavigation h4 {
  text-indent: -99999px;
}
#subnavigation h4:before {
  content: ' ';
  display: block;
  background: url(../../../img/responsive-sprite.png) -88px -258px;
	width: 20px;
	height: 18px;
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -8px;
}
#subnavigation h4:after {
  right: 15px;
}



/* -------------------------------------------------------------------------------------
 search
 ---------------------------------------------------------------------------------------*/
#search {
	background-color:#6A6A6A;
}
#search_input {
	background-color:#6A6A6A;
}
#search_submit {
	background-color: #e5e5e5;
	color:#006699;
	border:1px solid #666;
}
#search_submit:hover {
	color:#BD8E20;
}
#search_label label {
	background: url(search_label_roadsafety.gif) no-repeat;
	color: #ffffff;
	background-position: 0px 4px;
}


/* responsive */

#search {
	width: 100%;
}
#search_form {
	margin: 0 auto;
	width: 60%;
}
#search_input input {
  width: 74%;
  border: 1px solid #666;
}

/* -------------------------------------------------------------------------------------
 general.css
 ======================================================================================*/

/* text */
body {
	color: #222222;
}

/* -------------------------------------------------------------------------------------
 links
 ------------------------------------------------------------------------------------- */

/* link */
a {
	color:#006699 ; /* main cobrand color */
}
a:visited {
	color: #666666;
}
a:hover {
	color:#BD8E20; /* hover state */
}
a[name], a[name]:hover, a.anchor, a.anchor:hover {
	color:#333333;
}

/* selected */
.selected, .selected a, ul li.selected a {
	color:#BD8E20;
}


/* hover */
.hover a {
	color:#BD8E20;
}
/* toggler */
.toggler {
	color:#006699 ;
}

.toggler:hover {
	color:#BD8E20;
}

/* special links */
a.link_external, ul.list a.link_external, ul.list_dash a.link_external, ul.horizontal_list li a.link_external, ul.horizontal_list li.first a.link_external {
	background: url(offsite_link_roadsafety.gif) no-repeat right 2px;
	padding-right:20px;
}

ul.list a.link_external:visited, ul.list_dash a.link_external:visited  {
	background-position: right -87px;
}

ul.list a.link_external:hover, ul.list a.link_external:active, ul.list_dash a.link_external:hover, ul.list_dash a.link_external:active  {
	background-position: right -45px;
}

/* media link */
.link_media, ul.horizontal_list li a.link_media, ul.horizontal_list li.first a.link_media, #factbuffets .factbuffet a.link_media {
	background: url(icon_media_download_roadsafety.gif) no-repeat;
}
.link_reference {
	/* change icon color & upload */
}
/* pager */
.paging ul li.paging_previous a, .paging ul li.paging_next a {
	color: #006699;
}
.addthis_toolbox .custom_hover .custom_button {
	color:#006699;
}
.addthis_toolbox .hover_menu a {
	color:#006699;
}
.addthis_toolbox .hover_menu a:hover {
	color: #BD8E20;	
}
#pageactions #pageaction_share .addthis_toolbox .custom_hover .custom_button.active {
	color:#BD8E20;
}

/* -------------------------------------------------------------------------------------
 HEADINGS
 ======================================================================================*/
/* headers */
h1 {	
	color:#006699;
}

/* section & page headings */
.section_head1 {
	font-size:14px;
	color: #227384;
}
.section_head2 {
}
.page_heading {
font-size:16px;
color:#BD8E20;

}

/* -------------------------------------------------------------------------------------
 FORMS
 ---------------------------------------------------------------------------------------*/

/* submit */
input.submit:hover {
	color:#BD8E20;
}
input.primary {
	color:#006699 ;
	border-color:#006699 ;
}

/* -------------------------------------------------------------------------------------
 tabs
 ------------------------------------------------------------------------------------- */
/* tabs */
.ui-tabs-selected a {
	color:#BD8E20;
}


/* -------------------------------------------------------------------------------------
 elements.css
 ======================================================================================*/

/* -------------------------------------------------------------------------------------
 LANGUAGE
 ---------------------------------------------------------------------------------------*/
#language ul li {
	background-image:none;
}
/* selected */
#language ul li.selected {
	background-color:#BD8E20;
	background-image:url(lang_nav_left.gif);
	background-repeat:no-repeat;
	background-position: 0px 17px;
}

/* visited */
#language ul li a, #language ul li a:visited {
	color: #fff;
}

#language ul li a:hover{
	color:#BD8E20;
}

/* disabled */
#language ul li.disabled a,
#language ul li.disabled a span,
#language ul li.disabled a:hover,
#language ul li.disabled a:hover span {
	color:#B2B2B2;
	cursor: default;
}

#language ul li.selected a,
#language ul li.selected a span,
#language ul li.selected a:hover,
#language ul li.selected a:visited,
#language ul li.selected a:hover span  {
	color: #FFF;
	background-image:url(lang_nav_right.gif);
	background-color:none;
	background-repeat:no-repeat;
	background-position: right 13px;
}

/* new language nav */
#owl-language-carousel .owl-item a, #owl-language-carousel .owl-item a:visited {
	color:#fff;
}

#owl-language-carousel .owl-item .selected a, #owl-language-carousel .owl-item a:hover {
	color:#BD8E20;
}

#owl-language-carousel .owl-item .disabled a {
	color:#dddddd;
	cursor: default;
}

/* -------------------------------------------------------------------------------------
 #THUMBNAIL GALLERY
 ---------------------------------------------------------------------------------------*/
 ul.gallery li a:visited.caption {color: #006699;}

/* -------------------------------------------------------------------------------------
 LIGHTBOX - WHO
 ---------------------------------------------------------------------------------------*/
a.lightbox_media span {
	background: url(icon_lightbox_roadsafety.gif) no-repeat;
	background-position:  top left;
}



/* -------------------------------------------------------------------------------------
 BREADCRUMB
 ---------------------------------------------------------------------------------------*/

/* breadcrumb */
#breadcrumb {
	background-color:#E8E8E8;
}
#breadcrumb ul li a:hover {
	color:#BD8E20;
} 


/* -------------------------------------------------------------------------------------
 FOOTER
 ---------------------------------------------------------------------------------------*/
#wrapper #footer {
	
}

#foot a:link {
	color: #666666;
}

/* fonts */
#doormat ul li a:hover, #foot a:hover {
	color:#BD8E20;
}
#doormat ul li span {
	color: #666666;
}

/* footer links */
#foot ul li a:hover, #foot ul li a.selected {
	color:#BD8E20;
}
#foot ul li a:hover, #foot ul li a.selected {
	color:#BD8E20;
}
#foot {
	left: 12px;
}
#wrapper #footer {
  background: #f5f5f5 url(../../../img/footer_emblem-grey-en.gif) no-repeat 15px 15px;
}
#doormat h3,
#doormat ul li a {
  color: #666;
}

/* -------------------------------------------------------------------------------------
 ticker
 ---------------------------------------------------------------------------------------*/
/* close */
#ticker_close {
	background: url(ticker_close_roadsafety.gif) no-repeat 0 0;
}

/* -------------------------------------------------------------------------------------
 #CAROUSEL BUFFET
 ---------------------------------------------------------------------------------------*/

.infiniteCarousel .arrow {
	background: url(buffet_carousel_roadsafety.gif) no-repeat 0 0;
}

.infiniteCarousel .arrow:hover, .infiniteCarousel .arrow:active {
	background-position: 0 -26px;
}

.infiniteCarousel .back {
	background-position: 0px -52px;
}
.infiniteCarousel .back:hover, .infiniteCarousel .back:active {
	background-position: 0 -78px;
}
	
}
/*]]>*/

/* -------------------------------------------------------------------------------------
 RESPONSIVE
 ---------------------------------------------------------------------------------------*/

 /* top stories */
 #owl-story-carousel .owl-buttons .owl-next {
   background-position: -40px center;
 }
 #owl-story-carousel .owl-buttons .owl-prev {
   background-position: 0 center;
 }
.buffet_carousel .owl-theme .owl-controls .owl-buttons .owl-next {
  background-position: -82px -308px;
}
.buffet_carousel .owl-theme .owl-controls .owl-buttons .owl-prev {
  background-position: -49px -308px;
}

@media only screen and (max-width: 940px) {
  .mobile-search-icon {
    display: none;
  }
  #search {
    display: block;
    height: auto;
    position: static;
  }
  #search form {
    width: 90%;
    padding:8px 20px 6px 10px;
  }
  #search_input {
    width: 90%;
  }
  #search_input input {
    width: 97%;
  }
  #search_submit {
    position: static;
  }
}

@media only screen and (max-width: 768px) {
  #wrapper #footer {
    background-image: none;
  }
  #doormat h3 {
    background: #006600;
    color: #fff;
  }
}

@media only screen and (max-width: 720px) {
  #header {
    background-color: #006600;
    margin-top: 0;
  }
  /*for html logo*/
  #branding {
    display: table;
    vertical-align: middle;
    width: 100%;
  }
  #header #branding a,
  #header #branding a.roadsafety-logo-en,
  #header #branding a.roadsafety-logo-es,
  #header #branding a.roadsafety-logo-ar,
  #header #branding a.roadsafety-logo-fr,
  #header #branding a.roadsafety-logo-zh,
  #header #branding a.roadsafety-logo-ru {
    text-indent: 0;
    background-image: none;
    width: auto;
    font-family: arial, sans-serif;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 1;
    color: #fff;
    padding: 0px 80px 0;
    margin: 0;
    vertical-align: middle;
    display: table-cell;
    height: auto;
  }
  /*end html logo */
  #search {
    position: absolute;
    display: none;
    background: #6A6A6A;
    border-top: 0;
    top: 65px;
    border-bottom: 0;
  }
  #search form {
    width: auto;
    padding: 20px;
  }
  #search_input {
    width: auto;
    background: transparent;
  }
  .mobile-search-icon {
    display: block;
    background-color: #006600;
  }
  .mobile-search-icon:hover,
  .mobile-search-icon.mobile-icon-active {
    background-color: #6A6A6A;
  }
  #search_submit {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  #language {
    background: #bbbbbb;
  }
  #owl-language-carousel .owl-next, #owl-language-carousel .owl-prev {
    background-color: #a5c9a5;
  }
}