/* generic styles */

body {
  background: white;
  color: black;
  font-family: "Lucida Sans", "MS Trebuchet", sans-serif;
}

a {
  color: #0097EB;
  text-decoration: none;
}

a:hover, a:active {
  text-decoration: underline;
}

a img {
  border: 0px none;
}

.clear {
  clear: both;
}

/* wrapper */

#wrapper {
	margin: 0px auto;
	width: 960px;
}

/* header */

#header {
  float: left;
}

#topmenu {
  float: right;
  font-size: 20px;
  font-weight: bold;
	color: #787878;
}

/* breadcrumbs */
#breadcrumbs {
  clear: both;
	margin: 20px 0 0 0;
	padding: 0;
	float: left;
	line-height: 28px;
	font-weight: bold;
	color: #787878;
}

#breadcrumbs p {
	display: inline;
}

#breadcrumbs ul, #breadcrumbs li {
	display: inline;
	margin: 0;
	padding: 0;
	color: black;
}

#breadcrumbs ul li:before {
	content: "\0020 \0020 \0020 \00BB \0020";
	color: #d4d4d4;
}

#breadcrumbs ul li.first:before {
	content: " ";
}

/* search */
#search {
    margin: 20px 0 0 0;
    float: right;
}

/* sharing */
#sharing {
  margin-top: 8px;
}

.socialite-loaded {
  display:block;
  clear: none;
}

.twitter-follow {
  float: left;
}

.twitter-share, .facebook-like {
  float: right;
  margin-left: 8px;
}

/* content */

#content {
    clear: both;
    margin: 40px 0 40px 0;
}

/* info (politician bios, group info) */

#info {
  color: #787878;
  background: #d4d4d4;
  padding: 8px;
  border-radius: 4px;
  -moz-border-radius: 4px;
}

/* statistics */
#statistics {
    clear: both;
    color: #787878;
    font-weight: bold;
    line-height: 24px;
}

#statistics p {
    float: left;
    margin: 16px;
    padding: 8px;
    width: 44%;
    border: 1px solid #787878;
}

#statistics p span {
    color: #F39200;
}

/* main and explanation */
#explanation {
  float: left;
  width: 180px;
  margin: 0 16px 0 0;
  color: #787878;
  font-weight: bold;
  line-height: 24px;
}

#main {
  float: left;
  width: 760px;
}

/* tweets */

.tweet {
  border-bottom: 1px solid #d4d4d4;
  clear: both;
  color: #787878;
  line-height: 24px;
  padding: 16px 0 16px 0;
}

.tweet .verified {
    background: url(../images/verified_small.png) no-repeat top right;
    line-height: 16px;
    padding-right: 20px;
}

.tweet .avatar {
  width: 81px;
  height: 73px;
  float: left;
  display: block;
}

.tweet img {
  height: 73px;
  margin: 0 8px 0 0;
  width: 73px;
}

.tweet .content {
    float: left;
    width: 578px;
}

.tweet .tweet-content {
  float: left;
  min-height: 48px;
  margin-bottom: 8px;
}

.tweet .actions {
  width: 90px;
  float: right;
  margin: 20px 0 0 0;
}

.tweet .action {
  float: none;
  margin-right: 8px;
}

.tweet .actions a {
  display: block;
  float: left;
  margin: 0 0 0 8px;
}

.tweet .action .icon {
  display: block;
  float: left;
  background: url(../images/twitter-icons.png) no-repeat;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

.tweet .action-reply .icon {
  background-position: 0 0;
}

.tweet .action-retweet .icon {
  background-position: -80px 0;
}

.tweet .actions .button {
  text-indent: 0;
  height: 48px;
  width: 104px;
  background: #0097EB;
  color: white;
  text-decoration: none;
  line-height: 48px;
  text-align: center;
  border-radius: 5px;
  -moz-border-radius: 5px;
}

.tweet .actions .button-small {
  text-indent: 0;
  height: 48px;
  width: 48px;
  margin: 0 0 0 4px;
  background: #0097EB;
  color: white;
  text-decoration: none;
  line-height: 48px;
  text-align: center;
  border-radius: 5px;
  -moz-border-radius: 5px;
}

.tweet .real-name, .tweet .real-name a {
  color: #D4D4D4;
}

/* byline */
.byline {
    font-size: 90%;
  clear: both;
  color: #D4D4D4;
  line-height: 24px;
}

.byline a {
  color: #D4D4D4;
}

.byline a.twitter {
	display: block;
	float: left;
	width: 16px;
  height: 16px;
  margin: 4px 8px 0 0;
  text-indent: -999999em;
  background: url(../images/bird_16_gray.png);
}



/* tweet reviews */

.tweet-review textarea {
    width: 100%;
    height: 3em;
}

/* pager */

#pager {
  font-size: 16px;
  margin: 12px 0 12px 0;
  text-align: center;
}

/* footer */

#footer {
  margin: 16px 0 0 0;
}

#footer-menu {
	clear: both;
	font-size: small;
	text-align: center;
	width: 100%;
}

#hdo {
    float: left;
    width: 100%;
    text-align: center;
}

