a {text-decoration:none;}
a:link {color:#009999;}
a:visited {color:#009999;}
a:hover {color:#000000;}
a:active {color:#990000;}

#wrapper {
	max-width: 1200px;
	width: 98%;
	margin: 0 auto;
	}
#header, #footer, #main {width: 100%;} 

#pic, #boxes {
	float: right;
	max-width: 45%;
	}
#content, #songlist, #card {
	font-family: Georgia, serif;
	}

#content {
	float: left;
	max-width: 45%;
	padding: 3%;
	padding-top: 3%;
	padding-bottom: 5%;
	text-align: justify;
	font-size: 99%;
	border: dotted black 3px;
	background: white;
	line-height: 150%;
	}
#content a:hover {
	color: #00bbbb;
	text-decoration: underline;
	}
#songlist {
	max-width: 50%;
	padding: 3%;
	text-align: justify;
	line-height: 150%;
	}
#card {
	max-width: 40%;
	padding: 3%;
	padding-top: 4%;
	padding-bottom: 5%;
	text-align: center;
	font-size: 110%;
	color: #888888;
	border: dotted black 3px;
	background: white;
	line-height: 150%;
	}
#card img {max-width: 90%;}
#footer {
	clear: both;
	font-family: helvetica, sans-serif;
	font-size: 50%;
	font-weight:200;
	}
img.box { 
	max-width:99.5%;
	border: solid black 1px;
	}
img.title { 
	min-width: 120px;
	max-width: 70%;
	}
img.big {max-width: 100%;}
lt-ie9 lt-ie8 lt-ie7 img.small { max-width: 35%; }
img.small {max-width: 40%;}
img.rubric {max-width: 30%; padding-top: 13px; padding-bottom: 18px; }

.drop {
	float:left;
	width:.75em;
	font-size:520%;
	font-family:times, serif;
	line-height:80%;
	}
.blurb {
	color: #888888;	
	}

/*------------------------------------*\
	NAV
\*------------------------------------*/

#nav {
	list-style:none;
	margin-bottom:10px;
	/* Clear floats */
	float:left;
	width:100%;
	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
	}
#nav li {
	display:inline-block;
	margin:4px;
	position:relative;
	}
#nav a {
	font-family: helvetica, sans-serif;
	font-size: 90%;
	font-weight: 400;
	letter-spacing:.3em;
	color: #888888;
	text-transform:uppercase;
	}
#nav a:hover {
	color:#000000;
	}
#nav img {
	width: 250px;
	padding: 4px;
	}

/*--- DROPDOWN ---*/

#nav ul {
	background:#fffff9; /* Adding a background makes the dropdown work properly in IE7+. Make this match the page's background. */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	}
#nav ul li {float:none;}
#nav {
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
	padding-left:0px;
	}
#nav li:hover ul { /* Display the dropdown on hover */
	left:-100; /* Bring back on-screen when needed */
	}
#nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#fffff9;
	text-decoration:none;
	}
#nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
	}
#nav li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#f9f9f3;
	}

@media handheld, only screen and (max-width: 700px) {

#pic, #boxes, #content, #songlist, #nav, #card, #menu {
	float: none;
	clear: both;
	max-width: 99%;
	display: block;
	}
img.small, img.big {max-width: 100%;}
}