/* Overwriting default Grader styles */

.ranking {
background:none repeat scroll 0 0 #DDDDDD;
float:right;
display:block;
padding:0 5px;
-moz-border-radius:3ex 3ex 3ex 3ex;
}


#header a#logo {
	height: 64px;
	padding: 10px 0;
}

.tertiary #masthead{
	margin-bottom: 20px;
}

#masthead p {
	font-size: 1.3em;
}

#account #grader_links{
	text-align: center;
	font-size: 1.1em;
	padding: 0 10px; 
	line-height: 42px;
}

#account #grader_links a{
	color: #fff;
}

#account #grader_links a:hover{
	color: #f2b460;
}

/* Call to action area */
#call_to_action {
	background: #495865 url('../images/search_background.png');
	height: 142px;
}

#call_to_action p{
	text-align: center;
	font-size: .7em;
}

#call_to_action #call_to_action_button{
	margin: 0 auto; 
	width: 297px;
	display: block;
	padding-top: 25px;
}

/* Main */
#top_users{
	float: left;
	width: 420px;
	padding-right: 59px;
	height: 340px;
	border-right: 1px solid #5b6a77;
	margin-top: 10px;
}

#top_badges{
	float: left;
	width: 420px;
	padding-left: 59px;
	height: 340px;
	border-left: 1px solid #38444e;
	margin-top: 10px;
}

#main h2{ 
	color: #f2b460;
}

/* Users & Badges */
#main ul.users, #main ul.users li, #main ul.badges, #main ul.badges li{
	list-style-type: none;
	margin: 0; 
	padding: 0;
}

#main ul.users, #main ul.badges{
	overflow: hidden; 
}

#main ul.users li, #main ul.badges li, .badge{
	float: left;
	text-align: center;
	font-size: .85em;
	margin: 28px;
	position: relative;
}

ul.users img{
	display: block;
	margin-bottom: 12px;
	border: 3px solid #fff;
}

ul.badges img, .badge img{
	display: block;
	margin: 12px 12px 12px;
}

ul.badges a, ul.users a{
	color: #fff;
}

ul.badges a:hover, ul.users a:hover{
	text-decoration: underline;
}

.grade_badge{
	position: absolute;
	right: -23px;
	top: 10px;
	font-weight: bold; 
	background: url('../grade_background.png') no-repeat scroll top left;
	width: 46px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: .8em;
	color: #fff;
}

ul.badges .grade_badge, .badge .grade_badge{
	right: -12px;
	top: 12px;
}

a.more_button{
	display: block;
	margin-top: 20px;
	float: right;
	text-transform: uppercase;
	background: url('http:../images/more_button.png') no-repeat scroll top left;
	width: 155px;
	height: 35px;
	padding: 0 20px 0 10px;
	line-height: 35px;
	color: #fff;
	font-size: .8em;
	text-align: center;
}

a.more_button:hover{
	color: #f8dba2;
}

/* Report page */
.report #masthead p{
	color: #fff;
}

.report #masthead span{ 
	display: block;
	font-size: .8em;
	padding-top: .2em;
}

.report #main{
	padding-top: 0;
	/* color: #666; */

}

.report #main p{
	font-size: .9em;
}

#grade_summary{
	font-size: 1.4em; 
	background: #ececec;
	color: #666;
	padding: 10px;
}

#grade_summary a{
	font-size: .55em;
	text-decoration: underline;
	color: #e45e13;
}

#grade_summary a:hover{
	color: #3671c6;
}

.report #main h2{
	clear: both;
	color: #e56f27;
	font-weight: normal;
	border-bottom: 1px dashed #aaa;
	padding-bottom: 10px;
	font-size: 1.25em;
	margin-bottom: 15px;
	margin-top: 20px;
}

/* Individual Report Elements */
#account_summary{ 
	position: relative;
	min-height: 130px;
}

#account_summary h4{ 
	margin-bottom: .2em;
	padding-top: 8px;
	font-size: 1em;
}

#main #account_summary p{
	font-size: .9em;
	line-height: 1.2em; 
}

#account_summary img{
	float: left; margin: 0 20px; 
}

#grade_badge{
	position: absolute;
	color: #586671;
	top: -4px;
	right: 0px;
	background: url('../images/grade_badge.png') no-repeat scroll top left;
	width: 120px;
	height: 98px;
}

#grade_badge .number{
	font-size: 2.5em;
	height: 61px;
	text-align: center;
	line-height: 61px;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(255,255,255,.8);	
}

#grade_badge .title{
	text-align: center;
	color: #fff;
	font-size: .75em;
	height: 22px;
	line-height: 22px;
	text-shadow: 0 -1px 0 rgba(0,0,0,.4);	
}

