/*------------------------------------*\
	RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ 
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{ 
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}





/*------------------------------------*\
	MAIN
\*------------------------------------*/
body{
	font-family:Calibri, sans-serif;
	width:940px;
	padding:10px;
	margin:0 auto;
	line-height:1.5;
	background:#fff;
	color:#666;
}
#content,
#sidebar{
	margin-bottom:50px;
}
#content{
	float:right;
	width:580px;
}
#sidebar{
	width:260px;
	padding:10px;
	margin-right:80px;
	float:left;
	background:#f0f0f0;
}
#footer{
	clear:both;
	padding-left:360px;
}





/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav{
	font-size:1.5em;
	list-style:none;
}
#nav a{
	color:#feb50c;
	text-decoration:none;
	display:block;
	padding:0 10px;
	line-height:40px; /* Hard-coding a magic number is not the best solution, but it's the only one I can think of... it's the key to everything working */
	margin:0 0 10px 0;
	border:1px solid transparent;
	border-width:1px 0 1px 1px;
}
#nav .current a,
#nav a:hover,
.all #nav .nav-all a,
.yours  #nav .nav-yours a,
.teams #nav .nav-teams a{ /* This list of selectors looks massively verbose but it allows you to target with either html classes and the cascade OR explicitly with class="current". Try changing to html class to class="yours" with Firebug */
	border:1px solid #dca832;
	border-width:1px 0 1px 1px;
	color:#fff;
	background:#feb50c;
	margin:0 -10px 10px -19px; /* 19px + 1px border-left = 20px */
	padding-left:29px; /* 29px + 1px border-left + -19px margin-left = 29px */
	position:relative;
	
	-moz-box-shadow:0 0 5px rgba(0,0,0,0.25);
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.25);
	box-shadow:0 0 5px rgba(0,0,0,0.25);
}
#nav .current a:before,
#nav a:hover:before,
.all #nav .nav-all a:before,
.yours #nav .nav-yours a:before,
.teams #nav .nav-teams a:before,
#nav .current a:after,
#nav a:hover:after,
.all #nav .nav-all a:after,
.yours #nav .nav-yours a:after,
.teams #nav .nav-teams a:after{
	content:"";
	position:absolute;
	display:block;
}
#nav .current a:before,
#nav a:hover:before,
.all #nav .nav-all a:before,
.yours #nav .nav-yours a:before,
.teams #nav .nav-teams a:before{
	border:5px solid #bb8301;
	border-color:#bb8301 #bb8301 transparent transparent;
	left:-1px; /* Minus 1px to line up with the border-left */
	top:100%; /* Move it all the way over from the top/to the bottom */
}
#nav .current a:after,
#nav a:hover:after,
.all #nav .nav-all a:after,
.yours #nav .nav-yours a:after,
.teams #nav .nav-teams a:after{
	border:21px solid #feb50c; /* (21 * 2) = (40px line-height + 1px border-top + 1px border-bottom) */
	border-color:transparent transparent transparent #feb50c;
	left:100%; /* Move it all the way over from the left/to the right */
	top:50%; /* Move it all half-way down... */
	margin-top:-21px; /* ...and pull it back up into place */
}





/*------------------------------------*\
	TYPE
\*------------------------------------*/
h1,h2{
	font-size:2em;
	font-weight:bold;
	margin-bottom:20px;
}
h2{
	font-size:1.5em;
}
p{
	margin-bottom:25px;
}
p a{
	color:#c00;
	text-decoration:none;
	font-weight:bold;
}
p a:hover{
	text-decoration:underline;
}