/* Typographic design ideas (incompletely) derived from Wilson Miner: 
    http://www.wilsonminer.com/posts/2007/jul/10/airport-express/
*/


/* -------------- Regular Site CSS ---------------*/

div#count {
    display: none;
}

body {
    font-family: Palatino,Georgia,'Times New Roman',serif; 
    background: #ccc;
 }

div#container {
    border: 1px solid #aaa; 
    background: #fff;        
    width: 98%;
    margin: 1% auto 2% auto;
}

div#content, div#posts, div#footer {
    background-color: #fff;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

 h2 {
     color: #000;
 }

 h3, h4, h5, h6 {
    color: #1E281E;    
 }

 p {
     font-size: 95%;
     line-height: 1.5em;
     color: #1E281E;
 }

 div.linkDescription {
     font-size: 80%; /* 90% */
     line-height: 140%;
 }

 div.linkDescription p {
      font-size: 100%; /* 90% */
  }

  div.feature div.linkDescription {
      font-size: 15px;
  }


 p, ol, ul, dl {
    margin:0.2em 0 0.8em;
 }


 /* LINKS */
 a {
         font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 }
 a:link { 
        color: #0C84F3; 
        text-decoration:none; 
    }
 a:visited { color: #5b80b2; text-decoration:none; }

 a:hover { color: #0C84F3; text-decoration: underline; }
 a img { border:none; }


/* Header */
          
div#header {
    overflow:hidden;
    text-align: center;
    vertical-align: top;
    color: #777;
    width: 100%;
    height: 110px;
    padding: 0px;
    background-color: #fff;
    margin-top: 12px;
    margin-bottom: 10;
}

input[type="submit"] {
    margin-left: 8px;
}

div#navTop {
    float: right;
    text-align: right;
    padding-top: 10px;
    padding-right: 0px;    
}

div#header div#nav {
    margin-left: auto;
    margin-right: auto;        
    width: 350px; 
}

#header h1{
    font-size: 180%;           
    padding-top: 5px;
}

div#branding h1 {
    display: block;
    background-image: url('http://static.openpolitics.com/media/img/openpolitics.png');
    background-repeat: no-repeat;
    width: 335px;
    height: 40px;
    /*
    margin-left: auto;
    margin-right: auto;
    */
}

div #branding h1 span{    
  font-size: 130%;
  color: #aaa;
  display: none;
}

div#count {
    display: visibile;
    color: #777;
}

#header ul {
    margin-left: -65px;
    margin-top: -5px;
}
 
#header ul li {
    display:inline;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    padding:0px 5px;
    font-size: 100%;
}

div#header div#search {
    float: right;
    padding: 0px 20px 0px 0px;
    text-align: right;
    vertical-align: top;
    font-size: 85%;
}

div#header div#search a {
    color: #0C84F3;
}

div.breadcrumbs {
    background: none;
    border: none;
    padding-left: 35px;
    font-size: 80%;
}

/* Posts: collection */

div#posts {
    float: left; 
    width:550px;
    padding: 0 25px 20px 15px;
    clear: right;
}


div#posts h2 {
    font-size: 150%;
    color: #1E281E;   
}

/* Post: Individual */

div.post, div.feature {
    padding-bottom: 15px;
    /* font-family: Palatino,Georgia,'Times New Roman',serif; */
    line-height: 150%;
    color: #1E281E;
    margin-right: 25px;
    margin-left: 10px;
}

div.post p {
    padding-bottom: .5em;
}

div.post blockquote {
    margin-left: 15px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 10px solid #eee;
    font-size: 86%;
    line-height: 150%;    
    /* font-family: Palatino,Georgia,'Times New Roman',serif; */
    color: #444;
}

div.post img {
    padding: 10px 10px 10px 30px;
}

div.post table.data {
    font-size: 75%;
    margin-left: 50px;
    margin-bottom: 10px;
}

div.post table.data th, div.post table.data td {
    padding: 2px 10px 2px 10px;
}