#your_badges ul.badges li, #suggested_next_badge div.badge{
	width: 292px;
	margin: 28px 14px 0;
}

#your_badges ul.badges li img, #suggested_next_badge div.badge img{
	float: left;
	margin-top: 0;
}

#your_badges ul.badges .grade_badge, #suggested_next_badge div.badge .grade_badge{
	left: -2px;
	top: -4px;
}

#your_badges h4, #suggested_next_badge div.badge h4{
	color: #586671;
	margin-bottom: .2em;
	padding-top: 2px;
}

#your_badges li p, #suggested_next_badge div.badge p{
	font-size: .9em;
	margin-bottom: 0;
}

#suggested_next_badge{
	overflow: hidden;
}

#suggested_next_badge ul.users{
	float: right;
	font-weight: bold;
	color: #999;
} 

#suggested_next_badge ul.users li{
	margin: 14px 28px;
}

#suggested_next_badge h3{
	color: #e56f27;
	font-weight: normal;
	float: right;
	font-size: 1em;
	margin-bottom: 0;
	width: 400px;
}

#main .gray_button{
	float: left;
	text-transform: uppercase;
	color: #7a7a7a;
	text-align: center;
	line-height: 28px;
	background: url('../images/gray_button.png') no-repeat scroll top left;
	width: 122px;
	height: 28px;
	font-size: .8em;
}

#main .gray_button:hover{
	color: #3671c6;
}

#suggested_next_badge .gray_button{
	clear: left; 
	margin-left: 92px;
}

#suggested_next_badge div.badge{
	margin-bottom: 0;
}

#suggested_next_badge div.badge img{
	margin-bottom: 8px;
}

#mayorship table{
	width: 100%;
	font-size: .85em;
}

#mayorship td{
	padding: 8px;
}

#mayorship .odd td{
	background: #eee;
}

#friends ul.users{
	font-weight: bold;
	color: #999;
}

#friends ul.users li{
	margin: 28px 0px;
	width: 192px;
	text-align: center;
}

#friends ul.users a{
	display: block;
	color: #7a7a7a;
	text-align: center;
	text-decoration: underline;
	margin-top: 4px;
	font-weight: 300;
}

#friends ul.users img{
	margin-left: auto;
	margin-right: auto;
}

#friends ul.users a:hover{
	color: #3671c6;
}

#tweet_this{
	text-indent: -999em;
	display: block;
	background: url('../images/tweet_this.png') no-repeat scroll top left;
	width: 104px;
	height: 30px;
	position: absolute;
	right: 8px;
	top: 100px;
}

/* Alerts */
.message{
	margin-bottom: 10px;
	padding: 10px 10px 10px 36px;
	border: 1px solid #ccc;
	background: no-repeat 10px 10px;
	font-size: .8em;
	font-weight: bold;
}

#main .message h4{
	margin-bottom: 0;
	line-height: 16px;
}

#main .message p{
	margin-bottom: 0;
	margin-top: .5em; 
}

.warning{ 
	border-color: #f49717;
	background-color: #fff9e5;
	background-image: url(../images/icons/warning.png);
}

.warning h4{
	color: #f49717;
}

.info{ 
	border-color: #1463b5;
	background-color: #e6f2ff;
	background-image: url(../images/icons/info.png);
}

.info h4{
	color: #1463b5;
}

.okay{ 
	border-color: #598400;
	background-color: #f5ffe5;
	background-image: url(../images/icons/okay.png);
}

.okay h4{
	color: #598400;
}

.error{ 
	border-color: #c32500;
	background-color: #ffebe5;
	background-image: url(../images/icons/error.png);	
}

.error h4{
	color: #c32500;
}

/* Top Users */
#top_users_list table{
	width: 80%; 
	margin: 0 10%;
}

#top_users_list tr.odd td{
	background: #eee;
}

#top_users_list td{
	padding: 5px;
	vertical-align: middle;
}

#top_users_list td.rank{
	font-size: 1.8em; 
	color: #7d7d7d;
	width: 3em;
	text-align: center;
}

#top_users_list td.avatar{
	width: 80px;
}

#top_users_list td.avatar img{
	display: block;
}

#top_users_list td.personal h4{
	margin-bottom: .5em;
}

#top_users_list td.personal span{
	display: block;
	font-size: .8em;
}

#top_users_list td.location{
	font-size: .9em;
	font-style: italic;
}

#top_users_list td.grade .number{
	text-align: center;
	font-size: 1.6em;
	font-weight: bold;
	color: #586671;
}

#top_users_list td.grade .title{
	text-align: center;
	font-size: .8em;
	color: #7d7d7d;
}