* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
body {
   background-color: #588425;
   background-image: url('book_green_bg.jpg');
   padding:10px;
   font-family: arial;
   font-weight:400;
}
input[type=text], input[type=password] {
   border:1px solid #BBB;
}
#container {
   width:960px;
   margin:0 auto;
   background-color:#FFF;
   padding:15px;
   overflow:auto;
   border-radius:15px;
   -moz-border-radius:15px;
   -webkit-border-radius:15px;
   -moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
   -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
   box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
#inner_container {
   position:relative;
   overflow:auto;
   width:100%;
}
a {
   color:#01B0C5;
   text-decoration:none;
}
h1, h2 {
   font-weight:700;
}
h1, h2, h3, h4 {
   margin:0;
}
h1 {
   font-size:40px;
   color:#01B0C5;
}
h1 a {
   text-decoration:none;
   color:#01B0C5;
}
h2 {
   color:#6FA3FF;
}
#top, .item {
   padding:8px 12px 8px 0;
   margin-bottom:15px;
}
#top, #main {
   width:500px;
}
#top {
   padding-bottom:30px;
   color:#C4FE5E;
   margin-bottom:0px;
}
#main {
   float:left;
   display: inline;
}
.item {
   background-color:#FFF;
   margin-bottom:8px;
}
.item h3 {
   color:#707;
   font-size:14px;
   text-transform:uppercase;
   margin-bottom:8px;
   background-color:#F1A4F6;
   padding:3px 10px;
   -moz-border-radius:15px;
   border-radius:15px;
   -webkit-border-radius:15px;
   overflow:auto;
}
.item h3 span {
   float:right;
   text-align:right;
   display: inline;
}
.item .info {
   color:#555;
}
.item p {
   padding:0 10px;
   line-height:150%;
}
.info {
   font-style:italic;
   font-size:13px;
}
#side, .side {
   margin-left:580px;
   width:346px;
   padding:12px;
   background-color:#C4FE5E;
   -webkit-border-radius:15px;
   -moz-border-radius:15px;
   border-radius:15px;
}
#endorsements {
   margin-left:580px;
   width:346px;
   padding:12px;
   font-size:12px;
   color:#555;
   text-align:right;
   margin-top:20px;
}
#side h3 {
   font-size:20px;
}

#poll h3 {
   font-size: 1.6em;
}

#previous_polls {
   padding: 20px 0px;
   border-top: 3px solid #FFCB05;
}

#babies_promo {
   margin-top: 35px;
   padding: 20px 0px;
   border-top: 3px solid #FFCB05;
}

#babies_promo h2 {
   color: #000;
   font-size: 120%;
   margin-top: 10px;
   margin-bottom: 10px;
}

#babies_promo .p {
   line-height: 125%;
}



p.poll_option, p.prev_poll_option {
   line-height:26px;
}
.poll_option span, .prev_poll_option span {
   background-color: #EAE7D8;
   -moz-border-radius:15px;
   -webkit-border-radius:15px;
   border-radius:15px;
   padding:4px 8px;
   cursor:pointer;
   color:#01B0C5;
}
.poll_option_selected span {
   background: #01B0C5;
   -moz-border-radius:15px;
   -webkit-border-radius:15px;
   border-radius:15px;
   padding:4px 8px;
   cursor:pointer;
   color:#FFF;
}
#account {
   float:right;
   text-align:right;
   display: inline;
}
#account a {
   font-weight:bold;
}
.first {
   padding-top:0;
   margin-bottom:15px;
}
.first .stat {
   font-size:180%;
   line-height:120%;
}
.pseudolink {
   color:#01B0C5;
   cursor:pointer;
   text-decoration:none;
   font-weight:bold;
}
.ui-dialog-content, .ui-dialog-content td {
   font-size:14px;
}
#create_account_error, #login_error, #poll_option_error {
   margin-top:10px;
}
#explain {
   visibility:hidden;
   display:none;
}

#about_bubble {
   max-width:460px;
}

.bubbleDialog {
 display:none;
 position:absolute;
 margin:0px auto;
 min-width:8em;
 max-width:360px;
 z-index:1000;
 margin-left:43px;
 margin-bottom:0.5em;
}

.bubbleDialog .content,
.bubbleDialog .t,
.bubbleDialog .b,
.bubbleDialog .b div {
 background:transparent url('bubble.png') no-repeat top right;
}

