/* Yahoo YUI reset and fonts */

/* RESET BEGIN */
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
/* RESET END */

/* FONTS BEGIN */
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.0
*/

/**
 * 84.5% for !IE, keywords for IE
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE < 6 and IE6 quirks mode.
 * 
 */
body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}

/**
 * 99% for safari; 100% is too large
 */
select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
optgroup, 
option { padding-left: 2px; padding-right: 2px; font-size: 12px; font-style:normal; font-weight:normal; }
optgroup option { padding-left: 10px; }

/**
 * Bump up !IE to get to 13px equivalent
 */
pre, code {font:115% monospace;*font-size:100%;}

/**
 * Default line-height based on font-size rather than "computed-value"
 * see: http://www.w3.org/TR/CSS21/visudet.html#line-height
 */
body * {line-height:1.22em;}
/* FONTS END */

/* TODO: refactor CSS once listings, events, classifieds all styled */

/* <style type="text/css" media="all"> */

/***** general class definitions ******/
.hide { clear: both; }

/* most of the 5 below are deprecated; TODO: remove */
.header-caps { font-size: 20px; line-height: 0.8em; text-transform: uppercase;
               display: block; margin-bottom: 16px; }
.list-category { font-size: 20px; line-height: 0.8em; }
.featured { font-size: 20px; }
.popular { font-size: 18px; }
.big-meta { font-size: 16px; line-height: 1.2em; }
.medium-grey-text { color: #aaa; }

/* holly hack for for when contributor box is taller than description */
div.contributor_description { height: 1%; display: block; position: static; }

/* Table of Contents
 * (Sections are in ALLCAPS for easy navigation)
 
 * MAIN TEMPLATE definitions
   * LINK 
   * BODY 
   * UTILS, SITES
   * MASTHEAD, NAV1, NAV2
   * NAV3
   * CONTENTHEAD
   * MESSAGE_BOX
   * FOOTER, FOOTER2
   * ACTIONBOX
   * ACCOUNTBOX
   * CONTRIBUTORBOX
   * STATICLINKS
   * SEARCH
   * COMMENTS
   * RELATED

 * SPECIFIC page definitions
   * LISTINGSCATEGORY
   * LISTINGSITEM
   * EVENTSCATEGORY
   * EVENTSITEM

*/

/***** MAIN TEMPLATE definitions *****/

/* LINK */

/* black text white bg */
/*a, a:visited { color: #336699; text-decoration: none; }
a:hover { color: #000; background-color: #fc0; }*/
a { color: #369; text-decoration: inherit; }
/*#content a { border-bottom: dotted #ccc 1px; }*/
a:hover { background-color: #fc0; color: #000; }

/* BODY */
body { font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif; background-color: #ddd; background: #ddd url("/static/images/cw-background-96.png") repeat-y 50% 0; height: 100%;  }
#page { background-color: #fff; color: #333;}

h1,h2,h3,h4,h5,h6 { font-weight: normal; }
#contenthead h1 { font-size: 36px; } /* page heading */
#content h2 { font-size: 24px; text-transform: uppercase; padding-bottom: 4px; } /* page section headings */
#content h2 span { font-size: 11px; text-transform: lowercase; } /* page section headings */
#content h3 { font-size: 18px; } /* categories */
#content h4 { font-size: 12px; text-transform: uppercase; } /* subcategories */
#content h5 { font-size: 16px; } /* entry title */
#content h6 { font-size: 12px; } /* entry subtitle */

#content { height: 1%; }

#content #editors_picks { background-color: #f8f8f8; }

#editors_picks h2 { padding-right: 20px; width: 176px;
    background-image: url(/static/images/editors_pick.png);
    display: inline;
    background-position: right; background-repeat: no-repeat; }
#editors_picks h2 span { font-size: 11px;  text-transform: lowercase; }

#content .icon { vertical-align: middle; }
#content .description { color: #999; padding-bottom: 8px; }
#content .views { color: #666; white-space: nowrap; border: solid #ccc 1px; }
#content .share {
    text-transform: lowercase; white-space: nowrap;
    background: url(/static/images/share_grey.png) no-repeat left;
    padding-left: 20px; margin-bottom: 8px; }

.example { color: #999 !important; }
.show-example-text { margin: 2px 0; padding-left: 2px;
    border: #333 solid 1px; border-bottom: #ccc solid 1px; border-right: #ccc solid 1px;
    /*text-align: middle; font-size: 14px; line-height: 1.2em; color: #aaa;*/ }

#img_desc_goes_here { text-align: left; color: #64646e ; padding-left: 8px; padding-top: 4px; }

#addedby    { font-size: 12px; color: #999; }
#description { color: #000; padding: 0 4px 4px 0; }


/*** UTILS, SITES ***/
#utils, #sites, #utils a, #sites a { font-family: "Arial", Tahoma, Verdana, sans-serif; 
                                     color: #fff; font-size: 12px;  }
#utils { text-align: right; }
#utils a { margin: 0 4px 0 4px; }
#sites a:hover, #utils a:hover { color: #044673; background-color: #fff; }
#utils .utilstext { color: #2b6aff; }
#sites { background-color: #044673; }
#sites a.cityselected { font-size: 13px; font-weight: bolder; }

.more { font-size: 11px !important; }

/* MASTHEAD, NAV1, NAV2 */
/*#masthead { position: relative; background-image: url(/static/images/masthead_beijing_new.jpg); }
#masthead.mastbeijing { background-image: url(/static/images/masthead_beijing_new.jpg); } 
#masthead.mastshanghai { background-image: url(/static/images/masthead_shanghai_new.jpg); }*/

#masthead { position: relative; background-image: url(/static/images/masthead_beijing.png); }
#masthead.mastbeijing { background-image: url(/static/images/masthead_beijing.png); } 
#masthead.mastshanghai { background-image: url(/static/images/masthead_shanghai.png); }
#masthead.mastguangzhou { background-image: url(/static/images/masthead_guangzhou.png); }

#masthead #logo { padding: 0px; }

#nav1 { position: absolute; bottom: 0; left: 156px; height: 26px; width: 848px; }
#nav1 li { display: inline; list-style-type: none; }
#nav1 a { display: block; float: left; margin: 0 8px 0 0; padding: 2px 6px 4px 6px;
    color: #fff; text-decoration: none; font-size: 18px;
    background-color: #777; opacity: 0.5; }
#nav1 a:hover { color: #000; background-color: #fc0; }

#nav2 { margin-left: 8px; }
#nav2 li { display: inline; list-style-type: none; }
#nav2-bar a { display: block; float: left; margin: 0; padding: 4px 8px 4px 8px; height: 16px; }
#nav2-bar { background: repeat-x #999; }
/*#nav2-bar li.selected a { padding: 2px 4px 4px 4px; }*/
#nav2-bar { position: absolute; top: 156px; left: 0; width: 1004px; height: 24px; }
#nav2-bar, #nav2-bar a { color: #fff; font-size: 13px; }
#nav2-bar #city-selector { position: absolute; left: 12px; padding: 4px; text-transform: uppercase; }
#nav2-image { margin-left: 80px; float: left; margin-top: 4px; }

/* page-specific NAV1 and NAV2 styling */
#nav1 li#myaccount { position: absolute; right: 24px; }

.account #nav1 li#people a { background-color: #777; opacity: 0.5; }
.account #nav1 li#myaccount a { background-color: #f50; opacity: 1.0; }
.account #nav2-bar { background-color: #f50; }
.account #nav2 .selected a { background-color: #fc7; }

.home #nav2-bar,
.home #nav1 li#home a { background-color: #c33; opacity: 1.0; }
.home #nav2 .selected { background-color: #f77; }
/*.home #nav2-bar { background-image: url(/static/images/homemenu_menu.png); }
.home #nav2 li.selected { background-image: url(/static/images/homemenu_selection.png); }*/

.search #nav2-bar { background-color: #c03030; }

/* NAV3 */ 
#nav3 { background-color: #fff; margin: 164px 0 0 0; padding: 0 12px; }
#nav3 .subcategories li { display: inline; list-style-type: none; width: auto;
float: left; white-space: nowrap; margin: 0; }

/* CONTENTHEAD */
#contenthead { color: #fff; }
#contenthead h1 { line-height: 0.9em; padding: 4px 0 0 0; text-transform: capitalize; overflow: hidden; }
#contenthead a { color: inherit; }
#contenthead p { font-size: 12px; }
#contenthead .breadcrumbs { font-size: 11px; }
#contenthead #extra { font-size: 12px; text-align: right;
    border-right: #fff solid 8px; text-transform: uppercase; }

#contentinfo { padding-top: 8px; overflow: hidden; }

#contentinfo p { color: #333; }

#contentaux { padding: 8px; margin-top: 0; margin-bottom: 8px; clear: both; float: right; width: 180px; margin-right: 110px; }
#content #contentaux a { border-bottom: none; }
#contentaux .choices a { text-decoration: none; padding: 0 0 0 30px; font-size: 15px; display: block; }
#contentaux .choices .selected a,
#contentaux .choices a:hover { background-color: #000; color: #fff !important; }
#contentaux h2 { font-size: 16px; margin-bottom: 4px; }
#contentaux .statistics dt { float: right; clear: right; text-align: left; width: 70%; padding-left: 8px; }
#contentaux .statistics dd { text-align: right; width: 30%; }


.search #contenthead            { background-color: #c33;  }
.home #contenthead              { background-color: #0f0;  }
.account #contenthead           { background-color: #f94; }



/* MESSAGE_BOX */

#message_box {
    margin-right: 16px;
    position: relative; top: 8px;
    background-color: #ffc; color: #730;
    border: #d90 solid 2px; padding: 16px;
}
#message_box code { color: #930; font-weight: bold; }

/* FOOTER */
#footer2 ul { display: none; } /* TODO: remove when footer links are implemented */
#footer { clear: both; color: #3f3f78; padding: 20px 0 4px 0; font-size: 12px; }
#footer2 { padding: 2px 0 2px 0; font-size: 10px; }
#footer li, #footer2 li { display: inline; list-style-type: none; 
                         padding: 2px 8px 2px 8px; border-right: #aaa dotted 1px; }
#footer li.last, #footer2 li.last { border-right: 0px; }
#footer2 p { padding-left: 8px; font-size: 10px; }

#remarks { font-size: 12px; border-left: #fff solid 8px; margin-top: 8px;
margin-bottom: 8px; color: #aaa; text-decoration: none; padding-left: 4px; }

/* BANNERS */

.left-banners { margin: 16px 0 16px 14px; }
.right-banners { margin: 16px 0 16px 22px; }
.right-skyscraper { margin: 16px 0 16px 4px; }
.header-banners { margin: 8px 0px 0px 0px; }

.category-posters { width: 300px; padding-right: 8px; margin-bottom: 20px; float: right; clear: right; }

.poster-banners { width: 300px; float: right; clear: right; margin-top: 8px; }
display: inline; 
/* turn on below for testing purposes 
.poster-banners img,
.header-banners img,
.left-banners img,
.right-banners img,
.right-skyscraper img { border: #00f solid 1px; } */

/* ACTIONBOX */
#actionbox { padding: 8px 2px; }
#actionbox a { border-bottom: #eee dotted 1px; }
#actionbox span,
#actionbox a { display: block; padding: 4px 2px 4px 2px; 
    background-image: url(/static/images/action_icons.gif); 
    background-position: right; background-repeat: no-repeat; }
