html {
	background: #f1fafa;
	color: #333;
	font: 13px Helvetica, Arial, sans-serif;
	line-height: 1;
	/*
    background: #ebf8fc;
    background: -moz-linear-gradient(-90deg, #cbedf6, #ffffff 50%) no-repeat;
    background: -webkit-gradient(linear,left top, left bottom, from(#cbedf6), to(#ffffff)) no-repeat;
    */
	min-height: 100%;
}
body {
	width: 920px;
	margin: 0 auto 0 auto;
}

html, body, #wrap {
    height: 100%;
    min-width: 920px;   /*modified by yli from 960px to 920px */
    max-width: 1960px;
}
body > #wrap {
    height: auto; min-height: 100%;
}
#main {
    /* must be same height as the footer */
    padding-bottom: 62px;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
a {
/*    color: #004463;  */
    color: #1A6A96;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a img { 
    border: 0;
}
#content p {
    line-height: 1.5em;
}
#content h2  {
    font-size: 175%;
    font-weight: bold;
    margin-bottom: 0.5em;
}
#content h3  {
    font-size: 135%;
    font-weight: bold;
    margin-bottom: 0.5em;
}
#content th {
    font-weight: bold;
}
/*
#footer {
    position: relative;
    /* negative value of footer height */
    margin-top: -62px; 
    height: 62px;
    clear:both;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
} 

#footer {
    background: transparent url(../img/footer-mozhead.gif) no-repeat 21px 10px;
}
#footer .content {
    font-size: 100%;
    height: 62px;
}
#footer .content .copyright {
    padding: 14px 21px 0 68px;
}
#footer .content p {
    font-size: 85%;
}
#footer .content .nav {
    position: absolute;
    top: 18px;
    right: 28px;
    list-style: none;
}
#footer .content .nav li {
    display: inline;
    font-size: 85%;
}
#footer .content .nav li a {
    margin-left: 2em;
    text-decoration: none;
}
*/
div.section {
    margin: 1em 0.25em 1em 0.25em;
}
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#simplemodal-overlay {background-color:#000;}
#simplemodal-container {
    background-color: #333; 
    border: none; 
    padding: 0px;
    width: 580px;
    height: 500px;
}

#header { 
    height: 79px;
    margin-top: 5px;
    padding: 0;
    position: relative; 
    /*
    background: #304a67;
    background: -moz-linear-gradient(-90deg, #3b6988, #175478);
    background: -webkit-gradient(linear,left top, left bottom, from(#3b6988), to(#175478));
    -moz-border-radius: 0 0 0.25em 0.25em;
    -webkit-border-bottom-left-radius: 0.25em;
    -webkit-border-bottom-right-radius: 0.25em;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.25);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.25);
    */
}
#header .crumbs { 
    height: 56px;
}
#header .site_title {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 250%;
    font-weight: bold;
}
#header .site_title a {
    color: #fff;
    text-decoration: none;
}
#header .title {
    position: absolute;
    left: 145px;
    bottom: 11px;
    font-size: 160%;
    font-weight: normal;
    height: 23px;
}
#header .title a {
    color: #fff;
    text-decoration: none;
}
#header .auth {
    height: 56px;
    color: #fff; 
    position: absolute; 
    bottom: 0px;
    right: 215px;
    padding: 0 14px 0 14px;
    border-left: 1px solid #6b8ea5;
    border-right: 1px solid #6b8ea5;
}
#header .auth .welcome {
    font-size: 90%;
    margin: 14px 0 4px 0;
    color: #b6c8d3;
}
#header .auth .welcome .screen_name {
    font-weight: bold;
}
#header .nav {
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-indent: 0;
}
#header .nav li { 
    float: left;
    font-size: 90%;
    padding: 0; 
    text-indent: 0;
}
#header .nav li:before {
    color: #b6c8d3;
    margin: 0 4px 0 4px;
    content: "\2219"; 
}
#header .nav li a {
    color: white;
    text-decoration: none;
    margin: 0;
}
#header .nav li.first:before {
    margin: 0; 
    content: ""; 
}
#header .search { 
    position: absolute; 
    bottom: 1.25em; 
    right: 1.25em; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
