/* SFAF.org CSS file for 2010 design */
/* this file isn't generally referenced directly, the 'link' tag is usually populated by Javascript */

/* CSS Document */

.top-border {
	border-top: 1px solid #cccccc;
}

.no-wrapper {
	padding-top: 25px;
}


.list-space li{
	padding-left: 10px;
	text-indent: -10px;
	padding-bottom: 10px;
}

.esp-list {
	font-size: 1.3em;
}

#intro_text_for_list {
	width: 245px;
}

/* only used on hiv info */
.beta-main-left h2 {
	font-size: 1.7em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	margin: 0;
}

/* only used on get involved page */
.getinvolved h2 {
	margin-top: 20px;
	font-size: 2.4em;
}

/* Subheadings on section splash pages */
.home-item h3 {
	margin: 0;
	font-weight: bold;
	font-size: 1.5em;
}

/* Section heading "bs" stands for beauty shot */
.bs h1 {
	font-family: Arial,Helvetica,sans-serif;
	font-weight: 500;

	padding: 0;
	margin: 0;
	font-size: 3.5em;
	font-weight: bold;
	position: absolute;
	top: 40px;
	left: 30px;
}

.start {
	padding-top: 1px;
	width: 17px;
	height: 17px;
	text-align: center;
	background-color: #F0EFE7;
	border-width: 1px;
	border-color: black;
}

.stop {
	padding-top: 1px;
	width: 18px;
	height: 18px;
	text-align: center;
	background-color: #F0EFE7;
	border-color: #938092;
	border-width: 2px;
	margin-right: 2px;
}

ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.narrow-list li {
	border-bottom: solid 1px #CCC;
	padding: 10px 20px 10px 10px;
	list-style: none;
	}

.narrow-list ul {
	margin-left: -56px;
	margin-right: -10px;
	padding-left: 0;
	padding-bottom: -20px;
	margin-bottom: -20px;
	margin-top: 0;
}

.list-narrow li {
	border-bottom: solid 1px #CCC;
	padding: 10px 20px 10px 10px;
	list-style: none;
	}

.list-narrow ul {
	margin-left: -56px;
	margin-right: -10px;
	padding-left: 0;
	padding-bottom: -20px;
	margin-bottom: -20px;
	margin-top: 0;
}

.carets li {
	background: url('/assets/images/icons/icon_hiv101_carrot.png') no-repeat 97% center;
}

.bullets li {
	list-style-position: inside;
}

.wide-list li {
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-right: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #999;
	padding-left: 10px;
	text-indent: -10px;
}



body {
	background: #EAE9E1 url('/assets/images/backgrounds/bg_fade.png') repeat-x top left;
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #333;
}

img {
	border: none;
}

.img-right {
	float: right;
	padding-left: 15px;
	padding-bottom: 15px;
}

.img-left {
	float: left;
	padding-right: 15px;
	padding-bottom: 15px;	
}

/* VendorNote-FearlessFuture: class definition to remove left-hand margin on certain detail pages */
.no-left-margin {
	float: left;
	margin-right: 20px;
	margin-left: 20px;
	width: 710px;
	padding-top: 20px;
	border-top: solid 1px #CCC;
}

/* VendorNote-FearlessFuture: id and li class specifically for espanol page to format lists using colored bullets and carrots */
#list_esp {
	width: 400px;
}

#list_esp li {
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 5px;
	border-bottom: 1px solid #999;
	background: url('/assets/images/icons/icon_hiv101_carrot.png') no-repeat 97% center;
	list-style-image: url('/assets/images/icons/icon_hiv101_bullet.png');
	list-style-position: inside;
}

/* AJB: May2013 - removing padding-left cause it's usually annoying */
.intro {
	padding: 0 25px 0 0;
	font-size: 1.1em;
	line-height: 1.6em;
}


