xref: /OK3568_Linux_fs/buildroot/docs/website/css/main.css (revision 4882a59341e53eb6f0b4789bf948001014eff981)
1*4882a593Smuzhiyun/*
2*4882a593Smuzhiyun * Author: Carlos Alvarez
3*4882a593Smuzhiyun * URL: http://alvarez.is
4*4882a593Smuzhiyun *
5*4882a593Smuzhiyun * Project Name: FLATTY - Free Bootstrap 3 Theme
6*4882a593Smuzhiyun * Version: 1.0
7*4882a593Smuzhiyun * URL: http://blacktie.co
8*4882a593Smuzhiyun */
9*4882a593Smuzhiyun
10*4882a593Smuzhiyunbody {
11*4882a593Smuzhiyun  background-color: #f2f2f2;
12*4882a593Smuzhiyun	font-family: 'Roboto', sans-serif;
13*4882a593Smuzhiyun	font-weight: 300;
14*4882a593Smuzhiyun	font-size: 16px;
15*4882a593Smuzhiyun	color: #555;
16*4882a593Smuzhiyun
17*4882a593Smuzhiyun	-webkit-font-smoothing: antialiased;
18*4882a593Smuzhiyun	-webkit-overflow-scrolling: touch;
19*4882a593Smuzhiyun}
20*4882a593Smuzhiyun
21*4882a593Smuzhiyun/* Titles */
22*4882a593Smuzhiyunh1, h2, h3, h4, h5, h6 {
23*4882a593Smuzhiyun	font-family: 'Roboto', sans-serif;
24*4882a593Smuzhiyun	font-weight: 300;
25*4882a593Smuzhiyun	color: #333;
26*4882a593Smuzhiyun}
27*4882a593Smuzhiyun
28*4882a593Smuzhiyunh1 {
29*4882a593Smuzhiyun	font-size: 40px;
30*4882a593Smuzhiyun}
31*4882a593Smuzhiyun
32*4882a593Smuzhiyunh3 {
33*4882a593Smuzhiyun	color: #95a5a6;
34*4882a593Smuzhiyun	font-weight: 400;
35*4882a593Smuzhiyun}
36*4882a593Smuzhiyun
37*4882a593Smuzhiyunh4 {
38*4882a593Smuzhiyun	color: #95a5a6;
39*4882a593Smuzhiyun	font-weight: 400;
40*4882a593Smuzhiyun	font-size: 20px;
41*4882a593Smuzhiyun}
42*4882a593Smuzhiyun
43*4882a593Smuzhiyun.ellipsis p {
44*4882a593Smuzhiyun	margin-bottom:10px;
45*4882a593Smuzhiyun	white-space: nowrap;
46*4882a593Smuzhiyun	overflow: hidden;
47*4882a593Smuzhiyun	text-overflow: ellipsis;
48*4882a593Smuzhiyun}
49*4882a593Smuzhiyun
50*4882a593Smuzhiyun.centered {
51*4882a593Smuzhiyun	text-align: center;
52*4882a593Smuzhiyun}
53*4882a593Smuzhiyun
54*4882a593Smuzhiyun/* Links */
55*4882a593Smuzhiyuna {
56*4882a593Smuzhiyun	color: #3498db;
57*4882a593Smuzhiyun	word-wrap: break-word;
58*4882a593Smuzhiyun
59*4882a593Smuzhiyun	-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
60*4882a593Smuzhiyun	-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
61*4882a593Smuzhiyun	-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
62*4882a593Smuzhiyun	-o-transition: color 0.1s ease-in, background 0.1s ease-in;
63*4882a593Smuzhiyun	transition: color 0.1s ease-in, background 0.1s ease-in;
64*4882a593Smuzhiyun}
65*4882a593Smuzhiyun
66*4882a593Smuzhiyuna:hover,
67*4882a593Smuzhiyuna:focus {
68*4882a593Smuzhiyun	color: #7b7b7b;
69*4882a593Smuzhiyun	text-decoration: none;
70*4882a593Smuzhiyun	outline: 0;
71*4882a593Smuzhiyun}
72*4882a593Smuzhiyun
73*4882a593Smuzhiyuna:before,
74*4882a593Smuzhiyuna:after {
75*4882a593Smuzhiyun	-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
76*4882a593Smuzhiyun	-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
77*4882a593Smuzhiyun	-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
78*4882a593Smuzhiyun	-o-transition: color 0.1s ease-in, background 0.1s ease-in;
79*4882a593Smuzhiyun	transition: color 0.1s ease-in, background 0.1s ease-in;
80*4882a593Smuzhiyun}
81*4882a593Smuzhiyun
82*4882a593Smuzhiyun hr {
83*4882a593Smuzhiyun	display: block;
84*4882a593Smuzhiyun	height: 1px;
85*4882a593Smuzhiyun	border: 0;
86*4882a593Smuzhiyun	border-top: 1px solid #ccc;
87*4882a593Smuzhiyun	margin: 1em 0;
88*4882a593Smuzhiyun	padding: 0;
89*4882a593Smuzhiyun}
90*4882a593Smuzhiyun
91*4882a593Smuzhiyun.navbar-default {
92*4882a593Smuzhiyun	background-color: #3498db;
93*4882a593Smuzhiyun	border-color: transparent;
94*4882a593Smuzhiyun}
95*4882a593Smuzhiyun
96*4882a593Smuzhiyun.navbar-default .navbar-brand {
97*4882a593Smuzhiyun	color: white;
98*4882a593Smuzhiyun}
99*4882a593Smuzhiyun
100*4882a593Smuzhiyun.navbar-default .navbar-nav > li > a {
101*4882a593Smuzhiyun	color: white;
102*4882a593Smuzhiyun}
103*4882a593Smuzhiyun
104*4882a593Smuzhiyun/* Helpers */
105*4882a593Smuzhiyun
106*4882a593Smuzhiyun.mt {
107*4882a593Smuzhiyun	margin-top: 40px;
108*4882a593Smuzhiyun	margin-bottom: 40px;
109*4882a593Smuzhiyun}
110*4882a593Smuzhiyun
111*4882a593Smuzhiyun.nh {
112*4882a593Smuzhiyun	margin-top: 80px;
113*4882a593Smuzhiyun	margin-bottom: 40px;
114*4882a593Smuzhiyun}
115*4882a593Smuzhiyun
116*4882a593Smuzhiyun.form-control {
117*4882a593Smuzhiyun	height: 42px;
118*4882a593Smuzhiyun	font-size: 18px;
119*4882a593Smuzhiyun	width: 280px;
120*4882a593Smuzhiyun}
121*4882a593Smuzhiyun
122*4882a593Smuzhiyuni {
123*4882a593Smuzhiyun	margin: 8px;
124*4882a593Smuzhiyun	color: #3498db;
125*4882a593Smuzhiyun}
126*4882a593Smuzhiyun
127*4882a593Smuzhiyun
128*4882a593Smuzhiyun/* HeaderWrap */
129*4882a593Smuzhiyun#headerwrap {
130*4882a593Smuzhiyun	/* background: url(../img/bg01.jpg) no-repeat center top; */
131*4882a593Smuzhiyun	background-color: #3498db;
132*4882a593Smuzhiyun	margin-top: -20px;
133*4882a593Smuzhiyun	padding-top:120px;
134*4882a593Smuzhiyun	background-attachment: relative;
135*4882a593Smuzhiyun	background-position: center center;
136*4882a593Smuzhiyun	min-height: 400px;
137*4882a593Smuzhiyun	max-height: 800px;
138*4882a593Smuzhiyun	width: 100%;
139*4882a593Smuzhiyun
140*4882a593Smuzhiyun	-webkit-background-size: 100%;
141*4882a593Smuzhiyun	-moz-background-size: 100%;
142*4882a593Smuzhiyun	-o-background-size: 100%;
143*4882a593Smuzhiyun	background-size: 100%;
144*4882a593Smuzhiyun
145*4882a593Smuzhiyun	-webkit-background-size: cover;
146*4882a593Smuzhiyun	-moz-background-size: cover;
147*4882a593Smuzhiyun	-o-background-size: cover;
148*4882a593Smuzhiyun	background-size: cover;
149*4882a593Smuzhiyun}
150*4882a593Smuzhiyun
151*4882a593Smuzhiyun#headerwrap h1 {
152*4882a593Smuzhiyun	color: white;
153*4882a593Smuzhiyun	font-size: 60px;
154*4882a593Smuzhiyun	font-weight: bold;
155*4882a593Smuzhiyun	letter-spacing: 1px;
156*4882a593Smuzhiyun}
157*4882a593Smuzhiyun
158*4882a593Smuzhiyun#menubutton {
159*4882a593Smuzhiyun	max-height: 50px;
160*4882a593Smuzhiyun	margin-top: 6px;
161*4882a593Smuzhiyun	padding-top: 15px;
162*4882a593Smuzhiyun	margin-left: 10px;
163*4882a593Smuzhiyun}
164*4882a593Smuzhiyun
165*4882a593Smuzhiyun.panel-sponsor {
166*4882a593Smuzhiyun	min-height: 350px;
167*4882a593Smuzhiyun	text-align: justify;
168*4882a593Smuzhiyun	text-justify: inter-word;
169*4882a593Smuzhiyun}
170*4882a593Smuzhiyun
171*4882a593Smuzhiyun@media (min-width: 768px) and (max-width: 991px) {
172*4882a593Smuzhiyun	.navbar-collapse.collapse {
173*4882a593Smuzhiyun		display: none !important;
174*4882a593Smuzhiyun	}
175*4882a593Smuzhiyun	.navbar-collapse.collapse.in {
176*4882a593Smuzhiyun		display: block !important;
177*4882a593Smuzhiyun	}
178*4882a593Smuzhiyun	.navbar-header .collapse, .navbar-toggle {
179*4882a593Smuzhiyun		display:block !important;
180*4882a593Smuzhiyun	}
181*4882a593Smuzhiyun	.navbar-header {
182*4882a593Smuzhiyun		float:none;
183*4882a593Smuzhiyun	}
184*4882a593Smuzhiyun	.navbar-collapse {
185*4882a593Smuzhiyun		overflow:hidden;
186*4882a593Smuzhiyun	}
187*4882a593Smuzhiyun	#menubutton {
188*4882a593Smuzhiyun		margin-right: 40px;
189*4882a593Smuzhiyun		width: 45px;
190*4882a593Smuzhiyun	}
191*4882a593Smuzhiyun	.text-shrink {
192*4882a593Smuzhiyun		visibility: hidden;
193*4882a593Smuzhiyun	}
194*4882a593Smuzhiyun}
195*4882a593Smuzhiyun
196*4882a593Smuzhiyun@media (max-width:767px) {
197*4882a593Smuzhiyun	#menubutton {
198*4882a593Smuzhiyun		max-height: 50px;
199*4882a593Smuzhiyun		margin-top: 6px;
200*4882a593Smuzhiyun		padding-top: 15px;
201*4882a593Smuzhiyun		margin-left: 15px;
202*4882a593Smuzhiyun		margin-right: 15px;
203*4882a593Smuzhiyun	}
204*4882a593Smuzhiyun}
205*4882a593Smuzhiyun
206*4882a593Smuzhiyun/* entire container, keeps perspective */
207*4882a593Smuzhiyun.flip-container {
208*4882a593Smuzhiyun	perspective: 1000;
209*4882a593Smuzhiyun}
210*4882a593Smuzhiyun	/* flip the pane when hovered */
211*4882a593Smuzhiyun	.flip-container:hover .flipper, .flip-container.hover .flipper {
212*4882a593Smuzhiyun		transform: rotateY(180deg);
213*4882a593Smuzhiyun	}
214*4882a593Smuzhiyun
215*4882a593Smuzhiyun.flip-container, .front, .back {
216*4882a593Smuzhiyun	width: 180px;
217*4882a593Smuzhiyun	height: 180px;
218*4882a593Smuzhiyun}
219*4882a593Smuzhiyun
220*4882a593Smuzhiyun/* flip speed goes here */
221*4882a593Smuzhiyun.flipper {
222*4882a593Smuzhiyun	transition: 0.6s;
223*4882a593Smuzhiyun	transform-style: preserve-3d;
224*4882a593Smuzhiyun
225*4882a593Smuzhiyun	position: relative;
226*4882a593Smuzhiyun}
227*4882a593Smuzhiyun
228*4882a593Smuzhiyun/* hide back of pane during swap */
229*4882a593Smuzhiyun.front, .back {
230*4882a593Smuzhiyun	backface-visibility: hidden;
231*4882a593Smuzhiyun
232*4882a593Smuzhiyun	position: absolute;
233*4882a593Smuzhiyun	top: 0;
234*4882a593Smuzhiyun	left: 0;
235*4882a593Smuzhiyun}
236*4882a593Smuzhiyun
237*4882a593Smuzhiyun/* front pane, placed above back */
238*4882a593Smuzhiyun.front {
239*4882a593Smuzhiyun	z-index: 2;
240*4882a593Smuzhiyun	/* for firefox 31 */
241*4882a593Smuzhiyun	transform: rotateY(0deg);
242*4882a593Smuzhiyun}
243*4882a593Smuzhiyun
244*4882a593Smuzhiyun/* back, initially hidden pane */
245*4882a593Smuzhiyun.back {
246*4882a593Smuzhiyun	transform: rotateY(180deg);
247*4882a593Smuzhiyun}
248*4882a593Smuzhiyun
249*4882a593Smuzhiyun.back img {
250*4882a593Smuzhiyun	-moz-transform: scaleX(-1);
251*4882a593Smuzhiyun	-o-transform: scaleX(-1);
252*4882a593Smuzhiyun	-webkit-transform: scaleX(-1);
253*4882a593Smuzhiyun	transform: scaleX(-1);
254*4882a593Smuzhiyun	filter: FlipH;
255*4882a593Smuzhiyun	-ms-filter: "FlipH";
256*4882a593Smuzhiyun}
257*4882a593Smuzhiyun
258*4882a593Smuzhiyun.panel-box p {
259*4882a593Smuzhiyun    height: 1.5em;
260*4882a593Smuzhiyun}
261