.bubbleDialog .content {
 position:relative;
 padding:0px 43px 0px 0px;
}

.bubbleDialog .t {
 position:absolute;
 left:0px;
 top:0px;
 width:43px;
 margin-left:-43px;
 height:100%;
 background-position:top left;
}

.bubbleDialog .b {
 position:relative;
 width:100%;
}

.bubbleDialog .b,
.bubbleDialog .b div {
 height:43px;
 font-size:1px;
}

.bubbleDialog .b {
 background-position:bottom right;
}

.bubbleDialog .b div {
 position:relative;
 width:43px; /* bottom corner width */
 margin-left:-43px;
 background-position:bottom left;
}
.bubbleText {
   padding:25px 2px 1px 2px;
}
.bubbleText h3 {
   margin-top:12px;
}
#overlay {
   display:none;
   position:fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   z-index:999;
   background-color:rgba(0,0,0,0.5);
}
#settings_bubble {
   min-width:450px;
}
#footer {
   margin-top:20px;
   border-top:2px solid #01B0C5;
   padding:12px 2px 0 2px;
   text-align:right;
}
#footer a {
   font-weight:bold;
}
#rss {
   float:left;
   display: inline;
   margin-right:10px;
   text-align:left;
   width:280px;
}
#share_fb, #see_results {
   margin-top:20px;
   border-top:2px dotted #FFF;
   padding-top:15px;
}
#share_fb a, #see_results a {
   color:#01B0C5;
   font-weight:bold;
}
.prev_polls {
   margin-top: 30px;
   margin-bottom:12px;
}
.prev_poll_box {
   margin-bottom:10px;
}
.prev_poll_hide {
   font-size:13px;
   font-family:arial;
}
.prev_poll_hide a {
   color:#35568F;
   font-weight:bold;
   text-decoration:underline;
}
.social {
   vertical-align:top;
}
.twitter-share-button {
   vertical-align:top;
}
#promo {
   margin-left:626px;
   width:300px;
   text-align:right;
   margin-top:30px;
}
#top_promo {
   display: none;
   width:960px;
   margin:-23px auto 15px;
   background-color:#FFF;
   padding:15px;
   overflow:auto;
   border-radius:0 0 15px 15px;
   -moz-border-radius:0 0 15px 15px;
   -webkit-border-radius:0 0 15px 15px;
   -moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
   -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
   box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
#top_promo h2 {
   color: #707;
   padding-top:10px;
}
#top_promo a {
   font-weight: bold;
   color: #707;
}

