/*------------------------------------------------------------------------------
[Typography stylesheet]
Project: One did it
Last change: 5.1.2009 / LR: Clean-up & structure
People responsible: Lasse Rintakumpu (LR)
Misc: Some hard math. Body font-size is 0.625em which translates to 10px
(in most browsers, IE handled on a separate stylesheet) 
thus making the cascaded font-sizes easy to manage, 
for example 1.2em = 12px and so on. This takes *all* the guesswork out 
of setting web type sizes. Based on Richard Rutter's article @
http://alistapart.com/article/howtosizetextincss
--------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
[Table of contents]

1. Set baseline for calculations
	2. Font families
	3. Font sizes and line heights
	4. Font weights & styles
	5. Text transforms & decorations
	6. Text alignment
	7. Kerning &misc.
-------------------------------------------------------------------------------*/

body
{ 
font-size: 0.625em; 
}

/* 2. Font families */

body, input, textarea, #content-modal .fn,
.request .fn, h3 .fn {font-family: Trebuchet, "Trebuchet MS", Helvetica, Arial, clean, sans-serif;}
.block-content h1, .block-content h2, h4, 
.pdf li, .images li, .fn, #main-info h3 { font-family: Trebuchet, "Trebuchet MS", Helvetica, Arial, clean, sans-serif; }
#main-heading, #browser-menu li { font-family: Georgia; }
pre,code,kbd,samp,tt {font-family: "Courier New", Courier, monospace; }

/* 3. Font sizes, line heights (in decresing order) */

#main-heading { font-size: 3em; }
h1, .block-content h2, .action h3, #group-profile h3, #dynamicedit-group-profile-heading input, #group-statistics td p, #main #group-members h3, #main .leaderboard li { font-size: 2.4em;} 
.block-content h4, h4, #main-frontpage h3, #main-info h3, #action-modal-action .description, .feed-item h5 , .group-modal .group-name  { font-size: 1.8em; }
#action-modal-action .savings { font-size: 1.6em; }
#personalmenu li { font-size: 1.5em; }
.dropdown-title, .dropdown-selected, #groups-user th p { font-size: 1.4em ! important; }
#main-info h4, #main-summary, #feed h4, #main #group-description p, h6, #dynamicedit-group-description textarea { font-size: 1.4em; }
#main-info-makers .fn {  font-size: 1.2em ! important; }
#content-globalmessage p, #main p, #main blockquote, #main ul, #main ol, .unit, #main-friends h4.fn, #content-compare-legend .fn, h3 { font-size: 1.2em;}
p, blockquote, ul, ol, #main p.form-button, h5, #main .fact { font-size: 1.1em; }
label, #login p, .friend .level, .vcard .note { font-size: 1em; }
.dynamicedit p { font-size: 1em ! important;}
.form-text label, #content .form-password label, .form-text input, .form-text-alternative input, p label, textarea, #content-compare-legend .backpack, .form-submitting,
.action-impact p { font-size: 0.9em; }
.action h3 .savings, #main #group-description p strong, .pagination li, #main .leaderboard li p { font-size: 0.8em; }
#main .leaderboard .amount { font-size: 0.75em; }
button span, .button span,
.vcard .unit, .friends .vcard .note { font-size: 0.7em; }
.action h3 .savings .unit, #action-modal-action .savings .unit { font-size: 0.5em; }


p, blockquote, textarea, h3, ul, ol, #main p.form-button, #register .form-checkbox label, .unit, .form-text-alternative label { line-height: 1.64; }
.dropdown p.dropdown-selected { line-height: 1.6; }
.dropdown p.dropdown-selected, h1, .block-content h2, #main-heading, #main-frontpage p { line-height: 1.5; }
.portlet .do p, .form-error, .form-alert, .form-success { line-height: 1.4; }
ul, ol { line-height: 1.27; }
#main-info-makers .fn { line-height: 1.25 ! important; }
label, #login p, .friend .level, h3, #information-invite label, #invite label,
#content-compare-legend .fn, #groups-create td p , #content-group #group-members .fn { line-height: 1.2; } 
.block-content h4, h4, #main-frontpage h3, #main-friends .fn, #main .leaderboard .amount  { line-height: 1.11;  }
.vcard .unit, .vcard .note, #main-friends h4.fn, #action-modal-action .description { line-height: 1;}


