/*== general convention          == 
 *
 - try to make class names semantically correct. 
   e.g. class="de-emphasized" is better than 
	 class="gray-noborder"
 - check print output on modern browsers
 - linewrap at 51th for easier reading in 
   split screen
 - set tabstop and shiftwidth 2
 - indent sections so to fold in text editors
 */
/*== COMMON IN NAVIGATION        ==*/
  html {
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:0;
    padding: 10px 0 0;
    margin: 0 auto;
    vertical-align:baseline;
    background-color: #7F7F7F;
  }
  
  body { 
    width: 960px; 
    margin: auto;
    background-color: white;
    padding: 10px 20px 0px 20px;
    margin-top: -20px;
  }

  .partial.navigation {
    font-family: "蘋果儷中黑",
      "Droid Sans Fallback", 
      "文泉驿正黑", 
      "黑体", SimHei;
  }

  ul#menubar, ul#menubar ul {
    font-size: 16px;
    list-style-type: none;
    float: left;
    padding: 0px; /* remove left space */
    margin: 0em;
    border-bottom: thin solid #7f7f7f;
    margin-bottom: 0.5em;
    width: 960px;
  }
  
  ul#menubar li {
    float: left;
  }
  ul#menubar li ul {
    width: 8em;
    position: absolute;
    left: -999em;
    padding-top: 0.5em;
    padding-bottom: 0.3em;
    text-decoration: none;
    background-color: #7f7f7f;
    color: white;
    font-size: 14px;
  }
  #menubar li:hover ul {
    left: auto;
  }
  #menubar a {
    display: block;
    text-decoration: none;
    padding: 0.6em 1em;
  }
  ul#menubar ul a {
    width: 6em;
    padding: 0.3em 1em;
  }
  .navigation :link, .navigation :visited {
    text-decoration: none;
    color: black;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
  }
  
  .navigation :link:hover,
  .navigation :visited:hover,
  .navigation :link:active {
    text-decoration: none;
    background-color: #7f7f7f;
    color: white;
  }
  ul#menubar :link:hover,
  ul#menubar :visited:hover {
    text-decoration: underline;
    background-color: #7f7f7f;
    color: white;
  }

  .navigation#projects :link, 
  .navigation#projects :visited  {
    color: black;
  }

  body.breaking_the_climate_deadlock #menubar 
  .breaking_the_climate_deadlock a,
  body.hsbc_climate_partnership 
  #menubar .hsbc_climate_partnership a,
  body.city_and_technology #menubar .city_and_technology a,
  body.business_alliance #menubar .business_alliance a,
  body.policy #menubar .policy a {
    background-color: black;
    cursor: default;
  }
  #logo_and_submenubar a {
    color: black;
  }
  body.homepage #homepage :link,
  body.homepage #homepage :visited, 
  body.about #about :link,
  body.about #about :visited, 
  body.members_and_partners #members_and_partners :link,
  body.members_and_partners #members_and_partners :visited,
  body.news_and_events #news_and_events :link,
  body.news_and_events #news_and_events :visited, 
  body.publications #publications :link,
  body.publications #publications :visited, 
  body.major_initiatives #major_initiatives :link,
  body.major_initiatives #major_initiatives :visited,
  body.contact #contact :link,
  body.contact #contact :visited {
    color: black;
    border-bottom: 4px solid #e8112d;
    padding-bottom: 6px;
  }
  ul#menubar ul :link,
  ul#menubar ul :visited {
    color: white !important;
    border-bottom: none !important;
  } 
  
  
/*== BREADCRUMB NAVIGATION       ==*/
  body > .breadcrumb.navigation {	
    clear: both;
    padding-left: 1.1em;
    line-height: 2em;
    background-color: white;
  }
  .breadcrumb.navigation li {
    display: none;
  }
  .breadcrumb.navigation li.current {
    display: inline;
    padding: 0.25em;
  }
  .breadcrumb.navigation li.current:before,
  .breadcrumb.navigation .caption:before {
    content: ">";
    color: gray;
    padding: 0.25em;
  }

  .breadcrumb.navigation .caption,
  .breadcrumb.navigation .pageset {
    display: inline;
  }
  .breadcrumb.navigation .pageset ul {
    display: inline;
    padding: 0em;
  }
  