#actionbox a.likethis { text-align: right; padding-right: 24px; border: none; }
#actionbox span#likethis { background: none; }
#actionbox #add         { background-position: 120px   -36px; }
#actionbox #share       { background-position: 120px     0px; }
#actionbox #email       { background-position: 120px  -396px; }
#actionbox #rss         { background-position: 120px  -432px; }
#actionbox #photo       { background-position: 120px  -180px; }
#actionbox #comment     { background-position: 120px  -288px; }
#actionbox #printpage   { background-position: 120px  -216px; }
#actionbox #feedback    { background-position: 120px  -242px; }
#actionbox #delicious   { background-position: 120px   -72px; }
#actionbox #digg        { background-position: 120px  -108px; }
#actionbox #reddit      { background-position: 120px  -144px; }

/* CONTRIBUTORBOX */


#contributor_box {
    margin: 4px 8px 0 0;
    padding-bottom: 4px;
}

.float_left { float: left; }
.float_right { float: right; }

#contributor_box #contributor_image { margin:  0 3px 0 0; }
#contributor_box #contributor_details {
    display: block;
    margin: 3px 2px 3px 2px;
    border: #000 solid 2px;
    border-width: 0 0 1px 0;
    padding-bottom: 4px;
}
#contributor_box #contributor_details h1 { color: #369; font-size: 14px; }
#contributor_box #contributor_details p { font-size: 11px !important; }
#contributor_box #contributor_details { clear: both; }
#contributor_box #contributor_details .contributor_submitted { color: #999; }


