microblogging.css

body {
    margin:0px;
}
#pannel {
    height : 6em;
    background-color : darkgrey;
    width:100%;
}
#templates,
#help {
    display : none;
}
#help section p{
    font-weight:bold;
    font-family:monospace;
}

#feed {
    float: right;
    margin : 1em;
    width : 65%;
}

#profile {
    margin-top : 10px;
    display:inline;
    float: left;
    max-width : 25%;
}
#profile .label {
    font-variant : small-caps;
    font-style : italic
}
#profile .value {
    color : grey;
}
.screenname{
    font-size : 1.5em;
    color : darkgreen;
}
#profile .profile_img{
    display:block;
    width:80%;
    margin : auto;
}
#profile p{
    margin : 1em;
}

.edit_profile {
    display : none;
}
.remote {
    display : none;
}


#login {
    position : absolute;
    top : 1em;
    right : 1em;
    font-variant : small-caps;
    font-size : 1.3em;
    color : orange;
    border : 1px orange solid;
    border-radius : 1em;
    padding : 0.2em;
    background-color : silver;   
}


#micropost {
    display : none;
    margin : auto;
    float : right;
    width : 38em;
}
#micropost .rs > * {
    display:inline;
}
#micropost .rs{
    height : 3.6em;
}
#micropost textarea {
    width : 40em;
    height : 4em;
}
#micropost .sh{
    margin-left:32em;
}


.blogpost {
    background : lightgrey;
    min-height : 5em;
    border-radius : 2em;
    border : 3px lightgrey groove;
    padding : 0.5em;
    margin : 2em;
}
.blogpost span {
    padding : 0.3em;
}
.blogpost .screenname {
    font-size : 1.2em
}
.blogpost .created_at {
    float : right;
    font-size : 0.6em
}
.blogpost .avatar {
    float : left;
    height : 60px;
    width : 80px;
}
.blogpost .text{
    text-align : center;
    white-space : pre-wrap;
    word-wrap : break-word;
}
.blogpost .pannel {
    float:right;
    margin : 0.8em;
}

.blogpost.syndicated .pannel .syndicate {
    opacity : 0.3;
}

.blogpost .pannel .delete .do{
    display : block;
}
.blogpost.deleted .pannel .delete .do{
    display : none;
}
.blogpost .pannel .delete .redo{
    display : none;
}
.blogpost.deleted .pannel .delete .redo{
    display : block;
}

.deleted{
    opacity : 0.4;
}

.button .icon {
    height : 1.5em;
    width : 1.5em;
    margin : 0px;
    float : left;
}

.button.active {
    border : 1px green solid;
    border-radius:1em;
}
.button {
    padding : 0px;
}

.icon {
    height : 40px;
    width : 40px;
    float : left;
}

.widget {
    float:left;
    border : 2px green solid;
    border-radius : 1em;
}
.widget.offline{
    border : 1px grey dotted;
}
.widget.offline > img{
    opacity : 0.5
}
.widget.offline .connected {
    display : none;
}
.widget.offline .disconnected {
    display : inline;
}
.widget .disconnected {
    display : none;
}

.widget .expandable{   
   display : none;
}

.widget .expandable input{
    width:8em;
    font-size : 0.5em;
}
.widget .expandable label{
    font-size : 0.6em;
    
}

.widget.expanded .expandable{
    display : block;    
    width : 17em;
}
.widget p {
    margin : 0px;
}

.disabled {
    display : none;
}