/* 4. Font weights */

button, .button, h5 { font-weight: 900; }

h1, h3, strong, button, 
#login form.form-error, 
#saved-resources .measure,
.form-error, .form-success,
#logout a, .savings, .limit,
.unit, #content-modal .fn,
.request .fn, h3 .fn, #main-info-makers .fn,
#planner h5, .notice, #main-summary,
#action-modal-action .description, #browser-menu .selected,
#group-description-type p, #group-statistics td p, h6, .dropdown-title, .dropdown-selected,
.groups-table-header p, .tabs .tab a, #content-group .feed-title { font-weight: 700; }

h2,h4,h5,.pdf li, .fn, .vcard .unit,
#main-frontpage h3, #main-info h3, #main-info h4,
.action h3, .action h3 .savings, .action h3 .unit,
#content-browser .category .savings, #action-modal-action .unit,
.notice, #group-profile  h3, #main #group-members h3 { font-weight: 400; }


/* 5. Text alignment */
.request .note, .vcard .note, #main-frontpage-see-description .note, #planner .loading, #main-statistics .note, .group-modal .note{ text-align: left; }

#site-information-copyright, .fraction, #main-heading-message em, #content-modal .form-buttons, .signature,
#main-friendrequest .form-buttons, #information-embed .form-buttons, #embed .form-buttons, #avatar-modal .form-buttons, #action-modal-wrapper .form-buttons, .action .illustration, #share-modal .form-buttons,
.leaderboard li p.savings span, .feed-post .form-buttons, .group-modal .form-buttons, #logout, #content-group #main .form-buttons { text-align: right; }

#activities-join-link, #join-link, #main-landingpage-backpack-test, #main-dailydo .savings,
button, .button, button span, .note, .friend .level, #content-compare-legend .backpack , .form-submitting,
.notice span, .group-modal .confirmation, .tabs .tab { text-align: center; }

#login .form-checkbox  label { vertical-align: 25%;}


/* 6. Text transforms & decorations */

#main-info h3, #mainmenu .menu-subnavigation span, .action h3, #group-profile  h3, #main #group-members h3 { text-transform: none; }
h3, #activities-join-link, #join-link, button, #planner h5, .tabs .tab a { text-transform: uppercase; }
#TB_closeWindow *, .error-information { text-transform: capitalize; }
#personalmenu li { text-transform: lowercase; }

.actionplanner-completed a  { text-decoration: line-through ! important; }

#login a, #login a:visited, a:visited:hover, a:hover,
#mainmenu a:hover, #mainmenu a:hover h2, #mainmenu .menu-subnavigation a:hover span,
#mainmenu .menu-subnavigation a:visited:hover span,
.action h3 a, .action h3 a:visited, #group-members h3 a{ text-decoration: underline; }

#mainmenu a, a, #information-equal-to ul a:hover, #information-equal-to ul a:visited:hover,
#main-backpack-comparison-change .ui-select-option-box a:hover,
#login a:hover, #login a:visited:hover,
#main-landingpage-backpack-test a, #main-landingpage-backpack-test a:hover,
#main-landingpage-backpack-test a:visited:hover,
.action h3 a:hover, .action h3 a:visited:hover, #group-members h3 a:hover, #personalmenu li a:hover { text-decoration: none; }

#activities-join-link a, #join-link a, .form-close a, .form-buttons a, #header-sitelogo a,
#languageselect .selected a, .actionplanner-completed a:hover, .actionplanner-completed a:visited:hover, .dropdown-selected a, .dropdown-option a{ text-decoration: none ! important; }

em { font-style: italic; }

/* 7. Kerning &misc. */
/*button span, .button span,*/ #mainmenu h2 { margin: 0; letter-spacing: -1px; }
 