#hdo a {
  background: url(../images/openstate_logo.png);
  display: block;
  height: 100px;
  text-indent: -999999em;
  width: 100px;
  margin: 8px auto;
}

#netdem {
  float: left;
}

#netdem a {
  background: url(../images/netdem.gif);
  display: block;
  height: 108px;
  text-indent: -999999em;
  width: 199px;
}

/* tabs */
/* See http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support */
#tabs {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:1px solid #d4d4d4;
   overflow:hidden;
   position:relative;
}

#tabs ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}

#tabs ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}

#tabs ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#d4d4d4;
   color:#787878;
   text-decoration:none;
   line-height:1.3em;
}

#tabs ul li a:hover {
   background:#0097EB;
   color:#fff;
}

#tabs ul li a.active,
#tabs ul li a.active:hover {
   color:#fff;
   background:#0097EB;
}

.tab-contents {
  clear: both;
  display: none;
}

/* graphs */

.graph {
    width: 600px;
    height: 400px;
}

/* flash messages */

#notice {
  color: #666666;
  clear:both;
  margin:20px 0 20px 0;
  padding:10px;
  background:none repeat scroll 0 0 #EBFFEE;
  border:1px solid #BBE6B0;
}

#alert, #error_explanation, #errorExplanation {
  color: #666666;
  clear:both;
  margin:20px 0 20px 0;
  padding:10px;
  background: none repeat scroll 0 0 #ffdada;
  border: 1px solid #eb0000;
}

#warn {
  color: #666666;
  clear:both;
  margin:20px 0 20px 0;
  padding:10px;
  background: none repeat scroll 0 0 #F0E68C;
  border: 1px solid #ffd700;
}

.flash {
  color: #666666;
  clear:both;
  margin:20px 0 20px 0;
  padding:10px;
}

.info {
  background:none repeat scroll 0 0 #EBFFEE;
  border:1px solid #BBE6B0;
}

.error {
  background: none repeat scroll 0 0 #ffdada;
  border: 1px solid #eb0000;
}

/* form stuff */

form .explanation {
	color: #D4D4D4;
	margin: 0px 0px 8px 0px;
	width: 300px;
}

table.listing {
  color: #666666;
}

/* table stuff */

/* courtesy of Blueprin CSS http://blueprintcss.org/ */

/* Tables
-------------------------------------------------------------- */

/*
  Because of the need for padding on TH and TD, the vertical rhythm
  on table cells has to be 27px, instead of the standard 18px or 36px
  of other elements.
 */
table         { margin-bottom: 1.4em; width:100%; }
th            { font-weight: bold; }
thead th      { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
/*
  You can zebra-stripe your tables in outdated browsers by adding
  the class "even" to every other table row.
 */
tbody tr:nth-child(even) td,
tbody tr.even td  {
  background: #e5ecf9;
}
tfoot       { font-style: italic; }
caption     { background: #eee; }

/* form stuff */

/* courtesy of Blueprin CSS http://blueprintcss.org/ */

/*
  A special hack is included for IE8 since it does not apply padding
  correctly on fieldsets
 */
label    { font-weight: bold; }
fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend   { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }

fieldset, #IE8#HACK { padding-top:1.4em; }
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }

/* Form fields
-------------------------------------------------------------- */

/*
  Attribute selectors are used to differentiate the different types
  of input elements, but to support old browsers, you will have to
  add classes for each one. ".title" simply creates a large text
  field, this is purely for looks.
 */
input[type=text], input[type=password], input[type=url], input[type=email],
input.text, input.title,
textarea {
  background-color:#fff;
  border:1px solid #bbb;
  color:#000;
}
input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=email]:focus,
input.text:focus, input.title:focus,
textarea:focus {
  border-color:#666;
}
select { background-color:#fff; border-width:1px; border-style:solid; }

input[type=text], input[type=password], input[type=url], input[type=email],
input.text, input.title,
textarea, select {
  margin:0.5em 0;
}

input.text,
input.title { width: 300px; padding:5px; }
input.title { font-size:1.5em; }
textarea    { width: 390px; height: 250px; padding:5px; }

/*
  This is to be used on forms where a variety of elements are
  placed side-by-side. Use the p tag to denote a line.
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* responsive shit */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  #search {
    clear: both;
    float: left;
  }

  .twitter-follow {
    float: left;
    margin: 0 8px 0 0;
  }

  .twitter-share {
    float: left;
    margin: 0 8px 0 0;
  }

  .facebook-like {
    float: left;
    margin: 0 8px 0 0;
  }

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  #wrapper {
    width: 752px;
  }

  #main {
    width: 552px;
  }

  .tweet .content {
    width: 370px;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  #wrapper {
    width: 464px;
  }

  #main {
    float: none;
    width: auto;
  }

  .tweet .content {
    width: 280px;
  }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  #wrapper {
    width: 304px;
  }

  #main {
    float: none;
    width: auto;
  }

  #explanation {
    width: 100%;
  }

  .twitter-follow {
    float: none;
  }

  .tweet .content {
    width: 304px;
  }

  .tweet .actions {
    width: 200px;
  }

  .tweet .action {
    float: left;
  }

  .header a {
    width: 355px;
  }
}