/*== NAVIGATION COLUMN           ==*/
  .side.navigation  {
    width: 15em;
    padding-bottom: 160px;
  }
  .side.navigation .pageset {
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .side.navigation .pageset ul {
    margin-top: 0em;
    margin-left: 0em; /* for IE */
    padding-left: 0em;
  }
  .side.navigation .pageset li {
    list-style-type: none;
    padding-left: 1em;
  }
  .side.navigation .pageset :link,
  .side.navigation .pageset :visited {
    display: inline-block; 
      /* for IE bug, overwrite to block later. */
  }
  .side.navigation .pageset ul :link,
  .side.navigation .pageset ul :visited {
    border-bottom: 1px solid #DDDDDD;
    display: block;
    padding-bottom: 0.4em;
    padding-top: 0.5em;
  }
  
  body.publications .side.navigation {
    display: none;
  }

  .side.navigation .current > :link, .side.navigation .current > :visited {
    border-bottom: 1px solid #e8112d !important;
  }
  .side.navigation .pageset .caption {
    margin-left: 1em;
    padding-bottom: 0em;
    border-bottom: 3px solid #e8112d;
  }
  .pageset .marginalized.caption {
    display: none;
  }
  .side.navigation .pageset .marginalized.caption {
    border-bottom: 3px solid silver;
    display: block;
  }

  .side.navigation .pageset .caption :visited {
    font-size: medium;
    border-bottom: none;
  }
/*== LOGO AND SUBMENUBAR         ==*/  
  #cse-search-box {
    margin: 0;
  }
  @media print {
   #search-form {
    visibility: hidden;
   }
  }  
  #search #cse-search-box input#q  {
    border:1px solid #5e5e5e;
    float:left;
    font-size:9pt;
    margin:0 2px 0 0;
    padding:1px 1px 3px;
    width:148px;
  }
  #search #cse-search-box input#sa  {
  border:1px solid #ffffff; 
  background-color: black; 
  color: white;
  padding-top: 1px; 
  padding-bottom: 1px; 
  font-size: 13px;
  }
  #headbar a#logo {
  background: none !important;
  padding-top: 0;
  float: left;
  }
  #headbar li {
  display: inline;
  padding-left: 0.8em;
  padding-right: 0.3em;
  padding-bottom: 0;
  padding-top: 0;
  background: url(images/sep.png) no-repeat 0px 5px;
  list-style-type: none;
  }
  #headbar ul :first-child {
  background: none;
  }
  #headbar ul {
    padding-left: 0;
    text-align: right;
  margin-top: 0;
  margin-bottom: 0;
  }
  #headbar li#global {
  background: url(images/global.png) no-repeat 2px 4px;
  
  padding-left: 2.6em;
  padding-right: 0;
  }
  #headbar ul a:hover {
  color: #E8112D; 
  }
  #headbar {
    background-color: white;
    height: 90px;
    padding-top: 0px;
    padding-left: 10px;
  }
  p.subscriptions {
  text-align: right;
  margin-top: -6px;
  padding-bottom: 15px;
  color: gray;
  }
/*== PAGE FRAME                  ==*/

  hr.navigation {
    display: none;
    /* this <hr/> is for semantic use, visually
     * navigation and content is separated with
     * background color difference */
  }
  
  div.content {
    float: right;
    width: 78%;
    background-color: white;
    padding-bottom: 2em;
  }

/*== PUBLICATIONS                  ==*/
  body.publications div.content {
    float: left;
    width: 100%;
    background-color: white;
    padding-bottom: 2em;
  }
  body.publications .article {
    margin-right: 2% !important;
    width: 66.2% !important;
  }
  body.publications div.section {    
    width: 74%;
    clear: left;
  } 
  body#publications-index div.context {    
    width: 24%;
    height: 45em;
  }
  body#publications-index div.context h3 {    
    border-bottom: none;
  } 
