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


/*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, em, font, img, ins, kbd, q, s, samp, small, strike, strong, 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:"" "";}

/*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:32px; line-height:40px;}
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;}
.float-right {float:right;}
.ralign {text-align:right;}
.lalign {text-align:left;}
.floatnone {float:none;}
.inline {display:inline;}

/*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/logo.png") no-repeat left top; font-size:1px; text-indent:-9999px; outline:none;}
#utilityNavigation {margin:51px 0 0 0; text-align:right;}
#utilityNavigation li {display:inline; margin:0;}
#utilityNavigation 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;}
#utilityNavigation a:hover, #utilityNavigation a.active {color:#484d5c; text-shadow:1px 1px 0 #fff;}
#utilityNavigation a.active {background-position:center bottom;}

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

#linkedAccounts {padding:10px 0 0 0;}
#addAccount {margin:6px 0 0 5px;}
.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;}
#content {padding:10px 0 25px 0;}
#repliesSortBar {-moz-border-radius:5px; -webkit-border-radius:5px; background-color:#E5E6E8; border:1px solid #E5E6E8; border-radius:5px; 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 {-moz-border-radius:5px; -webkit-border-radius:5px; background-color:#DCE2E5; border:1px solid #DCE2E5; border-radius:5px;}
.tweet {position:relative;}

.longReply {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:block; margin:0 auto;}
.longReplyMenu a:link, .longReplyMenu a:visited {text-decoration:none;}
.twitterIcon {background:url("/img/bg-icondropshadow.png") no-repeat left top; float:left; height:53px; margin:0 6px 6px 0; padding:1px 0 0 1px; width:53px;}
.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;}

#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 {-moz-border-radius:5px; -webkit-border-radius:5px; background-color:#E5E6E8; border:1px solid #E5E6E8; border-radius:5px; 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{}
#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; text-align:right;}
#footer a:link, #footer a:visited {color:#888B92; text-decoration:underline;}
#copyright {margin:0 auto; padding:10px 0; width:800px;}
.divider {background-color:#E5E6E8; border-top:1px solid #B7BEC4; height:1px; clear:both;}

#header .divider {position:absolute; right:0; top:110px; width:75%;}
.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; 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;}


fieldset.formwrap, .av-flash, .button, .button-small, .browserbox {-moz-border-radius:4px; border-radius:4px; -webkit-border-radius:4px; padding:5px;}

.button, .button-small {float:right; 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);}
.button-small {float:none; display:inline-block; height:auto; line-height:18px; padding:0 10px !important; font-size:12px;}
.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:6px; -webkit-border-bottom-right-radius:6px;}
	#accountManagement fieldset.formwrap {background:#dbdcdf}
	#accountManagement fieldset.formwrap legend {background:#e5e6e8}


.fieldwrap {padding:2px; margin:0 0 10px 0; position:relative; -moz-border-radius:6px; border-radius:6px; -webkit-border-radius:6px; 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:8px 0 5px 0; color:#666; font-size:16px; text-align:right;}
	.fieldwrap input {display:block; width:64%; padding:5px 0; border:none; background:none; color:#333; font-size:18px;}
	.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}

.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. */}

/* Add Basic HTML Formatting Back in for Long Reply Text
 -------------------------------------------------------------------- */
.lr {margin-left:60px;}
.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;}