/*---------------------------------------------------------
[Main Stylesheet]

Project: 		Melissa Zimmerman's portfolio site
Version:		1.0
Author: 		Keith Chu (keith@keithchu.com)
Last Updated:	October 6, 2008
-----------------------------------------------------------*/
@import "reset.css";

/* Global
*************************************/
body { background-color: #000; font-size: 62.5%; height: 100%; min-width: 1000px; width: 99.5%; }
#wrapper { border-bottom: 5px solid #fff; height: 627px; margin: 0 auto; width: 850px; }

/* Header
************************************/
#masthead { font-family: Helvetica, Arial, sans-serif; padding-top: 35px; width: 100%; }
#masthead h1 { color: #fff; float: right; font-size: 5.1em; letter-spacing: 0.075em; line-height: 0.75; margin-right: -6px; }
#masthead h1 em { color: #cb7a7a; font-style: normal; margin-left: -0.3em; }
#masthead h1 a:link, #masthead h1 a:visited, #masthead h1 a:hover, #masthead h1 a:active { color: #fff; text-decoration: none; }   

/* Content
**********************************/
#primary_content { margin-right: 391px; margin-top: 0; min-height: 474px; overflow: visible; width: 100%; }
#primary_content .content { background: #400000 url("../images/background_pc1.jpg") no-repeat bottom right; margin-right: 391px; margin-top: 0; min-height: 474px; overflow: hidden; position: relative; }
.intro_copy { margin-left: 10px; padding-top: 15px; }
.intro_copy h2 { background-color: #fff; color: #400000; font: 1.3em/1 Helvetica, Arial, sans-serif; margin-top: 5px; opacity: 0.6; filter: alpha(opacity=60); padding: 3px 0 3px 0; position: relative; top: -20px; left: -10px; text-align: center; width: 459px; }
.intro_copy h2 em { color: #000; font-style: italic; }
.intro_copy h3 { color: #4393c0; font: 500 2.1em Helvetica, Arial, sans-serif; margin: 134px 10px 1.5em 0; text-align: left; }
.intro_copy q { color: #fff; display: block; font: 500 1.6em Helvetica, Arial, sans-serif; margin: 0 10px 0.2em 28px; padding-left: 2px; quotes: '“' '”'; text-align: left; }
.intro_copy q em { color: #b36464; }
.intro_copy q:before { content: open-quote; }
.intro_copy q:after { content: close-quote; }
.intro_copy p { color: #b36464; display: block; font: italic 0.9em Helvetica, Arial sans-serif; margin: 0 10px 2.4em 30px; padding-top: 3px; text-align: left; }
.intro_copy p span { color: #b36464; display: inline; font-size: 1.2em; margin-bottom: 0.3em; }
.intro_copy p em { font-style: normal; margin-bottom: 0.3em; }

#photos { position: relative; top: 5px; text-align: right; }
#photos img { display: inline; height: 71px; width: 71px; margin: 0 0 0 6px; }

/* specific pages */
#home #primary_content { background: url("../bgs/images/images_hs0.png") no-repeat top right; }
#updates #primary_content { background: url("../bgs/images/images_hs1.png") no-repeat top right; }
#about #primary_content { background: url("../bgs/images/images_hs2.png") no-repeat top right; }
#media #primary_content, #media_galleries #primary_content { background: url("../bgs/images/images_hs5.png") no-repeat top right; }
#contact #primary_content { background: url("../bgs/images/images_hs3.png") no-repeat top right; }

#media #photos { position: relative; }

/* ----------------- subpages */

/* home */
.home { position: absolute; top: -37px; left: 10px; }
.home img { height: 32px; width: 32px; }

/* about */
.desc_copy { height: 310px; float: right; margin-left: 10px; margin-top: 0; padding-top: 10px; }
.desc_copy p { color: #ccc; display: block; font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; line-height: 1.35; margin-bottom: 1em; margin-right: 1.5em; /* opacity: .8; filter: alpha(opacity=80); */ text-align: left; }
.desc_copy p strong { font-size: 1.1em; font-weight: bold; }

/* updates */
.update_copy { height: 463px; float: left; margin-left: 10px; margin-top: 0; padding-top: 10px; width: 449px; overflow: auto; }
.update_copy p { color: #ccc; font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; line-height: 1.35; margin-bottom: 1em; margin-left: 10px; margin-right: 15px; /* opacity: .8; filter: alpha(opacity=80); */ }
#primary_content .update_copy span.date { color: #fff; display: block; font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; margin-bottom: 1em; }
.update_copy h3 { color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; line-height: 1.5; margin-bottom: 1em; margin-left: 10px; margin-right: 10px; margin-top: 2em; text-align: left; }
.update_copy h3 strong { color: #fff; font-size: 1.2em; font-weight: 300; }
.update_copy blockquote { color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-weight: 500; margin: 1.5em 10px 1.5em 38px; padding-left: 2px; quotes: '“' '”'; text-align: left; }
.update_copy blockquote p { display: inline; margin: 0; }
.update_copy blockquote p em { color: #b36464; }
.update_copy blockquote:before { content: open-quote; margin-left: -0.5em; }
.update_copy blockquote:after { content: close-quote; }
.update_copy a:link, .update_copy a:visited { border-bottom: 1px dotted #cb7a7a; color: #4393c0; text-decoration: none; }
.update_copy a:hover, .update_copy a:active { color: #cb7a7a; text-decoration: none; }

/* media: gallery */
.media_copy { height: 474px; float: left; overflow: hidden; }
.media_copy h2 { color: #bbb; font-family: Helvetica, Arial, sans-serif; font-size: 1.5em; font-style: italic; padding-right: 2px; position: relative; top: 20px; left: 10px; }
.media_copy h2 span { font-size: 0.8em; font-style: normal; margin-left: 10px; }
#g_gallery { margin-bottom: 39px; height: 200px; position: relative; top: 30px; left: 10px; width: 449px; }
#g_gallery a {  }
#g_gallery a:hover, #g_gallery a:focus { border-bottom: 5px solid #4393c0; }
#g_gallery img:hover, #g_gallery img:focus {  }
#g_gallery li { display: inline; margin-right: 1px; }

#gallery_title { background-color: #fff; border-bottom: 6px solid #000; display: none; color: #000; font: bold 1.4em Helvetica, Arial, sans-serif; margin-left: 10px; margin-right: 13px; margin-top: 4px; padding: 5px; padding-bottom: 2px; }

#media_gallery { height: 434px; max-height: 434px; margin-bottom: -10px;}
#media_gallery h3.media_gallery_title { color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; float: right; opacity: .7; filter: alpha(opacity=70); position: relative; top: 60px; right: 30px; text-align: center; }
#media_gallery > h3.media_gallery_title:first-child { position: relative; top: 50px; }
#media_gallery .gallery { position: relative; top: 30px; left: 10px; }
#media_gallery .gallery li { display: inline; line-height: 2; margin-right: 6px;  }
#media_gallery .gallery_back { color: #fff; font: bold 1.4em Helvetica, Arial, sans-serif; position: relative; top: 40px; left: 10px; }
#media_gallery .gallery_back a:link, #media_gallery .gallery_back a:visited { border-bottom: 1px dotted #fff; color: #4393c0; font-weight: normal; text-decoration: none; }
#media_gallery .gallery_back a:hover, #media_gallery .gallery_back a:active { color: #cb7a7a; }

#media_galleries .media_copy h2 span { line-height: 2; }
#buttonhole, #shout, #misc { margin-top: 10px; }

/* media: songs */
#songs_video { height: 176px; width: 458px; padding-top: 3px; overflow: auto;}
#songs { float: left; position: relative; top: -175px; width: 45%; }
#video { float: left; position: relative; margin-left: 12px; width: 50%; }
#songs h2, #video h2 { color: #fff; opacity: .7; filter: alpha(opacity=70); position: absolute; margin-top: -10px; }
#songs dl, #video dl { color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; margin-top: 2.5em; margin-left: 10px; }
#songs dl dt, #video dl dt { font-size: 0.8em; line-height: 1.5; margin-bottom: 0.2em; text-align: left; }
#songs dl dt a, #video dl dt a { border-bottom: 1px dotted #cb7a7a; color: #4393c0; font-size: 1.3em; margin-right: 5px; text-decoration: none; }
#songs dl dt a:hover, #video dl dt a:hover { color: #cb7a7a; }
#songs dl dd, #video dl dd { font-size: 0.8em; line-height: 1.2; margin-bottom: 1em; text-align: left; }
#video dl dd p { margin-bottom: 8px; }

/* contact */
.contact_copy { padding-top: 220px; text-align: center; }
.contact_copy a { color: #4393c0; font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; letter-spacing: 0.15em; padding-bottom: 3px; }
.contact_copy a:link, .contact_copy a:visited, .contact_copy a:hover, .contact_copy a:active { border-bottom: 1px dotted #fff; text-decoration: none; }
.contact_copy a:hover, .contact_copy a:active { color: #cb7a7a; }

/* Navigation
*********************************/
ul#navigation { position: absolute; font-family: Helvetica, Arial, sans-serif; margin-left: 25px; margin-top: -44px; text-align: center; }
ul#navigation li { float: left; margin-right: 10px; overflow: visible; text-align: center; }
ul#navigation .home { position: absolute; margin-left: -24px; margin-top: -499px; }
ul#navigation .home img { height: 32px; width: 32px; }
ul#navigation .home a:link, ul#navigation .home a:visited, ul#navigation .home a:hover, #navigation .home a:active { color: #4393c0; }
ul#navigation .home em { color: #4393c0; display: inline; margin-left: -4px; }
ul#navigation li a:link, ul#navigation li a:visited, ul#navigation li a:focus, ul#navigation li a:hover, ul#navigation li a:active { color: #e3d9d9; font-size: 1.66em; font-weight: bold; padding-right: 0.1em; text-transform: uppercase; }
ul#navigation li em { color: #4393c0; display: block; font-size: 1.2em; font-style: normal; font-weight: bold; text-transform: lowercase; }
img.pdf { position: relative; left: -218px; top: 32px; }

/* links */
ul#navigation li a:link, ul#navigation li a:visited { color: #e3d9d9; text-decoration: none; }
ul#navigation li a:hover, ul#navigation li a:active { color: #cb7a7a /* #7d9db6; */ }

/* specific pages */
#home .home a:link, #home .home a:visited { font-size: 2.586em; text-decoration: none; }
/* #media ul#navigation { margin-top: -110px; } 
#media ul#navigation li em { margin-top: -0.06em; } */
#updates .updates, #about .about, #media .media, #media_galleries .media, #contact .contact { margin-top: -4px; }
#updates .updates a:link, #updates .updates a:visited, #about .about a:link, #about .about a:visited, #media .media a:link, #media .media a:visited, #media_galleries .media a:link, #media_galleries .media a:visited, #contact .contact a:link, #contact .contact a:visited { font-size: 2em; text-decoration: none; }

#media_gallery { height: 291px; max-height: 290px; overflow: hidden; }
#media #songs, #media #video { top: -15px; }
#media #footer { margin-top: 67px; }

#updates ul#navigation { margin-left: 14px; }
#media ul#navigation, #media_galleries ul#navigation { margin-left: 17px; }
#about ul#navigation { margin-left: 17px; }
#contact ul#navigation { margin-left: 17px; }

#updates img.pdf, #about img.pdf { left: -228px; }
#contact img.pdf { left: -238px; }
#media img.pdf { left: -229px; }

/* Footer
********************************/
#footer { position: relative; top: 24px; padding-bottom: 20px; }
#footer p { color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 1.1em; opacity: .6; filter: alpha(opacity=60); }
#footer p a:link, #footer p a:visited { border-bottom: 1px dotted #fff; color: #4393c0; text-decoration: none; }
#footer p a:hover, #footer p a:active { color: #2f8659; }

/* provision for media page */
#media #footer { padding-bottom: 0; margin-bottom: -20px; top: -43px; }  /* Changed in ie.css */


/* And a hack or two...
***********************************/
@media screen and (-webkit-min-device-pixel-ratio:0) { 

	#wrapper { height: 624px; }
	#primary_content .content { min-height: 474px; }
    ul#navigation { margin-left: 25px; }
	.update_copy p { font-size: 1.4em; }
	#home #primary_content #photos { top: 5px; margin-top: 0px; }

	img.pdf { left: -218px; top: 30px; }
	#contact img.pdf { left: -253px; }
	#media img.pdf { left: -219px; }

	#media_galleries .media { margin-top: -3px; }
	#updates .updates a:link, #updates .updates a:visited, #about .about a:link, #about .about a:visited, #media .media a:link, #media .media a:visited, #media_galleries .media a:link, #media_galleries .media a:visited, #contact .contact a:link, #contact .contact a:visited { font-size: 2em; }
	#updates ul#navigation, #about ul#navigation, #media ul#navigation, #media_galleries ul#navigation, #contact ul#navigation { margin-left: 23px; }
}