div.post h3, div#sidebar h3 {
    font-size: 105%;
    margin-bottom: 10px;
    line-height: 125%;
}

div.post img.photo, div.video {
    text-align: center;
    margin: 15px 0px 15px 50px;
}

div.video {
    text-align: left;
    margin: 0px;
}


div.caption {
    color: #777;
    font-size: 70%;
    margin-bottom: 10px;
    text-align: center;
}

div#sidebar h2 {
    color: #777;
}

div#sidebar p {
    font-size: 78%;
}

div.post a.postDate {
    float: right;
    margin-right: 10px;
    font-size: 85%;
    padding-top: 5px;
}

div.post h3 a {
	text-decoration: none;
}

div.post h4 {
    font-size: 95%;
    color: #666;
}

div.post ul li a{
    text-decoration: none;
}

div.post ul li a:hover {
    text-decoration: underline;
}

div.post div.permalink {
    text-align: right;
    font-size: 75%;
    padding-bottom: 20px;
}

div.post span.readmore {
    float: right;
    margin-right: 10px;
}

span.publishDate {
    float: left;
    color: #999;
    padding-right: 35px;
}

div.post blockquotekquote {
    font-size: 75%;
}

div.post iframe.googleDocs {
    width: 500px;
    height: 300px;
}


div.nextPrevious {
    margin-top: 25px;
    margin-right: 10px;
}

a.prev {
    width: 375px;
}

a.next {
    width: 100px;
    text-align: right;
}

/* tags */
div#tags h3 a, div#archives h3 a {
    color: #000;
    text-decoration: none;
}

div#tags h4 a, div#archives h4 a {
    color: #666;
    text-decoration: none;
}

div#tags h4 a:hover, div#tags h3 a:hover {
    text-decoration: underline;
}

div#tags ul li {
    font-size: 70%;
    line-height: 1.5em;
    padding-bottom: 2px;
    color: #777;
}



/* Sidebar */
div#sidebar {
    /* font-family: Palatino,Georgia,'Times New Roman',serif; */
}

div#sidebar h2{
    font-size: 135%;
}

div.link {
    margin-left: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
}

div#ref {
    float: right;
    width: 190px;
    padding: 15px;
}

div#ref ul li {
    font-size: 80%;
    list-style-type: none;
    padding-bottom: 10px;
    margin-left: -15px;
}

div#header ul li a , div#ref ul li a {
    text-decoration: none;
}

div#header ul li a:hover , div#ref ul li a:hover {
    text-decoration: underline;
}

div#footer {
    text-align: center;
    clear: both;
}


/* Public */
#content { 
    margin:0px 0px; 
    padding: 0px 7px 0 15px;
    background: #fff;
    }


div#branding div#nav ul li a {
  color: #777;
}

div#next_previous {
  float: right;
  margin-right: 30px;
}

span.source_domain {
    font-size: 70%;
    color: #999;
    width: 300px;
    display: block;
    margin-left: 75px;
}

div.related, div#tags, div#archives {
    margin-left: 75px;
    width: 325px;
}

div.related h4 {
    text-align: left;
    color: #777;
    margin-bottom: 0;
}

div.related ul {
    margin-top: 5px;
}

div.related ul li {
    font-size: 80%;
    padding-left: 5px;
    padding-top: 0px;
    padding-bottom: 3px;
    margin-top: 0px;
    line-height: 145%;
}

div#sidebar div.moreLinks  {
    width: 100%;
    padding-top: 15px;
}

div#sidebar div.moreLinks ul li {
    font-size: 90%;
    padding-right: 5px;
}

div#sidebar div.moreLinks a {
    float: left;
}

span.readmore{
    color: #999;
    font-size: 70%;
}

a.readmore{
    font-size: 115%;
    font-weight: 800;
    color: #0C84F3;
}

a:hover {
    color: #11a2f3;
}

