/* COLORS 
 *
 * Dark green: 	#92C7A8;
 * Light green: 	#C0DFCB;
 * Lime green:	#C3E76F;
 * Dark blue (a):	#4D869F;
 *
 */

html { color: #444; font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; font-size: 12pt; height: 100%; }
body { background: #fff; height: 100%; margin: 0; min-height: 100%; padding: 0; width: 100%; }

a { border-bottom: 1px solid #5D93AB; color: #4D869F; text-decoration: none; }
a:hover { border-bottom: 1px solid #6DA1C3; color: #5D93AB; }

blockquote { border-left: 5px solid #eee; margin-left: 20px; padding-left: 10px; }

h1 { border-bottom: 1px solid #ccc; font-size: 36px; font-weight: normal; margin: 0 auto; padding: 0 0 17px 0; text-shadow: 1px 1px 1px #ccc; width: 400px; }
h2 { border-bottom: 1px solid #ddd; color: #49835C; float: left; font-size: 12pt; font-weight: bold; margin: 0 0 10px 0; padding: 2px 0; }
h3 { border-bottom: 1px solid #ccc; clear: both; color: #49835C; font-size: 12pt; font-weight: bold; margin: 0; padding: 0 0 5px; width: 100%; }
h4 { font-size: 11pt; font-weight: bold; margin: 20px 0; } 

.clear { clear: both; }

.alert { border: 1px solid #F3EE9F; background: #ffc; font-size: 11pt; line-height: 1.5em; margin: 0 0 10px 0; padding: 8px 10px; }
.margin20 { margin-bottom: 20px; }

#wrapper {
	background: #e7e7e7;
	height: 100%;
	margin: 0 10px;
	padding: 0;
	}

#inner {
	background: #fff;
	padding-bottom: 20px;
	width: 100%;
	}

#nav {
	background: #444;
	margin: 0 0 5px;
	text-align: center;
	padding: 5px 8px;
	border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px;
	border-radius-bottomright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px;
	box-shadow: 2px 2px 6px #ccc; -moz-box-shadow: 2px 2px 6px #ccc; -webkit-box-shadow: 2px 2px 6px #ccc;
	}

	#nav .center { color: #fff; margin: 0 auto; position: relative; text-align: center; }
	#nav .center span { border-right: 1px solid #f3f3f3; padding: 0 15px; }
	#nav .center span.last-child { border-right: none; }
	#nav .center a { border-bottom: none; color: #f1f1f1; padding: 0; margin: 0; }
	#nav .center a:hover { border-bottom: 1px solid #fff; color: #fff; }

#footer {
	background: #e7e7e7 url(../../images/gray_topleft.png) top left no-repeat;
	margin: 0;
	padding: 0 0 0 20px;
	}

#footer_inner {
	background: #e7e7e7 url(../../images/gray_topright.png) top right no-repeat;
	margin: 0;
	padding: 20px 20px 20px 0;
	}

.footer-wide {
	float: left;
	font-size: 11pt;
	margin-right: 3%;
	padding: 0;
	width: 40%;
	}

	.footer-wide ol, .footer-narrow ol { color: #999; list-style-type: lower-roman; margin: 15px 0 0; padding: 0 0 0 30px; }
	.footer-wide li, .footer-narrow li { line-height: 1.5em; margin: 0; padding: 0 0 10px 5px; }
	.footer-wide span, .footer-narrow span { color: #717171; }

.footer-narrow {
	color: #777;
	float: left;
	font-size: 11pt;
	margin-right: 3%;
	width: 27%;
	}

	.footer-narrow .image { 
		background: url(../../images/footer_avatar.jpg) 50% 50% no-repeat; 
		opacity:0.7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);
		border: 1px solid #bbb; float: left; height: 60px; margin: 3px 10px 0 0; padding: 2px; width: 60px; 
		}
	.footer-narrow .image:hover { opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); }
	.footer-about { line-height: 1.6em; margin: 10px 0 0; }
	.footer-about p { margin: 0; padding: 0 0 10px 0; }

.nomargin { margin-right: 0 !important; }


/********** INDEX **********/

#divider {
	background: url(../../images/divider.png) bottom center no-repeat;
	height: 438px;
	margin: 0 auto;
	padding: 0;
	width: 960px;
	}

#introducing {
	background: url(../../images/ag-grademate.png) 15px 34px no-repeat;
	border-bottom: 1px solid #ccc;
	height: 350px;
	margin: 0;
	padding: 50px 10px 0 420px;
	text-align: left;
	width: 530px;
	}

	#introducing h1 {
		width: auto;
		}

	#introducing h2 {
		border: none;
		float: none;
		font-size: 24px;
		font-weight: normal;
		margin: 25px 0 0;
		padding-bottom: 0;
		}

	#introducing p {
		font-size: 18px;
		line-height: 1.6em;
		}

#index {
	margin: 0 auto;
	padding: 75px 0 125px;
	text-align: center;
	width: 500px;
	}

