/*== 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;
}
body { width: 960px; margin: auto;}
#logo  {
    float: left;
  }
#headbar li {
    float: right;
  }
  .partial.navigation {
    font-family: "蘋果儷中黑",
      "Droid Sans Fallback", 
      "文泉驿正黑", 
      "黑体", SimHei;
  }
  .navigation :link, .navigation :visited {
    text-decoration: none;
    color: #3E3E3E;
  }
  .navigation#projects :link, 
  .navigation#projects :visited  {
    color: black;
  }
  .navigation :link:hover,
  .navigation :visited:hover {
    text-decoration: none;
    background-color: #7f7f7f;
    color: white;
  }

  body.members-and-partners #cn-members {
    width: 100%; 
    clear: left; 
    margin-left: 1%;
    margin-top: 1em;
  }
  body.members-and-partners #cn-members td {
    width: 255px;
  }
  #menubar {
    font-size: 16px;
    text-align: left;
    padding: 0px; /* remove indent */
    margin: 0em;
  }
  #menubar li {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    position: relative;
    top: 1px;
  }

  #menubar :link, #menubar :visited {
    display: inline;
    padding-right: 0.8em;
    padding-left: 0.8em;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    color: black;
    text-decoration: none;
  }  
  #menubar :link:hover, #menubar :visited:hover  {
    background-color: #7f7f7f;
    color: white;
    text-decoration: underline;
  }
  #menubar {
    border-bottom: thin solid #7f7f7f;
    margin-bottom: 0.5em;
    width: 960px;
  }
  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 {
    color: black;
    border-bottom: 4px solid #e8112d;
    padding-bottom: 6px;
  }

/*== BREADCRUMB NAVIGATION       ==*/
  body > .breadcrumb.navigation {	
    clear: both;
    padding-left: 1.4em;
    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: 0.5em;
    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;
  }
  #global {
    
   background: #eeeeee;
   line-height: 30px;
   padding-bottom: 5px;
   padding-top: 5px;
  }
  #global a {
    color: gray;
    }
  @media print {
   #search-form {
    visibility: hidden;
   }
  }  
  #headbar {
    background-color: white;
    height: 100px;
    padding-top: 0px;
    padding-left: 10px;
  }
  p.subscriptions {
  text-align: right;
  margin-top: -6px;
  padding-bottom: 15px;
  color: gray;
  }
  
  #headbar li {
    list-style-type: none;
    padding-right: none;
    margin-right: none;
  }
  #headbar a:hover {
    background: none;
    border-bottom: none;
  }
  #headbar ul {
    padding-left: 0;
  }
/*== 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;
  }
  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.major_initiatives div.section {   
    width: 64.2%; 
    clear: left;
  }  
  body.publications div.context {    
    height: 700px;
  }
  body#publications-index div.context {    
    width: 24%;
    height: 64.5em;
  }
  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%;
  }
  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: 30%;
    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-left: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 0px;
    text-align: center;
    background-color: #7F7F7F;
    line-height: 200%;
    clear: both;
    border-top: 1px solid white;
    color: #E5E5E5;
  }
  .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: 360px;
    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: none;
    margin-left: 1.5em;
    margin-bottom: 1em;
  }
  #inpage_nav ul {
    padding-left: 2em;
    
    }
  #inpage_nav li {
    list-style: circle;
    }
  #city_and_technology table.projects td {
    border-bottom: medium solid silver;
  }
  .back_buttom {
    float: right;
    margin-right: 7px;
    margin-top: -1em;
     }
     
.moduleItem {
float: left;
}   

.projectItem img {
float: left;
}

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

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

h2 {
line-height:16px;
font-size: 130%;
padding-top: 0.5em;
}

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

.moduleItem h2 {
border-bottom:1px solid #7F7F7F;
float:left;
padding-bottom: 8px;
width: 310px;
}

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

.moduleItem .bd {
float:left;
padding:0 0 0px;
position:relative;
width:100%;
z-index:0;
}
.projects .projectItem {
padding:0 0 5px;
float: left;
width: 310px;
}
.projects .projectItem h3,  .projects .projectItem p{
width: 190px;
float: right;
margin-bottom: 0;
}
.projects .projectItem p{
margin-top: 0;
}
.projects .projectItem h3{
padding-bottom: 1em;
margin-top: 0;
}
.moduleItem .more {
	float:right;
	width:310px;
}
.homeCol {
	float:right;
	width:310px;
}

#frontpage #content {
float:left;
line-height:1.4em;
width:636px;
}
#frontpage ul.footer {
width:960px;
}
#frontpage h2 a {
color: black;
}
#frontpage h2 a:hover {
text-decoration: none;
}
.homeCol .publications ul,
.context #latestNews ul,
#about ul.projects-list li,
body.news_and_events .content ul li,
body#partners .content ul li,
.blog li {
padding:0 0 5px;
list-style-type: none;
}
.homeCol .publications ul li,
#about ul.projects-list li,
body.news_and_events .content ul li,
body#partners .content ul li,
.blog li {
background:transparent url(/images/bullets/degree-bullet-small.gif) no-repeat scroll 0 2px;
padding:0 0 6px 20px;
}
body#partners .content .bg {
background: #F3F3F3 url(/images/bullets/degree-bullet-small.gif) no-repeat scroll 0 2px;
padding:0 0 6px 20px;
}
body.news_and_events .content ul li {
overflow: hidden;
}
body.news_and_events .content ul,
body.news_and_events .context ul,
body#partners .content ul {
padding-left: 0;
}

.homeCol .publications ul li {
width:290px;
}
#about ul.projects-list {
padding-left: 0;
}
.homeCol .publications ul {
margin-top: 0px;
margin-bottom: 0;
}

.ourMembers h2 {
background-color: #7F7F7F;
line-height: 24px;
color: white;
font-size: 124%;
margin: 0;
padding: 0:
display: block;
margin-top: 0.6em;
}

.ourMembers object {
box-model: border-box;
-moz-box-modele: border-box;
border: thin solid #7F7F7F;
width: 308px;
margin-bottom: 2em;
}

body.members-and-partners .ourMembers {
float: right;
padding-top: 0;
}

body#publications-index table#publications :link, 
body#publications-index table#publications :visited {
border: none;
}

.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 {
  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;
}
.sideDetails .download span {
  margin-left:-9999px;
  position:absolute;
}
.sideDetails a.download {
  color: white;
}
.moduleContent .description {
float:right;
width:480px;
}

.subItems {
bottom:0;
float:left;
left:0;
padding:1px 0 0;
width:635px;
margin-top: 0;
margin-bottom: 2em;
}
.subItems li {
background:transparent none repeat scroll 0 0;
float:left;
margin:0 1px 0 0;
padding:0;
width:158px;
list-style-type: none;
}
.subItems li a {
background:#D8D8D8 none repeat scroll 0 0;
color:#1D1D1D;
display:block;
float:left;
font-size:0.9em;
font-weight:bold;
height:auto !important;
line-height:1.3em;
min-height:112px;
padding:3px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
.subItems li a img {
padding:0 0 5px;
} 
.subItems img {
display:block;
float:left;
}
.subItems li a span {
display:block;
padding:0 0 2px;
}
.subItems li.last {
margin:0;
}
.subItems li a:hover, .subItems li:selected a {
background-color: #E60523;
color: #FFFFFF;
font-weight: bold;
}