#header .search #q {
    width: 178px;
    padding: 2px 8px 2px 8px;
    border: 1px solid #ccc;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.template {
    display: none;
}
#content { 
    margin: 0 21px 0 21px;
}
#content .notification {
    padding: 0.5em;
    margin: 1em 0.25em 1.5em 0.25em;
    border: 1px solid #999;
    font-size: 100%;
}

#content p {
    margin: 0.75em 0 1em 0;
}
form input.hint {
    color: #999;
}
#content form {
    margin: 0 0 0 0;
}
#content form fieldset {
    padding: 0.25em 1em; 
    margin: 0.25em;
    border: none;
}
#content form fieldset fieldset {
    padding: 0.25em; 
    margin: 0.25em;
}
#content form fieldset legend {
    font-size: 145%;
    font-weight: bold;
    color: #444;
    margin: 0 0 0.5em 0;
}
#content form fieldset.finish legend {
    display: none;
}
#content form fieldset .intro {
    padding-bottom: 0.5em;
    font-size: 105%;
    margin: 0 0 0 0;
}
#content form ul.fields {
    list-style: none;
    padding: 0;
    margin:  0;
}
#content form ul.fields li label {
    float: left;
    display: block;
    width: 140px;
    padding-top: 0.5em;
    margin-right: 2ex;
    text-align: right;
    margin-left: 0em;
}
#content form ul.fields li {
    position: relative;
    margin-bottom: 0.5em;
}
#content form ul li p.notes {
    font-size: 85%;
    margin: 0.125em 0 0 155px;
}
#content form ul li.error p.notes {
    color: #f00;
}
#content form ul.fields li.divider {
    padding: 0 0 1em 0;
    margin: 0 0 1em 0;
    border-bottom: 1px dotted #ccc;
}
#content form select.dropdown {
    margin: 0.5em 0.5em 0.5em 0em;
}
#content form .dropdown label {
    margin: 0.5em 0.5em 0.5em 0em;
}
#content form ul.fields li.radio .choices {
}
#content form ul.fields li.radio .choices span {
    padding-right: 1em;
}
#content form ul.fields li.required label {
}
#content form ul.fields li.required label:after {
    content: "";
    margin-left: none;
}
#content form ul.fields li .required_note {
}
#content form ul.fields li .required_note span {
    color: #5c92c4;
    font-size: 125%;
}

#content form ul.fields li.text input:focus, #content form ul.fields li.password input:focus {
    background: #fff; -moz-box-shadow: 0 0 3px #004463;
}


#content form fieldset.narrow-labels li label {
    width: 10ex;
}

#content form ul.fields li.text input, 
#content form ul.fields li.password input,
#content form ul.fields li.textarea textarea
{
    background: #fff;
    width: 40ex;
    border: 1px solid #999;
    font-family: Georgia;
    font-size: 1.2em;
    padding: 2px 0.25em;
}
#content form ul.fields li.textarea textarea {
    background: #fff;
    width: 50ex;
    height: 15ex;
    font-size: 1.2em;
    padding: 2px 0.125em;
}
#content form ul.fields li.error label {
    color: #f00;
}
#content form ul.fields li.error input {
    background-color: #fff;
    border: 1px solid #ff0000;
}
#content form ul.fields li.error #recaptcha_widget_div #recaptcha_area .recaptchatable {
    border: 1px solid #ff0000 !important;
}

#content .sidebar {
    float: right;
    margin: 14px 12px 0 0;
}
#content .white_box_sidebar {
    float: right;
    margin: 14px 12px 0 0;
    border: 4px solid #eff8fc;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #fff;
}
#content .white_box {
    margin: 14px 470px 0 2px;   /* modified by yli 188px to 400px*/
    border: 4px solid #eff8fc;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #fff;
}
#content .white_box .header {
    padding: 10px 14px 5px 14px;
}

#content #wizard .nav {
    list-style: none;
    margin: 0 0 0 0;
    padding: 1em 0 2em 0.25em;
}
#content #wizard .nav li {
    float: left;
    margin: 0;
    padding: 0;
}
#content #wizard .nav li a {
    display: block;
    margin: 0 0.25em 0 0;
    padding: 0.25em;
    border: 1px solid #999;
}