/* VendorNote-FearlessFuture: adding class to create page with just one wide block of content -- no side bar */
.col1-wide {
	border-top: solid 1px #CCC;
	width: 980px;
	position: relative;
	float: left;
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.col1-wide .padded {
	padding-left: 20px;
	padding-right: 20px;
}


.col1-leftmargin {
	border-top: solid 1px #CCC;
	width: 980px;
	position: relative;
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.left-margin {
	margin-left: 200px;
	margin-right: 20px;
}

/* VendorNote-FearlessFuture: adding div id to format intro text for pages with .col1-wide */
#intro_text {
	width: 545px;
	position: relative;
	left: 10px;
	padding-bottom: 20px;
}

/* VendorNote-FearlessFuture: making space between lines of  #intro_text */
#intro_text p {
	line-height: 25px;
}

/* AJB: adding a little padding at the bottom of detail page content area */
.col1 .right {
	padding-bottom: 40px;
}


/* AJB: the split-cotent styles were designed for the El Grupo page and others with side-by-side text columns. */
#split-content-left {
   width: 240px;
/*   padding-left: 10px; */
   padding-right: 10px;
}

#split-content-right {
   float: right;
   width: 240px;
   padding-left: 15px;
   padding-right: 10px;
   border-left: solid 1px;
}



/* addthis and controls are both for the addthis widgets */
div.addthis_toolbox {
	float: right;
	margin: 10px 20px 10px 10px;
}

.controls {
	float: right;
	margin: 0 20px 5px 0;
	clear: right;
	display: block;
}




a {
	text-decoration: none;
	color: inherit;
}
.bread-crumb, .breadcrumbComponent {
	color: #B4B3A0;
	font-size: .75em;
	display: inline-block;
	margin: 10px;
	margin-left: 20px;
	font-weight: bold;
	text-decoration: none;
}
.bread-crumb a, .breadcrumbComponent a{
	color: inherit;
}
h1 span {
	font-size: .4em;
}
h1, h2 {
	font-family: Arial,Helvetica,sans-serif;
	font-weight: bold;
	color: #000;
	font-style: normal;
	margin: 0;
}
h1 { 
	font-size: 2em;
}
h1#pagetitle {
	font-family: Arial,Helvetica,sans-serif;
	font-weight: bold;
	color: #000;
	margin-bottom: 10px;
}

h1#pagetitle, #contentDiv .detail-page #column1 h1 {
    margin-left: 20px;
    }
h2 {
	font-size: 1.5em;
	padding-left: 10px;
	line-height: 1.1em;
}

h3 {
	font-size: 1.2em;
	margin-left: 0;
}




.home-item {
	line-height: 1.5em;
}
.home-item h2 {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 2em;
	line-height: 1em;
}
.shadow-div {
	position: relative;

	background: #FFF url('/assets/images/backgrounds/grad-back.png') repeat-x left top;
	box-shadow: 0 0px 3px #999;
	-moz-box-shadow: 0 0px 3px #999;
	-webkit-box-shadow: 0 0px 3px #999;
	-ms-filter:
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=2);
}

.shadow-div-simple {
	position: relative;
	background: #FFF url('http://ww3.sfaf.org/assets/images/backgrounds/grad-back.png') repeat-x left top;
	box-shadow: 0 0px 3px #999;
	-moz-box-shadow: 0 0px 3px #999;
	-webkit-box-shadow: 0 0px 3px #999;
	-ms-filter:
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=2);
}

#sectionID {
	display: none;
}
.wrapper-main { /*this is to keep the shadow js from breaking */
	width: 980px;
	margin: 0 auto;
	clear: both;
	position: relative;
	display: block;
	min-height: 500px;
}
.wrapper-header {
	position: relative;
	width: 980px;
	height: 92px;
	overflow:visible;
	display:block;
	z-index:89;
}
.wrapper-content {
	width: 980px;
	margin-top: 14px;
	position: relative;
/*	display: none; */
}
.wrapper-content br {
/*	clear: both; */
	height: 0;
	width: 0;
}

.clear-both {
	clear: both;
}