/* ISSUEBOX */

#left #issue_box { 
    border: #ccc solid 1px; padding: 4px; padding-left: 10px; }
#left #issue_box h4 { color: #c33; font-size: 14px; }
#left #issue_box h3 a { font-size: 16px; margin: 4px 0; }
#left #issue_box a.cover_image:hover { background-color: #fff; }
#left #issue_box img.cover_image { margin: 4px 0; }
#left #issue_box .issue_meta { font-size: 10px; margin: 2px 0; }
#left #issue_box small { margin: 2px 0; font-style: italic; display: block; }
#left #issue_box ul { list-style-image: url(/static/images/marker-triangle.png); 
    margin-left: 16px; }
#left #issue_box ul li { font-size: 11px; margin: 8px 0; }

/* STATICLINKS */

#staticlinks { padding: 8px 0px 2px 10px; }
#staticlinks a { font-size: 16px; display: block; padding: 2px 2px; }
#staticlinks p { color: #999; text-align: center; margin-bottom: 8px; }

/* COMMON STUFF; TODO: move elsewhere */
input, textarea { font-size: 13px; padding: 3px 0; }
.button { padding: 2px 8px; display: inline; color: #fff; font-size: 13px;
    background-color: #0cf; border: #09c solid 2px;
    position: relative; bottom: 1px;
}


