/* RESETS
==============================*/
html {
color: #222;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
body{
background: #ebebeb; /* be sure to add the texture background */
font-family: "Helvetica Neue", Arial, "Helvetica", sans-serif;
min-height : 100%;
}
a, a:visited{
color: #00aeef;
text-decoration: none;
}
a:hover{
color: #00aeef;
text-decoration: underline;
}
/* =============================================================================
Links
========================================================================== */
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* BORDERS
==============================*/
.bt {border-top: 1px solid #CCC;}
.br {border-right: 1px solid #CCC;}
.bb {border-bottom: 1px solid #CCC;}
.bl {border-left: 1px solid #CCC;}
.border-all {border: 1px solid #CCC;}
.round-tl {-moz-border-radius-topleft: 10px;-webkit-border-top-left-radius: 10px;}
.round-tr {-moz-border-radius-topright: 10px;-webkit-border-top-right-radius: 10px;}
.round-br {-moz-border-radius-bottomright: 10px;-webkit-border-bottom-right-radius: 10px;}
.round-bl {-moz-border-radius-bottomleft: 10px;-webkit-border-bottom-left-radius: 10px;}
.round-all {-moz-border-radius: 10px;-webkit-border-radius: 10px}
/* SPACING, PADDING
==============================*/
.padding {padding:1em}
.pt {padding-top:1em}
.pr {padding-right:1em}
.pb {padding-bottom:1em}
.pl {padding-left:1em}
.mt_10 {margin-top:10px}
.mr_10 {margin-right:10px}
.mb_10 {margin-bottom:10px}
.ml_10 {margin-left:10px}
.append {padding-bottom:10px}
.prepend {padding-top:10px}
.append_20 {padding-bottom:20px}
.prepend_20 {padding-top:20px}
/* WEIGHTS, COLORS, SIZES
==============================*/
.small {font-size: .8em;}
.large {font-size: 1.6em;}
.x-large {font-size: 3em;}
.underline {text-decoration:underline;}
.lh_1 {line-height:1em;}
/* --- APPLICATION TITLE ---------------------- */
#app-title {width:300px;float:left;margin-top:10px; margin-left : 10px; margin-bottom : 12px;}
#app-title h1 {color:#333333;font-size: 30px;letter-spacing: -.08em;margin:0;padding:15px 0 0 0;line-height:.8em;}
#app-title h2 {font-size: 13px;color: #416A93;margin:0;padding:0 0 0 10px;line-height:.8em;}
#app-title a:link, #app-title a:visited, #app-title a:hover {text-decoration:none;}
#app-title img {float:left;margin-right:2px;}
#app-title #headerthink {
font-weight:700;
}
#app-title #headerthink:hover {
color: #00AEEF;
}
#app-title #headerup {
color: #666;
font-weight : 200;
}
/* GRAPHICS AND ICONS
==============================*/
.ui-icon, .sprite {display: inline-block !important;}
/* LISTS
==============================*/
ul.user-accounts li {padding-bottom:.5em;list-style-position: inside;}
ul.user-accounts li ul li {margin-left:2em;}
/* WIREFRAME, POSITIONING ELEMENTS
======================= */
#content {margin:0;padding:0;}
.container {padding:0px;width:960px;margin: 0 auto;}
.top {position:relative;top-20px;}
.thinkup-canvas {
}
#tweets_content, #mentions_content, #followers_content, #friends_content, #favorites_content, #links_content {position:relative;top:-40px;}
#hd, #ft {padding : 20px 20px 20px 0px;}
#yui-main .yui-g {/*margin-left : 50px;width : 600px;*/width:960px;margin:0 auto;}
#bd {text-align:left;width:960px;margin:0 auto;}
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.float-l {float:left;}
.float-r {float:right;}
.inline {display:inline;}
h4.trigger {position:relative; margin:0 auto !important; width:65px; margin-top:-45px !important; margin-bottom:50px !important; padding:0 !important;}
h4.trigger a:link, h4.trigger a:visited {font-size:.8em;color:#9D9C9C;font-weight:500;text-decoration:underline;}
h4.trigger a:hover {color:#222}
h4.trigger a:active {border:none}
/* TOOLTIPS
==============================*/
/* tooltip styling */
.tooltip {
display:none;
/*background-color: #000;*/
height:140px;
padding:70px 30px 10px 30px;
width:310px;
font-size:14px;
color:#FFF;
z-index:999;
font-weight:bold;
}
/* a .label element inside tooltip */
.tooltip .label {
color:#FFF;
width:35px;
text-align:right;
padding-right:4px;
font-weight:normal;
}
.tooltip a {
color:#6eac2c;
font-size:14px;
}
/* TABS, MENUS, NAVIGATION, STATUS BAR, ETC
==============================*/
#tabs {
margin-bottom : 75px;
}
/* Map Icon */
.map-icon {margin-right:-20px; margin-top:-40px; float:right;}
.map-icon-public {margin-right:20px;}
#wrap {
background : white;
}
/* JQuery UI resets */
.ui-tabs .ui-tabs-panel {padding:0;}
.ui-widget {font-size:1em;}
/*.ui-tabs {padding:0}
.ui-widget-content {border:0px;}
.ui-widget-header {margin:1em;background-image:none;background-color:#FFF;border:none;}*/
/* added to tab id */
#thinkup-tabs .ui-tabs {-moz-border-radius: 10px;-webkit-border-radius: 10px;margin: 0px;}
#thinkup-tabs .ui-widget {margin-top: 10px;font-size:1em;}
#thinkup-tabs .ui-widget-content {padding:0;background-image: none}
#thinkup-tabs .ui-corner-all {}
/* added to ul */
#thinkup-tabs .ui-tabs-nav {margin:0px;}
#thinkup-tabs .ui-helper-reset {}
#thinkup-tabs .ui-helper-clearfix {}
#thinkup-tabs .ui-widget-header {background-image:none;}
#thinkup-tabs .ui-corner-all {-moz-border-radius: 10px;-webkit-border-radius: 10px;}
/* added to li */
#thinkup-tabs .ui-state-default {width:158px;line-height:1.6em;font-size: 1.2em;border: 0px;background-color: #FFF;margin-right: 0px;background:none;}
#thinkup-tabs .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {color:#9D9C9C;}
#thinkup-tabs .ui-state-default a:hover {color:#222222}
#thinkup-tabs .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {color:#222222;}
#thinkup-tabs .ui-corner-top {}
#thinkup-tabs .ui-tabs-selected {width:158px;line-height:1.6em;font-size: 1.2em;margin-right: 0px;border:0px;background:none;}
#thinkup-tabs .ui-state-active {width:158px;line-height:1.6em;font-size: 1.2em;margin-right: 0px;border:0px;background:none;}
#thinkup-tabs .ui-tabs .ui-tabs-nav li {text-align:center;}
#thinkup-tabs .ui-tabs .ui-tabs-nav li a {margin:10px 0;border-right: 1px solid #CCC;width:158px;padding: 0;}
#thinkup-tabs .ui-tabs .ui-tabs-nav li.no-border a {border: 0px}
/* added to tab content */
#thinkup-tabs .ui-tabs-panel {padding-left:0px;}
#thinkup-tabs .ui-widget-content {background-color:#E6E6E6;border:0px;}
#thinkup-tabs .ui-corner-bottom {}
#thinkup-tabs .ui-tabs .ui-tabs-panel {border: 0px;background-color: #FFF;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin-top: 42px;}
/* main tab navigation */
.key-stat {margin:0;padding:0;}
.key-stat h1 {font-size: 1.7em;font-weight:700;letter-spacing:-4px}
.key-stat h3 {font-size: .8;font-weight:500;}
#menu-bar {float: right;margin:20px 0 20px 0;}
#menu-bar ul {}
#menu-bar li {display: inline;background-color: #222;padding: 0;margin: 0 1px 0 0;font-size: 1.2em;float: left;}
#menu-bar li a:link, #menu-bar li a:visited {color: #FFF;display: block;padding: 15px 10px;text-decoration: none;}
#status-bar {padding:4px 20px;margin:0;font-size:.9em;background-color:#DADAD8;border-bottom : 1px solid #DAD9D3;min-height: 26px; border-top: 5px solid #DADAD8;}
#status-bar .status-bar-left {float:left;}
#status-bar .status-bar-right {float:right;}
#status-bar ul {float:right;margin:0;padding:0;}
#status-bar li {display: inline;}
#status-bar a:link, #status-bar a:visited {}
#status-bar a:hover {text-decoration: none}
#choose-instance, #cancel-instance {cursor: pointer;}
.menu {margin-bottom:30px;}
.menu li {margin-right: 40px;display:inline;padding:4px 10px;}
.menu li a {color:#000}
.menu li:hover{color: #0060e0;cursor: pointer;border-top:2px solid #0060e0;}
.menu li.selected {border-top:2px solid #000;}
.menu li.selected:hover {border-top:2px solid #0060e0;}
.submenu {padding-left : 20px;}
#sidemenu {display : none;}
/* slick grid style */
.grid_iframe {width: 705px; height: 660px; display: none; border: solid black 0px;}
.grid_iframe2 {width: 705px; height: 660px; display: none; border: solid black 0px;}
#close_grid_search_div {text-align: right; margin-right: 10px;}
.grid_overlay_div {
width: 720px; height: 700px; border: solid black 0px; display: none; top: 30px; left: 50%;
z-index: 100; margin-left: -536px; position: absolute; background-color: #fff;
}
.grid_overlay_div2 {
width: 720px; height: 700px; border: solid gray 0px; display: none; top: 150px; left: 50%; background-color: #fff;
}
/* body overlay div (backround grayout for slick grid search unit */
#screen {position: absolute; left: 0; top: 0; background: #000; z-index: 99; color: red; display: none;}
.ui-state-highlight p a {color:#416A93;}
.ui-state-error p a {color:#416A93;}
/* Sidebar */
,post-replies-div {
clear : both;
}
/* word frequency list */
.word-frequency-div {
clear : both;
}
.word-frequency-div div {
-moz-border-radius: 3px;-webkit-border-radius: 3px;
font-size: 1em;
font-weight:bold;
border: 1px solid #D5F0FC;
padding: 1px 4px 3px 4px;
display:block;
margin-top:.3em;
text-align:center;
line-height: 1.6em;
background: #f3f3f3; /* starting color */
background: #FFF; /* ending color */
background: -moz-linear-gradient(top, #f3f3f3 0%, #FFF 100%);
background: -webkit-linear-gradient(top, #f3f3f3 0%,#FFF 100%);
background: linear-gradient(top, #f3f3f3 0%,#FFF 100%);
float: left;
list-style-type: none;
margin-right : 20px;
margin-bottom : 20px;
}
.word-frequency-div div:hover {
color : #00AEEF;
border : 1px solid #00AEEF;
}
.word-frequency-count {
border-left : 1px dotted #999;
padding-left : 6px;
margin-left : 4px;
color : #00AEEF;
font-weight : normal;
}
#word-frequency-posts {
background-color : #FAF9F2;
padding-left : 20px;
border-top : 1px solid #DAD9D3;
padding-top : 10px;
}
.word-frequency-word { cursor: pointer; }
#word-frequency-list {
min-height : 50px;
}
.top-word-result {
padding-bottom : 20px;
line-height : 2.0em;
}
.top-word-highlight {
padding: 2px 2px 4px 2px;
background-color: #F8F8B1;
-moz-border-radius: 8px;-webkit-border-radius: 8px;
margin-bottom : 20px;
}
/* --- NUMBERS -------------------------------- */
#keystats {padding:5px;font-size:medium;}
.big-number {color:#000;font-size:1.7em;line-height:1.8em;margin-top:1em}
.big-number h1 {font-size:2.7em;font-weight:700;letter-spacing:-4px;padding:0;margin:0;}
.big-number h3 {color:#666;font-size:0.8em;}
.reply-count {
-moz-border-radius: 3px;-webkit-border-radius: 3px;
font-size: 1em;
font-weight:bold;
border: 1px solid #D5F0FC;
padding: 1px 0 3px 0;
display:block;
margin-top:.3em;
text-align:center;
line-height: 1.6em;
background: #f3f3f3; /* starting color */
background: #FFF; /* ending color */
background: -moz-linear-gradient(top, #f3f3f3 0%, #FFF 100%);
background: -webkit-linear-gradient(top, #f3f3f3 0%,#FFF 100%);
background: linear-gradient(top, #f3f3f3 0%,#FFF 100%);
}
.reply-count a:link, .reply-count a:visited {
color: #00AEEF;
text-decoration:none;
display:block;
}
.reply-count:hover {
color : #00AEEF;
border : 1px solid #00AEEF;
}
.mention-count {
font-size: 1.4em;
font-weight:700;
height: 20px;
display:block;
float:left;
margin-left:.5em;
line-height:1.8em;
}
.alert textarea {
min-height : 40px;
width : 96%;
font-size : small;
margin-bottom : 20px;
}
/* ****************************************
2.0 STYLES
****************************************
*/
.ui-state-success, .linkbutton {
background: #ebeadf;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #00bdf2;
cursor: pointer;
display: inline;
margin: 6px;
padding: 4px 12px;
border : none;
}
.linkbutton:hover, .linkbutton.emphasized {
background-color: #00bdf2;
color : white;
}
a.linkbutton, a.linkbutton:visited {
text-decoration : none;
}
a.linkbutton.help {
font-weight : normal;
font-size : smaller;
float : right;
min-height : 16px;
padding-top : 4px;
margin : 0 6px 6px 6px;
}
.linkbutton.emphasized {
font-size : larger;
min-width : 100px;
padding : 14px 14px;
}
.linkbutton.emphasized:hover {
background: #31C22D;
}
.ui-state-success {
background-color: #00bdf2;
color : white;
/*
margin: 6px;
padding: 4px 12px;
*/
}
#profile-bar{
background: #FFF;
border: 1px solid #cbcbcb;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
#profile-bar hgroup{
background: url(../images/profile-bar-sprite.png) 0 -140px no-repeat;
float: left;
height: 50px;
margin: 10px;
padding-left: 60px;
}
#profile-bar h1{
font-size: 1.692307692em; /* 22px / 13px */
margin: 0;
}
#profile-bar h2{
color: #7d7d7d;
font-size: 1em;
font-weight: normal;
margin: 0;
}
#profile-bar ul{
display: inline;
float: right;
margin: 0;
padding: 0;
}
#profile-bar ul li{
background: url(../images/profile-bar-sprite.png) no-repeat;
background-position: 100% 15px;
border-right: 1px solid #e6e5e5;
display: block;
float: left;
font-size: 1.692307692em; /* 22px / 13px */
font-weight: bold;
height: 57px;
list-style: none;
line-height: 1em;
margin: 0 2px 0 0;
padding: 15px 60px 0 15px;
text-align: right;
}
#profile-bar ul li:first-child{
border-left: 1px solid #e6e5e5;
}
#profile-bar ul li.down{
background-position: 100% -55px;
}
#profile-bar ul li.more{
background: #dadad8;
background-image: none;
border-right: 2px solid #c7c7c6;
border-bottom: 2px solid #c7c7c6;
-moz-border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
height: 70px;
margin: 0;
padding: 0;
text-align: center;
width: 30px;
}
#profile-bar ul li.more a{
background: #87c34a; /* starting color */
background: #3b9541; /* ending color */
background: -moz-linear-gradient(top, #87c34a 0%, #3b9541 100%);
background: -webkit-linear-gradient(top, #87c34a 0%,#3b9541 100%);
background: linear-gradient(top, #87c34a 0%,#3b9541 100%);
border-radius: 2px;
color: #FFF;
display: block;
font-size: .7em;
height: 15px;
line-height: .7em;
margin: 28px auto 0 auto;
padding: 0;
width: 15px;
}
#profile-bar ul li.more a:hover{
text-decoration: none;
}
.social-noun{
background: url(../images/social-icons-sprite.png) 0 0 no-repeat;
color: #7d7d7d;
font-size: 0.590909091em; /* 13px / 22px from parent */
font-weight: normal;
padding: 0 0 2px 22px;
}
#facebook-friends span.social-noun{
background-position: 0px -19px;
}
#linkedin-connections span.social-noun{
background-position: 0px -38px;
}
#nav {
background: #d0d0d0; /* starting color */
background: #b7b7b7; /* ending color */
background: -moz-linear-gradient(top, #d0d0d0 0%, #b7b7b7 100%);
background: -webkit-linear-gradient(top, #d0d0d0 0%,#b7b7b7 100%);
background: linear-gradient(top, #d0d0d0 0%,#b7b7b7 100%);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin-top: 20px;
padding: 1px; /* fake a gradient border with the above background and a single pixel of padding */
font-size : 80%;
}
#nav ul{
background: #cacacb; /* starting color */
background: #e2e2e2; /* ending color */
background: -moz-linear-gradient(top, #cacacb 0%, #e2e2e2 100%);
background: -webkit-linear-gradient(top, #cacacb 0%,#e2e2e2 100%);
background: linear-gradient(top, #cacacb 0%,#e2e2e2 100%);
-moz-border-radius: 8px;
border-radius: 8px;
list-style-type: none;
}
#nav ul li{
background: none;
border-bottom: 1px solid #b7c5ca;
border-top: 1px solid #dcdcdc;
font-size: 1.125em;
font-weight: bold;
height: 24px;
padding: 8px 0 0 16px;
}
/* no top rule on the first nav element or bottom rule on the last nav element */
nav ul li:first-child{
border-top: none;
-moz-border-top-left-radius: 8px;
-moz-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
nav ul li:last-child{
border-bottom: none;
-moz-border-bottom-left-radius: 8px;
-moz-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
#nav ul li.selected{
background: #f3f3f3; /* starting color */
background: #FFF; /* ending color */
background: -moz-linear-gradient(top, #f3f3f3 0%, #FFF 100%);
background: -webkit-linear-gradient(top, #f3f3f3 0%,#FFF 100%);
background: linear-gradient(top, #f3f3f3 0%,#FFF 100%);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#nav ul li a, nav ul li a:visited{
color: #343030;
display: block;
text-shadow: rgba(248, 245, 235, 1) 1px 1px 1px;
}
#nav ul li.updated a{
background-position: 95% -38px;
}
#nav ul li a:hover{
color: #00a6e3;
text-decoration: none;
}
aside{
background: #FFF;
border: 1px solid #d6d6d6;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
aside h4{
border-bottom: 1px solid #ece7d1;
color: #9d9d9c;
font-size: 1.230769231em; /* 16px / 13px */
font-weight: bold;
margin: 0;
padding: 12px 14px;
}
aside p{
font-size: 1.076923077; /* 14px / 13px */
font-weight: bold;
margin: 0;
padding: 12px 14px;
}
aside p a, aside p a:visited{
color: #000;
}
aside p a:hover{
color: #00a6e3;
}
#content{
}
#content header{
height: 60px;
width: 100%;
}
#content header h2{
float: left;
}
#content header form{
float: right;
margin-top: 20px;
}
#content header select{
/* -webkit-appearance: textfield; */
}
#filter-date{
margin: 0;
}
.avatar{
border: 1px solid #FFF; /* add an invisible border so that the service icons line up properly on non-vips */
display: block;
float: left;
height: 52px;
margin-right: 10px;
position: relative;
width: 52px;
}
.avatar.vip{
border: 1px solid #38c0f3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.avatar.vip a.avatar-img{
background: #beeafb; /* combined with 1px of padding, this gives the illusion of another border */
border: 1px solid #7fd6f7;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.avatar.vip a.avatar-img img{
background: #FFF; /* make sure the avatar is on a white background */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
div.avatar-friend{
background: url(../images/avatar-friend.png) 0 -50px no-repeat;
height: 12px;
margin: 0;
padding: 0;
position: absolute;
text-indent: -314159px;
top: -4px;
left: -4px;
width: 18px;
z-index: 10;
}
div.avatar-friend.bff{
background-position: 0 -16px;
}
div.avatar-friend.fan{
background-position: 0 0px;
}
a.avatar-img{
border: 1px solid #FFF;
display: block;
height: 48px;
padding: 1px;
position: relative;
width: 48px;
z-index: 9;
}
a.avatar-service{
background: url(../images/social-icons-sprite.png) 0 0 no-repeat;
display: block;
float: right;
height: 18px;
position: relative;
text-indent: -314159px;
top: -12px;
right: -6px;
width: 18px;
z-index: 11;
}
a.avatar-service.twitter{
background-position: 0 0;
}
a.avatar-service.facebook{
background-position: 0 -19px;
}
a.avatar-service.linkedin{
background-position: 0 -38px;
}
a.avatar-service.tumblr{
background-position: 0 -57px;
}
.section{
background: #dadad8;
border: 1px solid #dad9d3;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: 10px 0 12px 0;
margin-bottom: 10px;
clear : both;
}
.section h2{
color: #343030;
font-size: 1.125em;
font-weight: bold;
line-height: 0;
margin: 0;
padding: 6px 10px 15px 10px;
text-shadow: rgba(255, 255, 255, 1) 1px 1px 1px;
min-height : 8px;
}
.section h3{
color: #000;
font-size: 1.0em;
font-weight: normal;
line-height: 0;
margin: 0;
padding: 6px 10px 15px 10px;
text-shadow: none;
min-height : 8px;
}
.section h2::before {
color: #047fc6;
/* content: "▼ "; */
font-size: 13px;
}
.view-all{
line-height: .1em;
text-align: right;
padding: 20px 6px 0 0;
margin: 0;
min-height: 10px;
}
.article{
background: #FFF;
padding-left : 20px;
padding-top : 20px;
}
#updates{
width: 100%;
}
#updates tr{
background: #faf9f2;
border-bottom: 1px solid #bac7cb;
}
#updates tr.highlight{
background: #f3f3ce;
}
#updates td{
padding: 10px;
}
#updates td.update-number{
background: url(../images/update-arrows.png) 20px 55px no-repeat;
font-size: 1.846153846em;
font-weight: bold;
padding-left: 65px;
text-align: right;
}
#updates td.update-number.up{
background-position: 20px 12px;
}
#updates td.update-number.down{
background-position: 20px -33px;
}
#updates td.update-text{
vertical-align: middle;
}
.stream-content{
background: #faf9f2;
background: #FFF;
}
.tab-meta{
border-bottom: 2px solid #dadad8;
}
.export-csv {
background: #ebeadf;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #00bdf2;
cursor: pointer;
display: block;
float: right;
margin: 6px;
padding: 4px 12px;
}
.export-csv:hover {
color: #00bdf2;
}
.stream-item{
background: #faf9f2;
border-bottom: 2px solid #dadad8;
border-top: 1px solid #fefdfc;
min-height: 60px;
padding: 1em 0 .2em 1em;
}
.stream-item a, .stream-item a:visited{
color: #00bdf2;
}
.stream-item.super{
/* ".super" refers to stream items that have sub-items e.g. when the user clicks the "xxx replies" link */
box-shadow: 0 3px 3px #CCC;
}
.conversation-bubble{
background: url(../images/stream-icons.png) no-repeat 14px -128px;
float: left;
font-weight: bold;
padding-top: 26px;
text-align: center;
width: 52px;
}
.stream-item-header{
margin-left: 75px;
}
.stream-item-fullname{
font-weight: bold;
font-size: 1.230769231em;
}
.stream-item-username a, .stream-item-username a:visited{
color: #898989;
}
.stream-item:hover .stream-item-username a, .stream-item:hover .stream-item-username a:visited{
color: #464646;
}
.stream-item-content{
margin-top: 10px;
margin: 10px 50px 0 75px;
}
.stream-item-datetime a, .stream-item-datetime a:visited{
color: #898989;
}
.stream-item-meta{
border-top: 1px solid #e5e5e5;
margin: 15px 0 0 75px;
padding-top: 6px;
}
.stream-item-meta a, .stream-item-meta a:visited{
color: #898989;
}
.stream-item-meta ul{
list-style: none;
margin: 0;
padding: 0;
}
.stream-item-meta ul li{
display: inline;
margin: 0;
padding: 0;
position: relative;
}
.stream-item-meta ul li.selected a{
color: #000;
font-weight: bold;
}
.stream-item-meta ul li:after{
content: " | ";
}
.stream-item-meta ul li:last-child:after{
content: none;
}
.stream-item-meta ul li.selected div.pointer{
border-color: #faf9f2 transparent transparent transparent;
left: 35%;
top: 18px;
}
.stream-item-meta ul li.selected div.pointer-border{
top: 20px;
left: 35%;
}
.stream-item-iconography{
float: right;
position: relative;
top: 0px;
right: 12px;
width: 28px;
}
.stream-item-arrow a{
background: url(../images/stream-icons.png) no-repeat;
display: block;
height: 20px;
text-indent: -314159px;
visibility: hidden
}
.stream-item-icon{
background: url(../images/stream-icons.png) no-repeat 0 -26px;
margin-top: 10px;
height: 20px;
}
.stream-item-icon.photo{
background-position: 0 -50px;
}
.stream-item-icon.video{
background-position: 0 -75px;
}
.stream-pagination{
background: #FFF;
color: #cdcdcd;
padding: 10px 0;
text-align: center;
}
.stream-item:hover{
background: #FFF;
}
.stream-item:hover .stream-item-datetime a .datetime-stamp{
color: #464646;
}
.stream-item:hover .stream-item-datetime a .datetime-service{
color: #00bdf2;
}
.stream-item:hover .stream-item-arrow a{
visibility: visible;
}
#dashboard-connections{
}
#dashboard-connections div.avatar-row{
background: #faf9f2;
border-bottom: 2px solid #dadad8;
padding: 20px 0 20px 10px;
}
#saved-search{
}
#saved-search table{
width: 100%;
}
#saved-search table td{
border: 1px solid #e5e5e5;
padding: 0;
width: 50%;
}
#saved-search table a{
background: #faf9f2 url(../images/nav-light.png) 0 200px no-repeat;
color: #000;
display: block;
padding: 12px 0 12px 36px;
}
#saved-search table a:hover{
background: #FFF;
color: #00bdf2;
}
#saved-search table a.updated{
background-position: 0 -25px;
}
#footer{
background: #7d7d7d;
position : relative;
width : 960px;
clear: both;
margin: 75px auto 75px auto;
border: 1px solid #c9c9c9;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#footer div.content{
width: 90%;
margin: 0 auto;
}
#footer h1{
background: url(../images/logo-sprite.png) -140px 0 no-repeat;
float: left;
height: 100px;
text-indent: -314159px;
width: 150px;
}
#fineprint{
color: #dadad8;
float: right;
font-size: 1em; /* 13px / 13px */
font-weight: normal;
text-align: left;
}
#fineprint a, #fineprint a:visited{
color: #00bdf2;
}
#ft{
color: #dadad8;
font-size: 1em; /* 13px / 13px */
font-weight: normal;
}
#ft a, #ft a:visited{
color: #00bdf2;
}
li.selected div.pointer-border{
border-color: #cecdc7 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom: -22px;
left: 42%;
}
li.selected div.pointer{
border-color: #FFF transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom: -20px;
left: 42%;
}
@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 768px) {
#container header{
max-width: 960px;
}
#select-profile{
margin: 45px 20px 0 20px;
}
#search-profile{
margin: 55px 20px 0 20px;
}
#main{
max-width: 960px;
padding: 0 0 50px 0;
}
#sidebar{
float: left;
width: 220px;
}
aside{
margin-top: 20px;
}
#content{
max-width: 720px;
margin-left: 240px;
}
#account #content{
max-width: 700px; /* there's no sidebar on the account page */
margin-left: 0;
}
footer{
clear: both;
padding: 45px 0 75px 0;
}
footer div.content{
max-width: 960px;
}
#fineprint{
max-width: 720px;
margin-top: 40px;
}
}
@media only screen and (min-width: 992px){
}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide for both screenreaders and browsers: h5bp.com/m */
.hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/n & h5bp.com/o */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
*/
button, input { line-height: normal; *overflow: visible; }
/*
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
*/
table button, table input { *overflow: auto; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Dashboard specific CSS
========================================================================== */
.alert{
border: 1px solid #c9c9c9;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
margin-bottom: 1em;
padding-top : 10px;
padding-left : 20px;
min-height : 70px;
}
.alert p{
color: #7d7d7d;
padding-left: 20px;
}
.alert p strong{
color: #000;
font-weight: normal;
}
.alert h4{
font-size: 1.230769231em; /* 16 / 13 */
padding-left: 20px;
margin: 12px 0 8px 0;
}
.alert.urgent, .ui-state-errror{
background: #f8f8b1;
}
.alert.helpful{
background: #d5f0fc;
}
.alert.helpful p{
margin-top: 0px;
padding-top: 0px;
}
.alert.stats{
background: #FFF;
}
.alert.stats p{
/*
border-bottom: 1px solid #b7c5ca;
*/
padding-bottom: 8px;
}
#alert-avatars{
padding: 4px 16px 16px 16px;
height: 48px;
}
.alert-close{
background: #f5f5f5; /* starting color */
background: #e5e5e5; /* ending color */
background: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%);
background: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%);
border: 1px solid #c9c9c9;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
color: #7d7d7d;
cursor: pointer;
float: right;
font-weight: bold;
font-size: 14px;
height: 17px;
line-height: 14px;
position: relative;
top: -5px;
right: -5px;
text-indent: 5px;
text-shadow: 1px 1px 1px rgba(255,255,255,1);
width: 17px;
}
#alert-more{
display: block;
text-align: center;
}
#alert-more strong{
font-size: 1.846153846em; /* 24 / 13 */
}