article, aside, footer, header, menu, nav, section { display: block}
html { background: #f3f3f3}
body { font-family: Helvetica, Arial;}
header { height: 75px; background: url(/assets/title.gif) center no-repeat #313131; margin-bottom: 1.5em}
header h1, header h2 { margin-left: -1000em}
a {-webkit-transition: all 0.25s ease-in; -moz-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in}
em { font-style: italic}

/* <nav> */
nav { text-align: center}
nav li { display: inline; font-weight: bold; font-size: 116%; text-shadow: 0 1px 0 #fff} 
nav ul li a { color: #333; text-decoration: none; margin: 0 0.5em}
nav ul li a:hover, nav a.current { text-decoration: underline}
nav ul li a:active { position: relative; top: 1px}
nav li:after { content: "\0020 \2022 \0020"} 
nav li.last:after { content: ""}

/* container */
section { width: 970px; margin: 0 auto; overflow: auto}

/* shows */
#shows article { float: left; color: #333; width: 475px; margin-right: 10px}
#shows h3 { margin: 2em 0; color: #333; font-weight: bold; font-size: 116%; text-shadow: 0 1px 0 #fff; text-align: center}
#shows .map { width: 100%; height: 360px}
#shows section p { margin: 1em 0; text-shadow: 0 1px 0 #fff; color: #333}
#shows section p strong { font-weight: bold; }

/* index */
#graduates menu { width:970px;margin:2em auto;padding:0;color:#666;text-align:left;font-weight:bold;text-shadow:0 1px 0 #fff;}
#graduates menu ul, #graduates menu li { display: inline}
#graduates menu a, #graduates section a { color: #666; text-decoration: none}
#graduates menu a.current { text-decoration: underline}
#graduates menu a:hover { color: black}
#graduates div { float: left; width: 184px; margin: 0 10px 1.5em 0;}
#graduates section a { font-weight: bold; text-shadow: 0 1px 0 #fff;}
#graduates section a:hover { color: #333}


/* profiles */
#profile h3 { display: block; width: 133px; height: 41px; margin: 2em auto}
#profile h3 a { display: none}
#profile aside { float: left; width: 100%; margin: -4em auto 0 auto; text-align: center}
#profile aside a { font-size: 85%; color: #333; text-decoration: none}
#profile aside a:hover { text-decoration: underline}
#profile aside #website {margin-right: 125px}
#profile aside #email {margin-left: 125px}
#profile article { float: left; margin-bottom: 20px}
#profile article.mid, #profile article.big { clear: both; float: none; margin: 0 auto}
#profile article.mid { width: 573px}
#profile article img, #profile article object { margin: 0 10px 10px 0}
#profile article h4, #profile article p { font-size: 85%; color: #666; line-height: 140%}
#profile article h4 { text-decoration: underline; color: #333}
#profile article p { width: 475px; margin-bottom: 1em}
#profile article p a { text-decoration: none; color: #666}
#profile article p a:hover { color: #333}

/* shop */
#shop section { margin-top: 4em}
#shop article { color: #333; width: 475px; margin: 0 auto}
#shop article h3 { margin: 0; font-weight: bold; text-shadow: 0 1px 0 #fff}
#shop article a, #shop aside a { text-decoration: none; color: #333}
#shop article a:hover, #shop aside a:hover { text-decoration: underline; color: black}
#shop article a.price { font-weight: bold; font-size: 116%; display: block; text-decoration: none; margin: 1em 0; padding: 5px; background: #ccc; color: black; width: 50px; text-align: center; -moz-border-radius: 15px; -webkit-border-radius: 15px}
#shop article a.price:hover {background: #666; color: white}
#shop article .item_name { text-decoration: underline}
#shop aside { margin-top:2em; font-weight: bold; text-shadow: 0 1px 0 #fff; color: #333; text-align: center}

/* footer */
footer { background: url(/assets/logo-footer.gif) no-repeat; margin: 3em auto; padding-top: 3em; font-size: 85%; font-weight: bold; color: #999; text-shadow: 0 1px 0 #fff; width: 970px;}
footer a { color: #999; text-decoration: none}
footer a:hover { color: #666}
footer a.primary { color: #666}
footer a.primary:hover { color: #333}
footer #copyright { width: 378px; margin-top: 1em}
footer #copyright a:hover { color: #666}