.wrapper-footer {
	clear: both;
	width: 100%;
	background-image: url('/assets/images/skyline.png');
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 176px;
	margin-top: 40px;
	position: relative;
	bottom: 0;
}
.wrapper-footer .subsection {
	/*height: 100px; */
	background: #FDFDFB;
	border-top: 1px solid #FFF;
	margin-bottom: 10px;
}
.footer-shadow {
	margin-top: 156px;
	background: url('/assets/images/backgrounds/bg_footer_shadow.png') repeat-x top left;
	height: 14px;
}


.block-footer img {
	border: 0;
	outline: none;
}


/* block-footer form.search might not be needed after 2011aug19 -AlexJB */

.block-footer form.search {
	border: solid 1px #CCC;
	display: inline-block;
	height: 30px;

	vertical-align: top;
	padding: 0;
	float: right;
}
.block-footer form.search input {
	background:none repeat scroll 0 0 #FFFFFF;
	border:medium none #FFFFFF;
	float:left;
	font-size:90%;
/*	font-weight:bold; */
	outline:medium none;
	padding: 7px 0 7px 5px;
	width:143px;
	color: #999999;
}


/* QUICK SEARCH BOX */


form.quicksearch {
	border: solid 1px #CCC;
	display: inline-block;
	height: 30px;
	margin: 0;

	vertical-align: top;
	padding: 0;
	float: right;
}
form.quicksearch input {
	background:none repeat scroll 0 0 #FFFFFF;
	border:medium none #FFFFFF;
	float:left;
	font-size:90%;
/*	font-weight:bold; */
	outline:medium none;
	padding: 7px 0 7px 5px;
	width:143px;
	color: #999999;
}







/* HEADER MENU */
.wrapper-header .nav-main {
	height: 58px;
}
.wrapper-header .section-sub {
	height: 34px;
	background-image: url('/assets/images/sha_subnav.png');
	background-repeat: repeat-x;
	background-position: left top;
}
.wrapper-header .logo {
	position: absolute;
	top: -14px;
	left: 0;
}
/* sub nav dynamic */
ul.nav-main  {
	margin: 0 0px 0px 150px;
	padding: 0;
	background-color: transparent;
	list-style: none;
}
li.nav-item {
	height: 58px;
	float: left;
	text-transform: uppercase;
	padding: 0 22px;
	font-size: 0.8em;
	font-weight: bolder;
	line-height: 56px;
	margin: 0;
	background-image: url('/assets/images/nav_divider.png');
	background-repeat: no-repeat;
	background-position: left center;
	z-index: 89;
	cursor: pointer;
	position: relative;
}
li.nav-item span {
}
li.active {
	background: url('/assets/images/nav_active.png') no-repeat left bottom;
	cursor: default;
	padding-right: 0;
}
li.active span {
	background: url('/assets/images/nav_active.png') no-repeat right bottom;
	height: 58px;
	line-height: 58px;
	display: inline-block;
	padding-right: 22px;
}
li.roll {
	background: url('/assets/images/nav_roll.png') no-repeat left bottom;
	cursor: default;
	padding-right: 0;
}
li.roll-next {
	background-position: -4px bottom;
}
li.roll-off {
	background: none;
}
li.roll span {
	background: url('/assets/images/nav_roll.png') no-repeat bottom right;
	padding-right: 0;
	height: 58px;
	display: inline-block;
	padding-right: 22px;
}
ul.topnav {
	display: none;
	list-style: none;
	padding: 0;
	margin: 0;
	background-color: #EAE9E1;
	position: absolute;
	top: 58px;
	left: 0;
	z-index: 80;
	/* font-weight: bolder; */
	width: 175px;
	box-shadow:  0px 0px 3px #999;
	-o-box-shadow: 0 0px 3px #999;
	-moz-box-shadow: 0 0px 3px #999;
	-webkit-box-shadow: 0 0px 3px #999;
	-ms-filter:
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=2);

}
ul.topnav li {
	margin: 0 0 0 2px;
	padding: 0 15px;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
	cursor: pointer;
	text-transform: capitalize;
	height: 34px;
	outline: none;
	line-height: 34px;
}
ul.topnav li a {
	color: #333;
	text-decoration: none;
}
ul.subnav {
	list-style: none;
	padding: 0;
	margin: 0 0 0 200px;
	float: left;
	font-size: .8em;
	font-weight: bold;
}
ul.subnav li {
	float: left;
	padding: 0 14px;
	outline: none;
	height: 34px;
	margin: 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
	cursor: pointer;
	text-transform: capitalize;
}
ul.subnav li a {
	float: left;
	padding: 10px 5px;
	color: #fff;
	text-decoration: none;
	outline: none;
	height: 34px;
	overflow: hidden;
}
ul.subnav li a:hover{
	/*background: url('/assets/images/topnav_hover.gif') no-repeat center top;*/
}
ul.subnav li span { /*--Drop down trigger styles--*/
	width: 10px;
	height: 38px;
	float: left;
	background: url('/assets/images/arrow_subnav.png') no-repeat center center;
}
ul.subnav li span.subhover {
	cursor: pointer;
	z-index: 85;
}
ul.subnav2 {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0;
	top: 34px;
	background: #fff;
	margin: 0;
	padding: 0;
	display: none;
	float: left;
	width: 170px;
	/*border: 1px solid #111;*/
	z-index: 83;
	font-size: .95em;
}
ul.subnav2 li {
	float: none;
	padding: 10px;
	height: auto;
}
ul.subnav2 li a {
	color: #333;
	text-decoration: none;
	float: none;
}

