/****************************************************** css reset ******************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus { outline: 0; }
body { 
  line-height: 1; 
  color: black; 
  background: white; 
  font-family: Helvetica, Arial, Sans-serif;
}
ul { list-style: none; }
/****************************************************** reused classes ******************************************************/
.left{ float:left; }
.right{ float:right; }
.clear{ clear: both; }
/****************************************************** main structure ******************************************************/

#header {
  width: 960px;
  height: 2.5em;
  margin: 10px auto;
  padding-left: 10px;
  padding-bottom: 10px;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active{
  padding-right: 10px;
  font-size: 2.5em;
  border-right: 4px solid black;
  float: left;
  color: black;
  text-decoration: none;
}
#mainNav {float: left; padding-left: 10px; height: 2.5em; line-height: 2.5em;}
#mainNav ul {}
#mainNav ul li{ display: inline; padding-right: 10px;}
#mainNav ul li a:link, #mainNav ul li a:visited {color: black; text-decoration: none;}
#mainNav ul li a:hover, #mainNav ul li a:active {text-decoration: underline;}

#mainNav ul li a.notReady {text-decoration: line-through;}

#explanationContainer {
  margin: 0 auto;
  width: 960px;
  padding-left: 10px;
}

#explanation {
  width: 925px;
  padding: 10px 10px 10px 0px;
  clear: both;
  background: #ddd;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#explanation p {
  margin-left: 10px;
  margin-top: 3px;
  font-size: 0.7em;
}
#legend {
  width: 960px;
  margin: 0 auto;
  padding-left: 10px;
  padding-top: 20px;
  list-style: none;
}
#legend li {
  display: inline;
  margin-left: 12px;
}
#legend li div.smallBox {
  height: 15px;
  width: 15px;
  float: left;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

#legend li p {
  float: left;
  padding-right: 15px;
  padding-left: 5px;
}
#legend li p a:link, #legend li p a:visited {
  color: black;
  text-decoration: none;
}
#legend li p a:hover, #legend li p a:active {
  text-decoration: underline;
}

.wrap {
  width: 960px;
  padding: 10px;
  overflow: auto; /* clearing floats */
  margin: 0 auto;
}
.box {
  width: 158px;
  margin: 4px;
  padding: 10px;
  float: left;
  background: #777370;
  color: #000;
  display: inline;  /* IE6 fix */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.box span {
  font-family: Georgia, Serif; 
  font-size: 1.4em; 
  padding-right: 10px;
}
.box h3 {text-transform: uppercase; padding-top: 3px; padding-bottom: 3px;}
.box a:link, .box a:visited { color: white; text-decoration: none; }
.box a:hover, .box a:active { text-decoration: underline;}

.orange {background: orange; border: 1px solid orange;}
.orangeRed {background: orangered; border: 1px solid orangered;}
.khaki {background: khaki; border: 1px solid khaki;}
.oliveDrab {background: oliveDrab; border: 1px solid oliveDrab;}

.flickr {background: #FF0084; border: 1px solid #FF0084;}
.digg {background: #7AA13D; border: 1px solid #7AA13D;}
.twitter {background: #33ccff; border: 1px solid #33ccff;}
.goodold {background: #93DA06; border: 1px solid #93DA06;}
.q7 {background: white; border: 1px solid black;}
.xiik {background: #006598; border: 1px solid #006598;}
.delicious {background: #3274D0; border: 1px solid #3274D0;}
.lastfm {background: #D51007; border: 1px solid #D51007;}
.brightkite {background: #b7d72a; border: 1px solid #b7d72a;}
.facebook {background: #203360; border: 1px solid #203360; color: #aaa;}
.youtube {background: #ff3333; border: 1px solid #ff3333;}
.foursquare {background: #45A5C9; border: 1px solid #45A5C9;}