#content #wizard .nav li.submit {
    display: block;
    margin: 0 0.25em 0 0;
    padding: 0.125em 1.5em;
}
#content #wizard .nav li.submit input {
    width: 18ex;
}

#content dl {
    padding: 0;
    margin: 0.25em 0 0.25em 0;
}
#content dl dt {
    float: left;
    width: 15ex;
    text-align: right;
    padding: 0.25em 0.5em 0.25em 0.25em;
    background-color: #ddd;
}
#content dl dd {
    padding: 0.25em;
    margin: 0.25em 0.25em 0.25em 17ex;
}

#content .sections {
    list-style-type: none;
}
#content .section dl {
}
#content .section dl dt {
    width: auto;
    background: none;
    float: none;
    text-align: left;
}
#content .section dl dd {
    margin: 0 0 0 2em;
    font-size: 0.85em;
}

#content .details {
    position: relative;
}
#content .details,
#content #downloads,
#content #changes,
#content #history {
    margin-left: 21px;
    margin-right: 10px;  /* modified by yli form 200px to 10px; */
}
#content .details h2 {
    font-size: 150%;
    font-weight: normal;
    margin: 0 0 0.125em 0;
    padding: 0 0 0 0;
}
#content .details .main_actions {
    border: 1px solid #ccc;
    background: #fff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding: 8px 8px 8px 8px;
    margin: 8px 0 8px 0;
}
#content .inprogress .main_actions {
    border: 1px solid #fce440;
    padding-left: 100px;
    background: #f9f2c3 url(../img/actions-warning.gif) no-repeat 28px 10px;
}
#content .details .main_actions h3 {
    font-size: 100%;
    margin: 0 0 1em 0;
    padding: 0 4px 0 4px;
    font-weight: bold;
}
#content .details .main_actions .actions {
    list-style: none;
    margin: 0 0 0 0;
    padding: 4px 4px 4px 4px;
}
#content .details .actions li {
    float: left;
    margin: 0.25em 0.25em 0 0;
}

#content .details .byline {
}
#content .details .byline a {
    font-weight: bold;
}
#content .details p {
    margin: 0.25em 0 0.25em 0;
    padding: 0.25em 0 0.25em 0;
}
#content .details .status {
    position: absolute;
    top: 10px;
    right: 10px;
}
#content .details .status h4 {
    text-align: center;
    line-height: 20px;
}
#content .details .status span {
    display: none;   /* modified by yli, changed from block to none */
    padding: 2px 10px 2px 10px;
    border: 1px solid #333;
    background-color: #ddd;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
}
#content .details .status span a {
    text-decoration: none;
}
#content .details .status-released span {
    border: none;
    background: transparent;
    padding: 0 0 8px 0;
}
#content .details .status-released span a {
    color: #000;
}
#content .details .status-failed span,
#content .details .status-rejected span {
    border-color: #c85a5a;
    background-color: #c85a5a;
}
#content .details .status-rejected span a,
#content .details .status-failed span a {
    color: #fff;
}

.search-results table {
    width: 100%;
    margin: 0 0 1em 0;
}
.search-results table thead {
}
.search-results table thead tr th {
    font-size: 85%;
    background-color: #ddd;
    border: 1px solid #ccc;
    border-bottom: 2px solid #000;
    padding: 0.5em 0.25em;
    text-align: center;
    font-size: 0.75em;
}
.search-results table tbody tr td {
    border: 1px solid #ccc;
    padding: 0.5em 0.25em;
    font-size: 0.85em;
}
.search-results table tbody tr td a {
    display: block;
    text-align: center;
}