#hi {
	background: #D5EBDC;
	border: 1px solid #C0DFCB;
	line-height: 2em;
	margin: 25px auto 0;
	padding: 15px;
	width: 85%;
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	box-shadow: 2px 2px 6px #ddd; -moz-box-shadow: 2px 2px 6px #ddd; -webkit-box-shadow: 2px 2px 6px #ddd;
	}

	#hi:hover { background: #DCEFE2; }

#go {
	float: left;
	left: 50%;
	margin: 15px 0 0;
	position: relative;
	}

	#go ul { left: -50%; list-style: none; padding: 0; position: relative; }
	#go li { border-right: 1px solid #ccc; float: left; padding: 0 15px 5px 15px; position: relative; }
	#go li:last-child { border-right: none; }


/********** ABOUT **********/

#about, #live, #posts {
	background: #fff;
	margin: 0 auto;
	min-width: 800px;
	padding: 10px 15px;
	width: 90%;
	}

#top {
	border-bottom: 1px solid #ccc;
	font-size: 24pt;
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
	text-transform: uppercase;
	}

	#top a { border: none; color: #4D869F; text-shadow: 1px 1px 1px #ccc; }
	#top .brief { display: block; font-size: 14pt; float: right; padding: 12px 0 0; }

#content {
	clear: both;
	margin: 0;
	padding: 0;
	width: 100%;
	}

#left {
	margin: 0;
	padding: 0 430px 0 0;
	}

	#left h2 { border: none; float: none; height: 20px; padding-top: 15px; }
	#left h2.first { padding-top: 0; }
	#left h2 span { border-bottom: 1px solid #ddd; display: block; float: left; padding-bottom: 2px; }
	#left b { display: block; float: left; font-weight: normal; padding: 4px 0 0 10px; }
	#left p { line-height: 1.5em; margin: 0 0 15px; padding: 0; }

#right {
	float: right;
	width: 400px;
	}

	#right .me { border: 1px solid #92C7A8; line-height: 1em; margin-bottom: 10px; padding: 5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
	#right .me img { display: block; padding: 0; }

	#right .element { clear: both; line-height: 1.5em; margin: 0 0 15px; }
	#right .baseball { background: url(../../images/baseball.png) 1px 5px no-repeat; padding: 0 0 0 25px; }
	#right .design { background: url(../../images/design.png) 1px 5px no-repeat; padding: 0 0 0 25px; }
	#right .grademate { background: url(../../images/grademate.png) 1px 5px no-repeat; padding: 0 0 0 25px; }
	#right .school { background: url(../../images/pdf.png) 1px 5px no-repeat; padding: 0 0 0 25px; }
	#right .school span { font-variant: small-caps; }
	#right .bubble { background: #f1f1f1; border: 1px solid #ccc; line-height: 1.6em; padding: 10px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

	#right ul { padding: 0 0 0 25px; }
	#right li { line-height: 1.5em; margin: 0 0 10px; padding: 0 0 0 5px; }
	#right li span { color: #777; font-size: 10pt; }

/********** POSTS **********/

#posts-left { float: left; }
.post-item { clear: left; float: left; }
.post-item h3 { border: none; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }
.post-item span { color: #888; display: block; font-size: 11pt; font-style: italic; padding: 5px 0 10px; }
.post-page span { padding-top: 0; }
.post-body { padding: 0 0 15px; }
#left .post-body p { padding: 0; }

#disqus_thread h3 { color: #444; font-size: 11pt; margin-bottom: 1em; padding-bottom: 5px; }
#disqus_thread #dsq-comments-title h3 { padding-top: 10px; margin-bottom: 10px; }
#disqus_thread #dsq-pagination { display: none; }
a.dsq-brlink { display: none; }
#disqus_thread div.dsq-dc-logo { display: none; }
#disqus_thread div.dsq-sharing-options { display: none; }

#date-pick-links { font-size: 9pt; margin: 25px 0 15px; text-align: left; }
.date-pick-text { color: #777; float: left; padding: 2px 5px 0 0; }
.date-pick-select { float: left; padding: 0 5px 0 0; }
.date-pick-select select { width: 120px; }
.date-pick-submit input { background: #e7e7e7; border: 1px solid #ccc; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #4D869F; font-family: Georgia, "Times New Roman", serif; font-size: 9pt; padding: 0; width: 85px; }

/********** LIVE **********/

#live-nav {
	clear: both;
	margin: 0;
	padding: 0;
	width: 100%;
	}

	#live-nav span { display: block; float: right; position: relative; margin: 5px 5px 0 0; }
	#live-nav span a, #live-nav span img { border: none; }

	#live-nav ul { border-bottom: 1px solid #ccc; height: 29px; list-style-type: none; padding: 0 0 0 20px; }
	#live-nav li { 
		background: #e7e7e7; border: 1px solid #ccc; color: #888; float: left; padding: 5px 15px; margin: 0 5px 0 0;
		border-radius-topleft: 7px; -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px;
		border-radius-topright: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px;
		}
	#live-nav li:hover { background: #f1f1f1; }
	#live-nav li.on { background: #fff; border-bottom: 1px solid #fff; }
	#live-nav li.on:hover { background: #fff; }
	#live-nav li.on a { border: none; color: #444; }

#live-content {
	clear: both;
	margin: 0;
	padding: 0;
	width: 100%;
	}