/* for the sidenav menu, the active item shouldn't be colored */
ul.menu li.active a{
	color: inherit;
}


.nav-donate {
	padding: 0;
	margin: 0;
	cursor: auto;
}
strong.btn-donate {
	/* Sliding right image */
	display: block;
	float: left;
	height: 28px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding-right: 5px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	/* FONT PROPERTIES */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight:bold;
	color: #fff;
	background: transparent url('/assets/images/backgrounds/btn-donate-rt.png') no-repeat scroll top right;
	cursor: pointer;
	margin:15px 0 0 12px;
}
strong.btn-donate span {
/* Background left image */
	display: block;
	line-height: 28px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	padding: 0 10px 5px 17px;
	text-decoration:none;
	background: transparent url('/assets/images/backgrounds/btn-donate-lt.png') no-repeat;
	text-transform: uppercase;
	font-size: .9em;
}
#hiv-info.active, #hiv-info ul.subnav li:hover {
	background-color: #1AA89f;
}
#clientservices.active, #clientservices ul.subnav li:hover {
	background-color: #f05b2b;
}
#policycenter.active, #policycenter ul.subnav li:hover {
	background-color: #00a9ef;
}
#getinvolved.active, #getinvolved ul.subnav li:hover {
	background-color: #5eb70f;
}
#aboutus.active, #aboutus ul.subnav li:hover {
	background-color: #ffa92d;
}
#news-events.active, #news-events ul.subnav li:hover {
	background-color: #ffa92d;
}




/* SIGNUP FORM */
#signup input {
	color: #999;
	font-size: 1.1em;
/*	width: 55px; */
}

#signup input.txt-black {
	color: black;
}

#btn_signup {
	margin-left: 4px;
	cursor: pointer;
}
div.signup {
	height: 36px;
	margin-bottom: 10px;
	position: relative;
}
.signup-form {
	/* Sliding right image */
	display: block;
	float: left;
	height: 36px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding-right: 14px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	/* FONT PROPERTIES */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	color: #FF0;
	background: transparent url('/assets/images/backgrounds/signup_rt.png') no-repeat scroll top right;
}
.signup-form span {
/* Background left image */
	display: block;
	line-height: 36px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	padding: 0 0 5px 14px;
	text-decoration:none;
	background: transparent url('/assets/images/backgrounds/signup_lt.png') no-repeat;
}
.signup-language {
	/* Sliding right image */
	display: block;
	float: left;
	height: 36px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding-right: 10px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	/* FONT PROPERTIES */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	color: #000;
	background: transparent url('/assets/images/backgrounds/lang_rt.png') no-repeat scroll top right;
	cursor: pointer;
}
.signup-language span {
/* Background left image */
	display: block;
	line-height: 36px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	padding: 0 0 5px 12px;
	text-decoration:none;
	background: transparent url('/assets/images/backgrounds/lang_lt.png') no-repeat;
}
/* FOOTER */


