/* Reset */
.post table td, .post table th {
    text-align: initial;
    }

/* CSS for custom MySQL table output */
/*----------------------------------------
   Legislators Detail, Bill Detail
----------------------------------------*/
#cvnm-legislator,
#cvnm-bill
{
   width: 100%;
   height: auto;
   margin: 40px 0 40px 0;
}

#cvnm-legislator::after,
#cvnm-bill::after
{
   display: block;
   content: " ";
   clear: both;
}

#cvnm-legislator div.clear,
#cvnm-bill div.clear
{
   padding: 0;    /* Override theme clear */
}

#cvnm-legislator h2,
#cvnm-bill h2
{
   font-size: 22px;
   line-height: 1.3;
   font-weight: 400;
}

#cvnm-legislator p,
#cvnm-bill p
{
   max-width: 750px; /* Use "em" if you prefer */
}

/*----------------------------------------
   Legislators Detail
----------------------------------------*/
/* Photo */
#cvnm-legislator #cvnm-panel1
{
   width: 245px;
   height: 336px;
   margin-right: 25px;
   float: left;
}

/* Score */
#cvnm-legislator #cvnm-panel2
{
   background-color: rgba(255, 136, 0, .2);
   background-color: rgba(187, 4, 4, 0.11) !important;
   border-radius: 10px;
   -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 50px, calc(100% - 50px) 0%, 0% 0%);
   clip-path: polygon(0% 100%, 100% 100%, 100% 50px, calc(100% - 50px) 0%, 0% 0%);
   padding: 20px 25px 20px 25px;
   margin-right: 30px;
   width: 275px;
   /* height: 336px; */
   min-height: 336px;
   float: left;
}

/* Info */
#cvnm-legislator #cvnm-panel3
{
   background-color: #f3f3f3;
   border-radius: 10px;
   padding: 20px 25px 20px 25px;
   width: calc(100% - 575px);
   height: 336px;
   float: left;
}

/* Notes */
#cvnm-legislator #cvnm-panel4
{
   background-color: #f3f3f3;
   border-radius: 10px;
   margin-top: 25px;
   padding: 20px 25px 20px 25px;
   width: 100%;
}

#cvnm-legislator #cvnm-panel4 p { max-width: none; }
#cvnm-legislator #cvnm-panel4 p:last-of-type { margin: 0; padding: 0; }

/*----------------------------------------
   Bill Detail
----------------------------------------*/
/* Details */
#cvnm-bill #cvnm-panel1
{
   display: block;
   background-color: #f3f3f3;
   border-radius: 10px;
   width: 400px;
   height: auto;
   margin-right: 25px;
   padding: 20px 25px 20px 25px;
   float: left;
}

/* Description */
#cvnm-bill #cvnm-panel2
{
   display: block;
   background-color: #f3f3f3;
   border-radius: 10px;
   margin: 0 0 25px 0;
   padding: 20px 25px 20px 25px;
   width: calc(100% - 425px);
   height: auto;
   float: right;
}

/* Outcome */
#cvnm-bill #cvnm-panel3
{
   display: block;
   -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 50px, calc(100% - 50px) 0%, 0% 0%);
   clip-path: polygon(0% 100%, 100% 100%, 100% 50px, calc(100% - 50px) 0%, 0% 0%);
   background-color: rgba(187, 4, 4, 0.11) !important;
   border-radius: 10px;
   padding: 20px 25px 20px 25px;
   width: calc(100% - 425px);
   height: auto;
   clear: right;
   float: right;
}


/*----------------------------------------
   Data List
----------------------------------------*/
/* Data Lists - dl, dt, dd */
dl.data-list
{

   /* border-radius: 10px; */
   /* background-color: #f3f3f3; */
   padding: 0px 0px 0px 0px;
   margin: 0px 0 20px 0;
   /* width: 500px; */
   width: auto;
}

.data-list dt
{
   display: inline-block;
   line-height: 1.4;
   width: 115px;
   clear: left;
   float: left;
}

.data-list dd
{
   display: inline-block;
   line-height: 1.4;
   padding: 0 0 10px 10px;
   float: left;
}

.data-list dt.highlight,
.data-list dd.highlight
{
   color: #d62;
   font-weight: 600;
   padding-bottom: 5px;
   margin-bottom: 5px;
   border-bottom: 1px solid rgba(255, 255, 255, .5);
   font-size: 120%;
}

/* Specific Data Lists */
#data-list-score { margin: 0 0 0 0; }
#data-list-score dt { width: 160px; }

.data-list:after
{
   display: block;
   content: " ";
   clear: both;
}