#top_promo p.promo_text {
   float: left;
   width: 44%;
   margin:20px;
   padding: 0 20px;
   font-size: 120%;
   line-height: 130%;
}




        #container {
            min-width: 320px;
            max-width: 1200px;
            margin: 20px auto;
            width: 90%;
            background-color: #FFF;
            padding: 15px;
            position: relative;
        }

        #nav {
            text-align: right;
	    float: none;
	    padding-bottom: 25px;
        }

        #logo {
            float: left;
            max-width: 250px;
            position: relative;
        }

        #logo img {
            max-width: 250px;
            width: 100%;
        }

        #sidebar {
            width: 340px;
            float: right;
            margin-left: 30px;
            padding: 5px;
            padding-top: 0;
        }

        #poll, #promobox {
            padding: 10px 0px;
            margin-bottom: 15px;
            padding-top: 0;
        }

        #poll {
            background-color: #FFF;
            padding-bottom: 15px;
            padding-top: 35px;
        }

        #promobox {
            display: none;
            background-color: #6FA3FF;
        }

        #poll, #promobox {
            border-radius: 10px;
        }

        #posts {
            width: -webkit-calc(100% - 390px);
            width: -moz-calc(100% - 390px);
            width: calc(100% - 390px);
            margin-bottom: 15px;
            min-height: 1000px;
        }

        .post {
            margin-bottom: 50px;
        }

        .head {
            padding-bottom: 3px;
            font-size: 120%;
            font-weight: bold;
            color: #000;
            margin-bottom: 15px;
            border-top: 3px solid #FFCB05;
            padding-top: 20px;
        }

        .post:first-child .head {
            border-top: 0;
            padding-top: 0;
        }

        .share-img {
            display: block;
            float: none;
            width: 100%;
        }

        .share-img a {
          position: relative;
          border: 0;
        }

        .share-img img {
            position: relative;
            width: 100%;
            margin-top: 15px;
            border: 1px solid #6FA3FF;
        }

        .text {
            margin-top: 15px;
        }

        .stat {
            font-size: 120%;
        }

        .info {
            font-size: 90%;
            color: #555;
            font-style: italic;
        }

        .link p, #blurbs p {
            text-align: right;
        }

        #blurbs {
            text-align: right;
            font-size: 14px;
            color: #555;
            margin-top: 35px;
            padding: 20px 0px;
            border-top: 3px solid #FFCB05;
        }

        .bubbleContainer {
          width: 100%;
          top: 0;
          left: 0;
          position: absolute;
          z-index: 2000;
        }

        .bubbleDialog {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            width: 360px !important;
            min-width: 50% !important;
            max-width: 90% !important;
            margin: 10% auto !important;
            background-color: #FFF !important;
            border-radius: 15px !important;
            padding: 20px !important;
        }

	#top_promo {
	    background-color: #FFF;
	    display: block;
            min-width: 320px;
            max-width: 1200px;
            width: 90%;
            position: relative;
        }
        #top_promo h2 {
            color: #000;
            margin-bottom: 10px;
        }
        #top_promo a {
            color: #01B0C5
        }
        #top_promo .p {
            -moz-column-count:2;
            -webkit-column-count:2;
            column-count:2;
	    -moz-column-gap:35px;
	    -webkit-column-gap:35px;
	    column-gap:35px;
	    font-size: 100%;
	    line-height: 140%;
        }
        #top_promo .img1, #top_promo .img2 {
            float: right;
            margin-left: 15px;
            text-align: right;
            width: 16%;
            min-width: 130px;
        }
        #top_promo .img1 {

        }
        #top_promo .img2 {
            display: none;
            width: 32%;
            min-width: 110px;
            max-width: 140px;
        }













        @media (max-width: 400px) {
            #top_promo h2 {
                font-size: 120%;
            }

            #top_promo .expanded {
               display: none;
            }
        }

        @media (max-width: 660px) {
            #top_promo p, #previous_polls, #babies_promo {
               display: none;
            }
        }

        @media (max-width: 767px) {

            #top_promo .p {
               -moz-column-count: auto;
               -webkit-column-count: auto;
               column-count: auto;
   	       -moz-column-gap: auto;
	       -webkit-column-gap: auto;
	       column-gap: auto;
            }

            #top_promo p.promo_text {
                font-size: 100%;
            }

            #nav {
                float: none;
                margin-bottom: 10px;
            }
            #sidebar, #poll {
                float: none;
                position: relative;
                width: 100%;
                max-width: 100%;
                min-width: 100%;
                margin: 0;
            }
            #sidebar {
                margin-bottom: 25px;
            }
            #promobox, #blurbs {
                display: none;
            }
            #posts {
                width: 100%;
            }
            #rss {
                float: none;
                display: block;
                margin-bottom:10px;
            }
            .promo {
                display: none;
            }
        }

        @media (max-width: 855px) {
            #puppet_promo {
              display: none !important;
            }
        }

        @media (max-width: 980px) {
            #top_promo .img2 {
               display: block;
            }
            #top_promo .img1 {
               display: none;
            }
        }

        @media (min-width: 768px) and (max-width: 1000px) {
            .share-img img {
                margin-bottom: 0px;
            }
            #top_promo p {
                width: 35%;
            }
            #top_promo p.promo_text {
                font-size: 100%;
            }
            .promo {
                display: none;
            }
        }

        @media (min-width: 1001px) {
            .post {
                overflow: auto;
            }
            .share-img {
                float: left;
                width: 40%;
                margin-right: 20px;
            }
            .share-img img {
                margin-top: 0;
                margin-bottom: 20px;
            }
            #top_promo p.promo_text {
                font-size: 120%;
            }

        }




        .promo {
            float: right;
            width: 20%;
            text-align: center;
            color: #FFF;
        }
        .promo img {
            width: 100%;
            max-width: 100px;
            border: 2px solid #FFF;
            box-shadow: 2px 2px 3px #444;
            margin: 4px 2px 0 0;
        }
        .promo h3 a {
            font-family: 'Roboto Condensed', sans-serif;
            color: #000;
            text-decoration: none;
        }