/*== MAJOR INITIATIVES                  ==*/
  body.major_initiatives div.section {   
    width: 64.2%; 
    clear: left;
  } 
  body#major_initiatives .context {
    height: 50em;
  }

  div.columns {
    background-color: whitesmoke;
    /* to make text-align: justified etc in IE not in effect */
    text-align: left;
  }
  div.columns strong,
  div.columns span {
    display: block;
  }
  div.columns > span{
    display: inline-block;
    width: 32%;
    margin-bottom: 1em;
  }
  div.wide.columns > span {
    width: 49%;
  }
  div.article {
		/* width 64.2%; is "better" than using 
		 * margin-right: 34.43; because it hasLayout
		 */
		width: 65.2%;
  }
  div.textflow {
    margin-left: 2.3%;
  }
	/* a sidenote notice guide user to HQ website*/
  div.external {
    background-color: beige;
    padding: 1em;
    margin-top: 1em;
  }
	/* .context is the right column shows context 
	 * information of current page. It is usually 
	 * <div>.
	 */
  body context, .content context {
  	visibility: hidden;
  }
  body > .context, .content > .context, div.external{
    width: 31.5%;
    float: right;
    clear: right;
    /*  padding-bottom: 1em; */
    display: inline; /* for IE double-margin bug. */
  }
  div.context p.more {
    line-height: 80%;
    font-size: 9pt;
  }
  div.content div.narrow.column {
    margin-left: 2.3%;
    width: 30%;
  }
  div.content div.half.column {
    width: 48%;
  }
  div.content div.column {
    display: inline; /* for IE double-margin bug. */
  }
  body.major_initiatives div.half.column,
  body#news_and_events  div.half.column.left,
  body#publications-index div.half.column.left {
    float: left;
  }

  body.major_initiatives div.half.column.right,
  body#news_and_events  div.half.column.right, 
  body#publications-index  div.half.column.right {
   float: right;
  }
  div.section {
    clear: both;
  }
  .footer li {
    display: inline;
  }
  .footer li + li:before {
    content: " | ";
    color: white;
  }
  .footer {
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 0px;
    text-align: center;
    background-color: #7F7F7F;
    line-height: 200%;
    clear: both;
    color: #E5E5E5;
    margin-left: -20px;
    margin-right: -20px;
  }
  .footer :link, .footer :visited {
    color: snow;
    text-decoration: none;
  }
/*== FRONT PAGE                  ==*/
  body#frontpage {
    background: white;
  }
  body#frontpage .context {
    width: 310px;
  }
  #frontpage h1 a, #about h3 a, #about h2 a  {
    color: black;
  }

  #frontpage iframe {     
    height: 250px;
    width: 636px;
    float: left;
    border: none;
  }

  body#frontpage .breadcrumb.navigation {
    display: none;
  }

  body#frontpage hr.navigation {
    display: block;
    visibility: hidden;
  }
  body#frontpage ul#pubs_and_projects li{
    display: inline;
  }
  body#frontpage ul#pubs_and_projects {
    float: left;
    padding-left: 0px;
    margin-top: 5pt;
    margin-bottom: 5pt;
  }
    /*== CITY AND TECHNOLOGY ==*/
  #inpage_nav {
    float: right;
    width: 7.5em;
    background-color: #f5f5f5;
    border-top: 1px solid #DDDDDD;
    margin-left: 1.5em;
    margin-bottom: 1em;
  }
  #city_and_technology table.projects td {
    border-bottom: medium solid silver;
  }
  .back_buttom {
    float: right;
    margin-top: -1em;
     }
h1.spot_light {
margin-top: 32px; 
border-bottom: none;
margin-bottom: 0;
} 
.moduleItem {
float: left;
}   

.projectItem img {
float: left;
}

.clear {
clear: both;
display: inline;
}

.moduleItem, .moduleItem h2 {
width:310px;
}

h2 {
font-size: 130%;
padding-top: 0.5em;
margin-bottom: 0.5em;
}

body#major_initiatives h2 {
padding-top: 0;
margin-top: 6pt;
}
body#major_initiatives p {
margin-top: 0;
}

body#business_alliance h1,
body.major_initiatives.policy h1 {
border-bottom:none;
margin-bottom: 0;
}

.projects .projectItem {
padding:0 0 10px;
float: left;
width: 310px;
height: 90px;
}
.projects .projectItem h3,  .projects .projectItem p{
width: 190px;
float: right;
margin-bottom: 0;
}
.projects .projectItem p{
margin-top: 0;
}
.projects .projectItem h3 {
  padding-bottom: 0.5em;
  margin-top: 0;
}
.moduleItem .more {
	float:right;
	width:310px;
}

