style.css

/*

    Info:     Deuxdrop UI elements
    ------------------------------
    Author:   Andy Chung
    ------------------------------
    Date:     July, 2011
      
*/

@import url('mockups.css');

* {
    margin: 0;
    padding: 0;
    
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    font-family: "Helvetica", arial, sans-serif;
    color: #222;
    font-size: 14px;
    line-height: 18px;
}

button,
input,
textarea {
    font-family: "Helvetica", arial, sans-serif;
}

button {
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

::-webkit-input-placeholder {
    color: #ccc;
}
:-moz-placeholder {
    color: #ccc;
}

a {
    text-decoration: none;
    color: #0063FF;
}

.overflow {
    overflow: hidden;
    white-space: nowrap;
    
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

#wrapper {
    width: 322px; /* 320px + 1px border x 2 */
    margin: 100px auto;
    border: 1px solid #555;
    background-color: #fafafa;
    overflow: hidden;
    position: relative;
    min-height: 480px;

    -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.25);
       -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.25);
         -o-box-shadow: 0 5px 20px rgba(0,0,0,0.25);
            box-shadow: 0 5px 20px rgba(0,0,0,0.25);
}

#header {
    padding: 5px;
    background-color: #222;
    position: relative;
    z-index: 99;
    
    -webkit-box-shadow: 0 1px 0 #7A7A7A inset, 0 -1px 0 #000 inset, 0 3px 0 rgba(150, 150, 150, 0.25);
       -moz-box-shadow: 0 1px 0 #7A7A7A inset, 0 -1px 0 #000 inset, 0 3px 0 rgba(150, 150, 150, 0.25);
         -o-box-shadow: 0 1px 0 #7A7A7A inset, 0 -1px 0 #000 inset, 0 3px 0 rgba(150, 150, 150, 0.25);
            box-shadow: 0 1px 0 #7A7A7A inset, 0 -1px 0 #000 inset, 0 3px 0 rgba(150, 150, 150, 0.25);
    
    background-image: -webkit-gradient(
                            linear,
                            left top,
                            left bottom,
                            color-stop(0%, #595959),
                            color-stop(50%, #444444),
                            color-stop(50%, #404040),
                            color-stop(100%, #1a1a1a)
                      );

    background-image: -moz-linear-gradient(center top,
                                           #595959 0%,
                                           #444444 50%,
                                           #404040 50%,
                                           #1A1A1A 100%);
}

#header button {
    height: 24px;
    line-height: 24px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 0 #333;
    padding: 0 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #222 #000 #000;
    
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
    
    -webkit-box-shadow: 0 1px 0 #444, 0 1px 0 #666 inset;
       -moz-box-shadow: 0 1px 0 #444, 0 1px 0 #666 inset;
         -o-box-shadow: 0 1px 0 #444, 0 1px 0 #666 inset;
            box-shadow: 0 1px 0 #444, 0 1px 0 #666 inset;
    
    background-image: -webkit-gradient(
                            linear,
                            left top,
                            left bottom,
                            color-stop(0%, #828282),
                            color-stop(50%, #565656),
                            color-stop(50%, #4D4C4C),
                            color-stop(100%, #1F1F1F)
                      );
                      
    background-image: -moz-linear-gradient(center top,
                                           #828282 0%,
                                           #565656 50%,
                                           #4D4C4C 50%,
                                           #1F1F1F 100%);
}

#header #navTitle {
    font-size: 16px;
    line-height: 24px;
    height: 24px;
    font-weight: bold;
    color: #eee;
    text-shadow: 0 -1px 0 #222;
    text-align: center;
}

.subHeader,
#compose {
    height: 34px;
    line-height: 24px;
    padding: 5px;
    font-size: 12px;
    text-shadow: 1px 1px 0 #fff;
    color: #666;
    background-color: #fff;
    position: relative;
    z-index: 100;
}

.subHeader {
    border-bottom: 1px solid #aaa;
    
    -webkit-box-shadow: 0 2px 0 rgba(150, 150, 150, 0.15);
       -moz-box-shadow: 0 2px 0 rgba(150, 150, 150, 0.15);
         -o-box-shadow: 0 2px 0 rgba(150, 150, 150, 0.15);
            box-shadow: 0 2px 0 rgba(150, 150, 150, 0.15);
}

#compose {
    border-top: 1px solid #aaa;
    margin-top: -1px;
    
    -webkit-box-shadow: 0 -2px 0 rgba(150, 150, 150, 0.15);
       -moz-box-shadow: 0 -2px 0 rgba(150, 150, 150, 0.15);
         -o-box-shadow: 0 -2px 0 rgba(150, 150, 150, 0.15);
            box-shadow: 0 -2px 0 rgba(150, 150, 150, 0.15);
}

#home {
}

.homeNav {
    outline: 1px solid #eee;
    background-color: #fff;
    width: 50%;
    display: block;
    float: left;
    text-align: center;
    line-height: 238px;
    cursor: pointer;
}

#loading {
    height: 48px;
    line-height: 48px;
    background-color: #fff;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    color: #666;
    
    -webkit-box-shadow: 0 -2px 0 rgba(150, 150, 150, 0.1) inset;
       -moz-box-shadow: 0 -2px 0 rgba(150, 150, 150, 0.1) inset;
         -o-box-shadow: 0 -2px 0 rgba(150, 150, 150, 0.1) inset;
            box-shadow: 0 -2px 0 rgba(150, 150, 150, 0.1) inset;
}

#loading img {
    vertical-align: middle;
}

.subHeader button,
#compose button {
    background-color: #EEEEEE;
    border-width: 1px;
    border-style: solid;
    border-color: #708BB5 #708BB5 #516B95;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;
    height: 24px;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #516B95;
    margin: 0 0 0 5px;
    
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
    
    background-image: -webkit-gradient(
                            linear,
                            left top,
                            left bottom,
                            color-stop(0%, #A7BDE0),
                            color-stop(50%, #8199BF),
                            color-stop(50%, #708BB5),
                            color-stop(100%, #516B95)
                      );
    
    background-image: -moz-linear-gradient(center top ,
                                           #A7BDE0 0%,
                                           #8199BF 50%,
                                           #708BB5 50%,
                                           #516B95 100%);
}

.subHeader button.search {
    border-radius: 0 3px 3px 0;
    margin: 0;
}

input[type=text] {
    width: 100%;
    font-size: 12px;
    height: 24px;
    padding: 0 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #bbb #bbb #ccc;
    outline: none;
    
    -webkit-box-shadow: 0 1px 2px -1px rgba(0,0,0,0.25) inset;
       -moz-box-shadow: 0 1px 2px -1px rgba(0,0,0,0.25) inset;
         -o-box-shadow: 0 1px 2px -1px rgba(0,0,0,0.25) inset;
            box-shadow: 0 1px 2px -1px rgba(0,0,0,0.25) inset;
    
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

input[type=text]#search {
    -webkit-border-radius: 3px 0 0 3px;
       -moz-border-radius: 3px 0 0 3px;
         -o-border-radius: 3px 0 0 3px;
            border-radius: 3px 0 0 3px;
            
    border-width: 1px 0 1px 1px;
}

ul.conversations,
ul.conversation {
    list-style-type: none;
}

    .avatar {
        width: 48px;
        height: 48px;
        padding: 3px;
        border: 1px solid #eee;
        margin: 0 5px 0 0;
        background-color: #fff;
    }

    ul.conversations li,
    ul.conversation li {
        background-color: #fff;
        padding: 10px 5px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }
    
    ul.conversations li .msgPreviewHeader,
    ul.conversation li .msgHeader {
        line-height: 26px;
    }
    
    ul.conversations li .author,
    ul.conversation li .author {
        font-weight: bold;
    }
    
    ul.conversations li .participants {
        margin-left: 3px;
        color: #666;
    }
    
    ul.conversations li .new {
        color: #0063FF;
        margin-left: 3px;
    }
    
    ul.conversations li .time,
    ul.conversation li .time {
        font-size: 12px;
        color: #aaa;
        margin-left: 5px;
    }
    
    ul.conversations li .snippet {
        color: #aaa;
        font-size: 12px;
    }
    
    ul.conversations li.read {
        background-color: #fafafa;
    }
    
    ul.conversations li.read .author {
        color: #666;
    }
    
    ul.conversations li.unread .author:before {
        content: '\25cf';
        color: #0063FF;
        margin-right: 3px;
    }
    
    ul.conversation .messages {
        list-style-type: none;
    }
    
    ul.conversation .messages li {
        margin: 0 0 5px 0;
        padding: 0;
        font-size: 12px;
        border-bottom: none;
    }
    
.settings {
    padding: 10px 5px;
}

#userProfileHeader {
    margin: 0 0 10px;
}

#userProfileHeader .username {
    line-height: 48px;
    font-weight: bold;
}

#menu {
    list-style-type: none;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #aaa;
    margin: 0 0 10px 0;
}

#menu li {
    font-size: 12px;
    padding: 10px; 
    border-bottom: 1px solid #ddd;   
}

#menu li:last-child {
    border-bottom: none;
}

#menu li label {
    color: #666;
}
    