.footer-logo {
	float: left;
}
.copyright {
	font-size: 0.7em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #666;
	float: left;
	width: 300px;
	margin: 0 0px 0px 10px;
}
.interact {
	float: right;
	margin: 0 4px 0 0;
}
.interact img.icon {
	margin: 0 3px;
}
/* LAYOUTS */
.hiv-info {
	border-top: 7px solid #1AA89f;
}
.clientservices {
	border-top: 7px solid #f05b2b;
}
.policycenter {
	border-top: 7px solid #00a9ef;
}
.getinvolved {
	border-top: 7px solid #5eb70f;
}
.aboutus {
	border-top: 7px solid #ffa92d;
}
.wrapper-innershadow {
	width: 100%;
	border: solid 1px #fff;
	background-color: #fff;
}
.side-section .inner-shadow-top {
	height: 8px;
	background: url('/assets/images/backgrounds/shad_rt_top.png') no-repeat top left;
	position: relative;
}
.side-section .inner-shadow-mid {
	padding: 4px 12px;
	background: url('/assets/images/backgrounds/shad_rt_mid.png') repeat-y top left;
	position: relative;
	font-size: .8em;
}
.side-section .inner-shadow-mid h3 {
	margin-bottom: 10px;
	font-size: 1.3em;
}
.side-section .inner-shadow-mid .action {
	background-color: #FF0;
	font-weight: bold;
	text-align: center;
	padding: 2px;
	margin-top: 6px;
	cursor: pointer;
}
.side-section .inner-shadow-btm {
	height: 8px;
	background: url('/assets/images/backgrounds/shad_rt_btm.png') no-repeat top left;
	position: relative;
}
/* BUTTONS */
.btn {
	border: none;
	color: #FFF;
	font-size: .9em;
	font-weight: bold;
	padding: 8px;
	display: inline-block;
	text-decoration: none;
}
.btn img {
	border: none;
}
.orange {
	background: url('/assets/images/btns/bg_btn_orange.png') repeat-x center center;
}
.grey {
	background: url('/assets/images/btns/bg_btn_grey.png') no-repeat center center;
	color: #666;
	padding: 20px;
}
.blue {
	background: url('/assets/images/btns/bg_btn_blue.png') repeat-x center center;
}


/* detail page, righthand column, general settings */
/* section-specific settings are in section-css */


/* AJB: .padded set up initially for making boxes within the content area on detail pages */
.detail-page .padded {
  padding: 13px;
  margin-bottom: 7px;
}



.detail-page .col2 div.testing {
        background: url('/assets/images/icons/icon_microscope-teal-34x34.jpg') no-repeat 10px 20px;
}
.detail-page .col2 div.support {
	background: url('/assets/images/icons/icon_hiv-info_paper_s1.png') no-repeat 10px 20px;
}
.detail-page .col2 div.questions {
	background: url('/assets/images/icons/icon_hiv-info_capital_s1.png') no-repeat 10px 20px;
}
.detail-page .col2 div.facebook {
	background: url('http://www.sfaf.org/assets/images/icons/icon_right_box_sm.gif') no-repeat 10px 20px;
}

.detail-page .col2 {
	float: right;
	width: 212px;
	min-height: 400px;
}
.detail-page .col2 h2 {
	font-size: 1.3em;
/* default tab color is HIV-info section color */
	border-top: solid 7px #1AA89F;
	margin: 0 0 10px 0;
	padding: 20px 0 0 10px;
}
.detail-page .col2 h3 {
	font-weight: bold;
	margin: 0;
	padding: 20px 0 0 0;
}
.detail-page .col2 div.icon-left {
/*	font-size: .76em;
	font-size: .83em;
*/
	border-top: solid 1px #CCC;
	padding: 0 10px 20px 56px;
}