div#sidebar {
    float: right;
    margin-top: -0px;
    padding-left: 10px;
    padding-right: 20px;
    width: 300px;
    color: #555;    
}

div#sidebar h3 {
    color: #666;
    font-size: 100%;
}

div#sidebar h3 a {
    color: #666;
    text-decoration: none;    
}

div#sidebar h3 a:hover {
    text-decoration: underline;
}


div#sidebar ul li, div#extra ul li{
    color: #777;
    font-size: 80%;
}

div#sidebar span.source_domain {
    margin-left: 0px;
}

div#sidebar span.readmore{
    margin-top: -3px;
    float: right;
}

a.moreLinks {
    float: right;
    padding-top: 25px;

}

a.moreArchives {
    float: right;
    padding-top: 0px;
    padding-bottom: 20px;
}

ul.tags li, ul.syndication li, ul.morelinks li {
    list-style: none;
    display: inline;
}

div#syndication {
    clear: both;
    padding-top: 5px;
}

div#syndication ul {
    margin-left: -10px;
}

div#syndication ul li {
    font-size: 90%;
    padding-right: 20px;
    margin-bottom: 10px;
}


div#otherSites ul li {
    padding-bottom: 5px;
}

div#extra {
    float: left;
/*    margin: -10px 0 30px 0px;  */
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding: 2px 0px 0 10px;
    color: #444;
    width: 200px; /*440 */
}

div#extra h2 {
    font-size: 135%;
    color: #333;
}

div#extra div.thumb {
    float: left;
    width: 200px;
    height: 170px;
    padding: 0 20px 0px 0;
}


div#extra div.thumb img {
    margin-top: -5px;
    padding: 0 0 5px 0px;
    opacity: 0.92;
}

div#extra div.thumb img:hover {
    opacity: 1.0;
}

div#extra div.thumb h3 {
    font-size: 66%;
    clear: right;
    padding: 0px;
}

div#comments div.comment {
    font-size: 90%;
    padding: 0px 10% 10px 20px;
    
}

div.comment div.header {
    height: 35px;
    margin-bottom: 10px;
    display: block;
}

div.comment div.header span.author {
    float: left;
    width: 40%;
    font-weight: 800;
}

div.comment div.header span.re {
    color: #aaa;
    float: right;
    width: 55%;
}

div#footer {
    color: #999;
    padding: 25px 10px 10px 10px;
    font-size: 85%;
}


/* --------------- Resolution-Specific Widths ---------------------

    This is what makes the site fluidly switch between layouts, 
    depending upon the browser resolution set with /media/js/styleSheetResize.js
    
    styleSheetResize checks the screen resolution and sets the main body class

    inspired by: http://www.alistapart.com/articles/switchymclayout/

*/

.pda_hor div#posts, .pda_hor div#sidebar {
    width: 255px;
    padding: 0px;
}

.pda_hor div#header div#nav {
    margin-left: 0%;
}

.pda_hor div#branding h1 {
    display: block;
    background-image: none;
}

.pda_hor div#branding h1 span {
    display: block;
    font-size: 105%;
    margin-left: -0px;
    width: 275px;
}

.pda_hor div#posts div.post {
    width: 250px;
}

.pda_hor div#posts div.post img.photo {
    width:190px;
    margin-left: 20px;
}

.pda_hor div#posts div.post iframe.googleDocs {
    width: 250px;
}

.pda_hor div#posts div.post div.related {
    width: 225px;
}

.pda_hor div#comments {
    width: 290px;
    margin-left: -20px;
}


.pda_hor div#sidebar {
}

.pda_hor div.related {
    margin-left: 25px;
    width: 300px;
    padding-top: 10px;
}


.pda_v div#extra, 
.pda_h div#extra, 
.screen_lo div#extra, 

.screen_ultralow div#header div#nav {
    margin-left: 5%;
}

.screen_ultralow div#branding h1 {
    display: block;
    background-image: none;
    background-repeat: no-repeat;
}