.popup #content { 
    margin: 0 0 0 0;
}
.popup #content form fieldset {
    padding: 0;
    margin: 0;
}
.popup #content form ul.fields li {
    margin: 0 0 1em 0;
}
.popup #content form ul.fields li label {
    float: none;
    width: auto;
}
.popup #content .nav {
    width: 560px;
    height: 40px;
}
.popup #content #wizard .nav {
    padding: 0;
    width: 580px; 
    background: #fff;
    padding-top: 14px;    /*  add by yli */
}
.popup #content .nav .prev {
    float: left;
    margin-left: 12px;
}
.popup #content .nav .next,
.popup #content .nav .build {
    float: right;
    margin-right: 12px;
}
.popup #content .header {
    height: 550px;
}
.popup #content .header {
    background: transparent url(../img/popup-title-bg.gif) repeat-x 0 0;
    height: 37px;
}
.popup #content .header h2 {
    color: #fff;
    font-size: 135%;
    font-weight: normal;
    line-height: 37px;
    padding: 0 0 0 15px;
    margin: 0 0 0 0;
}
.popup #content .part {
}
.popup #content .content {
    list-style: none;
    position: relative;
    padding: 15px 15px 0 15px;
    overflow: auto;
    width: 550px;
    height: 400px;
    margin: 0 0 0 0;
    background: #fff;
    color: #333;
}
.popup #content .content p {
    font-size: 100%;
    line-height: 1.75em;
    margin: 0px 12px 5px 0px;
}
.popup #content .sections {
    list-style: none;
    border-top: 1px solid #ccc;    
    padding: 0 0 0 0;
}
.popup #content .sections li.section {
    padding: 0.5em 0 0.75em 0.5em;
    border-bottom: 1px solid #ccc;    
    font-size: 85%;
}
.popup #content .sections li.section h3 {
    margin: 0.25em 0 0.75em 0;
    font-size: 120%;
    font-weight: bold;
}
.popup #content .sections li.section h3 a {
    font-size: 90%;   /* modified by yli change form 75% to 90% */
    margin: 0 0 0 1em;
}
.popup #content .sections li.section h4 {
    font-size: 120%;
    font-weight: normal;
    margin: 0 0 0.5em 0;
}
.popup #content .sections li.section ul {
    margin: 0 0 0 2em;
    padding: 0 0 0 0;
    list-style: square;
}
.popup #content .sections li.section ul li {
    font-size: 110%;
    padding: 0 0 0.5em 0;
    list-style: square;
}

a:hover.button,
.button a:hover {
    text-decoration: none;
}

.button {
	font-family: inherit;
	font-size: 13px;
	font-weight: bold;
	padding: .25em .5em;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.25);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.25);
	text-shadow: 0 -1px 1px rgba(0,0,0,.125);
	background: -moz-linear-gradient(-90deg, #fff, #ccc);
	}
	.button:active {
		-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.125);
		}

.button.large {
	font-size: 16px;
	padding: .5em 1em;
}

.button.grey {
	border-color: #999;
	}
    .button.grey a { }

.button.yellow {
	color: #333;
	border-color: #f7d26d;
	background: #f7d26d;
	background: -moz-linear-gradient(-90deg, #fff0b5, #f7d26d);
    background: -webkit-gradient(linear,left top, left bottom, from(#fff0b5), to(#f7d26d)) no-repeat;
	}
    .button.yellow a { color: #333; }
	
.button.blue {
	color: #fff;
	border-color: #004462;
	background: #005788;
	background: -moz-linear-gradient(-90deg, #005788, #004462);
    background: -webkit-gradient(linear,left top, left bottom, from(#005788), to(#004462)) no-repeat;
	}
    .button.blue a { color: #fff; }
	
.button.link-like {
	background: transparent;
	border: 0;
	color: #004462;
	padding: .25em 0;
	-moz-box-shadow: none;
	}
	.button.link-like:hover {
		text-decoration: underline;
	}

/* modified by yli */
.no_padding_bottom {padding-bottom: 0px !important;}
.padding_bottom_8 {padding-bottom: 8px;}
.china-edit-pane {padding-top: 0px !important;}

#content .white_box_popular {
    border: 4px solid #eff8fc;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #fff;
    float: right;
    margin-top: 14px;
    width: 438px;
}
#content .white_box_popular .header {
    padding: 10px 14px 5px 14px;
}

/* modified by yli community style*/
#user-nav {
	float: right;
	font-size: 12px;
	height: 18px;
	line-height: 18px;
	overflow: hidden;
}
#user-nav li {
	border-right: 1px solid #cccccc;
	float: left;
	padding: 0 2px;
}
#user-nav li.last {
	border-right: 0 none;
	padding-right: 0;
}
#user-nav a {
	display: inline-block;
	padding: 0 3px;
}
#user-nav span {
	padding: 0 3px;
}


#header-nav {
	float: left;
	width: 685px;
	height: 44px;
	border-bottom: 1px solid #999999;
}
#logo {
	display: inline-block; 
	padding-right: 10px;
	margin: -8px 0 -5px -10px;
}
#logo a {
    display: block;
    background: url('../img/logo.png') no-repeat scroll 0 0 transparent;
    height: 50px;
	width: 190px;
}
#logo a:hover {
	background-color: transparent;
}
#nav {
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	vertical-align: bottom;
}
#nav li {
	float: left;
	margin-right: 4px;
}