.detail-page .col2 .contact-info {
	padding: 10px;
	margin: 0;
	font-size: 1em;
	line-height: 1.3em;
	border-top: solid 1px #cccccc;
}

.detail-page .col1 {
	float: left;
	width: 758px;
	margin-right: 10px;
/*	font-size: 13pt; */
}

.detail-page #column1 h2 {
	margin-left: 0;
}


/*  ******************* */

ul.hanging-bulleted {
	list-style: none;
	margin: 0;
	padding: 0;
	list-style-image: none; 
	list-style-type: disc; 
	list-style-position: inside;
}

ul.hanging-bulleted li {
	margin: 10px 10px 0 0;
	padding-bottom: 10px;
	padding-left: 75px;
	text-indent: -75px;
	line-height: 1.4em;
}

ul.bullet-list-regular {
	list-style-type: disc;
	margin-left: 30px;
}

/* use hanging-bordered class instead of release-list */
ul.hanging-bordered {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.hanging-bordered  li {
	margin: 10px 10px 0 0;
	padding-bottom: 10px;
	border-bottom: solid 1px #CCC;
	padding-left: 75px;
	text-indent: -75px;
	line-height: 1.4em;
}

ul.hanging {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.hanging li {
	padding-left: 75px;
	line-height: 1.4em;
}

ul.hanging li h2 {
	text-indent: -75px;
}

ul.hanging li .outdent {
	text-indent: -75px;
}


ul.bordered-bottom  li {
	margin: 10px 10px 0 0;
	padding-bottom: 10px;
	border-bottom: solid 1px #CCC;
}


span.strong{
	font-weight: bold;
	color: black;
}




/*  ******************* */


#error-content p {
	font-size: 1.4em;
}

div#error-content {
	min-height: 600px;
}

#error-content h2 {
	margin: 0;
	padding: 0;
}

/********************************************/
/* HOT TOPICS pages styles, some of which apply to the 'from the experts' box*/
/********************************************/
/* 2013-April : ALEXJB: I'm phasing the use of div.hottopics-col style, 
		and ul.hottopics, and ul#from-the-experts
		replacing it with column-320 styles and divs
*/
/********************************************/

div.hottopics-col {
	margin: 10px 10px 0 0;
	padding: 0;
	border-top: solid 7px #1AA89F;
	min-height: 800px;
	width: 320px;
	float: left;
}
div.hottopics-col h3, div.hottopics-col-last h3 {
	color: #1AA89F;
	font-weight: bold;
	margin: 10px 0 0 0;
}
img.hottopic-section-icon {
	float: right;
	margin: 10px;
}
div.hottopics-col h2, div.hottopics-col-last h2 {
	margin: 20px 0 0 10px;
	font-size: 1.8em;
	line-height: 1em;
}
div.hottopics-col p.subhead, div.hottopics-col-last p.subhead {
	margin: 10px 10px 20px 10px;
	font-size: .8em;
	color: #6D6B65;
	line-height: 1.5em;
}
div.hottopics-col-last {
	margin: 10px 0 0 0;
	padding: 0;
	border-top: solid 7px #1AA89F;
	min-height: 200px;
	width: 320px;
	float: right;
	clear: right;
}
ul.hottopics-control {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .6em;
	font-weight: bold;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #CCC;
	height: 20px;
	line-height: 20px;
}
ul.hottopics-control li a {
	text-decoration: none;
	color: inherit;
}
ul.hottopics-control li.control1 {
	color: #333;
	text-transform: uppercase;
	float: left;
	padding-left: 10px;
}
ul.hottopics-control li.control2  {
	background:url('/sfaf/images/icons/icon_corner_hiv-info.png') no-repeat scroll right center transparent;
	color:#B4B3A0;
	float:right;
	margin-right:10px;
	padding-right:20px;
	text-align:right;
	text-transform:uppercase;
}
ul.hottopics-control li.control2 a:hover {
	color: #999;
}