#frontpage #content {
float:left;
line-height:1.4em;
width:636px;
}
#frontpage ul.footer {
}
#frontpage h2 a {
color: black;
}
#frontpage h2 a:hover {
text-decoration: none;
}
/*== LIST: UL/LI/OL    ==*/
  .moduleItem ul,
  .section ul, .article ul, .content ul,
  .news_and_events .context ul {
  padding-left: 0px !important;
  }
  .moduleItem li,
  .section li, .article li, .content li,
  .news_and_events .context li {
  list-style-type: none;
  padding:0px 0px 6px 20px;
  }
    
  .section ul li, .article ul li, .content ul li {
  background:transparent url(/images/bullets/solid.png) no-repeat scroll 0 4px;
  }
  
  .moduleItem li,
  ul.special_list li,
  .news_and_events .content ul li {
  background:transparent url(/images/bullets/degree-bullet-small.gif) 1px 2px no-repeat;
  }
  #inpage_nav ul {margin: 8px 0px 8px 0px;}
  #inpage_nav li {list-style-type: circle; list-style-position: inside; 
                  background: none; padding-left: 0.5em;}
  .moduleItem ul {margin: 0px 0px;}
  .content ol li {padding:0 0 6px 6px;}
  .news_and_events .content ul li {overflow: hidden;}

  
.moduleContent {
  float: left;
  padding: 19px 0 15px;
  width: 636px;
}

.sideDetails {
  float: left;
  width: 130px;
}

.moduleContent .thumbnail {
  float: left;
  margin: 0;
  padding: 5px;
  width: 120px;
  border: 1px solid #E5E5E5;
}
div.sideDetails .download_zh,
div.sideDetails .download_en,
div.sideDetails .download_summary {
  color:#FFFFFF !important;
  float:left;
  height:26px;
  margin:15px 0 0;
  padding:38px 0 0;
  text-align:center;
  text-decoration:none;
  width:130px;
}
div.sideDetails .download_zh {
  background:transparent url(publications/source/download-zh.png) no-repeat scroll 0 0;
}
div.sideDetails .download_en {
  background:transparent url(publications/source/download-en.png) no-repeat scroll 0 0;
}
div.sideDetails .download_summary {
  background:transparent url(publications/source/download-summary.png) no-repeat scroll 0 0;
}
.sideDetails .download span {
  margin-left:-9999px;
  position:absolute;
}
.sideDetails a.download {
  color: white;
}
.moduleContent .description {
float:right;
width:480px;
}
 
/*== TABLE                  ==*/
  .table {
    width: 100%; 
    border: 1px solid #f5f6f6;
  }

  .logos.table {
    margin-top: 0.5em;
    background-color: none;
  }
  
  .list.table {
  line-height: 2em;
  }
  
  #consultants .list.table h2 {
    font-weight: bold;
  }
  
  #consultants .list.table td,
  #members .list.table td {
    border-bottom: 1px solid #f5f6f6;
  }
  
  body.publications .list.table {
  width: 74%;
  margin: 0 0 1em auto;
  text-align: left;
  border-collapse: collapse;
  float: left;
  }
  
  body.publications .list.table caption {
  font-size: medium;
    margin: 0.5em;
  }
  
  body.publications .list.table td {
  padding: 5px;
  vertical-align: top;
  border: thin dotted #ddd;
  }
  
  body.publications .list.table td a {
  color: black;
  }
  body.publications .list.table td a:hover{
  color: #E8112D;
  }
  
  .table thead tr th,
  .table tfoot tr th {
  background-color: #7F7F7F;
  color: #fff;
  font-size: 10pt;
  }
/*== PROJECTS            ==*/ 
  .pdf {
    background: url(/images/pdf.png) no-repeat;
    padding-left: 1.6em;
    color: gray;
  }
  .project_logo {
    float: left; 
    margin-right: 20px; 
    margin-bottom: 1em;
  }
  h1.project_title {
    margin-left: 170px; 
  }
  body.major_initiatives .context img,
  body#carbontreasure .context img {
    background: #fffff;
    box-shadow: 0 0 2px rgba(0,0,0,.3);
    border: thin solid #f7f7f7;
  }
  
/*== CARBONTREASURE PROJECT            ==*/
  #galleries {
  width: 236px;
  }  
  body#carbontreasure .vignette img {
    float: left;
    width: 226px;
    margin-right: 20px;
  }
  body#carbontreasure .headline {
    height: 130px;
    margin-bottom: 20px;
  } 
  body#carbontreasure .headline h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
  } 
  body#carbontreasure .headline p {
    margin-top: 0.5em;
  }