#searchbox input.button {
    border: #ce5c5c solid 1px; 
              border-bottom: #b92828 solid 1px; border-right: #b92828 solid 1px;
              background-color: #c03030; color: #fff; margin: 2px 0;
}
/*.submit { border: #ce5c5c solid 1px; 
          border-bottom: #b92828 solid 1px; border-right: #b92828 solid 1px;
          background-color: #c03030; color: #fff; margin: 2px 0; }*/

a.button:hover { background-color: #3ef; color: #fff; }
ul.horiz li { display: inline; list-style-type: none; }
ul.horiz li a { display: block; float: left; }
#left h2, #right h2 { font-size: 20px; font-weight: normal; text-transform: uppercase; color: #fff; }

/* ACCOUNTBOX */
#accountbox { color: #fff; background-color: #f0b800; font-size: 12px; padding: 4px; }
#accountbox h2 { padding: 4px 4px 0px 4px; }
#accountbox a { display: block; color: #fff; padding: 1px 8px; }
#accountbox p { padding: 4px 4px 4px 8px; font-size: 11px; }
#accountbox a.button       { display: block; font-size: 14px; background-color: #c03030; border-color: #d02020; border-left-color: #e04040; border-top-color: #e04040; margin-top: 8px; }
#accountbox a.button:hover { background-color: #e05050; }

/* RIGHTBOX */
#right { background-color: #d7d7d7; }

/* Rightbox Events */

#right_event { background-color: #fff; color: #c3a; padding-bottom: 4px; margin-bottom: 8px; }
#right_event h2,
#right_event ul.day_list { background-color: #c3a !important; color: #fff; }
#right_event h2 { padding: 4px 8px 0 8px; }
#right_event ul.horiz li,
#right_event ul.horiz li a { text-align: center; }
#right_event .day_list { padding: 0 8px; background-color: #f00 !important; height: 14px; margin-bottom: 4px; }
#right_event .day_list li { display: block; float: left; font-size: 10px; font-weight: bold; width: 22px; }
#right_event .date_list { clear: left; }
#right_event .date_list a { font-size: 14px; width: 18px; padding: 2px; color: #c3a; }
#right_event .date_list li.selected a,
#right_event .date_list li.day8 a { clear: left; margin-left: 8px; }
#right_event a.eventbox-links { background-color: #fff; color: #c3a; display: block; font-size: 14px; 
                                padding: 2px 4px; margin: 2px 4px; }