/*----------------------------------------
   Search Forms
----------------------------------------*/
#data-wrapper
{
   margin: 0 0 50px 0;
}

/* CSS for search inputs - There should only be ONE form on a page */
form#data-search
{
   width: 100%;
   margin-bottom: 10px;
   text-align: right;
}

form#data-search::after
{
   display: block;
   content: " ";
   clear: both;
}

#data-search .fieldset
{
   display: inline-block;
   vertical-align: top;
}

#data-search label
{
   display: block;
}

#data-search select
{
   -webkit-appearance: none;
   appearance: none;
   line-height: normal;
   position: relative;
   background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDA1LjQ1NiA0MDUuNDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDUuNDU2IDQwNS40NTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4NCjxnPg0KCTxwYXRoIGQ9Ik03NC4xMzQsNjQuMTQ3Yy00Ljk4NSwwLjA3OC05LjkxMSwyLjE2My0xMy40MzgsNS42ODhsLTU1LDU1QzIuMDk2LDEyOC40MzIsMCwxMzMuNDkyLDAsMTM4LjU4MyAgIHMyLjA5NiwxMC4xNTEsNS42OTcsMTMuNzVsMTgzLjI4MSwxODMuMjgxYzMuNTk5LDMuNjAxLDguNjU5LDUuNjk3LDEzLjc1LDUuNjk3czEwLjE1MS0yLjA5NiwxMy43NS01LjY5N2wxODMuMjgxLTE4My4yODEgICBjMy42MDEtMy41OTksNS42OTctOC42NTksNS42OTctMTMuNzVzLTIuMDk2LTEwLjE1MS01LjY5Ny0xMy43NWwtNTUtNTVjLTMuNTk4LTMuNTkxLTguNjUxLTUuNjgxLTEzLjczNC01LjY4MSAgIGMtNS4wODMsMC0xMC4xMzYsMi4wOS0xMy43MzQsNS42ODFMMjAyLjcyOCwxODQuMzk3TDg4LjE2Niw2OS44MzNDODQuNDk5LDY2LjE2OSw3OS4zMTgsNjQuMDcsNzQuMTM0LDY0LjE0N0w3NC4xMzQsNjQuMTQ3eiIgZmlsbD0iIzk2OTY5NiIvPg0KPC9nPg0KPC9zdmc+DQo=);
   background-position: right 10px top 50%;
   background-repeat: no-repeat;
   background-size: 11px;
   border-image-width: 0px;
   border-radius: 0px;
   border: 0px;
   -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0) !important;
   background-color: #f3f3f3;
   height: 40px;
   font-size: 16px;
   margin: 0 !important;
   width: 150px;
   white-space: normal;
}

#data-search #search-input
{
   background-color: #f3f3f3 !important;
   border: 0px solid #fff;
   font-size: 16px;
   padding-left: 9px;
   padding-right: 9px;
   width: 200px;
   height: 40px;
}

#data-search #submit-button
{
   /* display: block; */
   background-color: #d62;
   border: solid 0px #fff;
   font-weight: 600;
   padding: 9px !important;
   margin-left: 0px;
   height: 40px;
   width: 80px;
}

#data-search #submit-button:hover
{
   background-color: #fd5c00!important;
}

/*----------------------------------------
   Data Tables
----------------------------------------*/
/* CSS for Data Tables - There could be >=1 tables on a page */
.data-table
{
   /* background-color: #fafafa !important; */
   width: 100%;
}

