pptale.github.io/in-response.css at main · pptale/pptale.github.io · GitHub

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/*
Original design: In Response (v1.1 - May 15th, 2013)
For more information, see http://andreasviklund.com/dt_portfolio/in-response/
*/

*{margin:0; padding:0;}

/* General styles */
body {background:#000 url(images/background3.jpg) top center no-repeat; color:#ccc; font:80% "ABeeZee", Tahoma, sans-serif; line-height:1.5em;}
a {color:#6060d0; text-decoration:none; font-weight:400;} /*Original colors  #6060d0 */
a:hover {text-decoration:underline;}
p,ul,ol,dl {margin:0 0 15px 0; line-height:1.6em;}
h1 {color:#888; font-size:4.6em; margin-bottom:0;}
h1 a {text-transform:none; font-weight:400;}
h1 a:hover {text-decoration:none; color:#eee;}
h2 {font-size:2.8em; color:#333; margin:0 0 10px;}
h3 {font-size:1.8em; margin:0 0 10px 0;}
h1,h2,h3 {font-family: 'Enriqueta', sans-serif; color:#6060d0; font-weight:400; line-height:1.4em;}

/* Main layout container */
#layout {margin:40px auto 0; width:960px;}
body.wider #layout {margin:40px auto 0; width:1200px;}

/* Footer */
#footer {background:#0a0a0a url(images/insidebg.jpg) top center no-repeat;}
#footer .col {color:#555; border-top:1px dotted #1a1a1a; padding:20px 0;}
#footer p {text-align:center;}
#footer a {color:#555; font-weight:400; text-decoration:none; border-bottom:1px dotted #333;}
#footer a:hover {color:#aaa; text-decoration:none; border-bottom:1px dotted #888;}

/* Grid classes, fixed width, 960px with 12 columns */
.col {float:left; margin:0 10px; overflow:hidden; float:left; display:inline;}
.col img {max-width:100%;}
.row {width:960px; margin:20px auto 0; overflow:hidden;}
.row .row {margin:0 -10px; width:auto;	display:inline-block;}
.c1 {width:60px;}
.c2 {width:140px;}
.c3 {width:220px;}
.c4 {width:300px;}
.c5 {width:380px;}
.c6 {width:460px;}
.c7 {width:540px;}
.c8 {width:620px;}
.c9 {width:700px;}
.c10 {width:780px;}
.c11 {width:860px;}
.c12 {width:940px;}

/* Grid classes, fixed width, 1200px with 12 columns - add class="wider" to the <body> element to use this */
body.wider .row {width:1200px;}
body.wider .c1 {width:80px;}
body.wider .c2 {width:180px;}
body.wider .c3 {width:280px;}
body.wider .c4 {width:380px;}
body.wider .c5 {width:480px;}
body.wider .c6 {width:580px;}
body.wider .c7 {width:680px;}
body.wider .c8 {width:780px;}
body.wider .c9 {width:880px;}
body.wider .c10 {width:980px;}
body.wider .c11 {width:1080px;}
body.wider .c12 {width:1180px;}

/* Menu list styles */
ul.menu {list-style:none; margin:0; padding:10px 0; border-top:1px solid #333;}
ul.menu li {list-style:none; text-align:center; font-size:1.2em; margin:0 0 10px; padding:0 0 8px 0; color:#888; border-bottom:1px solid #333;}
ul.menu li a {font-size:1.2em; font-weight:400;}
ul.menu li a:hover {color:#eee; text-decoration:none;}

/* Additional text classes */
.slogan {color:#bbb; font-size:1.2em;}
.alignleft {text-align:left;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
.alignjustify {text-align:justify;}
.nomargin {margin:0; padding:0;}
.separator {height:100px; margin:0; padding:0; background: #0a0a0a url(images/insidebg2.jpg) bottom center no-repeat; border-bottom:1px dotted #1a1a1a;}
.larger {font-size:1.2em;}
.smaller {font-size:0.9em;}
.spacer {margin:0 20px;}
.clear {clear:both;}
.hide {display:none;}
.border {border:1px solid red;}
body .navmenu a {font-size:1.4em;}

/* Light styles, apply by using class="light" on the body HTML element */
body.light {background:#fff top center no-repeat; color:#777;}
/* #fff url(images/background3.jpg) */
body.light a {color:#6060d0;}
body.light a:hover {color:#555;}
body.light h1 {color:#888; font-size:4.6em; margin-bottom:0;}
body.light h1 a:hover {color:#303030;}
body.light h2 {color:#555;}
body.light h1, body.light h2, body.light h3 {color:#6060d0;}
body.light ul.menu {border-top:1px solid #ddd;}
body.light ul.menu li {border-bottom:1px solid #ddd;}
body.light ul.menu li a:hover {color:#333;}
body.light .separator {background: #f5f5f5 url(images/insidebg2-light.jpg) bottom center no-repeat; border-bottom:1px dotted #ccc;}
body.light .slogan {color:#888;}
body.light #footer {background:#f5f5f5 url(images/insidebg-light.jpg) top center no-repeat;}
body.light #footer .col {color:#555; border-top:1px dotted #ccc;}
body.light #footer a {color:#555; border-bottom:1px dotted #ddd;}
body.light #footer a:hover {color:#444; border-bottom:1px dotted #eee;}
body.light .navmenu a {font-size:1.4em;}

/* Alternate colors, apply by adding class="blue" (or any of the other available colors) to the body HTML element */
body.blue a {color:#3288a8;}
body.blue h1, body.blue h2, body.blue h3 {color:#3288a8;}
body.grey a {color:#666;}
body.grey h1, body.grey h2, body.grey h3 {color:#666;}

.navmenu a {font-size:1.2em; margin: 0 20px;}

div.thumbnails img {width:160px; margin:0 10px 10px 0; border-radius:12px;}
div.thumbnails img.last {margin-right:0;}

.headerimage img {border-radius:12px;}

@media only screen and (max-width : 960px){
#layout, body.wider #layout {width:auto; margin:0; padding:20px;}
.row {width:100%;}
.col {margin:0 0 20px 0;}
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {width:100%;}
h1 {margin:-15px auto 5px; line-height:1.4em;}
body .navmenu {margin:0px 0 -15px;}
body .navmenu a {font-size:1.4em; display:inline-block; line-height:2.0em;padding:7px 12px; margin:0 10px 8px 0; background-color:#111; border:1px solid #222; border-radius:10px;}
body.light .navmenu a {font-size:1.4em; display:inline-block; line-height:2.0em;padding:7px 12px; margin:0 10px 8px 0; background-color:#fff; border:1px solid #eee; border-radius:10px;}
body .navmenu a.current {border-color:#444;}
body.light .navmenu a.current {border-color:#ddd;}
.headerimage img {width:100%; height:auto;}
div.thumbnails img {width:24%; margin:0;}
div.thumbnails img.last {margin-right:0;}
}