#right_event a.eventbox-links:hover { background-color: #fc0; color: #000; }

#right_event .day_list,
#right_event .date_list li.selected a { background-color: #c3a; color: #fff; }
#right_event .date_list li.weekend a { background-color: #fbf; }
#right_event .date_list a:hover,
#right_event .date_list li.weekend a:hover { background-color: #fc0 !important; color: #000 !important; }

/* Rightbox Listings */

#right_listing { color: #fff; padding: 4px 8px 8px 8px; margin-bottom: 8px; 
    background: url(/static/images/listing-search-background.png) no-repeat top right; }
#right_listing p { color: #fff; font-size: 11px; }
#right_listing form { text-align: right; }
#right_listing input { margin-top: 4px; }
#right_listing .example-text-definitions { width: 150px; }
#right_listing input.button { display: inline; width: auto; color: #000;
    background-color: #afb; border-color: #8d9; border-top-color: #bfc; border-left-color: #bfc;
}

#right_classified { margin-bottom: 8px; background-color: #850; }
#right_classified h2                    { color: #fff; display: block; padding: 4px 8px 0 8px; }
#right_classified a.classified-links    { color: #fff; display: block; padding: 4px 8px; font-size: 14px; }
#right_classified .classified_more      { color: #fff; display: block; padding: 4px 8px; font-size: 13px; }
#right_classified .latest_classifieds   { background-color: #fff; }
#right_classified .latest_classifieds h3 { padding: 4px 8px; font-size: 16px; text-transform: uppercase; }
#right_classified .entry { clear: both; padding: 4px 8px; overflow: hidden; }
#right_classified .entry a { display: inline; padding-left: 2px; }
#right_classified .description { color: #333; }
/*#right_classified a.classified-links:hover { background-color: #c94; }*/
#right_classified img { float: right; padding: 0 8px 8px 0; }
#right_classified .by { color: #aaa; font-style: italic; }


/* SEARCH */
#searchbox div#selectors { margin-bottom: 4px; }
#searchbox li { display: inline; list-style-type: none; margin-right: 6px; }
#searchbox li a { color: #fff; font-size: 12px; text-decoration: none; }
#searchbox input#keywords { width: 192px; }
#searchbox input#id_keywords { width: 192px; }
#searchbox.search-section form.site,
#searchbox.search-site form.section { display: none; }
#searchbox.search-site a.site,
#searchbox.search-section a.section { font-size: 16px; }
#searchbox .submit { margin-top: 0; }

#search-users .description em { font-style: italic; }

/* COMMENTS */

/* layout specs for comments box
 * ORIGINAL values
 *     total: 16 + 8 + 376 + 8 + 16 = 424
 *    center: leftarea + rightarea  = 376
 *                75+8 + 293        = 376
 *
 * NEW Values
 *     total: 8 + 336 + 8           = 352
 *    center: leftarea + rightarea  = 336
 *                75+8 + 253        = 336
 *
 * leftarea contains avatar images + overflow comment text
 * rightarea contains comments 
 * form is centered below.
 */