#live-left {
	font-size: 11pt;
	margin: 0;
	padding: 0 420px 0 0;
	}

	.node { background: #fff; line-height: 1.6em; margin: 0 0 12px 0; padding: 0 0 0 25px; }
	.node em { color: #888; }
	.node span { display: block; font-size: 10pt; text-indent: -12px; padding: 2px 0 3px 11px; }
	.node p { margin: 0 0 10px; }
	.thought { background: url(../../images/comment.gif) 3px 3px no-repeat; }
	.music { background: url(../../images/music.png) 4px 2px no-repeat; }
	.bookmark { background: url(../../images/bookmark.gif) 2px 3px no-repeat; }
	.bookmark-on { background: url(../../images/bullet_white.png) 2px 2px no-repeat; }
	.post { background: #ffc url(../../images/comment.gif) 3px 6px no-repeat; border: 1px solid #F3EE9F; padding: 5px 5px 5px 25px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }

	.artist-div { float: left; margin: 0 10px 0; width: 126px; }
	.top-artist { border: 1px solid #ccc; height: 100px; padding: 4px; width: 126px; }
	.artist-div span { display: block; font-size: 8pt; height: 25px; text-align: center; width: 126px; }

	.endweek { border-bottom: 1px solid #ccc; clear: both; margin: 25px 0 0; text-align: center; width: 100%; }
	.endweek span { background: #fff; display: block; width: 170px; margin: 0 auto -12px; padding: 4px; }

#live-right {
	float: right;
	width: 400px;
	}

	#search { padding: 0 0 15px 0; }
	#search form { margin: 0; padding: 0; }
	#search form input.text { 
		border: 1px solid #ccc; font-family: Georgia, "Times New Roman", serif; font-size: 12pt; padding: 5px 2px; width: 315px; 
		-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding;
		background:transparent url(../../images/input.png) no-repeat scroll 0 0;
		}
	#search form input.submit { background: #e7e7e7; border: 1px solid #ccc; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #4D869F; font-family: Georgia, "Times New Roman", serif; font-size: 12pt; padding: 4px 2px; width: 75px; }
	#search form input.submit:hover { background: #f1f1f1; }

	.graph { margin: 10px 0 20px; padding: 0; position: relative; width: 400px; }
	.graph .bar { 
		background: #D5EBDC; color: #444; display: block; font-size: 9pt; font-weight: normal; height: 18px; margin: 6px 0; padding: 2px 0 0; position: relative; 
		border: 1px solid #fff; 
		border-radius-bottomright: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px;
		border-radius-topright: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px;
		border-radius-topleft: 4px; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px;
		border-radius-bottomleft: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px;
		box-shadow: 1px 1px 2px #ccc; -moz-box-shadow: 1px 1px 2px #ccc; -webkit-box-shadow: 1px 1px 2px #ccc;
		}
	.graph .row2, .graph .row3 { opacity: .95; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; filter: alpha(opacity=95); }
	.graph .row4, .graph .row5 { opacity: .90; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); }
	.graph .row6, .graph .row7 { opacity: .85; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); }
	.graph .row8, .graph .row9 { opacity: .80; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); }
	.graph .row10 { opacity: .75; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); }

	.graph .bar span { position: absolute; left: 5px; width: 400px; } /* This extra markup is necessary because IE doesn't want to follow the rules for overflow: visible */
	.graph .bar a { border: none; color: #444; }
	.graph .bar a:hover { border-bottom: 1px solid #444; }

	#vert { font-family: arial, verdana, helvetica, 'sans-serif'; font-size: 7pt; height: 50px; margin: 15px 0 20px 0; padding: 15px 0 0; width: 400px; }
	#vert div.align { position: relative; margin: 50px 0 0; }
	#vert em { display: block; margin: -60px 0 0; position: absolute; width: 100px; }
	#vert span { background: #61C250; bottom: 0; display: block; float: left; margin: 0 0 15px; padding: 0; position: absolute; width: 13px; }
	#vert b { bottom: 0; color: #49835C; display: block; font-weight: normal; margin: 0 0 -15px 0; padding: 0; position: absolute; } 
	#vert i { color: #333; font-style: normal; }

	#photos { clear: both; margin: 0; padding: 10px 0 0 8px; }
	#photos a { border: none; }
	#photos img { border: 1px solid #bbb; padding: 4px; margin: 0 10px 10px 0; }
	#photos img:hover { border: 1px solid #ccc; }