.screen_ultralow div#branding h1 span {
    display: block;
    font-size: 110%;
}

.screen_ultralow div#extra, 
.screen_high div#extra {
    width: 220px;
    float: left;
}

.screen_ultralow div#posts {
    width: 91%;
}

.screen_ultralow div#posts div.post img {
    width: 270px;
}

.screen_ultralow div#posts div.post iframe.googleDocs {
    width: 300px;
}

.screen_ultralow div#extra, .screen_ultralow div#sidebar
 {
    float: left;
}

.screen_low div#posts {
    width: 95%;
}

.screen_low div#sidebar {
    width: 58%;
}

.screen_low div#posts div.post iframe.googleDocs {
    width: 560px;
}

.screen_med div#posts {
    width: 90%;
}

.screen_med div#posts div.post iframe.googleDocs {
    width: 700px;
}


.screen_med div#extra {
    width: 440px;
    float: left;
}

.screen_high div#posts {
    width: 60%;
}

.screen_high div#posts div.post iframe.googleDocs {
    width: 550px;
}


.screen_high div#extra {
    width: 880px;
    float: left;
}

.screen_high div#sidebar {
    width: 30%;
}

.screen_high div#comments {
    width: 625px;
}

.screen_higher div#posts {
    width: 44%;
}

.screen_ultralow div#comments, .screen_low div#comments, .screen_higher div#comments {
    display: none;
}

.screen_higher div#sidebar {
    width: 26%;
}

.screen_higher div#extra {
    width: 220px;
    float: left;
    padding-left: 4%;
}

/* Change Subscription List from horizontal to vertical */
.pda_hor ul.syndication li,
.screen_low ul.syndication li,
.screen_ultralow ul.syndication li,
.screen_higher ul.syndication li  {
    display: list-item;
}


.screen_wide div#posts {
    width: 40%;
}

.screen_wide div#extra {
    width: 440px;
}

.screen_wide div#sidebar {
    width: 21%;
}

.screen_ultrawide div#posts {
    width: 35%;
}

.screen_ultrawide div#extra {
    width: 660px;
}

.screen_ultrawide div#sidebar {
    width: 18%;
}

/* ------------------ Main Page Layout ---------------  */

div.post ol, div.post ul {
	font-size: 83%;
}

div.post {
	margin-bottom: 30px;
	padding-bottom: 50px;
	line-height: 1.5em;
	background:transparent url(http://static.openpolitics.com/media/img/line1.gif) repeat-x scroll 0 100%;
}

div.description {
	font-size: 85%;
	margin: 0.2em 0 0.8em;
	line-height: 140%;
}

div#sidebar div.description p {
	font-size: 100%;
    color: #555;
}


object { 
	margin-left: 70px;
}

div.related ul li {
	font-size:100%;
}

div#sidebar ul li, div#extra ul li {
	font-size:100%;
	margin-left: 20px;
}		

div#sidebar div.description h3 {
	margin-left: 20px;
}

div#promo {
    clear: both;
    padding-top: 30px;
    width: 85%;
}

/* --------- buttons ----------- */
/* http://www.zurb.com/article/266/super-customButton-buttons-with-css3-and-rgba */

.customButton, .customButton:visited {
	background: #222 url(/media/img/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

	.customButton:hover	    { background-color: #111; color: #fff; }
	.customButton:active    { top: 1px; }
	.small.customButton, .small.customButton:visited 	{ font-size: 11px; padding: ; }

	.customButton, .customButton:visited,
	.medium.customButton, .medium.customButton:visited  { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
	.large.customButton, .large.customButton:visited    { font-size: 14px; padding: 8px 14px 9px; }
	
	.grey.customButton, .green.customButton:visited    { 
	    background-color: #777;
	    color: white;
	}

	.prev { float: left; }
	.next { float: right; }
	
	.grey.customButton:hover { 
	        background-color: #999;
	        text-decoration: none;
	    }