#comments { background-color: #fff; color: #999; }

#comments h2 { clear: both; color: #f0b800; width: 110px;
         background-image: url(/static/images/action_comment.png);
         background-position: right; background-repeat: no-repeat; font-size: 18px; }
#comments .no-background { background:none; width:160px; }
#comments .comment { clear: both; }
#comments .comment img.avatar { padding: 0 0 2px 8px; width: 75px; height: 75px; float: right; }
#comments .comment h6 { color: #000 !important; font-size: 15px !important; font-weight: bold; }
#comments .comment p { clear: none; }
#comments .comment .written_by { font-size: 11px; color: #333; }
/* #comments span.markdown-text { padding-right: 8px; } */
#comments #comment_content { float: left; width: 232px; padding-bottom: 10px; }

#comments form input,
#comments form textarea { width: 293px; margin: 4px 0; }
#comments form textarea { height: 100px; }
#comments form { margin-top: 8px;
                 clear: both;
                 text-align: left; }

#comments #sign_in { padding-top: 4px; clear: both; }

#comments input.preview_button, #comments input.post_button {
    padding: 2px 4px;
    display: inline;
    width: auto;
}

#comments input.preview_button {
    color: #fff;
    background-color: #888;
    border-color: #666;
    border-top-color: #bbb;
    border-left-color: #bbb;
}

#comments input.post_button {
    color: #fff;
    background-color: #e2ad00;
    border-color: #d8a000;
    border-top-color: #f0b010;
    border-left-color: #f0b010;
}

/* RELATED items - for the right side related section */

#item_related {
    display: block;
    margin-right: 8px;
    width: 300px;
    clear: right;
    float: right;
}

#item_related h2 {
    font-size: 18px;
    margin-top: 8px;
}

.articles #item_related h2 { color: #c33; }
.listings #item_related h2 { color: #c3a } 

#item_related .date {
    font-size: 12px;
    color: #666;
}

#item_related .category {
    font-size: 12px;
    color: #666;
}

#item_related .posting_details {
    font-size: 9px;
    color: #bbb;
}

#related_events, #related_listings,
#related_articles {
    border: solid #000 0px;
    border-width: 0 0 0 5px;
    margin-top: 4px;
    margin-bottom: 5px;
}

#related_articles {
    border-color: #c33;
}

#related_events {
    border-color: #c3a;
}

#related_listings {
    border-color: #093;
}

.related_item {
    display: block;
    margin-bottom: 6px;
}

#related_listings p, #related_events p,
#related_articles p {
margin-left: 4px !important;
}


/*input { font-size: 20px; }*/
/*
#comments input, #comments textarea {
    padding: 1px;
    background-color: #fcfcfc; color: #000;
    border: #fff solid 1px; border-top-color: #ddd; border-left-color: #ddd;
}*/

/*#comments #sign_in { border: none; margin-top: 16px; text-align: right; }*/
/*#comments #sign_in a { background-color: #e2ad00; color: #fff; padding: 2px 8px 2px 8px; }*/

/
/***** Account Settings *****/
/*.account label { border: none; text-align: right; }
.account form { padding: 4px; border: #f00 solid 2px; }
.account dd { float: right; width: 420px; 
              margin: 4px 0;
              border: #00f solid 2px; }
.account dt { float: left; width: 160px; 
              margin: 4px 0;
              border: #0ff solid 2px; }
.account input { width: 200px; }*/

/***** Search Results *****/