ul#from-the-experts {
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 200px;
	background: url('/assets/images/backgrounds/bg_subsection_grad.png') repeat-x left top;
}
ul#from-the-experts li.left {
	float: left;
	width: 60px;
	padding: 10px;
	border: none;
}


ul#from-the-experts li.right {
/*	float: left;
	width: 210px; */
        margin-left: 60px;
        border: none;
}



ul#from-the-experts li.hr {
	clear: both;
        margin: 0;
        padding: 0;
}



ul#from-the-experts h3 {
	font-size: 1em;

}



ul#from-the-experts span.date {
	font-weight: bold;
	font-size: .75em;
	border: 0;
    position: relative;
    top: 0;
    left: 0;
}
ul#from-the-experts span.author {
	font-style:italic;
	font-size: .75em;

}
ul#from-the-experts p {
	margin: 0 0 10px 0;

}
ul#from-the-experts span.more {
/*	color: #1AA89F; */
	margin-left: 10px;
}



/********************************************/
/* NEWS & EVENTS pages styles */
/********************************************/
/* 2013-April : ALEXJB: I'm phasing the use of newsevents-col styles, 
		and ul.hottopics, and ul#from-the-experts
		replacing it with column-320 styles and divs
*/
/********************************************/
div.newsevents-col {
	margin: 10px 10px 0 0;
	padding: 0;
	border-top: solid 7px #FFA92D;
	min-height: 550px;
	width: 320px;
	float: left;
}
div.newsevents-col h3, div.newsevents-col-last h3 {
	color: #FFA92D;
	font-weight: bold;
	padding: 10px 0 0 0;
}
img.newsevents-section-icon {
	float: right;
	margin: 10px;
}
div.newsevents-col h2, div.newsevents-col-last h2 {
	margin: 20px 0 0 10px;
	font-size: 1.8em;
	line-height: 1em;
}
div.newsevents-col p.subhead, div.newsevents-col-last p.subhead {
	margin: 10px 10px 20px 10px;
	font-size: .8em;
	color: #6D6B65;
	line-height: 1.5em;
}
div.newsevents-col-last {
	margin: 10px 0 0 0;
	padding: 0;
	border-top: solid 7px #FFA92D;
	min-height: 200px;
	width: 320px;
	float: right;
	clear: right;
}

ul.newsevents-control {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .6em;
	font-weight: bold;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #CCC;
	height: 20px;
	line-height: 20px;
}
ul.newsevents-control li a {
	text-decoration: none;
	color: inherit;
}
ul.newsevents-control li.control1 {
	color: #333;
	text-transform: uppercase;
	float: left;
	padding-left: 10px;
}
ul.newsevents-control li.control2  {
	background:url('/assets/images/icons/icon_corner_about-us.png') no-repeat scroll right center transparent;
	color:#B4B3A0;
	float:right;
	margin-right:10px;
	padding-right:20px;
	text-align:right;
	text-transform:uppercase;
}
ul.newsevents-control li.control2 a:hover {
	color: #999;
}

ul.newsevents-release-list li {
	 text-indent: 0;
	 text-align: left;
	 margin: 0;
	 padding: 0 20px 5px;
	 font-size:1em;
	 font-weight:normal;
}
ul.newsevents-release-list span.date {
	font-size:.8em;
}

ul.newsevents-sub p{
font-size:.8em;
}

ul.newsevents-sub li.hr {
	border-bottom: solid 1px #CCC;
}

ul.newsevents-release-list li.hr {
	border-bottom: solid 1px #CCC;
	margin-bottom: 20px;
}
ul.newsevents-release-list li.hr:last-child {
display:none;
}

ul.newsevents-release-list li a {
color:#333333;
}

ul.newsevents-release-list li .date {
color:#FFA92D;
}

iframe #facebook .fbConnectWidgetTopmost {
	border-style:none;
}
.fan_box .connections .connections_grid {
padding-left:13px;
}


/********************************************/
/* 2011-may AlexJB trying to translate some of the initially created styles to be more general */


