* { font-size: 100%; }
html { font-size: 62.5%; }
body { background: #f1f1f1 url(images/bg.png) 50% 0 repeat-x; color: #555; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.3em; line-height: 1.8em; }

/* typography */
h1, h2, h3, h4, h5, h6, #profile strong { font-weight: normal; }
h2 { color: #999; font-size: 1.9em; line-height: 1.5em; }
h3 { font-size: 1.3em; line-height: 1.7em; }
h3, #initiatives p { margin: 0.6em 0; }
#profile { line-height: 35px; }
#profile strong { font-size: 1.3em; }
#flickr, #twitter, #twitter cite { font-size: 0.9em; }
#profile strong, #follow-more  { font-style: italic; }
#follow-more { font-size: 0.55em; }
abbr { border-bottom: 1px dotted #888; }

/* links */
a { text-decoration: none; color: #468; outline: 0; }
a:hover { color: #c66; border-bottom: 1px solid #aaa; }
h1 a:hover { border: none; }
#profile a { font-size: 0.85em; }
#profile a, #initiatives p a, #formfunctionclass a { text-transform: uppercase; letter-spacing: 2px; font-style: normal !important; }

/* layout */
#wrap { width: 800px; margin: 0 auto; overflow: hidden; padding: 0 0 80px; background: url(images/wrapbg.png) 0 0 no-repeat; }
	#header { height: 105px; padding: 100px 0 35px 32px; position: relative; }
		#formfunctionclass { width: 250px; position: absolute; top: 0; right: 0px; overflow: hidden; text-align: center; }
			#formfunctionclass img { display: block; }
			#formfunctionclass p { position: relative; top: -1em; }
	#title, #title a { width: 350px; height: 105px; }
		#title a { display: block; text-indent: -9999px; background: url(images/pwdo-philippine-web-designers-organization.png) 0 0 no-repeat; }
	#profile, #initiatives, #updates, #links { margin: 0 0 35px; clear: both; }	
	#profile { 
		background: url(images/avatars.png) 460px 0 no-repeat; 
		/* min-height: 215px; height: auto !important;  -> commented out because of weird line-height */
		height: 215px; 
		margin-left: 90px; 
		padding-right: 270px; 
		position: relative;
		overflow: hidden;
	}
		#profile strong, #profile h2 { display: block; text-align: right; }
		#join-more { position: absolute; bottom: 0; right: 0; display: block; background: #e0e0e0; width: 125px; text-align: center; height: 35px; }
			#join-more:hover { background: #e9e9e9; border: none; }
	#initiatives { 
		/*background: url(images/form-function-class-logo.png) 0 0 no-repeat; */
		background: url(images/form-function-class.jpg) 0 0 no-repeat; 
		min-height: 190px; height: auto !important; height: 190px; 
		margin-left: 0;
		margin-right: 170px;
		padding-left: 280px; 
	}
	#updates {
		margin: 0 80px 35px 280px;
		overflow: hidden;
	}
		#updates h2 {
			overflow: hidden;
			width: 530px;
			height: 45px;
		}
			#updates h2 span {
				float: left;
				text-align: right;
				width: 350px;
			}
			#follow-more {
				float: left; display: inline;
				margin-left: 10px;
				line-height: 25px;
			}
			#follow ul { overflow: hidden; height: 1%; text-align: center; }
			#follow li { display: inline; padding: 0 9px 0 0; }
			#follow a img { padding: 0 0 0 2px; position: relative; top: 2px; }
		#updates b { font-weight: normal; }
		#updates .alt, #flickr {
			text-align: left;
		}
		#flickr {
			width: 80px;
			float: right;
			line-height: 0;
		}
			#flickr img {
				margin: 0 0 10px; background: #ddd;
			}
		#twitter {
			width: 350px;
			float: left;
			text-align: right;
		}
			#twitter li {
				margin: 10px 0 20px;
			}
			#twitter strong { font-weight: normal; }
	#links { margin: 0 90px; }
		#links h2, #links ul, #links li { display: inline; vertical-align: top; padding: 0 10px 0 0; }
.jqmWindow { line-height: 1.8em; }
.jqmWindow p, .jqmWindow ul { margin: 15px 0; }
.jqmWindow a { text-transform: none !important; letter-spacing: 0 !important; font-size: 100% !important; }