/*.search .accountbox { margin: 0; padding: 0; }*/
/*.search #content { padding: 0 8px 8px 0; }*/
.search .results { margin-top: 24px; }
.search .results .section { margin-right: 8px; padding: 8px 0; border-bottom: #999 dashed 1px; }
.search .results h2 { display: inline; }
.search .results .listings h2    { color: #093; }
.search .results .events h2      { color: #c3a; }
.search .results .classifieds h2 { color: #850; }
.search .results .articles h2    { color: #c33; }
.search .results .profiles h2 { color: #f50; }
.search .showing { padding-left: 4px; color: #999; }
.search .results ol { clear: left; }
.search .results li { list-style-type: none; margin: 4px 0; color: #999; }

.search .results h5 { display: inline; }
.search .results .description { display: inline; }
.search .results .category { color: #000; }
.search .results .phone,
.search .results .date { color: #666; }


/* submit events button - this stays in base!!! */
.submit_event_button {
    color: #c3a; width: 140px;
    font-size: 14px; font-weight: bold;
    background: #fbf url(/static/images/action_add.png) no-repeat right;
    position: relative; top: 8px;
    padding: 2px 4px; padding-right: 24px;
    border: #ffb7ff solid 2px;
    border-bottom-color: #ffa9ff; border-right-color: #ffa9ff;
}
a.submit_event_button:hover { background-color: #ffc0ff; color: #fff; }

/******** added by max, this part is used by setting *********/
#setting p {
    font-size: 144%;
    margin: 10px 60px 20px 10px;
    color: #404040;
}

#setting dt {
    float: left;
    width: 150px;
    text-align: right;
    padding-right: 5px;
    font-size: 114%;
    color: #646464;
    margin-bottom: 10px;
}

#setting fieldset img {
    float: left;
    padding: 30px 30px 30px 20px;
    background-color: #f0f0f0;
    margin-right: 20px;
    margin-bottom: 15px;
}

#setting input[type=text]{
    width: 300px;
}

#setting dd {
    margin-left: 155px;
    color: #646464;
    margin-right: 30px;
    margin-bottom: 10px;
    font-size: 114%;
}
  
#setting dd span {
    font-size: 77%;
}
  
#setting fieldset {
    margin-bottom: 30px;
}

#setting .change {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px dotted #f7e3af; 
    background-color: #ffffe6;
    margin-right: 40px;
}

#setting .change p {
    font-size: 129%;
    color: #b98c00;
}

#setting .checkbox {
    margin-left:30px;
}

#setting .checkbox span {
    margin-left: -20px;
}

#setting .foot {
    clear: both;
    padding-bottom: 40px;
    background-color: #f0f0f0 !important;
    padding-top: 10px;
    height: 40px;
}

#setting .foot .submit {
    float: right; 
    margin-right: 60px;
    top: 0;
    color: white;
    background-color: #c03030;
}

#setting .foot .cancel {
    float: left;
    margin-left: 20px;
    background-color: #a4a4a9;
    color: white;
}

#setting .required span {
    color: #c33;
    font-size: 85%;
}

#setting .error_occur {
    background-color: #ffffe6;
    margin: 10px 0;
}

#setting .error {
    color: #f0b800 !important;
    font-size: 77%;
    font-weight: bold !important;
}

.edit_action_box {
    background-color: #ddd;
    padding: 3px;
    font-size: 14px;
    margin-bottom: 8px;
}

.edit_action_box a { font-weight: bold; }

.edit_action_box a:hover {
    clear: left;
    background-color: #ddd;
    color: #147;
    text-decoration: underline;
}

/* tabular form layout */
.tabular .row { padding: 4px 0; }
.tabular .row { position: relative; }
.tabular .row p { padding: 2px 0; margin: 0; font-size: 12px; }
.tabular .textfield label,
.tabular .textarea label,
.tabular .selectfield label { position: absolute; left: 0; top: 7px; text-align: right; }
.tabular .textfield input,
.tabular .textarea textarea,
.tabular .selectfield select { position: relative; }

/* markdown */

html body #pane .markdown-text h1,
html body #pane .markdown-text h2,
html body #pane .markdown-text h3,
html body #pane .markdown-text h4,
html body #pane .markdown-text h5,
html body #pane .markdown-text h6, 
html body #pane .markdown-text pre,
html body #pane .markdown-text code,
html body #pane .markdown-text p  { background-color: #fff; background-image: none; 
                  color: #333; line-height: 1.33em; 
                  text-decoration: none; text-transform: none; text-align: left;
                  font-weight: normal; font-style: normal; float: none; clear: none; 
                  margin: 4px 0 ; padding: 0; border: 0; overflow: hidden; !important;}

