-
Notifications
You must be signed in to change notification settings - Fork 2
/
assessment-styles.css
74 lines (67 loc) · 3.15 KB
/
assessment-styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* burstly skills assessment
** 20120723 [email protected]
** NOTE:
** I usually prefer to use em-sizing to pixels,
** but I wanted to keep the display as close to
** the image provided as possible. --A
*/
/* a few resets */
html, body, div{ margin:0; padding:0; font-family: Helvetica, Calibri, Segoe, Arial, Sans-serif; }
* {
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
#contacts-list{
color: white;
width: 280px;
margin: 2.5em;
float: left;
font-size: 11px;
background-color: #202020;
border: 2px solid #4d4d4d;
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android =1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: -1px 3px 4px 1px #aaa; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
box-shadow: -1px 3px 4px 1px #aaa; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#contacts-list>div,
#contacts-list>strong{ width:276px; border-bottom: 2px solid #131313; }
.contacts-title{
display: block;
font-size: 12px;
float: left; padding: 18px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3e3e3e), to(#252525)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3e3e3e, #252525); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #3e3e3e, #252525); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #3e3e3e, #252525); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #3e3e3e, #252525); /* Firefox 16+ */
-webkit-border-radius: 12px 12px 0 0; /* Saf3-4, iOS 1-3.2, Android =1.6 */
border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.table-row{ float: left; padding: 0;
background-color: #212121;
}
.table-row:nth-child(2n+1){ background-color: #1a1a1a; }
.table-row>div{ padding: 12px 18px 0; }
.table-row .status{
font-size: 8px; margin: 12px 18px; padding: 0;
float: left; width: 1em; height: 1em;
-webkit-border-radius: 1em; /* Saf3-4, iOS 1-3.2, Android =1.6 */
border-radius: 1em; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.status-online{ background-color: #00FF22; }
.status-away{ background-color: #C5C120; }
.status-offline{ background-color: #FC0000; }
.table-row .nickname{ float: left; padding-left: 0; }
.contact-info{ float: right; width: 60%; color: #555; border-left: 1px solid #111; }
.contact-info>div{ margin-bottom: 1em; }
.email a{ text-decoration: none; color: #555; }
.phone{}
.address{}
select#displayed-info{ float: right; font-size: 9px; margin: 1em; margin-right: 1.5em; }
#contacts-list .active, .active .contact-info{ background-color: #484848; color: white; border-color: #484848; }
.active .email a{ text-decoration: underline; color: cyan; }