#alert {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10000;
    opacity: 0;
    margin-left: -100%;
    
    -webkit-transition: margin 0s 0.4s ease, opacity 0.4s ease;
       -moz-transition: margin 0s 0.4s ease, opacity 0.4s ease;
         -o-transition: margin 0s 0.4s ease, opacity 0.4s ease;
            transition: margin 0s 0.4s ease, opacity 0.4s ease;
}

#alert.visible {
    margin-left: 0;
    opacity: 1;
    
    -webkit-transition: margin 0s ease, opacity 0.4s ease;
       -moz-transition: margin 0s ease, opacity 0.4s ease;
         -o-transition: margin 0s ease, opacity 0.4s ease;
            transition: margin 0s ease, opacity 0.4s ease;
}

#alert .notificationWrapper {
    width: 100%;
    position: absolute;
    bottom: 0;
    opacity: 0;
    
    -webkit-transition: all 0.4s ease;
       -moz-transition: all 0.4s ease;
         -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

#alert.visible .notificationWrapper {
    bottom: 10px;
    opacity: 1;
    
    -webkit-transition: all 0.4s ease;
       -moz-transition: all 0.4s ease;
         -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

#alert .notification {
    display: block;
    position: relative;
    margin: 10px;
    background-color: #111;
    padding: 20px;
    color: #eee;
    font-weight: bold;
    
    border-radius: 10px;
}