div.listing-with-image-left {
  min-height: 175px;
  border-top: 1px solid #cccccc;
  padding: 20px 0 0 0;
  clear: both;
  width: 100%;

  background-repeat: no-repeat !important;
  background-position: left 45% !important;
}


div.listing-with-image-left div.text-box {
  margin-left: 300px;
}

div.listing-with-image-left div.image-box {
  float: left;
  width: 270px;
  padding: 15px;
  padding-left: 0;
}

/********************************************/
/* 2012-oct trying for a more general approach to landing pages */

.landing-page-top {
	width: 100%;
	height: 185px;
}

.landing-page-hero-half-width {
	width: 50%;
	float: right;
	overflow: hidden;
	padding: 0;
	height: 100%;
}

.landing-page-top h1 {
    font-size: 3.5em;
    margin: 0;
    padding: 15px 0 0 20px;
    position: relative;
    font-family: Arial;
    font-weight: 600;
}

.landing-page-top p {
    line-height: 1.4em;
    margin: 0;
    padding: 10px 0 0 20px;
    position: inherit;
    width: 50%;
}


/********************************************/
/********************************************/
/* LANDING PAGE with 3 COLUMNS */
/* 2013-April ALEXJB  New styles for Landing Pages like News & Events, 
	should also work for Hot Topics
*/
	
div.hr {
	border-top: 1px solid #CCCCCC;
	clear: both;
	margin: 15px 0;
}

span.date {
	font-size: 0.75em;
	font-weight: bold;
}


div.image-50 {
	min-height: 75px;
	width: 50px;
	overflow: hidden;
}

.image-50 a img {
    height: auto;
    width: 50px;
}

div.gradient-top {
	background: url('/assets/images/backgrounds/bg_subsection_grad.png') repeat-x scroll left top transparent;
	padding: 25px 0;
}

/* THREE COLUMN LAYOUT */
div.column-320 {
	border-top: solid 7px #1AA89F;
	margin: 10px 10px 0 0;
	padding: 0;
/*	min-height: 800px; */
	width: 320px;
	float: left;
}



div.column-320-rightmost {
	margin: 10px 0 0 0;
	float: right;
	clear: right;
}


div.column-320 h2 {
	font-size: 1.8em;
	line-height: 1em;
	margin: 20px 0 0 10px;
}

div.column-320 p.subhead {
	color: #6D6B65;
	font-size: 0.8em;
	line-height: 1.5em;
	margin: 10px 10px 20px;
}

div.column-320 div.image-50 {
	margin: 0 10px;
	float: left;
}

div.column-320 div.article-teaser {
	float: left;
	min-height: 75px;
	width: 240px;
	margin-right: 10px;
	padding-bottom: 5px
}

div.article-teaser p {
	margin: 0;
	padding: 0 0 15px;
	font-size: 0.8em;
}


div.column-320 h3 {
	font-size: 1em;
	color: #FFA92D;
	font-weight: bold;
	margin: 0;
}




@media screen and (max-width: 320px) {

div.column-320 div.article-teaser { width: 175px;}

div.column-320 { width: 100%;}

}

/* END OF LANDING PAGE with 3 COLUMNS */

/* LANDING PAGE WITH 250 RIGHT COLUMN */
div.column-250 div.image-50 {
	margin: 0 10px;
	float: left;
}

div.column-250 div.article-teaser {
	float: left;
	min-height: 75px;
	width: 140px;
	margin-right: 10px;
	padding-bottom: 5px
}

@media screen and (max-width: 320px) {

div.column-250 div.article-teaser { width: 175px;}

div.column-250 { width: 100%;}

}


/* END LANDING PAGE WITH 250 RIGHT COLUMN */


/*START 2017-10-30 figures in Hot Topics articles */

.figureBox { background-color: #000000; margin-top: 0; margin-right: 15px; margin-bottom: 10px; float: left; display: inline-block; }
.figureCaption { padding: 8px 4px; }
.figureCaption p { padding: 0; margin: 0; font-size: 1.25em; color: #ffffff; font-family: arial,helvetica,sans-serif; text-align: center; }
 


/*END 2017-10-30 figures in Hot Topics articles */