@import url("base.css");

body { text-align: center; width: 100%; background: #212125; }
h1 { color: #004358; font-size: 1.6em; font-weight: bold; }
h2 { color: #666; font-size: 1.3em; font-weight: bold; }
h3 { color: #666; font-weight: bold; font-size: 1.1em; }
h3.shaded { height: 34px; color: #BEDB39; margin: 0 0 5px 0; }
h3.shaded em { font-weight: bold; color: White; }
h3.shaded .m { float: left; position: relative; left: -.5em; background: url("/media/img/subheader-mid.png") repeat-x center; }
h3.shaded .l { background: url("/media/img/subheader-left.png") no-repeat left center; }
h3.shaded .r { padding: 8px .5em 8px .5em; background: url("/media/img/subheader-right.png") no-repeat right center; }
p { font-size: 1.2em; line-height: 1.4em; }
input, textarea { color: #004358; font-family: "Segoe UI" , "Helvetica Neue" , Arial, Sans-Serif; font-weight: bold; font-size: 1.1em !important; }
input.label, .quiet { color: #CCC; }
li.facebook { background: url("/media/img/icons/facebook_25.png") no-repeat top left; }
li.linkedin { background: url("/media/img/icons/linkedin_25.png") no-repeat top left; }
li.twitter { background: url("/media/img/icons/twitter_25.png") no-repeat top left; }
li.myspace { background: url("/media/img/icons/myspace_25.png") no-repeat top left; }
li.email { background: url("/media/img/icons/email_25.png") no-repeat top left; }
li.other { background: url("/media/img/icons/bubble_25.png") no-repeat top left; }

.shell { position: relative; width: 960px; margin: 0 auto; text-align: left; clear: both; }

#campaign { position: relative; z-index: 10; }
#campaign h1 { margin: 0 0 .2em 0; }
#campaign h3 { font-size: 1em; }
#campaign p { font-size: 1.2em; }
#campaign .details { width: 400px; padding: 40px 0 30px 20px; }
#campaign .thumbnail { position: absolute; top: 90px; left: 435px; }

.widebox { position: relative; float: left; width: 760px; z-index: 20; }
.widebox .t { background: url("/media/img/widebox-top.png") no-repeat top; height: 12px; }
.widebox .m { background: url("/media/img/widebox-mid.png") repeat-y center; }
.widebox .b { background: url("/media/img/widebox-bot.png") no-repeat bottom; height: 12px; }

.sidebar { float: left; width: 200px; font-size: .8em; padding: 30px 0 0 0; }
.sidebar h3 { color: #004358; text-transform: uppercase; border-bottom: solid 1px #CCC; padding: 0 0 5px 20px; }
.sidebar p { overflow: auto; padding: 1em 5px 2em 20px; }
.sidebar a.sendNote { display: block; float: left; margin: 1em 0 0 0; color: #1F8A70; text-decoration: none; padding: 0 0 1px 0; border-bottom: dotted 1px #CCC; }
.sidebar a.sendNote:hover { color: #004358; }
.sidebar ul.buzzers { font-size: 1.1em; padding: 1em 5px 3em 20px; }
.sidebar ul.buzzers li { color: #000; padding: 0 0 15px 30px; }
.sidebar ul.buzzers li em { display: block; font-size: .9em; color: #7D7D7D; }

a.flipto-tag { display: block; width: 60px; height: 24px; margin: 0 0 2em 680px; background: url("/media/img/flipto-tag.png") no-repeat right top; }
a.flipto-tag:hover { background-position: right -37px; }
a.btn-light { display: block; float: left; color: #FD7400; font-size: .9em; font-weight: bold; text-decoration: none; cursor: hand; background: url("/media/img/btn-light-right.png") no-repeat right center; }
a.btn-light span { display: block; float: left; padding: 15px 1em 15px 1em; background: url("/media/img/btn-light-left.png") no-repeat left center; }
a.btn-light:hover { cursor: hand; color: #004358; }

#user-stats { overflow: auto; padding: 1em 18px 0 18px; margin: 0 2px 0 2px; background: url("/media/img/gradient-light-bot.png") repeat-x bottom; }
#user-stats a { color: #FD7400; text-decoration: none; border-bottom: dotted 1px #CCC; }
#user-stats a:hover { color: #004358; }
#user-stats ul.actions { font-size: 1.2em; margin: 2em 0 0 40px; }
#user-stats ul.actions li { position: relative; padding: 3px 0 12px 40px; }
#user-stats ul.actions li .checkmark { width: 17px; height: 15px; position: absolute; top: 2; left: -30px; background: url("/media/img/checkmark.png") no-repeat top left; }
#user-stats .people { font-size: 1.2em; background: url("/media/img/people.png") no-repeat top left; padding: 15px 0 20px 65px; margin: 0 0 0 15px; }
#user-stats .people a { color: #666; }
#user-stats .people a:hover { color: #004358; }

#group-stats { overflow: auto; padding: 0 0 1em 0; margin: 2em 0 0 0; }
#group-stats .chart { float: left; position: relative; }
#group-stats .chart em { display: block; color: #004358; }
#group-stats .chart .summary { float: left; width: 100px; padding: 2em 20px 0 20px; text-align: center; }
#group-stats .chart .summary .you { padding: 5px 0 0 0; }
#group-stats .chart .traffic { position: absolute; bottom: 0; left: 80px; text-align: right; }
#group-stats .chart .summary strong { display: block; color: #BEDB39; font-size: 1.4em; }
#group-stats .chart .summary strong.alt { color: #004358; }
#group-stats .chart ul { float: left; }
#group-stats .chart ul li { float: left; width: 50px; text-align: center; padding: 0 10px 0 10px; }
#group-stats .chart ul .bar { margin: 0 auto 0 auto; width: 28px; }
#group-stats .chart ul .bar .top { background: url("/media/img/barchart-top.png") no-repeat top center; }
#group-stats .chart ul .bar .mid { background: url("/media/img/barchart-mid.png") repeat-y center; }
#group-stats .chart ul .bar .bot { background: url("/media/img/barchart-bot.png") no-repeat bottom center; }
#group-stats .chart ul .title { font-size: 1.1em; font-weight: bold; color: #000; margin: 5px 0 5px 0; }
#group-stats .goals { float: left; margin: 5px 0 0 30px; }
#group-stats .goals .title { font-size: 1.1em; margin: 0 0 2em 0; }
#group-stats .goals .title em { font-weight: bold; font-size: 1.1em; color: #BEDB39; padding: 0 .5em 0 0; }
#group-stats .goals table { margin: 0 1em 0 10px; font-size: 1.1em; }
#group-stats .goals .star td { font-weight: bold; color: #000; }
#group-stats .goals .others td { font-size: .9em; }
#group-stats .goals .highlight td { font-weight: bold; color: #004358; }
#group-stats .goals .star td.icon { width: 18px; }
#group-stats .goals .last td.name, #group-stats .goals .last td.clicks { border-bottom: solid 1px #CCC; }
#group-stats .goals td { padding: 4px 5px 4px 5px; }
#group-stats .goals td.clicks { padding-left: 3em; text-align: center; }

.dialog h2 { font-size: 1.1em; color: #004358; padding: 0 0 3em 0; }
.dialog .logo { height: 50px; }

.dialog .post-text { margin: 3em 0 4em 0; font-size: 1.4em; color: #004358; }
.dialog .post-text a { color: #004358; font-weight: bold; text-decoration: none; padding: 0 0 1px 0; border-bottom: dotted 1px #CCC; }
.dialog .post-text a:hover { color: Black; }
.dialog .post-instr, .dialog .post-confirm { font-size: 1em; }
.dialog .post-confirm { color: #FD7400; }
.dialog .post-confirm span.check { color: #888; }
.dialog .post-confirm span.question { display: block; color: #FD7400; padding: 1em 0 0 0; }
.dialog .post-confirm a { color: #004358; text-decoration: none; padding: 0 0 1px 0; border-bottom: dotted 1px #CCC; }
.dialog .post-confirm a:hover { color: Black; }
.dialog .post-actions { overflow: auto; padding: 1em 0 0 0; }
.dialog a.close-dialog { color: #AAA; font-size: .9em; text-decoration: none; border-bottom: dotted 1px #CCC; position: relative; top: 15px; margin: 0 0 0 1em; }
.dialog a.close-dialog:hover { color: #004358; }
.dialog .confirm-post { display: none; }
.dialog .input-group { margin: 2em 0 0 0; padding: 5px 0 5px 5px; background: #EEE; position: relative; left: -5px; }
.dialog .input-group input { font-size: 1.1em; border: solid 1px #CCC; padding: 1px; }
.dialog .input-group .firstName, .dialog .input-group .lastName { margin: 0 5px 0 0; width: 90px; }
.dialog .input-group .email { width: 190px; }

.error-page { width: 400px; margin: 40px auto 0 auto; }
.error-page h1 { color: #CCC; font-size: 3em; padding: 0 0 10px 0; }
.error-page h2 { font-size: 1.2em; padding: 0 0 1em 0; }
.error-page h3 { font-weight: normal; }
.error-page a { color: #FD7400; text-decoration: none; border-bottom: dotted 1px #CCC; }
.error-page a:hover { color: #004358; }

#review { position: relative; width: 760px; margin: 60px auto 0 auto; text-align: left; clear: both; }
#review .logo { padding: 0 0 30px 0; }

#review .widebox h2 { color: #333; line-height: 1.4em; width: 640px; padding: 0 0 30px 0; font-weight: normal; }
#review .widebox h2 img.asterisk { position: relative; top: -3px; left: 4px; }
#review .widebox h2 p { font-size: 1em; }
#review .widebox .top { padding: 20px 30px 40px 30px !important; background: #FFF !important; border: solid 2px #CCC; border-bottom: none; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
#review .widebox .bot { background: #FAFAFA; border-left: solid 2px #CCC; border-right: solid 2px #CCC; border-bottom: solid 2px #CCC; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
#review .widebox .bot .text-shell { padding: 20px 0 24px 50px; border-top: dotted 1px #CCC; }
#review .widebox .bot .text { font-size: 1.2em; line-height: 1.4em; color: #8D8D8D; width: 520px; padding: 0 0 0 45px; background: url("/media/img/asterisk-large.png") no-repeat 0 2px; }
#review .widebox .bot .text p { font-size: 1em; }
#review .widebox .bot.blank { padding: 10px; background: #FFF; }

#post { position: relative; margin: 0 0 0 4px; }
#post ul.actions { position: absolute; top: 4px; left: 490px; }
#post ul.actions li { position: relative; padding: 3px 0 12px 30px; }
#post ul.actions li .checkmark { width: 17px; height: 15px; position: absolute; top: 4px; left: -24px; background: url("/media/img/checkmark.png") no-repeat top left; }
#post ul.actions a { color: #FD7400; font-size: 1.1em; font-weight: bold; text-decoration: none; padding: 0 0 1px 0; border-bottom: dotted 1px #CCC; }
#post ul.actions a:hover { color: #004358; }
#post ul.actions a.checked { color: #BBB; border-bottom: none; padding: 0 24px 0 0; background: url("/media/img/checkmark.png") no-repeat top right; }
#post ul.actions li.help a { color: #AAA; font-size: .9em; margin: 5px 0 0 0; }
#post ul.actions li.help a:hover { color: #888; }
#post .next { text-align: center; }
#post .next .btn { margin: 30px auto 0 auto; }

.postbox-shell { width: 460px; text-align: left; }
.postbox { color: #004358; background: #FFF; font-size: 1.4em; line-height: 1.5em; font-weight: bold; padding: 16px 30px 20px 30px; border: solid 3px #DDD; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.postbox a { color: #AAA; }
.postbox a:hover { color: #888; }

#review .reviewbox-shell { margin: 0 30px; }
#review .reviewbox { border: 3px solid #DDD; overflow: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; text-align: center; padding: 20px 30px; background: #FFF; }
#review .reviewbox p { margin: 0 0 16px 0; padding: 0; font-size: 1.3em; }
#review .reviewbox textarea { font-size: 1.3em !important; width: 500px; height: 60px; border: 1px solid #DDD; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 6px; }
#review .reviewbox .optional { margin: 24px 4px 0 4px; padding: 20px 0 0 0; border-top: dotted 1px #CCC; }
#review .reviewbox .optional textarea { height: 40px; }
#review .reviewbox .rating-stars { padding: 10px 0 0 0; width: 330px; margin: 0 auto; }
#review .reviewbox .rating-stars.to10 { width: 605px; }
#review .reviewbox .rating-stars label { display: none; }
#review .btn { margin: 30px 0 0 0; }

#review .tripadvisor img { float: left; margin: 0 10px 0 20px; }
#review .tripadvisor .details { padding: 0 10px; }
#review .tripadvisor .details .btn { margin: 0 0 20px 0; }