/* ---------------------------------------------
LongRep.ly Screen Stylesheet
author: MailChimp Labs
version:  2011.02
----------------------------------------------- */


/*Reset Styles ------------------------------------------------------ */
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, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, 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-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
:focus {outline:0;}
body {line-height:1; color:black; background:white;}
ol, ul {list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
p {margin:5px 0 10px 0;}

/*General Selectors ------------------------------------------------------ */
html {background-color:#3E414A;}
body {color:#3A414A; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px;}
a {color:#794478;}

h2, h3, h4, h5, legend {font-family:Georgia, "Times New Roman", serif; font-style:italic; font-weight:normal;}
h2 {font-size:36px; line-height:42px;}
h3 {font-size:22px; line-height:26px;}
h4 {font-size:18px; line-height:20px; padding:20px 0 10px 0;}

/*Grid Classes ------------------------------------------------------ */
.line, .lastUnit {overflow:auto;_overflow:visible;_zoom:1;}
.unit{float:left;_zoom:1;}
.size1of1{float:none;}
.size1of2{width:45%; margin-right:5%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.size1of2.nogutter{width:50%; margin-right:0;}
.size1of3.rgutter{width:28.33333%;}
.size2of3.rgutter{width:61.66666%;}
.size1of4.rgutter{width:20%;}
.size3of4.rgutter{width:70%;}
.size1of5.rgutter{width:15%;}
.size2of5.rgutter{width:35%;}
.size3of5.rgutter{width:55%;}
.size4of5.rgutter{width:75%;}
.rgutter {margin-right:5%;}
.lastUnit {float:none;_position:relative; _left:-3px; _margin-right:-3px; width:auto;}

/*Utility Classes ------------------------------------------------------ */
.hide {display:none;}
.clear {clear:both;}
.clear-right {clear:right;}
.clear-left {clear:left;}
.float-left {float:left !important;}
.float-right {float:right !important;}
.ralign {text-align:right;}
.lalign {text-align:left;}
.floatnone {float:none !important;}
.inline {display:inline;}
.margin-bottom {margin-bottom: 20px;}
.margin-top {margin-top: 20px;}
.small-meta {font-size:11px; color:#999;}
.above-below15 {margin:15px 0;}

.rounded, .av-flash, button, .button, .button-small, .navigation li a {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}

/*ID & Class Selectors ------------------------------------------------------ */
#wrapper {background:#CDD5DA url("/img/bg-headergradient.png") repeat-x left top; width:100%;}
#container {width:800px; margin:0 auto; padding:0 0 20px 0;}
#header {min-height:115px; padding:25px 0 0 0; position:relative;}
#logo {height:90px; position:relative; width:240px;}
#logo a {display:block; height:90px; background:url("/img/longthedog.png") no-repeat 30px 1px; font-size:1px; text-indent:-9999px; outline:none;}
#logo a:hover {opacity:.9;}
#utilityNavigation {margin:28px 0 0 0; text-align:right;}
.navigation li {display:block; margin:0;}
.navigation li {display:block; float:left; margin:0 0 0 10px; padding:0 0 8px 0; background:url("/img/nav-active.png") -9999px 0 no-repeat;}
.navigation li.active {background-position:center bottom;}
.navigation li a {display:block; font-size:13px; color:#484d5c; text-decoration:none; text-transform:uppercase; background:none; padding:14px 16px;}
.navigation li a:hover {background:#3d414b; color:#ced6dc;}
.navigation li.active a,.navigation li.active a:hover {background-color:#7b4679; color:#e3e8eb;}
/*
.navigation a {display:block; float:left; margin:0 0 0 35px; height:35px; font-size:13px; font-weight:bold; text-decoration:none; text-transform:uppercase; background:url("/img/nav-active.png") -9999px 0 no-repeat;}
.navigation a:hover, #utilityNavigation a.active {color:#484d5c; text-shadow:1px 1px 0 #fff;}
.navigation a.active {background-position:center bottom;}
*/
#subNavigation { text-align:left;}

#accountManagement {background-color:#E5E6E8; border:1px solid #E5E6E8; margin:0 0 25px 0; padding:10px;}

#linkedAccounts {padding:10px 0 0 0;}
#accountInvites {padding:10px 0 0 0; margin: 10px 0 0 0; border-top:1px solid #B7BEC4; }
.addAccount {margin:6px 0 0 0;}
.account a:link, .account a:visited {font-size:12px; text-decoration:none;}
.account strong a {font-weight:bold;}
.account {font-size:13px; line-height:14px; padding:10px 0 0; width:259px;}
.account span {font-weight:bold;}
.accountDetails {color:#707070; font-size:10px; font-style:italic; margin:0 0 3px 0;}
ul.multiuser {display:block; margin:30px 0 10px 0;}
ul.multiuser li {font-size:11px; display:block; padding:0 5px 0 0;}
ul.multiuser li strong {font-size:14px; font-weight: normal;}
#content {padding:10px 0 25px 0;}
#repliesSortBar {background-color:#E5E6E8; border:1px solid #E5E6E8; color:#484D5C; height:26px; margin:0 0 10px 0; padding:5px 5px 0 10px;}
#repliesSortBar label, #repliesViewBar label, #viewNumber p {color:#3F4450; font-size:10px; font-weight:bold; margin:0 0 0 10px; text-transform:uppercase;}
.repliesTimeline{}
.repliesEvent {padding:10px; margin:0 0 10px 0; width:780px;}
.repliesEvent.odd{}
.repliesEvent.even {background-color:#DCE2E5; border:1px solid #DCE2E5;}
.tweet {position:relative;}

.isReplyTo {background:url("/img/bg-replyarrow.png") no-repeat 15px 0; margin:15px 0 0; padding:0 0 0 63px; position:relative;}
.tweet p {padding-left:60px; /* These widths are just messing up ie... width:725px*/;}
.longReply p {padding-left:60px; /*width:565px*/;}
.longReplyMenu {float:right; width:85px; margin-left:10px; font-size:12px; text-align:center;}
.longReplyMenu li {display:block; height:30px;}
.longReplyMenu li a {display:inline; margin:0 auto;}
.longReplyMenu a:link, .longReplyMenu a:visited {text-decoration:none;}

.twitterIcon {background:url("http://jasongraphix.com/sandbox/bg-avatarbg3.png") no-repeat 0 0; float:left; margin:0 6px 6px 0; width:78px; min-height:65px;}
.twitterIcon img {width:53px; height:53px; padding:6px;}
.tweet:hover .twitterIcon, .longReply:hover .twitterIcon {background-position:0 -120px;}

.tweetDetails {font-size:12px; line-height:15px; margin:10px 0 0 0;}
.tweetDetails a:link, .tweetDetails a:visited {color:#3E414A; font-weight:bold; text-decoration:none;}
.tweetDetails a:hover, .tweetDetails a:active {border-bottom:1px solid;}
h4.nolongreplies {line-height:40px; font-size:30px; text-align:center; padding:30px 0 10px 0; color:#9ca4ad; text-shadow:0 1px 1px #fff;}
.post-as {float: right; padding: 10px 20px;}

#loading-tweet {text-align:center; padding:50px 0;}
#loading-tweet .loading {font-size:18px; padding-left:24px; background:url("/img/loading-spin.gif") no-repeat left center;}

#tweetbody {display:block; width:96%; padding:10px; font-size:14px; font-family:arial; margin:5px 0 5px 0;}

#repliesViewBar {background-color:#E5E6E8; border:1px solid #E5E6E8; color:#484D5C; height:26px; margin:25px 0 0; padding:5px 10px 0 0;}
#viewNumber p {margin:0 0 0 5px; padding-top:2px;}
#showTweets {width:50px;}
#pageNavigation li {display:inline; font-weight:bold;}
#pageNavigation a:link, #pageNavigation a:visited {font-size:12px; margin:0 0 0 3px; text-decoration:none;}
#pageNavigation a:hover, #pageNavigation a:active {border-bottom:2px solid;}
#footer {background:#3E414A url("/img/bg-footergradient.png") repeat-x left top; color:#888B92; font-size:12px; line-height:16px; min-height:100px; padding:10px 0 0 0;}
#footer a:link, #footer a:visited {color:#888B92; text-decoration:underline;}
#copyright {margin:0 auto; padding:10px 0; width:800px; line-height:18px;}
#copyright p.mailchimplabs {padding:0 45px 0 0; margin:0; background:url("/img/mclabsbeaker.png") no-repeat right 3px;}
.divider {background-color:#E5E6E8; border-top:1px solid #B7BEC4; height:1px; clear:both;}
.divider-bottom {background-color:#E5E6E8; border-bottom:1px solid #B7BEC4; height:1px; clear:both;}

#header .divider {position:absolute; right:0; top:110px; width:100%;}
.tweet .divider {position:absolute; right:10px; top:76px; width:68%;}
.longReply .divider {bottom:2px; position:absolute; right:10px; width:61%;}

.amp {font: italic 110%/100% Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif;}

.browserbox {display:block; padding:5px; float:left;width:175px; height:80px; background:#e6e7e9; position:relative;}
.browserbox.active {background:#fff;}
	.browserbox a.extlink {display:block; position:absolute; top:0; left:0; padding:28px 0 0 60px; width:135px; height:72px; margin:-10px 0 0 -10px; line-height:14px; color:#666; text-decoration:none;}
	.browserbox a.extlink strong {display:block; padding:4px 0; font-size:16px; font-family:Georgia, "Times New Roman", serif; font-weight:normal; font-style:italic; color:#333;}
	.browserbox small {position:absolute; top:100px; left:0; font-size:11px;}
		.browserbox.firefox {margin-right:25px;}
		.browserbox.firefox a.extlink {background:url("/img/firefox-logo.png") no-repeat;}
		.browserbox.chrome a.extlink {background:url("/img/chrome-logo.png") no-repeat;}

button, .button, .button-small {float:right; display:inline-block; width:auto; font-size:16px; line-height:30px; height:30px; margin-right:20px; padding:0 22px; text-decoration:none; cursor:pointer; border:0; text-shadow: 0px 1px 1px rgba(0,0,0,.4); -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.2); -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.2); box-shadow: 1px 2px 3px rgba(0,0,0,.2); color:#fff !important; border:1px solid #58626c !important; background-color:#6c747d; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#818a94), to(#575f67)); background: -moz-linear-gradient(top, #818a94, #575f67);}
fieldset .button, fieldset .button-small {margin-right:0;}
.button-small {float:none; display:inline-block; height:auto; line-height:18px; padding:0 10px !important; font-size:12px;}
button:hover, .button:hover, .button-small:hover {-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.4); -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.4); box-shadow: 1px 2px 3px rgba(0,0,0,.4); background-color:#58626c; background-image:none;}

fieldset.formwrap {display:block; position:relative; clear:both; padding:25px 20px 10px 20px; margin:10px 0 15px 0; border:none; background:#e6e7e9;}
	fieldset.formwrap legend {position:relative; top:0; left:0; margin:0 0 0 -20px; padding:5px 20px 5px 20px; font-size:18px; line-height:20px; height:20px; background:#cdd5da; color:#333; border-bottom:1px solid #fff; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px;}
	#accountManagement fieldset.formwrap {background:#dbdcdf}
	#accountManagement fieldset.formwrap legend {background:#e5e6e8}


.fieldwrap {padding:1px; margin:0 0 10px 0; position:relative; border:1px solid #aaaaaa; border-left-color:#fff; border-bottom-color:#fff; background-color:#ebebeb; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#ebebeb)); background: -moz-linear-gradient(top, #f5f5f5, #ebebeb);}
	.fieldwrap label {display:block; float:left; width:33%;  margin:0 2% 0 0; padding:4px 0 5px 0; color:#666; font-size:14px; text-align:right;}
	.fieldwrap input {display:block; width:64%; padding:5px 0; border:none; background:none; color:#333; font-size:14px;}
	.fieldwrap input:focus {border:none;}
	.fieldwrap .invalid-error {display:block; font:italic 12px/18px Georgia, "Times New Roman", serif; margin:0 0 0 35%; color:#682d67; }

.fieldwrap.active {background:#fff; background-image:none;}
	.fieldwrap.active label {color:#000;}
.fieldwrap.error {background:#ddcddd; border:1px solid #794478; background-image:none;}
	.fieldwrap.error label {color:#794478}
.fieldwrap.help {font-style: italic;}

.av-flash, #acct-messages.error {background:#ddcddd; border:1px solid #794478; color:#794478; margin:0 0 20px 0; padding:5px 20px;}

/*.checkbox,.radio {background: url("") no-repeat; clear: left; display: block; float: left; height: 25px; padding: 0 5px 0 0; width: 19px;}
.radio {background: url("") no-repeat; z-index: 888;}
*/
.select {background: url("../img/bg-formselect.png") no-repeat; color: #FFFFFF; font: 12px/ 21px arial, sans-serif; height: 21px; overflow: hidden; padding: 0 8px 0 8px; position: absolute; text-shadow: 1px 1px 1px #505050; width: 124px; /* With the padding included, the width is 190 pixels: the actual width of the image. */}
#selectshowTweets {background: url("../img/bg-formselect_small.png") no-repeat; color: #FFFFFF; font: 12px/ 21px arial, sans-serif; height: 21px; overflow: hidden; padding: 0 22px 0 8px; position: absolute; text-shadow: 1px 1px 1px #505050; width: 20px; /* With the padding included, the width is 190 pixels: the actual width of the image. */}

.twitter-user-icon {max-height: 53px; max-width: 53px;}

.searches { clear:both; width:830px; height:1000px; padding-top:20px;}
.search-controls ul {position:absolute; top:10px; right:10px; display:inline;}
.search-controls ul li {float:left; display:inline-block; padding-left:10px;}
a.icon-20 {display:inline-block; opacity:.55; width:20px; height:20px; background:url(/img/icons-20.png) no-repeat; text-indent:-9999px;}
a.icon-20:hover {opacity:.95;}
a.s-refresh {background-position:0 -20px; margin-right:5px;}
a.s-min {background-position:0 -40px;}
a.s-max {background-position:0 -60px;}
a.s-move {background-position:0 -80px;}
a.s-settings {background-position:0 -100px;}
a.s-reports {background-position:0 -120px;}

.tweetSentiment {background:url(../img/sentiment30-sprite.png) -999px 0 no-repeat; float:right; height:30px; width:30px; text-indent:-999px;}
.tweetSentiment.positive {background-position:0 0;}
.tweetSentiment.neutral {background-position:0 -30px;}
.tweetSentiment.negative {background-position:0 -60px;}

.search {position:relative; height: 842px; width:387px; margin:0 25px 25px 0; float:left; overflow: hidden;  background:#3E414A; margin-bottom: 20px;}
.search .last-pulled, .search-alert { font-size:12px; line-height: 20px; background:#afb8bf; padding:5px 10px; margin:-10px 0 0 0; vertical-align: text-bottom;}
.search-title {color:#a7a9ad; font-size:18px; font-weight:bold; line-height:16px; min-height:30px; text-align:left; padding: 10px 0 10px 10px;}
.search-results {max-height:750px; overflow:auto; background:#fff;}
.search-result {border-bottom:1px solid #B7BEC4; padding:8px;}
.search-result .tweet { word-wrap: break-word; min-height: 90px;}
.search-results .more {cursor: pointer; text-align: center; text-decoration: underline; }
.search-result.even {background-color:#c4cfd5; }
.search-result.odd {background-color:#DCE2E5; }
.search-result .button-small {padding:0 8px !important; margin-left:5px;}
.search-results .replies { background: #DDCDDD; text-align: center; }
#s-help .button {margin:0;}

#mission p {margin-top: 10px;}
#mission {min-height:220px;}

.fourohfour {padding-left:250px;} 
.fourohfour h2 {font-size:70px; line-height:90px;}
div.last-pulled .av-checkbox {vertical-align: bottom;}

/* Add Basic HTML Formatting Back in for Long Reply Text
 -------------------------------------------------------------------- */
.lr {margin-left:60px;}
.draft {margin-left: 0px;}
.draft span {color: #a0a0a0;}
.draftflag {position:absolute; top:45px; left:0; color:#b3b7bb; width:60px; text-align:center; text-transform:uppercase; font-size:11px;}
.lr h2, .lr h3, .lr h4 {font-weight:bold; margin:0; padding:3px 0 8px 0; clear:both;}
.lr h2 {font-size:25px; line-height:30px;}
.lr h3 {font-size:18px; line-height:24px;}
.lr h4 {font-size:16px; line-height:20px;}
.lr p {padding:0 0 20px 0; margin:0;}
.lr ul, .lr ol {padding:5px 30px; margin:0;}
.lr li {padding:0 0 5px 0; margin:0;}
.lr ul li {list-style:disc;}
.lr ol li {list-style:decimal;}
.lr table {text-align:left; padding:5px 0;}
.lr table th {padding:4px 5px; border-bottom:1px solid #333; font-weight:bold; line-height:18px; text-align:left;}
.lr table td {padding:4px 5px; line-height:16px; border-bottom:1px solid #aaa;}
.lr table tr.even td {background-color:#eee;}
.lr p strong, .lr p b {font-weight: bold;}
.lr p em, .lr p i {font-style: italic;}

#editor {padding-bottom: 10px;}