html body #pane .markdown-text h1 { font-size: 24px; }
html body #pane .markdown-text h2 { font-size: 22px; }
html body #pane .markdown-text h3 { font-size: 20px; }
html body #pane .markdown-text h4 { font-size: 18px; }
html body #pane .markdown-text h5 { font-size: 16px; }
html body #pane .markdown-text h6 { font-size: 14px; }

html body #pane .markdown-text p { font-size: 12px; }

html body #pane .markdown-text em { font-style: italic; }
html body #pane .markdown-text strong { font-weight: bold; }

html body #pane .markdown-text ul { list-style-type: square; 
    margin: 4px 0 4px 26px; color: #666; }
html body #pane .markdown-text ul li { margin-bottom: 4px; }
html body #pane .markdown-text ol { list-style-type: decimal; 
    margin: 4px 0 4px 32px; color: #666; }
html body #pane .markdown-text ol li { margin-bottom: 4px; }

html body #pane .markdown-text p img { display: none; }

html body #pane .markdown-text code { font-size: 12px; }

html body #pane .markdown-text a { color: #333; text-decoration: underline; }

#contributor_description h2 { font-size: 18px; }
#contributor_description span.markdown-text { display: block; margin-left: 90px; }
/* Images */

/* group multiple buttons in a row */
.big_image_pane{
/*    position: relative;    */
    text-align: center;
}

#images {
  position: relative;
  width:300px;
  padding-top: 8px;
  margin-right: 8px;
  /*background-color: #0f0;*/
}

#thumbnail {
  position: relative;
  width:300px;
  /*background-color: #0f0;*/
}

.small_image_pane {
    position: relative;
    display: inline;
    float: left;
    width:75px;
    height:100px;
    text-align: center;
    margin-right: 8px;
    background-color: gray;
    border: #fff solid 2px; 
}

.dojoButtonDownArrowBorder {
    border: none;
}

.dojoButton[popupActive],
.dojoButtonDownArrowBackground[popupActive],
.dojoButton:active {
	color: black;
	background-color: #85aecc;
}

.dojoButton {
    float: left;
/*    margin-right: 10px;*/
    font-size: 85%;
    white-space: nowrap;
    cursor: pointer;
    height: 25px;
    width: 75px
    margin-left: -4px; 
    background-color: #85aeec;
    padding: 0px; !important;
}

.dojoButton .dojoButtonContents {
    font-size: 100%;
    text-align: center;
    width: 50px; 
    background-color: #85aeec;
    color: #000;
}

.dojoButtonContents img {
    vertical-align: middle;
}

.opaque_layer {
    position: absolute;
    top: 0; 
    left:0;
    width: 100%;
    height: 100%;
    background-color: gray;
    filter: alpha(opacity=60);
    opacity: 0.6;
    text-align: center;
    vertical-align: middle;
}
.add{
    width: 75px;
    height: 100px;
}

#add_image_pane { background-color: #c33; border: #e55 solid 2px;
                  border-right: #a11 solid 2px; border-bottom: #a11 solid 2px;
                }

#add_image_pane .button { background-color: #c33; border: #c33 solid 2px; height: 90px; display: block; }
#add_image_pane a.button:hover { background-color: #d44; color: #fff; } 



/*************************************************************/
/* YUI Font Sizes

10px    ->      77%
11px    ->      85%
12px    ->      92%
13px    ->      100%
14px    ->      107%
15px    ->      114%
16px    ->      122%
17px    ->      129%
18px    ->      136%
19px    ->      144%
20px    ->      152%
21px    ->      159%
22px    ->      167%
23px    ->      174%
24px    ->      182%
25px    ->      189%
26px    ->      197%

*/