#nav a {
	display: block;
	padding: 5px 10px;
	-moz-border-radius: 0;
}

#nav a:hover {
	text-decoration: none;
}

#nav A:hover, LI.menuselected A{
	background-color: #004B73;
	color: #ffffff;
}

#header-search {
	display: inline-block;
	width: 270px;
	margin-left: 5px;
	margin-top: 20px;
	clear: both;
}
#header-search input {
	width: 180px;
}
#header-search button {
	border: 1px solid #999999;
	background: -moz-linear-gradient(-90deg, #FFFFFF, #DDDDDD) repeat scroll 0 0 transparent;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
	width: 52px;
	-moz-appearance:none;
	-moz-box-sizing:content-box;
	display:inline-block;
	font-size:12px;
	padding:3px 7px;
}
#header-search p {
	font-size: 11px;
}

#header-search input, button {
	-moz-appearance: none;
	-moz-box-sizing: content-box;
	display: inline-block;
	border: 1px solid #bbbbbb;
	font-size: 12px;
	padding: 3px 7px;
}
#header-search input[type="text"]:focus {
    -moz-box-shadow: 0 0 5px rgba(40, 173, 243, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(40, 173, 243, 0.5);
    box-shadow: 0 0 5px rgba(40, 173, 243, 0.5);
    border-color: rgba(40, 173, 243, 0.75) !important;
    outline: medium none;
}

input.post-button {
	margin-top: 10px;
	display: inline-block;
	border: 1px solid #999999;
	background: -moz-linear-gradient(-90deg, #FFFFFF, #DDDDDD) repeat scroll 0 0 transparent;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
	color: #4C566C;
	font-weight: bold;
	text-align: center;
	width: 130px;
	font-size: 13px;
	height: 24px;
	cursor: pointer;
}


#content .purple_box_sidebar {
    float: right;
    margin: 14px 12px 0 0;
/*    border: 4px solid #eff8fc;  */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #442359;
}
#content .purple_box {
    margin: 14px 470px 0 0px;   /* modified by yli 188px to 400px*/
/*    border: 4px solid #eff8fc;   */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #442359;
}

#content .purple_box h3 {
    color: #EEE;
}
#content .purple_box .header {
    padding: 10px 14px 5px 14px;
}

#content .purple_box_popular {
/*    border: 4px solid #eff8fc; */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #442359;
    float: right;
    margin-top: 14px;
    width: 448px;
}
#content .purple_box_popular .header {
    padding: 10px 14px 5px 14px;
}

/*** Footer ***/
div#footer {
	border-top: 1px solid #999999;
	background: url("../img/logo-mozilla.gif") no-repeat scroll 0 10px transparent;
	margin-top: 50px;
	padding-left: 70px;
	padding-top: 10px;
	padding-bottom: 50px;
}

div#footer #footer-logo {
	width: 245px;
	height: 180px;
	background: url("../img/hub-logo-footer.png") no-repeat scroll 0 0 transparent;
	float: right;
	margin-top: -80px;
	margin-right: 50px;
}

div#footer p{
	line-height: 1.5em;
}
div#footer p .notes{
	margin-left: 15px;
}

span.reputation-score {
	font-weight: bold;
	margin-right: 3px;
}


/*  modified by yli  */
.diy-content {
	margin-left: 21px;
	margin-right: 10px;	
	margin-bottom: 15px;
}

.diy-content .sections{
	margin-left: 20px;
}

.diy-content .sections h3 {
	font-size: 120% !important;
	margin-top: 10px;
}

.diy-content .folder {
	background: url("/img/bookmark-icons/folder.png") no-repeat scroll 4px 1px transparent;
	list-style: none outside none;
	margin: 0;
	padding: 4px 0 0.25em 28px;
}

.diy-content .folder li {
	line-height: 18px;
}