.data-table tbody { background-color: #fafafa; }

.data-table thead tr
{
   background-color: transparent !important;
}

.data-table thead th
{
   /* background-color: #f6f6f6; */
   border: 1px solid #fff !important;
   border-width: 2px 1px 0px 1px!important;
   color: #333333;
   font-weight: 600 !important;
   line-height: 1.3;
   text-align: left;
   padding: 7px 8px !important;
   vertical-align: bottom;
   transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
}

.data-table thead th:hover
{
   background-color: #fafafa;
   transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
}

.data-table thead th a
{
   display: inline-block;
   color: #333 !important;
   width: 100%;
   height: 100%;
}

.data-table thead th.active a {color: #662 !important;}

.data-table thead th a:hover,
.data-table thead th a:active,
{
   color: #dc6822 !important;
   text-decoration: underline;
}

.data-table thead th.asc a:after,
.data-table thead th.desc a:after
{
   font-family: FontAwesome;
   content: '\f0dd';
   font-size: 100%;
   margin-left: 6px;
   vertical-align: top;
}

.data-table thead th.desc a:after { content: '\f0de'; }

.data-table tbody tr:nth-child(odd)
{
   background-color: #f3f3f3 !important;
}

.data-table tbody tr
{
   transition: .2s;
}

.data-table tbody tr:hover
{
   background-color: #e9e9e9 !important;
}

.data-table td
{
   border: 1px solid #fff !important;
   font-size: 14px !important;
   line-height: 1.6;
   padding: 6px 8px 5px 8px!important;
   vertical-align: top;
}

.data-table td a:hover,
.data-table td a:active
{
   color: #894!important;
   text-decoration: underline;
}

.data-table td.error
{
   color: #b11;
   text-align: center;
}

/* Legislator Table - Data Columns */
.data-table td.name {
   font-weight: 600;
}

.data-table td.current {
   color: #662;
   font-weight: 600;
}

.data-table td.former {
   color: #aaa;
   font-weight: 600;
}

.data-table td.score { }

.data-table td.lifetime-score { }

/* Usually, a score of 100% */
.data-table td.champion {
   background-color: rgba(136, 153, 68, .25);
   color: #662;
   font-weight: 600;
}


/* Proposal Table - Data Columns */
.data-table td.priority {
   text-align: center;
   vertical-align: top;
}

.data-table td.proposal-number {
   font-weight: 600;
}

.data-table td .cvnm-priority::after
{
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   content: "\f06a";
   color: #b11;
   font-size: 14px;
   font-size: 1.75em;
   vertical-align: sub;
}

.data-table td.topics
{
   /* text-align: center; */
   /* vertical-align: middle; */
}

.data-table td.topics img {
   width: 30px !important;
   height: auto;
   margin-bottom: 0px;
   margin-top: .125em;
}


.data-table td .description {
   display: block;
   border-top: dotted 1px #999;
   margin-top: 6px;
   padding-top: 6px;
}

.data-table td .outcome {
   display: block;
   padding-top: 10px;
}

.data-table td.cvnm-oppose {
   background-color: rgba(255, 120, 0, 0.1);
   color: rgba(0, 0, 0, .6);
   font-weight: 600;
}

.data-table td.cvnm-support {
   background-color: rgba(136, 153, 68, .25);
   color: #662;
   font-weight: 600;
}

.data-div {
    background-color: #ccc;
}

/* Vote Table - Data Columns & Icons */
.data-table td.vote { cursor: pointer; }

.data-table td .against::after,
.data-table-legend .against::after
{
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   content: "\f00d";
   margin-left: 10px;
   color: #b11;
   font-size: 18px;
   font-size: 1.25em;
   vertical-align: sub;
}

.data-table td .for::after,
.data-table-legend .for::after
{
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   content: "\f00c";
   margin-left: 10px;
   color: #894;
   font-size: 18px;
   font-size: 1.25em;
   vertical-align: sub;
}

.data-table td .absent { font-size: 16px; font-weight: bold; padding-left: 12px; color: #000; }
.data-table td .excused { font-size: 16px; font-weight: bold; padding-left: 12px; color: #000; }
.data-table td .recused { font-size: 16px; font-weight: bold; padding-left: 12px; color: #000; }
.data-table td .abstain { font-size: 16px; font-weight: bold; padding-left: 12px; color: #000; }

.data-table-legend .for::after { vertical-align: middle; margin-left: 0; }
.data-table-legend .against::after { vertical-align: middle; margin-left: 0; }

/*----------------------------------------
   Legend above, below table
----------------------------------------*/
/* Legend for Topics and Votes at top and bottom of table */
.data-table-legend
{
   margin-bottom: 25px !important;
}

.data-table-legend#data-table-votes + .data-table-legend#data-table-topics
{
   /* margin-top: -15px; */
   margin-top: 0px;
}

.data-table-legend h4
{
   display: none; /* Right aligned h4 "Topics" looks bad */
   font-size: 15px !important;
   font-weight: 600 !important;
   margin: 0 0 5px 0 !important;
}

/*
Put the font styling on ".data-table-legend li"?
or put the font styling on ".data-table-legend#data-table-topics li"
But not just #data-table-topics, cuz you get 80% of 80%

div#data-table-topics {
    font-size: 80%;
}
*/

.data-table-legend ul
{
   margin: 0;
   padding: 0;
   height: auto;
   /* float: right; */
   /* This looks terrible!!! when you start shrinking the page down */
}

.data-table-legend li
{
   /* display: block; */
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   margin: 0;
   padding: 0 20px 10px 0;
   /* float: left; */
   white-space: nowrap;
}

.data-table-legend#data-table-topics li { padding-right: calc((100% - 750px) / 6); }
.data-table-legend#data-table-topics li:nth-of-type(7) { padding-right: 0; }

.data-table-legend#data-table-votes li { padding: 0; padding-right: calc((100% - 680px) / 7); }
.data-table-legend#data-table-votes li:nth-of-type(1) { padding-left: calc((100% - 680px) / 7); }

.data-table-legend#data-table-votes span { font-size: 24px; font-weight: bold; color: #000; margin-top: -4px; }
.data-table-legend#data-table-votes span.for { font-size: 24px; margin-top: -6px; }
.data-table-legend#data-table-votes span.against { font-size: 24px; margin-top: -6px; }

.data-table-legend img
{
   /*
   margin: 0 0 -11px 0 !important;
   width: 30px !important;
   */

   display: inline-block;
   margin: 0 3px 0px 0 !important;
   width: 30px !important;
   vertical-align: middle;
}

.data-table-legend span
{
   display: inline-block;
   line-height: 1.4;
   vertical-align: middle;
}

.data-table td.desktop, .data-table th.desktop { display: table-cell; }
.data-table td.mobile, .data-table th.mobile { display: none; }
.data-table td .desktop, .data-table th .desktop { display: inline; }
.data-table td .mobile, .data-table th .mobile { display: none; }

/*----------------------------------------
   Responsive
----------------------------------------*/
@media only screen and (max-width: 1200px)
{
   /* Photo */
   #cvnm-legislator #cvnm-panel1
   {
      margin-bottom: 25px;
      float: left;
   }

   /* Score */
   #cvnm-legislator #cvnm-panel2
   {
      width: calc(100% - 275px);
      margin: 0 0 25px 0;
   }

   /* Info */
   #cvnm-legislator #cvnm-panel3
   {
      clear: left;
      width: 100%;
      height: auto;
      float: none;
   }

   .data-table-legend#data-table-votes li { padding-right: calc((100% - 680px) / 5); }
   .data-table-legend#data-table-votes li:nth-of-type(1) { padding-left: 0; }
   .data-table-legend#data-table-votes li:last-of-type { padding-right: 0; }
}

@media only screen and (max-width: 1150px)
{
   #data-table-topics li
   {
      padding: 0 20px 10px 0;
      width: 25%;
   }
}

@media only screen and (max-width: 900px)
{
   form#data-search
   {
      text-align: left;
   }

   #data-search .fieldset
   {
      display: inline-block;
      width: 100%;
      margin-bottom: 10px;
   }

   #data-search select
   {
      width: 250px;
   }

   #data-search #search-input
   {
      width: 250px;
   }

   .data-table-legend#data-table-topics
   {
      display: none;
   }

   .data-table-legend#data-table-votes li
   {
      padding: 0 20px 0 0;
      padding-right: 0;
      width: 32%;
   }

   .data-table-legend#data-table-topics li
   {
      padding: 0 20px 10px 0;
      width: 32%;
   }

   .data-table td.desktop, .data-table th.desktop { display: none; }
   .data-table td.mobile, .data-table th.mobile { display: table-cell; }
   .data-table td .desktop, .data-table th .desktop { display: none; }
   .data-table td .mobile, .data-table th .mobile { display: inline; }

   #cvnm-bill #cvnm-panel1
   {
      margin: 0 0 25px 0;
      width: 100%;
      float: none;
   }

   /* Description */
   #cvnm-bill #cvnm-panel2
   {
      width: 100%;
      float: none;
   }

   /* Outcome */
   #cvnm-bill #cvnm-panel3
   {
      width: 100%;
      float: none;
   }
}

@media only screen and (max-width: 700px)
{
   /* Photo */
   #cvnm-legislator #cvnm-panel1
   {
      float: none;
   }

   /* Score */
   #cvnm-legislator #cvnm-panel2
   {
      width: 100%;
      height: auto;
      float: none;
   }

   /* Info */
   #cvnm-legislator #cvnm-panel3
   {
      height: auto;
   }

   #cvnm-bill #cvnm-panel1
   {
      width: 100%;
   }

   .data-table-legend#data-table-votes li
   {
      padding: 0 20px 0 0;
      width: 49%;
   }

   .data-table-legend#data-table-topics li
   {
      padding: 0 20px 10px 0;
      width: 49%;
   }
}

@media only screen and (max-width: 500px)
{
   .data-table-legend#data-table-votes li:nth-of-type(1) { width: 100%; }
   .data-table-legend#data-table-votes li:nth-of-type(2) { width: 100%; }
}