#alert .notification p {
    margin: 0 0 9px 0;
    text-shadow: 0 -1px 0 #000;
}

#alert button,
.settings button {
    width: 100%;
    margin: 0 0 9px 0;
    height: 36px;
    font-size: 14px;
    font-weight: bold;
    color: #444;
    text-shadow: 1px 1px 0 #fff;
    border: none;
    
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;

    background-image: -webkit-gradient(
                            linear,
                            left top,
                            left bottom,
                            color-stop(0%, #fafafa),
                            color-stop(50%, #f2f2f2),
                            color-stop(50%, #e6e6e6),
                            color-stop(100%, #ccc)
                      );
    
    background-image: -moz-linear-gradient(center top,
                                           #fafafa 0%,
                                           #f2f2f2 50%,
                                           #e6e6e6 50%,
                                           #ccc 100%);
}

#alert button.red,
.settings button.red {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 #B13D3D;

    background-image: -webkit-gradient(
                            linear,
                            left top,
                            left bottom,
                            color-stop(0%, #EA7676),
                            color-stop(50%, #EA5C5C),
                            color-stop(50%, #E15050),
                            color-stop(100%, #C84343)
                      );
    
    background-image: -moz-linear-gradient(center top,
                                           #EA7676 0%,
                                           #EA5C5C 50%,
                                           #E15050 50%,
                                           #C84343 100%);
}

#alert button.green,
.settings button.green {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 #478248;

    background-image: -webkit-gradient(
                            linear,
                            left top,
                            left bottom,
                            color-stop(0%, #70D972),
                            color-stop(50%, #5CB35E),
                            color-stop(50%, #49AA4B),
                            color-stop(100%, #478248)
                      );
    
    background-image: -moz-linear-gradient(center top,
                                           #70D972 0%,
                                           #5CB35E 50%,
                                           #49AA4B 50%,
                                           #478248 100%)
}

.settings button {
    border: 1px solid #aaa;
    height: 24px;
    font-size: 11px;
    width: auto;
    padding: 0 10px;
    margin-top: 12px;
    margin-bottom: 0;
    
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

.settings button.red {
    border: 1px solid #B13D3D;
}

.settings button.green {
    border: 1px solid #478248;
}

#alert button:last-child {
    margin: 0;
}

/* hbox and vbox classes */
 
.hbox {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;

    display: box;
    box-orient: horizontal;
    box-align: stretch;
    width: 100%;
}

.hbox > * {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    display: block;
}

.vbox {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;

    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;

    display: box;
    box-orient: vertical;
    box-align: stretch;
}

.vbox > * {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    display: block;
}

.spacer {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

.reverse {
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    box-direction: reverse;
}

.boxFlex0 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

.boxFlex1, .boxFlex {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

.boxFlexStrong {
    -webkit-box-flex: 50;
    -moz-box-flex: 50;
    box-flex: 50;
}

.boxGroup1 {
    -webkit-box-flex-group: 1;
    -moz-box-flex-group: 1;
    box-flex-group: 1;
}

.boxGroup2 {
    -webkit-box-flex-group: 2;
    -moz-box-flex-group: 2;
    box-flex-group: 2;
}

.start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
}

.end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    box-pack: end;
}

.center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
}
/* END hbox/vbox normalization from http://alex.dojotoolkit.org/2009/08/css-3-progress/ */

/* clearfix */

.cf:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .cf {
    display: block;
}

* html .cf {
    height: 1%;
}