/* > Reset CSS
-------------------------------------------------------------- */
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,b,u,i,center,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-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* > General styles
-------------------------------------------------------------- */
body { font: 14px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #fff; color: #999; }
h1, h2, h3, h4, h5, h6 { color: #053147; font-weight: bold; line-height: 120%; letter-spacing: -0.5px; margin-bottom: 10px; }
a { color: #0f648f; text-decoration: none; }
a:hover { text-decoration: underline; color: #19558D; }
a:focus { outline: 1px dotted; }
ul,ol,li { margin: 0; padding: 0; list-style: none; }
strong { color: black; font-weight: bold; }
hr { border: 0; border-top: 1px solid #E1E1E1; clear: both; height: 0; margin: 20px 0; }
pre { background-color: #eee; padding: 10px; font-size: 11px; }
iframe { vertical-align: top; }
h1 iframe { vertical-align: middle; margin-left: 10px; }

h1 { font-size: 32px; line-height: 1.5; letter-spacing: -1px; }
h2 { font-size: 20px; line-height: 1.5; } 
h3 { font-size: 16px; }
h4 { font-size: 13px; }
h5 { font-size: 12px; }
h6 { font-size: 11px; } 

p.subtitle { font-size: 13px; margin-bottom: 15px; }

/* > Handy classes
-------------------------------------------------------------- */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

.fright { float: right; width: auto; }
.fleft { float: left; width: auto; }

.first { margin-left: 0 !important; }
.last { margin-right: 0 !important; }
.nomargin { margin: 0 !important; }
.nofloat { float: none !important; }
.noborder { border: 0 !important; }

.normal { font-weight: normal; }
.bold { font-weight: bold; }
a.underlined { text-decoration: underline; }
.center { text-align: center; }

.hidden { display: none; }

/* > Layout
-------------------------------------------------------------- */
#header { height: 50px; background: #053147; border-bottom: 1px solid #fff; }
#header #logo { display: block; height: 50px; width: 270px; float: left; border-right: 1px solid #000; }
#header .inner { overflow: visible; }

#nav { display: block; float: left; border-right: 1px solid #000; }
#nav li:first-child { border-left: 1px solid #114D6B; }
#nav li { float: left; line-height: 50px; font-size: 14px; color: #fff; margin: 0; border-right: 1px solid #114D6B; border-left: 1px solid #000; }
#nav li a { display: block; font-weight: bold; color: #69b8e0; text-shadow: #000 1px 1px 0px; padding: 0 15px; line-height: 50px; }
#nav li a:hover, #nav li a.active { background: #114D6B; color: #fff; text-shadow: none; text-decoration: none; }
#nav li a#nav_parties i { height: 8px; width: 12px; display: inline-block; margin-left: 8px; background: transparent url(../images/arrow.png) no-repeat 0 0; }
#nav li a#nav_parties:hover i, #nav li a#nav_parties.active i { background-position: -12px 0; }

#subnav { background: #fff; width: 300px; position: absolute; left: 375px; z-index: 1; padding: 5px; top: 50px; border: 1px solid #114D6B; border-top: 0; display: none; }
#subnav ul li { width: 100px; float: left; }
#subnav ul li a { display: block; font-weight: bold; padding: 3px 10px; font-size: 12px; }
#subnav ul li a:hover { background: #114D6B; color: #fff; text-decoration: none; }

.inner { margin: 0px auto; clear: both; position: relative; width: 960px; }
.inner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#content { margin-bottom: 20px; }
#content .inner { padding: 20px 0; background: #fff; }
.col { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; min-height: 1px; }

.top_page { background: #eee; padding: 20px 0; border-bottom: 1px solid #ddd; }
.top_page h1, #top_page h2 { text-shadow: white 0px 1px 0px; }

.page_nav li { float: left; height: 35px; margin-right: 5px; }
.page_nav li.active { background: #fff; font-weight: bold; border: 1px solid #ddd; border-bottom: 1px solid #fff; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-bottom: -1px; }
.page_nav li.active a { text-decoration: none; line-height: 35px; }
.page_nav li a { display: block; line-height: 39px; padding: 0 10px; }

.col_1 { width: 60px; }
.col_2 { width: 140px; }
.col_3 { width: 220px; }
.col_4 { width: 300px; }
.col_45 { width: 340px; }
.col_5 { width: 380px; }
.col_6 { width: 460px; }
.col_7 { width: 540px; }
.col_8 { width: 620px; }
.col_9 { width: 700px; }
.col_10 { width: 780px; }
.col_11 { width: 860px; }
.col_12 { width: 940px; }

.cols { width: 306px; margin-right: 20px; float: left; min-height: 1px; margin-bottom: 20px; }

.cols h2 { margin-bottom: 10px; }
.cols .graph { margin-bottom: 20px; }

#footer { background: #053147; color: #fff; padding: 30px 0 20px 0; font-size: 13px; color: #ddd; }
#footer a { color: #69b8e0; }
#footer .about { margin-top: 10px; }
#footer .footer_logo { float: left; margin-right: 20px; position: relative; top: -10px; }
#footer small { font-family: Georgia; font-style: italic; font-size: 11px; margin-top: 10px; }
.infomsg { background: #D4EAF5; padding: 3px 6px; margin-bottom: 10px; font-size: 13px; }
.errormsg { background: #ffffe2; border: 1px solid #fff7b3; padding: 3px 6px; margin-bottom: 10px; }

/* Buttons */
.button { background: #A4CC28; border: 0; color: white; font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; padding: 6px 13px; border-radius: 3px; -moz-border-radius: 3px; webkit-border-radius: 3px; cursor: pointer; }
.button:hover { background: #8bae1f; }

.cta { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 18px; border: 1px solid #1890c7; background: #69B8E0; color: #fff; padding: 0 1em; margin: 0; line-height: 1.8; border-radius: 3px; display: inline-block; text-shadow: #1890c7 1px 1px 0; cursor: pointer; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, #52AFDD), color-stop(0.51, #69B8E0)); background-image: -moz-linear-gradient(center bottom, #52AFDD 50%, #69B8E0 51%); }
.cta:hover { text-decoration: none; color: #fff; }

/* Modal window
-------------------------------------------------------------- */
#fade { display: none; background: url('../images/smoke.png'); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; }
#modal_window { width: 590px; background: #fff; display: none; position: absolute; position: fixed; top: 12%; padding: 0; z-index: 99999; -webkit-box-shadow: 5px 5px 20px #000; -moz-box-shadow: 5px 5px 20px #000; box-shadow: 5px 5px 20px #000; -moz-border-radius: 6px; border-radius: 6px; }
#modal_window a.close_icon { background: url(../images/close_modal.png) no-repeat 0 0; border: 0; height: 24px; width: 24px; text-indent: -9999px; top: -12px; right: -12px; position: absolute; z-index: 1; cursor: pointer; }
#modal_window a.close_icon:hover { background-position: 0 -24px; }
#modal_window .inner { width: 560px; padding: 15px 15px; }

/* A Tweet
-------------------------------------------------------------- */
.tweet .avatar { float: left; width: 48px; height: 48px; margin: 5px 5px 5px 0; }
.tweet .party { font-size: 11px; color: #69B8E0; }
.tweet .tweet_text { color: #333; }
.tweet .meta { font-size: 11px; color: #999; margin-bottom: 10px; }
.tweet .meta span { margin-left: 5px; }
.tweet .meta .timestamp a { color: #999; }
.tweet .retweets { background: #69B8E0; color: white; padding: 3px 5px; border-radius: 4px; }
.tweet .replies { background: #ccc; color: white; padding: 3px 5px; border-radius: 4px; cursor: pointer; }
.tweet .replies:hover { background: #A4CC28; }
.tweet .actions i { height: 16px; width: 16px; background-image: url(../images/twitter_sprite.png); position: relative; display: inline-block; vertical-align: baseline; margin-right: 2px; top: 2px; }
.tweet .actions a { color: #69B8E0; }
.tweet .reply i { background-position: 0 0; }
.tweet .retweet i { background-position: 48px 0; }
.tweet .favorite i { background-position: 96px 0; }

/* A User
-------------------------------------------------------------- */
#head_user .col { margin-bottom: 0; }
#head_user h1 { margin-bottom: 0; line-height: 1.2; }
#head_user .avatar { float: left; margin-right: 20px; }
#head_user .twitter { background: url('../images/twitter-icon.png') no-repeat 0 50%; padding-left: 20px; }
#head_user .reply i { background-position: 0 0; height: 16px; width: 16px; background-image: url(../images/twitter_sprite.png); position: relative; display: inline-block; vertical-align: baseline; margin-right: 2px; top: 2px; }
#head_user .rank { background: white; border: 1px solid #DDD; height: 80px; width: 65px; font-size: 15px; float: left; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; text-align: center; margin: 5px; line-height: 1.3; }
#head_user .rank strong { font-size: 30px; }

.growth_rate { font-size: 12px; font-weight: bold; }
.plus { color: green; }
.minus { color: red; }

/* > Homepage
-------------------------------------------------------------- */
.last_update { font-size: 13px; font-weight: normal; color: #999; }
#tweet_scroller { overflow: hidden; position: relative; height: 110px; width: 960px; margin: 0px auto; }
#tweet_scroller .prev_next_button { position: absolute; width: 32px; height: 32px; background: url(../images/prev_next.png) no-repeat; text-indent: -9999px; top: 32px; cursor: pointer; }
#tweet_scroller #prev { left: 0; background-position: -32px 0; }
#tweet_scroller #next { right: 0; background-position: 0 0; }
#tweet_viewport { margin: 0 50px; overflow: hidden; position: absolute; width: 860px; height: 110px; }
#tweets_wrapper { width: 9999px; position: absolute; left: 0; top: 0; }

.tweet.featured .avatar { float: left; width: 100px; height: 100px; margin: 0 10px 0 0; }
.tweet.featured { margin-bottom: 20px; float: left; }
.tweet.featured .tweet_info { float: left; padding: 0 10px; font-size: 14px; width: 728px; border: 1px solid #DDD; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: #fff; }
.tweet.featured strong { font-size: 18px; }

.tweet.most_mentioned { border-bottom: 1px solid #ddd; margin-bottom: 10px; }
.tweet.most_mentioned .avatar { margin-right: 10px; }
.tweet.most_mentioned .meta { margin-left: 53px; }
.tweet.most_mentioned:last-child { border: 0; }

.tweet.most_mentioned div.replies_wrapper { display: none; margin-left: 58px; font-size: 11px; border-left: 3px solid #ddd; }
.tweet.most_mentioned div.replies_wrapper li { border-bottom: 1px dotted #ccc; padding: 3px; line-height: 24px; }
.tweet.most_mentioned div.replies_wrapper li:last-child { border: 0; }
.tweet.most_mentioned div.replies_wrapper .actions { display: none; }

.box_grey { padding: 10px; border: 1px solid #eee; background: #f2f2f2; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; margin-bottom: 20px; }
.box_white { padding: 10px; margin-bottom: 20px; }

.subscribe { background: url(../images/arrow_mailing.png) no-repeat 250px 44px; }
.subscribe h2 { color: #A4CC28; }
.subscribe label { font-size: 13px; display: block; margin-bottom: 5px; width: 250px; }
.subscribe input[type="text"] { font-size: 13px; color: #333; padding: 4px; width: 155px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.subscribe .icon_mail { background: url(../images/icon_mail.png) no-repeat 0 0; height: 32px; width: 32px; display: inline-block; vertical-align: bottom; margin-right: 8px; }
.email_feedback { font-size: 13px; color: #666; font-weight: bold; padding: 1px 5px; margin-top: 10px; }
.email_feedback.error { color: red; }
.email_feedback.success { color: green; }
.box_blue { padding: 10px; background: #e9f3f7; border: 1px solid #d8edf5; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; margin-bottom: 20px; }
#home_about p { margin-bottom: 10px; color: #666; }

/* > Parties
-------------------------------------------------------------- */
#head_party { background: #eee; padding: 20px 0; border-bottom: 1px solid #ddd; }
#head_party h1 { text-align: center; margin-bottom: 0; text-shadow: #fff 0px 1px 0px; }
#party_menu { padding-bottom: 20px; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
#party_menu div { float: left; margin-right: 40px; }
#party_menu div p span { font-size: 18px; font-weight: bold; color: #333; }

#chart_timeline_tweets { margin-top: 10px; }

.chart_wrapper { width: 460px; margin-right: 40px; margin-bottom: 40px; float: left; }

#latest_tweets_wrapper { position: relative; overflow: hidden; height: 320px; }
#latest_tweets { position: absolute; bottom: 0; }

#latest_tweets .tweet { clear: both; height: 69px; padding: 5px 0; border-bottom: 1px solid #ddd; }
#latest_tweets .tweet .avatar { width: 48px; height: 48px; display: block; float: left; margin: 5px; margin-left: 0; }
#latest_tweets .tweet p.body { font-size: 12px; padding-left: 54px; }
#latest_tweets .tweet .meta { font-size: 11px; color: #999; }
#latest_tweets .tweet .actions { font-size: 11px; float: right; }
#latest_tweets .tweet .actions .reply i { height: 15px; width: 15px; background: url(../images/twitter_sprite.png) no-repeat 0 0; display: inline-block; vertical-align: baseline; margin-right: 2px; position: relative; top: 2px; }

.user_profile { padding: 5px 0; border-bottom: 1px solid #ddd; overflow: hidden; }
.user_profile p { margin-bottom: 0; }
.user_profile .avatar { float: left; margin: 5px; margin-left: 0; height: 48px; width: 48px; }
.user_profile .description { font-size: 11px; color: #888; padding-left: 54px; }
.user_profile .number { text-align: right; float: right; }
.user_profile .party { font-size: 11px; color: #69b8e0; font-weight: normal; }
.user_profile .meta { font-size: 13px; }
.user_profile .tweet_text { color: #333; }
.user_profile .reply { font-size: 11px; float: right; position: relative; color: #69B8E0; }
.user_profile .reply i { height: 15px; width: 15px; background: url(../images/twitter_sprite.png) no-repeat 0 0; display: inline-block; vertical-align: baseline; margin-right: 2px; position: relative; top: 2px; }

.small_user_profile { padding: 3px; border-bottom: 1px solid #eee; overflow: hidden; }
.small_user_profile p { line-height: 28px; font-size: 13px; }
.small_user_profile .avatar { float: left; margin-right: 5px; height: 28px; width: 28px; }

.user_list .user_profile { margin-right: 10px; float: left; width: 230px; }
.user_list .user_profile .reply { float: none; top: -4px; color: #69B8E0; }

/* > Rate tweets
-------------------------------------------------------------- */
#to_rate { background: #eee; padding: 10px 20px; border-radius: 5px; }
.rateable { display: none; }

/* Top 100 Page
-------------------------------------------------------------- */
.top100_list li { border-bottom: 1px solid #DDD; float: left; }
.top100_list .rank { height: 50px; width: 50px; float: left; font-size: 30px; font-weight: bold; line-height: 50px; padding: 10px; position: relative; }
.top100_list .rank span { position: absolute; left: -20px; top: 22px; font-size: 11px; height: 28px; width: 25px; text-indent: 7px; line-height: 32px; color: white; font-size: 9px; }
.top100_list .rank span.up { background: url(../images/up_down.png) no-repeat 0 0; }
.top100_list .rank span.down { background: url(../images/up_down.png) no-repeat 0 -28px; }
.top100_list .user_profile { width: 500px; border-bottom: 0; float: left; }
.top100_list .rank_info { width: 110px; float: left; height: 50px; padding: 10px; text-align: center; line-height: 1.3; font-size: 11px; }
.top100_list .rank_info strong { font-size: 20px; }
#pie_by_party { margin-bottom: 20px; }

/* Compare
-------------------------------------------------------------- */
#compare_form { float: left; margin-left: 20px; }
#compare_form form input[type='text'] { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #CCC; margin: 7px 0; padding: 5px; width: 240px; font-size: 20px; border-radius: 3px; -moz-border-radius: 3px; font-weight: bold; }
#compare_form form .cta { margin-left: 5px; font-size: 22px; line-height: 1.6; }

#comparisonTable { width: 100%; }
#comparisonTable th { text-align: left; padding: 0px 5px; border-right: 1px solid #eee; background: #f2f2f2; }
#comparisonTable th .user_profile { border: 0; padding: 0; }
#comparisonTable tr:nth-child(even) { background: #f2f2f2; }
#comparisonTable tr:nth-child(odd) { background: #fff; }
#comparisonTable tr td { font-size: 20px; font-weight: bold; height: 40px; padding: 0px 5px; vertical-align: middle; width: 240px; border-right: 1px solid #eee; }
#comparisonTable tr td .meta { font-size: 13px; font-weight: bold; }
#comparisonTable tr td h4, #comparisonTable tr td h3 { margin: 0; }
#comparisonTable tr td:first-child { width: 200px; color: #053147; }

form .row { margin-bottom: 20px; }
form .row label { width: 140px; display: inline-block; height: 26px; line-height: 26px; }
form .row input.text { width: 350px; height: 26px; font-weight: bold; color: black; font-size: 18px; float: right; padding: 0 3px; font-family: 'Helvetica', Arial, sans-serif; }

/* Pro
-------------------------------------------------------------- */
#top_pro { padding-bottom: 0; }
#top_pro .usp li { font-size: 26px; text-shadow: white 0px 1px 0px; background: url(../images/usp_tick.png) no-repeat 0 0; line-height: 36px; margin: 15px 0; text-indent: 40px; }
#top_pro .cta { margin: 20px 0; }

#signupForm .cta { float: right; margin-top: 10px; }

#signupForm .plan_type { cursor: pointer; padding: 5px 10px 10px; border: 1px solid #fff; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 5px; }
#signupForm .plan_type.active { background: #e4f2fa; border: 1px solid #cce9fa; }
#signupForm .plan_type.active:hover { background: #e4f2fa; border: 1px solid #cce9fa; }
#signupForm .plan_type:hover { cursor: pointer; background: #eee; border: 1px solid #ddd; }
#signupForm .plan_type h2 { margin-bottom: 5px; }
#signupForm .plan_type input[type="radio"] { position: absolute; top: -9999px; }

#progress_bar { background: #eee; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; margin-bottom: 25px; }
#progress_bar li { display: inline-block; height: 37px; line-height: 37px; }

#progress_bar li a { display: block; font-weight: bold; font-size: 14px; color: #c2bebe; padding: 0 12px; }
#progress_bar li a:hover { color: #19558D; text-decoration: none; }
#progress_bar li.active { background: url(http://politweets.es/images/arrow_step.png) no-repeat top right; }
#progress_bar li.active a { color:#fff; background: #69B8E0; }
#progress_bar li span { background-image: url(../images/progress_bar_sprite.png); background-repeat: no-repeat; text-indent: -9999px; height: 30px; width: 30px; display: inline-block; margin-right: 2px; position: relative; top: 3px; }
#progress_bar li.step1 span { background-position: 0 -60px; }
#progress_bar li.step1 a:hover span { background-position: 0 -30px; }
#progress_bar li.step1.active a:hover span { background-position: 0 0; }
#progress_bar li.step1.active span { background-position: 0 0; }
#progress_bar li.step2 span { background-position: -30px -60px; }
#progress_bar li.step2 a:hover span { background-position: -30px -30px; }
#progress_bar li.step2.active a:hover span { background-position: -30px 0px; }
#progress_bar li.step2.active span { background-position: -30px 0; }
#progress_bar li.step3 span { background-position: -60px -60px; }
#progress_bar li.step3 a:hover span { background-position: -60px -30px; }
#progress_bar li.step3.active a:hover span { background-position: -60px 0; }
#progress_bar li.step3.active span { background-position: -60px 0; }

#step1, #step2, #step3 { padding: 0 25px; }